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 ...
Introduction
• Businesses want:
– Web sites to include Formatting and images that can
be updated without the user having t...
Introduction (Cont.)
• These kinds of effects:
– Cannot be created with standard Extensible Hypertext
Markup Language (XHT...
Creating Dynamic Web Pages
•

Dynamic:
–

Web pages that respond to user requests through
buttons or other kinds of contro...
Creating Dynamic Web Pages
(Cont.)
• A dynamic Web page can allow a user to:
– Change the document background color
– Subm...
Creating Dynamic Web Pages
(Cont.)
• To make Web pages truly dynamic, you need more
than just XHTML
– Need Dynamic HTML or...
Creating Dynamic Web Pages
(Cont.)
• Dynamic HTML (DHTML):
– Refers to a combination of technologies that make
Web pages d...
JavaScript, Third Edition

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

JavaScript, Third Edition

10
The Document Object Model
• Is at the core of DHTML

• Represents the Web page displayed in a window
• Each element on a W...
The Document Object Model

JavaScript, Third Edition

12
The Document Object Model
Document

JavaScript, Third Edition

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

JavaScript, Third Edition

15
Document Object Methods
• Can be used for dynamically generating and
manipulating Web pages
• Cannot be used to change con...
Document Object Model
• Document Object Methods
– close() Closes a new document that was created
with the open() method
– ...
Document Object Methods

JavaScript, Third Edition

18
Document Object Methods (Cont.)
• Open() method:
– Could be used to create a new document in a window or frame
– Use the w...
Document Object Methods (Cont.)
• The close() method:
– Notifies the Web browser that
• You are finished writing to the wi...
Document Object Methods (Cont.)
• write(), writeln()
– if use these without first using the open() method,
they overwrite ...
Document Object Methods
• Example: see WebStats.html

JavaScript, Third Edition

22
The Document Object Model

Image

JavaScript, Third Edition

23
The Image Object
• Represents an image created using the <img> element

• Use to dynamically change an image displayed on ...
The Image Object (Cont.)
• An Image object contains various properties
and events that you can use to manipulate your
obje...
The Image Object (Cont.)

JavaScript, Third Edition

26
The Image Object (Cont.)

JavaScript, Third Edition

27
The Image Object (Cont.)
• The src property:
– One of the most important parts of image object
– Allows JavaScript to dyna...
Animation with the Image Object
• simple animation on a Web page:
– Created by a sequence of images changed automatically
...
Dynamic HTML
• Animation with the Image Object
– True animation
• Requires a different graphic, or frame, for each
movemen...
JavaScript, Third Edition

31
JavaScript, Third Edition

32
JavaScript, Third Edition

33
JavaScript, Third Edition

34
Animation
• Examples:
– Dribble.html

JavaScript, Third Edition

35
Animation
• Animation Problem: JavaScript does not
keep copies of each image in memory.
• each time a different image is l...
Image Caching
• Technique for eliminating multiple downloads of the
same file
• Temporarily stores image files in memory o...
Image Caching (Cont.)
•

Images are cached using the Image() constructor of
the Image object
–

•

Creates new Image objec...
Dynamic HTML
• Image Caching Example.

1. image object created

<head>
<script language=“JavaScript”>
<!-- hide from incom...
The RunnerCache0.html program

JavaScript, Third Edition

40
JavaScript, Third Edition

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

JavaScript, Th...
Animation
• Image Caching Problem
– Erratic animation can occur due to all images not
being stored in Image objects before...
Animation
• Image Caching
– To ensure all images are cached prior to
commencing animation:
• Use onLoad event handler of t...
<HTML>
RunnerCache1.html
<HEAD>
<TITLE>Runner</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
...
function runMarathon() {
++imagesLoaded;
if (imagesLoaded == 6)
startRunning=setInterval("marathon()",100);
}
function mar...
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<P><IMG SRC="runner1.jpg" NAME="animation"></P>
nam...
Animation
• Image Caching with preLoad Example.
– RunnerCache1.html

JavaScript, Third Edition

48
Chapter Summary
• Dynamic HTML (DHTML):
– Combination of technologies that make Web pages
dynamic
– DHTML is a combination...
Chapter Summary (cont.)
• The open() method:
– Creates a new document in a window or frame

• The close() method:
– Notifi...
Chapter Summary (cont.)
• Src property:
– One of the most important properties of the Image
object

– Allows JavaScript to...
Chapter Summary (cont.)
• Image caching:
– Technique for eliminating multiple downloads of the
same file
– Temporarily sto...
Chapter Summary (cont.)
• Onload event handler of the Image:
– Use it to be certain that all images are downloaded into
a ...
Upcoming SlideShare
Loading in...5
×

Chapter09 slideshow2

428

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
428
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Chapter09 slideshow2"

  1. 1. JavaScript, Third Edition Chapter 9 Introduction to the Document Object Model (DOM)
  2. 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. 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. 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. 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. 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. 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. 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. 9. JavaScript, Third Edition 9
  10. 10. See this game at: plaza.harmonix.ne.jp/~jimmeans JavaScript, Third Edition 10
  11. 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. 12. The Document Object Model JavaScript, Third Edition 12
  13. 13. The Document Object Model Document JavaScript, Third Edition 13
  14. 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. 15. Document Object Properties JavaScript, Third Edition 15
  16. 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. 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. 18. Document Object Methods JavaScript, Third Edition 18
  19. 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. 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. 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. 22. Document Object Methods • Example: see WebStats.html JavaScript, Third Edition 22
  23. 23. The Document Object Model Image JavaScript, Third Edition 23
  24. 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. 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. 26. The Image Object (Cont.) JavaScript, Third Edition 26
  27. 27. The Image Object (Cont.) JavaScript, Third Edition 27
  28. 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. 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. 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. 31. JavaScript, Third Edition 31
  32. 32. JavaScript, Third Edition 32
  33. 33. JavaScript, Third Edition 33
  34. 34. JavaScript, Third Edition 34
  35. 35. Animation • Examples: – Dribble.html JavaScript, Third Edition 35
  36. 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. 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. 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. 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. 40. The RunnerCache0.html program JavaScript, Third Edition 40
  41. 41. JavaScript, Third Edition 41
  42. 42. Animation • See the following web pages: – RunnerCache0.html – RockingHorseCache.html – FatCatDancing.html JavaScript, Third Edition 42
  43. 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. 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. 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. 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. 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. 48. Animation • Image Caching with preLoad Example. – RunnerCache1.html JavaScript, Third Edition 48
  49. 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. 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. 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. 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. 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

×