JavaScript VI

1. JavaScript VI Loops & Repetition Statements

2. 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

3. 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

4. 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

5. 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?

6. 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

7. What if we forgot this step? 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; } 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.

8. While Loop Example • example: roll two dice repeatedly until doubles are obtained 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) sample output:

9. While Loop Page

10. 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

11. 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?

12. Counter-Driven Loops examples:

13. Counter-Driven Loops Page

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

15. More Common Errors • i = 1; • while (i < N) { • sum = sum + i • } Wrong condition • // print odd numbers < 10 • x = 1; • while (x != 10) { • document.writeln(x); • x = x + 2; • } How about this?

16. An Alternate Formulation • Count down instead of up var counter = N; while (count > 0) { body counter = counter - 1; } • Points • is this the right test?

17. 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";

18. Countdown Page

19. 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";

20. Other Examples • stats.html

21. 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 }

22. 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

23. 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; }

24. 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 + “.”);