Repetition

Objectives

• use repetition in JavaScript
• explain difference between using loop counters and sentinel values
• explain what an infinite loop is
• use a break statement to exit a loop
• use a continue statement to skip remaining code in an iteration
• use a for loop with a loop counter
• use a for loop to iterate through a collection
• use a do/while loop
• use a while loop

Repetition, document.write()

• JavaScript has a while, do/while, and two "for loop" repetition structures
• Demonstration of write function
• Demonstration of write function and repetition
• Demonstration of write function, repetition (for), and accumulator
• Demonstration of write function, repetition (while), and accumulator
• Demonstration of write function, repetition (do/while), and accumulator
• Demonstration of write function and repetition (for/in)

Repetition structures

  while (expr) {
     ... code executed while expr is true ...
  }

  do {
     ... code executed once and then while expr is true ...
  } while (expr);

  for (initexpr; testexpr; modexpr) {
     ... code executed while testexpr is true ...
  }

  for (variable in object) {
     ... code executed once for each element in object ...
  }

break and continue

• break lets you immediately exit a loop
• continue skips the remaining statements in a loop and starts the next iteration
• you have to be careful when using continue in a while or do/while loop since you might be skipping your loop counter modification statement which is usually the last statement in the loop
• continue works very well with for loops
• break and continue demo

     for (j=1; j<11; j++) {
        if (j==2) continue;
        if (j==5) break;
        document.writeln(j + '<br />');
     }

labeled break and continue

• labeled break jumps to the end of the labeled statement
• continue terminates the current iteration of the labeled loop and starts the next iteration
• you have to be careful when using continue in a while or do/while loop since you might be skipping a loop counter modification statement which is usually the last statement in the loop
• continue works very well with for loops
• labeled break and continue demo

     outerloop:
        for (i=0; i<5; i++) {
        innerloop:
           for (j=0; j<5; j++) {
              if (i==3) continue outerloop
              if (j==2) break innerloop;
              document.writeln(i + ', ' + j + '<br />');
           }
        }

void operator

• void evaluates the operand that follows, throws away the value, and returns undefined
• this may be used to generate the undefined value in older browsers
• often used to evaluate an expression without generating a result
• the example uses it in the JavaScript code for an href attribute to prevent the original window from being trashed when attempting to open a new window
• void operator demo

     document.writeln(void 7);
     <p><a href="javascript: void window.open();">Open a window using void</a></p>

empty statement

• an empty statement is sometimes used to create a loop with no body
• empty statement demo

     for(sum=0, i=1; i<=10; sum+=i++);
     document.writeln('The sum of the numbers 1 to 10 is ' + sum + '<br />');

Repetition and arrays

• Demonstration of sorting an array
• Demonstration of more intelligent sorting (This code sorts numerically if all elements are numbers, otherwise sorts alphabetically. It also uses the built-in array sort method.)

Generating tables using JavaScript (repetition)

Result of preceding program