Introduction to the Document Object Model DOM

1
JavaScript, Third Edition
Chapter 9
Introduction to the Document Object Model (DOM)
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

• 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
Creating Dynamic Web Pages

• 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

6
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

7
Document Object Properties
Can change title property after page is
rendered document.title "My New Page Home
Page"
8
Document Object Methods
9
Document Object Methods

• 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

10
Document Object Methods

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

11
The Image Object

• Represents an image created using the ltimggt
  element
• Use to dynamically change an image displayed on a
  Web page
• Image objects for each ltimggt element
• Assigned to elements of images array in the
  order they appear on the Web page

12
The Image Object

• An Image object contains various properties and
  events that you can use to manipulate your
  objects
• 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 ltimggt element
• Dynamically changes an image displayed on a Web
  page

13
The Image Object
14
The Image Object
15
Animation with the Image Object

• You can create simple animation on a Web page
• Combine the src attribute of the Image object
  with the setTimeout( ) or setInterval( ) methods
• Create an animated sequence with JavaScript by
  using
• The 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 ltimggt
  element

16
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

17
Image Caching

• Images are cached using the Image( ) constructor
  of the Image object
• Creates new Image object
• 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 ltimggt element

18
Image Caching

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

19
In-Class Practice

• Copy the following files to your folder
• duck.jpg, eagle.jpg, flying_pig.jpg,
  rooster.jpg, salmon.jpg, ship.jpg, whale.jpg
• Open your Template.html in a text editor
• Save it as WeatherVanes.html
• Use strict in the doctype
• Use Weather Vanes for the title

20
In-Class Practice

• In the script section of the head, declare the
  following variables
• var animal new Array(7)
• var number 0
• var begin
• animal0 "duck.jpg"
• animal1 "eagle.jpg"
• animal2 "flying_pig.jpg"
• animal3 "rooster.jpg"
• animal4 "salmon.jpg"
• animal5 "ship.jpg"
• animal6 "whale.jpg"

21
In-Class Practice

• In the body, type the following

lth1gtWeather Vane Assortmentlt/h1gt ltpgtltimg
src"duck.jpg" width"113" height"152"
alt"Image of a weather vane" /gtlt/pgt ltform
action""gt ltpgtltinput type"button" value "Show
Weather Vanes" onclick"startShow()" /gt ltinput
type"button" value"Stop Show" onclick"clearIn
terval(begin)" /gtlt/pgt lt/formgt
22
In-Class Practice

• Type the following function in the head script
  section

function show() if (number lt
6) number else number
0 document.images0.src animalnumber
23
In-Class Practice

• Type the following function in the head script
  section

function startShow() if (begin) clearInterval
(begin) begin setInterval("show()", 800)
24
In-Class Practice

• Save and open your document.

25
Homework Assignments

• Typed multiple-choice and true/false questions
  on pages 452 - 453 (skip question 1)
• Projects 9-6 and 9-7
• In Project 9-7, replace the last line of the for
  loop with loadImages()
• Case Projects 9-4 and 9-5
• Case Project 9-4, see three gif files on server
• Due in one week
• Remember to pass in your flash drive, a printout
  of all html code and a printout of the
  multiple-choice and true/false answers all in a
  9" x 11½ " envelope with your name on it