Having fun with JavaScript

Click here to return
to the opening
scripting survey page.

What is JavaScript? Click here to find out.

Each of the examples below utilizes features of JavaScript. To view each example separately, click on the example reference link at the left side. To view the HTML and JavaScript programming instructions (also called the code) utilized in the example, click on the "view source" link shown within each example.

Does learning JavaScript seem too daunting a quest? The good news is that with a sophisticated Web page editor like Dreamweaver, you can build most of these examples without having to know any JavaScript. How is that possible? To find out, let's start by taking a look at Example 1.

Example 1 Click on the names below to display text in "message boxes". (Example 1 Alternate)
Jefferson Lincoln Roosevelt Kennedy Nixon Reagan

Example 2 Pass the mouse pointer over the names below to display text in a specific area.

Jefferson Lincoln Roosevelt Kennedy Nixon Reagan

 

 

(This text will be replaced when you pass the mouse pointer over a president's name.)

Example 3 Pass the mouse pointer over the text below to display graphics in a specific area.

Blue Star
Gold Star
Green Star
Purple Star
Silver Star
Yellow Star 		Example 3 Alternate #1

Example 4 Swap one image for another
by passing the mouse pointer
over the text below.

Swap one image for another
by passing the mouse pointer
over the image.

Example 4 Alternate

Change this blue star to a gold star. This blue star will change to a gold star.

Change this green star to a purple star. This green star will change to a purple star.

Change this silver star to a yellow star. This silver star will change to a yellow star.

This blue star will change to a gold star.

This green star will change to a purple star.

This silver star will change to a yellow star.

Example 5 Pass the mouse pointer over regions within a map to display different images.

North America Alaska Greenland Canada Contigous 48 states Mexico

Example 5 Alternate

Client-side image maps store the hyperlink information in the HTML document, not in a separate map file as do server-side image maps. When the user clicks a hotspot in the image, the associated URL is sent directly to the server. This makes client-side image maps faster than server-side image maps, because the server does not need to interpret where the user clicked. Client-side image maps are supported by Netscape Navigator 2.0 and later, NCSA Mosaic 2.1 and 3.0, and all versions of Microsoft Internet Explorer.

Example 6 Cycle through a series of images using an array and a time delay.

Example 7 Display an informative message in the Status Line (at the bottom of the window)
by passing the mouse over text or an image or by clicking on something.

Example 7 Alternate

Example 8

Example 9 Validate data and provide immediate feedback. (Example 9 Alternate)

Please enter a number between 1 and 50 and click the Enter button.

Example 10 Choose a list-item and utilize it to display image and text array elements.

Please choose one
of the following stars:

This star is awarded for:

Example 11 Click on Change Color to have JavaScript flash a sequence of color changes utilizing an array of colors and the document.bgColor property.

Example 12 Click on the text below to display graphics in a new window.
Blue Star
Gold Star
Green Star
Purple Star
Silver Star
Yellow Star
Example 13 Simple password access to protected web pages. (Example 13 Alternate)

Please enter the password and click on the "Log in" button below.
(The password is "havefun" without the quotes.)

Password:

Example 14 Provide input, perform calculations, and display the output.

For those who would like to look at a few JavaScript resources, L. Carlson, a UMD ITSS staff member, has started a JavaScript section in the Web Design Reference Site. http://www.d.umn.edu/itss/support/Training/Online/webdesign/ It includes information on JavaScript tutorials, comprehensive sites, articles, scripts, and the recommended book list provided in the "What is JavaScript?" document linked above.