Presentation is loading. Please wait.

Presentation is loading. Please wait.

11 – Procedures.

Published byMelinda Webb Modified over 6 years ago

Similar presentations

Presentation on theme: "11 – Procedures."— Presentation transcript:

1 11 – Procedures

2 Assignment: Chinese Numbers
Issue Date: Friday 4th December 2009 Due Date: Friday 22nd January :00 (on-line) Return Date: Monday 1st March 2010 Weighting: 25% of the coursework mark This is an individual assignment.

3 Session Aims and Objectives
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

4 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

5 Example: Hotel Rooms v1 function btnCalc_onClick(){ var Cost; var vat; var TotalCost; Cost = txtRooms.value * txtNights.value * 48.50; vat = Cost * 0.175; TotalCost = Cost + vat; lblCost.innerText = "£" + Cost; lblVat.innerText = "£" + vat; lblTotCost.innerText = "£" + TotalCost; } result of operations should be visible immediately! Shneiderman 1998, p. 205

6 Example: Hotel Rooms v2 Much longer (27 lines) More work to change
var Cost; var vat; var TotalCost; function window_onLoad(){ Cost = txtRooms.value * txtNights.value * 48.50; vat = Cost * 0.175; TotalCost = Cost + vat; lblCost.innerText = "£" + Cost; lblVat.innerText = "£" + vat; lblTotCost.innerText = "£" + TotalCost; } function txtRooms_onKeyUp(){ function txtNights_onKeyUp(){ Duplicate Duplicate Much longer (27 lines) More work to change Duplicate 27 lines

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

8 Fetal Monitoring Confidential

9 Fetal Monitoring Confidential

10 Fetal Monitoring Confidential

11 Physical Procedure Demo

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

13 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

14 General Procedures (how)
Definition: function name(){ statementblock } Call: name();

15 Procedures

16 Example: Hotel Rooms v3 Shorter (20 lines) Easier to change
function window_onLoad(){ Calculate(); } function txtRooms_onKeyUp(){ function txtNights_onKeyUp(){ function Calculate(){ var Cost; var vat; var TotalCost; Cost = txtRooms.value * txtNights.value * 48.50; vat = Cost * 0.175; TotalCost = Cost + vat; lblCost.innerText = "£" + Cost; lblVat.innerText = "£" + vat; lblTotCost.innerText = "£" + TotalCost; Duplicate Calls, not Code Shorter (20 lines) Easier to change

17 Questions: Procedures
Write a line of code that calls the following procedure: function Thing(){ x = 24; } Add lines of code around the following code to define a procedure: imgShip.style.posTop = 100; imgShip.style.posLeft = 500; Thing(); function PositionShip(){ }

18 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

19 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; text-align: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" /> </div> </body> </html>

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

21 Example: Face v1 (code) 33 lines function btnDraw_onClick(){ var 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){ imgEyes.src = "EyesClosed.gif"; }else{ imgEyes.src = "EyesOpen.gif"; } 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){ imgEarL.src = "EarTriangle.gif"; imgEarR.src = "EarTriangle.gif"; if (optEll.checked){ imgEarL.src = "EarLong.gif"; imgEarR.src = "EarLong.gif"; imgEarL.src = "EarRound.gif"; imgEarR.src = "EarRound.gif"; 33 lines

22 Example: Face v1.5 (design)
Immediate response – good!

23 Example: Face v1.5 Copy code to each event procedure:
function window_onLoad(){ m = imgHead.style.posLeft + imgHead.width / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 var m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgEyes.style.posLeft = m - imgEyes.width / 2 imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height }else{ imgEyes.src = "EyesClosed.gif" if (optClosed.checked){ imgEyes.src = "EyesOpen.gif" imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarL.style.posLeft = m - imgEarL.width } imgEarR.style.posTop = imgEarL.style.posTop imgEarR.src = "EarTriangle.gif" imgEarL.src = "EarTriangle.gif" if (optTri.checked){ if (optEll.checked){ imgEarL.src = "EarRound.gif" imgEarR.src = "EarLong.gif" imgEarL.src = "EarLong.gif" imgEarR.src = "EarRound.gif" function optOpen_onClick(){ function optClosed_onClick(){ function optCir_onClick(){ function optTri_onClick(){ function optEll_onClick(){ Copy code to each event procedure: windows_onLoad optOpen optClose optCir optTri optEll total lines – (33 * 6)

24 Example: Face v2 Create general procedure:
function window_onLoad(){ PositionFace(); } function optOpen_onClick(){ function optClosed_onClick(){ function optCir_onClick(){ function optTri_onClick(){ function optEll_onClick(){ function PositionFace(){ var 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){ imgEyes.src = "EyesClosed.gif"; }else{ imgEyes.src = "EyesOpen.gif"; 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){ imgEarL.src = "EarTriangle.gif"; imgEarR.src = "EarTriangle.gif"; if (optEll.checked){ imgEarL.src = "EarLong.gif"; imgEarR.src = "EarLong.gif"; imgEarL.src = "EarRound.gif"; imgEarR.src = "EarRound.gif"; Create general procedure: PositionFace Used by all event procedures: windows_onLoad optOpen, optClose optCir, optTri, optEll total lines – ( * 6)

25 Face v1.5 and v2 v1.5 v2 198 lines 51 lines function window_onLoad(){
m = imgHead.style.posLeft + imgHead.width / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 var m imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgEyes.style.posLeft = m - imgEyes.width / 2 imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgMouth.style.posLeft = imgNose.style.posLeft imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height }else{ imgEyes.src = "EyesClosed.gif" if (optClosed.checked){ imgEyes.src = "EyesOpen.gif" imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarR.style.posLeft = m imgEarL.style.posLeft = m - imgEarL.width } imgEarR.style.posTop = imgEarL.style.posTop imgEarR.src = "EarTriangle.gif" imgEarL.src = "EarTriangle.gif" if (optTri.checked){ if (optEll.checked){ imgEarL.src = "EarRound.gif" imgEarR.src = "EarLong.gif" imgEarL.src = "EarLong.gif" imgEarR.src = "EarRound.gif" function optOpen_onClick(){ function optClosed_onClick(){ function optCir_onClick(){ function optTri_onClick(){ function optEll_onClick(){ function PositionFace(){ var m m = imgHead.style.posLeft + imgHead.width / 2 imgHead.style.posTop = (document.body.clientHeight) / 1.8 imgHead.style.posLeft = (document.body.clientWidth - imgHead.width) / 2 imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2 imgNose.style.posLeft = m - imgNose.width / 2 imgEyes.style.posLeft = m - imgEyes.width / 2 imgMouth.style.posTop = imgNose.style.posTop + imgNose.height imgMouth.style.posLeft = imgNose.style.posLeft if (optClosed.checked){ imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height imgEyes.src = "EyesOpen.gif" }else{ imgEyes.src = "EyesClosed.gif" } imgEarR.style.posLeft = m imgEarR.style.posTop = imgEarL.style.posTop imgEarL.style.posTop = (imgEyes.style.posTop + imgEyes.height / 2) - imgEarR.height imgEarL.style.posLeft = m - imgEarL.width if (optTri.checked){ if (optEll.checked){ imgEarR.src = "EarTriangle.gif" imgEarL.src = "EarTriangle.gif" imgEarR.src = "EarLong.gif" imgEarL.src = "EarLong.gif" imgEarR.src = "EarRound.gif" imgEarL.src = "EarRound.gif" function window_onLoad(){ PositionFace function optOpen_onClick(){ function optClosed_onClick(){ function optCir_onClick(){ function optTri_onClick(){ function optEll_onClick(){ v1.5 198 lines v2 51 lines

26 Example: Face v3 Split PositionFace into smaller procedures
function 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; } function Nose(){ imgNose.style.posLeft = m - imgNose.width / 2; imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2; function Mouth(){ imgMouth.style.posLeft = imgNose.style.posLeft; imgMouth.style.posTop = imgNose.style.posTop + imgNose.height; function Eyes(){ imgEyes.style.posLeft = m - imgEyes.width / 2; imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height; if (optClosed.checked){ imgEyes.src = "EyesClosed.gif"; }else{ imgEyes.src = "EyesOpen.gif"; function 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){ imgEarL.src = "EarTriangle.gif"; imgEarR.src = "EarTriangle.gif"; if (optEll.checked){ imgEarL.src = "EarLong.gif"; imgEarR.src = "EarLong.gif"; imgEarL.src = "EarRound.gif"; imgEarR.src = "EarRound.gif"; function PositionFace(){ Head(); Nose(); Mouth(); Eyes(); Ears(); } Split PositionFace into smaller procedures increases number of lines makes code easier to understand and change

27 Module Hierarchy Charts
function 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; } function Nose(){ imgNose.style.posLeft = m - imgNose.width / 2; imgNose.style.posTop = imgHead.style.posTop + imgHead.height / 2 - imgNose.height / 2; function Mouth(){ imgMouth.style.posLeft = imgNose.style.posLeft; imgMouth.style.posTop = imgNose.style.posTop + imgNose.height; function Eyes(){ imgEyes.style.posLeft = m - imgEyes.width / 2; imgEyes.style.posTop = imgNose.style.posTop - imgEyes.height; if (optClosed.checked){ imgEyes.src = "EyesClosed.gif"; }else{ imgEyes.src = "EyesOpen.gif"; function 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){ imgEarL.src = "EarTriangle.gif"; imgEarR.src = "EarTriangle.gif"; if (optEll.checked){ imgEarL.src = "EarLong.gif"; imgEarR.src = "EarLong.gif"; imgEarL.src = "EarRound.gif"; imgEarR.src = "EarRound.gif"; function PositionFace(){ Head(); Nose(); Mouth(); Eyes(); Ears(); } Position Face Eyes Nose Mouth Ears Head

28 Example: Face v4 Add facility to display whiskers:

29 Fetal Monitoring Confidential

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

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

Download ppt "11 – Procedures."

Similar presentations

JAVA Coursework (the same for 2A and 2B). Fundamental Information The coursework is 30 marks in your O’Level = 15% of the exam Must be word processed.

JAVA Coursework (the same for 2A and 2B). Fundamental Information The coursework is 30 marks in your O’Level = 15% of the exam Must be word processed.
Mark Dixon Page 1 23 – Object Oriented Programming in PhP.

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

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

Mark Dixon, SoCCE SOFT 131Page 1 09 – Procedures.
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 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, SoCCE SOFT 131Page 1 07 – Iterative Execution.

Mark Dixon, SoCCE SOFT 131Page 1 07 – Iterative Execution.
Mark Dixon Page 1 13 – Coursework 2 Debrief: Spanish Words.

Mark Dixon Page 1 13 – Coursework 2 Debrief: Spanish Words.
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 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 08 – Procedures.

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,

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 08 – Iterative Execution.

Mark Dixon, SoCCE SOFT 131Page 1 08 – Iterative Execution.
Mark Dixon Page 1 13 – Object Oriented Programming.

Mark Dixon Page 1 13 – Object Oriented Programming.
Mark Dixon Page 1 22 – Coursework 2 Debrief: Phonics.

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

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

02 – Client-side code: JavaScript
Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.

Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.
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 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, SoCCE SOFT 136Page 1 9 – Procedures. Mark Dixon, SoCCE SOFT 136Page 2 Session Aims & Objectives Aims –To introduce the main concepts involved.

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

Similar presentations

Ads by Google