Upload File

mark dixon 1 12 – procedures. mark dixon 2 session aims & objectives aims –to introduce the...

  • Home
  • Documents
  • Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with
30
Mark Dixon 1 12 – Procedures

Upload: candice-mcgee

Post on 18-Jan-2016

223 views

Category:

Documents


0 download

Report

TRANSCRIPT

Page 1: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 1

12 – Procedures

Page 2: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 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

Page 3: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 3

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

Page 4: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 4

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.2 TotalCost = Cost + vat parCost.innerText = "£" & Cost parVat.innerText = "£" & vat parTotCost.innerText = "£" & TotalCostEnd Sub

Page 5: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 5

Example: Hotel Rooms v2Option ExplicitDim CostDim vatDim TotalCost

Sub window_onLoad() Cost = txtRooms.value * txtNights.value * 48.50 vat = cost * 0.2 TotalCost = Cost + vat parCost.innerText = "£" & Cost parVat.innerText = "£" & vat parTotCost.innerText = "£" & TotalCostEnd Sub

Sub txtRooms_onKeyUp() Cost = txtRooms.value * txtNights.value * 48.50 vat = cost * 0.2 TotalCost = Cost + vat parCost.innerText = "£" & Cost parVat.innerText = "£" & vat parTotCost.innerText = "£" & TotalCostEnd Sub

Sub txtNights_onKeyUp() Cost = txtRooms.value * txtNights.value * 48.50 vat = cost * 0.2 TotalCost = Cost + vat parCost.innerText = "£" & Cost parVat.innerText = "£" & vat parTotCost.innerText = "£" & TotalCostEnd Sub

Duplicate

Duplicate

Duplicate

• Much longer (28 lines)

• More work to change

Page 6: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 6

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)

Page 7: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 7

Fetal Monitoring

Confidentia

l

Page 8: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 8

Fetal Monitoring

Confidentia

l

Page 9: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 9

Fetal Monitoring

Confidentia

l

Page 10: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 10

Physical Procedure Demo

Page 11: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 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)

Page 12: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 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

Page 13: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 13

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

• Call: name

Page 14: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 14

Procedures

Page 15: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 15

Option Explicit

Sub window_onLoad() CalculateEnd Sub

Sub txtRooms_onKeyUp() CalculateEnd Sub

Sub txtNights_onKeyUp() CalculateEnd Sub

Sub Calculate()Dim CostDim vatDim TotalCost Cost = txtRooms.value * txtNights.value * 48.50 vat = cost * 0.2 TotalCost = Cost + vat parCost.innerText = "£" & Cost parVat.innerText = "£" & vat parTotCost.innerText = "£" & TotalCostEnd Sub

Example: Hotel Rooms v3

DuplicateCalls,not Code

• Shorter(21 lines)

• Easier to change

Page 16: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 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

Page 17: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 17

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

Page 18: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 18

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;" />

<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><input id="btnDraw" type="button" value="Draw" /></center> </div> </body></html>

Page 19: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 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)

Page 20: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 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 If End Sub 1 + 33 lines

Page 21: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 21

Example: Face v1.5 (design)

Immediate response – good!

Page 22: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 22

Example: Face v1.5Option 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 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 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 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 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 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 If End Sub

• Copy code to each event procedure:– window_onLoad– optOpen– optClose– optCir– optTri– optEll

• total lines – 199 (1 + 33 * 6)

Page 23: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 23

Example: Face v2Option 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 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)

Page 24: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 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 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 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 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 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 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 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 If End Sub

v1.5199 lines

v252 lines

Page 25: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 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 If End Sub

Sub PositionFace() Head Nose Mouth Eyes Ears End Sub

• PositionFacesplit into smaller procedures

• increases number of lines

• makes code easier to understand and change

Page 26: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 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 If End Sub

Sub PositionFace() Head Nose Mouth Eyes Ears End Sub

Position Face

EyesNose Mouth EarsHead

Page 27: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 27

Example: Face v4• Add facility to display whiskers:

Page 28: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

Mark Dixon 28

Fetal Monitoring

Confidentia

l

Page 29: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

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

Page 30: Mark Dixon 1 12 – Procedures. Mark Dixon 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions, to deal with

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


