Chapter 16 Dynamic HTML and Animation

The Web Warrior Guide to Web Design Technologies

Chapter Objectives

In this chapter you will:• Study the Document Object Model• Work with the Image Object• Use image caching• Use JavaScript with CSS styles• Use CSS positioning in Netscape and Internet

Explorer• Study cross-browser compatibility

Introduction

• HTML would be much more useful if it were dynamic

• The word dynamic refers to Web pages that respond to user requests through buttons or other kind of controls. It also refers to various kind of effects, such as animation

• To make Web pages dynamic, you need to use DHTML

• DHTML is a combination of JavaScript, HTML, CSS, and the Document Object Model

Document Object Model

• Collections of objects that descend from one another are referred to as object models

• At the core of DHTML is the Document Object Model– It represents the Web page displayed in a window

• With DOM you can use JavaScript to manipulate HTML elements

• At the top of the DOM hierarchy is the Document object• The DOM lets you change individual HTML elements

dynamically after a page has been rendered, without having to reload the page from the server

Document Object Model

Currently, there are two levels to the W3C DOM:

1. DOM level 1 first defined basic document functionality, such as navigation and HTML element manipulation

2. DOM level 2 introduced style sheet functionality and event handling

Document Object Properties• The DOM contains various properties used for manipulating HTML

objects• Some of the Document object properties include:

– Anchors[]– applets[]– body– cookie– domain– forms[]– images[]– links[]– Referrer– Title– URL

Document Object Methods

• The DOM methods can be used for dynamically generating and manipulating Web pages

• Some of the DOM methods include:– close() - closes a new document that was created

with the open() method– open() - opens a new document in a window or frame– write() - adds new text to a document– writeln() - adds new text to a document, followed by a

line break

The Image Object

• One of the most visually pleasing parts of a Web page is its images

• You can simply include an <img> element with the src attribute set to the URL of the image you want to display

• Each <img> element in an HTML document is represented in the DOM images[] array by an Image object

The Image Object

• An image object represents images created using the <img> element

• Some of the image object properties include:– border– height– lowsrc– src– width

The Image Object

• One of the most important parts of the Image object is the src property

• The src property allows the JavaScript to change an image dynamically

• The src property of the Image object represents the src attribute of an <img> element

The Image Object

• Some of the Image object events include:– onLoad() - executes after an image is loaded– onAbort() - executes when the user cancels

the loading of an image, usually by clicking the Stop button

– onError() - executes when an error occurs while an image is loading

Working with Timeouts and Intervals

• To have some JavaScript code execute repeatedly, without user intervention, you use JavaScript’s timeout and interval methods

• The setTimeout() method is used in JavaScript to execute code after a specific amount of time has elapsed

• The clearTimeout() method is used to cancel a setTimeout() method before its code executes

Working with Timeouts and Intervals

• Two other JavaScript methods that create code that executes automatically are the setInterval() method and the clearInterval() method

• The setInterval() method is similar to the setTimeout() method, except that it repeatedly executes the same code after being called only once

• The clearInterval() method is used to clear a setInterval() method call in the same fashion that the clearTimeout() method clears a setTimeout() method call

Animation with the Image Object

• By combining the src attribute of the Image object with the setTimeout() or setInterval() methods, you can create simple animation in an HTML document

• Web animation can also include traditional animation involving cartoons and movement

• True animation requires a different graphic, or frame, for each movement that a character or object makes

Image Caching

• JavaScript does not save a copy of the image in memory to be used whenever necessary. Instead, each time a different image is loaded by an <img> element, JavaScript must physically open or reopen the image from its source

• This causes the animation to be erratic and slow, especially if you have to download the image from the server each time it is loaded

• To eliminate multiple downloads of the same file, you can used a technique called image caching

• Image caching is the process of temporarily storing image files in memory on a local computer

Image Caching

• The image caching technique allows JavaScript to store and retrieve an image from memory rather than download the image each time it is needed

• You cache images using the Image() constructor of the Image object. The Image() constructor creates a new Image object

Image Caching

• There are three steps for caching an image in JavaScript:– Create a new object using the Image()

constructor– Assign a graphic file to the src property of the

new Image object– Assign the src property of the new Image

object to the src property of an <img> element

Using JavaScript with CS styles

