1. JavaScript, Third Edition
Chapter 9
Introduction to the Document
Object Model (DOM)

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
JavaScript, Third Edition
2

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. JavaScript, Third Edition
9

10. See this game at:
plaza.harmonix.ne.jp/~jimmeans
JavaScript, Third Edition
10

11. 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
11

12. The Document Object Model
JavaScript, Third Edition
12

13. The Document Object Model
Document
JavaScript, Third Edition
13

14. Document Object Properties
• Examples: see StatesCapitals.html
function documentStatistics(){
alert(document.title + “n” + document.URL + “n” +
document.lastModified);
}
document.title = “WebAdventure, Inc.”;
JavaScript, Third Edition
14

15. Document Object Properties
JavaScript, Third Edition
15

16. Document Object Methods
• Can be used for dynamically generating and
manipulating Web pages
• Cannot be used to change content in a Web
page after it has been rendered
JavaScript, Third Edition
16

17. Document Object Model
• Document Object Methods
– 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.
JavaScript, Third Edition
17

18. Document Object Methods
JavaScript, Third Edition
18

19. 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
– can include an argument specifying the MIME type of the
document to be displayed.
• default (no argument) is text/html.
JavaScript, Third Edition
19

20. 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
20

21. Document Object Methods (Cont.)
• write(), writeln()
– if use these without first using the open() method,
they overwrite the contents of the current
document.
– if used after an open() they write into the new
browser window.
JavaScript, Third Edition
21

22. Document Object Methods
• Example: see WebStats.html
JavaScript, Third Edition
22

23. The Document Object Model
Image
JavaScript, Third Edition
23

24. 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
24

25. The Image Object (Cont.)
• An Image object contains various properties
and events that you can use to manipulate your
objects
JavaScript, Third Edition
25

26. The Image Object (Cont.)
JavaScript, Third Edition
26

27. The Image Object (Cont.)
JavaScript, Third Edition
27

28. The Image Object (Cont.)
• 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
• See
– ChangeImage.html
– Programmers.html
JavaScript, Third Edition
28

29. Animation with the Image Object
• simple animation on a Web page:
– Created by a sequence of images changed automatically
• To create an animated sequence:
– use 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
– Change the frame by changing the src attribute of an
image
– Examples:
• Advertisement.html
JavaScript, Third Edition
29

30. Dynamic HTML
• Animation with the Image Object
– True animation
• Requires a different graphic, or frame, for each
movement that a character or object makes
• Frames can be automatically cycled using JavaScript
– Ensure each frame is consistent in size and position
• See runner0.html (code on next slide)
JavaScript, Third Edition
30

31. JavaScript, Third Edition
31

32. JavaScript, Third Edition
32

33. JavaScript, Third Edition
33

34. JavaScript, Third Edition
34

35. Animation
• Examples:
– Dribble.html
JavaScript, Third Edition
35

36. Animation
• Animation Problem: JavaScript does not
keep copies of each image in memory.
• each time a different image is loaded, JS must
physically open or reopen the image from
source.
• Solution: image caching. Save image files in
memory on local computer.
JavaScript, Third Edition
36

37. 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
37

38. 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
38

39. Dynamic HTML
• Image Caching Example.
1. image object created
<head>
<script language=“JavaScript”>
<!-- hide from incompatible browsers
function putImage(){
newImage = new Image();
newImage.src = “graphic.jpg”;
document.myImage.src = newImage.src;
}
// stop hiding -->
</script>
</head>
3.
<body onLoad = “putImage();”>
<img name = „myImage‟ src=“”>
</body>
2. image object given a source.
The image is now cached in
memory.
Document image is assigned
the cached image.
4. If use the line
document.myImage.src = “graphic.jpg”
then graphic loads every time the
line is executed. No caching
JavaScript, Third Edition
39

40. The RunnerCache0.html program
JavaScript, Third Edition
40

41. JavaScript, Third Edition
41

42. Animation
• See the following web pages:
– RunnerCache0.html
– RockingHorseCache.html
– FatCatDancing.html
JavaScript, Third Edition
42

43. Animation
• Image Caching Problem
– Erratic animation can occur due to all images not
being stored in Image objects before animation
begins
– a page may finish loading before all the images
have finished downloading.
JavaScript, Third Edition
43

44. Animation
• Image Caching
– To ensure all images are cached prior to
commencing animation:
• Use onLoad event handler of the Image object
JavaScript, Third Edition
44

45. <HTML>
RunnerCache1.html
<HEAD>
<TITLE>Runner</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var runner = new Array(6);
Create an array.
var curRunner = 0;
Each element will
var startRunning;
be an Image object.
var imagesLoaded = 0;
For each element in the array:
for(var i = 0; i < 6; ++i) {
runner[i] = new Image();
1. Create an Image object
runner[i].src = "runner" + i + ".jpg";
runner[i].onload = runMarathon;
2. Assign the appropriate
}
graphics file for the source
3. Have the Image object call
the function runMarathon when
that object has finished loading.
JavaScript, Third Edition
45

46. function runMarathon() {
++imagesLoaded;
if (imagesLoaded == 6)
startRunning=setInterval("marathon()",100);
}
function marathon() {
if (curRunner == 5)
curRunner = 0;
else
++curRunner;
document.animation.src = runner[curRunner].src;
}
JavaScript, Third Edition
When all images have
loaded, start the interval
timer.
This line will NOT have
to get the image from
the server because the
runner array contains
image Objects, not just
strings.
46

47. // STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<P><IMG SRC="runner1.jpg" NAME="animation"></P>
name of the image.
</BODY>
Body does nothing.
</HTML>
See RockingHorseImageLoad.html also!
JavaScript, Third Edition
47

48. Animation
• Image Caching with preLoad Example.
– RunnerCache1.html
JavaScript, Third Edition
48

49. 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
49

50. 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
50

51. 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
51

52. 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
52

53. 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
53