Decisions and Loops

n.b.

If constructions
if (myAge < 18) { alert ("Sorry, you cannot vote.) }

If...else constructions
var febDays = 0 var theYear = 1993 if (theYear % 4 == 0 { febDays = 29 } else { febDays = 28 )

About Repeat Loops
for (var i = startValue; i<= maxValue; i++) { statement[s] inside loop }

Functions
function functionName ([parameter1]...[parameterN]) { statement[s] }

Functions can

Calling a Function from an Event Handler
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function showMsg(msg) { alert("The button sent: " + msg ) } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Click Me" onClick="showMsg ('The button has been clicked!')"> </FORM> </BODY> </HTML>

As shown by browser

Another Example
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function sayHiToFirst(a, b, c) { alert("Say hello, " + a) } // --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- sayHiToFirst("Gracie", "George","Harry") sayHiToFirst("Larry", "Moe","Curly") // --> </SCRIPT> </BODY> </HTML>

As shown by browser

Variable Scope

Variable Scope Demonstration
<HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- var aBoy = "Charlie brown" // global var hisDog ="Snoopy" // global function sampleFunction() { // using improper design to demonstrate a point var hisDog = "Gromit" // local version of hisDog var output = hisDog + " does not belong to " + aBoy + ".<BR>" document.write(output) } // --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- sampleFunction() // runs as document loads document.write(hisDog + " belongs to " + aBoy + ".") //--> </SCRIPT> </BODY> </HTML>

Browser's interpretation

Arrays

N.B.

Example
var USStates = new Array(51) USStates[0] = "Alabama" USStates[1] = "Alaska" USStates[2] = "Arizona" USStates[3] = "Arkansas" USStates[50] = "Wyoming" ...... ...... ...... alert ("The largest state is " + USStates[1] + ".")

Parallel Arrays

Visualization of two related parallel tables
USStates
"Alabama"
"Alaska"
"Arizona"
"Arkansas"
 
"Wyoming"
(1)
(2)
(3)
(4)
 
(6)
stateEntered
1819
1959
1912
1836
 
1890

There are 2 arrays:-

  1. var USStates = new Array(51)

    USStates[0] = "Alabama"
    USStates[1] = "Alaska"
    USStates[2] = "Arizona"
    USStates[3] = "Arkansas"
    ..........
    ..........
    USStates[50] = "Wyoming"

  2. var stateEntered = new Array(51)

    stateEntered[0]= 1819
    stateEntered[1]= 1959
    stateEntered[2]= 1912
    stateEntered[3]= 1836
    ..........
    ..........
    stateEntered[50]= 1890

Function for Parallel Arrays
function getStateDate() { var selectedState = document.entryForm.entry.value for (var i = 0; i < USStates.length; i++) { if (USStates(i)==selectedState) { break } } alert("That state entered the Union in " + stateEntered[i] + ".") }

Document objects in arrays

e.g. FORMs :

Can give a FORM a name or define as an element of the array of FORMs on the page:

If there is only one form on the page,

see appendix A

End of chapter Exercises

Exercise 1
<HTML> <HEAD> <TITLE>Chpt7 Ex4</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var USStates=new Array(5) USStates[0] = "Alabama" USStates[1] = "Alaska" USStates[2] = "Arizona" USStates[3] = "Arkansas" USStates[4] = "Wyoming" var stateEntered=new Array(5) stateEntered[0]= 1819 stateEntered[1]= 1959 stateEntered[2]= 1912 stateEntered[3]= 1836 stateEntered[4]= 1890 function getStateDate() { var selectedState = document.entryForm.entry.value for (var i = 0; i < USStates.length; i++) { if (USStates[i]==selectedState) { break } } alert("That state entered the Union in " + stateEntered[i] + ".") } // --> </SCRIPT> </HEAD> <BODY> Enter the name of a state: <FORM NAME="entryForm"> <INPUT TYPE="text" NAME="entry"> <INPUT TYPE="button" VALUE="Look Up Entry Date" onClick="getStateDate()"> </FORM> </BODY> </HTML>

Browsers interpretation

Exercise 2
<HTML> <HEAD> <TITLE>chpt7 ex5</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-- function format(ohmage) { var result if (ohmage >= 10e6) { ohmage = ohmage / 10e5 result = ohmage + " Mohms" } else { if (ohmage >= 10e3) { ohmage = ohmage / 10e2 result = ohmage + " Kohms" } else { result = ohmage + " ohms" } } alert(result) } // --> </SCRIPT> </HEAD> <BODY> Please enter OHMAGE value : <FORM NAME="ohmEntry"> <INPUT TYPE="text" NAME="entry"> <INPUT TYPE="button" VALUE ="Submit the value" onClick="(format(parseInt(document.ohmEntry.entry.value)))"> </FORM> </BODY> </HTML>

Browsers interpretation

Exercise 3
<HTML> <HEAD> <TITLE>chpt7 ex6</TITLE> <SCRIPT LANGUAGE=JavaScript> <!-- var tom = new Array(10) tom[0]="green" tom[1]="yellow" tom[2]="red" tom[3]="green" tom[4]="yellow" tom[5]="red" tom[6]="yellow" tom[7]="red" tom[8]="green" tom[9]="yellow" function findRipe() { for (i=0; i<tom.length; i++){ if (tom[i]=="red") { break } } if (tom[i] !="red"){ alert("tough, there are no ripe tomatoes !") } else { i=i+1 alert(" tomato number " + i + " is ripe.") } } // --> </SCRIPT> </HEAD> <BODY> <FORM NAME="tomatoEntry"> <INPUT TYPE="button" VALUE ="Submit the search for a ripe tomato" onClick="(findRipe())"> </FORM> </BODY> </HTML>

Browsers interpretation

Exercise 4
<HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> <!-- var aBoy = "Charlie brown" // global var hisDog ="Snoopy" // global function sampleFunction() { // using improper design to demonstrate a point var output = hisDog + " does now belong to " + aBoy + ".<BR>" document.write(output) } // --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- sampleFunction() // runs as document loads document.write(" As before, " + hisDog + " belongs to " + aBoy + ".") //--> </SCRIPT> </BODY> </HTML>

Browsers interpretation

Exercise 5
<HTML> <HEAD> <TITLE>chpt7_8</TITLE> <SCRIPT> <!-- var planet = new Array(4) planet[0]="Mercury" planet[1]="Venus" planet[2]="Earth" planet[3]="Mars" var distance = new Array(4) distance[0]=36 distance[1]=65 distance[2]=93 distance[3]=141 var diameter = new Array(4) diameter[0]=3100 diameter[1]=2700 diameter[2]=7920 diameter[3]=4200 var selPlan = document.formPlan.entPlan.value function planData(selPlan) { for (i=0; i<planet.length; i++) { if (planet[i] = selPlan) { break } } alert (" Distance from sun is " + distance[i] + " million miles." + " Diameter is " + diameter[i] + " miles.") } //--> <SCRIPT> </HEAD> <BODY> Enter planet name (Mercury, Venus, Earth or Mars) <FORM NAME="formPlan"> <INPUT TYPE="text" NAME="entPlan"> <INPUT TYPE="button" VALUE "Submit Details" onClick="planData(selPlan)"> </BODY> </HTML>

Browsers interpretation

Exercise 5a
<TITLE>chpt7 ex9</TITLE> <SCRIPT> <!-- var planet = new Array(4) planet[0]="Mercury" planet[1]="Venus" planet[2]="Earth" planet[3]="Mars" var distance = new Array(4) distance[0]=36 distance[1]=65 distance[2]=93 distance[3]=141 var diameter = new Array(4) diameter[0]=3100 diameter[1]=2700 diameter[2]=7920 diameter[3]=4200 function planData() { var selPlan = document.formPlan.entPlan.value for (var i=0; i<planet.length; i++) { if (planet[i] == selPlan) { break } } var msg = planet[i] + " is " + distance[i] + " million miles from the Sun and " msg += diameter[i] + " miles in diameter." document.formPlan.outMess.value = msg } //--> </SCRIPT> </HEAD> <BODY> Enter planet name (Mercury, Venus, Earth or Mars) <FORM NAME="formPlan"> <INPUT TYPE="text" NAME="entPlan"><P> <INPUT TYPE="button" VALUE="Look up a Planet" onClick="planData()"><P> <INPUT TYPE="text" NAME="outMess" SIZE=70> </BODY> </HTML>

Browser interpretation