8 – Procedures
Mark Dixon
Page 1
Session Aims & Objectives
• Aims
– To introduce the main concepts involved in
grouping instructions, to deal with large
programs.
• Objectives,
by end of this week’s sessions, you should be able to:
– define procedures,
– call procedures,
– identify repeated code suitable to be put into
procedures
Mark Dixon
Page 2
Inefficient Code
• duplication in both branches of if
If weight > 2.2 Then
x=5
Else
x=5
End If
• unused variable declarations
Dim x
Dim y
x=5
• redundant (nil effect) lines of code
x = 23
x=5
Mark Dixon
x=5
Dim x
x=5
x=5
Page 3
Example: Hotel Rooms – Analysis
SPECIFICATION
• User Requirements
– need to allow potential hotel customers to calculate
the cost of a given number of rooms for a given
duration
• Software Requirements
– Functional:
–User should be able to enter number of rooms
and duration
–cost, vat and total cost should be calculated
– Non-functional
should be quick and easy to use
Mark Dixon
Page 4
Example: Hotel Rooms v1
Option Explicit
Sub btnCalc_OnClick()
Dim Cost
Dim vat
Dim TotalCost
Cost = txtRooms.value * txtNights.value * 48.50
vat = cost * 0.175
TotalCost = Cost + vat
lblCost.innertext = "£" & Cost
lblVat.innertext = "£" & vat
lblTotCost.innertext = "£" & TotalCost
End Sub
result of operations should be visible immediately!
Shneiderman 1998, p. 205
Mark Dixon
Page 5
Example: Hotel Rooms v2
Option Explicit
Dim Cost
Dim vat
Dim TotalCost
• Much longer
(28 lines)
• More work to
change
Mark Dixon
Sub window_OnLoad()
Cost = txtRooms.value * txtNights.value * 48.50
vat = cost * 0.175
TotalCost = Cost + vat
lblCost.innertext = "£" & Cost
lblVat.innertext = "£" & vat
lblTotCost.innertext = "£" & TotalCost
End Sub
Duplicate
Sub txtRooms_OnKeyUp()
Cost = txtRooms.value * txtNights.value * 48.50
vat = cost * 0.175
TotalCost = Cost + vat
lblCost.innertext = "£" & Cost
lblVat.innertext = "£" & vat
lblTotCost.innertext = "£" & TotalCost
End Sub
Duplicate
Sub txtNights_OnKeyUp()
Cost = txtRooms.value * txtNights.value * 48.50
vat = cost * 0.175
TotalCost = Cost + vat
lblCost.innertext = "£" & Cost
lblVat.innertext = "£" & vat
lblTotCost.innertext = "£" & TotalCost
End Sub
Duplicate
28 lines
Page 6
Large Programs
• Real programs get very large
• Exponential increase in effort
Mark Dixon
A
B
C
D
1 (A)
3 (A, B, AB)
6 (A, B, C, AB, AC, BC)
10 (A, B, C, D, AB, AC, BC, AD, BD, CD)
Page 7
Fetal Monitoring
Mark Dixon
Page 8
Fetal Monitoring
Mark Dixon
Page 9
Fetal Monitoring
Mark Dixon
Page 10
Physical Procedure Demo
Mark Dixon
Page 11
General Procedures (what?)
• Group of ordered instructions
• Identified by unique name
• Almost all computer code procedures
– mirror real life procedures:
• performing calculations (e.g. tax, student load)
• drawing (e.g. figures in games, graphs of grades)
Mark Dixon
Page 12
General Procedures (why?)
• Code reuse:
same code used in many places
(reduces duplication)
• Break up long code:
large chunks of code are difficult to
understand and maintain
Mark Dixon
Page 13
General Procedures (how)
• Definition:
Sub name()
statementblock
End Sub
• Call:
name
Mark Dixon
Page 14
Procedures
Mark Dixon
Page 15
Example: Hotel Rooms v3
Option Explicit
Dim Cost
Dim vat
Dim TotalCost
Sub Calculate()
Cost = txtRooms.value * txtNights.value * 48.50
vat = cost * 0.175
TotalCost = Cost + vat
lblCost.innertext = "£" & Cost
lblVat.innertext = "£" & vat
lblTotCost.innertext = "£" & TotalCost
End Sub
Sub window_OnLoad()
Calculate
End Sub
• Shorter
(21 lines)
• Easier to
change
Mark Dixon
Sub txtRooms_OnKeyUp()
Calculate
End Sub
Duplicate
Calls,
not Code
Sub txtNights_OnKeyUp()
Calculate
End Sub
Page 16
Questions: Procedures
• Write a line of code that calls the following
procedure:
Sub Thing()
x = 24
End Sub
Thing
• Add lines of code around the following code
to define a procedure:
Sub PositionShip()
imgShip.style.pixeltop = 100
imgShip.style.pixelleft = 500
End Sub
Mark Dixon
Page 17
Example: Face – Analysis
SPECIFICATION
• User Requirements
– need to help children learn about shapes and
drawing simple cartoon animals
• Software Requirements
– Functional:
–should be able to construct simple cartoon
animal, by selecting options for characteristics
(e.g. ear shape)
– Non-functional
should be fun and easy to use
Mark Dixon
Page 18
Example: Face v1 (design)
<html>
<head><title>Face</title></head>
<body style="margin: 0px">
<img id=imgEarL src=EarRoundSml.gif style="position: absolute;" />
<img id=imgEarR src=EarRoundSml.gif style="position: absolute;" />
<img id=imgHead src=Head.gif
style="position: absolute;" />
<img id=imgEyes src=EyesOpen.gif style="position: absolute;" />
<img id=imgNose src=Nose.gif
style="position: absolute;" />
<img id=imgMouth src=Mouth.gif
style="position: absolute;" />
<img id=imgWiskL src=Wiskers.gif style="position: absolute;" />
<img id=imgWiskR src=Wiskers.gif style="position: absolute;" />
<div id=divMenu style="background-color: Green;"><center><table border=1><tr>
<td align=center>EYES<br />
<input id=optOpen type=radio name=eyes checked />Open
<input id=optClosed type=radio name=eyes />Closed
<td align=center>EARS<br />
<input id=optCir type=radio name=ears checked />Circle
<input id=optTri type=radio name=ears />Triangle
<input id=optEll type=radio name=ears />Ellipse
</tr></table><button id=btnDraw>Draw</button></center></div>
</body>
</html>
Mark Dixon
Page 19
Example: Face v1 (algorithm)
• To position/draw cartoon animal:
– place head in centre of page
– place nose in centre of head
– place mouth below nose
– place eyes above nose
– select eyes open/closed image
– place ears at top of head spaced apart
– select ears shape image (triangle, circle, ellipse)
Mark Dixon
Page 20
Example: Face v1 (code)
Option Explicit
Sub btnDraw_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Mark Dixon
1 + 33 lines
Page 21
Example: Face v1.5 (design)
Mark Dixon
Page 22
Example: Face v1.5
• Copy code to each event
procedure:
– windows_OnLoad
– optOpen
– optClose
– optCir
– optTri
– optEll
• total lines – 199
(1 + 33 * 6)
Mark Dixon
Option Explicit
Sub window_OnLoad()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub optOpen_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub optClosed_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub optCir_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub optTri_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub optEll_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Page 23
Example: Face v2
Option Explicit
• Create general
procedure:
– PositionFace
• Used by all event
procedures:
– windows_OnLoad
– optOpen, optClose
– optCir, optTri, optEll
• total lines – 52
(1 + 33 + 3 * 6)
Mark Dixon
Sub PositionFace()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub window_OnLoad()
PositionFace
End Sub
Sub optOpen_OnClick()
PositionFace
End Sub
Sub optClosed_OnClick()
PositionFace
End Sub
Sub optCir_OnClick()
PositionFace
End Sub
Sub optTri_OnClick()
PositionFace
End Sub
Sub optEll_OnClick()
PositionFace
End Sub
Page 24
Option Explicit
Sub window_OnLoad()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub optOpen_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub optClosed_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Face v1.5 and v2
Option Explicit
Sub PositionFace()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub window_OnLoad()
PositionFace
End Sub
Sub optOpen_OnClick()
PositionFace
End Sub
Sub optClosed_OnClick()
PositionFace
End Sub
Sub optCir_OnClick()
PositionFace
End Sub
Sub optTri_OnClick()
PositionFace
End Sub
v1.5
199 lines
Sub optEll_OnClick()
PositionFace
End Sub
v2
52 lines
Sub optCir_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub optTri_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Sub optEll_OnClick()
Dim m
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Mark Dixon
Page 25
Example: Face v3
Sub PositionFace()
Head
Nose
Mouth
Eyes
Ears
End Sub
• Split
PositionFace
into smaller
procedures
• increases number
of lines
• makes code easier
to understand and
change
Mark Dixon
Sub Head()
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
End Sub
Sub Nose()
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
End Sub
Sub Mouth()
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
End Sub
Sub Eyes()
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
End Sub
Sub Ears()
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Page 26
Module Hierarchy Charts
Sub PositionFace()
Head
Nose
Mouth
Eyes
Ears
End Sub
Sub Head()
imgHead.style.pixelleft = (document.body.clientwidth - imgHead.width) / 2
imgHead.style.pixeltop = (document.body.clientheight) / 1.8
m = imgHead.style.pixelleft + imgHead.width / 2
End Sub
Sub Nose()
imgNose.style.pixelleft = m - imgNose.width / 2
imgNose.style.pixeltop = imgHead.style.pixeltop + imgHead.height / 2 - imgNose.height / 2
End Sub
Sub Mouth()
imgMouth.style.pixelleft = imgNose.style.pixelleft
imgMouth.style.pixeltop = imgNose.style.pixeltop + imgNose.height
End Sub
Sub Eyes()
imgEyes.style.pixelleft = m - imgEyes.width / 2
imgEyes.style.pixeltop = imgNose.style.pixeltop - imgEyes.height
If optClosed.checked Then
imgEyes.src = "EyesClosed.gif"
Else
imgEyes.src = "EyesOpen.gif"
End If
End Sub
Position Face
Head Nose
Mark Dixon
Mouth Eyes Ears
Sub Ears()
imgEarL.style.pixelleft = m - imgEarL.width
imgEarL.style.pixeltop = (imgEyes.style.pixeltop + imgEyes.height / 2) - imgEarR.height
imgEarR.style.pixelleft = m
imgEarR.style.pixeltop = imgEarL.style.pixeltop
If optTri.checked Then
imgEarL.src = "EarTriangle.gif"
imgEarR.src = "EarTriangle.gif"
Else
If optEll.checked Then
imgEarL.src = "EarLong.gif"
imgEarR.src = "EarLong.gif"
Else
imgEarL.src = "EarRound.gif"
imgEarR.src = "EarRound.gif"
End If
End If
End Sub
Page 27
Example: Face v4
• Add facility to display whiskers:
Mark Dixon
Page 28
Fetal Monitoring
Mark Dixon
Page 29
Tutorial Exercises: Hotel Rooms
• Task 1: Get the Hotel Rooms example versions 1, 2, and 3 (from the
lecture) working.
• Task 2: Modify your code – to give the result 0 if the user enters a
negative number for either number of rooms or number of nights.
Mark Dixon
Page 30
Tutorial Exercises: Face
• Task 1: Get the Face examples versions 1,2, and 3 (from the lecture)
working.
• Task 2: Look at the If statement that controls the selection of the ear
image – can you see a way to reduce the number of lines of code?
• Task 3: Add the ability to display whiskers (v4).
Mark Dixon
Page 31