• There was no compatible DHTML standard that worked with both Internet Explorer and Netscape Navigator. This incompatibility was evident when using JavaScript to manipulate CSS styles

• Because JavaScript uses Document object properties and methods to access CSS styles, if you wanted to use JavaScript code to manipulate CSS in older browsers, you had three options:

Using JavaScript with CS styles

• Write code that functioned only in Navigator

• Write code that functioned only in Internet Explorer

• Write both sets of code and execute the correct set depending on which Web browser was in use

Using JavaScript and Styles in Older Versions of Navigator

• The Navigator DOM in older versions of Navigator accesses the styles for selectors using the tags, classes, and ID properties of the Document Object

• The tags property provides access to the styles of elements in an HTML document

• The classes property provides access to the styles of classes in an HTML document

• The ID property provides access to the styles of ID attributes in an HTML document

Using JavaScript and Styles in Older Versions of Navigator

• To refer to a CSS style in older versions of Navigator, you append the tags, classes, or ID property to the Document object with a period

• For the tags and ID properties, you then append the name of a CSS selector, followed by another period and a CSS property

• For the classes property, you must append either the all property to modify all instances of the class or the name of a CSS selector, followed by another period and a CSS property

Using JavaScript and Styles in Older Versions of Internet Explorer

• The Internet Explorer DOM in older versions of Internet Explorer accesses the styles for selectors by using the all property of the Document object

• The all property is an array of all elements in an HTML document

• The all property is appended with a period to the Document object

• The style property represents the CSS styles for a particular tag or ID attribute

Using JavaScript and Styles in Older Versions of Internet Explorer

• To modify the styles for specific HTML elements, you must first gain access to the styles using the tags method

• The tags method returns an array of HTML elements represented by tag name

• You append the tags() method to the all property with a period, and then pass the tag name enclosed in quotation marks to the tags() method

• With the tags() method, the HTML tags that match a specific tag name are assigned to the elements of an array in order in which they are encountered in a document

Using JavaScript and Styles in Older Versions of Internet Explorer

• You append a period and the style property to the array returned by the tags() method, followed by a period and a specific CSS property

• You must use the element number to access a specific element in the returned array

• In order to change style properties for all of the elements in an array returned by the tags() method at the same time, you must use a looping statement

Using JavaScript and styles with the W3C DOM

• In order to manipulate CSS styles with the W3C DOM, you must first gain access to the styles by using either the getElementByID(ID) method or the getElementsByTagName(tag name) method

• The getElementByID(ID) method returns the HTML element represented by ID

• The getElementsByTagName(tag name) method returns an array of HTML elements represented by tag name

Using JavaScript and styles with the W3C DOM

• The getElementByID(ID) and getElementsByTagName(tag name) methods are appended to the Document object with a period

• After using the getElementByID(ID) method to assign a tag to a variable, you then append a period and the style property to the variable, followed by a period and a specific CSS property

• The style property represents the CSS styles for a particular tag, class, or ID, the same as in the Internet Explorer DOM

Using JavaScript and styles with the W3C DOM

• Instead of assigning the tag returned by the getElementByID() method to a variable, you can use the Document object and getElementByID() method directly in a statement that modifies a CSS style

• With the getElementsByTagName() method, the HTML tags that match a specific element name are assigned to the elements of an array in the order in which they are encountered in a document

• You append a period and the style property to the array returned by the getElementsByTagName() method, followed by a period and a specific CSS property

CSS positioning

• To reposition an image on a Web page, you need to use CSS positioning

• CSS positioning is supported in W3C DOM-compliant browsers as well as older versions of both navigator and Internet Explorer

• There are two types of CSS positioning:– Relative positioning– Absolute positioning

CSS Positioning

• Relative positioning places an element according to other elements on a Web page

• Absolute positioning places elements in a specific location on a Web page

• Relative positioning is mainly used for the design and layout of Web pages. Absolute positioning is used with JavaScript to create full animation, among other things

• You usually add positioning to elements with in line styles

• You can also use CSS positioning in a document-level style sheet

• Older navigator versions do not recognize CSS positioning for empty elements

Dynamic Positioning in Older Versions of Internet Explorer

• You dynamically position an element in Internet Explorer by appending the all property of the Document object, followed by a period and the name of a specific CSS selector, followed by the style property. Finally, you append another period and the left or top CSS properties

