You receive an email from your friend, who is a professional portrait photographer. She wants to roll out a “Jump for Joy” promotion that allows users to win deals on a package of prints. She needs your help making the promotion work.

Emily is a great photographer, but her request is kind of all over the place. Let’s take a closer look at that email and figure out what she is really asking for. Before you can even start writing any jQuery, you want to be super clear on what the project (or user) requirements are.

Make it Stick

Converting user requests into actual project requirements is an important skill that gets better with practice and time.

Whoa! Hold your horses there, hoss!

Working out project requirements first is a good habit to get into for every jQuery project you’ll work on. But before we jump right into writing jQuery code, we need to do a little work setting up the structure and styles first. We did a bit of this in Chapter 1, and now we’ve got even more to set up before we get any jQuery goodness going.

We need four clickable areas on the page, so let’s make those first. The most useful and flexible HTML element for our purposes is the <div> tag. The <div> tag serves very well in the structure role, since it’s a block-level element. We can also easily style div elements to act exactly as we want them to.

Exercise

Open your favorite text editor to create the HTML and CSS files you’ll need. Below is the starter code with some key elements missing. Add the following items to the page and check them off as you’re done:

	A tag to include the jQuery library, version 1.6.2.
	A <div> tag with the ID of header.
	A <div> tag with the ID of main.
	Inside each of the four div elements inside of the main div, put a different image (get the images here: www.thinkjquery.com/chapter02/images.zip).

Exercise Solutions

Open your favorite text editor and create the HTML and CSS files to solve this exercise. Below is the starter code with some key elements missing. Once you’ve added the following items, your page should look like our solution.

	A tag to include the jQuery library, version 1.6.2.
	A <div> tag with the ID of header.
	A <div> tag with the ID of main.
	Inside each of the four div elements inside of the main div, put a different image.

Test Drive

Open the page up in your favorite browser to make sure everything’s working. This will give us an opportunity to note how we want the page to function.

As we’ve seen, making an element clickable with jQuery is easy.

Clicking on a page element causes an event to trigger on the page, and can also run functions. We’ll get more in depth into events and functions later on, but for now, let’s just review how the click event works on a paragraph (or <div>) tag.

jQuery Code Magnets

Move the magnets to write the code that will make all the div elements clickable. When a div is clicked, use a JavaScript alert function to display the text “You clicked me.” We’ve put a few in place for you already.

jQuery Code Magnets Solution

Move the magnets to write the code that will make all the div elements clickable. When a div is clicked, use a JavaScript alert function to display the text “You clicked me.”

Using the code you put together in the magnets solution on the previous page, update your HTML file to include this script. Don’t forget to put it inside a <script> tag!

Do this!

Test Drive

Open the page up in your favorite browser to make sure everything’s working. You should see the alert message now as you click around the images on the page.

Hmmm, that is a problem.

It looks like we’ve gotten a bit click-happy. Let’s take a look at that click event again.

In fact, you don’t even have to click on the images to get that message. Our page structure has div elements nested in another div, so when you click on those, the browser thinks you’ve clicked on both, and you might get two alerts in that case. Clearly, we need to narrow down what we’re asking jQuery to do here...

The issue is that we haven’t been specific enough in our selection. So how can we get at the four sub-divs and leave out the larger container div? Remember from Chapter 1 that jQuery selectors use CSS classes and IDs. We can get even more specific about which elements we want jQuery to grab by adding classes and IDs to those elements.

In CSS, classes are used to group elements together and give them common style attributes. You can have one or more elements on the page that have the same class. For jQuery, we can use the same class selector, and affect the same group of elements with jQuery methods. Both CSS and jQuery use the “.” to signify a class, which makes it super easy to start classing up your code.

An ID selector is used to identify a single, unique element on a page. In jQuery, as in CSS, the # symbol is used to identify an ID selector. IDs are great when you want to get specific with an element, or when there is only going to be one of that kind of element on the page, like a page header or footer.

