Mark Dixon, SoCCE SOFT 131 Page 1

7 – Procedures

Mark Dixon, SoCCE SOFT 131 Page 2

Coursework 1 (Test) - Results

StudentNumber

Score(max 50)

216289 44.510075079 43.0

10082072 19.5 10035504 29.0 10045645 41.010071676 18.5 10036952 28.5 10019304 34.5 10051079 40.510101919 16.5 10086038 27.5 10093510 34.5 10014401 39.010038146 16.0 10099536 27.5 343723 33.0 10062098 38.510099594 13.0 10097680 24.5 10091631 26.5 10070577 33.0 10054245 38.510057087 11.5 326380 24.5 10059136 26.0 10048195 32.0 10023090 38.0

273711 10.5 10031844 23.5 10066498 25.5 10025023 31.5 10083797 36.010078048 7.0 245666 20.5 384901 25.5 10069895 31.0 10042593 35.5

<40% (fail) <50% (3) <60% (2:2) <70% (2:1) >=70% (1)

Classification is for guidance only

Please feel free to come and discuss your results with me

Mark Dixon, SoCCE SOFT 131 Page 3

Coursework 1 (Test) - Debrief• Range of marks normal

• Failure rate quite high – 26% (10 / 39)– not unusual for this module– recoverable if corrective action is taken

• Please feel free to discuss marks in tutorial

Mark Dixon, SoCCE SOFT 131 Page 4

Coursework 1 (Test) – Problems• Answer question:

– Name a variable: Dim x x

• Conditional expressions: x > 4– used in if statements:

If picMain.height < 0 Then

• Parameters – data given to functions: x = Int(34.56) + 34.56 + sqr(b)

Mark Dixon, SoCCE SOFT 131 Page 5

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, SoCCE SOFT 131 Page 6

The 'Software Crisis'• failure of software:

– late– over budget– does not work

• inaccurate (consistently incorrect)• unreliable (only works sometimes)

– difficult to change

Mark Dixon, SoCCE SOFT 131 Page 7

Software Engineering• Response to failure of software (1968)

• Specifications– describe what software should do

• acts as ‘to do’ list for developer• acts as contract between developer and user

• Functional decomposition– break down problem into smaller chunks

• Incremental Development– do a bit at a time

• Modular design

Mark Dixon, SoCCE SOFT 131 Page 8

Good Software: Aim• Reliable• Accurate• Robust (to external failures)• Easy to understand code• Easy to maintain (change) code• …

• Useful• Easy to use• Easy to learn

Mark Dixon, SoCCE SOFT 131 Page 9

Good Software: How• Thoroughly tested

• Short

• Clearly laid out– indentation– good variable and object names

• Re-use code

• Documented

• …

Mark Dixon, SoCCE SOFT 131 Page 10

Algorithms & Pseudo-code• Algorithm = sequence of instructions to solve a

specific problem

• e.g. Swap contents of two text boxes– need temporary store

• put boxA in temp• put boxB in boxA• put temp in boxB

Making a cup of tea: 1. Fill the kettle with water 2. Plug the kettle in 3. Switch the kettle on 4. Wait for the kettle to boil 5. Put a tea bag into the cup 6. Add sugar to the cup 7. Add milk to the cup 8. Stir 9. Take the tea bag out

Mark Dixon, SoCCE SOFT 131 Page 11

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, SoCCE SOFT 131 Page 12

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, SoCCE SOFT 131 Page 13

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, SoCCE SOFT 131 Page 14

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, SoCCE SOFT 131 Page 15

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, SoCCE SOFT 131 Page 16

Fetal Monitoring

Confidentia

l

Mark Dixon, SoCCE SOFT 131 Page 17

Fetal Monitoring

Confidentia

l

Mark Dixon, SoCCE SOFT 131 Page 18

Fetal Monitoring

Confidentia

l

Mark Dixon, SoCCE SOFT 131 Page 19

Physical Procedure Demo

Mark Dixon, SoCCE SOFT 131 Page 20

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, SoCCE SOFT 131 Page 21

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, SoCCE SOFT 131 Page 22

General Procedures (how)• Definition: Sub name() Statementblock End Sub

• Call: name

Mark Dixon, SoCCE SOFT 131 Page 23

Procedures

Mark Dixon, SoCCE SOFT 131 Page 24

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, SoCCE SOFT 131 Page 25

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, SoCCE SOFT 131 Page 26

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, SoCCE SOFT 131 Page 27

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, SoCCE SOFT 131 Page 28

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, SoCCE SOFT 131 Page 29

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, SoCCE SOFT 131 Page 30

Example: Face v1.5 (design)

Mark Dixon, SoCCE SOFT 131 Page 31

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, SoCCE SOFT 131 Page 32

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, SoCCE SOFT 131 Page 33

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, SoCCE SOFT 131 Page 34

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, SoCCE SOFT 131 Page 35

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, SoCCE SOFT 131 Page 36

Example: Face v4• Add facility to display whiskers:

Mark Dixon, SoCCE SOFT 131 Page 37

Fetal Monitoring

Confidentia

l

Mark Dixon, SoCCE SOFT 131 Page 38

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, SoCCE SOFT 131 Page 39

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