1. Mark Dixon 1 14 – Functions and Modules

2. Mark Dixon 2 Questions: Parameters Consider the following code: Sub Move(ByRef obj, ByVal dist) obj.style.posLeft = obj.style.posLeft + dist obj.style.posTop = obj.style.posTop + dist End Sub Move imgShip, 25 Name a formal parameter Name an actual parameter imgShip 25 obj dist

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

4. Mark Dixon 4 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

5. Mark Dixon 5 Example: Interceptor (design) Computer games & simulations work like board games:

6. Mark Dixon 6 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?

7. Mark Dixon 7 Example: Interceptor v1 (code) Option Explicit Dim xInc Dim score Sub window_onLoad() Randomize imgShip.style.posTop = document.body.clientHeight - imgShip.height imgAst1.style.posTop = 0 imgAst1.style.posLeft = 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 End Sub Sub Main Dim nxt nxt = imgShip.style.posLeft - xInc If nxt document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.posLeft = nxt End If imgAst1.style.posTop = imgAst1.style.posTop + 4 If (imgAst1.style.posTop + imgAst1.height) > document.body.clientHeight Then imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If If imgAst1.style.posTop + imgAst1.height > imgShip.style.posTop Then If imgAst1.style.posLeft + imgAst1.width > imgShip.style.posLeft Then If imgAst1.style.posLeft < imgShip.style.posLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If End Sub Sub window_onLoad() Randomize imgShip.style.posTop = document.body.clientHeight - imgShip.height imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) xInc = 0 score = 0 window.setInterval "Main", 20 End Sub

8. Mark Dixon 8 Example: Interceptor v1 (code) Option Explicit Dim xInc Dim score Sub window_onLoad() Randomize imgShip.style.posTop = document.body.clientHeight - imgShip.height imgAst1.style.posTop = 0 imgAst1.style.posLeft = 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 End Sub Sub Main Dim nxt nxt = imgShip.style.posLeft - xInc If nxt document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.posLeft = nxt End If imgAst1.style.posTop = imgAst1.style.posTop + 4 If (imgAst1.style.posTop + imgAst1.height) > document.body.clientHeight Then imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If If imgAst1.style.posTop + imgAst1.height > imgShip.style.posTop Then If imgAst1.style.posLeft + imgAst1.width > imgShip.style.posLeft Then If imgAst1.style.posLeft < imgShip.style.posLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If End Sub Sub document_OnKeyDown() Select Case window.event.keyCode Case 37 xInc = xInc + 2 Case 39 xInc = xInc - 2 End Select End Sub

9. Mark Dixon 9 Example: Interceptor v1 (code) Option Explicit Dim xInc Dim score Sub window_onLoad() Randomize imgShip.style.posTop = document.body.clientHeight - imgShip.height imgAst1.style.posTop = 0 imgAst1.style.posLeft = 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 End Sub Sub Main Dim nxt nxt = imgShip.style.posLeft - xInc If nxt document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.posLeft = nxt End If imgAst1.style.posTop = imgAst1.style.posTop + 4 If (imgAst1.style.posTop + imgAst1.height) > document.body.clientHeight Then imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If If imgAst1.style.posTop + imgAst1.height > imgShip.style.posTop Then If imgAst1.style.posLeft + imgAst1.width > imgShip.style.posLeft Then If imgAst1.style.posLeft < imgShip.style.posLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If End Sub Sub Main Dim nxt nxt = imgShip.style.posLeft - xInc If nxt document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.posLeft = nxt End If imgAst1.style.posTop = imgAst1.style.posTop + 4 If (imgAst1.style.posTop + imgAst1.height) > document.body.clientHeight Then imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If If imgAst1.style.posTop + imgAst1.height > imgShip.style.posTop Then If imgAst1.style.posLeft + imgAst1.width > imgShip.style.posLeft Then If imgAst1.style.posLeft < imgShip.style.posLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If End Sub

10. Mark Dixon 10 Example: Interceptor (user interface)

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

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

