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

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

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

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]

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:

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

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>

<script type = "text/javascript">

<! hide me from older browsers

<form name = "the_form">

<input type = "checkbox"> One <br>

<input type = "checkbox"> Two <br>

<input type = "checkbox"> Three <br>

<input type = "checkbox"> Four <br>

<input type = "button" value = "check 'em" onClick = "checkFour();"> <br>

</form>

</body>

</html>

Figure 8-5: Checking four checkboxes

With 1,000 checkboxes the function would end up 1,000 lines long, each line identical to the one before it except for the number between brackets Writing this would be very tedious

Worse, sometimes, when a page is dynamically generated (see

Chapter 13), you don’t know how many checkboxes will appear on a page In this case, it would be impossible to write a function like the one

in Figure 8-5

You can avoid both these problems with a loop A loop allows you to

execute the same JavaScript statements multiple times with slight variations For example, a loop could execute the following line 1,000 times, changing the number in the brackets each time

window.document.the_form.elements[0].checked = true;

The checkFour() function in

this script goes through each of

the four checkboxes and sets its

checked property to true (see the

result in Figure 8-6) But this code

is not the best solution, since it

only works for four checkboxes

To work with five checkboxes,

you’d have to add another line

to the function

Figure 8-6: The checkboxes checked

while Loops

One kind of loop is called a while loop In plain English, this translates to

“While such-and-such is true, do the following.” Figure 8-7 shows a while loop

that prints the word happy three times.

<script type = "text/javascript">

<! hide me from older browsers

Figure 8-7: Printing the word happy three times with a while loop

Loops are a very common programming technique They may seem strange the first couple of times you see them, but they are so common that after a while you’ll understand them on sight

The typical while loop starts with a variable set to zero, as in X of Figure 8-7 The variable index is just like any other variable

Once you’ve set this variable, the while loop begins Line Y reads, “While the variable index is less than three, execute the JavaScript between the curly brackets (Z and ]).” The format of this line is important The word

while must be lowercase, and the Boolean test index < 3 must fall between parentheses

When JavaScript sees Y, it checks whether the variable index has a value less than 3 If so, the script runs the lines between the curly brackets Z and ].When we start, index is 0, which is less than 3, so the script executes the two lines between Z and ] Line [ writes the word happy to the web page, and \

adds one to index, changing it from 0 to 1

Once we execute \ and reach the curly bracket in ], JavaScript jumps back to Y to see if index is still less than three This is the nature of the while

loop Every time JavaScript reaches a loop’s closing curly bracket (]), it jumps back to the beginning of the loop (Y) to see whether the test in the parentheses is still true Because 1 is less than 3, JavaScript executes [, which

prints happy again; it then executes \, adding 1 to index (which now has a value of 2)

Again, because we’re in a while loop, JavaScript jumps from ] to Y and checks to see whether index is still less than 3 It is, so [ and \ execute again

The word happy appears a third time, and the script increments index from

2 to 3

Once again, JavaScript jumps from ] to Y and checks to see whether

index is less than 3 This time, however, index is equal to 3, so the test (index < 3)

is not true The while loop stops and JavaScript jumps to ^, the line after the closing curly bracket

Many people have a hard time with looping, so make sure you understand how it works You may find it helpful to translate Y into plain English: “While

index is less than 3, write happy and add 1 to index.”

while Loops and Arrays

Now that you know how while loops work, you can apply them to arrays Look back at the function in Figure 8-5, and notice that each of the four lines is more or less the same:

window.document.the_form.elements[some_number].checked = true;

The only difference is the number between the square brackets Now think about the variable index in Figure 8-7 Its value increases by 1 each time the script goes through the loop This feature makes the index variable ideal for accessing each element in an array Figure 8-8 uses index to create a more flexible version of Figure 8-5

<html>

<head>

<title>Checking Four Checkboxes</title>

<script type = "text/javascript">

<! hide me from older browsers

<form name = "the_form">

<input type = "checkbox"> One <br>