Who Does What?

Check the boxes in the appropriate columns to indicate what you can use classes for and what you can use IDs for. Remember, sometimes a class and an ID can do the same job!

	Class	ID
Uniquely identify a single element on the page
Can identify one or more elements on the page
Can be used by a single JavaScript method, cross-browser, to identify an element
Can be used by CSS to apply style to elements
More than one of these can be applied to an element at the same time

Who Does What? Solution

Check the boxes in the appropriate columns to indicate what you can use classes for and what you can use IDs for. Remember, sometimes a class and an ID can do the same job!

	Class	ID
Uniquely identify a single element on the page
Can identify one or more elements on the page
Can be used by a single JavaScript method, cross-browser, to identify an element
Can be used by CSS to apply style to elements
More than one of these can be applied to an element at the same time

Classes and IDs are common ground for the three layers of a web page that we looked at in Chapter 1: structure, style, and script. Selectors are where those layers get wired together so they can all work in concert. HTML provides the building blocks (i.e., elements and their attributes), or structure of the web page. CSS provides the style, or the presentation and position of those elements. JavaScript and jQuery provide the script that controls the behavior or function of those elements.

Imagine that we have a class called slideshow for an image we want to run the slideUp method on:

Sharpen your pencil

Update the structure, style, and script in your page to make only the four image div sections clickable. In the CSS file, create a CSS class (called guess_box) and apply it to the html and the script. It looks like one of our div elements lost its ID attribute too. Can you figure out which one and put it back?

Sharpen your pencil Solution

Add the guess_box class to all the div elements that will be used to hide the discount code. Also, update our selector to use this class, and add it into our CSS file. And it was the main div element that needed to get its ID attribute back.

Let’s have a look at our requirements to-do list to see where we are on building everything that Emily asked for:

	The page should have four sections with one of four “jump for joy” images per section.
	The sections should be clickable.
	We need a message that says “Your Discount is” along with a random discount amount (between 5 and 10 percent).
	When a user clicks on one of the sections, the message should appear below the image in that section.
	If a user clicks again, get rid of the last message and make a new one.

Actually, not very hard.

There are several things involved in displaying a message to the user. Don’t forget, it could be a different message for each user who visits the site.

The next requirement on our list is to show some text that will stay the same as our script runs: “Your Discount is”. But beside that, we need to hold a number that will change or vary depending on the random amount. We need a way to carry that information throughout the script—our page needs a way to store that information. Storing information (or data) that varies is a perfect job for variables. When we want variables in jQuery, we use JavaScript variables.

Now, whenever we want to get the data we stored, we just ask for it by its variable name.

For many of our jQuery scripts, we’ll be storing different kinds of data: numbers, text, or true or false values. In many cases, especially when we need to display different messages to our visitors, we’ll be mixing HTML with these other kinds of data, which gives our web pages even more power. So, how do we go about combining our variables with other values? We use concatenation. Imagine you have a video game where you have a variable called pts that stores the highest score, and you need to display it to the winner:

Which give us:

var discount = Math.floor(Math.random() * 6) + 5;

________________________________________________________

Exercise Solution

We’ll give you the JavaScript code to make a variable called discount that holds a random number from 5 to 10. Write the code for a discount_msg variable that shows the message and the random variable. Make sure the discount message appears inside a paragraph element.

Now that you’ve got a variable set up to store your concatenated discount message, you just need to update what’s in between your <script> tags, so let’s focus there.

Do this!

You’ve got your message ready to go, but how do you display it on the page below the image that’s been clicked? If you think of adding a new message as inserting it into the page, jQuery provides several ways to insert content into an existing element. We’ll cover some more useful ones in more depth in Chapter 4, but for now, let’s just look quickly at the append action.

Exercise Solution

Adding a new message to a web page is really just this simple!

Test Drive

