Working with Objects and Styles (Chapter 13)

Objectives

• • • • • • • • • • • Midterm 2: Friday 11/14 (Chapters 10-14) Objects and the DOM Reference documents objects by ID, name, and tag Object collections, object properties and methods CSS styles Apply an event handler to an object Mouse events Object detection Create an animation with timed functions Explore how to create sliding and tabbed menus Create custom objects

Introducing Pull-Down Menus

• In a pull-down menu, a menu title is always visible to the user, identifying the entries in the menu – http://faculty.wwu.edu/~granier/info/dhtml/menus/ – Book Chapter 13 • So, how do we do it?

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

•

Exploring the DOM

DOM:The organized structure of objects – Why? to make every object related to the document (or to the Web browser) accessible to a scripting language

Document Object Model • Each document object model organizes objects into a hierarchy known as a document tree

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

•

Referencing Objects

Object collections are arrays consisting of more than one of the same type of object

Accessing HTML Elements (Nodes)

• Accessing an HTML element is the same as accessing a Node.

– You can access an HTML element in different ways: • By using the getElementById() method • By using the getElementsByTagName() method • By using the getElementsByClassName() method

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: document.getElementsByTagName

(tag) To reference an array of elements based on the value of the name attribute, use: document.getElementsByName

(name) and

the querySelector() and querySelectorAll() methods (page 894)

http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml

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

Exploring Object Methods

• The syntax for applying a method to an object is object.method(parameters)

Working with Event Handlers

• • All objects can be affected by events initiated by the user or browser See: – window.onload = init; – onChange and onClick – Roll Over

Programming a Pull-Down Menu

• The this keyword references the currently active object in the Web browser

Animating a Pull-Down Menu

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 page or behind another object

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

Exploring Custom Objects

• •

Instances

– Specific objects

Classes:

– The general object itself – var thisDate = new Date(); •

Object constructor

– function defining properties of a whole class of objects