1. Mark Dixon 1 13 – Parameters

2. Mark Dixon 2 Question: Arrays How many array variables are in the following code: Dim x Dim y Dim f(4) x = 12 y = 6 f(2) = 21 1

3. Mark Dixon 3 Question: Arrays How many errors are in the following code: Dim x Dim y Dim f(4) f = 3 y(3) = 6 f(1) = 19 f(5) = 21

4. Mark Dixon 4 Session Aims & Objectives Aims –To introduce passing parameters/arguments to procedures to make them more general purpose Objectives, after this week’s sessions, you should be able to: –use parameters in your programs to make procedures more flexible –distinguish between formal and actual parameters –pass parameters by reference and by value –identify and correct parameter errors

5. Mark Dixon 5 Example: Clock (analysis) SPECIFICATION User Requirements –to know what the time is Software Requirements –Functional: –display current time in analogue (traditional clock face) format –Non-functional should be easy to read

6. Mark Dixon 6 Example: Clock (user interface) 14 objects: –12 numbers –mid point –second point (moving)

7. Mark Dixon 7 Example: Clock v0 (HTML) 1 2 3 4 5 6 7 8 9 10 11 12

8. Mark Dixon 8 Example: Clock v1 (HTML) Remove 'hard coded' tags

9. Mark Dixon 9 Example: Clock v1 (code) Option Explicit Sub window_OnLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & " " & i & " " Next document.body.innerHTML = s & document.body.innerHTML imgMid.style.posLeft = document.body.clientwidth / 2 imgMid.style.posTop = document.body.clientheight / 2 ang = 6.2 / 12 div1.style.posLeft = imgMid.style.posLeft + Sin(ang) * 200 div1.style.posTop = imgMid.style.posTop - Cos(ang) * 200 div2.style.posLeft = imgMid.style.posLeft + Sin(ang * 2) * 200 div2.style.posTop = imgMid.style.posTop - Cos(ang * 2) * 200 div3.style.posLeft = imgMid.style.posLeft + Sin(ang * 3) * 200 div3.style.posTop = imgMid.style.posTop - Cos(ang * 3) * 200 div4.style.posLeft = imgMid.style.posLeft + Sin(ang * 4) * 200 div4.style.posTop = imgMid.style.posTop - Cos(ang * 4) * 200 div5.style.posLeft = imgMid.style.posLeft + Sin(ang * 5) * 200 div5.style.posTop = imgMid.style.posTop - Cos(ang * 5) * 200 div6.style.posLeft = imgMid.style.posLeft + Sin(ang * 6) * 200 div6.style.posTop = imgMid.style.posTop - Cos(ang * 6) * 200 div7.style.posLeft = imgMid.style.posLeft + Sin(ang * 7) * 200 div7.style.posTop = imgMid.style.posTop - Cos(ang * 7) * 200 div8.style.posLeft = imgMid.style.posLeft + Sin(ang * 8) * 200 div8.style.posTop = imgMid.style.posTop - Cos(ang * 8) * 200 div9.style.posLeft = imgMid.style.posLeft + Sin(ang * 9) * 200 div9.style.posTop = imgMid.style.posTop - Cos(ang * 9) * 200 div10.style.posLeft = imgMid.style.posLeft + Sin(ang * 10) * 200 div10.style.posTop = imgMid.style.posTop - Cos(ang * 10) * 200 div11.style.posLeft = imgMid.style.posLeft + Sin(ang * 11) * 200 div11.style.posTop = imgMid.style.posTop - Cos(ang * 11) * 200 div12.style.posLeft = imgMid.style.posLeft + Sin(ang * 12) * 200 div12.style.posTop = imgMid.style.posTop - Cos(ang * 12) * 200 window.setinterval "ShowHands()", 500 End Sub Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second(Now()) imgSec.style.posLeft = imgMid.style.posLeft + Sin(ang * s) * 200 imgSec.style.posTop = imgMid.style.posTop - Cos(ang * s) * 200 End Sub Sub window_OnLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & " " & i & " " Next document.body.innerHTML = s & document.body.innerHTML imgMid.style.posLeft = document.body.clientwidth / 2 imgMid.style.posTop = document.body.clientheight / 2 ang = 6.2 / 12 div1.style.posLeft = imgMid.style.posLeft + Sin(ang) * 200 div1.style.posTop = imgMid.style.posTop - Cos(ang) * 200 … … … div12.style.posLeft = imgMid.style.posLeft + Sin(ang * 12) * 200 div12.style.posTop = imgMid.style.posTop - Cos(ang * 12) * 200 window.setInterval "ShowHands()", 500 End Sub use loop to put in tags

