Modifying Existing JavaScript

Purpose

This exercise is meant to make the student feel comfortable copying existing JavaScript programs into their XHTML files and modifying them to fit a new purpose. The scripts will all be taken from The JavaScript Source, a site with tutorials, "cut-n-paste" scripts, and plenty of other resources. They can be found at http://javascript.internet.com/.

The scripts available from The JavaScript Source can be inserted into any XHTML file simply by copying the code from the script's page and pasting it into your XHTML file. Many times, the scripts are presented within the full HTML file and the user doesn't even need to add the HTML tags in order for it to work.

Exercise 1: Creating a "Back Button"

Begin this exercise by creating a blank XHTML file. You may use Notepad or Dreamweaver, it doesn't matter as long as you can directly edit the XHTML code. Add some text to the page to indicate the purpose of this lab. For example, you could simply say:

This page, created as a laboratory exercise for the Fall 2003 section 001 of CSCI 1710, will contain a number of JavaScripts obtained and modified from The JavaScript Source.

Within the document you've created, add a form. Inside of the form, add a standard button input. Your XHTML code will look something like this:

<form>

      <input type="button" value="Back">

  </form>

Go to the The JavaScript Source website. You should see a box with links in it toward the top of the page (typically you can find it immediately under the banner advertisements). This box contains links to the different categories of scripts that can be downloaded including topics such as calendars, clocks, games, etc. Click on the link for the "Navigation" category.

The page that is loaded will list numerous scripts that can be added to your page to aid in navigation. Select the script titled "Back Button".

There should be a large text box in the middle of the page describing the back button. Examine the code inside of that text box and you should find a tag for an input of type button. In that tag, you should see the code for the event "onClick". Copy that event and its JavaScript to your input button.

Now open your page in a browser and test the button. Does it work?

Exercise 2: Slide Show

From the "Miscellaneous" catagory, select the Fading Slide Show.

Change the script's parameters so that:

The images are displayed for 2 seconds rather than 5
The crossover fade duration is 1 second rather than 3
The images used are to be the following (download them to the same directory as your JavaScript file by clicking on the right mouse button and selecting to save the target):
- E.gif
- T.gif
- S.gif
- U.gif
- space.gif
The width and height of the image is 80 pixels by 80 pixels

Exercise 3: Forms

From the CDROM that came with your textbook, open the form that we discussed in class that addresses the validation of fields (Figure 15.17). Go back to the home page of The JavaScript Source and select forms from the menu.

There are a number of scripts here that allow you to modify or validate the information that a user might add to your forms. Select one of them to add to the textbook's form.

Use the window.alert() function to output the results of the script.

Exercise 4: Find Your Own Scripts

Browse The JavaScript Source for at least two additional scripts you can add to your page. Try adding a scrolling text to the status bar or maybe a countdown timer. You may also go to other JavaScript sites to get more scripts.