Web Design/An Introduction to Programming with JavaScript

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...

Web Design An Introduction to Programming with JavaScript
This page is part of the Web Design project.



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.



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.



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.



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