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

Slides:

Advertisements

Similar presentations

Mark Dixon Page 1 23 – Object Oriented Programming in PhP.

Advertisements

Mark Dixon, SoCCE SOFT 131Page 1 15 – Object Oriented Analysis, Design, and Programming.

Mark Dixon, SoCCE SOFT 131Page 1 22 – Object Oriented Analysis, Design, and Programming.

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, SoCCE SOFT 131Page 1 09 – Procedures.

Mark Dixon Page 1 22 – Object Oriented Programming in ASP.

Mark Dixon, SoCCE SOFT 131Page 1 22 – Visual BASIC 2005.

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

Mark Dixon, SoCCE SOFT 136Page 1 05 – Conditional Execution.

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

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, SoCCE SOFT 136Page 1 11 – User Defined Functions.

Mark Dixon, SoCCE SOFT 131Page 1 13 – Object Oriented Analysis, Design, and Programming.

Mark Dixon, SoCCE SOFT 131Page 1 07 – Iterative Execution.

Mark Dixon Page 1 13 – Coursework 2 Debrief: Spanish Words.

Mark Dixon, SoCCE SOFT 131Page 1 06 – Iteration. Mark Dixon, SoCCE SOFT 131Page 2 Session Aims & Objectives Aims –Revise Variables and Conditional execution.

Mark Dixon, SoCCE SOFT 131Page 1 13 – Coursework 2 Debrief: Numbers Game.

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, SoCCE SOFT 131Page 1 03 – Debugging & Graphics.

Mark Dixon, SoCCE SOFT 131Page 1 06 – Iteration. Mark Dixon, SoCCE SOFT 131Page 2 Session Aims & Objectives Aims –To introduce the main concepts involved.

Mark Dixon Page 1 22 – Problem Solving. Mark Dixon Page 2 Session Aims & Objectives Aims –to provide a more explicit understanding of problem solving.

Mark Dixon, SoCCE SOFT 131Page 1 19 – Procedure Parameters.

Mark Dixon Page 1 21 – Object Oriented Programming in ASP.

Mark Dixon, SoCCE SOFT 131Page 1 08 – Procedures.

CIS101 Introduction to Computing Week 11. Agenda Your questions Copy and Paste Assignment Practice Test JavaScript: Functions and Selection Lesson 06,

Mark Dixon, SoCCE SOFT 131Page 1 02 – Software Development Lifecycle, & User Interface Design.

Mark Dixon, SoCCE SOFT 131Page 1 08 – Iterative Execution.

Mark Dixon Page 1 02 – Queries: Query by Example.

Mark Dixon Page 1 13 – Object Oriented Programming.

Mark Dixon, SoCCE SOFT 131Page 1 03 – Debugging, Sound, and Graphics.

Mark Dixon Page 1 22 – Coursework 2 Debrief: Phonics.

Mark Dixon, SoCCE SOFT 131Page 1 05 – Information Processing: Data-types, Variables, Operators & Functions.

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 Page 1 10 – Iterative Execution. Mark Dixon Page 2 Questions: Variables Write a line of code to declare a variable called h Write a line of.

02 – Client-side code: JavaScript

Mark Dixon Page 1 24 – Object Oriented Programming in ASP.

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 09 – Arrays. Mark Dixon Page 2 Questions: Loops What is the value of t, after this code executes? t = 0 For x = 4 To 6 t = t + x Next.

Mark Dixon, SoCCE SOFT 136Page 1 9 – Procedures. Mark Dixon, SoCCE SOFT 136Page 2 Session Aims & Objectives Aims –To introduce the main concepts involved.

Mark Dixon 1 05 – Conditional Execution. Mark Dixon 2 Admin: Test (next week) In class test –teaching week 6 50 minutes short answer (5 - 6 words) currently.

Mark Dixon 1 11 – Array Variables. Mark Dixon 2 Questions: Loops What is the value of t, after this code executes? t = 0 For x = 4 To 6 t = t + x Next.

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, SoCCE SOFT 131Page 1 05 – Variables. Mark Dixon, SoCCE SOFT 131Page 2 Admin: Test (next week) In class test –teaching week 6 –university week.

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

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.

