Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with.

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