jQuery for Designers: Beginner's Guide

The first thing you'll often do in a jQuery script is select the elements you'd like to work with. For example, if you're adding some effects to a navigation menu, you'll start by selecting the items in the navigation menu. The tools you use for this job are selectors—ways to select certain elements on the page you want to work with.

jQuery borrowed selectors from CSS all the way up through CSS3 and they work even in browsers that don't support CSS3 selectors just yet.

Even though CSS offers a pretty robust set of selectors, jQuery adds a few more, all on its own, to make just the elements you need easy to work with.

If you already know how to do things such as make all the level 1 headings blue or make all the links green and underlined, then you'll easily learn how to select the elements you'd like to modify with jQuery.

If you want to create new elements or modify existing elements with raw JavaScript, you better crack your knuckles and get ready to write lots and lots of code—and it won't make all that much sense, either.

For example, if we wanted to append a paragraph to our page that said This page is powered by JavaScript, we would have to first create the paragraph element, then assign the text that should be inside the paragraph to a variable as a string, and finally append the string to the newly created paragraph as a text node. And after all that, we would still have to append the paragraph to the document. Phew! (Don't worry if you didn't understand all of that—it was just to illustrate how much work and code is required to do something this simple.)

With jQuery, adding a paragraph to the bottom of our page is as simple as:

$('body').append('<p>This page is powered by jQuery.</p>');

That's right—you just append a bit of HTML directly to the body and you're all set. I bet that without understanding JavaScript at all, you can read that line of code and grasp what it's doing. This code is appending a paragraph that reads This page is powered by jQuery to the body of my HTML document.

You've got better things to do than to sit and write lines and lines of code to add fade in and fade out effects. jQuery provides you with a few basic animations and the power to create your own custom animations right out of the box. Let's say I wanted to make an image fade into the page:

$('img').fadeIn();

Yep, that's it—one little line of code in which I select my image and then tell it to fade in. We'll see later in the chapter exactly where this line of code will go in your HTML page.

As I've said earlier, web developers often find themselves solving the same problems over and over again. You're likely not the first person who wanted to build a rotating image slideshow, an animated drop-down menu, or a news ticker.

jQuery has an impressively large library of scripts available freely—scripts to create tooltips, slideshows, news tickers, drop-down menus, date pickers, character counters, and on and on. You don't need to learn how to build all these things from scratch—you just have to learn how to harness the power of plugins. We'll be covering some of the most popular jQuery plugins in this book, and you'll be able to take what you've learned to use any plugin in the jQuery plugin library.

jQuery is an open source project—that means it's being collectively built by a team of super-smart JavaScript coders and is freely available for anyone to use. The success or failure of an open source project often depends on the community behind the project—and jQuery has a large and active community supporting it.

That means that jQuery itself is being constantly improved and updated. And on top of that, there are thousands of developers out there creating new plugins, adding features to existing plugins, and offering up support and advice to newcomers—you'll find new tutorials, blog posts and podcasts on a daily basis for just about anything you want to learn.

There are a few different schools of thought when it comes to enhancing your HTML pages with JavaScript. Let's talk about some of the things we should consider before we dive into the cool stuff.

Progressive enhancement and graceful degradation are essentially two sides of the same coin. They both mean that our page with its impressive JavaScript animations and special effects will still work for users who have less capable browsers or devices. Graceful degradation means that we create our special effect and then make sure it fails gracefully if JavaScript is not enabled. If we take the progressive enhancement approach, we'll first build out a bare bones version of our page that works for everyone, and then enhance it by adding on our JavaScript special effects. I tend to favor the progressive enhancement approach.

Why should we care about users who don't have JavaScript enabled? Well, one of the Web's biggest users—search engines—do not have JavaScript capabilities. When search engines are crawling and indexing your pages, they will not have access to any content that's being loaded into your pages by JavaScript. That's often referred to as dynamic content, and it won't be indexed or found by search engines if it can't be reached with JavaScript disabled.

We're also in an era where we can no longer count on users accessing the web pages we build with a conventional desktop or laptop computer. We're quick to think of smart phones and tablets as the next candidates, and while they are very popular, they still only account for a tiny fraction of Internet access.

People are accessing the Web from gaming consoles, e-book readers, Internet-enabled televisions, a huge variety of mobile devices, and probably hundreds of other ways. Not all of these devices are capable of executing JavaScript—some of them don't even have color screens! Your number one priority should be making sure that your content is available to anyone who asks for it, no matter what device they happen to be using.

To accomplish this task of making our content available to as wide an audience as possible, we have to think of our web pages in three separate and distinct layers: content, presentation, and behavior.

Let's start with something simple:

var x = 5;

This is a sentence in JavaScript. In English, we end a sentence with a period or maybe a question mark or exclamation point. In JavaScript we end our sentences with a semicolon.

In this sentence, we're creating a variable, x. A variable is just a container for holding something. In this case, x is holding the number 5.

We can do math with JavaScript like this:

var x = 5;
var y = 2;
var z = x + y;

Just like algebra, our variable z is now holding the value of the number 7 for us.

But variables can hold things other than numbers. For example:

var text = 'A short phrase';

Here, we've named our variable text and it's holding some alphabetical characters for us. This is called a string. A string is a set of alpha-numeric characters.

