chapter 9 introduction to the document object model (dom) javascript, third edition

Chapter 9

Introduction to the Document Object Model (DOM)

JavaScript, Third Edition

JavaScript, Third Edition 2

Objectives

• Learn about dynamic Web pages

• Study the Document Object Model (DOM)

• Work with the Image object

• Create animation with the Image object

• Learn how to cache images


Introduction

• Businesses want:

– Web sites to include Formatting and images that can be updated without the user having to reload a Web page from the server

– Innovative ways to use animation and interactive Web pages to attract and retain visitors

– To make their Web sites effective and easy to navigate


Introduction (Cont.)

• These kinds of effects:

– Cannot be created with standard Extensible Hypertext Markup Language (XHTML)

– Needs the use of Dynamic HTML (DHTML)

• One of the most important aspects of DHTML is the Document Object Model (DOM)


Creating Dynamic Web Pages

• Dynamic:

– Web pages that respond to user requests through buttons or other kinds of controls

– Various kinds of effects, such as animation, that appear automatically in a Web browser


Creating Dynamic Web Pages (Cont.)

• A dynamic Web page can allow a user to:

– Change the document background color

– Submit a form and process a query

– Participate in an online game or quiz



• To make Web pages truly dynamic, you need more than just XHTML

– Need Dynamic HTML or (DHTML)



• Dynamic HTML (DHTML):

– Refers to a combination of technologies that make Web pages dynamic

• The term DHTML is:

– Combination of JavaScript, XHTML, CSS, and the Document Object Model


The Document Object Model

• Is at the core of DHTML

• Represents the Web page displayed in a window

• Each element on a Web page is represented in the DOM by its own object

• This makes it possible for a JavaScript program to:

– Access individual elements on a Web page

– Change elements individually, without having to reload the page from the server


Document Object Properties


Document Object Methods


Document Object Methods (Cont.)

• Open() method:

– Could be used to create a new document in a window or frame

– Use the write() and writeln() methods to add content to the new document


Document Object Methods (Cont.)

• The close() method:

– Notifies the Web browser that

• You are finished writing to the window or frame

• The document should be displayed


The Image Object

• Represents an image created using the <img> element

• Use to dynamically change an image displayed on a Web page

• Image objects for each <img> element:

– Assigned to elements of images[] array in the order they appear on the Web page


The Image Object (Cont.)

• An Image object contains various properties and events that you can use to manipulate your objects

• The src property:

– One of the most important parts of image object

– Allows JavaScript to dynamically change an image

– Changing assigned value also changes the src attribute associated with an <img> element

• Dynamically changes an image displayed on a Web page


Animation with the Image Object

• You can create simple animation on a Web page:

– Combine the src attribute of the Image object with the setTimeout() or setInterval() methods

• Create an animated sequence with JavaScript by using:

– The setInterval() or setTimeout() methods to cycle through the frames in an animation series

– Each iteration of a setInterval() or setTimeout() method changes the frame displayed by an <img> element


Image Caching

• Technique for eliminating multiple downloads of the same file

• Temporarily stores image files in memory on a local computer

• Allows JavaScript to store and retrieve an image from memory rather than download the image each time it is needed


Image Caching (Cont.)• Images are cached using the Image() constructor of

the Image object

– Creates new Image object

• Three steps for caching an image in JavaScript:

1. Create a new object using the Image() constructor

2. Assign a graphic file to the src property of the new Image object

3. Assign the src property of the new Image object to the src property of an <img> element


Chapter Summary• Dynamic HTML (DHTML):

– Combination of technologies that make Web pages dynamic

– DHTML is a combination of JavaScript, XHTML, CSS, and the Document Object Model

• Document Object Model, or DOM:

– At the core of DHTML

– Represents the Web page displayed in a window


Chapter Summary (cont.)

• The open() method:

– Creates a new document in a window or frame

• The close() method:

– Notifies Web browser that you are finished writing to the window or frame and that the document should be displayed

• An Image object:

– Represents an image created using the <img> element



• Src property:

– One of the most important properties of the Image object

– Allows JavaScript to change an image dynamically



• Image caching:

– Technique for eliminating multiple downloads of the same file

– Temporarily stores image files in memory

– Allows JavaScript to store and retrieve an image from memory rather than downloading the image each time it is needed



• Onload event handler of the Image:

– Use it to be certain that all images are downloaded into a cache before commencing an animation sequence

chapter 9 introduction to the document object model (dom) javascript, third edition

Documents