CIS 119 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 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

Example 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 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 + ' '); }

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 + ' '); } }

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); <a href="javascript: void window.open();">Open a window using void</a>

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 + ' ');

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)

Source code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Create a table using JavaScript</title>
<style>
table, td, th { border-width: 1; border-style: solid; border-collapse: collapse; }
</style>
</head>
<body>
<table>
<script>
for (row=1; row<=10; row++) {
   if (row%2==0) {
      document.write('<tr bgcolor="lime">');
   } else {
      document.write('<tr>');
   }
   document.write('<th bgcolor="yellow">row=' + row + ',<br /> col=1</th>');
   for (col=2; col<=10; col++) {
      document.write('<td>row=' + row + ',<br /> col=' + col + '</td>');
   }
   document.writeln('</tr>');
}
</script>
</table>
</body>
</html>