Presentation is loading. Please wait.

Presentation is loading. Please wait.

6 – Iterative Execution.

Similar presentations


Presentation on theme: "6 – Iterative Execution."— Presentation transcript:

1 6 – Iterative Execution

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

3 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

4 Dependencies: Numeric Variables
consider the following code: 1 var h; 2 var q; h = 5; 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

5 Dependencies: Data Flow (Pipes)
think of connecting pipes (like plumbing in a house): var h; var q; h = 5; q = h + 2;

6 Dependencies: String Variables
consider the following code: 1 var surname; 2 var forename; 3 var initials; surname = "Jones"; forename = "Alice"; 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

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

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

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

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

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

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

13 Hello v3: For Loop variable h – set and incremented automatically

14 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

15 while ... Loop statement repeat code unknown number of times
more flexible than For slower than For Syntax: while (condition){ statementblock }

16 For Statement repeat code known number of times
reduces length of code easier to change Syntax: for (initialise; test; update){ statementblock }

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

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

19 Example: Total

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

21 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

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

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

24 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

25 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

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

27 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

28 Loops: Errors <script language="javascript"> function window_onLoad(){ for (x = 1; x<=10;x++) } } </script> variable not defined

29 Loops: Errors <script language="javascript"> function window_onLoad(){ var x; for (x=1; x<=10; x++){ } </script> Statement Expected (missing })

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

31 break?

32 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

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

34 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

35 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

36 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

37 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

38 Arrays Variables

39 Array Variables (Declaration)
General syntax: var varname = new Array(lastElement); Specific examples: var HR = new Array(16); var x = new Array(8);

40 Array Variables (Assignment)
General syntax: arrayname[index] = expression Specific examples: HR[0] = 134; HR[5] = b; x[5] = 23.87; x[7] = (y ) / 2;

41 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

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

43 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

44 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

45 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

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

47 Error: Type mismatch index missing var x = new Array(3); x[0] = 9;

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

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

50 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

51 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

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

53 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]){

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

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

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

57 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

58 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


Download ppt "6 – Iterative Execution."

Similar presentations


Ads by Google