1. Mark Dixon Page 1 10 – Iterative Execution

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

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

4. Mark Dixon Page 4 Example: Hello v0 Hello Option Explicit Sub btnHello_OnClick() parHello.innerHTML = parHello.innerHTML & "Hello " End Sub 1 user click: 1 Hello (1 line of code)

5. Mark Dixon Page 5 Example: Hello v1 Option Explicit Sub btnHello_OnClick() parHello.innerHTML = parHello.innerHTML & "Hello " End Sub 1 user click: 10 Hellos (10 lines of code) Lots of lines imagine 300 Hellos

6. 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 " h = h + 1 Loop End Sub 1 user click: 10 Hellos (6 lines of code)

7. Mark Dixon Page 7 Hello v2: Do Loop variable h – used as counter

8. Mark Dixon Page 8 Example: Hello v3 Option Explicit Sub btnHello_OnClick() Dim h For h = 1 To 10 parHello.innerHTML = parHello.innerHTML & "Hello " Next End Sub 1 user click: 10 Hellos (4 lines of code)

9. Mark Dixon Page 9 Hello v3: For Loop variable h – set and incremented automatically

10. 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 " Next End Sub Option Explicit Sub btnGo_OnClick() parHello.innerHTML = parHello.innerHTML & "Hello " End Sub Hello v1Hello v3 4 lines 10 lines

11. 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 statementblock Loop Syntax (Do Until): Do Until condition statementblock Loop

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

13. Mark Dixon Page 13 Example: Do … Loop Can do everything a For … Loop can: Dim iDim i i = 1 Do While i <= 10For i = 1 To 10 parN.innerText = i parN.innerText = i i = i + 1 LoopNext 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

14. Mark Dixon Page 14 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 Example: Total

15. Mark Dixon Page 15 Example: Total

16. Mark Dixon Page 16 Example: Letter Count 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

17. Mark Dixon Page 17 Letter Count 1)Start at first letter 2)If no more letters then go to 5 3)If letter is an e then add 1 to count 4)Go to 2 5)Display count

18. Mark Dixon Page 18 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

19. Mark Dixon Page 19 Example: Pendulum v1 Pendulum 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

20. Mark Dixon Page 20 Example: Pendulum v2 … 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 56 lines of code

21. Mark Dixon Page 21 Example: Pendulum v3 … 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 45 lines of code

22. Mark Dixon Page 22 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

23. Mark Dixon Page 23 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

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

25. Mark Dixon Page 25 Loops: Errors Option Explicit Sub window_onLoad() For x = 1 To 10 Next End Sub

26. Mark Dixon Page 26 Loops: Errors Option Explicit Sub window_onLoad() Dim x For x = 1 To 10 End Sub Statement Expected (missing Next)

27. Mark Dixon Page 27 Loops: Errors Option Explicit Sub window_onLoad() Dim x Next End Sub

28. Mark Dixon Page 28 Loops: Errors Option Explicit Sub window_onLoad() Dim x For x = 1 To 10 Next End Sub

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

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

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

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

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