Objects might be the hardest thing for a newcomer to JavaScript to grasp, but that's often because we overthink it, convinced it has to be more complicated than it actually is.

An object is just what it sounds like—a thing, anything. Just like a car, a dog, or a coffee maker are objects.

Objects have properties and methods. A property is a characteristic of an object. For example—a dog could be tall or short, have pointy ears or floppy ears, and be brown or black, or white. All of these are properties of a dog. A method is something an object can do. For example a dog can run, bark, walk, and eat.

Let's take my dog, Magdelena von Barkington, as an example to see how we would deal with objects, properties, and methods in JavaScript:

var dog = Magdelena von Barkington;

Here I've created a variable dog that I'm using as a container to hold my dog, mostly because I don't want to have to type out her full name each time I refer to her in my code. Now let's say I wanted to get my dog's color:

var color = dog.color;

I created a container called color and I'm using it to hold my dog's color property—color is now equal to my dog's color.

Now, I've trained my dog very well, and I would like her to roll over. Here's how I would tell her to roll over with JavaScript:

dog.rollOver();

rollOver is a method—something that my dog can do. After my dog rolls over, I might like to reward her with a treat. Here's how my dog eats a treat with JavaScript:

dog.eat('bacon');

Wait, what's going on here? Let's take it one step at a time. We have dog, which we know is a container for my dog, Magdelena von Barkington. We have the eat method, which we know is something that my dog can do. But my dog can't just eat—she has to eat something. We use the parentheses to say what it is that she is eating. In this case, my lucky dog is eating bacon. In JavaScript speak, we would say we were passing bacon to the eat method of the dog.

So you see, objects aren't so difficult—they're just things. Properties are like adjectives—they describe traits or characteristics of an object. Methods are like verbs—they describe actions that an object can do.

A function is a bit of reusable code that tells JavaScript to do something. For example:

function saySomething() {
	alert('Something!');
}

This function tells JavaScript to pop up an alert box that says Something!. We always start a function with the word function then we name our function. That's followed by a set of parentheses and a set of curly brackets. The lines of instruction go inside the curly brackets.

Now, my saySomething function won't actually do anything until it's called, so I need to add a line of code to call my function:

function saySomething() {
	alert('Something!');
}
saySomething();

You might wonder what those parentheses are for. Remember how we could pass things to a method by including them in parentheses?

dog.eat('bacon');

In this case, we passed bacon to say what the dog was eating. We can do much the same thing for functions. In fact, methods actually are functions—they're just functions specialized for describing what an object can do. Let's look at how we modify our saySomething function so that we can pass text to it:

function saySomething(text) {
	alert(text);
}
saySomething('Hello there!');

In this case, when I wrote the saySomething function, I just left a generic container in place. This is called a parameter—we'd say the saySomething function takes a text parameter, since I've called my parameter text. I chose the name text because it's a short and handy descriptor of what we're passing in. We can pass in any bit of text to this function, so text is an appropriate name. You can name your parameter anything you'd like—but you'll make your code easier to read and understand if you apply some commonsense rules when you're selecting names for your parameters. A parameter behaves very much like a variable—it's just a container for something.

Let's take this statement one at a time—first a dollar sign? Really? What's that doing in JavaScript?

The $ here is just a variable—that's all. It's a container for the jQuery function. Remember how I said we might use a variable to save ourselves a few keystrokes? The clever writers of jQuery have provided the $ variable to save us from having to write out jQuery every time we want to use it. This code does the same thing:

jQuery(document).ready();

Except it takes longer to type. jQuery uses the $ as its short name because it's unlikely that you'd call a variable $ on your own since it's an uncommon character. Using an uncommon character reduces the chance that there would be some sort of conflict between some other JavaScript being used on a page and the jQuery library.

So, in this case, we're passing document to the jQuery or $ method, because we want to select our HTML document as the target of our code. When we call the jQuery function, we get a jQuery object. In JavaScript speak, we would say that the jQuery function returns a jQuery object. The jQuery object is what gives the jQuery library its power. The entire jQuery library exists to give the jQuery object lots of properties and methods that make our lives easier. We don't have to deal with lots of different sorts of objects—we just have to deal with the jQuery object.

The jQuery object has a method called ready(). In this case, the ready method will be called when the document is loaded into the browser, and is ready for us to work with. So $(document).ready() just means, "when the document is ready".

So now we're all set to do something when the document is ready, but what is it that we'll do? Let's add a new paragraph to our page.

Our function is using the jQuery function again:

$('body')

Remember how I said that jQuery uses CSS selectors to find stuff? This is how we use those CSS selectors. In this case, I want the <body> tag, so I'm going to pass 'body' to the jQuery function. This returns the <body> tag wrapped in a jQuery object. Handily, the jQuery object has an append() method that lets me add something new to the page:

$('body').append();

All I have to do now is pass the append method the thing I want to add to the page. In quotes, I'll pass in a line of HTML that I'd like to add:

$('body').append('<p>This paragraph was added with jQuery!</p>');

And that's it! Now when I load my page in a browser, I'll see my heading followed by two paragraphs—jQuery will add the second paragraph as soon as the document is loaded in the browser: