JavaScript, Third Edition Chapter 9 Introduction to the Document Object Model (DOM) 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 JavaScript, Third Edition 2 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 JavaScript, Third Edition 3 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) JavaScript, Third Edition 4 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 JavaScript, Third Edition 5 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 JavaScript, Third Edition 6 Creating Dynamic Web Pages (Cont.) • To make Web pages truly dynamic, you need more than just XHTML – Need Dynamic HTML or (DHTML) JavaScript, Third Edition 7 Creating Dynamic Web Pages (Cont.) • 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 JavaScript, Third Edition 8 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 JavaScript, Third Edition 9 Document Object Properties JavaScript, Third Edition 10 Document Object Methods JavaScript, Third Edition 11 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 JavaScript, Third Edition 12 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 JavaScript, Third Edition 13 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 JavaScript, Third Edition 14 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 JavaScript, Third Edition 15 The Image Object (Cont.) JavaScript, Third Edition 16 The Image Object (Cont.) JavaScript, Third Edition 17 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 JavaScript, Third Edition 18 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 JavaScript, Third Edition 19 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 JavaScript, Third Edition 20 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 JavaScript, Third Edition 21 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 JavaScript, Third Edition 22 Chapter Summary (cont.) • Src property: – One of the most important properties of the Image object – Allows JavaScript to change an image dynamically JavaScript, Third Edition 23 Chapter Summary (cont.) • 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 JavaScript, Third Edition 24 Chapter Summary (cont.) • Onload event handler of the Image: – Use it to be certain that all images are downloaded into a cache before commencing an animation sequence JavaScript, Third Edition 25