OBJECTIVE

• Explain the document object model of JavaScript.  
• List the main objects and their properties. 

DISCUSSION

• A "container" or "programming construct" that can hold data (properties), perform actions (methods), and respond to events.
  • Examples
    • document
    • window
• Property
  • A characteristic of the object
  • Like an adjective
  • Examples
    • document.bgColor
    • window.name
• Method
  • An action the object can do
  • Like a verb
  • Examples
    • document.write()
    • window.alert()
• Event
  • An action the object responds to
  • Examples
    • onClick (for document object)
    • onLoad (for window object)

• The collection of JavaScript objects for web page elements
  • Different for different browsers
• Objects are arranged hierarchically in tree-like structure
• Objects have properties, methods, and events
• Top-most (parent) object is the window object

Property Viewer   

EXERCISES

1.  Use the property viewer to create a chart that shows the JavaScript objects and how they are related.  Your chart should be like an organizational chart or be in list format.  You need to show both the window and document objects and their immediate child objects.  The window object should be at the top of your chart/list.  You should only show the objects; do not show the properties and events.

2.  List the properties for the window and document objects.  Do not list events or methods or sub-objects.

3.  In the Property Viewer, type "window.document.all".  What is displayed?  What do they represent? 

4.  In the Property Viewer, type "window.document.all[0]".  What is displayed?  Repeat for window.document.all[i] for i = 1 to 11.  What is being displayed?  What does the property "nodeName" represent?

5. In the Property Viewer, type "window.document.all.Text1".  What is displayed?  what is "Text1"?

6.  Create a web page and use script and the properties of the window and document object to:

1. Set the title of the document to "Exercise 6.2.3".  Do not set the title in HTML.
2. Display the location of the window.
3. Display the top position of the window.
4. Display a message in the window's status bar.
5. Set the background color of the document to red. Do not set the background color in the HTML tags.
6. Display the date that the file was modified.
7. Display the size of the document.

LINKS AND HELP