10. Mark Dixon 10 Example: Clock v1 (code) Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second( Now ()) imgSec.style.posLeft = imgMid.style.posLeft + Sin(ang * s) * 200 imgSec.style.posTop = imgMid.style.posTop - Cos(ang * s) * 200 End Sub current time and date Option Explicit Sub window_OnLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & " " & i & " " Next document.body.innerHTML = s & document.body.innerHTML imgMid.style.posLeft = document.body.clientwidth / 2 imgMid.style.posTop = document.body.clientheight / 2 ang = 6.2 / 12 div1.style.posLeft = imgMid.style.posLeft + Sin(ang) * 200 div1.style.posTop = imgMid.style.posTop - Cos(ang) * 200 div2.style.posLeft = imgMid.style.posLeft + Sin(ang * 2) * 200 div2.style.posTop = imgMid.style.posTop - Cos(ang * 2) * 200 div3.style.posLeft = imgMid.style.posLeft + Sin(ang * 3) * 200 div3.style.posTop = imgMid.style.posTop - Cos(ang * 3) * 200 div4.style.posLeft = imgMid.style.posLeft + Sin(ang * 4) * 200 div4.style.posTop = imgMid.style.posTop - Cos(ang * 4) * 200 div5.style.posLeft = imgMid.style.posLeft + Sin(ang * 5) * 200 div5.style.posTop = imgMid.style.posTop - Cos(ang * 5) * 200 div6.style.posLeft = imgMid.style.posLeft + Sin(ang * 6) * 200 div6.style.posTop = imgMid.style.posTop - Cos(ang * 6) * 200 div7.style.posLeft = imgMid.style.posLeft + Sin(ang * 7) * 200 div7.style.posTop = imgMid.style.posTop - Cos(ang * 7) * 200 div8.style.posLeft = imgMid.style.posLeft + Sin(ang * 8) * 200 div8.style.posTop = imgMid.style.posTop - Cos(ang * 8) * 200 div9.style.posLeft = imgMid.style.posLeft + Sin(ang * 9) * 200 div9.style.posTop = imgMid.style.posTop - Cos(ang * 9) * 200 div10.style.posLeft = imgMid.style.posLeft + Sin(ang * 10) * 200 div10.style.posTop = imgMid.style.posTop - Cos(ang * 10) * 200 div11.style.posLeft = imgMid.style.posLeft + Sin(ang * 11) * 200 div11.style.posTop = imgMid.style.posTop - Cos(ang * 11) * 200 div12.style.posLeft = imgMid.style.posLeft + Sin(ang * 12) * 200 div12.style.posTop = imgMid.style.posTop - Cos(ang * 12) * 200 window.setinterval "ShowHands()", 500 End Sub Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second(Now()) imgSec.style.posLeft = imgMid.style.posLeft + Sin(ang * s) * 200 imgSec.style.posTop = imgMid.style.posTop - Cos(ang * s) * 200 End Sub

