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

Variety of JavaScript Examples

Please use speaker notes for additional information!

<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


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


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.

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

Documents

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