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.

Setup

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:
   • foreground and background colour, title, URL, date of last modification, and referrer.
   • E.g.
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:
   • onmouseover="window.status='Uganda Martyrs University Intraweb Home'; return true;"
   • onmouseout="window.status=''; return true;"
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:
   • onmouseover="mypic.src='awake.gif'"
   • onmouseout="mypic.src='stop.gif'"
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="http://home.umu.ac.ug/">Uganda Martyrs University
5. Add an option for three other links.
6. Save and test.

Form Validation

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.
   • Add a function named validate which has one argument, myform.
     1. Test if myform.email.value is equal to "" (the empty string).
     2. If so, print an alert "Please enter your e-mail address." and return false.
     3. Otherwise print an alert "Form submitted with e-mail address " + myform.email.value and return true.
5. Save and test.

Submit the Assignment

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