11 – Functions and Modules

Admin: Coursework 3 – Test In class test 15 Jan 2007: teaching week 14 50 mins multiple choice/short answer (5 - 6 words max) 25% of coursework mark

Questions: Parameters Name a parameter in the following code: Sub Move(ByRef obj, ByVal dist) obj.style.pixelLeft = obj.style.pixelLeft + dist obj.style.pixelTop = obj.style.pixelTop + dist End Sub Move imgShip, 25 Name a formal parameter Name an actual parameter obj dist imgShip 25 obj dist imgShip 25

Session Aims & Objectives Aims, to introduce: the idea of a function as a way to make code shorter and easier to understand the idea of modules as a way to split up large programs and share code between pages Objectives, by end of this week’s sessions, you should be able to: create your own function definitions call these functions appropriately split a program into multiple modules reuse modules in several pages/programs

Example: Interceptor (analysis) SPECIFICATION User Requirements to be entertained Software Requirements Functional: display image of space ship, which can be moved using the left and right arrow keys display images of asteroids, which the user must block using the space ship (thereby gaining points) Non-functional should be playable in real time

Example: Interceptor (design) Computer games & simulations work like board games:

Problem Solving: Collision Detection 2 types of problem: familiar (seen before – remember solution) novel (work out solution) generate algorithm: solve it on paper draw diagrams work through possibilities ask how did I do that what steps did I take?

Example: Interceptor v1 (code) Option Explicit Dim xInc Dim score Sub window_OnLoad() Randomize imgShip.style.pixelTop = document.body.clientheight - imgShip.height imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) xInc = 0 score = 0 window.setInterval "Main", 20 End Sub Sub document_OnKeyDown() Select Case window.event.keyCode Case 37 xInc = xInc + 2 Case 39 xInc = xInc - 2 End Select Sub Main Dim nxt nxt = imgShip.style.pixelLeft - xInc If nxt < 0 Or nxt > document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.pixelLeft = nxt End If imgAst1.style.pixelTop = imgAst1.style.pixelTop + 4 If (imgAst1.style.pixelTop + imgAst1.height) > document.body.clientheight Then If imgAst1.style.pixelTop + imgAst1.height > imgShip.style.pixelTop Then If imgAst1.style.pixelLeft + imgAst1.width > imgShip.style.pixelLeft Then If imgAst1.style.pixelLeft < imgShip.style.pixelLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score Sub window_OnLoad() Randomize imgShip.style.pixelTop = document.body.clientheight - imgShip.height imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) xInc = 0 score = 0 window.setInterval "Main", 20 End Sub

Example: Interceptor v1 (code) Option Explicit Dim xInc Dim score Sub window_OnLoad() Randomize imgShip.style.pixelTop = document.body.clientheight - imgShip.height imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) xInc = 0 score = 0 window.setInterval "Main", 20 End Sub Sub document_OnKeyDown() Select Case window.event.keyCode Case 37 xInc = xInc + 2 Case 39 xInc = xInc - 2 End Select Sub Main Dim nxt nxt = imgShip.style.pixelLeft - xInc If nxt < 0 Or nxt > document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.pixelLeft = nxt End If imgAst1.style.pixelTop = imgAst1.style.pixelTop + 4 If (imgAst1.style.pixelTop + imgAst1.height) > document.body.clientheight Then If imgAst1.style.pixelTop + imgAst1.height > imgShip.style.pixelTop Then If imgAst1.style.pixelLeft + imgAst1.width > imgShip.style.pixelLeft Then If imgAst1.style.pixelLeft < imgShip.style.pixelLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score Sub document_OnKeyDown() Select Case window.event.keyCode Case 37 xInc = xInc + 2 Case 39 xInc = xInc - 2 End Select End Sub

