09 – iterative execution

Mark Dixon

09 – Iterative Execution

Mark Dixon

• Dry run the following code:

var a;

var b;

var c;

a = 12;

b = a + 5;

c = b + 1.25;

Questions: Dry Running

a b c

- - -

- - -

- - -

12 - -

12 17 -

12 17 18.25

Mark Dixon

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;

Mark Dixon

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

Mark Dixon

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

Mark Dixon

Dependencies: Data Flow (Pipes)

• think of connecting pipes(like plumbing in a house):

var h; var q; h = 5; q = h + 2;

Mark Dixon

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

Mark Dixon

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;

Mark Dixon

Example: Hello v0

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

• 1 user click: 1 Hello (1 line of code)

Mark Dixon

Example: Hello v1

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>"; }

• 1 user click: 10 Hellos (10 lines of code)Lots of lines

imagine 300 Hellos

Mark Dixon

Example: Hello v2

function btnHello_onClick(){ var h; h = 1; while (h <= 10){ parHello.innerHTML = parHello.innerHTML + "Hello<br>"; h = h + 1; } }

• 1 user click: 10 Hellos (6 lines of code)

Mark Dixon

Hello v2: while loop• variable h – used as counter

Mark Dixon

Example: Hello v3

function btnHello_onClick(){ var h; for (h = 1; h <= 10; h++){ parHello.innerHTML = parHello.innerHTML + "Hello<br>"; } }

• 1 user click: 10 Hellos (4 lines of code)

Mark Dixon

Hello v3: For Loop• variable h – set and incremented

automatically

Mark Dixon

Advantages• Less code:

• This makes program:– Easier to read– Easier to change (imagine 500 Hellos)

function btnGo_onClick(){var h for (h = 1; h<=10;h++){ parHello.innerHTML = parHello.innerHTML + "Hello<br>"; }}

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>";}

Hello v1 Hello v3

4 lines

10lines

Mark Dixon

while ... Loop statement

• repeat code unknown number of times– more flexible than For

– slower than For

• Syntax:

while (condition){ statementblock}

Mark Dixon

For Statement• repeat code known number of times

– reduces length of code

– easier to change

• Syntax:

for (initialise; test; update){ statementblock }

Mark Dixon

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; } }

Mark Dixon

• 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

Mark Dixon

Example: Total

Mark Dixon

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>

Mark Dixon

Letter Count1) Start at first letter2) If no more letters then go to 53) If letter is an e then add 1 to count4) Go to 25) Display count

Mark Dixon

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

Mark Dixon

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>

Mark Dixon

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

Mark Dixon

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

Mark Dixon

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>

Mark Dixon

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

Mark Dixon

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

Mark Dixon

Loops: Errors

<script language="javascript"> function window_onLoad(){ for (x = 1; x<=10;x++) } }</script>

variable not defined

Mark Dixon

Loops: Errors

<script language="javascript"> function window_onLoad(){ var x; for (x=1; x<=10; x++){ }</script>

Statement Expected(missing })

Mark Dixon

Loops: Errors

<script language="javascript"> function window_onLoad(){ var x; for (x = 1; x<=10; x++){ } }</script>

Mark Dixon

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.

Mark Dixon

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.

Mark Dixon

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.

Mark Dixon

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.

Mark Dixon

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

Documents