11. Mark Dixon 11 Example: Clock v1 (code) Option Explicit Sub window_OnLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & " " & i & " " Next document.body.innerHTML = s & document.body.innerHTML imgMid.style.posLeft = document.body.clientwidth / 2 imgMid.style.posTop = document.body.clientheight / 2 ang = 6.2 / 12 div1.style.posLeft = imgMid.style.posLeft + Sin(ang) * 200 div1.style.posTop = imgMid.style.posTop - Cos(ang) * 200 div2.style.posLeft = imgMid.style.posLeft + Sin(ang * 2) * 200 div2.style.posTop = imgMid.style.posTop - Cos(ang * 2) * 200 div3.style.posLeft = imgMid.style.posLeft + Sin(ang * 3) * 200 div3.style.posTop = imgMid.style.posTop - Cos(ang * 3) * 200 div4.style.posLeft = imgMid.style.posLeft + Sin(ang * 4) * 200 div4.style.posTop = imgMid.style.posTop - Cos(ang * 4) * 200 div5.style.posLeft = imgMid.style.posLeft + Sin(ang * 5) * 200 div5.style.posTop = imgMid.style.posTop - Cos(ang * 5) * 200 div6.style.posLeft = imgMid.style.posLeft + Sin(ang * 6) * 200 div6.style.posTop = imgMid.style.posTop - Cos(ang * 6) * 200 div7.style.posLeft = imgMid.style.posLeft + Sin(ang * 7) * 200 div7.style.posTop = imgMid.style.posTop - Cos(ang * 7) * 200 div8.style.posLeft = imgMid.style.posLeft + Sin(ang * 8) * 200 div8.style.posTop = imgMid.style.posTop - Cos(ang * 8) * 200 div9.style.posLeft = imgMid.style.posLeft + Sin(ang * 9) * 200 div9.style.posTop = imgMid.style.posTop - Cos(ang * 9) * 200 div10.style.posLeft = imgMid.style.posLeft + Sin(ang * 10) * 200 div10.style.posTop = imgMid.style.posTop - Cos(ang * 10) * 200 div11.style.posLeft = imgMid.style.posLeft + Sin(ang * 11) * 200 div11.style.posTop = imgMid.style.posTop - Cos(ang * 11) * 200 div12.style.posLeft = imgMid.style.posLeft + Sin(ang * 12) * 200 div12.style.posTop = imgMid.style.posTop - Cos(ang * 12) * 200 window.setinterval "ShowHands()", 500 End Sub Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second(Now()) imgSec.style.posLeft = imgMid.style.posLeft + Sin(ang * s) * 200 imgSec.style.posTop = imgMid.style.posTop - Cos(ang * s) * 200 End Sub Sub window_OnLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & " " & i & " " Next document.body.innerHTML = s & document.body.innerHTML imgMid.style.posLeft = document.body.clientwidth / 2 imgMid.style.posTop = document.body.clientheight / 2 ang = 6.2 / 12 div1.style.posLeft = imgMid.style.posLeft + Sin(ang) * 200 div1.style.posTop = imgMid.style.posTop - Cos(ang) * 200 div2.style.posLeft = imgMid.style.posLeft + Sin(ang * 2) * 200 div2.style.posTop = imgMid.style.posTop - Cos(ang * 2) * 200 … … … div10.style.posLeft = imgMid.style.posLeft + Sin(ang * 10) * 200 div10.style.posTop = imgMid.style.posTop - Cos(ang * 10) * 200 div11.style.posLeft = imgMid.style.posLeft + Sin(ang * 11) * 200 div11.style.posTop = imgMid.style.posTop - Cos(ang * 11) * 200 div12.style.posLeft = imgMid.style.posLeft + Sin(ang * 12) * 200 div12.style.posTop = imgMid.style.posTop - Cos(ang * 12) * 200 window.setinterval "ShowHands()", 500 End Sub

