“In phase two, we are going to want to harness the social and enable
Web 2.0 community-based, crowd-sourced, Ajax, um, interactions,” says our
new client. “But for now we just need some basic stuff changed on our
site.

Our client is launching a startup called StarTrackr! It uses GPS and
RFID technology to track popular celebrities’ exact physical location—then
sells that information to fans. It’s been going great guns operating out
of a friend’s local store, but now they’re taking the venture
online.

“Can you do it? Here’s a list that needs to be live by Friday, close
of business.”

You survey the list. By amazing coincidence you notice that all of
the requests can be implemented using jQuery. You look at your calendar.
It’s Friday morning. Let’s get started!

The first task on the list is to add a simple JavaScript alert when
the existing site loads. This is to let visitors know that StarTrackr! is
not currently being sued for invasion of privacy (which was recently
implied in a local newspaper).

Sure, we could use plain old JavaScript to do it, but we know that
using jQuery will make our lives a lot easier—plus we can learn a new
technology as we go along! We already saw the anatomy of a jQuery
statement in Chapter 1; now let’s look at the steps required to put jQuery
into action: we wait until the page is ready, select our target, and then
change it.

You may have probably guessed that jQuery can be more complicated
than this—but only a little! Even advanced effects will rely on this basic
formula, with multiple iterations of the last two steps, and perhaps a bit
of JavaScript know-how. For now, let’s start nice and easy.

Before we can interact with HTML elements on a page, those
elements need to have been loaded: we can only change them once they’re
already there. In the old days of JavaScript, the only reliable way to do
this was to wait for the entire page (including images) to finish loading
before we ran any scripts.

Fortunately for us, jQuery has a very cool built-in event that
executes our magic as soon as possible. Because of this, our pages and
applications appear to load much faster to the end user:

$(document).ready(function() {
  alert('Welcome to StarTrackr! Now no longer under police …');
});

The important bits here (highlighted in bold) say, “When our
document is ready, run our function.” This is one of the most common
snippets of jQuery you’re likely to see. It’s usually a good idea to do a
simple alert test like this to ensure you’ve properly included the jQuery
library—and that nothing funny is going on.

The document-ready idiom is so common, in fact, that there’s a
shortcut version of it:

$(function() { alert('Ready to do your bidding!'); });

If you’d like to use the shortcut method, go ahead! The expanded
version is arguably a better example of self-documenting code; it’s much
easier to see at a glance exactly what’s going on—especially if it’s
buried in a page of another developer’s JavaScript!

At a cursory glance, the document-ready event looks much removed
from the structure we encountered back in our jQuery anatomy class, but on
closer inspection we can see that the requisite parts are all accounted
for: the selector is document; the action is
ready; and the parameter is a function that runs some
code (our alert).