JS Lab 19 - Events

Learning Outcomes

Event Handlers

• Demonstrate the correct use and syntax of the following browser window event handlers:
  • onblur onclick onfocus onload onunload onmouseover onmouseout

Lab Files

• 01_events.htm
• 02_events.htm
• 03_events.htm
• 04_events.htm

Lab 1

• Create a new Web page. Save the file with the following filename: 01_events.htm
• General page requirements for the document: 01_events.htm
  • Your document must pass W3C Validation.
  • Use the XHTML 1.1 DTD.
  • Insert two meta elements to identify the author (you) and document description.
  • Place your name in the page title followed by Events-1. For example, Sally Student - Events-1
  • Insert at least 2 JavaScript comments in the document to describe the code.
• The Web page prompts the user for his/her name as the page loads.
• After the page loads, the Web page displays the user's name with a welcoming message as you see in Figure 1A below. Use a function to perform this operation. Note: the Web page displays this message, not a dialog box.
• Test the program code.

Lab 2

• Create a new Web page. Save the file with the following filename: 02_events.htm
• General page requirements for the document: 02_events.htm
  • Your document must pass W3C Validation.
  • Use the XHTML 1.1 DTD.
  • Insert two meta elements to identify the author (you) and document description.
  • Place your name in the page title followed by Events-2. For example, Sally Student - Events-2
  • Insert at least 2 JavaScript comments in the document to describe the code.
• After the page loads,
  • The page displays an alert dialog box that displays the URL of the current page as you see in Figure 2A below.
  • Use a function to perform this operation.
• Test the program code.

Lab 3

• Create a new Web page. Save the file with the following filename: 03_events.htm
• General page requirements for the document: 03_events.htm
  • Your document must pass W3C Validation.
  • Use the XHTML 1.1 DTD.
  • Insert two meta elements to identify the author (you) and document description.
  • Place your name in the page title followed by Events-3. For example, Sally Student - Events-3
  • Insert at least 2 JavaScript comments in the document to describe the code.
• Create a new Web page that includes the following specifications.
  • The Web page should contain a list of hyperlinks to three of your favorite web sites as you see in Figure 3A below.
  • When the user clicks a hyperlink, a script displays a confirmation dialog box asking if the user wants to visit the associated web site as you see in Figure 3B below.
  • When the user clicks OK, the page links to the related web page. When the user clicks Cancel, the page cancels the link.
  • The page should call a different function for each hyperlink.
• Test the program code.

Lab 4

• Right-click the link below, select the Save Target As command, and then save the file with the 04_events.htm filename to the Events Lab directory. Lab 4 data file.
• General page requirements for the document: 04_events.htm
  • Your document must pass W3C Validation.
  • Use the XHTML 1.1 DTD.
  • Insert two meta elements to identify the author (you) and document description.
  • Place your name in the page title followed by Events-4. For example, Sally Student - Events-4
  • Insert at least 2 JavaScript comments in the document to describe the code.
• Revise the Web page to include the following specifications.
  • After the page loads into the browser, the browser's status bar displays the following message: This survey helps us develop better software.
  • Whens the user leaves the Name text box field, the browser displays an alert dialog box containing the following information: Your name is: user's name
  • When the user clicks inside the Software Use textarea field at the bottom of the form, the browser's status bar displays the following message: Please describe the type of computer activities you normally perform.
  • When the user submits the survey form, the browser displays an alert dialog box containing the following message: Thank you for participating in this survey.
• Save the document, then test the program code.