Java Reference
In-Depth Information
To run the animation, use
setInterval()
to continuously execute
doAnimation()
. The following code
runs
doAnimation()
every 10 milliseconds:
setInterval(doAnimation, 10);
At this speed, the content moves at a pace that is easily seen by those viewing the page. If you want
to speed up or slow down the animation, simply change how often the
setInterval()
function calls
doAnimation()
by changing the second parameter.
What have you seen so far? Well, you've seen the DOM hierarchy and how it represents the HTML
document as a tree‐like structure. You navigated through the different parts of it via DOM objects
(the
Node
objects) and their properties, and you changed the properties of objects, thus altering the
content of the web page. This leaves just one area of the DOM to cover: the event model. You learn
about events in the next chapter.
summarY
This chapter has featured quite a few diversions and digressions, but these were necessary to
demonstrate the position and importance of the document object model in JavaScript.
This chapter covered the following points:
➤
It started by outlining two of the main standards—HTML and ECMAScript—and
examined the relationships between them. You saw that a common aim emerging from
these standards was to provide guidelines for coding HTML web pages. Those guidelines
in turn benefited the document object model, making it possible to access and manipulate
any item on the web page using script if web pages were coded according to those
guidelines.
➤
You examined the document object model and saw that it offered a browser‐independent
means of accessing the items on a web page, and that it resolved some of the problems
that dogged older browsers. You saw how the DOM represents the HTML document as
a tree structure and how it is possible for you to navigate through the tree to different
elements and use the properties and methods it exposes to access the different parts of the
web page.
➤
The DOM lets you change a page after it is loaded into the browser, and you can perform a
variety of user interface tricks to add some flair to your page.
➤
You learned how to change a tag's style by using the
style
and
className
properties.
➤
You also learned the basics of animation and made text bounce back and forth between two
points.
