loops. (no quiz) hand in assignment #1 last chance for q+a on the midterm loops 2

BIT116: Scripting

Loops

2

Today (No Quiz)

Hand in Assignment #1

Last chance for Q+A on the midterm

Loops

3

A1, Midterm Assignment 1 ("A1") is due today

The revision will be due 1 week after I grade the initial version I've got midterms for BIT 142 and 143 to grade, so there may be a delay (probably a week or so) The revision due date will be announced in the email I send out, and posted on the course website You can (and should!!!) submit a revision, even if you did not submit an initial version

You can keep uploading .ZIPs to StudentTracker until I send out the email that says I’m finished grading Include a complete copy each time I'm going to ignore anything except the most recent upload

The Midterm is on Monday, November 9th, in class The exam will be paper and pencil You WILL be allowed to use your 3x5 card on the exam I will be focusing on in-class exercises, material from the slides, and quizzes

MAKE SURE THAT ANYTHING YOU KNOW HOW TO DO ANYTHING THAT YOU MISSED ON ANY QUIZES!!! Any questions?

4

Accumulator Pattern

5

How to accumulate a complete string of output$("#accumulatorExample").click( function (){

// string starts out empty var outputString = "";

var input = $("#name").val();

// Add the start & end tags for "bold" elementoutputString += "Your name: " + input + " \n";

input = $("#flavor").val();outputString += "Favorite flavor:" + input + " ";

// for debugging (troubleshooting) purposes:alert(outputString);

$("#output").html( outputString );});

• This will get the user's input for both their name and their favorite ice cream flavor, and then display those results on the page

6


// string starts out empty 1) var outputString = "";

2) var input = $("#name").val();

// Add the start & end tags for "bold" element3) outputString += "Your name: " + input + " \n";

4) input = $("#flavor").val();5) outputString += "Favorite flavor:" + input + " ";

// for debugging (troubleshooting) purposes:6) alert(outputString);

7) $("#output").html( outputString );});

• Step #1 • Create a new string variable, and make sure that it starts out empty• var outputString = "";

Value of outputString

1 ""

7




// Add the start & end tags for "bold" element

3) outputString += "Your name: " + input + " \n";

• Repeat these Steps: = • var input = $("#name").val(); = Get the user's input• outputString += "Your name: " + input + " \n";

= glue the next blob of text onto the ouputString variable.• Make sure to use the += operator• X += 2 is the same as X = x + 2


1 ""

2 ""

3 "Your name: Mike \n"

(I'm going to assume that Mike was typed into the text box)

8




// Add the start & end tags for "bold" element

3) outputString += "Your name: " + input + " \n";

4) input = $("#flavor").val();5) outputString += "Favorite flavor:" + input + " ";

• Repeat these Steps: = • input = $("#flavor").val(); = Get the user's input• outputString += "Favorite flavor:" + input + " ";

= glue the next blob of text onto the ouputString variable.




5"Your name: Mike \

nFavorite flavor:Mint "

(I'm going to assume that Mintwas typed into the text box)

9


// string starts out empty var outputString = "";

var input = $("#name").val();

// Add the start & end tags for "bold" elementoutputString += "Your name: " + input + " \n";

input = $("#flavor").val();5) outputString += "Favorite flavor:" + input + " ";

// for debugging (troubleshooting) purposes:6) alert(outputString);

7) $("#output").html( outputString );});

• Last Steps• alert(outputString); = display the text in an alert, so that we can see exactly

what the string looks like• $("#output").html( outputString ); = Display on page


5 "Your name: Mike \nFavorite flavor:Mint "

10

Loops

11

Loops example – while loop (indefinite loop)$("#loops").click( function() {1) var output = "";

2) var userInput = "";// A while loop is good here because// we don't know how many times the loop will run

3) while (userInput != null) {4) userInput = prompt("What would you like to append next?\nClick 'cancel' to stop");5) if (userInput != null) {6) output += userInput + " ";

}}

7) $("#whileLoopOutput").html( output );

• First Step – set up the accumulator• var output = ""; = create the variable, and make sure that it's empty

• Second step – set up the input variable• var userInput = ""; = the important thing is that this is not null,

so the loop will run at least once

For this loop we'll first examine the code and then trace through it

12



3) while (userInput != null) {4) userInput = prompt("What would you like to append next?\nClick 'cancel' to stop");5) if (userInput != null) {6) output += userInput + " ";7) }

}$("#whileLoopOutput").html( output );

• Repeat the following: • while (userInput != null) {…} = While the user has NOT clicked cancel• userInput = prompt( ); = pop up the dialog box.

When the user clicks cancel this will return the special value null.• "What would you like to append next?\nClick 'cancel' to stop" = This is what to

display in the box. Note that \n means "go to a new line here"

13