• Combining the left and top CSS properties with a setTimeout() or setInterval method allows you to create traveling animation

Dynamic Positioning in Navigator• Older versions of Navigator do not use CSS

positioning for dynamic animation. Instead, you must use layers

• Layers are Web page elements that are used in Navigator for positioning other elements. You can still use CSS positioning with Navigator, but not for traveling animation

• You create a layer in an HTML document by using a <layer> element

• You use left and top attributes of the <layer> element to specify an initial position for a layer

Dynamic Positioning in Navigator

• JavaScript accesses each <layer> element by using a Layer object

• The Layer object contains several properties and methods for manipulating layers in JavaScript

• The two methods of the layer object that create traveling animation in Navigator are the moveTo() method and the offset() method

• The moveTo() method moves a layer to a specified position; it accepts two argument. The first argument represents the number of pixels from the left side of the window, and the second argument represents the number of pixels from the top of the window

Dynamic Positioning in Navigator

• The offset() method moves a layer a specified number of pixels horizontally and vertically from its current position

• It accepts two arguments. The first argument represents the number of pixels to move horizontally, and the second argument represents the number of pixels to move vertically

• You refer to a specific layer in JavaScript by using its position in the layers[] array or by using the value assigned to the <layer> element’s name attribute

Dynamic Positioning with W3C DOM-compliant Browsers

• Dynamic positioning with JavaScript in W3C DOM-compliant browsers is quite similar to positioning with JavaScript in the Internet Explorer DOM

• You move an element using the style property and the left and top CSS properties. The only difference is that you replace the Internet Explorer all property with a call to the getElementByID() or getElementsByTagName() methods, or with a variable that has been assigned the return value from one of those methods

Cross-Browser Compatibility

• Since both Navigator and Internet Explorer are widely used, and if developers were forced to choose a single Web browser, then a significant portion of Internet users would not be able to visit their Web sites

• The best solution is to create DHTML code for each DOM in which you expect the program to run. However, that could make your program difficult to work with

Cross-Browser Compatibility

• An easier solution is to create separate documents for each DOM: one for older Netscape browsers, one for older Internet Explorer browsers and one for W3C DOM-compliant browsers. You can then use a “master” document that checks which browser is running when users open the file. After the master document determines which browser is running, it opens the appropriate Web page. A JavaScript program that checks which type of browser is running is commonly called a browser sniffer

Cross-Browser Compatibility

• Although there are several ways to check which browser is running, many JavaScript programmers prefer to test which DOM is being used. You can test which DOM is being used by checking whether the Document object has a layers property, an all property, or the getElementByID() method

• You can check for the layers property, the all property, and the getElementByID() method using conditional statements such as if

Summary

• The Document Object Model (DOM) represents the HTML document displayed in a window and provides programmatic access to document elements.

• The World Wide Web Consortium (W3C) is responsible for defining a platform-independent and browser-neutral version of the DOM.

• An Image object represents images created using the <img> element.

• By combining the src attribute of the Image object with the setTimeout() or setInterval() methods, you can create simple animation in an HTML document.

Summary

• Image caching, which temporarily stores image files in memory, is a technique for eliminating multiple downloads of the same file.

• The Netscape Document Object Model accesses the styles for selectors using the tags, classes, and ID properties of the Document object in older versions of Navigator.

• The Internet Explorer Document Object Model accesses the styles for selectors using the all and style properties and the tags() method of the Document object in older versions of Internet Explorer.

• In order to manipulate CSS styles with the W3C DOM, you must first gain access to the styles using either the getElementByID(ID) method or the getElementsByTagName(tag name) method.

Summary• CSS positioning is used to position or lay out elements on a

Web page.• You dynamically position an element in older versions of

Internet Explorer by appending the all property to the Document object, followed by a period and the name of a specific CSS selector, followed by the style property. Finally, you append another period and the left or top CSS properties.

• Layers are Web page elements that are used in Navigator for positioning other elements.

• You use the moveTo() and offset() methods of the Layer object to dynamically position elements in older versions of Navigator.

• You dynamically position an element with JavaScript in W3C DOM–compliant browsers by accessing a tag using the getElementByID() or getElementsByTagName() methods, and then by using the style property and the left and top CSS properties.