12. Mark Dixon 12 Example: Clock v1 (code) Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second(Now()) imgSec.style.posLeft = imgMid.style.posLeft + Sin(ang * s) * 200 imgSec.style.posTop = imgMid.style.posTop - Cos(ang * s) * 200 End Sub Option Explicit Sub window_OnLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & " " & i & " " Next document.body.innerHTML = s & document.body.innerHTML imgMid.style.posLeft = document.body.clientwidth / 2 imgMid.style.posTop = document.body.clientheight / 2 ang = 6.2 / 12 div1.style.posLeft = imgMid.style.posLeft + Sin(ang) * 200 div1.style.posTop = imgMid.style.posTop - Cos(ang) * 200 div2.style.posLeft = imgMid.style.posLeft + Sin(ang * 2) * 200 div2.style.posTop = imgMid.style.posTop - Cos(ang * 2) * 200 div3.style.posLeft = imgMid.style.posLeft + Sin(ang * 3) * 200 div3.style.posTop = imgMid.style.posTop - Cos(ang * 3) * 200 div4.style.posLeft = imgMid.style.posLeft + Sin(ang * 4) * 200 div4.style.posTop = imgMid.style.posTop - Cos(ang * 4) * 200 div5.style.posLeft = imgMid.style.posLeft + Sin(ang * 5) * 200 div5.style.posTop = imgMid.style.posTop - Cos(ang * 5) * 200 div6.style.posLeft = imgMid.style.posLeft + Sin(ang * 6) * 200 div6.style.posTop = imgMid.style.posTop - Cos(ang * 6) * 200 div7.style.posLeft = imgMid.style.posLeft + Sin(ang * 7) * 200 div7.style.posTop = imgMid.style.posTop - Cos(ang * 7) * 200 div8.style.posLeft = imgMid.style.posLeft + Sin(ang * 8) * 200 div8.style.posTop = imgMid.style.posTop - Cos(ang * 8) * 200 div9.style.posLeft = imgMid.style.posLeft + Sin(ang * 9) * 200 div9.style.posTop = imgMid.style.posTop - Cos(ang * 9) * 200 div10.style.posLeft = imgMid.style.posLeft + Sin(ang * 10) * 200 div10.style.posTop = imgMid.style.posTop - Cos(ang * 10) * 200 div11.style.posLeft = imgMid.style.posLeft + Sin(ang * 11) * 200 div11.style.posTop = imgMid.style.posTop - Cos(ang * 11) * 200 div12.style.posLeft = imgMid.style.posLeft + Sin(ang * 12) * 200 div12.style.posTop = imgMid.style.posTop - Cos(ang * 12) * 200 window.setinterval "ShowHands()", 500 End Sub Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second(Now()) imgSec.style.posLeft = imgMid.style.posLeft + Sin(ang * s) * 200 imgSec.style.posTop = imgMid.style.posTop - Cos(ang * s) * 200 End Sub same 2 lines duplicated –not identical different object different angle

13. Mark Dixon 13 Problem: Inflexible Procedure Procedure does exactly the same each time Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second(Now()) Position End Sub Sub Position() imgSec.style.posLeft = imgMid.style.posLeft + Sin(ang * s) * 200 imgSec.style.posTop = imgMid.style.posTop - Cos(ang * s) * 200 End Sub

14. Mark Dixon 14 Parameters/Arguments: What Sometimes procedures need information –Making a cup of tea: milk, and number of sugars Makes them more flexible Make cup of tea Milk Sugars

15. Mark Dixon 15 Variables as Parameters Page level variables can be used: Option Explicit Dim res Dim Num1 Dim Num2 Sub Calc() res = Num1 * Num2 End Sub Sub btnCalc_Click() Num1 = 5 Num2 = 2 Calc Num1 = 11 Num2 = 15 Calc End Sub

16. Mark Dixon 16 Parameters: How Procedure Declaration –formal parameters define name Procedure Call –actual parameters list values in order Option Explicit Dim res Sub Calc(Num1, Num2) res = Num1 * Num2 End Sub Sub btnCalc_Click() Calc 5, 2 Calc 11, 15 End Sub

17. Mark Dixon 17 Parameters: How