Loops example – while loop (indefinite loop)$("#loops").click( function() {

var output = "";

var userInput = "";// A while loop is good here because// we don't know how many times the loop will runwhile (userInput != null) {

userInput = prompt("What would you like to append next?\nClick 'cancel' to stop");

if (userInput != null) {output += userInput + " ";

}}$("#whileLoopOutput").html( output );

• During each repetition do the following: • if (userInput != null) { … } = Do this only if the user did NOT click cancel• output += userInput + " "; = add the newest input onto the

"accumulator variable". Put the " " at the end so that the input will be listed one per line (i.e., vertically)

14

Loops example – while loop (indefinite loop)$("#loops").click( function() {

var output = "";

var userInput = "";// A while loop is good here because// we don't know how many times the loop will runwhile (userInput != null) {

userInput = prompt("What would you like to append next?\nClick 'cancel' to stop");

if (userInput != null) {output += userInput + " ";

}}$("#whileLoopOutput").html( output );

• Last Step for the while loop:• $("#whileLoopOutput").html( output ); = display all the accumulated

inputs onto the page

15



3) while (userInput != null) {4) userInput = prompt("What would you like to append next?\nClick 'cancel' to stop");5) if (userInput != null) {6) output += userInput + " ";

}}

7) $("#whileLoopOutput").html( output );

Value of output

1 ""

2 ""

(I'm going to assume that the user enters Mintthen

Loop, and then clicks 'Cancel')

16





Value of output Value of userInput

3 "" ""

4 "" "Mint"

5 """Mint"

6 "Mint " "Mint"

(I'm going to assume that the user enters Mint then Loop, and then clicks 'Cancel')

17






3 "" ""

4 "" "Mint"

5 "" "Mint"



4 "Mint ""Loop"

5 "Mint " "Loop"

6 "Mint Loop " "Loop"

(I'm going to assume that the user enters Mintthen Loop, and then clicks 'Cancel')

18






3 "" ""

4 "" "Mint"

5 "" "Mint"



4 "Mint ""Loop"

5 "Mint " "Loop"



4 "Mint Loop "null

(user clicked "Cancel")

5 "Mint Loop " null

3 "Mint Loop " null

19

Loops example – for loop (counting loop)// while loop stuff is left out, but in the example file it goes above here

output = ""; // reset output to be blank// A for loop is good here because// we're counting the number of times the loop runsvar i;for (i = 0; i < 10; i++) {

output += "The current value of i is: " + i + " ";}

$("#forLoopOutput").html( output );

• First Steps for the for loop: • output = ""; = reset the accumulator• var i; = create a variable to hold the count

Again, we'll first explain the code and then trace it

20





• Repetition Steps:• for (i = 0; i < 10; i++) {…} = start i at zero, count up by one each time,

and stop when i is 10• output += "The current value of i is: " + i + " "; = glue the current

value of i onto the accumulator string

21





• Last Step• $("#forLoopOutput").html( output ); = Display the output on the page

22


1) output = ""; // reset output to be blank// A for loop is good here because// we're counting the number of times the loop runs

2) var i;3) for (i = 0; i < 10; i++) {4) output += "The current value of i is: " + i + " ";5) }

6) $("#forLoopOutput").html( output );

Value of i Value of output

1 Does not exist ""

2 Undefined ""

3 0 ""

4 0 "The current value of i is: 0 "

3 1 "The current value of i is: 0 "

4 1"The current value of i is: 0 The current value of

i is: 1 "

23


1) output = ""; // reset output to be blank// A for loop is good here because// we're counting the number of times the loop runs

2) var i;3) for (i = 0; i < 10; i++) {4) output += "The current value of i is: " + i + " ";5) }

6) $("#forLoopOutput").html( output );

Value of i Value of output

(Continued from prior slide)


i is: 1 "


i is: 1 "

4 2"The current value of i is: 0 The current value of i is: 1 The current value of i is: 2 "

Etc.

24

Do Exercises Work on Exercises #1 and #2 for this lecture

25

Good exam question:Describe (in your own words) when is a good situation to use a while (indefinite) loop?

Given some code and a description of what the user does, show: What the contents of the string will be.

Example: "Hi, I'm Kermit! " What will be displayed on the web page

Example: Hi, I'm Kermit

26

Loops – break, continue

27

Loops example – for loop (counting loop)$("#loops").click( function() {

var output = "";var userInput = ""; while (userInput != null) {

userInput = prompt("What would you like to append next?" +"\nClick 'cancel' to stop" +"\nType STOP to stop, or IGNORE to have your input ignored");if (userInput != null) {

if (userInput == "STOP") {break; // out of the nearest enclosing loop

}if (userInput == "IGNORE") {

continue; // jump straight back to line 14 // & start the next iteration of the loop

}

output += userInput + " ";}

}

• At this point you should understand the first two lines of code • while (userInput != null) { … } = repeat ALL of this until the user clicks on cancel

28


var output = "";var userInput = "";while (userInput != null) {





}


}

• The code next to the will display the prompt box over the web page • if (userInput != null) { = this will be true if the user clicked on "Ok" (and NOT "cancel")

1

1

29







}


}

• if (userInput == "STOP") { = If the user typed STOP exactly (must be all caps)• break; = Then break out of the loop (jump to , and continue after there)

break

break

30







}


}• if (userInput == "IGNORE") { = If the user typed STOP exactly (must be all caps)• continue; = Then stop this time through the loop, jump to , and continue from there• (and, of course, show the output on the screen)

continue

continue

31

Do Exercises Work on Exercise #3 for this part of this lecture

loops. (no quiz) hand in assignment #1 last chance for q+a on the midterm loops 2

Documents