JavaScript VI

Loops & Repetition Statements

Iteration

 Instructions on a shampoo bottle     put on hair lather rinse repeat  We call this "iteration"  executing some action repeatedly  usually not forever, but according to some algorithm

Examples

 Roll the dice until you make your roll doubles  Calculate a grade for each student in the class  Scan each word in a document, looking for one that is misspelled  Compute the monthly interest on the loan for each of the next 12 months

JavaScript constructs



while

loop  Used to repeatedly perform a sequence of statements as long as some condition holds 

for

loop  Used to repeatedly perform a sequence of statements for a specified number of times

while

 Syntax … while (condition) { ... body ...

} …

Meaning:

Upon reaching the while , check the

condition.

Execute the

body

of the loop repeatedly as long as the

condition

remains true.

If and when the

condition

becomes false, then exit the loop and continue with the rest of the program Note that the body of the loop must change the condition. Why?

Comparison of if and while

   Appearance is similar if (condition) { ... body ...

} while (condition) { ... body ...

} Meaning is similar  true condition means body is executed Difference is in repetition   body in if statement is executed at most once body in while loop is repeatedly executed until condition is false

Example

 Get a positive number N as value from user, compute and print the sum from 1 to N N = prompt(“Enter a number:”, “0”); N = parseInt(N); sum = 0; i = 1; while (i <= N) { sum = sum + i i = i + 1; What if we forgot this step?

} document.write(“Sum of numbers from 1 to “ + N + “ is: “ + sum + “.”);  Exercise: modify this to compute the sum of all numbers between two user-specified number M and N, with M < N.

While Loop Example

 example: roll two dice repeatedly until doubles are obtained sample output: note: even though while loops and if statements look similar, they are very different control statements  an

if statement

may execute its code 1 time or not at all  a

while loop

may execute its code an arbitrary number of times (including not at all) 8

While Loop Page

9

Counter-Driven Loops

 The Sum of 1 to N program was an example of a “counter-driven” loop  Often we want to repeat an action some number of times   roll the dice 1000 times print out the first 10 lines of a file  we need  a loop that executes some number of times

Counter + while loop

 General form to execute body N times var counter = 0; while (count <

N

) {

body

counter = counter + 1; }  Note  counter is only used to keep track of the repetitions   what happens if we don't increment the counter?

why isn't the test count <= N or count == N?

Counter-Driven Loops

examples : 12

Counter-Driven Loops Page

13

Common Errors

Body of the code doesn't change the condition Wrong initialization Modification step is out of order i = 1; while (i <= N) { sum = sum + i } i = 0; while (i <= N) { sum = sum + i i = i + 1; } i = 1; while (i <= N) { i = i + 1; sum = sum + i }

More Common Errors

Wrong condition i = 1; while (i < N) { sum = sum + i } How about this?

// print odd numbers < 10 x = 1; while (x != 10) { document.writeln(x); x = x + 2; }

An Alternate Formulation

 } { Count down instead of up var counter =

N

; while (count > 0)

body

counter = counter - 1;  Points  is this the right test?

Example



count.html

 Purpose: Count down to 0  Some new features:  Continuous addition of text to text area document.CountForm.Output.value = document.CountForm.Output.value + count + "\n";

Countdown Page

Loops Without Counters

 Loop conditions can be based on any Boolean expression   Not just involving counters Such as comparison of two variables or quantities  Example:

roll.html

 Purpose: keep rolling until doubles  Again using continuous addition of text to text area document.DiceForm.Output.value = document.DiceForm.Output.value + "You rolled: " + roll1 + " " + roll2 + "\n";

Other Examples

 stats.html

For loops

 Simplifies the counter-driven pattern  To execute body N times var counter = 0; while (count <

N

) {

body

counter = counter + 1; }  } { For-loop version for (counter = 0; counter < N; counter = counter + 1) body

For syntax

 for (variable = initial value; exit condition; increment step)  fairly flexible  but almost always used for simple counting for (i = 0; i < N; i++) {

body

}  Note   repeats the body N times i is a conventional name for a loop counter  i++ is the same as i = i + 1

Special case

  the for loop is a special case of the while loop  you can always rewrite a for loop as a while loop for (variable = initial value; condition; increment step) {

body

} Rewritten as variable = initial value; while (condition) {

body

increment step; }

Example



“For” version of Sum-1-to-N program

N = prompt(“Enter a number:”, “0”); N = parseInt(N); sum = 0; for (i = 1; i <= N; i++) { sum = sum + i; } document.write(“Sum of numbers from 1 to “ + N + “ is: “ + sum + “.”);