the book of javascript 2nd edition phần 4 doc

KEEPING TRACK OF

INFORMATION WITH ARRAYS

AND LOOPS

The last chapter showed you how JavaScript

stores radio buttons and pull-down menu

options in lists. In programmer’s parlance,

lists are called arrays. This chapter will teach you

how to create your own arrays and use them to keep

track of large amounts of information.

In this chapter, you’ll learn how to:

z Use JavaScript’s built-in arrays to control your HTML

z Create new arrays of your own information

z Use loops to search through arrays for information

Real-World Examples of Arrays

JavaScript’s built-in arrays are useful in a wide variety of applications. One

of the sites I work on, http://www.antweb.org, uses JavaScript’s built-in

arrays to show users which species of ants live in various counties in the

124 Chapter 8

San Francisco Bay Area (see Figure 8-1). At the bottom of the list of counties

is a Select All checkbox. Clicking this box causes all the other checkboxes to

become checked. This trick is easy to script because the checkboxes are stored

in an array, allowing me to use JavaScript to check off each one. Browse to

http://www.bookofjavascript.com/Websites/AntWeb to see this in action.

Figure 8-1: AntWeb checkboxes

Creating your own arrays can be useful as well. The Book of JavaScript

website employs arrays to show visitors a series of JavaScript programming

tips. In the textarea in Figure 8-2, you’ll see one of a dozen programming tips

that rotate through this box. I store these tips in a JavaScript array and rotate

through the array to put different tips into the textarea. The same principle

applies to making a timed slide show, which we’ll see in the next chapter.

Figure 8-2: Rotating programming tips on the Book of

JavaScript home page

JavaScript’s Built-In Arrays

When a web browser reads an HTML page, it automatically creates a number

of arrays. In the previous chapter we saw that JavaScript creates an array for

each set of radio buttons with the same name. If you create a set of radio

buttons named age inside a form named the_form, you can refer to the first

radio button in the set like this:

window.document.the_form.age[0]

Keeping Track of Information with Arrays and Loops 125

JavaScript also creates an array for the options in each pull-down menu

and scrollable list. Here’s how you could access the second option in a pull￾down menu named gender:

window.document.the_form.gender.options[1]

These are just two of JavaScript’s automatically created arrays. Browsers

also automatically create an array of all the image objects on a web page,

called images. The same holds true for form elements (the array of form

elements is called elements). In Figure 8-3 (part of the Document Object

Model), you can see which elements (the boxes with the words array of in

them) get automatically created arrays.

Figure 8-3: Part of the DOM showing arrays in the document object

Each of these arrays is built based on how the page’s creator has written

its HTML. In the images array, for example, the first image on a web page is

called images[0], the second is images[1], and so on. If you use the images array,

you don’t have to name your images to swap them (as in “Swapping Images”

on page 58). For example, you can swap the first image on a web page with

an image called happy.gif with this line:

window.document.images[0].src = 'happy.gif';

THE CURRENT WINDOW

self, window,

parent, top

various

Window objects

navigator

Navigator object

frames[]

array of

Window objects

location

Location object

history

History object

document

Document object

Package

JavaPackage

object

elements[]

array of HTML

Form element

objects:

Button

Checkbox

FileUpload

Hidden

Password

Radio

Reset

Select

Submit

Text

Textarea

options[]

array of

Option objects

plugins[]

array of

Plugin objects

mimeTypes[]

array of

MimeType objects

forms[]

array of

Form objects

embeds[]

array of

JavaObject objects

applets[]

array of

JavaObject objects

images[]

array of

Image objects

anchors[]

array of

Anchor objects

mimeType[]

array of

MimeType objects

126 Chapter 8

Why would you want to use built-in arrays instead of just naming HTML

elements? Sometimes you have no choice. As we saw in Chapter 7, because

all the radio buttons in a set have the same name, you can access them only

using the built-in array.

Built-in arrays are also useful when you have many elements on a page.

If you have a web page with 100 images, naming them all becomes tedious.

Instead, you can just refer to each image by its number (for a set of 100 images,

the numbers would be 0 to 99).

The best thing about arrays, however, is that a little bit of JavaScript can

act on each element in the array—a great time-saving feature if you have a

100-element array. In the AntWeb example, clicking one checkbox (Select

All) checks all the individual county checkboxes. It doesn’t matter whether

you have a lone checkbox or a thousand of them—the code is the same.

To control an entire array as the AntWeb script does, your code needs to

determine how many elements the array contains and then go through each

element in the array, performing whatever action you want on it. AntWeb,

for example, figures out how many checkboxes there are and then checks

each one.

Figuring Out How Many Items an Array Contains

In all modern JavaScript-enabled browsers, an array’s length property contains

the number of elements in an array. For example, the script in Figure 8-4

figures out how many images a web page holds.

<script type = "text/javascript">

<!-- hide me from older browsers

X var num_images = window.document.images.length;

alert("There are " + num_images + " images on this page. ");

// show me -->

</script>

Figure 8-4: How many images a web page contains

Drop this JavaScript into the bottom of a web page with images, and

you’ll see how it works. The critical line is X, which tells JavaScript to create

a variable called num_images and set it to the number of images in the built-in

images array. If the page has 10 images, num_images will equal 10.

Going Through Arrays

Once you know how many elements are in an array, you need to write some

code that goes through each element. If you have a list of four checkboxes

and want to check them all, you could write a script like Figure 8-5.

<html>

<head>

<title>Checking Four Checkboxes</title>