1. Creating an Animated Web Page
Working with Objects
Creating an Animated Web Page
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

2. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Objectives
Define DHTML and describe its uses
Understand objects, properties, methods, and the document object model
Distinguish between different object models
Work with object references and object collections
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

3. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Objectives
Modify an object’s properties
Apply a method to an object
Create a cross-browser Web site using object detection
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

4. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Objectives
Work with the style object to change the styles associated with an object
Write functions to apply positioning styles to an object
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

5. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Objectives
Insert event handlers to run a script in response to an event
Place a JavaScript command in a link
Run timed-delay and timed-interval commands
Work with the properties of the display window
Describe the techniques of linear and path animation
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

6. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Introduction to DHTML
Developers began to look for ways to create dynamic pages
New approach, in which the HTML code itself supported dynamic elements
Known collectively as dynamic HTML, or DHTML
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

7. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Introduction to DHTML
Interaction of three aspects
A page’s HTML/XHTML code
A style sheet that defines the styles used in the page
A script to control the behavior of elements on the page
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

8. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Introduction to DHTML
Some uses
Animated text
Pop-up menus
Rollovers
Web pages that retrieve their content from external data sources
Elements that can be dragged and dropped
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

9. Understanding JavaScript Objects
JavaScript is an object-based language
An object is any item associated with a Web page or Web browser
Each object has
Properties
Methods
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

10. Exploring the Document Object Model
The organized structure of objects and events is called the document object model, or DOM
Every object related to documents or to browsers should be part of the document object model
In practice, browsers differ in the objects that their document object models support
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

11. Exploring the Document Object Model
Development of a Common DOM
Basic model, or DOM Level 0
Supported browser window, Web document, and the browser itself
Development followed two paths: one adopted by Netscape and the other adopted by Internet Explorer
Internet Explorer DOM also provided for capturing events
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

12. Exploring the Document Object Model
Development of a Common DOM
World Wide Web Consortium (W3C) stepped in to develop specifications for a common document object model
DOM Level 1
DOM Level 2
DOM Level 3
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

13. Exploring the Document Object Model
Development of a Common DOM
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

14. Exploring the Document Object Model
Development of a Common DOM
Within each DOM, particular features may not be supported by every browser
Code should be compatible with
Netscape 4
Internet Explorer 5
W3C DOM Level 1 and 2
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

15. Exploring the Document Object Model
The document tree
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

16. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Referencing Objects
A DOM can be used by any scripting language including JavaScript and Java
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

17. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Referencing Objects
Object Names
Each object is identified by an object name
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

18. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Referencing Objects
Object Names
General form is object1.object2.object3…
To reference the history you would use the form
window.history
For the body, you would use
document.body
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

19. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Referencing Objects
Working with Object Collections
Objects are organized into arrays called object collections
document.collection
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

20. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Referencing Objects
Working with Object Collections
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

21. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Referencing Objects
Using document.all and document.getElementById
Not all elements are associated with an object collection
Can reference these objects using their id values
document.all[“id”]
document.all.id
document.getElementById(“id”)
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

22. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Referencing Objects
Referencing Tags
Internet Explorer DOM
document.all.tags(tag)
W3C DOMs
document.getElementsbyTagName(“tag”)
document.getElementsbyTagName(“p”)[0]
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

23. Working with Object Properties
The syntax for setting the value of an object property is
object.property = expression
Example
document.title = “Avalon Books”
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

24. Working with Object Properties
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

25. Working with Object Properties
Some properties are read-only
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

26. Working with Object Properties
Storing a Property in a Variable
variable = object.property
Using Properties in a Conditional Expressions
if(document.bgColor==“black”) {
document.fgColor=“white”
} else {
document.fgColor=“black” }
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

27. Working with Object Methods
object.method(parameters)
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

28. Creating a Cross-Browser Web Site
You can create this kind of code, known as cross-browser code, using two different approaches: browser detection or object detection
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

29. Creating a Cross-Browser Web Site
Using Browser Detection
Using browser detection, your code determines which browser (and browser version) a user is running
navigator.appName
Most browser detection scripts – commonly known as browser sniffers – use this property to extract information about the version number
navigator.uerAgent
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

30. Creating a Cross-Browser Web Site
Using Object Detection
With object detection, you determine which document object model a browser supports
var NS4DOM = document.layers ? true:false;
var IEDOM = document.all ? true:false;
var W3CDOM = document.getElementByID ? true:false;
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

31. Creating a Cross-Browser Web Site
Employing Cross-Browser Strategies
One strategy, called page branching, creates separate pages for each browser along with an initial page
A script determines the capabilities of the user’s browser and automatically loads the appropriate page
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

32. Creating a Cross-Browser Web Site
Employing Cross-Browser Strategies
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

33. Creating a Cross-Browser Web Site
Employing Cross-Browser Strategies
To automatically load a page into a browser based on the type of the browser detected, use the command
location.href = url;
A second cross-browser strategy is to use internal branching
Most web developers apply a third cross-browser strategy
Application programming interface or API
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

34. Creating a Cross-Browser Web Site
Employing Cross-Browser Strategies
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

35. Working with the style Object
The syntax for applying a style is
object.style.attribute = value
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

36. Working with the Style Object
Setting an Element’s Position
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

37. Working with the style Object
Positioning Properties in the IE DOM
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

38. Creating the Positioning Functions for Avalon Books
Example
function xCoord(id) {
object=document.getElementByID(id);
xc=parseInt(object.style.left);
return xc; }
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

39. Working with Event Handlers
An event handler is an attribute added to an element that specifies a program to be run in response to an event
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

40. Working with Event Handlers
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

41. Working with Event Handlers
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

42. Working with Event Handlers
Running JavaScript Commands as Links
<a href=“javascript.script”>content</a>
Using the onLoad Event Handler
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

43. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Animating an Object
Working with Time-Delayed Commands
setTimeout(“command”, delay);
timeID = setTimeout(“command”, delay);
clearTimeout(timeID);
clearTimeout();
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

44. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Animating an Object
Running Commands at Specified Intervals
timeID=setInterval(“command”,interval);
setInterval(“command”, interval);
clearInterval(timeID);
clearInterval();
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

45. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Animating an Object
Animating the Avalon Books Web page
Example
Function moveAvalon() {
var y=yCoord(“avalon”);
if (y <= 260) {
shiftIt(“avalon”, 0, 10);
shiftIt(“books”, 0, 10);
setTimeout(“moveAvalon()”, 30);
} else {
// run moveBooks function; }
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

46. Controlling Layout for Different Monitor Resolutions
Calculating the Size of the Display Window
window.outerWidth
window.outerHeight
window.innerWidth
window.innerHeight
document.body.clientWidth
document.body.clientHeight
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

47. Controlling Layout for Different Monitor Resolutions
Calculating the Size of the Display Window
document.documentElement.offsetWidth
document.documentElement.offsetHeight
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

48. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Using Path Animation
Linear animation means that the animation takes place over a straight line
Path animation means each set of coordinates in the path is entered into an array, and the animation moves point to point
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

49. New Perspectives on HTML, XHTML, and DHTML, Comprehensive
Using Path Animation
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive

50. Tips for working with JavaScript Objects and DHTML
If your code reuses the same object reference, store the object in a variable
Place your customized functions in external files
Use object detection
Use path animation and create interesting visual effects
Break up your animated effects into separate functions
Tutorial 11
New Perspectives on HTML, XHTML, and DHTML, Comprehensive