jQuery for Designers Beginner's Guide Second Edition

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 of its own to make accessing just the elements you need easy.

If you already know how to do things with CSS, such as make all the first-level headings blue or make all the links green and underlined, 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 much sense either.

For example, if we wanted to append a paragraph to our page that says This page is powered by JavaScript, we need 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 this, we'd 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 it requires to do something simple.)

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

$('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 the 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 the HTML document.

You've got better things to do than 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, we wanted to make an image fade into the page; we will use the following code line for this:

$('img').fadeIn();

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

As I said earlier, web developers often find themselves solving the same problems over and over again. You're most likely not the first person who wants 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 apply what you've learned to use any plugin in the jQuery plugin library.

jQuery is an open source project, which means that 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 that supports it.

This means that jQuery itself is being constantly improved and updated. And on top of that, there are thousands of developers out there who are creating new plugins, adding features to existing plugins, and offering 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 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, some of the Web's biggest users and search engines have either no JavaScript capabilities or very limited JavaScript capabilities. When search engines are crawling and indexing your pages, they will not have access to all of the content and features that are being added to your pages by JavaScript. This is often referred to as dynamic content, and it can't be reliably 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 who access the web pages we build with a conventional desktop or laptop computer. We're quick to think of smartphones and tablets as the next candidates, and while they are very popular, they still account for a tiny fraction of Internet access. People are accessing the Web from gaming consoles, feature phones, e-book readers, internet-enabled televisions, a huge variety of mobile devices, and dozens of other ways. Not all of these devices are capable of executing JavaScript, and 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 an exclamation mark. In JavaScript, we end our sentences with a semicolon.

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

We can do math with JavaScript as shown in the following code snippet:

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

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

However, variables can also 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 alphanumeric characters.

Objects might be the hardest thing for a newcomer in 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 as a car, a dog, and 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 could 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'd deal with objects, properties, and methods in JavaScript:

var dog;

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'd like her to roll over. The following line of code shows how I'd tell her to roll over with JavaScript:

dog.rollOver();

The rollOver() method is something that my dog can do. After my dog rolls over, I might like to reward her with a treat. The following line of code shows 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. However, my dog can't just eat—she has to eat "something". We can use some extra code inside the parentheses to say what it is that she is eating. In JavaScript, we call the code inside the parentheses an argument. In this case, my lucky dog is eating bacon. So in JavaScript, we'd describe this bit of code by saying we are passing bacon to the eat() method of the dog object.

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, have a look at the following code:

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 and then we name our function. This is 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, as follows:

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

You might wonder what those parentheses are for. Do you remember how we could pass arguments to a method by including them in parentheses? We used the following line of code:

dog.eat('bacon');

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

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. In JavaScript, we'd say the saySomething() function takes a text parameter, as 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 sensible rules when you're selecting names for your parameters. A parameter behaves very much like a variable—it's just a container for something.

We learned how to set up our files and folders to work through the practice exercises in this book. We also learned how to select and download the correction version of jQuery and get it attached to our HTML page. Now we're all set to start coding pages and adding jQuery magic to them.

Q1. Which of the following is the content layer of a project?

Let's take this statement one thing at a time—first, the dollar sign. Really? What's this 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. The following code does the same thing that the preceding script did:

jQuery(document).ready();

Except that it takes longer to type. jQuery uses the $ sign as its short name because it's unlikely that you'd call a variable $ on your own as it's an uncommon character. Using an uncommon character reduces the chance that there will 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 $) function 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, we'd 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. We can pass a function to the ready method to say what should happen. So $(document).ready() just indicates when the document is ready.

Our new function is using the jQuery function again, as follows:

$('body')

Remember I said that jQuery uses CSS selectors to find stuff? This is how we use those CSS selectors. In this case, we want the <body> tag, so we'll 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 us add something new to the page, as follows:

$('body').append();

All we have to do is call the append method and pass in the paragraph we want to add to the page. In quotes, pass a line of HTML:

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

That's it! Now, when you load the page in a browser, you'll see the heading followed by two paragraphs—jQuery will add the second paragraph as soon as the document is loaded in the browser. The following screenshot shows the page loaded in the browser:

Try adding the following bit of HTML to the bottom of the document with jQuery:

<div><p>This was added with jQuery too!</p></div>

Style it with CSS so that it stands out.