Head Rush Ajax

you’re on your way 4

247

developing dom apps

With the HTML and CSS already written, all that’s left for

you to take care of is the JavaScript. Let’s gure out what

needs to be done, and start writing some code.

What’s the game plan?

Add a ranking number to each CD, so

users can see the order of the Top 5.

Write a function that clears the

user’s choices and starts over.

Write a function that adds a CD to

the Top 5 list when the CD’s cover

is clicked on.

Create a new le to store the page’s

JavaScript code.

This is the easy part... let’s call

the new le top5.js.

The DOM makes tasks like this

pretty easy. We can put this

code in addToTop5(), also.

We’ll have to add an onClick() event

handler to each CD cover image to

handle this. Then we can create a new

function, called addToTop5().

1

2

3

4

Start out by taking care of Step 1. Create a new le and name it top5.js. Go ahead and create a

function called addToTop5() to handle Step 2, and another function named startOver() to

handle Step 4. We’ll write the code for Step 3 as part of the addToTop5() function, so you don’t

need a separate function for that step. You can leave all of these functions blank for now; we’ll ll

each one in as we go through the chapter.

Be sure you’ve made these changes before you turn the page, and then save your new JavaScript le

as top5.js in the top5/ directory, alongside top5.html and top5.css.

An onClick event handler ...