09 – Iterative Execution

09 – Iterative Execution

Questions: Dry Running • Dry run the following code: var a; var b; var c; a = 12; b = a + 5; c = b + 1.25; a b c - - - - - - - - - 12 - - 12 17 - 12 17 18.25

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 • Aims • 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 loops • create a For loop to repeat code a known number of times • identify and correct errors in while loops • 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? var q1; var q2; var u; var o; var g; q1 = "It is not enough to have a good mind."; q2 = "The main thing is to use it well."; u = q1.length; o = q2.length; 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>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; 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>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; parHello.innerHTML = parHello.innerHTML + "Hello<br>"; } function btnGo_onClick(){ var h for (h = 1; h<=10;h++){ parHello.innerHTML = parHello.innerHTML + "Hello<br>"; } } 10lines 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 <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 <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

Example: Shades <script language="javascript"> function btnShow_onClick(){ var stTag = "<span style='background: #"; var h, p, msg, red; msg = txtMsg.value; h = ""; red = 255; for (p = 0; p<=msg.length; p++){ h = h + stTag + red.toString(16) + "0000'>"; h = h + msg.charAt(p); h = h + "</span>"; red = red - 5; } divTones.innerHTML = h; } </script>

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> 

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 len function.

Tutorial Exercise: Vowel Count • LEARNING OBJECTIVE:build your own page from scratch, using a loop to search a string (piece of text) • Task 1: Create a new page that counts the number of vowels (a, e, i, o, u) in a piece of text.Hint: similar to the letter count example.

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: Shades • LEARNING OBJECTIVE:use functions and operators to change the behaviour of code that uses a loop • Task 1: Get the shades example from the lecture working. • Task 2: Modify the page so that it puts a space in between each letter. • Task 3: Change the program so that it uses shades of another colour instead. • Task 4: Create a new page that selects random shades of your selected colour. Hint: use the Rnd function.

09 – Iterative Execution