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.
Academic Honesty!
It is not our intention to break the school's academic policy. Projects posted are only used as a reference and should not be submitted as is. We are not held liable for any misuse of the solutions. Please see the frequently asked questions page for further questions and inquiries.
Kindly fill out the form. Please provide a valid email address and we'll get back to you in less than 24 hours. We will be sending an invoice through PayPal upon confirmation. We are a non profit organization however we need an amount to keep this organization running, and to be able to complete our research and development.