390 likes | 501 Views
7 – Procedures. Coursework 1 (Test) - Results. Score (max 50). Student Number. Classification is for guidance only. Please feel free to come and discuss your results with me. Coursework 1 (Test) - Debrief. Range of marks normal Failure rate quite high – 26% (10 / 39)
E N D
Coursework 1 (Test) - Results Score (max 50) StudentNumber Classification is for guidance only Please feel free to come and discuss your results with me
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
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)
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
The 'Software Crisis' • failure of software: • late • over budget • does not work • inaccurate (consistently incorrect) • unreliable (only works sometimes) • difficult to change
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
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
Good Software: How • Thoroughly tested • Short • Clearly laid out • indentation • good variable and object names • Re-use code • Documented • …
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
Inefficient Code • duplication in both branches of if If weight > 2.2 Then x = 5 x = 5Else x = 5 End If • unused variable declarationsDim x Dim xDim y x = 5 x = 5 • redundant (nil effect) lines of codex = 23 x = 5 x = 5
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-functionalshould be quick and easy to use
Example: Hotel Rooms v1 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 result of operations should be visible immediately!Shneiderman 1998, p. 205
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 • Much longer (28 lines) • More work to change Duplicate Duplicate Duplicate 28 lines
Large Programs • Real programs get very large • Exponential increase in effort 1 (A) A B 3 (A, B, AB) 6 (A, B, C, AB, AC, BC) C D 10 (A, B, C, D, AB, AC, BC, AD, BD, CD)
Fetal Monitoring Confidential
Fetal Monitoring Confidential
Fetal Monitoring Confidential
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)
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
General Procedures (how) • Definition:Subname()StatementblockEndSub • Call:name
Example: Hotel Rooms v3 DuplicateCalls,not Code Option Explicit Dim Cost Dim vat Dim 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 = "£" & TotalCost End Sub Sub window_OnLoad() Calculate End Sub Sub txtRooms_OnKeyUp() Calculate End Sub Sub txtNights_OnKeyUp() Calculate End Sub • Shorter(21 lines) • Easier to change
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
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-functionalshould be fun and easy to use
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>
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)
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
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 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)
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 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)
Face v1.5 and v2 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 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 v1.5 199 lines v2 52 lines
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 • SplitPositionFaceinto smaller procedures • increases number of lines • makes code easier to understand and change Sub PositionFace() Head Nose Mouth Eyes Ears End Sub
Module Hierarchy Charts Position Face Head Nose Mouth Eyes Ears 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
Example: Face v4 • Add facility to display whiskers:
Fetal Monitoring Confidential
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.
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).