XPXPXPXPObjectives• Learn about objects and the document object
model• Reference documents objects by ID, name, and
tag name• Work with object collections• Work with object properties and CSS styles• Study the syntax of object methods• Apply an event handler to an object
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 2
XPXPXPXPObjectives• Work with mouse events• Employ object detection to avoid programming
errors• Create an animation with timed functions• Explore how to create sliding and tabbed menus• Retrieve values from a style sheet• Create custom objects
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 3
XPXPXPXPIntroducing Pull-Down Menus• In a pull-down menu, a menu title is always
visible to the user, identifying the entries in the menu
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 4
XPXPXPXPIntroducing Objects, Properties, Methods, and Events• JavaScript is an object-based language– Based on manipulating objects through the use of
properties, methods, and events
• JavaScript supports three types of objects– Built-in objects– Document objects– Customized objects
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 5
XPXPXPXPExploring the Document Object Model• The organized structure of objects is called the
document object model (DOM)– Goal is to make every object related to the document
or to the Web browser accessible to a scripting language
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 6
XPXPXPXPExploring the Document Object Model• Each document object model organizes objects
into a hierarchy known as a document tree
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 7
XPXPXPXPReferencing Objects• Each object is identified by an object name• To indicate the location of an object within the
hierarchy, you separate each level using a dot– Dot syntax
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 8
XPXPXPXPReferencing Objects• Object collections are arrays consisting of more
than one of the same type of object
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 9
XPXPXPXPReferencing Objects• To reference an object as part of the collection in a document, use
eithercollection[idref]
orcollection.idref
• To reference a document object based on its ID, use:document.getElementById(id)
• To reference an array of elements based on the tag name, use:object.getElementsByTagName(tag)
• To reference an array of elements based on the value of the name attribute, use:document.getElementsByName(name)
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 10
XPXPXPXPWorking with Object Properties• Most objects are associated with one or more
properties– object.property
• To set the value of an object property, use:object.property = expression
• To apply a CSS style to a document object, use:object.style.attribute = expression
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 11
XPXPXPXPExploring Object Methods• The syntax for applying a method to an object isobject.method(parameters)
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 12
XPXPXPXPWorking with Event Handlers• All objects can be affected by events initiated by
the user or browser
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 13
XPXPXPXPProgramming a Pull-Down Menu• The this keyword references the currently active
object in the Web browser
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 14
XPXPXPXPAnimating a Pull-Down Menu• Create the illusion of a menu being pulled down
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 15
XPXPXPXPCreating Other Types of Menus• In a pop-up menu, a user clicks an object on the
page and the menu appears, sometimes elsewhere on the page
• In a sliding menu, a menu is partially hidden either off the Web page or behind another object
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 17
XPXPXPXPCreating Other Types of Menus• In a tabbed menu, several menus are stacked on
the page with one part of each menu visible to the user
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 18
XPXPXPXPExploring Custom Objects• Specific objects are referred to as instances of
the object, while the general object itself is the object class– var thisDate = new Date();
• An object constructor is a function that defines the properties of a whole class of objects
New Perspectives on HTML, XHTML, and Dynamic HTML, 4e 19