B065: PROGRAMMING Sub Procedures I. Starter  Identify the separate tasks to be performed in the programming task below (break it down into numbered sections).

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

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.

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, SoCCE SOFT 131Page 1 16 – Visual BASIC 6.0.

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

Mark Dixon 1 9 – Case Study. Mark Dixon 2 Session Aims and Objectives Aims –To give an overview of the development of a web-page from initial idea to.

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 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 SOFT 131Page 1 12 – Object Oriented Analysis, Design, and Programming.

Mark Dixon 1 22 – Object Oriented Programming. Mark Dixon 2 Questions: Databases How many primary keys? How many foreign keys? 3 2.

Mark Dixon Page 1 15 – Structured Programming. Mark Dixon Page 2 Admin: Coursework 3 – Test In class test –9 Feb 2010 –2 Feb 2010: revision (technique)

Mark Dixon Page 1 04 – Conditional Execution. Mark Dixon Page 2 Questions: Expressions a)What is the result of: 10 * Int( ) b)How many functions.

Mark Dixon, SoCCE SOFT 131Page 1 17 – Procedures.

Mark Dixon 1 15 – Structured Programming. Mark Dixon 2 Admin: Test 2 In class test –11 Feb 2014 –4 Feb 2014: revision (technique) session 50 mins short.

Mark Dixon 1 13 – Parameters. Mark Dixon 2 Question: Arrays How many array variables are in the following code: Dim x Dim y Dim f(4) x = 12 y = 6 f(2)

Mark Dixon, School of Computing SOFT 120Page 1 1. User Defined Procedures.

Mark Dixon Page 1 09 – Iterative Execution. Mark Dixon Page 2 Questions: Variables Write a line of VBScript code to declare a variable called h Write.

Multi-Selection If-elsif Statement.  In fact, it’s everything in between  Yesterday we learned how to add a control statement that gave us two path.

Mark Dixon, SoCCE SOFT 131Page 1 03 – Conditional Execution.

11 – Procedures.

15 – Structured Programming

12 – Object Oriented Programming

17 – Modular Design in ASP.

08 – Iterative Execution.

Presentation transcript:

Mark Dixon Page 1 10 – Procedures

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

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

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

Mark Dixon Page 5 Example: Hotel Rooms v2 Option Explicit Dim Cost Dim vat Dim TotalCost Sub window_onLoad() Cost = txtRooms.value * txtNights.value * vat = cost * TotalCost = Cost + vat lblCost.innerText = "£" & Cost lblVat.innerText = "£" & vat lblTotCost.innerText = "£" & TotalCost End Sub Sub txtRooms_onKeyUp() Cost = txtRooms.value * txtNights.value * vat = cost * TotalCost = Cost + vat lblCost.innerText = "£" & Cost lblVat.innerText = "£" & vat lblTotCost.innerText = "£" & TotalCost End Sub Sub txtNights_onKeyUp() Cost = txtRooms.value * txtNights.value * vat = cost * TotalCost = Cost + vat lblCost.innerText = "£" & Cost lblVat.innerText = "£" & vat lblTotCost.innerText = "£" & TotalCost End Sub Duplicate 28 lines Much longer (28 lines) More work to change

Mark Dixon Page 6 Large Programs Real programs get very large Exponential increase in effort AB CD 1 (A) 3 (A, B, AB) 6 (A, B, C, AB, AC, BC) 10 (A, B, C, D, AB, AC, BC, AD, BD, CD)

Mark Dixon Page 7 Fetal Monitoring Confidential

Mark Dixon Page 8 Fetal Monitoring Confidential

Mark Dixon Page 9 Fetal Monitoring Confidential

Mark Dixon Page 10 Physical Procedure Demo

Mark Dixon Page 11 General Procedures (what?) Group of ordered instructions Identified by unique name Almost all computer code procedures –mirror real life procedures: performing calculations (e.g. tax, student load) drawing (e.g. figures in games, graphs of grades)

Mark Dixon Page 12 General Procedures (why?) Code reuse: same code used in many places (reduces duplication) Break up long code: large chunks of code are difficult to understand and maintain

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

Mark Dixon Page 14 Procedures

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