Example: Interceptor v1 (code) Sub Main Dim nxt nxt = imgShip.style.pixelLeft - xInc If nxt < 0 Or nxt > document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.pixelLeft = nxt End If imgAst1.style.pixelTop = imgAst1.style.pixelTop + 4 If (imgAst1.style.pixelTop + imgAst1.height) > document.body.clientheight Then imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) If imgAst1.style.pixelTop + imgAst1.height > imgShip.style.pixelTop Then If imgAst1.style.pixelLeft + imgAst1.width > imgShip.style.pixelLeft Then If imgAst1.style.pixelLeft < imgShip.style.pixelLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score End Sub Option Explicit Dim xInc Dim score Sub window_OnLoad() Randomize imgShip.style.pixelTop = document.body.clientheight - imgShip.height imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) xInc = 0 score = 0 window.setInterval "Main", 20 End Sub Sub document_OnKeyDown() Select Case window.event.keyCode Case 37 xInc = xInc + 2 Case 39 xInc = xInc - 2 End Select Sub Main Dim nxt nxt = imgShip.style.pixelLeft - xInc If nxt < 0 Or nxt > document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.pixelLeft = nxt End If imgAst1.style.pixelTop = imgAst1.style.pixelTop + 4 If (imgAst1.style.pixelTop + imgAst1.height) > document.body.clientheight Then If imgAst1.style.pixelTop + imgAst1.height > imgShip.style.pixelTop Then If imgAst1.style.pixelLeft + imgAst1.width > imgShip.style.pixelLeft Then If imgAst1.style.pixelLeft < imgShip.style.pixelLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score

Example: Interceptor (user interface)

Problem: Repeated Calculations implementation (code) more complicated than algorithm technical detail (how) e.g. right = left + width If imgAst1.style.pixelTop + imgAst1.height > imgShip.style.pixelTop Then If imgAst1.style.pixelLeft + imgAst1.width > imgShip.style.pixelLeft Then If imgAst1.style.pixelLeft < imgShip.style.pixelLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If

Procedures and Functions Both Procedures and Functions Group of statements Identified by unique name mirror real life activities Procedures – just do something Functions – return a value used to perform calculations

Built in Functions Sqr – gives square root of a number: Sqr(16) returns 4 Sqr(9) returns 3 Sqr(4) returns 2 Rnd() – generates random numbers between 0 and 0.99999999… Right, Mid, Left …

User Defined Functions (how) Syntax very similar to procedure definition: Function name(parameters) Statementblock name = value End Function where name represents function’s name (you choose) parameters represent information needed value represent the return value

Functions: FtoC The declaration: The call: parRes.innerText = FtoC(50) Function FtoC(F) FtoC = ((f-32) * 5) / 9 End Function The call: parRes.innerText = FtoC(50)

Functions: Fahrenheit to Celsius

Functions: Largest What will first and second contain?

Questions: Functions Consider the following function definition: Function Twice(num) Twice = num * 2 End Function What do the following return: Twice(6) Dim b b = 12 Twice(b) 12 24

Example: Interceptor v2 Function makes code easier to read (closer to pseudo-code / algorithm): If imgAst1.style.pixelTop + imgAst1.height > imgShip.style.pixelTop Then If pixelRight(imgAst1) > imgShip.style.pixelLeft Then If imgAst1.style.pixelLeft < pixelRight(imgShip) Then score = score + 1 parScore.innerText = "Score: " & score imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If End Sub Function pixelRight(obj) pixelRight = obj.style.pixelLeft + obj.width End Function

Question: Function Headers Write the first line of a function definition to convert pounds to euros: Write the first line of a function definition to convert minutes and hours to minutes: Function Euros(Pounds) Function Minutes(Mins, Hours)

Example: Interceptor v3 If ShipCollide(imgAst1) Then score = score + 1 parScore.innerText = "Score: " & score imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If Function ShipCollide(obj1) ShipCollide = False If obj1.style.pixelTop + obj1.height > imgShip.style.pixelTop Then If pixelRight(obj1) > imgShip.style.pixelLeft Then If obj1.style.pixelLeft < pixelRight(imgShip) Then ShipCollide = True End Function Function pixelRight(obj) pixelRight = obj.style.pixelLeft + obj.width

Question: Functions Write a function that converts kilometres to miles (multiply the number of kilometres by 1.6 to get miles): Function Miles(km) Miles = km * 1.6 End Function

Functions: Total

