Cut and Paste JavaScript

Author: Jim Cerny, jim.cerny@unh.edu    Updated by: Grace Peirce

---

Here's the Plan.

We will concentrate on some basic uses of JavaScript. In most cases 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).

This page uses a Cascading Style Sheet which you can view if you want to!

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 (4th edition) 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 JavaScript Made Easy.
  Look under "User Info" category and choose "Browser/System Detection."
  OR:
  Field Trip to JavaScript Kit.
  Scroll down on the page until you find the link to: "Displaying a user's browser type."
  Here's an instructor version.

• Forms.
  Field Trip to The JavaScript Source.
  Scroll down to select "Basic Validation." With this example, you will need to add some info to the script provided to make it your own. (This is also an example of bad HTML syntax.)
  An instructor example of basic forms validation.

• Calendar.
  Field Trip to The JavaScript Source. Select "Site Contents". Choose the "Calendars" category. Then "Select-A-Month," way at the bottom of the page.
  Here is an instructor version.

• 3 Level Click Menu.
  Field Trip to ScriptSearch.com.
  Scroll down and click on "Scripts-New" and then choose "Navigation." There are many menus to choose from. Some are better than others. There used to be a link called "3 Level Click Menu." This link would take you eventually to a Website called "scriptbreaker.com" which is no longer available. This example uses references to scripts in 2 external ".js" documents, as well as an external .css file (Cascading Style Sheet).
  Here's an instructor version.
  And here's instructions and what you need to make your own.

• 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.
  Take a look at these eyeballs too. Oh! and check out the swirling balls.

• Games.
  There are many game-related functions you can do with JavaScript. For example, you can play hangman, Or you can have fun with Slippery Bill .

• ImageReady.
  Let's create a simple rollover graphic using Adobe's ImageReady (comes with Photoshop versions 6 & 7), and take a look at the HTML and JavaScript that ImageReady generates automatically for you.

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

• Jim Cerny's links to more script examples.
  
  • HTML template for JavaScripting. 02-NOV-2000
  • Bad Hemingway forms and popup window.
  • Billboard Images.
  • Browser Detection basic.
  • Browser Detection so-called "ultimate". 29-JAN-1999
  • Computer Years Calculation. 12-FEB-1999
  • Dog Years Calculation.
  • Dynamic Text.
  • E-mail Address Eval.
  • E-mail Address Eval external script.
  • Hi World.
  • Including Files - Client Side. 23-SEP-1998
  • Including Files - Server Side. 03-JUN-1999
  • LED Sign.
  • Linkulator Link Manipulation. 11-MAR-1999
  • Popup Window basic.
  • Popup Window with 6 second timeout.
  • Pseudo URL.
  • Quiz.
  • RollOver status line.
  • RollOver simple graphic.
  • Typing Marquee.