1. 11 – Functions and Modules

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

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

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

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

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

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

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

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

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

11. Example: Interceptor (user interface)

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

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

14. 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 …
Right, Mid, Left …

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

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

17. Functions: Fahrenheit to Celsius

18. Functions: Largest
What will first and second contain?

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

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

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

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

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

24. Functions: Total

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

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

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

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

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

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

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

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

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