JavaScript Lab Day

November 18, 2010

Setup

If you didn't do this last week:

Create a webpage named js-lab.html and a JavaScript file named js-lab.js for today's lab exercises under ~/public_html/cs312/labs. You can use this single webpage and single JavaScript file for all of today's exercises. Don't forget to set the permissions on both files (chmod 644 ~/public_html/cs312/labs/js-lab.*).

For the HTML file, make sure that you load the external JavaScript file in the head section.

Submission

As you complete each lab exercise, let me know and I'll come check it out.

Debugging

• Firefox: Tools > Error Console
• Chrome: View > Developer > JavaScript Console

Lab Exercises

1) Event Handlers

a) Write the XHTML tag and event handler to pop up an alert message that says "Welcome" when the user clicks a button.

b) Write the XHTML tag and event handler to pop up an alert message that says "Welcome" when the user moves the mouse pointer over a link that says "Hover for a welcome message".

Note that you only need to write one JavaScript function to complete both parts of this exercise.

2) Form Access and Dynamic Pages

Create a form that asks the user to enter their name, age, and hometown. When the user presses the Submit button, call a JavaScript function. The JavaScript function should perform the following actions:

• display the user's name and year they were born (depending on actual date of birth) on the webpage below the form
• display a link to Google (or Bing) search results for the name of their hometown

3) Rollover Image

Use JavaScript to create a rollover image. Choose two images with the same size. Display one image. When the mouse passes over the image, change it to the second image. When the mouse leaves the image, change back to the original image. If you can't find two images that you like, you can use these:

• http://www.cs.odu.edu/~mweigle/icons/lsu-helmet.jpg
• http://www.cs.odu.edu/~mweigle/icons/odu-helmet.jpg