6 – Iterative Execution
Questions: Variables Write a line of code to declare a variable called h Write a line of code that: 1) reads the value of the variable called h 2) adds 1, and 3) puts the result back into h var h; h = h + 1;
Session Aims & Objectives To introduce the main concepts involved in getting the machine to perform repetitive tasks. Objectives, by end of this week’s sessions, you should be able to: identify and correct errors in for and while loops create a for loop to repeat code a known number of times create a while loop to repeat code an unknown number of times
Dependencies: Numeric Variables consider the following code: 1 var h; 2 var q; 3 h = 5; 4 q = h + 2; line 3 is dependent on line 1 (it involves h, it needs line 1) line 4 is dependent on line 3 and line 2
Dependencies: Data Flow (Pipes) think of connecting pipes (like plumbing in a house): var h; var q; h = 5; q = h + 2;
Dependencies: String Variables consider the following code: 1 var surname; 2 var forename; 3 var initials; 4 surname = "Jones"; 5 forename = "Alice"; 6 initials = surname.charAt(0) + forename.charAt(0); line 6 is dependent on lines 4 and 5 (it uses the values in the surname and forename variables) line 5 is dependent on line 2 line 4 is dependent on line 1
Question: Variable Dependencies What dependencies exist in the following code? 1 var q1; 2 var q2; 3 var u; 4 var o; 5 var g; 6 q1 = "It is not enough to have a good mind."; 7 q2 = "The main thing is to use it well."; 8 u = q1.length; 9 o = q2.length; 10 g = o + u;
Example: Hello v0 1 user click: 1 Hello (1 line of code) <html> <head><title>Hello</title></head> <body> <input id="btnHello" type="button" value="Hello" onclick="btnHello_onClick()" /> <p id="parHello"></p> </body> </html> <script language="javascript"> function btnHello_onClick(){ parHello.innerHTML = parHello.innerHTML + "Hello<br>"; } </script>
Example: Hello v1 1 user click: 10 Hellos (10 lines of code) Lots of lines imagine 300 Hellos function btnHello_onClick(){ parHello.innerHTML = parHello.innerHTML + "Hello<br>"; }
Example: Hello v2 1 user click: 10 Hellos (6 lines of code) function btnHello_onClick(){ var h; h = 1; while (h <= 10){ parHello.innerHTML = parHello.innerHTML + "Hello<br>"; h = h + 1; }
Hello v2: while loop variable h – used as counter
Example: Hello v3 1 user click: 10 Hellos (4 lines of code) function btnHello_onClick(){ var h; for (h = 1; h <= 10; h++){ parHello.innerHTML = parHello.innerHTML + "Hello<br>"; }
Hello v3: For Loop variable h – set and incremented automatically
Advantages Less code: This makes program: Easier to read Easier to change (imagine 500 Hellos) Hello v1 Hello v3 function btnGo_onClick(){ parHello.innerHTML = parHello.innerHTML + "Hello<br>"; } function btnGo_onClick(){ var h for (h = 1; h<=10;h++){ parHello.innerHTML = parHello.innerHTML + "Hello<br>"; } 10 lines 4 lines
while ... Loop statement repeat code unknown number of times more flexible than For slower than For Syntax: while (condition){ statementblock }
For Statement repeat code known number of times reduces length of code easier to change Syntax: for (initialise; test; update){ statementblock }
Example: while … Loop Can do everything a For … Loop can: var i; var i; i = 1; while (i <= 10){ for (i = 1; i<=10;i++){ lblN.innerText = i; lblN.innerText = i; i = i + 1; } } And more: var i; i = 1; while (i < 10){ lblN.innerText = i; if ((i / 2) == parseInt(i / 2)){ i = i + 1; }else{ i = i + 3; } }
Example: Total Real Power of loops using counter variable do something slightly different each time Example: var num; var tot; tot = 0; for (num=1; num<=4; num++){ tot = tot + num; } lblRes.innerText = tot;
Example: Total
Example: Letter Count <script language="javascript"> function btnCount_onClick(){ var count; var pos; var char; count = 0; for (pos=0; pos<=String(txtWords.value).length-1; pos++){ char = String(txtWords.value).charAt(pos); if (char == "e"){ count = count + 1; } lblCount.innerText = count; </script>
Letter Count Start at first letter If no more letters then go to 5 If letter is an e then add 1 to count Go to 2 Display count
Question: For Statement What does the following code display in parNums: var s; var counter; s = ""; for (counter=1; counter<=10; counter++){ s = s + " " + counter; } parNums.innerText = s; 1 2 3 4 5 6 7 8 9 10
Example: Pendulum v1 <html> <head><title>Pendulum</title></head> <body style="margin: 0;" onload="window_onLoad()"> <img id="imgMid" src="Dot.gif" style="position: absolute;" /> <img id="imgPend" src="Pend.gif" style="position: absolute;" /> </body> </html> <script language="javascript"> var ang; var speed; function window_onLoad(){ imgMid.style.posLeft = document.body.clientWidth / 2; imgMid.style.posTop = document.body.clientHeight / 3; window.setInterval("Swing()", 25); ang = 0; speed = 0.04; } function Swing(){ ang = ang + speed; if (ang > 0.5 || ang < -0.5){ speed = -speed; imgPend.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 150; imgPend.style.posTop = imgMid.style.posTop + Math.cos(ang) * 150; </script>
Example: Pendulum v2 56 lines of code <body style="margin: 0;" onload="window_onLoad()"> <img id="imgMid" src="Dot.gif" style="position: absolute;" /> <img id="imgArm1" src="Dot.gif" style="position: absolute;" /> <img id="imgArm2" src="Dot.gif" style="position: absolute;" /> <img id="imgArm3" src="Dot.gif" style="position: absolute;" /> <img id="imgArm4" src="Dot.gif" style="position: absolute;" /> <img id="imgArm5" src="Dot.gif" style="position: absolute;" /> <img id="imgArm6" src="Dot.gif" style="position: absolute;" /> <img id="imgArm7" src="Dot.gif" style="position: absolute;" /> <img id="imgArm8" src="Dot.gif" style="position: absolute;" /> <img id="imgArm9" src="Dot.gif" style="position: absolute;" /> <img id="imgPend" src="Pend.gif" style="position: absolute;" /> </body> … function Swing(){ ang = ang + speed; if (ang > 0.5 || ang < -0.5){ speed = -speed; } imgPend.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 150; imgPend.style.posTop = imgMid.style.posTop + Math.cos(ang) * 150; imgArm1.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 15; imgArm1.style.posTop = imgMid.style.posTop + Math.cos(ang) * 15; imgArm2.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 30; imgArm2.style.posTop = imgMid.style.posTop + Math.cos(ang) * 30; imgArm3.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 45; imgArm3.style.posTop = imgMid.style.posTop + Math.cos(ang) * 45; imgArm4.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 60; imgArm4.style.posTop = imgMid.style.posTop + Math.cos(ang) * 60; imgArm5.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 75; imgArm5.style.posTop = imgMid.style.posTop + Math.cos(ang) * 75; imgArm6.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 90; imgArm6.style.posTop = imgMid.style.posTop + Math.cos(ang) * 90; imgArm7.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 105; imgArm7.style.posTop = imgMid.style.posTop + Math.cos(ang) * 105; imgArm8.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 120; imgArm8.style.posTop = imgMid.style.posTop + Math.cos(ang) * 120; imgArm9.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 135; imgArm9.style.posTop = imgMid.style.posTop + Math.cos(ang) * 135; </script> 56 lines of code
Example: Pendulum v3 45 lines of code function Swing(){ var a; <body style="margin: 0;" onload="window_onLoad()"> <img id="imgMid" src="Dot.gif" style="position: absolute;" /> <img id="imgArm1" src="Dot.gif" style="position: absolute;" /> <img id="imgArm2" src="Dot.gif" style="position: absolute;" /> <img id="imgArm3" src="Dot.gif" style="position: absolute;" /> <img id="imgArm4" src="Dot.gif" style="position: absolute;" /> <img id="imgArm5" src="Dot.gif" style="position: absolute;" /> <img id="imgArm6" src="Dot.gif" style="position: absolute;" /> <img id="imgArm7" src="Dot.gif" style="position: absolute;" /> <img id="imgArm8" src="Dot.gif" style="position: absolute;" /> <img id="imgArm9" src="Dot.gif" style="position: absolute;" /> <img id="imgPend" src="Pend.gif" style="position: absolute;" /> </body> … function Swing(){ var a; var arm; ang = ang + speed; if (ang > 0.5 || ang < -0.5){ speed = -speed; } imgPend.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * 150; imgPend.style.posTop = imgMid.style.posTop + Math.cos(ang) * 150; for (a=1; a<=9; a++){ arm = document.getElementById("imgArm" + a); arm.style.posLeft = imgMid.style.posLeft + Math.sin(ang) * (a * 15); arm.style.posTop = imgMid.style.posTop + Math.cos(ang) * (a * 15); </script> 45 lines of code
Question: While Loop What does the following display in parNums: var s; var num; s = ""; num = 10; while (num > -6){ s = s + " " + num; num = num - 1.5; } parNums.innerText = s; 10 8.5 7 5.5 4 2.5 1 -0.5 -2 -3.5 -5
Question: While Loop What does the following display in parNums: var num; num = 6; while (num <= 4){ num = num + 5; parNums.innerText = parNums.innerText + num; } nothing, 6 is already greater than 4
Loops: Errors <script language="javascript"> function window_onLoad(){ for (x = 1; x<=10;x++) } } </script> variable not defined
Loops: Errors <script language="javascript"> function window_onLoad(){ var x; for (x=1; x<=10; x++){ } </script> Statement Expected (missing })
Loops: Errors <script language="javascript"> function window_onLoad(){ var x; for (x = 1; x<=10; x++){ } } </script>
break?
Session Aims & Objectives To introduce the main concepts involved in handling more complex (multi valued) data Objectives, after this week’s sessions, you should be able to: declare arrays assign values to array elements use array elements use for loops with arrays
Example: German Numbers User Requirements describe user's objectives no mention of technology Software Requirements Functional list facilities to be provided (often numbered) Non-functional list desired characteristics (often more subjective) SPECIFICATION User Requirements help people learn German numbers 1 - 10 Software Requirements Functional: show German word for numbers (between 1 and 10) user enter digits check if correct Non-functional should be easy to use
Example: German Numbers Problem: can't directly pick random word Can: pick random number 1 – eins 2 – zwei 3 – drei 4 – vier 5 – funf 6 – sechs 7 – sieben 8 – acht 9 – neun 10 – zehn
Random Numbers 1 + parseInt( 10 * Random() ) 1 0.000 0.0000 3 2 2.563 0.000 0.0000 3 2 2.563 0.2563 6 5 5.678 0.5678 10 9 9.999 0.9999
Example: German Numbers v0 function btnStart_onClick(){ n = 1 + parseInt(Math.random() * 10) if (n == 1){ parQuest.innerText = "What is eins?"; }else{ if (n == 2){ parQuest.innerText = "What is zwei?"; if (n == 3){ parQuest.innerText = "What is drei?"; if (n == 4){ parQuest.innerText = "What is vier?"; if (n == 5){ parQuest.innerText = "What is funf?"; if (n == 6){ parQuest.innerText = "What is sechs?"; if (n == 7){ parQuest.innerText = "What is sieben?"; if (n == 8){ parQuest.innerText = "What is acht?"; if (n == 9){ parQuest.innerText = "What is neun?"; if (n == 10){ parQuest.innerText = "What is zehn?"; } var n; function btnStart_onClick(){ n = 1 + parseInt(Math.random() * 10) if (n == 1){ parQuest.innerText = "What is eins?"; }else{ if (n == 2){ parQuest.innerText = "What is zwei?"; if (n == 3){ parQuest.innerText = "What is drei?"; if (n == 4){ parQuest.innerText = "What is vier?"; if (n == 5){ parQuest.innerText = "What is funf?"; if (n == 6){ parQuest.innerText = "What is sechs?"; if (n == 7){ parQuest.innerText = "What is sieben?"; if (n == 8){ parQuest.innerText = "What is acht?"; if (n == 9){ parQuest.innerText = "What is neun?"; if (n == 10){ parQuest.innerText = "What is zehn?"; } function btnCheck_onClick(){ if (parseInt(txtAns.value) == n){ parRes.innerText = "Correct!"; parRes.innerText = "Sorry, please try again." + n; Pick random number Use If statements one inside another
Array Variables (what) multiple values – stored in single variable Index 6 5 4 3 2 1 index – identifies individual values (called elements) Value 141 151 143 155 139 127 134 the value of element 3 is 155 last element
Arrays Variables
Array Variables (Declaration) General syntax: var varname = new Array(lastElement); Specific examples: var HR = new Array(16); var x = new Array(8);
Array Variables (Assignment) General syntax: arrayname[index] = expression Specific examples: HR[0] = 134; HR[5] = 151 + b; x[5] = 23.87; x[7] = (y + 189.2516) / 2;
Questions: Arrays Consider the following code: var x; var res; var age = new Array(2); x = 2; age[0] = 19.6; age[1] = 11.23; age[2] = 15.37; res = age[x]; How many arrays are there? Name the array(s). What is in res after the code executes? 1 age 15.37
Arrays: why? (declaration) 5 variable declarations Single array declaration var Name1; var Name2; var Name3; var Name4; var Name5; Name1 = "Bob"; Name2 = "Sally"; Name3 = "Jo"; Name4 = "Fred"; Name5 = "Alison"; var Name = new Array(4); Name[0] = "Bob"; Name[1] = "Sally"; Name[2] = "Jo"; Name[3] = "Fred"; Name[4] = "Alison";
Arrays: why? (use) Single line of code picks any element var Num; Num = parseInt(Math.random() * 5) if (Num == 0){ Res = Name1; }else if (Num == 1){ Res = Name2; }else if (Num == 2){ Res = Name3; }else if (Num == 3){ Res = Name4; }else{ Res = Name5; } var Num; Num = parseInt(Math.random() * 5); Res = Name[Num]; Single line of code picks any element
Example: German Numbers v1 var Nums = new Array(10); var n; function window_onLoad(){ Nums[1] = "eins"; Nums[2] = "zwei"; Nums[3] = "drei"; Nums[4] = "vier"; Nums[5] = "funf"; Nums[6] = "sechs"; Nums[7] = "sieben"; Nums[8] = "acht"; Nums[9] = "neun"; Nums[10] = "zehn"; } function btnStart_onClick(){ n = 1 + parseInt(Math.random() * 10); parQuest.innerText = "What is " + Nums[n] + "?"; function btnCheck_onClick(){ if (parseInt(txtAns.value) == n){ parRes.innerText = "Correct!"; }else{ parRes.innerText = "Sorry, please try again." + n; Array Declaration Array Assignment Array Use
Example: German Numbers v0 vs. v1 var n; function btnStart_onClick(){ n = 1 + parseInt(Math.random() * 10) if (n == 1){ parQuest.innerText = "What is eins?"; }else{ if (n == 2){ parQuest.innerText = "What is zwei?"; if (n == 3){ parQuest.innerText = "What is drei?"; if (n == 4){ parQuest.innerText = "What is vier?"; if (n == 5){ parQuest.innerText = "What is funf?"; if (n == 6){ parQuest.innerText = "What is sechs?"; if (n == 7){ parQuest.innerText = "What is sieben?"; if (n == 8){ parQuest.innerText = "What is acht?"; if (n == 9){ parQuest.innerText = "What is neun?"; if (n == 10){ parQuest.innerText = "What is zehn?"; } function btnCheck_onClick(){ if (parseInt(txtAns.value) == n){ parRes.innerText = "Correct!"; parRes.innerText = "Sorry, please try again." + n; var Nums = new Array(10); var n; function window_onLoad(){ Nums[1] = "eins"; Nums[2] = "zwei"; Nums[3] = "drei"; Nums[4] = "vier"; Nums[5] = "funf"; Nums[6] = "sechs"; Nums[7] = "sieben"; Nums[8] = "acht"; Nums[9] = "neun"; Nums[10] = "zehn"; } function btnStart_onClick(){ n = 1 + parseInt(Math.random() * 10); parQuest.innerText = "What is " + Nums[n] + "?"; function btnCheck_onClick(){ if (parseInt(txtAns.value) == n){ parRes.innerText = "Correct!"; }else{ parRes.innerText = "Sorry, please try again." + n; v0 v1 25 lines 50 lines
Error: Subscript Out of Range Index too big/small var x = new Array(3); x[0] = 9; x[1] = 5; x[2] = 21; x[3] = 23; x[4] = 12; x = 5;
Error: Type mismatch index missing var x = new Array(3); x[0] = 9;
Error: Type mismatch index given for non-array variable: b var x = new Array(3); var b; x[0] = 9; x[1] = 5; x[2] = 21; x[3] = 23; b[3] = 12;
Questions: Arrays Write a line of code that declares an array called Books with 56 elements Write a line of code that assigns the value 45 to the 18th element of the array. Write some code that makes the background red, but only when the 12th array element is larger than 6 var Books = new Array(55); Books[17] = 45; if (Books[11] >6){ document.bgColor = "red"; }
Example: Capital Cities SPECIFICATION User Requirements help people learn Capital Cities Software Requirements Functional: ask user for capital of random country user enter capital check if correct Non-functional should be easy to use
Example: Capital Cities Two arrays – stored in same order: Country City UK 1 France 2 Spain 3 Greece London 1 Paris 2 Madrid 3 Athens
Example: Capital Cities var Country = new Array(4); var City = new Array(4); var Num; function window_onLoad(){ Country[1] = "UK"; City[1] = "London"; Country[2] = "France"; City[2] = "Paris"; Country[3] = "Spain"; City[3] = "Madrid"; Country[4] = "Greece"; City[4] = "Athens"; } function btnStart_onClick(){ Num = 1 + parseInt(Math.random() * 3); parQuest.innerText = "What is the capital of " + Country[Num] + "?"; How many array: declarations? assignments?
Question: Arrays Write a statement that will decide whether the answer given by the user is correct: var Country = new Array(4); var City = new Array(4); var Num; function window_onLoad(){ Country[1] = "UK"; City[1] = "London"; Country[2] = "France"; City[2] = "Paris"; Country[3] = "Spain"; City[3] = "Madrid"; Country[4] = "Greece"; City[4] = "Athens"; } function btnStart_onClick(){ Num = 1 + parseInt(Math.random() * 3); parQuest.innerText = "What is the capital of " + Country[Num] + "?"; if (txtNum.value == City[Num]){
Tutorial Exercise: Hello LEARNING OBJECTIVE: use variables to make a for loop more flexible Task 1: Get the Hello Examples (0 to 2) working. Task 2: Modify your page so that it uses a variable to temporarily build to html. Task 3: Modify your page so that the user can control how many 'Hellos' appear.
Tutorial Exercise: Letter Count LEARNING OBJECTIVE: use a loop to search through a string (text) Task 1: Get the Letter Count Example (from the lecture) working. Task 2: Modify your Letter Count page, so that the user can control which letter is counted. Hint: You will need a text box for the user to type into. Task 3: Modify your code so that it responds immediately. Hint: Remove the button, and link your code to the KeyUp event of the text box. Task 3: Modify your Letter Count program, so that the user cannot type more than one letter in the letter text box. Hint: Use the length function.
Tutorial Exercise: Pendulum LEARNING OBJECTIVE: use a loop to shorten code responsible for visual display Task 1: Get the Pendulum examples (1 to 3) working. Task 2: Increase the number of dots for the arm. Task 3: Modify your code so that the arm and pendulum are centred correctly. hint: deduct half the width of the image.
Tutorial Exercise: German Numbers Task 1: Complete German Numbers Example from lecture. You will need to complete the code for checking the user's answer Task 2: Modify your page so that it disables and enables the buttons appropriately Task 3: Modify your page so that the text box gets the focus (cursor) after the start button is pressed Task 4: Modify your page to allow the user 3 attempts only. Task 5: Modify your page to prevent same random number appearing twice store used numbers use Do Until new value different from previous Task 6: Modify your page so that it plays appropriate sounds when the user gets the answer right/wrong
Tutorial Exercise: Capital Cities Task 1: Complete Capital Cities Example from the lecture, adding some more cities. You will need to complete the code for checking the user's answer Task 2: Modify your page so that it hides and shows the buttons appropriately Task 3: Modify your page to allow the user 3 attempts only. Task 4: Modify your page so that it is case in-sensitive (i.e. user can type upper or lower case) Task 5: Modify your page so that it displays an appropriate picture of the selected capital city. Hint: create another array for the file names. Task 6: Modify your page so that it plays appropriate sounds when the user gets the answer right/wrong