Variety of JavaScript Examples Please use speaker notes for additional information!

document.write(" This is green font "); Note also since I am using double quotes outside. I need to use single quotes or no quotes inside for the color. document.write(" This is blue font "); document.write(" This is orange font "); document.write("Notice that the line break was put inside the quotes "); document.write("No line break means no break"); document.write("Also note that the semi-colon is between commands");

Changing pages <input TYPE="button" VALUE="Bristol" onClick="window.location=' <input TYPE="button" VALUE="Grocer" onClick="window.location='

Changing pages <a HREF="#" onClick="window.open(' 'grocer', 'height=500, width=500,scrollbars,resizable,status,toolbar,menubar'); return false;"> <a HREF="#" onClick="window.open(' 'bcc', 'height=500, width=500,scrollbars,resizable');"> The syntax for the open method is window.open(“URL”, “name”, options) In the example above grocer and bcc are names and the options are shown.

<a HREF="#" onClick="window.open(' 'grocer', 'height=500, width=500,scrollbars,resizable,status,toolbar,menubar'); return false;"> Note that the window that was opened has scrollbars, status bar etc based on the options specified.

a HREF="#" onClick="window.open(' 'bcc', 'height=500, width=500,scrollbars,resizable');"> Note that this only specifies scrollbars and resizable so the menu bars etc are missing.