13. Mark Dixon 13 Built in Functions Sqr – gives square root of a number: Sqr(16)returns4 Sqr(9)returns3 Sqr(4)returns2 Rnd() – generates random numbers between 0 and 0.99999999… Right, Mid, Left …

14. Mark Dixon 14 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

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

16. Mark Dixon 16 Functions: Fahrenheit to Celsius

17. Mark Dixon 17 Functions: Largest What will first and second contain?

18. Mark Dixon 18 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) Questions: Functions 12 24

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

20. Mark Dixon 20 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 Minutes(Mins, Hours) Function Euros(Pounds)

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

22. Mark Dixon 22 Question: Functions Write a function that converts kilometres to miles (divide the number of kilometres by 1.6 to get miles): Function Miles(km) Miles = km / 1.6 End Function

23. Mark Dixon 23 Functions: Total

24. Mark Dixon 24 Problem: Interceptor Option Explicit Dim xInc Dim score Sub window_onLoad() Randomize imgShip.style.posTop = document.body.clientHeight - imgShip.height imgAst1.style.posTop = 0 imgAst1.style.posLeft = 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 End Sub Sub Main Dim nxt nxt = imgShip.style.posLeft - xInc If nxt document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.posLeft = nxt End If imgAst1.style.posTop = imgAst1.style.posTop + 4 If (imgAst1.style.posTop + imgAst1.height) > document.body.clientHeight Then imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If If imgAst1.style.posTop + imgAst1.height > imgShip.style.posTop Then If imgAst1.style.posLeft + imgAst1.width > imgShip.style.posLeft Then If imgAst1.style.posLeft < imgShip.style.posLeft + imgShip.width Then score = score + 1 parScore.innerText = "Score: " & score imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If End Sub Option Explicit Dim xInc Dim score Sub window_onLoad() Randomize imgShip.style.posTop = document.body.clientHeight - imgShip.height imgAst1.style.posTop = 0 imgAst1.style.posLeft = 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 End Sub Sub Main Dim nxt nxt = imgShip.style.posLeft - xInc If nxt document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.posLeft = nxt End If imgAst1.style.posTop = imgAst1.style.posTop + 4 If (imgAst1.style.posTop + imgAst1.height) > document.body.clientHeight Then imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If If ShipCollide(imgAst1) Then score = score + 1 parScore.innerText = "Score: " & score imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If End Sub Function ShipCollide(obj1) ShipCollide = False If obj1.style.posTop + obj1.height > imgShip.style.posTop Then If posRight(obj1) > imgShip.style.posLeft Then If obj1.style.posLeft < posRight(imgShip) Then ShipCollide = True End If End Function Function posRight(obj) posRight = obj.style.posLeft + obj.width End Function Code is longer (but easier to read)

25. Mark Dixon 25 Modules Projects can contain many modules/units –web pages (*.htm) –vb script file (*.vbs) Modules –divide your code into separate parts –available to other pages and modules, using:

26. Mark Dixon 26 Example: Interceptor v4 Option Explicit Dim xInc Dim score Sub window_onLoad() Randomize imgShip.style.posTop = document.body.clientHeight - imgShip.height imgAst1.style.posTop = 0 imgAst1.style.posLeft = 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 End Sub Sub Main Dim nxt nxt = imgShip.style.posLeft - xInc If nxt document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.posLeft = nxt End If imgAst1.style.posTop = imgAst1.style.posTop + 4 If (imgAst1.style.posTop + imgAst1.height) > document.body.clientHeight Then imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If If ShipCollide(imgAst1) Then score = score + 1 parScore.innerText = "Score: " & score imgAst1.style.posTop = 0 imgAst1.style.posLeft = Rnd() * (document.body.clientWidth - imgAst1.width) End If End Sub Function ShipCollide(obj1) ShipCollide = False If obj1.style.posTop + obj1.height > imgShip.style.posTop Then If posRight(obj1) > imgShip.style.posLeft Then If obj1.style.posLeft < posRight(imgShip) Then ShipCollide = True End If End Function Function posRight(obj) posRight = obj.style.posLeft + obj.width End Function vb script file (module) holds functions and general procedures Interceptor.htm Interceptor.vbs

