mark dixon 1 12 – procedures. mark dixon 2 session aims & objectives aims –to introduce the...
TRANSCRIPT
Mark Dixon 1
12 – Procedures
Mark Dixon 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 3
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 4
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.2 TotalCost = Cost + vat parCost.innerText = "£" & Cost parVat.innerText = "£" & vat parTotCost.innerText = "£" & TotalCostEnd Sub
Mark Dixon 5
Example: Hotel Rooms v2Option ExplicitDim CostDim vatDim TotalCost
Sub window_onLoad() Cost = txtRooms.value * txtNights.value * 48.50 vat = cost * 0.2 TotalCost = Cost + vat parCost.innerText = "£" & Cost parVat.innerText = "£" & vat parTotCost.innerText = "£" & TotalCostEnd Sub
Sub txtRooms_onKeyUp() Cost = txtRooms.value * txtNights.value * 48.50 vat = cost * 0.2 TotalCost = Cost + vat parCost.innerText = "£" & Cost parVat.innerText = "£" & vat parTotCost.innerText = "£" & TotalCostEnd Sub
Sub txtNights_onKeyUp() Cost = txtRooms.value * txtNights.value * 48.50 vat = cost * 0.2 TotalCost = Cost + vat parCost.innerText = "£" & Cost parVat.innerText = "£" & vat parTotCost.innerText = "£" & TotalCostEnd Sub
Duplicate
Duplicate
Duplicate
• Much longer (28 lines)
• More work to change
Mark Dixon 6
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 7
Fetal Monitoring
Confidentia
l
Mark Dixon 8
Fetal Monitoring
Confidentia
l
Mark Dixon 9
Fetal Monitoring
Confidentia
l
Mark Dixon 10
Physical Procedure Demo
Mark Dixon 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 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 13
General Procedures (how)• Definition: Sub name() statementblock End Sub
• Call: name
Mark Dixon 14
Procedures
Mark Dixon 15
Option Explicit
Sub window_onLoad() CalculateEnd Sub
Sub txtRooms_onKeyUp() CalculateEnd Sub
Sub txtNights_onKeyUp() CalculateEnd Sub
Sub Calculate()Dim CostDim vatDim TotalCost Cost = txtRooms.value * txtNights.value * 48.50 vat = cost * 0.2 TotalCost = Cost + vat parCost.innerText = "£" & Cost parVat.innerText = "£" & vat parTotCost.innerText = "£" & TotalCostEnd Sub
Example: Hotel Rooms v3
DuplicateCalls,not Code
• Shorter(21 lines)
• Easier to change
Mark Dixon 16
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.posTop = 100
imgShip.style.posLeft = 500
Thing
Sub PositionShip()
End Sub
Mark Dixon 17
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 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;" />
<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><input id="btnDraw" type="button" value="Draw" /></center> </div> </body></html>
Mark Dixon 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 20
Example: Face v1 (code)Option Explicit
Sub btnDraw_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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 21
Example: Face v1.5 (design)
Immediate response – good!
Mark Dixon 22
Example: Face v1.5Option Explicit
Sub window_onLoad() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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:– window_onLoad– optOpen– optClose– optCir– optTri– optEll
• total lines – 199 (1 + 33 * 6)
Mark Dixon 23
Example: Face v2Option Explicit
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
Sub PositionFace() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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
• 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 24
Face v1.5 and v2 Option Explicit
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
Sub PositionFace() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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
Option Explicit
Sub window_onLoad() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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 25
Example: Face v3 Sub Head() imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 End Sub
Sub Nose() imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 End Sub
Sub Mouth() imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height End Sub
Sub Eyes() imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If End Sub
Sub Ears() imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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
• PositionFacesplit into smaller procedures
• increases number of lines
• makes code easier to understand and change
Mark Dixon 26
Module Hierarchy Charts Sub Head() imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 End Sub
Sub Nose() imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 End Sub
Sub Mouth() imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height End Sub
Sub Eyes() imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If End Sub
Sub Ears() imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop 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 27
Example: Face v4• Add facility to display whiskers:
Mark Dixon 28
Fetal Monitoring
Confidentia
l
Mark Dixon 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 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).