Timing Events and Browser Differentiation
As we learn more and more JavaScript, we can build
increasingly complex applications. In the previous lesson, we added long-term memory to our JavaScripts using cookies. Now we'll add a sense of time to our growing stock of JavaScript knowledge. The ability to time events is useful in the 3.0 browsers, and becomes even more valuable as you start playing with dynamic HTML in the newer browsers.
If you've used Netscape 4.0, MSIE 4.0, or a newer browser, you've probably witnessed dynamic HTML moving around parts of Web pages. On the Webmonkey frontdoor, for example, we have tool bars that can be expanded or contracted at the click of a button. This involves moving the tool bar elements up and down on the page.
In JavaScript, the process of moving something around the screen usually involves a loop, where the element is moved little by little over time. The question is, how do you tell JavaScript to "move that piece over a little bit every 10th of a second or so"?
Unfortunately, this business of moving elements around is where the assortment of browsers differs the most. Almost everything I've covered up until now (except image swaps) works in basically all JavaScript-ready browsers. With dynamic HTML, however, you have to take special measures to make your scripts work across all the different browsers. So after I cover timing events, I'll talk about ways to detect the type of browser a visitor is using (allowing you to serve them appropriate content). Luckily these two skills — timing events and detecting browser type — will also be useful when it comes to other neat-o features of the newer browsers.
Let's start with timing events on your pages. For a very basic example, see if you can hold your breath for three seconds: Suck in some air, click on the button below, and an alert box will pop up in three seconds to let you know it's time to exhale. You can trust me. Really.
next page»