<input type = "checkbox"> Two <br>

<input type = "checkbox"> Three <br>

<input type = "checkbox"> Four <br>

<input type = "button" value = "check 'em" onClick = "checkFour();"> <br>

</body>

</html>

Figure 8-8: Using a loop to check four checkboxes

The critical line is [, which says, “Set form element number index to

true.” The first time through the loop, index is 0, so [ checks the first form element (the first checkbox) Then \ adds 1 to index, changing index from

0 to 1 JavaScript reaches ] and jumps back to Y, executes [ and \ because

index is less than 4, and repeats the process until index equals 4 When index

equals 4 and JavaScript jumps to Y, the while loop ends (because index is no longer less than 4) and JavaScript jumps to ^, the line after the closing curly bracket

Combining while loops and arrays is extremely common, so make sure you comprehend the process The advantage of this kind of code is that it works whether you have just a few checkboxes or a few thousand To get the code to work for, say, 4,000 checkboxes, you would just change the number

in Y from 4 to 4,000 The loop will then run 4,000 times, starting with 0 and finally ending when index equals 4,000

Going Off the Deep End

The script in Figure 8-8 looks at the values of form elements 0 through 3, which are the four checkboxes at the start of the form The next form element in the figure is the button All input elements have a checked value, although it doesn’t really do anything for a button, so

value of this undefined thing, it gets confused and you get a JavaScript error.You can prevent this kind of error by making sure that the values stored

in the array are defined, like this:

if (window.document.the_form.elements[5] != undefined) { var checked_value = window.document.the_form.elements[5].checked;

}

Notice that there are no quotes around the word undefined It’s a special word like true and false

Using array.length in Your Loop

The code in Figure 8-8 works well, but it could use one improvement In general, it’s best to have as few literal numbers in your code as possible: Using specific numbers tends to make code apply only in specific situations

In Figure 8-8, for example, Y works only when exactly four checkboxes appear on the page If you add another checkbox to the web page, you’ll have to remember to change the 4 in Y to 5 Rather than rely on your memory, you should let the computer do the remembering You can rewrite Y like this:

while (index < window.document.the_form.elements.length)

The expression window.document.the_form.elements.length always equals the number of form elements on a page, since adding another checkbox automatically increases the length of the elements array

An Incremental Shortcut

Lines like \ in Figure 8-8 are used so frequently that programmers have come up with the shorthand index++ to replace index = index + 1 That’s the variableindex followed by two plus signs (++), and it saves you the hassle of typingindex twice We’ll be seeing many other shortcuts like this later

Beware of Infinite Loops

You should avoid one common loop mistake like the plague It’s so common that it has a name: the infinite loop Infinite loops happen when your code enters a loop it can never exit Figure 8-9 shows you the classic error

Figure 8-9: The classic infinite loop—don’t try this at home

Running this script will make you sad, so please don’t try it If you do run

it, the script will endlessly write I am infinite! to the page To stop the script

from running, you’d have to quit the browser, which isn’t always easy when you’re stuck in an infinite loop

This loop is infinite because I forgot to add 1 to index after writing “I am infinite!” The index variable starts at 0 and never changes, so index < 10 is always true Since the test while (index < 10) is always true, the loop continues until you exit the browser

The only way to avoid accidentally writing an infinite loop is to exercise caution Whenever you write a loop, make sure the loop will exit at some point

for Loops

Another type of loop is the for loop You format while and for loops differently, but they do the same things Which loop you use is largely a matter of prefer-ence Though for loops look a little more confusing at first, they are more compact

Figure 8-10 compares a while loop and a for loop that perform exactly the same task

// while loop

X var index = 0;

Y while (index < 10)

{ window.document.writeln("hello<br>");

Z index++;

} // for loop [ for (var index = 0; index < 10; index++)

{ window.document.writeln("hello<br>");

}

Figure 8-10: Comparing a while loop and a for loop

Both of the loops in Figure 8-10 write the word hello to a web page ten times The main difference between them is that X,Y, and Z in the while

loop collapse into [ in the for loop The format of a for loop is as follows:

for (initializer; test; incrementer) {

// some JavaScript

}

All for loops start with the word for, followed by parentheses containing three pieces of JavaScript, separated by semicolons The first piece is a state-

ment that is said to initialize the loop Usually this statement declares an index

variable and sets it to the starting number In [ of Figure 8-10, the initializer

of the for loop is var index = 0 (the same as X in the while loop) The ond parameter of a for loop is the test, which, if true, means that the loop will

sec-execute one more time and then test again In [ of Figure 8-10, the test is

index < 10 (the same as Y in the while loop) The final piece is the incrementer, a

statement that changes the condition each time the loop repeats, usually by adding a number to the index variable (like Z in the while loop)

Whether you use while loops or for loops is a matter of taste You can writefor loops in fewer lines, but while loops are a bit easier to read Some people prefer for loops because they lower the risk of accidentally getting into an infinite loop In a while loop, you can easily neglect to putindex++ inside the curly brackets In a for loop, it’s hard to forget

to put this element inside the parentheses because you always have three expressions there

How AntWeb Checks Off All the Checkboxes

Figure 8-11 shows a stripped-down version of how AntWeb uses loops to check off all the checkboxes when a visitor clicks Select All

I’ve taken out AntWeb’s HTML formatting, along with the repetitive code for several of the counties, but the checkAll() function is exactly the same as AntWeb’s To see the complete AntWeb page in all its formatting glory, browse to http://www.bookofjavascript.com/Websites/AntWeb

X <form name = "bayAreaSearchForm">

Y <input type = "checkbox" name = "counties" value = "alameda">Alameda<br>

<input type = "checkbox" name = "counties" value =

"contra costa">Contra Costa<br>

<input type = "checkbox" name = "counties" value = "marin">Marin<br>

Z <input type = "checkbox" name = "selectall"

onClick = "selectAll(window.document.bayAreaSearchForm);">Select All<br>

</form>

<script type = "text/javascript">

<! hide me from older browsers

[ function selectAll(thisForm) {

\ var count = thisForm.counties.length;

] var checkedVal = thisForm.selectall.checked;

^ for (var loop = 0; loop < count; loop++) {

Figure 8-11: AntWeb’s use of arrays and loops

Line-by-Line Analysis of Figure 8-11

The first few lines in Figure 8-11 describe the form that contains the boxes Line X names the form bayAreaSearchForm, and Y and the two lines after it describe each of the checkboxes Line Z describes the checkbox that causes the other checkboxes to become checked This checkbox is named

check-selectall; clicking it calls the function selectAll(), which starts in [ Notice

in Z that when the function is called, the name of the form to act on is passed to the function In [, that form is named thisForm inside the function The nice thing about this is that the selectAll function will work on any page, and for any form You just need to pass the form into the function, as is

done when the function is called in Z Line \, the first line in the function’s body, stores the number of elements in the form into a variable named count.There are four elements in this form—the three county checkboxes and the Select All checkbox—so count will be 4.

Line] stores the checked value of the selectall checkbox: either true,

if the checkbox was just checked, or false, if it was unchecked The real fun begins with the loop, starting in ^ The first time through the loop, the variable named loop will have a value of 0, so thisForm.counties[loop]

in_ will point to the first element in the bayAreaSearch form—the first checkbox The second time through the loop, the value of loop will be 1,

sothisForm.counties[loop] will point to the second checkbox The loop occurs four times, once for each checkbox

You may be thinking that testing the fourth checkbox is a bit unnecessary, and you would be correct The fourth time through the loop, the script is just setting the fourth checkbox to checkVal, which already stores the value

of the fourth checkbox Hence, the script is just setting the value of the fourth checkbox to whatever the value already is If I wanted to avoid this unnecessary step, I could have changed the loop to this:

for (var loop = 0; loop < count; loop++) {

X if (thisForm.counties[loop].name != 'selectAll') {

thisForm.counties[loop].checked = checkedVal;

} }

Here, X looks at the name of the checkbox If it is anything other than

'selectAll', the JavaScript will change the checked value of the checkbox

I decided to leave that out because the unnecessary effort taken by JavaScript

to change the checked value of a checkbox is less than the effort that would be required to examine the name of a checkbox and see whether it is selectAll

each time through the script With the types of tasks JavaScript is generally used for, efficiency decisions like this don’t really save very much time However, if you notice that your script is taking a long time to run, make sure code inside your loops does not take too long Slow code that runs once in a script isn’t too bad Slow code that runs 1,000 times because it’s

in a loop might slow things down noticeably

Creating Your Own Arrays

Arrays are so handy that you’ll often want to create your own A phone book, for example, is an array of names and phone numbers You can think of a survey as an array of questions; an array can also store the answers a visitor enters A slide show is an array of pictures shown in sequence

Happily, JavaScript lets you create your own arrays If you know what you want to store in the array when you create it, use a line like the following:

var rainbow_colors = new Array("red", "orange", "yellow", "green", "blue", "indigo", "violet");

This line creates a variable called rainbow_colors that stores an array of colors The words new Array() tell JavaScript to create a new Array object, just as

new Date() created a new Date object back in Chapter 2 To put values in your new array, simply list them in the parentheses

Everything you’ve learned about JavaScript’s built-in arrays also applies

to arrays you create yourself Figure 8-12 uses the rainbow_colors array to create

a psychedelic strobe effect on a web page

<html>

<head>

<title>Strobe</title>

<script type = "text/javascript">

<! hide me from older browsers

Figure 8-12: A psychedelic strobe effect

Line-by-Line Analysis of Figure 8-12

LineX in Figure 8-12 creates the array and Y sets up the loop, saying, “While

index is less than the number of items in the array, execute the JavaScript between the curly brackets.” The first time through the loop, index is 0, so when Z looks up rainbow_colors[index], it gets the first item in the array, the valuered Line Z assigns this value to window.document.bgColor, which sets the background color to red Once the script has set this color, [ adds 1 to index,and the loop begins again Next time through, index will be 1, so Z will make the background color orange, [ then adds 1 to index, making it 2, and back through the loop we go If you have a very fast computer, the background may strobe too quickly for you to see it In this case, add a few more colors

to the array in X

How the Book of JavaScript Tip Box Works

The Book of JavaScript website has a little textarea that shows various

pro-gramming tips The script keeps these tips in an array and then uses JavaScript

to loop through the array, showing one tip at a time Each tip stays in the textarea for 3.5 seconds before the next one appears I should confess that I got the idea for this tip box from something that the search engine Ask.com (http://www.ask.com, formerly known as Ask Jeeves) once had on its home page In fact, I will present two different versions of the code The first version, shown in Figure 8-13, is very similar to the code Ask.com originally used The second version, which you’ll see in Figure 8-14, is a bit simpler (though not necessarily better)

The code in Figure 8-13 is similar to code from Ask.com and contains many little tricks that I haven’t yet covered It starts out simply enough with

X, which says, “After the page has loaded, call the function startScroll().”The first line in the JavaScript tags, Y, creates an array called tips and loads

it with a bunch of familiar programming adages Line Z creates a variable called num_tips and sets it equal to the number of tips in the tips array

<html>

<head>

<title>Arrays and Loops a la Ask.com</title>

</head>

X <body onLoad = "startScroll();">

<script type = "text/javascript">

<! hide me from older browsers

Y var tips = new Array("Don't forget to comment your code.", "Beware of infinite loops.", "Program so that other humans can understand what you're doing.");

Z var num_tips = tips.length;

var index = 0;

[ while ((num_tips > 0) && (tips[num_tips-1] == ""))

{ num_tips;

} function startScroll() {

a setTimeout("startScroll()", 3500);

} } // show me >

</script>

<form name = "tip_form">

<textarea name = "tip_box" rows = "3" cols = "30"></textarea>

</body>

</html>

Figure 8-13: Ask.com-style use of arrays and loops

Checking for Blank Statements

The next couple of lines exhibit “paranoid” programming style Paranoid programmers make sure everything is perfect before they execute a line of code that’s going to affect the user experience Line [ and the line following

it, for example, make sure no blank statements (two quotation marks with nothing between them) appear at the end of the tips array Who knows why that would happen—but just in case, [ checks the last element in the array If it’s not blank, the loop ends If it is blank, the line below it executes, reducing num_tips by 1 The loop then checks to see whether the second to last element is blank If it’s not, the loop ends If it is, that line runs again, reducing num_tips by 1 once more Notice that you can subtract one from a variable with the syntax variable_name You can also use ++variable_name

and variable_name as shown

Checking the Last Element in the Array

You might be wondering how [ checks the last element of the array ber, num_tips equals the number of items in the array If the array has three items,num_tips equals three However, because the first element in the array

Remem-is zero, the last element in an array will be two—the length of the array minus one To look at the last element of an array, use the following line:

var last_element = the_array[the_array.length - 1];

If the array contains three elements, the_array.length equals 3, and

the_array.length minus 1 equals 2, which is the number JavaScript uses to reference the last element in the array You may be thinking, “There’s no way I’d ever figure that out!” But don’t worry—this kind of array mathematics becomes second nature after you’ve done it a few times

Testing the Limits of Arrays

You may have noticed that before [ checks to see whether the last ment in the array is a blank string, it makes sure there is at least one tip in the array If there are no elements in the array, num_tips will equal 0 If that’s the case, then the second part of the while loop would be checking to see whether

ele-tips[0 – 1] == "", or doing the math, tips[-1] Because arrays start at 0, there will never be a value in position -1, so there’s really no reason to check what’s

in that position When you have two parts to a test that contains and, both parts must be true for the whole thing to be true JavaScript is smart enough

to not bother checking the second part of a test with an and if the first part is false Why bother testing the second part if it already knows the whole thing will be false?

The startScroll() Function

In the startScroll() function, we find more programming paranoia Line \

checks to see whether the variable count actually has a setting If not, its value is the special word null Line ] exhibits even more paranoia Ask.com makes sure the form named rotate has been drawn to the page by checking

to see whether the form named document.tip_form exists If it does not exist,

document.tip_form is false, and the lines between the brackets of the if-then

statement won’t execute I have never encountered any browsers that support JavaScript but not forms If they’re out there, however, ] makes sure JavaScript won’t try to write to a form that doesn’t exist

Line^ looks up a tip in the array and writes it into the textarea This line tells JavaScript to find the form named tip_form and the form element named

tip_box and sets its value to whatever appears on the right side of the equal sign The latter requires some explanation Instead of just looking up the value of element index in the text array and then adding 1 to index, as in

document.tip_form.tip_box.value = tips[index];

index++;

line ^ looks up the value of element index and adds 1 to index right there:

document.tip_form.tip_box.value = tips[index++];

This is legal and saves some space, but it’s a little hard to read

Going back to the notation introduced earlier, if Ask.com had done this,

document.tip_form.tip_box.value = tips[++index];

putting the plus signs in front of index, the JavaScript would add 1 to index

and then look for the value of tips[index] It’s the same as this line:

index++;

document.tip_form.tip_box.value = tips[index];

It’s rare to see people messing around with the location of the double plus and minus operators But if you run into this while looking at source code, you’ll know what’s going on

The next two lines, _ and `, are important for any program that tinuously loops through an array The JavaScript writes a tip in the textarea, then moves on to the next tip in the array, until it runs out of tips Once that happens, the program should return to the first question in the array and start all over Lines _ and ` make this happen Line _ determines whether the last question has appeared If the variable index is more than num_tips - 1,

con-we’ve reached the end of the array Remember, Z set num_tips to the length

of the array, so num_tips - 1 is the position of the array’s last element If index

is greater than num_tips - 1, we’ve reached the array’s end, and ` executes It sets the variable index back to 0, so the next time the script puts tips[index]

into the textarea, index will indicate the first question in the array

Finally, a determines how fast the questions change in the textarea The next chapter will talk more about how the code in a works For now, you just need to know that it translates as, “In 3.5 seconds, call the function

startScroll() again.” Each time the script calls startScroll(), the function puts a new question in the textarea and increments index by 1

<html>

<head>

<title>Arrays and Loops</title>

</head>

<body onLoad = "scroll();">

<script type = "text/javascript">

<! hide me from older browsers

var tips = new Array("Don't forget to comment your code.", "Beware of infinite loops.", "Program so that other humans can understand what you're doing."); var index = 0;

<form name = "tip_form">

<textarea name = "tip_box" rows = "3" cols = "30">

Loops Can Nest

Just as you can nest if-then statements inside other if-then statements, you can also put loops inside other loops For example, Figure 8-15 shows you a script that writes a solid rectangle of Xs to a web page, five Xs high and ten Xs wide (see the result in Figure 8-16) Although this script doesn’t do anything useful, it offers an idea of how nesting loops work

X for (first_loop = 0; first_loop < 5; first_loop++) {

Y for (second_loop = 0; second_loop < 10; second_loop++) {

Z window.document.writeln("X");

} [ window.document.writeln("<br>");

}

Figure 8-15: A simple example of nesting loops

Creating Arrays As You Go Along

If you’re giving someone a quiz and want to store the answers in an array, you must create an array even though you don’t know what values it will store In such cases, you’ll need to build your array piece

by piece

Start by creating an empty array, as in this line:

var the_answers = new Array();

This tells JavaScript to create a new array called the_answers, leaving

it empty

LineX in Figure 8-15 sets up

a loop that will be executed five times

Each time through that loop, the

second, or inner, loop (Y and Z) runs

That loop writes the letter X to the web page ten times After the inner loop has run, [ in the outer loop writes a

<br> to the web page, creating a line break After [ runs, the loop in X

runs again This happens five times

Each time loop X runs, loop Y writes

a line of ten Xs, then [ writes a <br>.Loops inside loops can seem puzzling

at first, but they can come in handy

Figure 8-16: The rectangle of Xs created with nested loops in Figure 8-15

Once you’ve created the array, you can load values into it, like this:

You can store values in an array in any order Reversing the three lines above

wouldn’t make any difference The word maybe goes into the third slot of the

array because the number 2 appears between the square brackets Figure 8-17 demonstrates how to use this technique to create a Mad Lib, that party game

<script type = "text/javascript">

<! hide me from older browsers

X alert("This is a Mad Lib! Please fill in the blanks appropriately.");

Y var answers = new Array();

Z answers[0] = prompt("an animal","bear");

answers[1] = prompt("an adjective","happy");

answers[2] = prompt("a past tense verb","kissed");

answers[3] = prompt("an object","tree");

[ var the_string = "";

\ the_string = the_string + "Once upon a time there was a " + answers[0]; the_string = the_string + " who was very " + answers[1] + ".";

the_string = the_string + " In fact, he was so " + answers[1];

the_string = the_string + " that he " + answers[2] + " a " + answers[3] "."; ] window.document.writeln(the_string);

// show me >

</script>

</body>

</html>

Figure 8-17: A short Mad Lib

It’s not a very long Mad Lib, but you get the idea When someone comes

to this page, the alert in X greets the visitor After the alert, the script creates

a new, empty array in Y The next few lines, starting with Z, fill the array Each of these lines uses the prompt() function to ask a question (and display

a default answer) and then loads the visitor’s answer into the array The first answer goes into array position 0, the next into array position 1, and so on

By the time the script reaches [, the visitor has filled the array’s first four positions Line [ initializes a variable that stores the contents of the Mad Lib The next few lines, starting with \, build this string Each line adds content to the string Line \ adds “Once upon a time there was a user

answer.” The next line appends “who was very user answer” to the end of the

string Line ] writes the complete string to the web page

Associative Arrays

All the arrays we’ve seen so far have stored values according to their numerical

position in the array An associative array uses strings instead of numbers to

store values For example, the following lines create a phone book with an associative array:

var phone_book = new Array();

phone_book["dave thau"] = "(415) 555-5555";

phone_book["information"] = "(415) 555-1212";

The first line creates a new, empty array, as we’ve seen before The next two lines put two associations into the array The first associates the string dave thau with another string, (415) 555-5555 The second associates the string

information with the number to dial for Information To retrieve that number, you would look it up using a line like this:

var information_number = phone_book["information"];

This tells JavaScript to look in the array phone_book for the value associated with the string information The string used to retrieve the association must precisely match the string used to store it Retrieving thau’s phone number with the line

var thau = phone_book["thau"];

won’t work if you originally stored the information as

<script type = "text/javascript">

<! hide me from older browsers

X var phone_book = new Array();

<h1>The Dwarves of Multimedia Gulch</h1>

] <form name = "the_form">

<b>Name:</b>

^ <select onChange =

"displayNumber(phone_book,this.options[this.selectedIndex].value);"> _ <option value = "blank"> Choose a Dwarf

<option value = "happy">Happy

<option value = "sleepy">Sleepy

<option value = "sneezy">Sneezy

<option value = "sleazy">Sleazy

<option value = "sneery">Sneery

<option value = "bleary">Bleary

<option value = "tweaked">Tweaked

Figure 8-18: Creating a phone book using an associative array

Figure 8-19: The phone book page generated by the

code in Figure 8-18

Line-by-Line Analysis of Figure 8-18

When a browser loads this page, it shows a pull-down menu with some names and a text box that displays a phone number (Figure 8-19) Selecting a name puts that person’s phone number in the text box This neat little application doesn’t take too much work to implement

The script starts by creating a new array called phone_book in X and then filling it with the values in lines Y down Note that the first element in the array deals with the header line in the pull-down menu (_) If someone

selects Choose a Dwarf in the pull-down menu, that will put a blank string in

the phone number box

After building the phone_book array, Z defines a function as displayNumber().This function takes two parameters: an array that holds the phone book

we want to use and a name we want to look up in the phone book Line [

looks up the name in the phone book and stores it in the_number Line \

putsthe_number in the text box

Line] starts the form and names it the_form Line ^ is a bit more complicated; it defines the pull-down menu and describes what should happen when a visitor changes the value there Changing the pull-down menu selection triggers the onChange event, which calls the displayNumber()

function As described earlier, displayNumber() takes two parameters: the phone book and the name to look up In this case, we have just one phone book, called phone_book Later we might expand this script to include several phone books—for example, one for friends, called friends_book; one for business, called business_book; and one for favorite shops, called shop_book Because

we can decide which phone book to use whenever we call the displayNumber()

function, switching books is easy If we wanted to use the business_book phone book, we’d just call the function like this:

<select onChange =

"displayNumber(business_book, this.options[selectedIndex].value);">

The second parameter in the function is the name to look up If we choose Happy, the person listed first in _ of Figure 8-18, the value happy

passes to the function

Play around with this example and make sure you understand how the

displayNumber() function works and how the values in ^ enter the function

Summary

This chapter has introduced the last two fundamental ideas behind all programming languages: arrays and loops Now that you’ve learned about variables,if-then statements, functions, loops, and arrays, you’ve learned all

of the basic aspects of computer programming—so be happy! From now

on, everything we learn is specific to how JavaScript works with the browser All the tough programming nitty-gritty is behind us

Before you leave this chapter, make sure you’ve learned how to:

z Create a new array

z Access elements in an array

z Use loops to go through an array’s elements

z Use both for and while loops

window.document.writeln("<img src='square.gif'>")

ten times to the page This is another tough assignment, so give yourself plenty of time to do it

Figure 8-22: The bar chart

Figure 8-20: Asking visitors how many bars

they want

Figure 8-21: Asking for bar values