1. Loops Doing the same thing over and over and over and over and over and over…

2. Loops Very often when you write code, you want the same block of code to run over and over again. Instead of adding the same lines of code over and over again we can use loops. Loops execute the same block of code a specified number of times or while a specified condition is true. – For loops we have a condition. While the condition is true, we execute the code in the loop. We specify what code belongs in the loop using { and } to surround that code. In JavaScript there are two different kind of loops: – for - loops a specified number of times – while - loops while a specified condition is true

3. For loops Used when you know how many times the script should run. Syntax for (var=startvalue; var<=endvalue; var=var+increment) { code to be executed }

4. For loops Example: var i; for (i=0; i<=10; i++) { document.write("The number is " + i); document.write(" "); } Explanation: – loop starts with i=0. – The loop continues as long as i is less than or equal to 10. – i will increase by 1 each time the loop runs. Result (Output to the window) The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10

5. For Example Another Example: Looping through header sizes: for (i = 1; i <= 6; i++) { document.write(" This is header " + i); document.write(" "); } What is the output?

6. For Example Another Example: Calculating an average: var total; total = 0; for (i = 1; i <= 10; i++) { total = total + I; } var avg; avg = total/10; document.write(“the average is: “ + avg + “ ”); What is the output?

7. For Example Another Example: : var total; total = 0; for (i = 1; i <= 10; i++) { newval = parseInt(prompt(“enter a number”)); total = total + newval; } var avg; avg = total/10; document.write(“the average is: “ + avg + “ ”); What is the output?

8. function changeimage() { var i; for (i = 1; i <= 4; i++) { picstring = "kit" + i + ".jpg"; if (document.images) { document.kitpic.src = picstring; alert("continue?"); } else { document.write("no images "); } changeimage(); For Example

9. While Loop The while loop is used when you want the loop to execute and continue executing while the specified condition is true. Syntax: while (var<=endvalue) { code to be executed } Note: The =, >, <, !=, etc.

10. While Loop Example var i=0; while (i<=10) { document.write("The number is " + i); document.write(" "); i=i+1; } Explanation: – loop starts with i=0. – The loop continues to run as long as i is less than, or equal to 10. – i will increase by 1 each time the loop runs. It does pretty much the same thing the for loop (above) did. There is often more than one way to accomplish the same task. Result The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10

11. Example2 var continue; var answer; var total = 0; keepgoing = confirm(“Do you want to enter a number?”); while (keepgoing == true) { answer = parseInt(prompt(“What is the number you wish to enter?”,”0“)); document.write(" The number is " + answer); total = total + answer; keepgoing = confirm(“ Do you want to enter another number?”); } alert(“The sum of the numbers you entered is “ + total + “ ”); Explanation: – The example above defines a loop that starts when the user clicks on “Okay” in the confirm box in answer to the question, “Do you want to enter a number?” – It will continue as long as, every time the user is asked “Do you want to enter another number?” the user answers “yes”. – Inside the loop, the user is prompted to input a number. That number is written to the screen That number is also added to the sum of the numbers entered so far. – The loop stops when the user hits cancel, thus setting continue to “false”. – At this point, the loop is exited and the alert is executed

12. Example3 function changeimage2() { var i = 1; keepgoing = confirm("Do you want to view pics?"); while (keepgoing == true) { picstring = "kit" + i + ".jpg"; if (document.images) { document.kitpic.src = picstring; } else { document.write("no images "); } i = i + 1; if (i > 5) { //5 is the number of pics we have to view i = 1; } keepgoing = confirm("Do you want to continue viewing pics?"); } changeimage2();

13. Assignment 6: Your store sells dog collars Part 1: – Ask the customer if they wish to purchase a dog collar If the customer says yes, ask them what size. – If they want a small collar, the cost is $10, if they want a medium collar, the price is $15, and if they want a large collar, the price is $20. – Store the cost in a variable, and alert the customer to how much they owe. Part 2: add a loop. – You will ask the user, “Do you want to buy another collar?” – If they say “yes”, you will make a loop that allows them to buy more dog collars. It asks them what size It stores the cost in a variable It alerts the customer to how much they owe. – You will continue to ask them if they want to buy another collar until they no longer wishes to purchase anything else. Part 3: see if you can keep a total value that is the total price of all purchases so far and, at the end, prints this value out.

14. Do…While A slight variant of the while loop. – This loop always executes a block of code ONCE – Then it will repeat the loop as long as the specified condition is true. Do { code to be executed } while (var<=endvalue); Example var i=0; do { document.write("The number is " + i); document.write(" "); i++; } while (i<0); This loop always executes at least once, even if the condition is false, because the code is executed before the condition is tested. – In other words, we do everything between the { and }, and then we check to see if the condition is true. – That means that we must execute everything between { and } at least once, even if the condition is false Result The number is 0.

15. For…In: Arrays Used to loop (iterate) through the elements of an array or through the properties of an object. Arrays: – think of an array as a row of boxes (or variables) that hold values. – Instead of giving each box (or variable) a different name, we just give the entire row a name – then we specify which box’s value we want by specifying the number of the box in the row. Example: Animals: We named the entire row “animals” if we wanted to get the value in the 4 th spot in the row called animals, we specify animals[3]. – animals[3] is Bunny – Weirdness. We start counting at 0 if we want the first variable, we’d specify animals[0]. If we want the 5 th variable, we’d specify animals[4] (animals[4] is Giraffe) The index is always one less than if we counted out which variable we want. So if we said something like, – var mypet = animals[2]; document.write(mypet); The value written out would be Gerbil. CatDogGerbilBunnyGiraffe

16. For…In loop The code in the body of the for... in loop is executed once for each element in an array or property of an object. Syntax for (variable in object) { code to be executed } Example Using for...in to loop through an array: var x; var mycars = new Array(); /* creates an array called mycars */ mycars[0] = "Saab"; /*First variable in the array holds “Saab” */ mycars[1] = "Volvo"; /* Second variable in the array holds “Volvo” */ mycars[2] = "BMW"; /* Third variable in the array holds “BMW” */ for (x in mycars) { document.write(mycars[x] + " "); } This will write out all the elements in the array mycars Result Saab Volvo BMW

17. Example 2 This one prints out all the properties associated with window. – It’s a great way to see all the different properties available to you for each object. – You can use it with other objects as well, such as document, form, etc. Try it!! var property; for (property in window) { document.write(property); ocument.write(‘ ’); }