Loops. (No Quiz) Hand in Assignment #1 Last chance for Q+A on the midterm Loops 2.
-
Upload
rosalyn-moore -
Category
Documents
-
view
220 -
download
0
Transcript of 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: <b>" + input + "</b><br/>\n";
input = $("#flavor").val();outputString += "Favorite flavor:<i>" + input + "</i><br/>";
// 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
How to accumulate a complete string of output$("#accumulatorExample").click( function (){
// string starts out empty 1) var outputString = "";
2) var input = $("#name").val();
// Add the start & end tags for "bold" element3) outputString += "Your name: <b>" + input + "</b><br/>\n";
4) input = $("#flavor").val();5) outputString += "Favorite flavor:<i>" + input + "</i><br/>";
// 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
How to accumulate a complete string of output$("#accumulatorExample").click( function (){
// string starts out empty 1) var outputString = "";
2) var input = $("#name").val();
// Add the start & end tags for "bold" element
3) outputString += "Your name: <b>" + input + "</b><br/>\n";
• Repeat these Steps: = • var input = $("#name").val(); = Get the user's input• outputString += "Your name: <b>" + input + "</b><br/>\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
Value of outputString
1 ""
2 ""
3 "Your name: <b>Mike</b><br/>\n"
(I'm going to assume that Mike was typed into the text box)
8
How to accumulate a complete string of output$("#accumulatorExample").click( function (){
// string starts out empty 1) var outputString = "";
2) var input = $("#name").val();
// Add the start & end tags for "bold" element
3) outputString += "Your name: <b>" + input + "</b><br/>\n";
4) input = $("#flavor").val();5) outputString += "Favorite flavor:<i>" + input + "</i><br/>";
• Repeat these Steps: = • input = $("#flavor").val(); = Get the user's input• outputString += "Favorite flavor:<i>" + input + "</i><br/>";
= glue the next blob of text onto the ouputString variable.
Value of outputString
3 "Your name: <b>Mike</b><br/>\n"
4 "Your name: <b>Mike</b><br/>\n"
5"Your name: <b>Mike</b><br/>\
nFavorite flavor:<i>Mint</i><br/>"
(I'm going to assume that Mintwas typed into the text box)
9
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: <b>" + input + "</b><br/>\n";
input = $("#flavor").val();5) outputString += "Favorite flavor:<i>" + input + "</i><br/>";
// 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
Value of outputString
5 "Your name: <b>Mike</b><br/>\nFavorite flavor:<i>Mint</i><br/>"
6"Your name: <b>Mike</b><br/>\
nFavorite flavor:<i>Mint</i><br/>"
7"Your name: <b>Mike</b><br/>\
nFavorite flavor:<i>Mint</i><br/>"
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 + "<br/>";
}}
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
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 + "<br/>";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 + "<br/>";
}}$("#whileLoopOutput").html( output );
• During each repetition do the following: • if (userInput != null) { … } = Do this only if the user did NOT click cancel• output += userInput + "<br/>"; = add the newest input onto the
"accumulator variable". Put the "<br/>" 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 + "<br/>";
}}$("#whileLoopOutput").html( output );
• Last Step for the while loop:• $("#whileLoopOutput").html( output ); = display all the accumulated
inputs onto the page
15
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 + "<br/>";
}}
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
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 + "<br/>";7) }
}$("#whileLoopOutput").html( output );
Value of output Value of userInput
3 "" ""
4 "" "Mint"
5 """Mint"
6 "Mint<br/>" "Mint"
(I'm going to assume that the user enters Mint then Loop, and then clicks 'Cancel')
17
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 + "<br/>";7) }
}$("#whileLoopOutput").html( output );
Value of output Value of userInput
3 "" ""
4 "" "Mint"
5 "" "Mint"
6 "Mint<br/>" "Mint"
3 "Mint<br/>" "Mint"
4 "Mint<br/>""Loop"
5 "Mint<br/>" "Loop"
6 "Mint<br/>Loop<br/>" "Loop"
(I'm going to assume that the user enters Mintthen Loop, and then clicks 'Cancel')
18
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 + "<br/>";7) }
}$("#whileLoopOutput").html( output );
Value of output Value of userInput
3 "" ""
4 "" "Mint"
5 "" "Mint"
6 "Mint<br/>" "Mint"
3 "Mint<br/>" "Mint"
4 "Mint<br/>""Loop"
5 "Mint<br/>" "Loop"
6 "Mint<br/>Loop<br/>" "Loop"
3 "Mint<br/>Loop<br/>" "Loop"
4 "Mint<br/>Loop<br/>"null
(user clicked "Cancel")
5 "Mint<br/>Loop<br/>" null
3 "Mint<br/>Loop<br/>" 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 <b>i</b> is: " + i + "<br/>";}
$("#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
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 <b>i</b> is: " + i + "<br/>";}
$("#forLoopOutput").html( output );
• 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 <b>i</b> is: " + i + "<br/>"; = glue the current
value of i onto the accumulator string
21
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 <b>i</b> is: " + i + "<br/>";}
$("#forLoopOutput").html( output );
• Last Step• $("#forLoopOutput").html( output ); = Display the output on the page
22
Loops example – for loop (counting loop)// while loop stuff is left out, but in the example file it goes above here
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 <b>i</b> is: " + i + "<br/>";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 <b>i</b> is: 0 <br/>"
3 1 "The current value of <b>i</b> is: 0 <br/>"
4 1"The current value of <b>i</b> is: 0 <br/>The current value of
<b>i</b> is: 1 <br/>"
23
Loops example – for loop (counting loop)// while loop stuff is left out, but in the example file it goes above here
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 <b>i</b> is: " + i + "<br/>";5) }
6) $("#forLoopOutput").html( output );
Value of i Value of output
(Continued from prior slide)
4 1"The current value of <b>i</b> is: 0 <br/>The current value of
<b>i</b> is: 1 <br/>"
3 2"The current value of <b>i</b> is: 0 <br/>The current value of
<b>i</b> is: 1 <br/>"
4 2"The current value of <b>i</b> is: 0 <br/>The current value of <b>i</b> is: 1 <br/>The current value of <b>i</b> is: 2 <br/>"
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 <b>Kermit</b>!<br/>" 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 + "<br/>";}
}
• 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
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 + "<br/>";}
}
• 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
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 + "<br/>";}
}
• 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
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 + "<br/>";}
}• 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