Learning JavaScript

This is an online introduction to programming using the Javascript language.

The course was originally developed for a one-day workshop GetSET summer technology camp for high school girls. The shorter version was originally developed as a Toastmasters project.

You don't need any previous knowledge of programming, Javascript, HTML or web page design. But a little HTML knowledge will help a lot when you start writing your own Javascript programs.

The courses are offered as slideshows (running in Javascript in the browser, of course!) with built-in exercises. I recommend Firefox for viewing them; the slideshows should work to some extent in most browsers, but some features might not work as well and the text assumes Firefox.

Exercises

The exercises from the 1-day course:

• First Javascript Program
• Change Color
• Change Color in a Loop
• Current Time
• Guess the Number
• Hangman
• Grow Flowers
• Flower Jump

If you want to cheat, the Solved exercises are also online.

Some Assorted Javascript Examples

Here are standalone versions of some of the JavaScript examples used in the courses. The examples show you some of the fancy effects JavaScript can help you create in your web pages.

Tip: View->Page Source on any web page (not just these!) will show you the HTML which produced the page, plus any JavaScript code which is included in the page. (More tips below.)

Change Colors

Demonstrates how JavaScript can change the text, background, and link colors on a page, and how to prompt the user for input.

Scrolling Text

Demonstrates simple animation, by scrolling a block of text upward.

Current Time

Demonstrates a loop, getting the current time and updating a text field.

Flowers:

This is a series of examples where each one builds on the previous one to add another feature.

Flowers 0

A basic HTML page with a picture of a flower, using the CSS position:absolute property.

Flowers 1

The user can move the flower by clicking in different places. Demonstrates how to capture mouse events.

Flowers 2

Each time the user moves the flower, the picture changes to a different flower. Demonstrates how to change an image, and how to use random numbers.

Flowers 3

Adds a new and different flower each time the user clicks. Demonstrates how to add a new element to a document.

Flowers 4

Lets the flowers "grow" on their own without requiring clicks from the user. Combines the techniques in the previous "flower" examples plus animation similar to what's used in the scrolling text examplesc.

Hangman

A Hangman game written by Sara Falamaki at age 16 (now a professional programmer). Here's her original Hangman geocities page.

Cool Javascript Examples on Other Sites

• Virtual Paper Squirrel
• Repossessed Form
• Scuba Swap
• Slot Machine
• Goat Riddle
• Sudoku

Tip: When you're developing JavaScript, use the Error Console in Firefox (Tools->Error Console -- in earlier versions it was called the Javascript Console) so you can see your errors and warnings.

If you want to be extra careful about the JavaScript you write, you can also set "strict" mode: browse to about:config (type that into your browser's address bar and hit return), type "javascript" in the Filter field, and doubleclick on the javascript.options.strict line to set it to true. Then Firefox will show you warnings as well as errors in the console.