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