1 / 38

10 – Iterative Execution

10 – Iterative Execution. Questions: Dry Running. Dry run the following code: Dim a Dim b Dim 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

menefer
Download Presentation

10 – Iterative Execution

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 10 – Iterative Execution

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

  3. 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 Dim h h = h + 1

  4. 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 and Do loops • create a For loop to repeat codea known number of times • create a Do loop to repeat codean unknown number of times

  5. Dependencies: Numeric Variables • consider the following code:1 Dim h2 Dim q3 h = 54 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

  6. Dependencies: Data Flow (Pipes) • think of connecting pipes(like plumbing in a house): Dim h Dim qh = 5q = h + 2

  7. Dependencies: String Variables • consider the following code:1 Dim surname2 Dim forename3 Dim initials4 surname = "Jones"5 forename = "Alice"6 initials = Left(surname, 1) & Left(forename, 1) • 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

  8. Question: Variable Dependencies • What dependencies exist in the following code? Dim q1 Dim q2 Dim u Dim o Dim g q1 = "It is not enough to have a good mind." q2 = "The main thing is to use it well." u = Len(q1) o = Len(q2) g = o + u

  9. 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" /> <p id="parHello"></p> </body> </html> <script language="vbscript"> Option Explicit Sub btnHello_OnClick() parHello.innerHTML = parHello.innerHTML & "Hello<br>" End Sub </script>

  10. Example: Hello v1 • 1 user click: 10 Hellos (10 lines of code) Lots of lines imagine 300 Hellos Option Explicit Sub 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>" End Sub

  11. Example: Hello v2 • 1 user click: 10 Hellos (6 lines of code) Option Explicit Sub btnHello_OnClick() Dim h h = 1 Do While h <= 10 parHello.innerHTML = parHello.innerHTML & "Hello<br>" h = h + 1 Loop End Sub

  12. Hello v2: Do Loop • variable h – used as counter

  13. Example: Hello v3 • 1 user click: 10 Hellos (4 lines of code) Option Explicit Sub btnHello_OnClick() Dim h For h = 1 To 10 parHello.innerHTML = parHello.innerHTML & "Hello<br>" Next End Sub

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

  15. Advantages • Less code: • This makes program: • Easier to read • Easier to change (imagine 500 Hellos) Hello v1 Hello v3 Option Explicit Sub 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>" End Sub Option Explicit Sub btnGo_OnClick() Dim h For h = 1 To 10 parHello.innerHTML = parHello.innerHTML & "Hello<br>" Next End Sub 10lines 4 lines

  16. Do ... Loop statement • repeat code unknown number of times • more flexible than For • slower than For • Syntax (Do While):DoWhilecondition statementblock Loop • Syntax (Do Until):DoUntilcondition statementblock Loop

  17. For ... Next statement • repeat code known number of times • reduces length of code • easier to change • Syntax:Forvariable=startToendstatementblockNext

  18. Example: Do … Loop • Can do everything a For … Loop can:Dim iDim i i = 1 Do While i <= 10 For i = 1 To 10parN.innerText = iparN.innerText = i i = i + 1 Loop Next • And more:Dim i i = 1 Do While i < 10 parN.innerText = i If (i / 2) = Int(i / 2) then i = i + 1 Else i = i + 3 End If Loop

  19. Example: Total • Real Power of loops • using counter variable • do something slightly different each time • Example: Option Explicit Dim num Dim tot tot = 0 For num = 1 To 4 tot = tot + num Next parRes.innerText = tot

  20. Example: Total

  21. Example: Letter Count <script language="vbscript"> Option Explicit Sub btnCount_OnClick() Dim pos Dim last Dim char Dim count last = Len(txtWords.value) count = 0 For pos = 1 To last char = Mid(txtWords.value, pos, 1) If char = "e" Then count = count + 1 End If Next parCount.innerText = count End Sub </script>

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

  23. Question: For … Next • What does the following code display in parNums: Dim s Dim counter s = "" For counter = 1 To 10 s = s & " " & counter Next parNums.innerText = s • 1 2 3 4 5 6 7 8 9 10

  24. Example: Pendulum v1 <html> <head><title>Pendulum</title></head> <body style="margin: 0;"> <img id="imgMid" src="Dot.gif" style="position: absolute;" /> <img id="imgPend" src="Pend.gif" style="position: absolute;" /> </body> </html> <script language="vbscript"> Option Explicit Dim ang Dim speed Sub window_onload() imgMid.style.pixelLeft = document.body.clientWidth / 2 imgMid.style.pixelTop = document.body.clientHeight / 3 window.setInterval "Swing()", 25 ang = 0 speed = 0.04 End Sub Sub Swing() ang = ang + speed If ang > 0.5 Or ang < -0.5 Then speed = -speed End If imgPend.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 150 imgPend.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 150 End Sub </script>

  25. Example: Pendulum v2 <body style="margin: 0;"> <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> … Sub Swing() ang = ang + speed If ang > 0.5 Or ang < -0.5 Then speed = -speed End If imgPend.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 150 imgPend.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 150 imgArm1.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 15 imgArm1.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 15 imgArm2.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 30 imgArm2.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 30 imgArm3.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 45 imgArm3.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 45 imgArm4.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 60 imgArm4.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 60 imgArm5.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 75 imgArm5.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 75 imgArm6.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 90 imgArm6.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 90 imgArm7.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 105 imgArm7.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 105 imgArm8.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 120 imgArm8.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 120 imgArm9.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 135 imgArm9.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 135 End Sub </script> 56 lines of code

  26. Example: Pendulum v3 <body style="margin: 0;"> <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> … Sub Swing() Dim a Dim arm ang = ang + speed If ang > 0.5 Or ang < -0.5 Then speed = -speed End If imgPend.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * 150 imgPend.style.pixelTop = imgMid.style.pixelTop + cos(ang) * 150 For a = 1 To 9 Set arm = document.getElementById("imgArm" & a) arm.style.pixelLeft = imgMid.style.pixelLeft + sin(ang) * (a * 15) arm.style.pixelTop = imgMid.style.pixelTop + cos(ang) * (a * 15) Next End Sub </script> 45 lines of code

  27. Example: Graph Option Explicit Sub window_onload() Const xS = 10 ' Horizontal scaling factor. Const yS = 10 ' Vertical scaling factor. Dim xO ' Horizontal offset. Dim yO ' Vertical offset. Dim x ' Horizontal position. Dim y ' Vertical position. Dim h ' html data for plotted points. xO = 50 yO = document.body.clientHeight - 50 h = "" For x = 0 To 30 y = x h = h & "<img src='dot.gif' style='position: absolute;" h = h & "left: " & (xO + (x * xS)) & ";" h = h & "top: " & (yO - (y * yS)) & ";" h = h & "' />" Next document.body.innerHTML = h End Sub

  28. Question: Do … Loop • What does the following display in parNums: Dim s Dim num s = "" num = 10 Do While num > -6 s = s & " " & num num = num - 1.5 Loop parNums.innerText = s • 10 8.5 7 5.5 4 2.5 1 -0.5 -2 -3.5 -5

  29. Question: Do … Loop • What does the following display in parNums: Dim num num = 6 Do Until num > 4 num = num + 5 parNums.innerText = parNums.innerText & num Loop • nothing, 6 is already greater than 4

  30. Loops: Errors <script language="vbscript">Option Explicit Sub window_onLoad() For x = 1 To 10 Next End Sub</script>

  31. Loops: Errors <script language="vbscript">Option Explicit Sub window_onLoad() Dim x For x = 1 To 10 End Sub</script> Statement Expected(missing Next)

  32. Loops: Errors <script language="vbscript">Option Explicit Sub window_onLoad() Dim x Next End Sub</script>

  33. Loops: Errors <script language="vbscript">Option Explicit Sub window_onLoad() Dim x For x = 1 To 10 Next End Sub</script> 

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

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

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

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

  38. Tutorial Exercise: Graphs • LEARNING OBJECTIVE:use functions and operators to change the behaviour of code that uses a loop • Task 1: Get the Graph example from the lecture working. • Task 2: Modify the page so that it plots the graph: y = x / 2 • Task 3: Create a new page that plots the graph:y = Sin(x)Hint: change the loop to use values of x from 0 to 6.2 in steps of 0.1 (VBScript pocket reference p. 85)

More Related