Open the page up in your favorite browser to make sure everything’s working. Pay special attention to the alert to make sure that the discount variable is set up properly.

The discount variable is generating a random number and appends the message to our page the way we expected, but it has an unexpected side effect: the discount shows up over and over again in every div.

That’s not what we wanted to happen. So what went wrong?

We need to append the discount variable only to the individual div that’s clicked. So, how do we select only the one that was clicked and append the discount variable to that one?

Throughout this chapter, we’ve been looking at jQuery selectors and how they return elements that jQuery methods use. And very often, we want to be really specific about which element we’re selecting. When it comes to specificity, the simplest selector to write is $ (this). (All you have to remember is the pronoun “this,” after all.) The $ (this) selector gives us an easy way to point to the current element.

It’s important to think about $ (this) as context-dependent. In other words, $ (this) means different things depending on where or when you use it. One of the best places to use it is within a function that runs when a jQuery method is called:

Let’s see if $ (this) can help us solve our problem. Update your code to use $ (this), as shown in bold below.

Do this!

Test Drive

Open the page up in your favorite browser to make sure everything’s working. Pay special attention to the alert to make sure that we got the discount variable right. Make sure to click several times to check that the random number concatenated into the discount variable works too.

Great question!

That leads us right to the last step on our to-do list:

	The page should have four sections with one of four “jump for joy” images per section.
	The sections should be clickable.
	We need a message that says “Your Discount is” along with a random discount amount (between 5 and 10 percent).
	When a user clicks on one of the sections, the message should appear below the image in that section.
	If a user clicks again, get rid of the last message and make a new one.

So how do we get rid of the last message and make a new one? Use the remove method. The remove method allows us to take an element, or a group of elements, off of the page. Let’s have a look at a really simple page with a list and a button.

Descendant selectors are yet another selector we can use with jQuery, and they happen to fit our situation perfectly. With descendant selectors, we can specify relationships between elements. We can select children, parents, or siblings.

Sharpen your pencil Solution

Start by using the .guess_box class selector, followed by a descendant p selector to access the paragraph you added. Then, use the remove method to take all the p elements in any element with the class of guess_box off the page.

Yes, the order in which you add or remove your elements is important.

You can’t remove an element before you add it, and there’s no point removing an element just after you add it, right?

Sharpen your pencil

Your job is to decide where the remove statement should go. Write the statement on the line numbered 1, 2, or 3 below. Then explain why you put it there. Think about when you need to remove the paragraph, and use the process of elimination to pick the correct place to do that.

Why I think the statement goes there:

_______________________________________________________________

_______________________________________________________________

_______________________________________________________________

_______________________________________________________________

_______________________________________________________________

Sharpen your pencil Solution

Your job is to decide where the remove statement should go. Write the statement on the line numbered 1, 2, or 3 below. Then explain why you put it there. Think about when you need to remove the paragraph, and use the process of elimination to pick the correct place to do that.

Why I think the statement goes there:

The remove statement can’t go on line 1 because it would be outside of the click function for the guess box. The statement can’t go on line 3 because that would remove what I just appended. I want to remove the last discount message before generating a new one, so I’ll put it as the first line of the code block (inside the curly braces) for the guess_box click.

Test Drive

Add the line of code you just wrote to your index.html file. Then, open the page up in your favorite browser to make sure everything’s working. Click several times to check that the random number concatenated into the discount variable works too, and that the old discount values are removed properly, before appending the new code.

Congratulations! You nailed the requirements and made the campaign work.

	The page should have four sections with one of four “jump for joy” images per section.
	The sections should be clickable.
	We need a message that says “Your Discount is” along with a random discount amount (between 5 and 10 percent).
	When a user clicks on one of the sections, the message should appear below the image in that section.
	If a user clicks again, get rid of the last message and make a new one.

You’ve got Chapter 2 under your belt and now you’ve added the basics of jQuery selectors and jQuery methods to your toolbox.