WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Decision Making with Control Structures and Statements (non-audio version) © Dr. David C. Gibbs

WDMD 170 – UW Stevens Point 2 Tutorial 4 Decision Making with Control Structures and Statements Section B - Repetition

WDMD 170 – UW Stevens Point 3 Tutorial 4B Topics Section B - Repetition –Selection vs. Repetition –Types of looping constructs –while statements –do…while statements –for statements –for…in statements –with statements –continue statements

WDMD 170 – UW Stevens Point 4 Selection vs. Repetition Selection statements –The if, if…else and switch statements select only a single branch of code to execute, then continue to the statement that follows Repetition or Loop statements –Repeatedly execute a statement or a series of statements while a specific is true or until a specific condition becomes true

WDMD 170 – UW Stevens Point 5 Loops in JavaScript Three different syntactical implementations of loops: while a condition remains true, execute some statements. do execute some statements while a condition remains true. for a definite number of times, or for each item in a collection, execute some statements.

WDMD 170 – UW Stevens Point 6 false true Conditional expression false true Types of Loops Pretest Loop (Top-Tested) Posttest Loop (Bottom-Tested) executes 0 or more times executes 1 or more times Conditional expression Body of the loop

WDMD 170 – UW Stevens Point 7 false true Pretest (Top-Tested) Loop executes 0 or more times while ( ) { // statements within // the body of the loop } for (lcv = Lo; lcv <= Hi; lcv++) { // statements within body } Conditional expression Body of the loop

WDMD 170 – UW Stevens Point 8 false true Posttest (Bottom-Tested) Loop executes 1 or more times do { // statements within // the body of the loop } while ( ) Conditional expression Body of the loop

WDMD 170 – UW Stevens Point 9 while Statements Used for repeating a statement or a series of statements as long as a given conditional expression evaluates to true –Can use a counter to keep track of iteration (for a count-controlled loop) Syntax while (conditional_expression) { statement(s); }

WDMD 170 – UW Stevens Point 10 while Statements: Example 1 1.var count = 1; 2.while (count <= 5) { 3. document.writeln(count); 4. ++count; 5.} 6.document.writeln(“You have printed 5 numbers.”); Source file: whileExample1.htmwhileExample1.htm

WDMD 170 – UW Stevens Point 11

WDMD 170 – UW Stevens Point 12 while Statements: Example 2 1.var count = 10; 2.while (count > 0) { 3.document.writeln(count); 4.--count; 5.} 6.document.writeln(“We have liftoff.”); Source file: whileExample2.htmwhileExample2.htm

WDMD 170 – UW Stevens Point 13

WDMD 170 – UW Stevens Point 14 while Statements: Example 3 1.var count = 1; 2.while (count <= 100) { 3.document.writeln(count); 4.count *= 2; 5.} Source file: whileExample3.htmwhileExample3.htm

WDMD 170 – UW Stevens Point 15

WDMD 170 – UW Stevens Point 16 while Statements: Example 4 a while loop to display the integers from 1 to 10 1.var i = 1;// init 2.while (i <= 10){// test 3. document.writeln(i); // process 4.i++;// progress 5.} Output has these components Initialization: i = 1; Test: (i <= 10) Process: document.writeln(i); Progress: i++; Source file: whileExample4.htmwhileExample4.htm

WDMD 170 – UW Stevens Point 17 document.writeln(i); false true i <= 10 process i = 1 test initialization test process progress i++ progress Review Question: is the while loop a top or bottom tested loop? while Statements: Example 4 – flow diagram

WDMD 170 – UW Stevens Point 18 while Statements: Example 5 while loop to guarantee a positive entry var num; num = prompt("Please enter a positive number: ",0); // init while (num <= 0) {// test alert(num + " is not positive number! Try again!!"); // process num = prompt("Please enter a positive number: ",0); // progress } alert("Thanks for entering " + num + ", a positive number."); Source file: whileExample5.htmwhileExample5.htm

WDMD 170 – UW Stevens Point 19 while Statements: Example 6 while loop to add up numbers until zero is entered var num, sum = 0;// initialize the accumulator num = prompt("Enter a number (0 to quit): ",0); // init while (num != 0) { // test sum = sum + eval(num); // process num = prompt("Enter a number (0 to quit): ",0); // progress } alert("The sum of numbers is: " + sum); Source file: whileExample6.htmwhileExample6.htm

WDMD 170 – UW Stevens Point 20 Infinite loop A situation in which a loop statement never ends because the conditional expression is never updated or is never false –Need to include code within the body of the while statement that changes some part of the conditional expression –Should also include code that monitors the conditional expression

WDMD 170 – UW Stevens Point 21 while Statements: Infinite Loop Source file: whileExampleInfinite.htmwhileExampleInfinite.htm while loop to illustrate an infinite loop 1.var i = 1; 2.while (i <= 10) { 3. alert(“The loop control variable is: “ + i 4.// i++; 5.} /* CAUTION! Do not preview this in HTML-Kit; it forced me to reboot! This will “lock up” the system. Viewing it in Internet Explorer will force you to use Ctrl-Alt-Delete to “End the Task”. */

WDMD 170 – UW Stevens Point 22 do…while Statements Executes a statement or statements once, then repeats the execution as long as a given conditional expression evaluates to true –“Do once, then test to see if it is done again” Syntax do { statement(s); } while (conditional_expression) ;

WDMD 170 – UW Stevens Point 23 Convert whileExample1.htm to a do-while loop.whileExample1.htm Save the file as doWhileExample1.htm. You should have identical output. Copy in the following question(s) and answer them in the body of the file: –Does the order of the Init, Test, Process, Progress steps change in the do-while loop? If so, what is the new order? –Identify each of the steps for your solution. (Add the steps as comments right in the source code – then copy the source between … tags below the output so it displays on the page.) eTask 1

WDMD 170 – UW Stevens Point 24 Example of a do…while statement

WDMD 170 – UW Stevens Point 25 Days of Week program in the Web Browser

WDMD 170 – UW Stevens Point 26 for Statements Used for repeating a statement or series of statements as long as a given conditional expression evaluates to true –“Do for a prescribed number of iterations” Syntax for (init_expr; condition; update_statement) { statement(s); }

WDMD 170 – UW Stevens Point 27 for Statements: Steps in processing a for loop Initialization expression is started –Only occurs once, when loop is first encountered Evaluate condition –If condition == true  execute loop body, go to next step –If condition == false  for statement ends Execute update statement –Then return to condition evaluation

WDMD 170 – UW Stevens Point 28 for loops: Example 1 a for loop to display the integers from 1 to 10 for (i = 1; i <= 10; i++) { //init, test, progress document.writeln(i); // process } Output has these components Initialization: i = 1; Test: (i <= 10) Process: document.writeln(i); Progress: i++; Source file: forExample1.htmforExample1.htm

WDMD 170 – UW Stevens Point 29 for statement to display the contents of an array

WDMD 170 – UW Stevens Point 30 Output of Fast Foods program

WDMD 170 – UW Stevens Point 31

WDMD 170 – UW Stevens Point 32 Refer to the instructions on page (Gosselin). This is the final version of the CartoonQuiz. Create the file CartoonQuizFinal.htm and save it in your Tutorial04 folder. Preview the.htm file. At the bottom of the page, list the ways this version is superior to the previous versions. eTask 2

WDMD 170 – UW Stevens Point 33 for loops: Example 2 a for loop to display the months of the year var monthsOfYear = new Array(12); monthsOfYear[0] = "January"; monthsOfYear[1] = "February"; monthsOfYear[2] = "March"; monthsOfYear[3] = "April"; monthsOfYear[4] = "May"; monthsOfYear[5] = "June"; monthsOfYear[6] = "July"; monthsOfYear[7] = "August"; monthsOfYear[8] = "September"; monthsOfYear[9] = "October"; monthsOfYear[10] = "November"; monthsOfYear[11] = "December"; var month; for (month = 0; month <= monthsOfYear.length; month++) document.writeln(monthsOfYear[month]); document.writeln("There are " + monthsOfYear.length+ " months in a year."); Source file: monthsOfYearFor.htmmonthsOfYearFor.htm January February March April May June July August September October November December There are 12 months in a year.

WDMD 170 – UW Stevens Point 34 for…in Statements A looping statement that executes the same statement or command block for all the properties within an object –Enables enumeration through an object’s properties Syntax for (variable in object) { statement(s); }

WDMD 170 – UW Stevens Point 35 for..in loops: Example 3 a for..in loop to display the months of the year var monthsOfYear = new Array(12); monthsOfYear[0] = "January"; monthsOfYear[1] = "February"; monthsOfYear[2] = "March"; monthsOfYear[3] = "April"; monthsOfYear[4] = "May"; monthsOfYear[5] = "June"; monthsOfYear[6] = "July"; monthsOfYear[7] = "August"; monthsOfYear[8] = "September"; monthsOfYear[9] = "October"; monthsOfYear[10] = "November"; monthsOfYear[11] = "December"; var month; for (month in monthsOfYear) document.writeln(monthsOfYear[month]); document.writeln("There are " + monthsOfYear.length+ " months in a year."); Source file: monthsOfYearForInSubscripts.htmmonthsOfYearForInSubscripts.htm January February March April May June July August September October November December There are 12 months in a year.

WDMD 170 – UW Stevens Point 36 for..in loops: Example 4 a for..in loop to display the months of the year var monthsOfYear = new Array(12); monthsOfYear["JAN"] = "January"; monthsOfYear["FEB"] = "February"; monthsOfYear["MAR"] = "March"; monthsOfYear["APR"] = "April"; monthsOfYear["MAY"] = "May"; monthsOfYear["JUN"] = "June"; monthsOfYear["JUL"] = "July"; monthsOfYear["AUG"] = "August"; monthsOfYear["SEP"] = "September"; monthsOfYear["OCT"] = "October"; monthsOfYear["NOV"] = "November"; monthsOfYear["DEC"] = "December"; var month; for (month in monthsOfYear) document.writeln(monthsOfYear[month]); document.writeln("There are " + monthsOfYear.length+ " months in a year."); Source file: monthsOfYearForInNames.htmmonthsOfYearForInNames.htm January February March April May June July August September October November December There are 12 months in a year.

WDMD 170 – UW Stevens Point 37 break vs. continue statements break statement –Used to exit a switch, while, do..while, for, or for..in statement. continue statement –Halts a looping statement and restarts the loop with a new iteration

WDMD 170 – UW Stevens Point 38 for loops: Example 5 a for loop to demonstrate the break statement var count; for (count = 1; count <= 5; ++count) { if (count == 3) break; //exits the loop document.writeln(count); } Source file: forLoopBreak.htmforLoopBreak.htm 1212

WDMD 170 – UW Stevens Point 39 for loops: Example 6 a for loop to demonstrate the continue statement var count; for (count = 1; count <= 5; ++count) { if (count == 3) continue; //halts the loop, new iteration document.writeln(count); } Source file: forLoopContinue.htmforLoopContinue.htm

WDMD 170 – UW Stevens Point 40 Assignment Complete exercises #1,2,7,8,10 on pages (Gosselin, Tutorial 04B). See the following notes on some of the problems. –Exercise #1: Make use of a document.writeln(); statement to write 10 numbers on a line, separated by a space. [HINT: if (i % 10 == 0) then you’ve reached a multiple of 10.] Do the exercise twice – once with a while loop and once with a for loop. –Exercise #7: Use a for..in loop to print out the information from the array. E.g. for (info in personalnfo) document.writeln(personalInfo[info]); –Exercise #8: HINT: for (i=1; i some text ”); (I guess that’s more than a hint!) Post your solutions to your Tutorial04 folder CISSRV3 server. Provide a link to exercise 10 in a post to your eReview discussion group. Describe any difficulties and ask any questions you might have in completing exercise 10. You may also post any questions (and the exercise file) to the eReview group – for discussion purposes.

WDMD 170 – UW Stevens Point 41 End of eLesson Jump to the Beginning of this eLesson WDMD 170 Course Schedule D2L Courseware Site