27. Mark Dixon 27 Example: Interceptor v5 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 End Sub Sub Main MoveShip MoveDown imgAst1, 4 If AtBottom(imgAst1) Then MoveRndHor imgAst1 End If If HitShip(imgAst1) Then IncreaseScore MoveRndHor imgAst1 End If End Sub Sub MoveToBottom(obj) obj.style.posTop = document.body.clientHeight - obj.height End Sub Sub MoveRndHor(obj) obj.style.posTop = 0 obj.style.posLeft = Rnd() * (document.body.clientWidth - obj.width) End Sub Sub MoveDown(obj, dist) obj.style.posTop = obj.style.posTop + dist End Sub Function HitShip(obj) HitShip = False If obj.style.posTop + obj.height > imgShip.style.posTop Then If posRight(obj) > imgShip.style.posLeft Then If obj.style.posLeft < posRight(imgShip) Then HitShip = True End If End Function Function posRight(obj) posRight = obj.style.posLeft + obj.width End Function Function AtBottom(obj) AtBottom = (obj.style.posTop + obj.height) > document.body.clientHeight End Function Sub IncreaseScore() score = score + 1 parScore.innerText = "Score: " & score End Sub Sub MoveShip() Dim nxt nxt = imgShip.style.posLeft - xInc If nxt document.body.clientWidth - imgShip.width Then xInc = -xInc Else imgShip.style.posLeft = nxt End If End Sub

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

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

30. Mark Dixon 30 Sharing Modules 2 pages can use same module: Sub window_onLoad() Dim ang Dim s Dim i s = "" For i = 1 To 12 s = s & " " & i & " " Next s = s & " " For i = 1 To 18 s = s & " " Next document.body.innerHTML = s imgMid.style.posleft = document.body.clientWidth / 2 imgMid.style.postop = document.body.clientHeight / 2 ang = 6.2 / 12 For i = 1 To 12 Position document.body.children("div" & i), 200, ang * i Next window.setinterval "ShowHands", 500 End Sub Sub ShowHands() Dim ang Dim s Dim i ang = 6.2 / 60 s = Second(Now()) For i = 1 To 18 Position document.body.children("imgSec" & i), i * 10, ang * s Next End Sub Sub Position(objO, o, a) objO.style.posleft = imgMid.style.posleft + Sin(a) * o objO.style.postop = imgMid.style.postop - Cos(a) * o End Sub Option Explicit Const orbit = 150 Dim ang Dim angInc Dim earthLft Dim earthTop Dim ang2 Sub Window_onLoad() earthLft = imgEarth.style.posleft earthTop = imgEarth.style.postop imgMoon.Style.posLeft = earthLft imgMoon.Style.posTop = earthTop + orbit window.setInterval "MoonRotate", 50 ang = 0 angInc = 0.025 ang2 = 0 End Sub Sub MoonRotate() ang = ang + angInc imgMoon.Style.posLeft = earthLft + (Sin(ang) * orbit) imgMoon.Style.posTop = earthTop + (Cos(ang) * orbit) ang2 = ang2 - (angInc * 3) imgAstr.Style.posLeft = imgMoon.style.posleft + (Sin(ang2) * 50) imgAstr.Style.posTop = imgMoon.style.postop + (Cos(ang2) * 50) End Sub Clock Orbit

31. Mark Dixon 31 Tutorial Exercises: Interceptor LEARNING OBJECTIVE: –use functions to shorten your code and make it easier to modify Task 1: Get the Interceptor example (from the lecture) working. Task 2: Modify your page to play a suitable sound when the asteroid collides with the ship. Task 3: Modify your page to have 4 asteroids Task 4: Modify your page so that the player must avoid the asteroids. Give your player 5 lives (lose a life each time the space craft hits an asteroid). Task 5: Add an escape pod which the player must pick up (hit) to increase their score.

32. Mark Dixon 32 Tutorial Exercises: Position LEARNING OBJECTIVE: –use a module file to share code between pages Task 1: Create a web site that contains copies of your orbit and clock examples. Task 2: Create a module file containing shared code between the modules for the position procedure.