Chapter09 slideshow2

JavaScript, Third Edition

Chapter 9
Introduction to the Document
Object Model (DOM)

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

2

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


3

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)


4

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


5

(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


6

(Cont.)
• To make Web pages truly dynamic, you need more
than just XHTML
– Need Dynamic HTML or (DHTML)


7

(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


8

See this game at:
plaza.harmonix.ne.jp/~jimmeans


10

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

11



12

Document


13

Document Object Properties
• Examples: see StatesCapitals.html
function documentStatistics(){
alert(document.title + “n” + document.URL + “n” +
document.lastModified);
}

document.title = “WebAdventure, Inc.”;


14

Document Object Properties


15

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


16

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.

17



18

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.


19

• The close() method:
– Notifies the Web browser that
• You are finished writing to the window or frame
• The document should be displayed


20

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


21

• Example: see WebStats.html


22


Image


23

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


24

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


25



26



27

• 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

28

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

29

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)


30

Animation
• Examples:
– Dribble.html


35

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.


36

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

37

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

38

Dynamic HTML
• Image Caching Example.

1. image object created

<head>
<script language=“JavaScript”>

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

The RunnerCache0.html program


40

Animation
• See the following web pages:
– RunnerCache0.html
– RockingHorseCache.html
– FatCatDancing.html


42

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.


43

Animation
• Image Caching
– To ensure all images are cached prior to
commencing animation:
• Use onLoad event handler of the Image object


44

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

45

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


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

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


47

Animation
• Image Caching with preLoad Example.
– RunnerCache1.html


48

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

49

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


50

• Src property:
– One of the most important properties of the Image
object

– Allows JavaScript to change an image dynamically


51

• 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


52

• Onload event handler of the Image:
– Use it to be certain that all images are downloaded into
a cache before commencing an animation sequence


53

Chapter09 slideshow2

More Related Content

Similar to Chapter09 slideshow2 (20)

Recently uploaded (20)

Chapter09 slideshow2