Embed Size (px)
Citation preview
JavaScript Loops
Please use speaker notes for additional information!
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>This is the while loop...</title></head><body><script type="text/javascript"><!--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 + "<br />"); ct = ct + 1; }document.write("<br />" + "This is the end!!!");//--></script></body></html>
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 + "<br />"); ct = ct + 1; }
ct=1
ct<= data_inputDocument.
write includingct
ct=ct + 1Y
N
This flowchart shows the while loop with the decision being made prior to entering the loop.
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>This is the while loop...</title></head><body><script type="text/javascript"><!--//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 + "<br />"); ct = ct + 1; } while (ct <= data_input)document.write("<br />" + "This is the end!!!");//--></script></body></html>
ct=1
ct<= data_input
Document.write including
ct
ct=ct + 1
Y
Nct=1;do { document.write("This is number " + ct + "<br />"); 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.
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Math Facts</title><style type="text/css">div { text-align: center; }</style></head><body><div><h2>MATH FACTS 1..3</h2><script type="text/javascript"><!--for (i=1; i<=3; i=i+1) { for (j=1; j<=3; j=j+1) { ans=i + j; document.write(i + "+" + j + "=" + ans + "<br />"); } }//--></script></div></body></html>
i j 1 1 2 3 4 2 1 2 3 4 3 1 2 3 4
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 1 1 2 3 4 2 1 2 3 4 3 1 2 3 4
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Math Facts</title><style type="text/css">div { text-align: center; }</style></head><body><div><h2>MATH FACTS 1..3</h2><script type="text/javascript"><!--for (i=1; i<=3; i=i+1) { for (j=1; j<=3; j=j+1) { ans=i + j; document.write(i + "+" + j + "=" + "<br />"); var user_input = prompt("What is your answer?",0); if (ans == user_input) { document.write("Yes, the answer is " + ans + "<br />"); } else { document.write("No, the answer is " + ans + "<br />"); } } }//--></script></div></body></html>
i j 1 1 2 3 4 2 1 2 3 4 3 1 2 3 4
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Math Facts</title><style type="text/css">div { text-align: center; }</style></head><body><div><h2>MATH FACTS 1..3</h2><script type="text/javascript"><!--// 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 + "=" + "<br />"); var user_input = prompt("What is your answer?",0); if (user_input != null) { if (ans == user_input) { document.write("Yes, the answer is " + ans + "<br />"); } else { document.write("No, the answer is " + ans + "<br />"); } } else { i=4; break; } } }//--></script></div></body></html>
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Math Facts</title><style type="text/css">div { text-align: center; }</style></head><body><div><h2>MATH FACTS 1..3</h2><script type="text/javascript"><!--// 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 + "=" + "<br />"); var user_input = prompt("What is your answer?",0); if (user_input != null) { if (ans == user_input) { document.write("Yes, the answer is " + ans + "<br />"); } else { document.write("No, the answer is " + ans + "<br />"); } } else { endFlag="Y"; break; } } if (endFlag == "Y") { break; } }//--></script></div></body></html>
