Mark Dixon 1 13 – Parameters

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

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

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

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

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

Mark Dixon 7 Example: Clock v0 (HTML)

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

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

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

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

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

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

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

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

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

Mark Dixon 17 Parameters: How

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

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

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

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,

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

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

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

Mark Dixon 25 Example: Clock v4

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 (address of the first byte of data for variable x) 23x Identifier Value Computer Memory

Mark Dixon 27 Example: Change the Value

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

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

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

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

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

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, Error – cannot pass 4 by reference

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