246996016-HTML5-Step-by-Step

294 Chapter 16
However, as just noted, it’s recommended to host the file yourself for production purposes
on live sites rather than relying on the CDN. There’s nothing worse than having
your Web site up and operational but reliant on a CDN-based library Web site that is
down. For the purposes of this chapter though, it’s perfectly acceptable to use the CDNbased
version rather than downloading jQuery yourself. Most of the examples in this
chapter assume that you have downloaded jQuery locally and adjusted the version number
to fit the version that you downloaded. If you’d like to use the CDN-based version
see http://docs.jquery.com/Downloading jQuery#CDN Hosted jQuery for the current URL.
Getting Ready for jQuery
Imagine this problem: You’ve written some JavaScript and included it just before the closing
tag as shown earlier in the chapter. One of the things that your JavaScript
does is change an image on the page. The problem is that your image hasn’t loaded, so
now the JavaScript runtime can’t find it, and the page loads incorrectly.
The root cause of this all-too-common problem is that browsers execute JavaScript as
they encounter scripts on the page. So even though the JavaScript is at the bottom of the
page, the browser may not have loaded the entire page prior to running the JavaScript.
In other words, the document isn’t ready by the time the JavaScript runs, so chaos
ensues.
A workaround for this problem is to use an onload or load event on the page, but even
that is fraught with danger, not to mention it’s bad practice. Luckily, jQuery includes
a function called .ready() which executes only after the page has been loaded by the
browser and is ready for JavaScript code to be run. The .ready() function is a simple
way to execute JavaScript while safely knowing that all elements of the page have been
loaded and are ready to use. jQuery code begins with a dollar sign and parentheses, as
you’ll see in the upcoming example.
Using the .ready() function is easy. The following code shows an example of the .ready()
function in action.
Document Ready
$(document).ready(alert('Hello Again'));