Mark Dixon Page 16 Questions: Procedures Write a line of code that calls the following procedure: Sub Thing() x = 24 End Sub Add lines of code around the following code to define a procedure: imgShip.style.posTop = 100 imgShip.style.posLeft = 500 Thing Sub PositionShip() End Sub

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

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

Mark Dixon Page 19 Example: Face v1 (algorithm) To position/draw cartoon animal: –place head in centre of page –place nose in centre of head –place mouth below nose –place eyes above nose –select eyes open/closed image –place ears at top of head spaced apart –select ears shape image (triangle, circle, ellipse)

Mark Dixon Page 20 Example: Face v1 (code) Option Explicit Sub btnDraw_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub lines

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

Mark Dixon Page 22 Example: Face v1.5 Option Explicit Sub window_onLoad() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub optOpen_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub optClosed_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub optCir_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub optTri_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub optEll_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Copy code to each event procedure: –windows_onLoad –optOpen –optClose –optCir –optTri –optEll total lines – 199 ( * 6)

Mark Dixon Page 23 Example: Face v2 Option Explicit Sub window_onLoad() PositionFace End Sub Sub optOpen_onClick() PositionFace End Sub Sub optClosed_onClick() PositionFace End Sub Sub optCir_onClick() PositionFace End Sub Sub optTri_onClick() PositionFace End Sub Sub optEll_onClick() PositionFace End Sub Sub PositionFace() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Create general procedure: –PositionFace Used by all event procedures: –windows_onLoad –optOpen, optClose –optCir, optTri, optEll total lines – 52 ( * 6)

Mark Dixon Page 24 Face v1.5 and v2 Option Explicit Sub window_onLoad() PositionFace End Sub Sub optOpen_onClick() PositionFace End Sub Sub optClosed_onClick() PositionFace End Sub Sub optCir_onClick() PositionFace End Sub Sub optTri_onClick() PositionFace End Sub Sub optEll_onClick() PositionFace End Sub Sub PositionFace() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Option Explicit Sub window_onLoad() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub optOpen_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub optClosed_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub optCir_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub optTri_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub optEll_onClick() Dim m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub v lines v2 52 lines

Mark Dixon Page 25 Example: Face v3 Sub Head () imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 End Sub Sub Nose () imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 End Sub Sub Mouth () imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height End Sub Sub Eyes () imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If End Sub Sub Ears () imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub PositionFace() Head Nose Mouth Eyes Ears End Sub Split PositionFace into smaller procedures increases number of lines makes code easier to understand and change

Mark Dixon Page 26 Module Hierarchy Charts Sub Head() imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 m = imgHead.style.posLeft + imgHead.width / 2 End Sub Sub Nose() imgNose.style.posLeft = m - imgNose.width / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 End Sub Sub Mouth() imgMouth.style.posLeft = imgNose.style.posLeft imgMouth.style.posTop = imgNose.style.posTop + imgNose.height End Sub Sub Eyes() imgEyes.style.posLeft = m - imgEyes.width / 2 imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height If optClosed.checked Then imgEyes.src = "EyesClosed.gif" Else imgEyes.src = "EyesOpen.gif" End If End Sub Sub Ears() imgEarL.style.posLeft = m - imgEarL.width imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop If optTri.checked Then imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarTriangle.gif" Else If optEll.checked Then imgEarL.src = "EarLong.gif" imgEarR.src = "EarLong.gif" Else imgEarL.src = "EarRound.gif" imgEarR.src = "EarRound.gif" End If End Sub Sub PositionFace() Head Nose Mouth Eyes Ears End Sub Position Face EyesNoseMouthEarsHead

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

Mark Dixon Page 28 Fetal Monitoring Confidential

Mark Dixon Page 29 Tutorial Exercises: Hotel Rooms Task 1: Get the Hotel Rooms example versions 1, 2, and 3 (from the lecture) working. Task 2: Modify your code – to give the result 0 if the user enters a negative number for either number of rooms or number of nights.

Mark Dixon Page 30 Tutorial Exercises: Face Task 1: Get the Face examples versions 1,2, and 3 (from the lecture) working. Task 2: Look at the If statement that controls the selection of the ear image – can you see a way to reduce the number of lines of code? Task 3: Add the ability to display whiskers (v4).