Web Design/An Introduction to Programming with JavaScript

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

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

Suggested Activities

• Alice in Wonderland - Have fun creating and interacting with your own 3D world... and learn the fundamentals of computer programming while you're at it!
• Web Design/Getting to know JavaScript events - Taking your first steps through JavaScript with a bit of fun!
• Web Design/Getting to know the Document Object Model with JavaScript - See how using the document and a few IF statements can help validate forms!
• JavaScript Challenges Build on your skills with the document and window objects and apply your knowledge to solve these problems!
• Debugging your JavaScript with Firebug - Learn how to find the errors in your JavaScript and fix them (using Firebug)!

• 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

• Simple Popup - Opening a popup window.
• More useful Popup - Controlling the popup window's size and other properties.
• Form Validation 1 - Checking the number of characters entered into a form field.
• Form Validation 2 - Validating a few fields on a form.
• Basic email validation - Making sure the user included an '@' symbol in an email field.

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