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