Problem: Interceptor Code is longer (but easier to read) Option Explicit Dim xInc Dim score Sub window_OnLoad() Randomize imgShip.style.pixelTop = document.body.clientheight - imgShip.height imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) xInc = 0 score = 0 window.setInterval "Main", 20 End Sub Sub document_OnKeyDown() Select Case window.event.keyCode Case 37 xInc = xInc + 2 Case 39 xInc = xInc - 2 End Select Sub Main Dim nxt nxt = imgShip.style.pixelLeft - xInc If nxt < 0 Or nxt > document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.pixelLeft = nxt End If imgAst1.style.pixelTop = imgAst1.style.pixelTop + 4 If (imgAst1.style.pixelTop + imgAst1.height) > document.body.clientheight Then If imgAst1.style.pixelTop + imgAst1.height > imgShip.style.pixelTop Then If imgAst1.style.pixelLeft + imgAst1.width > imgShip.style.pixelLeft Then If imgAst1.style.pixelLeft < imgShip.style.pixelLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score Option Explicit Dim xInc Dim score Sub window_OnLoad() Randomize imgShip.style.pixelTop = document.body.clientheight - imgShip.height imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) xInc = 0 score = 0 window.setInterval "Main", 20 End Sub Sub document_OnKeyDown() Select Case window.event.keyCode Case 37 xInc = xInc + 2 Case 39 xInc = xInc - 2 End Select Sub Main Dim nxt nxt = imgShip.style.pixelLeft - xInc If nxt < 0 Or nxt > document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.pixelLeft = nxt End If imgAst1.style.pixelTop = imgAst1.style.pixelTop + 4 If (imgAst1.style.pixelTop + imgAst1.height) > document.body.clientheight Then If ShipCollide(imgAst1) Then score = score + 1 parScore.innerText = "Score: " & score Function ShipCollide(obj1) ShipCollide = False If obj1.style.pixelTop + obj1.height > imgShip.style.pixelTop Then If pixelRight(obj1) > imgShip.style.pixelLeft Then If obj1.style.pixelLeft < pixelRight(imgShip) Then ShipCollide = True End Function Function pixelRight(obj) pixelRight = obj.style.pixelLeft + obj.width Code is longer (but easier to read)

Modules Projects can contain many modules/units Modules web pages (*.htm) vb script file (*.vbs) Modules divide your code into separate parts available to other pages and modules, using: <script language=vbscript src=Interceptor.vbs></script>

Example: Interceptor v4 Interceptor.htm <script language=vbscript src=Interceptor.vbs></script> <script language=vbscript> Option Explicit Dim xInc Dim score Sub window_OnLoad() Randomize imgShip.style.pixelTop = document.body.clientheight - imgShip.height imgAst1.style.pixelTop = 0 imgAst1.style.pixelLeft = Rnd() * (document.body.clientWidth - imgAst1.width) xInc = 0 score = 0 window.setInterval "Main", 20 End Sub Sub document_OnKeyDown() Select Case window.event.keyCode Case 37 xInc = xInc + 2 Case 39 xInc = xInc - 2 End Select Sub Main Dim nxt nxt = imgShip.style.pixelLeft - xInc If nxt < 0 Or nxt > document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.pixelLeft = nxt End If imgAst1.style.pixelTop = imgAst1.style.pixelTop + 4 If (imgAst1.style.pixelTop + imgAst1.height) > document.body.clientheight Then If ShipCollide(imgAst1) Then score = score + 1 parScore.innerText = "Score: " & score </script> Interceptor.vbs Function ShipCollide(obj1) ShipCollide = False If obj1.style.pixelTop + obj1.height > imgShip.style.pixelTop Then If pixelRight(obj1) > imgShip.style.pixelLeft Then If obj1.style.pixelLeft < pixelRight(imgShip) Then ShipCollide = True End If End Function Function pixelRight(obj) pixelRight = obj.style.pixelLeft + obj.width vb script file (module) holds functions and general procedures

