Tutorial 13 Working with Objects and Styles

XP Objectives 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, 4e2

XP Objectives 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, 4e3

XP Introducing 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, 4e4

XP Introducing 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, 4e5

XP Exploring 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, 4e6

XP Exploring 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, 4e7

XP Referencing 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, 4e8

XP Referencing Objects Object collections are arrays consisting of more than one of the same type of object New Perspectives on HTML, XHTML, and Dynamic HTML, 4e9

XP Referencing Objects To reference an object as part of the collection in a document, use either collection[idref] or collection.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, 4e10

XP Working 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, 4e11

XP Exploring Object Methods The syntax for applying a method to an object is object.method(parameters) New Perspectives on HTML, XHTML, and Dynamic HTML, 4e12

XP Working with Event Handlers All objects can be affected by events initiated by the user or browser New Perspectives on HTML, XHTML, and Dynamic HTML, 4e13

XP Programming a Pull-Down Menu The this keyword references the currently active object in the Web browser New Perspectives on HTML, XHTML, and Dynamic HTML, 4e14

XP Animating a Pull-Down Menu Create the illusion of a menu being pulled down New Perspectives on HTML, XHTML, and Dynamic HTML, 4e15

XP Animating a Pull-Down Menu New Perspectives on HTML, XHTML, and Dynamic HTML, 4e16

XP Creating 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, 4e17

XP Creating 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, 4e18

XP Exploring 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, 4e19