Embed Size (px)
Citation preview
Variety of JavaScript Examples
Please use speaker notes for additional information!
<script LANGUAGE="JavaScript">document.write("<FONT COLOR='GREEN' SIZE=150%>This is green font</FONT>");</script><br><br>
Note also since I am using double quotes outside. I need to use single quotes or no quotes inside for the color.<br><br><script LANGUAGE="JavaScript">document.write("<FONT COLOR=BLUE SIZE=150%>This is blue font</FONT>");</script><br><br><script LANGUAGE="JavaScript"> document.write("<FONT COLOR='ORANGE' SIZE=150%>This is orange font</FONT><BR>"); document.write("Notice that the line break was put inside the quotes<BR>"); document.write("No line break means no break"); document.write("Also note that the semi-colon is between commands");</script>
<html><head><title>Changing pages</title></head><body><div ALIGN=CENTER><h1><img SRC="signpiece.jpg"></h1><br><form><input TYPE="button" VALUE="Bristol" onClick="window.location='http://www.bristol.mass.edu';"><br><br><br><br><input TYPE="button" VALUE="Grocer" onClick="window.location='http://www.pgrocer.net';"></form></div></body></html>
<html><head><title>Changing pages</title></head><body><div ALIGN=CENTER><a HREF="#" onClick="window.open('http://www.pgrocer.net', 'grocer', 'height=500, width=500,scrollbars,resizable,status,toolbar,menubar'); return false;"><img src="CISa.gif" width=150 height=150></a><br><br><br><br><a HREF="#" onClick="window.open('http://www.bristol.mass.edu', 'bcc', 'height=500, width=500,scrollbars,resizable');"><img src="signpiece.jpg" width=150 height=150></a></div></body></html>
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('http://www.pgrocer.net', 'grocer', 'height=500, width=500,scrollbars,resizable,status,toolbar,menubar'); return false;"><img src="CISa.gif" width=150 height=150></a>
Note that the window that was opened has scrollbars, status bar etc based on the options specified.
a HREF="#" onClick="window.open('http://www.bristol.mass.edu', 'bcc', 'height=500, width=500,scrollbars,resizable');">
Note that this only specifies scrollbars and resizable so the menu bars etc are missing.
<html><head><title>Another open test</title><script language="JavaScript">function openPGrocerNet() { window.open("http://www.pgrocer.net/PFGCIS44.html","pgrocer","height=300,width=300"); }</script></head><body><h2>Testing...Testing...Testing...Testing...Testing...Testing...Testing...</h2><a href="http://www.pgrocer.net" onClick="openPGrocerNet()">Click here to go topgrocer.net</a></body></html>
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.
<html><head><title>Another open test</title><script language="JavaScript">function openPGrocerNet() { window.open("http://www.pgrocer.net/PFGCIS44.html","pgrocer","height=300,width=300"); }</script></head><body><h2>Testing...Testing...Testing...Testing...Testing...Testing...Testing...</h2><a href="http://www.pgrocer.net" onClick="openPGrocerNet()">Click here to go topgrocer.net</a></body></html>
<html><head><title>Another open test</title><script language="JavaScript">function openPGrocerNet() { window.open("http://www.pgrocer.net/PFGCIS44.html","pgrocer","height=300,width=300"); }</script></head><body><h2>Testing...Testing...Testing...Testing...Testing...Testing...Testing...</h2><a href="http://www.pgrocer.net" onClick="openPGrocerNet(); return false;">Click here to go topgrocer.net</a></body></html>
<HTML><HEAD><TITLE>Working with a table</TITLE><SCRIPT TYPE="text/javascript">document.write("<H2>This will show contents of a table!</H2>");document.write("<TABLE BORDER=1 PADDING=1 WIDTH=50%>");document.write("<TR><TD>First, First</TD>");document.write("<TD>First, Second</TD></TR>");document.write("<TR><TD>Second, First</TD>");document.write("<TD>Second, Second</TD></TR>");document.write("<TR><TD>Third, First</TD>");document.write("<TD>Third, Second</TD></TR>");document.write("</TABLE>");</SCRIPT></HEAD><BODY><H2>The table is complete!</H2></BODY></HTML>
<HTML><HEAD><TITLE>Function to calculate average</TITLE><SCRIPT language="JavaScript">function addIt() { x = 12 + 24; alert(x); }</SCRIPT></HEAD><BODY>Click <A HREF="JavaScript:alert('An example of an alert box!')">here</A><BR> 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 thiscase the function is alert.<BR>Click <A HREF="JavaScript:addIt()">here again</A><BR></BODY></HTML>
function addIt() { x = 12 + 24; alert(x); }
function addIt() { x = 12 + 24; alert(x); }
<HTML><HEAD><TITLE>This is the while loop...</TITLE></HEAD><BODY><SCRIPT LANGUAGE=“JavaScript”>var data_input=prompt("How many times should I write the line?",0)ct=1while (ct <= data_input) { document.write("This is number " + ct + "<BR>"); ct = ct + 1; }document.write("<BR>" + "This is the end!!!");</SCRIPT></BODY></HTML>
var data_input=prompt("How many times should I write the line?",0)ct=1while (ct <= data_input) { document.write("This is number " + ct + "<BR>"); ct = ct + 1; }document.write("<BR>" + "This is the end!!!");
data_input
5
ct
1
2
3
4
5
6
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 2Pass 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 3Pass 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 4Pass 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 5Pass 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 6Pass 6 ct = 6 & data_input = 5 so ct is not <= data_input and the loop is not entered
<HTML><HEAD><TITLE>This is the while loop...</TITLE></HEAD><BODY><SCRIPT LANGUAGE=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=1do { document.write("This is number " + ct + "<BR>"); ct = ct + 1; } while (ct <= data_input)document.write("<BR>" + "This is the end!!!");</SCRIPT></BODY></HTML>
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
1
2
3
4
5
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 reenteredPass 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 reenteredPass 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 reenteredPass 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=1do { document.write("This is number " + ct + "<BR>"); ct = ct + 1; } while (ct <= data_input)
<HTML><HEAD><TITLE>Math Facts</TITLE></HEAD><BODY><DIV ALIGN=CENTER><H2>MATH FACTS 1..3</H2><H3><SCRIPT LANGUAGE="JAVASCRIPT">for (i=1; i<=3; i=i+1) { ans=i + i; document.write(i + "+" + i + "=" + ans + "<BR>"); }</SCRIPT></H3></DIV></BODY></HTML>
for (i=1; i<=3; i=i+1) { ans=i + i; document.write(i + "+" + i + "=" + ans + "<BR>"); }
i1234
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 1 + 1 = 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 enteredSecond pass through the loop: ans = i + i means that since i is 2, ans is 4 write the line 2 + 2 = 4Before 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 enteredThird pass through the loop: ans = i + i means that since i is 3, ans is 6 write the line 3 + 3 = 6Before 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
<HTML><HEAD><TITLE>Math Facts</TITLE></HEAD><BODY><DIV ALIGN=CENTER><H2>MATH FACTS 1..3</H2><H3><SCRIPT LANGUAGE="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></H3></DIV></BODY></HTML>
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>"); } }
i j ans1 1 2 2 3 3 4 42 1 3
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 1 + 1 = 2Loop 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 = 1 + 2 write 1 + 2 = 3Loop 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 = 1 + 3 write 1 + 3 = 4Loop 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 = 2 + 1 write 2 + 1 = 3
1+1=21+2=31+3=42+1=32+2=42+3=53+1=43+2=53+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 + "<BR>"); } }
i j ans1 1 2 2 3 3 4 42 1 3 2 4 3 5 43 1 4
The last thing we put out was 2 + 1 = 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 = 2 + 2 write 2 + 2 = 4Loop 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 = 2 + 3 write 2 + 3 = 5Loop 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 = 3 + 1 write 3 + 1 = 4
1+1=21+2=31+3=42+1=32+2=42+3=53+1=43+2=53+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 + "<BR>"); } }
i j ans1 1 2 2 3 3 4 42 1 3 2 4 3 5 43 1 4 2 5 3 6 44
The last thing we put out was 3 + 1 = 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 = 3 + 2 write 3 + 2 = 5Loop 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 = 3 + 3 write 3 + 3 = 6Loop 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=21+2=31+3=42+1=32+2=42+3=53+1=43+2=53+3=6
I entered 2 and got confirmation that the answer was correct
Now I have entered 3 to the question 1 + 2 =
After I click OK I get confirmation that 1 + 2 = 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 2 + 1 =
This shows the complete math facts shown by this program. The last problem is 3 + 3 =
<HTML><HEAD><TITLE>Math Facts</TITLE></HEAD><BODY><H2>MATH FACTS 1..3</H2><SCRIPT LANGUAGE="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></H3></BODY></HTML>
Click on cancel and the processing will end. The output stopped at this point.
<HTML><HEAD><TITLE>Math Facts</TITLE></HEAD><BODY><H2>MATH FACTS 1..3</H2><SCRIPT LANGUAGE="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 manipulationfor (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></H3></BODY></HTML>
<HTML><HEAD><TITLE>Math Facts</TITLE></HEAD><BODY><H2>MATH FACTS 1..3</H2><SCRIPT LANGUAGE="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
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 + "=" + "<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></H3></BODY></HTML>
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.
