JavaScript by Example: Hands-on Packet.

author: jim.cerny@unh.edu

---

Here's the Plan.

We will concentrate on some basic uses of JavaScript. In each case we will make a "field trip" to download from a script library, using copy-and-paste to place the starting JavaScript code into a minimal HTML file (and if necessary make some small changes to the code).

Hands-on Examples.

• HTML template.
  Make an HTML template. Key from this template by the instructor. Save as "jstemp.html".

• Hello world.
  Hello world! Key from this example by the instructor, using your template, and save as "hello.html".

• Rollovers or mouseovers.
  A basic graphical rollover. Copy from this example by the instructor.
  Make a field trip to Negrino and Smith's Joy of JavaScript and copy Chapter 3, Script 5, "working with multiple rollovers".
  Here's an instructor version.
  Look at the detailed discussion of rollovers at Doc JavaScript, Column 1.

• New windows.
  Make a field Trip to Negrino and Smith's Joy of JavaScript.
  Try Chapter 5, Script 1, "opening a new window".
  Here's an instructor version.
  But see Jakob Nielsen's Top Ten New Mistakes, No. 2.
  A window that times out.
  Check out the bouncing window.
  And look at the combination of a form, story-writing, and new window with bad Hemingway.

• Browser detection.
  Field Trip to Popeney's JavaScript Made Easy.
  Look under the "User Info" category and choose "Browser/System Detection".
  Here's an instructor version.

• Forms.
  Field Trip to Cut and Paste JavaScript at Infohiway. Select "Guestbooks and visitor tracking." Then select "No-CGI Form Script."
  An instructor example of forms validation.

• Calendar.
  Field Trip to The JavaScript Source. Select "Site Contents". Then choose the "Calendars" category. Then "Select-A-Month".
  Here is an instructor version.

• Menu bar.
  Field Trip to ZDNet's JavaScript Library.
  Look under the "Navigation" category and choose the editor's pick called "Menubar."
  Here's an instructor version.

• Tricks.
  There are various tricks you can do with JavaScript that may be useful in limited situations. For example, you can disable the right-click button on the mouse. Or you can have mouse-chasing text that follows the mouse, taken from the stupid Web tricks area at CNET.

• Individual lab work.
  Now select a script (or two) of your own choosing and it into a working HTML page(s).