Learning JavaScript

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

The course was developed as a one-day workshop GetSET summer technology camp for high school girls. The shorter version was 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 exercise files used for the 1-day course:

• First web page
• First javascript program
• Change background color
• Change Color in a Loop
• Current Time
• Grow Flowers
• Flower Jump
• Guess the Number
• Hangman

If you want to cheat, some older Solved exercises are also online (some of them might not be up to date -- they solve older versions of the exercises).

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

• Google Les Paul guitar
• Google Pacman
• Repossessed Form
• Scuba Swap
• Slot Machine
• Goat Riddle
• Sudoku
• Highcharts graph demo
• Highcharts dynamic graph

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. Lots of pages on the web give tons of Javascript errors, so click Clear before you start testing your own Javascript page. You can also type Javascript directly in to the Error Console to try things out.

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.