18. Mark Dixon 18 Variables vs Parameters Option Explicit Dim res Dim Num1 Dim Num2 Sub Calc() res = Num1 * Num2 End Sub Sub btnCalc_Click() Num1 = 5 Num2 = 2 Calc Num1 = 11 Num2 = 15 Calc End Sub Option Explicit Dim res Sub Calc( Num1, Num2 ) res = Num1 * Num2 End Sub Sub btnCalc_Click() Calc 5, 2 Calc 11, 15 End Sub

19. Mark Dixon 19 Error: Wrong number of arguments Option Explicit Sub Twice(num) parResult.innerText = num * 2 End Sub Twice 3 Twice 4, 3 Twice

20. Mark Dixon 20 Questions: Parameters Name the procedures in the following code and state how many parameters they take: Sub hello(s, x) Dim i s = "" For i = 1 To x s = s + "Hello" Next End Sub Sub DisplayScore() parScore.innerText = score End Sub hello takes 2 parameters DisplayScore takes 0 parameters

21. Mark Dixon 21 Questions: Parameters Given the following declaration: What will the following put in parRes? Sub thing(Num1, Num2, Num3) Dim tmpOutput tmpOutput = (Num1 + Num2) * Num3 parRes.innerText = tmpOutput End Sub thing 2, 3, 6 thing 6, 3, 2 thing 20, 5, 2 30 18 50

22. Mark Dixon 22 Example: Clock v2 (code) Option Explicit Sub window_OnLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & " " & i & " " Next document.body.innerHTML = s & document.body.innerHTML imgMid.style.posLeft = document.body.clientwidth / 2 imgMid.style.posTop = document.body.clientheight / 2 ang = 6.2 / 12 Position div1, ang Position div2, ang * 2 Position div3, ang * 3 Position div4, ang * 4 Position div5, ang * 5 Position div6, ang * 6 Position div7, ang * 7 Position div8, ang * 8 Position div9, ang * 9 Position div10, ang * 10 Position div11, ang * 11 Position div12, ang * 12 window.setinterval "ShowHands()", 500 End Sub Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second(Now()) Position imgSec, ang * s End Sub Sub Position(objO, a) objO.style.posLeft = imgMid.style.posLeft + Sin(a) * 200 objO.style.posTop = imgMid.style.posTop - Cos(a) * 200 End Sub Sub Position( objO, a ) objO.style.posLeft = imgMid.style.posLeft + Sin( a ) * 200 objO.style.posTop = imgMid.style.posTop - Cos( a ) * 200 End Sub Position imgSec, ang * s Position div1, ang Position div2, ang * 2 Position div3, ang * 3 Position div4, ang * 4 … … … Position div9, ang * 9 Position div10, ang * 10 Position div11, ang * 11 Position div12, ang * 12

