Lab 9: JavaScript

What You Will Do Today

  1. Insert automated document information into the page.
  2. Display a link mouseover message in the status bar.
  3. Change a linked image with a mouseover.
  4. Link to other pages using a dropdown menu.
  5. Validate a form using a function.


  1. Look at the JavaScript examples in /home/umu/WebResources/javascript/examples/.
  2. Create a folder named weblab9 in your folder.
  3. Open a new page in Mozilla Composer.
  4. The page title and a Heading 1 should both be Web Lab 9 by Your Name.

Document Information

  1. Type Document Information and format as Heading 2.
  2. Add a script tag of type text/javascript.
  3. Use a writeln statement and the Date() function to display the time:
  4. Use writeln statements to display the following document properties, one per line:
  5. Save and test in a browser.

Mouseover Status Message

  1. Type Mouseover Link and format as Heading 2.
  2. Type UMU and link to the UMU home page.
  3. Add the following attributes to the link:
  4. Save and test in a browser.

Mouseover Image

  1. Type Mouseover Image and format as Heading 2.
  2. Copy the files awake.gif and stop.gif into your weblab9 folder.
  3. Insert the image stop.gif into the page.
  4. Link the image to javascript:alert("Meow!")
  5. Add an attribute name="mypic" to the image tag.
  6. Add the following attributes to the link:
  7. Save and test in a browser by moving the mouse over the image, then clicking it.

Links Menu

  1. Type Links Menu and format as Heading 2.
  2. Add a select tag with the attribute onchange="document.URL=options[selectedIndex].value".
  3. Add an option <option value="javascript:alert('Please select a site.')">Select a Site
  4. Add an option for UMU, e.g. <option value="">Uganda Martyrs University
  5. Add an option for three other links.
  6. Save and test.

Form Validation

Please enter your e-mail address.

  1. Type Form Validation and format as Heading 2.
  2. Create a form with attributes name=myform onsubmit="return validate(myform)"
  3. Add three elements, each on its own line:
    1. Text indicating "Please enter your e-mail address."
    2. A text field named email of width 40.
    3. A submit button labeled "Submit Query."
  4. Add a script tag in the head of the document.
  5. Save and test.

Submit the Assignment

  1. Use Ark to compress your weblab9 folder to
  2. Send the file as an e-mail attachment to with subject line web lab 9.