1. Mark Dixon Page 1 10 – Procedures

2. Mark Dixon Page 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with large programs. Objectives, by end of this week’s sessions, you should be able to: –define procedures, –call procedures, –identify repeated code suitable to be put into procedures

3. Mark Dixon Page 3 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

4. Mark Dixon Page 4 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 * 48.50 vat = cost * 0.175 TotalCost = Cost + vat lblCost.innerText = "£" & Cost lblVat.innerText = "£" & vat lblTotCost.innerText = "£" & TotalCost End Sub

5. Mark Dixon Page 5 Example: Hotel Rooms v2 Option Explicit Dim Cost Dim vat Dim 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 = "£" & TotalCost End 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 = "£" & TotalCost End 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 = "£" & TotalCost End Sub Duplicate 28 lines Much longer (28 lines) More work to change

6. Mark Dixon Page 6 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)

7. Mark Dixon Page 7 Fetal Monitoring Confidential

8. Mark Dixon Page 8 Fetal Monitoring Confidential

9. Mark Dixon Page 9 Fetal Monitoring Confidential

10. Mark Dixon Page 10 Physical Procedure Demo

11. Mark Dixon Page 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)

12. Mark Dixon Page 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

13. Mark Dixon Page 13 General Procedures (how) Definition: Sub name() statementblock End Sub Call: name

14. Mark Dixon Page 14 Procedures

15. Mark Dixon Page 15 Option Explicit Sub window_onLoad() Calculate End Sub Sub txtRooms_onKeyUp() Calculate End Sub Sub txtNights_onKeyUp() Calculate End Sub Sub Calculate() Dim Cost Dim vat Dim TotalCost Cost = txtRooms.value * txtNights.value * 48.50 vat = cost * 0.175 TotalCost = Cost + vat lblCost.innerText = "£" & Cost lblVat.innerText = "£" & vat lblTotCost.innerText = "£" & TotalCost End Sub Example: Hotel Rooms v3 Duplicate Calls, not Code Shorter (21 lines) Easier to change

16. Mark Dixon Page 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

17. Mark Dixon Page 17 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

18. Mark Dixon Page 18 Example: Face v1 (design) Face EYES Open Closed EARS Circle Triangle Ellipse

19. Mark Dixon Page 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)

20. Mark Dixon Page 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 Sub 1 + 33 lines

21. Mark Dixon Page 21 Example: Face v1.5 (design) Immediate response – good!

22. Mark Dixon Page 22 Example: Face v1.5 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 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 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 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 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 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 Sub Copy code to each event procedure: –windows_onLoad –optOpen –optClose –optCir –optTri –optEll total lines – 199 (1 + 33 * 6)

23. Mark Dixon Page 23 Example: Face 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 Sub Create general procedure: –PositionFace Used by all event procedures: –windows_onLoad –optOpen, optClose –optCir, optTri, optEll total lines – 52 (1 + 33 + 3 * 6)

24. Mark Dixon Page 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 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 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 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 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 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 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 Sub v1.5 199 lines v2 52 lines

25. Mark Dixon Page 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 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

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

27. Mark Dixon Page 27 Example: Face v4 Add facility to display whiskers:

28. Mark Dixon Page 28 Fetal Monitoring Confidential

29. Mark Dixon Page 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.

30. Mark Dixon Page 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).