Looping Constructs “Here we go loop de loop, on a Saturday night” – Johnny Thunder “First I'm up, and then I'm down. Then my heart goes around and around.” – Yo-Yo, The Osmonds © Copyright 2014, Fred McClurg All Rights Reserved

“while” Loop Flow Chart Description:  As long as the condition is true, the “while” loop executes the block of code.  When the condition is false, the loop exits.  Notice that the condition is at the top of the loop. 2 WHILE Code Block true false

What is a “while” loop? Description: The “while” loop executes a block of code zero or more times. Syntax: while ( condition ) { // true // block of code; } Best used when... This looping construct is used when you don’t know the number of iterations. Also ideal for when the end condition is not well defined or you may wish to protect the block from execution. 3

Simple “while” Loop Discussion: The condition is at the top of the loop and the increment is inside the body of the loop. Example: var i = 0; // initialize index while ( i < 10 ) { // if true console.log( i ); i++; // increment } 4 while.html

Complex “while” Loop var ingalls = [ "Charles", "Caroline", "Mary", "Laura", "Carrie" ]; while ( ingalls.length != 0 ) { console.log( "Array: " + ingalls + " Length: " + ingalls.length ); person = ingalls.pop(); console.log( "Popped: " + person ); } 5 whilePop.html

“do while” Loop Flow Chart Description:  As long as the condition is true, the “do while” loop executes the block of code.  When the condition is false, the loop exits.  Notice that the condition is at the bottom of the loop. 6 DO WHILE DO WHILE Code Block true false

What is a “do while” loop? Description: The “do while” loop executes a block of code one or more times. Syntax: do { // while // block of code; } while ( condition ); // notice semi-colon Best used when... Looping construct is used in those situations when you don’t know the number of iterations. Ideal for when the end condition is not defined and you need to execute the block at least one time, perhaps more. Also called a “Repeat Until” false loop. 7

“do while” Student Exercise Description: Create a script that uses a “do while” loop to print the numbers 0 to 9 to the console. Hint: To get started, look at the “do while” syntax. Also look at the first “while” example code. The solution for this exercise will be similar to the example. 8

Simple “do while” Loop Discussion: The condition is at the bottom of the loop and the increment is inside the body of the loop. Example: var i = 0; // initialize counter do { // while console.log( i ); i++; // increment } while ( i < 10 ); // semi-colon 9 doWhile.html

Complex “do while” and “random()” // count number of times to draw a queen (using a do while) var guess = 0; // number of guesses var cards = [ "Ace", "King", "Queen", "Jack" ]; // face cards var min = 0; // first array index var max = cards.length - 1; // largest index do { // while () guess++; // pick random number between 0 and 3 var pick = Math.floor( (Math.random() * max) + min ); if ( cards[pick] != "Queen" ) // wrong guess console.log( guess + ". Wrong: " + cards[pick] ); } while( cards[pick] != "Queen" ); // remember semi-colon! console.log( guess + ". Right: " + cards[pick] ); console.log( "Guesses: " + guess ); // total tries 10 doWhile.html

What is a “for” loop? Description: A looping construct that is ideal when the exact number (or the max number) of iterations is known. Syntax: for ( initialization; // semi-colon condition; // semi-colon increment|decrement ) { // block of code; } 11

Simple “for” Loop Description: Display a count from 0 to 9. Example: var min = 0; var max = 10; for ( var i = min; i < max; i++ ) { console.log( i ); } 12 for.html

“for” Student Exercise Description: Create a script that uses a “for” loop to count by fives from 0 to 25 and print the results to the console. Hint: To get started, look at the Simple “for” Loop example (previous slide). There are two ways to solve this exercise: 1.Use a modulo inside an “if” statement. 2.Or use a short cut operator. 13

Multiples via “for”, “if”, and “%” Discussion: Use the modulo operator within an “if” statement to determine if a number is an even multiple. Example: var min = 0; var max = 25; for ( var i = min; i <= max; i++ ) { // if ( i % 5 ) { // would this work also? if ( ( i % 5 ) == 0 ) { // even multiple console.log( i ); } 14 forIfModulo.html

Multiples via “for” and “+=” Discussion: Use the “ += “ short-cut operator to count by fives. This solution would execute faster because the loop has to perform fewer iterations. In addition, it is simpler because it contains less lines of code. Example: var min = 0; var max = 25; for ( var i = min; i <= max; i += 5 ) { console.log( i ); } 15 forPlusEqual.html

Array Iteration with “for” Description: Iterate through an array and determine if there is a match to the current document title. Example: var pageTitles = [ 'Home', 'About', 'Contact', 'Array Iteration with \"for\"' ]; for ( var i = 0; i < pageTitles.length; i++ ) { // title of current page in document.title if ( document.title == pageTitles[i] ) console.log( "Current page: " + pageTitles[i] ); else console.log( "Not current page: " + pageTitles[i] ); } 16 whereAmI.html

What is a “for in” loop? Description: A looping construct designed to iterate over the elements of an array. Syntax: for ( var index in arrayName ) { statement;...; } 17

A “for in” Loop Example Description: Looping construct designed to iterate over the elements of an array. Example: var ohMy = [ "Lions", "Tigers", "Bears" ]; for ( var i in ohMy ) { console.log( "ohMy[" + i + "] = " + ohMy[i] ); } 18 forIn.html