JavaScript Loops Please use speaker notes for additional information!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " This is the while loop... <!-- var data_input=prompt("How many times should I write the line?",0); ct=1; while (ct <= data_input) { document.write("This is number " + ct + " "); ct = ct + 1; } document.write(" " + "This is the end!!!"); //--> In this program we are taking it as data_input the number of lines that you want to print. We then set ct to 1. The ct will be used to count the lines we write. The while loop is done while ct is <= data_input. Inside the loop you write a line which includes the ct. You then add 1 to ct. When the add 1 to ct makes ct no longer <= data_input. At that point, control drops out of the while loop and does the document write which says This is the end!!!
ct=1; while (ct <= data_input) { document.write("This is number " + ct + " "); ct = ct + 1; } ct=1 ct<= data_input Document. write including ct ct=ct + 1 Y N This flowchart shows the while loop with the decision being made prior to entering the loop.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " This is the while loop... <!-- //The do...while executes the statements in the loop ones and then repeats the //the execution while the condition is true. This means the do...while executes //at least once. This is the difference between the do...while and the while that //we looked at earlier. The while evaulates the condition before executing so the //statements in the loop may never be executed. var data_input=prompt("How many times should I write the line?",0); ct=1; do { document.write("This is number " + ct + " "); ct = ct + 1; } while (ct <= data_input) document.write(" " + "This is the end!!!"); //-->
ct=1 ct<= data_input Document. write including ct ct=ct + 1 Y N ct=1; do { document.write("This is number " + ct + " "); ct = ct + 1; } while (ct <= data_input) This shows the loop where the loop is entered and the code execute and then the condition is checked to determine whether or not the loop should be executed again.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Math Facts div { text-align: center; } MATH FACTS 1..3 <!-- for (i=1; i<=3; i=i+1) { for (j=1; j<=3; j=j+1) { ans=i + j; document.write(i + "+" + j + "=" + ans + " "); } //--> i j The for loop initializes, states the condition to stay in the loop and gives the increment value.
As shown on the last slide, 5 was entered and this triggered the wrong answer response. Note that I have now had j run through 1, 2, 3 and now I am back to the outer loop and i has been incremented by 1and is now 2 and j has been reset to 1 because the j for loop was reached through dropdown.
On the last pass, both i and j are 3. Note that each time the I gets incremented, the j gets reset to 1. i j i j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Math Facts div { text-align: center; } MATH FACTS 1..3 <!-- for (i=1; i<=3; i=i+1) { for (j=1; j<=3; j=j+1) { ans=i + j; document.write(i + "+" + j + "=" + " "); var user_input = prompt("What is your answer?",0); if (ans == user_input) { document.write("Yes, the answer is " + ans + " "); } else { document.write("No, the answer is " + ans + " "); } //--> i j
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Math Facts div { text-align: center; } MATH FACTS 1..3 <!-- // If the user presses cancel the input is null - this program tests for null // Break exits out of the closest loop - note that I then set i to 4 to end the outer // loop - some programmers would not choose this approach because they avoid this // kind of manipulation
for (i=1; i<=3; i=i+1) { for (j=1; j<=3; j=j+1) { ans=i + j; document.write(i + "+" + j + "=" + " "); var user_input = prompt("What is your answer?",0); if (user_input != null) { if (ans == user_input) { document.write("Yes, the answer is " + ans + " "); } else { document.write("No, the answer is " + ans + " "); } else { i=4; break; } //-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Math Facts div { text-align: center; } MATH FACTS 1..3 <!-- // If the user presses cancel the input is null - this program tests for null // Break exits out of the closest loop - note that I then set endFlag to Y and // when I return to the outer loop I test to see if the endFlag is Y which // means I want to break out of that loop as well // Note also that null and empty are not the same thing = "" is empty
var endFlag = "N" for (i=1; i<=3; i=i+1) { for (j=1; j<=3; j=j+1) { ans=i + j; document.write(i + "+" + j + "=" + " "); var user_input = prompt("What is your answer?",0); if (user_input != null) { if (ans == user_input) { document.write("Yes, the answer is " + ans + " "); } else { document.write("No, the answer is " + ans + " "); } else { endFlag="Y"; break; } if (endFlag == "Y") { break; } //-->