23. Mark Dixon 23 Comparison of Clock Code Option Explicit Sub window_OnLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & " " & i & " " Next document.body.innerHTML = s & document.body.innerHTML imgMid.style.posLeft = document.body.clientwidth / 2 imgMid.style.posTop = document.body.clientheight / 2 ang = 6.2 / 12 Position div1, ang Position div2, ang * 2 Position div3, ang * 3 Position div4, ang * 4 Position div5, ang * 5 Position div6, ang * 6 Position div7, ang * 7 Position div8, ang * 8 Position div9, ang * 9 Position div10, ang * 10 Position div11, ang * 11 Position div12, ang * 12 window.setinterval "ShowHands()", 500 End Sub Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second(Now()) Position imgSec, ang * s End Sub Sub Position(objO, a) objO.style.posLeft = imgMid.style.posLeft + Sin(a) * 200 objO.style.posTop = imgMid.style.posTop - Cos(a) * 200 End Sub Option Explicit Sub window_OnLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & " " & i & " " Next document.body.innerHTML = s & document.body.innerHTML imgMid.style.posLeft = document.body.clientwidth / 2 imgMid.style.posTop = document.body.clientheight / 2 ang = 6.2 / 12 div1.style.posLeft = imgMid.style.posLeft + Sin(ang) * 200 div1.style.posTop = imgMid.style.posTop - Cos(ang) * 200 div2.style.posLeft = imgMid.style.posLeft + Sin(ang * 2) * 200 div2.style.posTop = imgMid.style.posTop - Cos(ang * 2) * 200 div3.style.posLeft = imgMid.style.posLeft + Sin(ang * 3) * 200 div3.style.posTop = imgMid.style.posTop - Cos(ang * 3) * 200 div4.style.posLeft = imgMid.style.posLeft + Sin(ang * 4) * 200 div4.style.posTop = imgMid.style.posTop - Cos(ang * 4) * 200 div5.style.posLeft = imgMid.style.posLeft + Sin(ang * 5) * 200 div5.style.posTop = imgMid.style.posTop - Cos(ang * 5) * 200 div6.style.posLeft = imgMid.style.posLeft + Sin(ang * 6) * 200 div6.style.posTop = imgMid.style.posTop - Cos(ang * 6) * 200 div7.style.posLeft = imgMid.style.posLeft + Sin(ang * 7) * 200 div7.style.posTop = imgMid.style.posTop - Cos(ang * 7) * 200 div8.style.posLeft = imgMid.style.posLeft + Sin(ang * 8) * 200 div8.style.posTop = imgMid.style.posTop - Cos(ang * 8) * 200 div9.style.posLeft = imgMid.style.posLeft + Sin(ang * 9) * 200 div9.style.posTop = imgMid.style.posTop - Cos(ang * 9) * 200 div10.style.posLeft = imgMid.style.posLeft + Sin(ang * 10) * 200 div10.style.posTop = imgMid.style.posTop - Cos(ang * 10) * 200 div11.style.posLeft = imgMid.style.posLeft + Sin(ang * 11) * 200 div11.style.posTop = imgMid.style.posTop - Cos(ang * 11) * 200 div12.style.posLeft = imgMid.style.posLeft + Sin(ang * 12) * 200 div12.style.posTop = imgMid.style.posTop - Cos(ang * 12) * 200 window.setinterval "ShowHands()", 500 End Sub Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second(Now()) imgSec.style.posLeft = imgMid.style.posLeft + Sin(ang * s) * 200 imgSec.style.posTop = imgMid.style.posTop - Cos(ang * s) * 200 End Sub 1 2 3 4 5 6 7 8 9 10 11 12 Option Explicit Sub window_OnLoad() Dim ang imgMid.style.posLeft = document.body.clientwidth / 2 imgMid.style.posTop = document.body.clientheight / 2 ang = 6.2 / 12 div1.style.posLeft = imgMid.style.posLeft + Sin(ang) * 200 div1.style.posTop = imgMid.style.posTop - Cos(ang) * 200 div2.style.posLeft = imgMid.style.posLeft + Sin(ang * 2) * 200 div2.style.posTop = imgMid.style.posTop - Cos(ang * 2) * 200 div3.style.posLeft = imgMid.style.posLeft + Sin(ang * 3) * 200 div3.style.posTop = imgMid.style.posTop - Cos(ang * 3) * 200 div4.style.posLeft = imgMid.style.posLeft + Sin(ang * 4) * 200 div4.style.posTop = imgMid.style.posTop - Cos(ang * 4) * 200 div5.style.posLeft = imgMid.style.posLeft + Sin(ang * 5) * 200 div5.style.posTop = imgMid.style.posTop - Cos(ang * 5) * 200 div6.style.posLeft = imgMid.style.posLeft + Sin(ang * 6) * 200 div6.style.posTop = imgMid.style.posTop - Cos(ang * 6) * 200 div7.style.posLeft = imgMid.style.posLeft + Sin(ang * 7) * 200 div7.style.posTop = imgMid.style.posTop - Cos(ang * 7) * 200 div8.style.posLeft = imgMid.style.posLeft + Sin(ang * 8) * 200 div8.style.posTop = imgMid.style.posTop - Cos(ang * 8) * 200 div9.style.posLeft = imgMid.style.posLeft + Sin(ang * 9) * 200 div9.style.posTop = imgMid.style.posTop - Cos(ang * 9) * 200 div10.style.posLeft = imgMid.style.posLeft + Sin(ang * 10) * 200 div10.style.posTop = imgMid.style.posTop - Cos(ang * 10) * 200 div11.style.posLeft = imgMid.style.posLeft + Sin(ang * 11) * 200 div11.style.posTop = imgMid.style.posTop - Cos(ang * 11) * 200 div12.style.posLeft = imgMid.style.posLeft + Sin(ang * 12) * 200 div12.style.posTop = imgMid.style.posTop - Cos(ang * 12) * 200 window.setinterval "ShowHands()", 500 End Sub Sub ShowHands() Dim ang Dim s ang = 6.2 / 60 s = Second(Now()) imgSec.style.posLeft = imgMid.style.posLeft + Sin(ang * s) * 200 imgSec.style.posTop = imgMid.style.posTop - Cos(ang * s) * 200 End Sub v0 (64 lines) v1 (59 lines) v2 (51 lines) (2474 bytes) (2064 bytes) (941 bytes)

