Web Design/An Introduction to Programming With JavaScript
Web Design -> An Introduction to Programming with JavaScript
DeliciousFruitFromOSWD.png
This page is part of the Web Design project.
CSSZenGardenLikeTheSea.png

JavaScript has a tainted history of image-rollovers and marquee-texts flashing across the page, but it's now coming of age with heaps of amazing effects and new possibilities for Web Design! As an example, Google Maps is just one application that uses JavaScript to enable excellent user interaction on a web page. But getting back to the basics where we'll begin...

Outline

This topic aims to help you learn the basics of programming with JavaScript. Specifically,

  • How to include JavaScript code in your Web pages
  • Using the JavaScript 'alert' function
  • Events in a web-browser (onmouseover, onclick, etc.)
  • Creating pop-up windows
  • Getting your program to make decisions: if-statements
  • Form validation: Checking a HTML form with JavaScript.
  • Expanding/Collapsing sections of your HTML Page with JavaScript.

Lesson

Main source: Basic JavaScript

Suggested Activities

  • Web Programming Intro - Research some of the fundamental principles of computer programming to create an ongoing resource of your own!
  • JavaScript Pen-n-paper Activities - Sometimes it's helpful to get away from the computer and get an old-fashioned pencil out and learn! These activities will help re-enforce your JavaScript skills.
  • Web Design/AJAX Challenges - (Advanced) Get started with some tutorials and challenges to learn the basics of AJAX.

Your learning resources

Online tutorials

  • Web Development And Design Tutorials - This website provides a series of web development tutorials from creating simple HTML pages to more complex dynamic web pages.
  • Introduction to creating dynamic webpages! - This tutorial lets you learn through interactive coding, it sets you goals and progresses easily but thoroughly.
  • Introduction to Programming - This tutorial starts right from the beginning helping you to learn what programming is as a non-programmer (Written by a graphic artist!). Part 2 of this tutorial introduces some Object-Oriented programming concepts. It might be good to read this before going on to other more practical tutorials.
  • Learn to write JavaScript - An excellent free online intro to JavaScript! Includes basics through to form validation and DHTML! (Moves quite fast).
  • W3Schools JavaScript tutorial - Lots of info with some interactive activities (and lots of ads).
  • Code Avengers JavaScript course - Fun and effective course; especially great for the absolute beginner.

Examples

The following examples from W3Schools demonstrate some typical uses of JavaScript

Online Reference

  • CSS Cheat Sheet - everything you'll ever need to remember about CSS all packed onto one page!
  • Web Design References - A huge mega-reference (nearly 6,000 links) of information and articles about web design and development. It is dedicated to disseminating news and information about web design and development with emphasis on elements of JavaScript CSS, accessibility, web standards, user experience, and much more.
  • - Web Design Update - A a plain text email digest newsletter. It typically goes out once a week. All web designers and developers are invited to join.

More advanced JavaScript

The following links might give you an idea of what's possible even though they go well beyond the scope of this topic!

  • Apple's Form Validation - a page explaining the JavaScript code that Apple recommends for email, numbers etc (more advanced - includes scary regular expressions!)
  • JavaScript form validation - Input validation that displays messages on your actual page (without using alert boxes). Looks great but is quite complex.
  • script.aculo.us - Examples of some of the visual effects and interactivity that's possible with modern JavaScript and CSS.
  • Getting started with jQuery - jQuery is an amazing JavaScript library that makes it easy to create wonderful web effects in just a few lines of code.

Books

  • JavaScript - A Study Guide for learning JavaScript!

Related Qualifications

You can find out how what you've learned in this module relates to qualifications in your country on the An Introduction to Programming with JavaScript:Quals page.

Further reading


  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.

Web_Design/An_Introduction_to_Programming_with_JavaScript
 



 

Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.


Manage research, learning and skills at defaultLogic. Create an account using LinkedIn or facebook to manage and organize your Digital Marketing and Technology knowledge. defaultLogic works like a shopping cart for information -- helping you to save, discuss and share.

Visit defaultLogic's partner sites below:
PopFlock.com : Music Genres | Musicians | Musical Instruments | Music Industry
NCR Works : Retail Banking | Restaurant Industry | Retail Industry | Hospitality Industry

  Contact Us