Mark Dixon, SoCCE SOFT 131Page 1 7 – Procedures

Mark Dixon, SoCCE SOFT 131Page 2 Coursework 1 (Test) - Results Student Number Score (max 50) Classification is for guidance only Please feel free to come and discuss your results with me

Mark Dixon, SoCCE SOFT 131Page 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 131Page 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) sqr(b)

Mark Dixon, SoCCE SOFT 131Page 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 131Page 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 131Page 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 131Page 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 131Page 9 Good Software: How Thoroughly tested Short Clearly laid out –indentation –good variable and object names Re-use code Documented …

Mark Dixon, SoCCE SOFT 131Page 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 131Page 11 Inefficient Code duplication in both branches of if If weight > 2.2 Then x = 5x = 5 Else x = 5 End If unused variable declarations Dim xDim x Dim yx = 5 x = 5 redundant (nil effect) lines of code x = 23x = 5 x = 5

Mark Dixon, SoCCE SOFT 131Page 12 Example: Hotel Rooms – Analysis SPECIFICATION User Requirements –need to allow potential hotel customers to calculate the cost of a given number of rooms for a given duration Software Requirements –Functional: –User should be able to enter number of rooms and duration –cost, vat and total cost should be calculated –Non-functional should be quick and easy to use

Mark Dixon, SoCCE SOFT 131Page 13 Example: Hotel Rooms v1 result of operations should be visible immediately! Shneiderman 1998, p. 205 Option Explicit Sub btnCalc_OnClick() Dim Cost Dim vat Dim TotalCost Cost = txtRooms.value * txtNights.value * vat = cost * TotalCost = Cost + vat lblCost.innertext = "£" & Cost lblVat.innertext = "£" & vat lblTotCost.innertext = "£" & TotalCost End Sub

Mark Dixon, SoCCE SOFT 131Page 14 Example: Hotel Rooms v2 Option Explicit Dim Cost Dim vat Dim TotalCost Sub window_OnLoad() Cost = txtRooms.value * txtNights.value * vat = cost * TotalCost = Cost + vat lblCost.innertext = "£" & Cost lblVat.innertext = "£" & vat lblTotCost.innertext = "£" & TotalCost End Sub Sub txtRooms_OnKeyUp() Cost = txtRooms.value * txtNights.value * vat = cost * TotalCost = Cost + vat lblCost.innertext = "£" & Cost lblVat.innertext = "£" & vat lblTotCost.innertext = "£" & TotalCost End Sub Sub txtNights_OnKeyUp() Cost = txtRooms.value * txtNights.value * vat = cost * TotalCost = Cost + vat lblCost.innertext = "£" & Cost lblVat.innertext = "£" & vat lblTotCost.innertext = "£" & TotalCost End Sub Duplicate 28 lines Much longer (28 lines) More work to change

Mark Dixon, SoCCE SOFT 131Page 15 Large Programs Real programs get very large Exponential increase in effort AB CD 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 131Page 16 Fetal Monitoring Confidential

Mark Dixon, SoCCE SOFT 131Page 17 Fetal Monitoring Confidential

Mark Dixon, SoCCE SOFT 131Page 18 Fetal Monitoring Confidential

Mark Dixon, SoCCE SOFT 131Page 19 Physical Procedure Demo

Mark Dixon, SoCCE SOFT 131Page 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 131Page 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 131Page 22 General Procedures (how) Definition: Sub name() Statementblock End Sub Call: name

Mark Dixon, SoCCE SOFT 131Page 23 Procedures

Mark Dixon, SoCCE SOFT 131Page 24 Option Explicit Dim Cost Dim vat Dim TotalCost Sub Calculate() Cost = txtRooms.value * txtNights.value * vat = cost * TotalCost = Cost + vat lblCost.innertext = "£" & Cost lblVat.innertext = "£" & vat lblTotCost.innertext = "£" & TotalCost End Sub Sub window_OnLoad() Calculate End Sub Sub txtRooms_OnKeyUp() Calculate End Sub Sub txtNights_OnKeyUp() Calculate End Sub Example: Hotel Rooms v3 Duplicate Calls, not Code Shorter (21 lines) Easier to change

Mark Dixon, SoCCE SOFT 131Page 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 131Page 26 Example: Face – Analysis SPECIFICATION User Requirements –need to help children learn about shapes and drawing simple cartoon animals Software Requirements –Functional: –should be able to construct simple cartoon animal, by selecting options for characteristics (e.g. ear shape) –Non-functional should be fun and easy to use

Mark Dixon, SoCCE SOFT 131Page 27 Example: Face v1 (design) Face EYES Open Closed EARS Circle Triangle Ellipse Draw

Mark Dixon, SoCCE SOFT 131Page 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 131Page 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 Sub lines

Mark Dixon, SoCCE SOFT 131Page 30 Example: Face v1.5 (design)

Mark Dixon, SoCCE SOFT 131Page 31 Example: Face v1.5 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 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 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 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 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 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 Sub Copy code to each event procedure: –windows_OnLoad –optOpen –optClose –optCir –optTri –optEll total lines – 199 ( * 6)

Mark Dixon, SoCCE SOFT 131Page 32 Example: Face 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 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 ( * 6)

Mark Dixon, SoCCE SOFT 131Page 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 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 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 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 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 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 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 Sub v lines v2 52 lines

Mark Dixon, SoCCE SOFT 131Page 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 Sub Sub PositionFace() Head Nose Mouth Eyes Ears End Sub Split PositionFace into smaller procedures increases number of lines makes code easier to understand and change

Mark Dixon, SoCCE SOFT 131Page 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 Sub Sub PositionFace() Head Nose Mouth Eyes Ears End Sub Position Face EyesNoseMouthEarsHead

Mark Dixon, SoCCE SOFT 131Page 36 Example: Face v4 Add facility to display whiskers:

Mark Dixon, SoCCE SOFT 131Page 37 Fetal Monitoring Confidential

Mark Dixon, SoCCE SOFT 131Page 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 131Page 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).