24. Mark Dixon 24 Example: Clock v3 Use for loop instead of repeated calls Position div1, ang Position div2, ang * 2 Position div3, ang * 3 Position div4, ang * 4 Position div5, ang * 5 Position div6, ang * 6 Position div7, ang * 7 Position div8, ang * 8 Position div9, ang * 9 Position div10, ang * 10 Position div11, ang * 11 Position div12, ang * 12 For i = 1 To 12 Position document.getElementById("div" & i), ang * i Next

25. Mark Dixon 25 Example: Clock v4

26. Mark Dixon 26 Memory Addresses Memory addresses - keep track of where variables are stored in memory Every byte (position) in memory has a memory address: e.g. variable identified by name x stored at location 63542 (address of the first byte of data for variable x) 23x Identifier Value Computer Memory 63542 0

27. Mark Dixon 27 Example: Change the Value

28. Mark Dixon 28 Parameter Passing Methods 2 ways to pass parameters to procedures: –Passing by Value: literal value is passed from the call to the definition Sub Change1(ByVal x) … End Sub –Passing by Reference: variable’s memory address (a reference to the variables position in memory) is passed from the call to the definition Sub Change2(ByRef y) … End Sub

29. Mark Dixon 29 Why pass by reference? Previously, used parameters to pass data into a procedure (input) Pass by reference, allows: –the procedure to change the value of the passed variable –data to be input and output via parameters Change ByVal x Set ByRef x

30. Mark Dixon 30 What can be passed Pass by value – both literals and variables can be passed (variables are substituted by their value) Change1 y Change1 21 Pass by reference – only variables can be passed (in fact the variable’s memory address is passed) Change2 y literals cannot be passed – they have no memory address Change2 21  ERROR

31. Mark Dixon 31 Two results? Total and Average algorithms share a lot of code Useful to combine them TotAve procedure: double (average) integer (total) TotAve

32. Mark Dixon 32 Example: Total and Average Sub TotAve(ByRef T, ByRef A) Dim i T = 0 For i = 1 to 5 T = T + Nums(i) Next A = T / 5 End Sub tot = 0 ave = 0 TotAve tot, ave ' What is the value of ave and tot? TotAve var T var A

33. Mark Dixon 33 Questions: Parameter Passing Consider the following code: Dim a Sub Add(ByRef item, ByVal extra) item = item + extra End Sub a = 5 What is the value of a, after each of these: Add a, 3 Add a, a Add 4, 4 8 16 Error – cannot pass 4 by reference

34. Mark Dixon 34 Tutorial Exercise: Clock LEARNING OBJECTIVE: –use parameters provided by event procedures Task 1: Get the Clock (v2) example (from the lecture) working. Task 2: Modify your code – display lots of dots for the second hand (as per v3). Task 3: Modify your code – add an hour and minute hand