1. Tutorial 13 Working with Objects and Styles

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

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

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

17. 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

18. 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

19. 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