Another open test function openPGrocerNet() { window.open(" } Testing...Testing...Testing...Testing...Testing...Testing...Testing... Click here to go to pgrocer.net Note, when I click on this it brings up the pgrocer.net in the current page and the CIS44 page in the small window. If I had both pointing to the CIS44 page it would change the current window to CIS44 and bring up the new window with CIS44. See the next slide.

Another open test function openPGrocerNet() { window.open(" } Testing...Testing...Testing...Testing...Testing...Testing...Testing... Click here to go to pgrocer.net

Another open test function openPGrocerNet() { window.open(" } Testing...Testing...Testing...Testing...Testing...Testing...Testing... Click here to go to pgrocer.net

Working with a table document.write(" This will show contents of a table! "); document.write(" "); document.write(" First, First "); document.write(" First, Second "); document.write(" Second, First "); document.write(" Second, Second "); document.write(" Third, First "); document.write(" Third, Second "); document.write(" "); The table is complete!

Function to calculate average function addIt() { x = ; alert(x); } Click here Note that JavaScript:functionName() can be used with href to give the location parameter that is associated with the anchor tag's href attribute.. In this case the function is alert. Click here again function addIt() { x = ; alert(x); }

function addIt() { x = ; alert(x); }

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

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!!!"); data_input 5 ct Pass 1 through the while loop: ct = 1 & data_input = 5 so ct is <= data_input & the loop is entered This is number 1 is written since ct is 1 ct is incremented by 1 so ct is now 2 Pass 2 through the while loop ct = 2 & data_input = 5 so ct is <= data_input & the loop is entered This is number 2 is written since ct is 2 ct is increment by 1 so ct is now 3 Pass 3 through the while loop ct = 3 & data_input = 5 so ct is <= data_input & the loop is entered This is number 3 is written since ct = 3 ct is incremented by 1 so ct is now 4 Pass 4 through the while loop ct = 4 & data_input = 5 so ct <= data_input & the loop is entered This is number 4 is written since ct = 4 ct is incremented by 1 so ct is now 5 Pass 5 through the while loop ct = 5 & data_input = 5 so ct <= data_input & the the loop is entered This is number 5 is written since ct = 5 ct is incremented by 1 so ct is now 6 Pass 6 ct = 6 & data_input = 5 so ct is not <= data_input and the loop is not entered

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!!!"); When I was prompted for the number of lines, I entered 4. Which means I see This is a number… written 4 times.

data_input 4 ct Pass 1 through the do...while loop: This is number 1 is written since ct is 1 ct is incremented by 1 so ct is now 2 while checks: ct = 2 & data_input = 4 so ct is <= data_input & the loop is reentered Pass 2 through the do...while loop: This is number 2 is written since ct is 2 ct is incremented by 1 so ct is now 3 while checks: ct = 3 & data_input = 4 so ct is <= data_input & the loop is reentered Pass 3 through the do...while loop: This is number 3 is written since ct is 3 ct is incremented by 1 so ct is now 4 while checks: ct = 4 & data_input = 4 so ct is <= data_input & the loop is reentered Pass 4 through the do...while loop: This is number 4 is written since ct 4 ct is incremented by 1 so ct is now 5 while checks: ct = 5 & data_input = 4 so ct is NOT <= data_input so the loop is not reentered 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)

Math Facts MATH FACTS 1..3 for (i=1; i<=3; i=i+1) { ans=i + i; document.write(i + "+" + i + "=" + ans + " "); }

for (i=1; i<=3; i=i+1) { ans=i + i; document.write(i + "+" + i + "=" + ans + " "); } i1234i1234 Before the loop is started, i is set to 1. First pass through the for loop: ans = i + i means that since i is 1, ans is 2 write the line = 2 Before the second pass is started: i is incremented by 1 so i is now 2 and i is checked to see if it is still less then or equal to 3 before the loop is entered Second pass through the loop: ans = i + i means that since i is 2, ans is 4 write the line = 4 Before the third pass is started: i is incremented by 1 so it is now 3 and i is checked to see if it is still less than or equal to 3 before the loop is entered Third pass through the loop: ans = i + i means that since i is 3, ans is 6 write the line = 6 Before another pass is started: i is incremented by 1 so it is now 4 and is is checked to see if it is still less than or equal to 3. It is NOT so the loop is NOT ENTERED

Math Facts 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 + " "); }

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 ans Outer for loop starts and i is set to 1. Inner for loop starts and j is set to 1. Inside inner loo: ans=1+1 write = 2 Loop back to inner loop and increment j by 1. It is now 2. Check to see if j which is 2 is <= 3. It is so enter loop. ans = write = 3 Loop back to inner loop and increment j by 1. It is now 3. Check to see if j which is 3 is <= 3. It is so enter loop. ans = write = 4 Loop back to inner loop and increment j by 1. It is now 4. Check to see if j which is 3 is <= 3. It is NOT so drop out of loop and loop back to outer loop. In outer loop, increment i by 1 making it 2. Check to see if i which is 2 is <=3. It is so drop down to inner loop. Since you dropped down, reset j = 1 and enter the inner loop. ans = write = 3 1+1=2 1+2=3 1+3=4 2+1=3 2+2=4 2+3=5 3+1=4 3+2=5 3+3=6

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 ans The last thing we put out was = 3 where i was 2 and j was 1. Loop back to inner loop and increment j by 1. It is now 2. Check to see if j which is 2 is <= 3. It is so enter loop. ans = write = 4 Loop back to inner loop and increment j by 1. It is now 3. Check to see if j which is 3 is <= 3. It is so enter loop. ans = write = 5 Loop back to inner loop and increment j by 1. It is now 4. Check to see if j which is 3 is <= 3. It is NOT so drop out of loop and loop back to outer loop. In outer loop, increment i by 1 making it 3. Check to see if i which is 3 is <=3. It is so drop down to inner loop. Since you dropped down, reset j = 1 and enter the inner loop. ans = write = 4 1+1=2 1+2=3 1+3=4 2+1=3 2+2=4 2+3=5 3+1=4 3+2=5 3+3=6

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 ans The last thing we put out was = 4 where i was 3 and j was 1. Loop back to inner loop and increment j by 1. It is now 2. Check to see if j which is 2 is <= 3. It is so enter loop. ans = write = 5 Loop back to inner loop and increment j by 1. It is now 3. Check to see if j which is 3 is <= 3. It is so enter loop. ans = write = 6 Loop back to inner loop and increment j by 1. It is now 4. Check to see if j which is 3 is <= 3. It is NOT so drop out of loop and loop back to outer loop. In outer loop, increment i by 1 making it 4. Check to see if i which is 4 is <=3. It is NOT so drop out of the outer loop - PROCESSING IS COMPLETE 1+1=2 1+2=3 1+3=4 2+1=3 2+2=4 2+3=5 3+1=4 3+2=5 3+3=6

I entered 2 and got confirmation that the answer was correct Now I have entered 3 to the question = After I click OK I get confirmation that = 3 I entered the wrong answer for 1+3= so I got a message saying No and giving me the correct answer. Now I am being prompted for the answer to =

This shows the complete math facts shown by this program. The last problem is =

Math Facts 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 + " "); }

Click on cancel and the processing will end. The output stopped at this point.

Math Facts 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; }

Math Facts 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 In this example I am using a variable that I name endFlag. Remember a break only breaks out of the current loop, so when I encounter the need to break I set the endFlag to Y. I can then test the endFlag back in the outer loop to see if I want to break out of that loop as well.

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; } I am in the inner loop taking in user input - I want to check and see if the user clicked Cancel. If they did the user_input will be null. If the user clicked Cancel the test for if (user_input != null) will be false since the user_input is null. That means we will drop down to the else and set the endFlag = “Y” and break out of the inner loop. Set endFlag to “N” before processing I have now dropped out of the inner loop because of the break. Before returning to the outer loop, I test the endFlag to see if it is equal to Y, if it is I break which breaks out of the outer loop.