09 Iterative Execution Mark Dixon Page 1 Questions
- Slides: 37
09 – Iterative Execution Mark Dixon Page 1
Questions: Dry Running • Dry run the following code: var a; var b; var c; a = 12; b = a + 5; c = b + 1. 25; Mark Dixon a - b - c - - - - 12 17 18. 25 Page 2
Questions: Variables • Write a line of code to declare a variable called h var 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 h = h + 1; Mark Dixon Page 3
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 Page 4
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 Page 5
Dependencies: Data Flow (Pipes) • think of connecting pipes (like plumbing in a house): var h; var q; h = 5; q = h + 2; Mark Dixon Page 6
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. char. At(0) + forename. char. At(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 Page 7
Question: Variable Dependencies • What dependencies exist in the following code? var q 1; var q 2; var u; var o; var g; q 1 = "It is not enough to have a good mind. "; q 2 = "The main thing is to use it well. "; u = q 1. length; o = q 2. length; g = o + u; Mark Dixon Page 8
Example: Hello v 0 • 1 user click: 1 Hello (1 line of code) <html> <head><title>Hello</title></head> <body> <input id="btn. Hello" type="button" value="Hello" onclick="btn. Hello_on. Click( <p id="par. Hello"></p> </body> </html> <script language="javascript"> function btn. Hello_on. Click(){ par. Hello. inner. HTML = par. Hello. inner. HTML + "Hello "; } </script> Mark Dixon Page 9
Example: Hello v 1 • 1 user click: 10 Hellos (10 lines of code) Lots of lines imagine 300 Hellos function btn. Hello_on. Click(){ par. Hello. inner. HTML = par. Hello. inner. HTML + "Hello "; par. Hello. inner. HTML = par. Hello. inner. HTML + "Hello "; } Mark Dixon Page 10
Example: Hello v 2 • 1 user click: 10 Hellos (6 lines of code) function btn. Hello_on. Click(){ var h; h = 1; while (h <= 10){ par. Hello. inner. HTML = par. Hello. inner. HTML + "Hello "; h = h + 1; } } Mark Dixon Page 11
Hello v 2: while loop • variable h – used as counter Mark Dixon Page 12
Example: Hello v 3 • 1 user click: 10 Hellos (4 lines of code) function btn. Hello_on. Click(){ var h; for (h = 1; h <= 10; h++){ par. Hello. inner. HTML = par. Hello. inner. HTML + "Hello "; } } Mark Dixon Page 13
Hello v 3: For Loop • variable h – set and incremented automatically Mark Dixon Page 14
Advantages • Less code: Hello v 1 10 lines Hello v 3 function btn. Go_on. Click(){ par. Hello. inner. HTML = par. Hello. inner. HTML + "Hello "; var h par. Hello. inner. HTML = par. Hello. inner. HTML + "Hello "; for (h = 1; h<=10; h++){ par. Hello. inner. HTML = par. Hello. inner. HTML + "Hello "; par. Hello. inner. HTML = par. Hello. inner. HTML + "Hello "; } 4 lines • This makes program: – Easier to read – Easier to change (imagine 500 Hellos) Mark Dixon Page 15
while. . . Loop statement • repeat code unknown number of times – more flexible than For – slower than For • Syntax: while (condition){ statementblock } Mark Dixon Page 16
For Statement • repeat code known number of times – reduces length of code – easier to change • Syntax: for (initialise; test; update){ statementblock } Mark Dixon Page 17
Example: while … Loop • Can do everything a For … Loop can: var i; i = 1; while (i <= 10){ lbl. N. inner. Text = i; i = i + 1; } var i; for (i = 1; i<=10; i++){ lbl. N. inner. Text = i; } • And more: var i; i = 1; while (i < 10){ lbl. N. inner. Text = i; if ((i / 2) == parse. Int(i / 2)){ i = i + 1; }else{ i = i + 3; } } Mark Dixon Page 18
Example: Total • Real Power of loops – using counter variable – do something slightly different each time • Example: Mark Dixon var num; var tot; tot = 0; for (num=1; num<=4; num++){ tot = tot + num; } lbl. Res. inner. Text = tot; Page 19
Example: Total Mark Dixon Page 20
Example: Letter Count <script language="javascript"> function btn. Count_on. Click(){ var count; var pos; var char; count = 0; for (pos=0; pos<=String(txt. Words. value). length-1; pos++){ char = String(txt. Words. value). char. At(pos); if (char == "e"){ count = count + 1; } } lbl. Count. inner. Text = count; } </script> Mark Dixon Page 21
1) 2) 3) 4) 5) Mark Dixon 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 Page 22
Question: For Statement • What does the following code display in par. Nums: var s; var counter; s = ""; for (counter=1; counter<=10; counter++){ s = s + " " + counter; } par. Nums. inner. Text = s; 1 2 3 4 5 6 7 8 9 10 Mark Dixon Page 23
Example: Pendulum v 1 <html> <head><title>Pendulum</title></head> <body style="margin: 0; " onload="window_on. Load()"> <img id="img. Mid" src="Dot. gif" style="position: absolute; " /> <img id="img. Pend" src="Pend. gif" style="position: absolute; " /> </body> </html> <script language="javascript"> var ang; var speed; function window_on. Load(){ img. Mid. style. pos. Left = document. body. client. Width / 2; img. Mid. style. pos. Top = document. body. client. Height / 3; window. set. Interval("Swing()", 25); ang = 0; speed = 0. 04; } function Swing(){ ang = ang + speed; if (ang > 0. 5 || ang < -0. 5){ speed = -speed; } img. Pend. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 150 ; img. Pend. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 150 ; } </script> Mark Dixon Page 24
Example: Pendulum v 2 <body style="margin: 0; " onload="window_on. Load()"> <img id="img. Mid" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 1" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 2" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 3" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 4" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 5" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 6" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 7" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 8" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 9" src="Dot. gif" style="position: absolute; " /> <img id="img. Pend" src="Pend. gif" style="position: absolute; " /> </body> 56 lines of code … Mark Dixon function Swing(){ ang = ang + speed; if (ang > 0. 5 || ang < -0. 5){ speed = -speed; } img. Pend. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 150; img. Pend. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 150; img. Arm 1. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 15; img. Arm 1. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 15; img. Arm 2. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 30; img. Arm 2. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 30; img. Arm 3. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 45; img. Arm 3. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 45; img. Arm 4. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 60; img. Arm 4. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 60; img. Arm 5. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 75; img. Arm 5. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 75; img. Arm 6. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 90; img. Arm 6. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 90; img. Arm 7. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 105; img. Arm 7. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 105; img. Arm 8. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 120; img. Arm 8. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 120; img. Arm 9. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 135; img. Arm 9. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 135; } </script> Page 25
Example: Pendulum v 3 <body style="margin: 0; " onload="window_on. Load()"> <img id="img. Mid" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 1" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 2" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 3" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 4" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 5" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 6" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 7" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 8" src="Dot. gif" style="position: absolute; " /> <img id="img. Arm 9" src="Dot. gif" style="position: absolute; " /> <img id="img. Pend" src="Pend. gif" style="position: absolute; " /> </body> 45 lines of code … function Swing(){ var a; var arm; ang = ang + speed; if (ang > 0. 5 || ang < -0. 5){ speed = -speed; } img. Pend. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * 150; img. Pend. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * 150; for (a=1; a<=9; a++){ arm = document. get. Element. By. Id("img. Arm" + a); arm. style. pos. Left = img. Mid. style. pos. Left + Math. sin(ang) * (a * 15); arm. style. pos. Top = img. Mid. style. pos. Top + Math. cos(ang) * (a * 15); } } </script> Mark Dixon Page 26
Example: Shades <script language="javascript"> function btn. Show_on. Click(){ var st. Tag = "<span style='background: #"; var h, p, msg, red; msg = txt. Msg. value; h = ""; red = 255; for (p = 0; p<=msg. length; p++){ h = h + st. Tag + red. to. String(16) + "0000'>"; h = h + msg. char. At(p); h = h + "</span>"; red = red - 5; } div. Tones. inner. HTML = h; } </script> Mark Dixon Page 27
Question: While Loop • What does the following display in par. Nums: var s; var num; s = ""; num = 10; while (num > -6){ s = s + " " + num; num = num - 1. 5; } par. Nums. inner. Text = s; 10 8. 5 7 5. 5 4 2. 5 1 -0. 5 -2 -3. 5 -5 Mark Dixon Page 28
Question: While Loop • What does the following display in par. Nums: var num; num = 6; while (num <= 4){ num = num + 5; par. Nums. inner. Text = par. Nums. inner. Text + num; } nothing, 6 is already greater than 4 Mark Dixon Page 29
Loops: Errors <script language="javascript"> function window_on. Load(){ for (x = 1; x<=10; x++) } } variable not defined </script> Mark Dixon Page 30
Loops: Errors <script language="javascript"> function window_on. Load(){ var x; for (x=1; x<=10; x++){ } Statement Expected </script> (missing }) Mark Dixon Page 31
Loops: Errors <script language="javascript"> function window_on. Load(){ var x; for (x = 1; x<=10; x++){ } } </script> Mark Dixon Page 32
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 Page 33
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 Key. Up 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 Page 34
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 Page 35
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 Page 36
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. Mark Dixon Page 37
- Mark dixon artist
- Mark dixon
- Apa cover page.
- Spreidingsbreedte
- George washington dixon
- George dixon academy
- Dixon montessori charter school
- David dixon ubc
- A mason-dixon memory summary
- Paul dixon smu
- Karen k dixon
- Sistema circulatorio vegetal
- Dixon case study
- Thomas dixon the clansman
- Mg ins
- The boy does nothing
- Dixon campus jefferson
- Worldview and nursing process personal statement
- Dixon swivel joints
- Iterative vs recursive
- Iterative deepening a* search
- Iterative project management
- Iterative project management
- What is iterative process planning
- Iterative patterns
- Iterative inorder
- Search by image
- Iterations
- Progressive deepening search
- Cpsc 322
- Name
- Recursive and iterative query
- Iterative server
- Sequential conditional and iterative
- Recursive and iterative query
- Iterative techniques in matrix algebra
- Iterative techniques in matrix algebra
- Iterative deepening a* search