CS 312 - Internet Concepts
Fall 2011: Tues/Thurs 3-4:15pm, Dragas 1117

Announcements

Staff

Schedule

Syllabus

Useful Links

JavaScript Lab Day

November 1, 2011

Setup

If you didn't do this last week:

Create a new directory ~/public_html/cs312/labs for your lab exercises and set the permissions so that it the web server (anyone) can access it (chmod 755 ~/public_html/cs312/labs).

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) Create a JavaScript function named welcome that pops up an alert message that says "Welcome!".

b) Create a button that calls the JavaScript function welcome when the user clicks it.

c) Create a block of text (can be in a div, p, header, ...) that calls the JavaScript function welcome when the user moves the mouse pointer over it.

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 on the webpage below the form

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: