JS Lab 18 - Objects

Learning Outcomes

• Demonstrate the use of the window object's properties and methods in scripts.
• Demonstrate the correct rules for referencing object's properties and methods.
• Demonstrate the following skills:
  • Create a window.
  • Close a window.
  • Display information in a window's status bar.
  • Create the following types of dialog boxes: Alert dialog box. Confirmation dialog box. Input Prompt dialog box.
  • Delay the execution of a function or expression.
  • Cause a script to repeat a function call or evaluate an expression at a fixed time interval.
  • Cause a script to cease the repetition of a function call or evaluation of an expression.
• Demonstrate how to access the properties and methods of the following Window objects:
  • location
  • history
  • document
  • link
  • navigator
• Demonstrate the correct use and syntax of the following Window properties:
  • window.status
• Demonstrate the correct use and syntax of the following Window methods:
  • window.open()
  • window_name.close()
  • window.alert()
  • window.confirm()
  • window.prompt() [review]
  • window.setTimeout()
  • window.clearTimeout()
  • window.setInterval()
  • window.clearInterval()
  • location.href

Lab Files

• 01_objects.htm
• 02_objects.htm
• 03_objects.htm
• correct_url.htm

Lab 1

• Create a new Web page. Save the file in the 18-Objects folder with the following filename: 01_objects.htm
• General page requirements for the document: 01_objects.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 Objects-1. For example, Sally Student - Objects-1
  • Insert at least 2 JavaScript comments in the document to describe the code.
• The document contains no XHTML tags within the body element.
• Script specification:
  • After the page loads, the document calls a function (vitalInfo) that performs the following operations:
  • Function prompts the user 7 times to enter the following personal information: name, address, city, state, zip code, date of birth, and social security number.
  • Function asks the user to confirm whether he/she wants to see the information he/she entered as you see in Figure 1A below.
  • If the user confirms, then the script displays all the data in a single alert box as you see in Figure 1B below. Note that the dialog box separates each data item by a line break (think "escape sequence").
  • If the user leaves any data item blank, then the function excludes the data item from the output as you see in Figure 1C below. Notice that the user below did not enter a data value for address nor date of birth.
  • If the user does not want to see the information, then the script ends.
• Test each branch of the program code.

Lab 2

• Create a new Web page. Save the file with the following filename: 02_objects.htm
• General page requirements for the document: 02_objects.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 Objects-2. For example, Sally Student - Objects-2
  • Insert at least 2 JavaScript comments in the document to describe the code.
• After the page loads, the document repeatedly turns a message on and off in the status bar, similar to a blinking sign.
• Hints:
  • A "turned off" message might be a single space character.
  • A comfortable interval for the message to change is 1000 milliseconds.
  • A selection structure should swap the message.
  • Use only one setInterval() method

Lab 3

• Create a new Web page. Save the file with the following filename: 03_objects.htm
• General page requirements for the document: 03_objects.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 Objects-3. For example, Sally Student - Objects-3
  • Insert at least 2 JavaScript comments in the document to describe the code.
• Create an XHTML document that redirects users to a different page that you create, correct_url.htm. The document should either redirect the user after 5 seconds or allow the user to click a hyperlink as you see in Figure 3A below.
• Test the program code.