While loops (P78)

There are times you want the computer to repeat the same series of steps over and over. For example, may want to change the color of 10000 elements in an array.

while loops repeat the code inside the brackets as long as the condition is true. Every time it finishes with the code inside the bracket, it tests the condition inside the parenthesis. 

while (condition){
  // statements;
}




var x = 0;
while( x < 10 ){
  document.write(x + "<br>");
  x = x + 1;
}

is equivalent to 

document.write(0 + "<br>");
document.write(1 + "<br>");
document.write(2 + "<br>");
document.write(3 + "<br>");
document.write(4 + "<br>");
document.write(5 + "<br>");
document.write(6 + "<br>");
document.write(7 + "<br>");
document.write(8 + "<br>");
document.write(9 + "<br>");


When using while loops, it is important that you make sure that the condition you are testing for eventually turns to false or else you will have created an infinite loop. 

var num = 1;
while (num <= 4 ){
  document.write(num + "<br>");  // this is an infinite loop
}


Loops are often used in conjunction with arrays. [04_whileloop.html] 

var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

var counter = 0;

while (counter < days.length){
  document.write(days[counter] + ', ');
  counter++;
}
Notes

For loops (p82)

For loops are often used to repeat a block of code a number of times


  for(init; test; update){
       statement;
   }
  1. set init condition,
  2. if test is true,
  3. execute statements,
  4. update condition.
  5. Go back to test until false 







for(var i=0; i<100; i++){
  document.write(i + "<br>");
}
Starting with the initial condition i=0, as long as i < 100, execute statements then increment i by 1. (In plain English, iterate over the statement 100 times) 



<script>
  var pgraphs = document.getElementsByTagName("p"); // get all elements with tag <p>
  pgraphs[0].style.color = "red";
  pgraphs[1].style.color = "red";
  pgraphs[2].style.color = "red";
  pgraphs[3].style.color = "red";
  pgraphs[4].style.color = "red";
</script>


can be turned into a for loop: 
<script>

  var pgraphs = document.getElementsByTagName("p"); // get all elements with tag <p>
  
  for(var i = 0; i < pgraphs.length; i++){
    pgraphs[i].style.color = "red";
  }

</script>


Note that document.getElement... functions returns an element object (in HTML DOM) which represents an HTML element.
HTML DOM Element Object@W3Schools


Examples:
- [no loop: 04_selectbyclass_noloop.html], [using loop: 04_selectbyclass_loop.html]
- [search using for loops and if statements: 04_search.html]
Notes

Lab

- 1. Textbook Ch3: Tutorial: Using Conditional Statements
- 2. Using 03_ifstatement.html as a starting point, create a page that uses if statements so that it displayes the text "black", "dark gray", "gray", "light gray", and "white" based on the background color
- 2. Modify 02.randomcolor.html so that it uses for loops
- 3. Modify 04_search.html so that user can choose to replace any one entry in the list. (Hint: prompt(), and use innerHTML not only to read but to write/modify the selected element)
Notes