Download chap16

The Web Warrior Guide to
Web Design Technologies
Chapter 16
Dynamic HTML and Animation
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 DOMcompliant 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 DOMcompliant 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.