Example: Interceptor v5 <script language=vbscript src=Interceptor.vbs></script> <script language=vbscript> Option Explicit Dim xInc Dim score Sub window_OnLoad() Randomize MoveToBottom imgShip MoveRndHor imgAst1 xInc = 0 score = 0 window.setInterval "Main", 20 End Sub Sub document_OnKeyDown() Select Case window.event.keyCode Case 37 xInc = xInc + 2 Case 39 xInc = xInc - 2 End Select Sub Main MoveShip MoveDown imgAst1, 4 If AtBottom(imgAst1) Then End If If HitShip(imgAst1) Then IncreaseScore </script> Sub MoveToBottom(obj) obj.style.pixelTop = document.body.clientHeight - obj.height End Sub Sub MoveRndHor(obj) obj.style.pixelTop = 0 obj.style.pixelLeft = Rnd() * (document.body.clientWidth - obj.width) Sub MoveDown(obj, dist) obj.style.pixelTop = obj.style.pixelTop + dist Function HitShip(obj) HitShip = False If obj.style.pixelTop + obj.height > imgShip.style.pixelTop Then If pixelRight(obj) > imgShip.style.pixelLeft Then If obj.style.pixelLeft < pixelRight(imgShip) Then HitShip = True End If End Function Function pixelRight(obj) pixelRight = obj.style.pixelLeft + obj.width Function AtBottom(obj) AtBottom = (obj.style.pixelTop + obj.height) > document.body.clientheight Sub IncreaseScore() score = score + 1 parScore.innerText = "Score: " & score Sub MoveShip() Dim nxt nxt = imgShip.style.pixelLeft - xInc If nxt < 0 Or nxt > document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.pixelLeft = nxt

Example: Interceptor v5 Main code reads almost like algorithm: Sub Main MoveShip MoveDown imgAst1, 4 If AtBottom(imgAst1) Then MoveRndHor imgAst1 End If If HitShip(imgAst1) Then IncreaseScore End Sub Sub Main MoveShip MoveDown imgAst1, 2 If AtBottom(imgAst1) Then MoveRndHor imgAst1 End If If HitShip(imgAst1) Then IncreaseScore End Sub

Example: Interceptor v6 Functions and Procedures benefits when code gets larger easy to add extra asteroid

Sharing Modules 2 pages can use same module: Clock Orbit Sub window_OnLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & "<div id=div" & i & " style=""position: absolute;"">" & i & "</div>" Next s = s & "<img id=imgMid style=""position: absolute;"" src=dot.gif />" For i = 1 To 18 s = s & "<img id=imgSec" & i & " style=""position: absolute;"" src=dot.gif />" document.body.innerHTML = s imgMid.style.pixelleft = document.body.clientwidth / 2 imgMid.style.pixeltop = document.body.clientheight / 2 ang = 6.2 / 12 Position document.body.children("div" & i), 200, ang * i window.setinterval "ShowHands", 500 End Sub Sub ShowHands() ang = 6.2 / 60 s = Second(Now()) Position document.body.children("imgSec" & i), i * 10, ang * s Sub Position(objO, o, a) objO.style.pixelleft = imgMid.style.pixelleft + Sin(a) * o objO.style.pixeltop = imgMid.style.pixeltop - Cos(a) * o Option Explicit Const orbit = 150 Dim ang Dim angInc Dim earthLft Dim earthTop Dim ang2 Sub Window_OnLoad() earthLft = imgEarth.style.pixelleft earthTop = imgEarth.style.pixeltop imgMoon.Style.PixelLeft = earthLft imgMoon.Style.PixelTop = earthTop + orbit window.SetInterval "MoonRotate", 50 ang = 0 angInc = 0.025 ang2 = 0 End Sub Sub MoonRotate() ang = ang + angInc imgMoon.Style.PixelLeft = earthLft + (Sin(ang) * orbit) imgMoon.Style.PixelTop = earthTop + (Cos(ang) * orbit) ang2 = ang2 - (angInc * 3) imgAstr.Style.PixelLeft = imgMoon.style.pixelleft + (Sin(ang2) * 50) imgAstr.Style.PixelTop = imgMoon.style.pixeltop + (Cos(ang2) * 50) 2 pages can use same module:

Tutorial Exercises: Interceptor Task 1: Get the Interceptor example (from the lecture) working. Task 2: Modify your page to have 4 asteroids, which the player must avoid; and an escape pod which the player must pick up (hit). Give your player 5 lives (lose a life each time the space craft hits an asteroid).

Tutorial Exercises: Position Task 1: Create a web site that contains copies of you orbit and clock examples. Task 2: Create a module containing shared code between the modules for the position procedure.