mark dixon page 1 8 – procedures. mark dixon page 2 session aims & objectives aims –to...
TRANSCRIPT
Mark Dixon Page 1
8 – Procedures
Mark Dixon Page 2
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 3
Inefficient Code• duplication in both branches of if
If weight > 2.2 Then x = 5 x = 5 Else x = 5 End If
• unused variable declarationsDim x Dim xDim y x = 5 x = 5
• redundant (nil effect) lines of code x = 23 x = 5 x = 5
Mark Dixon Page 4
Example: Hotel Rooms – AnalysisSPECIFICATION
• 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 5
Example: Hotel Rooms v1
result of operations should be visible immediately!Shneiderman 1998, p. 205
Option Explicit
Sub btnCalc_OnClick()Dim CostDim vatDim TotalCost Cost = txtRooms.value * txtNights.value * 48.50 vat = cost * 0.175 TotalCost = Cost + vat lblCost.innertext = "£" & Cost lblVat.innertext = "£" & vat lblTotCost.innertext = "£" & TotalCostEnd Sub
Mark Dixon Page 6
Example: Hotel Rooms v2Option ExplicitDim CostDim vatDim TotalCost
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 = "£" & TotalCostEnd Sub
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 = "£" & TotalCostEnd Sub
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 = "£" & TotalCostEnd Sub
Duplicate
Duplicate
Duplicate
28 lines
• Much longer (28 lines)
• More work to change
Mark Dixon Page 7
Large Programs• Real programs get very large
• Exponential increase in effort
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)
Mark Dixon Page 8
Fetal Monitoring
Confidentia
l
Mark Dixon Page 9
Fetal Monitoring
Confidentia
l
Mark Dixon Page 10
Fetal Monitoring
Confidentia
l
Mark Dixon Page 11
Physical Procedure Demo
Mark Dixon Page 12
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 13
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 14
General Procedures (how)• Definition: Sub name() statementblock End Sub
• Call: name
Mark Dixon Page 15
Procedures
Mark Dixon Page 16
Option ExplicitDim CostDim vatDim 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 = "£" & TotalCostEnd Sub
Sub window_OnLoad() CalculateEnd Sub
Sub txtRooms_OnKeyUp() CalculateEnd Sub
Sub txtNights_OnKeyUp() CalculateEnd Sub
Example: Hotel Rooms v3
DuplicateCalls,not Code• Shorter
(21 lines)
• Easier to change
Mark Dixon Page 17
Questions: Procedures• Write a line of code that calls the following
procedure: Sub Thing()
x = 24
End Sub
• Add lines of code around the following code to define a procedure:
imgShip.style.pixeltop = 100
imgShip.style.pixelleft = 500
Thing
Sub PositionShip()
End Sub
Mark Dixon Page 18
Example: Face – AnalysisSPECIFICATION
• 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-functionalshould be fun and easy to use
Mark Dixon Page 19
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 20
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 21
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 1 + 33 lines
Mark Dixon Page 22
Example: Face v1.5 (design)
Mark Dixon Page 23
Example: Face v1.5Option 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
• Copy code to each event procedure:– windows_OnLoad– optOpen– optClose– optCir– optTri– optEll
• total lines – 199 (1 + 33 * 6)
Mark Dixon Page 24
Example: Face v2Option 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
Sub optEll_OnClick() PositionFace End Sub
• 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 Page 25
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
Sub optEll_OnClick() PositionFace End Sub
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
v1.5199 lines
v252 lines
Mark Dixon Page 26
Example: Face v3 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
Sub PositionFace() Head Nose Mouth Eyes Ears End Sub
• SplitPositionFaceinto smaller procedures
• increases number of lines
• makes code easier to understand and change
Mark Dixon Page 27
Module Hierarchy Charts 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
Sub PositionFace() Head Nose Mouth Eyes Ears End Sub
Position Face
EyesNose Mouth EarsHead
Mark Dixon Page 28
Example: Face v4• Add facility to display whiskers:
Mark Dixon Page 29
Fetal Monitoring
Confidentia
l
Mark Dixon Page 30
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 31
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).