Click Here!
|
|
|||
|
|
|
Click Here! |
|
|
|
Chapter 7Loops
CONTENTS
Up to this point in the book, you have learned to produce fairly linear programs. That is, each line of a script gets one chance to execute (an if ... else construct can mean certain lines don't execute), and in the case of functions, each line of the function gets only one chance to execute each time the function is called. Most programming relies on the capability to repeat a number of lines of program code based on a condition or a counter. This is achieved by using loops. The for loop enables you to count through a list and perform the specified command block for each entry in the list. The while loop enables you to test for a condition and repeat the command block until the condition is false. In this chapter, we take a detailed look at loops and their applications, including the following:
Loops-Basic ConceptsLoops enable script writers to repeat sections of program code or command blocks, based on a set of criteria. For example, a loop can be used to repeat a series of actions on each number between 1 and 10 or to continue gathering information from the user until the user indicates she has finished entering all her information. The two main types of loops are those that are conditional (while loops continue until a condition is met or fails to be met) and those that iterate over a set range (the for and for ... in loops). The for and for ... in LoopsThe for loop is the most basic type of loop and resembles similarly named loops in other programming languages including Perl, C, and BASIC. In its most basic form, the for loop is used to count. For instance, in Listing 6.8 in Chapter 6, "Creating Interactive Forms," you needed to repeat a single calculation for each number between 1 and 10. This was easily achieved using a for loop: function calculate(form) { What this loop says is to use the variable num as a counter. Start with num at 1, perform the command block and increment num as long as num is less than or equal to 10. In other words, count from 1 to 10, and for each number perform the command. In its general form, the for command looks like this: for(initial value; condition; update expression) The initial value sets up the counter variable and assigns the initial value. The initial value expression can declare a new variable using var. The expression is also optional. The condition is evaluated at the start of each pass through the loop, so in this loop: for(i=8; i<5; i++) {
the command block would never be executed because 8
< 5 evaluates to false.
Like the initial value expression, the condition is optional,
and when omitted, evaluates to true
by default.
The third part of the for statement is the update expression. This expression is executed at the end of the command block before testing the condition again. This is generally used to update the counter. This expression is optional, and the counter updating can be done in the body of the command block, if needed. To highlight the application of loops, the following script generates dynamic output to the display window. It asks the user for his name, followed by his 10 favorite foods for a JavaScript "top ten" list.
Listing 7.1. Creating a Top Ten list with for loops. <HTML>
This script produces results similar to those in Figure 7.1.
Figure 7.1 : Using loops, you can repeatedly ask users for their 10 favorite foods.
for loops are used not only for counting in increments of one. They can be used for counting in larger quantities. The following line for(j=2; j<=20; j+=2) counts from 2 to 20 by twos. Likewise, for loops can be used to count backward (decrement); the following line counts down from 10 to 1: for(k=10; k>=1; k--) At the same time, simple addition and subtraction are not the only operations allowed in the update expression. The command for(i=1; i<=256; i*=2) will start with i equal to 1 and then proceed to double it until the value is more than 256. Similarly, for(j=3; j<=81; j*=j) repeatedly squares the counter. The for ... in LoopWhere the for loop is a general-purpose loop, JavaScript also has the for ... in loop for more specific applications. The for ... in loop is used to automatically step through all the properties of an object. In order to understand this, remember that each property in an object can be referred to by a number-its index. For instance, this loop for (j in testObject) { increments j from 0 until the index of the last property in the object testObject. This is useful where the number of properties is not known or not consistent, as in a general-purpose function for an event handler. For instance, you may want to create a simple slot machine application. The slot machine can display numbers from 0 to 9-each in a separate text field in a form. If the form is named slotForm, then the loop for (k in slotForm) { could be the basis for displaying the results of spinning the slot machine. With this type of loop, you could easily change the number of items on the slot machine so that instead of three text fields, you could have five fields, two fields, or nine fields. Using Loops to Check for NumbersIn this example you write a single function to check whether or not the information the user has entered in a field is a number. In order to do this, you use the substring() method learned in Chapter 6, and you assume that numbers contain only the digits zero through nine plus a decimal point and a negative sign. The presence of any other character in a field indicates that the value is not numeric. This type of function could then be used, for example, in checking form input. For instance, in Exercise 5.3 (the doubling and squaring form), you could add the function to the script, as shown in Listing 7.2.
Listing 7.2. Checking input with the isNum() function. <HTML> All the number checking takes place in the checkNum() function: function checkNum(toCheck) {
You check each character to see whether it is a number by using one if statement with multiple conditions. Remembering that && is the symbol for logical "and," we are saying if the character doesn't match any number from 0 to 9 or the decimal point or negative sign, then the entry is not a number. An alternative approach to comparing the number to each possible number from 0 to 9 is to use the structure (toCheck.substring(j,j+1) <= "0" && toCheck.substring(j,j+1) >= "9" which would check if the digit is a numeral: if ((toCheck.substring(j,j+1) <= "0") && The while LoopIn addition to the for loop, the while loop provides a different, but similar, function. The basic structure of a while loop is while (condition) { where the condition is any valid JavaScript expression that evaluates to a boolean value. The command block executes as long as the condition is true. For instance, the following loop counts until the value of num is 11: var num = 1; A while loop could easily be used in a testing situation where the user must answer a question correctly to continue: var answer = ""; In this example, you simply set answer to an empty string, so that at the start of the while loop, the condition would evaluate to true and the question would be asked at least once. Now that you have learned both the for loop and the while loop, you are ready to build a more complex program. As an educational tool for children, you are going to build a calculator to solve the typical problems children get on tests: If a leaves b at speed c and d leaves e at speed f and they travel in a straight line toward each other, when will they meet? The student simply enters the required information into the form and then either selects the Calculate button to see the correct answer or a Test button to be tested on the problem. Listing 7.3 contains the code for this program.
Listing 7.3. Travel problem tester. <HTML>
This script produces results like those in Figures 7.2 and 7.3. Figure 7.2 : Using the for loop, you can test the form entries before calculating the result.
Figure 7.3 : The while loop enables you to continually test the user for the correct answer.
In the checkFormNum() function, you use the for loop to cycle through all the first three form elements: for (field = 0; field <=2; field ++) { You can then simply check whether the field contains a numeric. You also use a while loop in the test() function to perform the testing of the student. In both the test() and calculate() functions, you also use a new statement: with. This command is used where numerous references to an object are made in a block of code to make the code shorter and easier to read. For instance, in this script, you refer to the form object. By using with (form), you can then write a block of code without the form prefix on all the properties and method calls. To illustrate, if you have a function that assigned values to five fields in a form, you could write it two different ways: function assign(form) { or function assign(form) { The break and continue StatementsTo add even more utility to the for and while loops, JavaScript includes the break and continue statements. These statements can be used to alter the behavior of the loops beyond a simple repetition of the related command block. The break command does what the name implies-it breaks out of the loop completely, even if the loop isn't complete. For instance, if you want to give students three chances to get a test question correct, you could use the break statement: var answer = ""; In this loop, the command block gets performed three times only if the first two answers are incorrect. A correct answer simply ends the loop prematurely. The continue statement is slightly different. It is used to jump to the next repetition of the command block without completing the current pass through the command block. For instance, if you want to total three numbers input with a prompt statement but want to simply ignore a value if it is not a number, you might use the following structure (you are assuming the existence of a similar checkNum() function to the one you used before): var total = 0; This loop could be extended to add numbers until the user enters 0 as the new value. You do this by using a while loop instead of a for loop: var total = 0; The reason you use the prompt in the while loop's condition is related to when the condition is tested. In this way, if the user enters 0 at the first prompt, the alert dialog box is never displayed. Creating a Game of Tic-Tac-ToeIn this example, you write a script to play a simple game of tic-tac-toe. In order to do this, you use nine text entry fields in a single form to contain the nine spaces of the tic-tac-toe board. The basic approach is as follows: The user plays first. After each play by the user, the relevant rows, columns, and diagonals are checked for a win. If there is no win, you scan each row, column, and diagonal to see if the computer can win. Then you check all rows, columns, and diagonals to see if there is a chance for the user to win. Failing both these scenarios, the computer simply takes any available space.
In order to implement the game easily, you use a standard naming
system for the fields, such as 11 for the top left corner, 13
for the top right corner and 33 for the bottom right corner. In
this way, you will be able to use loops to quickly scan the board
for combinations.
Listing 7.4. Tic-tac-toe with for loops. <HTML>
This script produces results similar to those in Figure 7.4.
Figure 7.4 : This tic-tac-toe game makes extensive use of loops.
To understand better exactly what the script does, let's take a look at each section in turn. var row = 0; Here you declare the global variables and the array object that you use throughout the script. The board object is an instance of the createArray object, which you define using a function later in the script. You use the board array to hold an image of the values displayed in the form because it is easier to work with indexes of an array than the sequential order of elements in a form. function createArray(row,col) { The createArray() function defines the array object you use in this script. Notice the use of for loops to define the object. This type of array definition will be discussed in further detail later in this chapter. It is important to notice how you are building the two-digit numeric indexes by multiplying the row number by 10 and adding it to the column number to produce indexes such as 11, 12, 13, 21, 22, 23, 31, 32, and 33. function buildBoard(form) { buildBoard() displays the values in the board object in the form. By cycling through all the elements in the form using a for loop, you can get the relevant index from the field.name using the eval() function, which converts the name (a string) into a numeric value. function win(index) { The win() function requires more explanation. The function is designed to check all rows, columns, and diagonals crossing the space indicated by index to see if there is a win. For instance, to check the row that index is in, you need to compare the value of board[index] with the value to its immediate right and to its immediate left. At first, it would seem that you could use a statement such as if ((board[index] == board[index+10]) && (board[index] == board[index-10])) to do this. The problem with this is that if the index passed to the function is the third space in a row, you will be attempting to look at a fourth, non-existent space in the first condition. Similarly, if index represents the first space in a row, the second condition will try looking at board[index-10], which doesn't exist. You remedy this situation through the use of conditional expressions. For instance board[(index < 30) ? index + 10 : index - 20] evaluates to board[31] if index is 21 but evaluates to board[12] if index is 32. The testing of diagonals also requires some explanation. You start by checking whether index represents any space on the diagonal from the top left to the bottom right. If it does, you check that diagonal, and then if the space is the middle space on the board, you also check the diagonal from the top right to bottom left. You finish by checking whether the top right or bottom left corner is represented by index; if it is, you check the second diagonal. The play() function, which comes next, is somewhat more complex and also requires more detailed explanation. function play(form,field) { You start by declaring global variables and assigning the correct symbol to the appropriate field form and property of the board object. You do this so that the user can type any character in the field she wants to mark for her play. After this, you use the win() function to check if the play makes the user a winner. //chECK FOR PLAYER WIN If the user has not won, you need to start checking for the best move by the computer. The first thing to do is to look for a position that lets the computer win. You do this with a pair of embedded for loops. These loops enable you to cycle through each position on the playing board. For each position, if the value is an empty string (meaning no play has been made there), you temporarily play the computer's symbol there and check if that produces a win. If it does, you set the appropriate variables and break out of the inside for loop. Because the break statement breaks out of the innermost loop only, you end the outer loop with an if statement to break out of the outer loop if you have found the winning play. At the end of the inner loop, you assign the empty string back to the current position because it did not produce a win, and you are not going to play there at this point. // PLAYER LOST, chECK FOR WINNING POSITION If you have found a winning position, you simply display the play with buildBoard() and then inform the user that the computer won. // chECK IF COMPUTER CAN WIN Next, having failed to find a winning position, it is necessary to look for potential wins by the user in the form of complete rows, columns, or diagonals missing only one play by the user. This is achieved in exactly the same way you looked for a winning computer play, except this time, you check for plays that would generate a winning play by the user. // CAN'T WIN, chECK IF NEED TO STOP A WIN Having failed to find a winning play for the computer or identified a potential win on the part of the user, you simply proceed to find the first empty position and play there. You do this with another set of embedded for loops and break out of the loops once you have found the first empty space. // NOT DONE, chECK FOR FIRST EMPTY SPACE Now that you've studied the functions that drive the game, let's take a look at how you use event handlers in the form. The form consists of nine identical fields (except for their names), named according to the scheme of 11, 12, 13, 21, 22, 23, and so on. Each INPUT tag contains the same two event handlers: <INPUT TYPE=text SIZE=3 NAME="31" In the onFocus event handler, you are simply checking whether the field the user has selected is empty. If not, you remove the focus immediately so that the user is free to play in empty fields only and cannot alter the content of used spaces. The onChange event handler simply calls the play() function, which records the user's play, checks if the user has won, and if necessary, chooses a play for the computer. Creating Arrays with for LoopsNow that you have a firm grasp on the concept of loops, you can look at how for loops can create the equivalent of one-dimensional arrays in JavaScript. As you saw in Chapter 4, "Functions and Objects-The Building Blocks of Programs," JavaScript has provisions for associative arrays in that object properties can be referred to as a numeric index of the object. However, programmers who have studied C, Perl, or Pascal are aware of the value of arrays of the same type.
That is, you need to be able to define an array as an ordered
set of elements of the same type where the number of elements
can vary each time the array is defined. You can do this using
objects by defining the object function using a for
loop.
For instance, to define a numeric array of an unknown number of elements, you might write the object definition function createArray() like this: function createArrary(num) { This function creates an array starting with index 0 and assigns all values of the new array to 0. Using this object, you could then use newArray = new createArray(4) to create an array of four elements called newArray. You would refer to the elements in the array as newArray[0], newArray[1], and so on. SummaryIn this chapter you have learned how to use loops to achieve sophisticated control over the flow of a function or script. Using for loops, you can repeat a command block several times, based on a range and an expression to move through the range. The for ... in loop enables you to cycle through all the properties in an object. The while loop works differently in that the associated command block is executed if a condition is true; otherwise the loop finishes. The break and continue statements enable you to alter the flow of a loop by either breaking out of the loop completely, or prematurely moving on to the next cycle through the loop. You also learned that loops can be used to create array objects. In Chapter 8, "Frames, Documents, and Windows," you will take a close look at the document window, the methods it offers, and how to manipulate it. You will also learn to use frames and take a detailed look at the frames object. Commands
and Extensions Review
|
| Command/Extension | Type | Description |
| for | Statement | Loops based on an initial value, a condition, and an expression |
| for ... in | Statement | Loops through all the properties in an object, returning the index of the property |
| while | Statement | Loops based on a condition; continues until the condition is false |
| with | Statement | Enables a command block to omit an object prefix |
| break | Statement | Breaks out of the current loop |
| continue | Statement | Jumps to the next iteration of the current loop |
| Q | an I use the same variable as the counter for more than one loop? |
| A | Yes. As long as the loops are not embedded, you can reuse counter variables. If loops are embedded, using the same name for both loops results in scripts that don't work as expected. |
| Q | I've seen a repeat ... until loop in some other programming languages. Does JavaScript have one? |
| A | No. The repeat ... until loop is similar to the while loop except that it tests its condition at the end of the loop. JavaScript doesn't have this type of loop. |
|
|
|
Use of this site is subject certain Terms & Conditions. Copyright (c) 1996-1999 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read our privacy policy for details. |