Mark Dixon Page 1 06 – Expression Builder. Mark Dixon Page 2 Session Aims & Objectives Aims –To use expressions to perform more complex calculations in

Mark Dixon Page 1 20 – Modular Design in ASP. Mark Dixon Page 2 Session Aims & Objectives Aims –Highlight modular design techniques in ASP Objectives,

Mark Dixon Page 1 7 – Procedures. Mark Dixon Page 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions,

Mark Dixon Page 1 SOFT131 / Tech043 01 – Module Introduction

Mark Dixon, SoCCE SOFT 131Page 1 03 – Debugging & Graphics

Mark Dixon Page 1 07 – Reports. Mark Dixon Page 2 Session Aims & Objectives Aims –To use reports to produce more readable documents Objectives, by end

Mark Dixon 1 06 – JSP Databases: Multiple Tables

Mark Dixon Page 1 Tech043 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile

Mark Dixon Page 1 13 – Object Oriented Programming

Mark Dixon Page 1 05 – Constants and Variables. Mark Dixon Page 2 Admin: Test (next week) In class test –teaching week 6 50 minutes short answer (5 -

Mark Dixon 1 21 – Databases: Multiple Tables. Mark Dixon 2 Questions: Databases How many records are in the following table? How many fields does the

Mark Dixon Page 1 12 – Functions and Modules. Mark Dixon Page 2 Questions: Parameters Name a parameter in the following code: Sub Move(ByRef obj, ByVal

Mark Dixon 1 08 – Variables. Mark Dixon 2 Questions: Conditional Execution What is the result of (txtFah.value is 50): (txtFah.value >= 40) What will

Mark Dixon Page 1 08 – Variables. Mark Dixon Page 2 Questions: Conditional Execution What is the result of (txtFah.value is 50): (txtFah.value >= 40)

Mark Dixon 1 21 – Databases: Multiple Tables and Writing Data

Mark Dixon 1 14 – Functions and Modules. Mark Dixon 2 Questions: Parameters Consider the following code: Sub Move(ByRef obj, ByVal dist) obj.style.posLeft

Mark Dixon 1 09 – Java Servlets. Mark Dixon 2 Session Aims & Objectives Aims –To cover a range of web-application design techniques Objectives, by end

Mark Dixon Page 1 04 – Database Design: Forms. Mark Dixon Page 2 Session Aims & Objectives Aims –To allow easier data entry using forms Objectives, by

Mark Dixon Page 1 10 – Procedures. Mark Dixon Page 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions,

Mark Dixon Page 1 SOFT 136 01 – Module Introduction

Mark Dixon 1 07 – Variables. Mark Dixon 2 Questions: Conditional Execution What is the result of (txtFah.value is 50): (txtFah.value >= 40) What will

Mark Dixon Page 1 04 – Data Types. Mark Dixon Page 2 Admin: On-line Quiz

Mark Dixon, SoCCE SOFT 131Page 1 7 – Procedures. Mark Dixon, SoCCE SOFT 131Page 2 Coursework 1 (Test) - Results Student Number Score (max 50) Classification

Mark Dixon 1 05 – JSP Databases: Multiple Tables

Mark Dixon Page 1 04 – Information Processing: Expressions, Operators & Functions

Mark Dixon Page 1 Soft131 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile

Mark Dixon Page 1 03 – Dynamic HTML (client-side scripting)

Mark Dixon, SoCCE SOFT 131Page 1 04 – Conditional Execution

Mark Dixon Page 1 Tech043 01 – Module Introduction

Mark Dixon 1 03 – Information Processing. Mark Dixon 2 Questions: Events Consider the following code: a) How many unique events does it contain? b) Name

M Dixon 1 Web-Application Development Workshop. M Dixon 2 Session Aims & Objectives Aims –to introduce the main concepts involved in creating web-applications

Mark Dixon Page 1 8 – Procedures. Mark Dixon Page 2 Session Aims & Objectives Aims –To introduce the main concepts involved in grouping instructions,

Mark Dixon Page 1 02 – Queries: Query by Example

Mark Dixon 1 12 – Java Beans. Mark Dixon 2 Session Aims & Objectives Aims –To cover the use of Java Beans Objectives, by end of this week’s sessions,

Mark Dixon Page 1 05 – Database Design: Sub-forms