|
To apply your knowledge of loops, you will now create a script that deals with arrays using loops. As you progress through this script, try to imagine how difficult it would be without JavaScript's looping features.
This simple script will prompt the user for a series of names. After all of the names have been entered, it will display the list of names in a numbered list. To begin the script, initialize some variables:
names = new Array();
i = 0;
The names array will store the names the user enters. You don't know how many names will be entered, so you don't need to specify a dimension for the array. The i variable will be used as a counter in the loops.
Next, use the prompt statement to prompt the user for a series of names. Use a loop to repeat the prompt for each name. You want the user to enter at least one name, so a do loop is ideal:
do {
next = prompt("Enter the Next Name", "");
if (next > " ") names[i] = next;
i = i + 1;
}
while (next > " ");
Did you Know?
If you're interested in making your scripts as short as possible, remember that you could use the increment (++) operator to combine the i = i + 1 statement with the previous statement: names[i++]=1.
This loop prompts for a string called next. If a name was entered and isn't blank, it's stored as the next entry in the names array. The i counter is then incremented. The loop repeats until the user doesn't enter a name or clicks Cancel in the prompt dialog.
Next, your script can display the number of names that was entered:
document.write("<h2>" + (names.length) + " names entered.</h2>");
This statement displays the length property of the names array, surrounded by level 2 heading tags for emphasis.
Next, the script should display all the names in the order they were entered. Because the names are in an array, the for…in loop is a good choice:
document.write("<ol>");
for (i in names) {
document.write("<li>" + names[i] + "<br>");
}
document.write("</ol>");
Here you have a for…in loop that loops through the names array, assigning the counter i to each index in turn. The script then prints the name with a <li> tag as an item in an ordered list. Before and after the loop, the script prints beginning and ending <ol> tags.
You now have everything you need for a working script. Listing 7.4 shows the HTML file for this example, and Listing 7.5 shows the JavaScript file.
Listing 7.4. A Script to Prompt for Names and Display Them (HTML)
<html>
<head>
<title>Loops Example</title>
</head>
<body>
<h1>Loop Example</h1>
<p>Enter a series of names. I will then
display them in a nifty numbered list.</p>
<script language="JavaScript" type="text/javascript"
src="loops.js">
</script>
</body>
</html>
|
Listing 7.5. A Script to Prompt for Names and Display Them (JavaScript)
// create the array
names = new Array();
i = 0;
// loop and prompt for names
do {
next = window.prompt("Enter the Next Name", "");
if (next > " ") names[i] = next;
i = i + 1;
} while (next > " ");
document.write("<h2>" + (names.length) + " names entered.</h2>");
// display all of the names
document.write("<ol>");
for (i in names) {
document.write("<li>" + names[i] + "<br>");
}
document.write("</ol>");
|
To try this example, save the JavaScript file as loops.js and then load the HTML document into a browser. You'll be prompted for one name at a time. Enter several names, and then click Cancel to indicate that you're finished. Figure 7.3 shows what the final results should look like in a browser.
| 
