WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Decision Making with Control...

1WDMD 170 – UW Stevens Point

WDMD 170 Internet Languages

eLesson: Decision Making with Control Structures and Statements

(non-audio version)

© Dr. David C. Gibbs2003-04


Tutorial 4

Decision Making with Control Structures and Statements

Section B - Repetition


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


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


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.


false

trueConditional 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

Body of the loop


false

true

Pretest (Top-Tested) Loop

executes 0 or more times

while (<Conditional expression>){

// statements within// the body of the loop

}

for (lcv = Lo; lcv <= Hi; lcv++){

// statements within body}

Conditional expression Body of the loop


false

true

Posttest (Bottom-Tested) Loop

executes 1 or more times

do{

// statements within// the body of the loop

}while (<Conditional expression>)

Conditional expression

Body of the loop


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);

}


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




1. var count = 10;

2. while (count > 0) {

3. document.writeln(count);

4. --count;

5. }

6. document.writeln(“We have liftoff.”);





1. var count = 1;

2. while (count <= 100) {

3. document.writeln(count);

4. count *= 2;

5. }





a while loop to display the integers from 1 to 10

1. var i = 1; // init2. while (i <= 10){ // test3. document.writeln(i); // process4. i++; // progress5. }

Output12345678910

has these components• Initialization: i = 1;• Test: (i <= 10)• Process: document.writeln(i);• Progress: i++;



document.writeln(i);

false

true

i <= 10 process

i = 1

test

initialization initialization

test

process

progress

i++ progress

Review Question: is the while loop a top or bottom tested loop?

while Statements: Example 4 – flow diagram



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




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); // initwhile (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);



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


while Statements: Infinite LoopSource file: whileExampleInfinite.htm

while loop to illustrate an infinite loop

1. var i = 1;2. while (i <= 10) {3. alert(“The loop control variable is: “ + i4. // 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”.

*/


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) ;


• Convert whileExample1.htm to a do-while loop.• 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 <pre>… </pre> tags below the output so it displays on the page.)

eTask 1


Example of a do…

while statemen

t


Days of Week program in the Web Browser


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);

}


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


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}

Output12345678910

has these components• Initialization: i = 1;• Test: (i <= 10)• Process: document.writeln(i);• Progress: i++;

Source file: forExample1.htm


for statement to display the contents of an array


Output of Fast Foods program



Refer to the instructions on page 211-3 (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



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

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecemberThere are 12 months in a year.


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);

}


for..in loops: Example 3

a for..in loop to display the months of the yearvar 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]);


Source file: monthsOfYearForInSubscripts.htm



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]);


Source file: monthsOfYearForInNames.htm



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



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

12



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

1245


Assignment• Complete exercises #1,2,7,8,10 on pages 225-7 (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<=6; i++) document.writeln(“<h” + i + “>some text</h” + I + “>”);

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


End of eLesson

• Jump to the Beginning of this eLesson

• WDMD 170 Course Schedule

• D2L Courseware Site

Date post:	03-Jan-2016
Category:	Documents
Upload:	barnaby-wood
View:	214 times
Download:	1 times

WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Decision Making with Control...

Documents