33
Mark Dixon Page 1 10 – Iterative Execution
| Date post: | 26-Dec-2015 |
| Category: |
Documents |
| Upload: | barbra-bryant |
| View: | 220 times |
| Download: | 0 times |
Mark Dixon Page 1
10 – Iterative Execution
Mark Dixon Page 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
Dim 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 and Do loops– create a For loop to repeat code
a known number of times– create a Do loop to repeat code
an unknown number of times
Mark Dixon Page 4
Example: Hello v0
<html> <head><title>Hello</title><meta http-equiv="x-ua-compatible" content="IE=10" /></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>
• 1 user click: 1 Hello (1 line of code)
Mark Dixon Page 5
Example: Hello v1
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
• 1 user click: 10 Hellos (10 lines of code)Lots of lines
imagine 300 Hellos
Mark Dixon Page 6
Example: Hello v2
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
• 1 user click: 10 Hellos (6 lines of code)
Mark Dixon Page 7
Hello v2: Do Loop• variable h – used as counter
Mark Dixon Page 8
Example: Hello v3
Option Explicit
Sub btnHello_OnClick() Dim h For h = 1 To 10 parHello.innerHTML = parHello.innerHTML & "Hello<br>" Next End Sub
• 1 user click: 10 Hellos (4 lines of code)
Mark Dixon Page 9
Hello v3: For Loop• variable h – set and incremented
automatically
Mark Dixon Page 10
Advantages• Less code:
• This makes program:– Easier to read– Easier to change (imagine 500 Hellos)
Option Explicit
Sub btnGo_OnClick()Dim h For h = 1 To 10 parHello.innerHTML = parHello.innerHTML & "Hello<br>" NextEnd Sub
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
Hello v1 Hello v3
4 lines
10lines
Mark Dixon Page 11
Do ... Loop statement
• repeat code unknown number of times– more flexible than For
– slower than For
• Syntax (Do While):Do While condition statementblockLoop
• Syntax (Do Until):Do Until condition statementblockLoop
Mark Dixon Page 12
For ... Next statement• repeat code known number of times
– reduces length of code
– easier to change
• Syntax:
For variable = start To end statementblock Next
Mark Dixon Page 13
Example: Do … Loop• Can do everything a For … Loop can:
Dim i Dim ii = 1Do While i <= 10 For i = 1 To 10 parN.innerText = i parN.innerText =
i i = i + 1Loop Next
• And more:Dim ii = 1Do While i < 10 parN.innerText = i If (i / 2) = Int(i / 2) then i = i + 1 Else i = i + 3 End If Loop
Mark Dixon Page 14
• Real Power of loops– using counter variable– do something slightly different each time
• Example: Option ExplicitDim numDim tottot = 0For num = 1 To 4 tot = tot + numNextparRes.innerText = tot
Example: Total
Mark Dixon Page 15
Example: Total
Mark Dixon Page 16
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>
Mark Dixon Page 17
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 Page 18
Question: For … Next• What does the following code display in
parNums:
Dim sDim counter s = "" For counter = 1 To 10 s = s & " " & counter Next parNums.innerText = s
1 2 3 4 5 6 7 8 9 10
Mark Dixon Page 19
Example: Pendulum v1<html> <head><title>Pendulum</title><meta http-equiv="x-ua-compatible" content="IE=10" /></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 ExplicitDim angDim 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>
Mark Dixon Page 20
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
Mark Dixon Page 21
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
Mark Dixon Page 22
Example: GraphOption 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
Mark Dixon Page 23
Question: Do … Loop
• What does the following display in parNums:
Dim sDim 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
Mark Dixon Page 24
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
Mark Dixon Page 25
Loops: Errors
<script language="vbscript">Option Explicit
Sub window_onLoad() For x = 1 To 10 Next End Sub</script>
Mark Dixon Page 26
Loops: Errors
<script language="vbscript">Option Explicit
Sub window_onLoad() Dim x For x = 1 To 10 End Sub</script> Statement Expected
(missing Next)
Mark Dixon Page 27
Loops: Errors
<script language="vbscript">Option Explicit
Sub window_onLoad() Dim x Next End Sub</script>
Mark Dixon Page 28
Loops: Errors
<script language="vbscript">Option Explicit
Sub window_onLoad() Dim x For x = 1 To 10 Next End Sub</script>
Mark Dixon Page 29
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 30
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 Page 31
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 32
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 33
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)
