11 – Procedures
Assignment: Chinese Numbers Issue Date: Friday 4th December 2009 Due Date: Friday 22nd January 2010 17:00 (on-line) Return Date: Monday 1st March 2010 Weighting: 25% of the coursework mark This is an individual assignment.
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
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
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
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
Large Programs Real programs get very large Exponential increase in effort 1 (A) A B 3 (A, B, AB) 6 (A, B, C, AB, AC, BC) C D 10 (A, B, C, D, AB, AC, BC, AD, BD, CD)
Fetal Monitoring Confidential
Fetal Monitoring Confidential
Fetal Monitoring Confidential
Physical Procedure Demo
General Procedures (what?) Group of ordered instructions Identified by unique name Almost all computer code procedures mirror real life procedures: performing calculations (e.g. tax, student load) drawing (e.g. figures in games, graphs of grades)
General Procedures (why?) Code reuse: same code used in many places (reduces duplication) Break up long code: large chunks of code are difficult to understand and maintain
General Procedures (how) Definition: function name(){ statementblock } Call: name();
Procedures
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
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(){ }
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
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>
Example: Face v1 (algorithm) To position/draw cartoon animal: place head in centre of page place nose in centre of head place mouth below nose place eyes above nose select eyes open/closed image place ears at top of head spaced apart select ears shape image (triangle, circle, ellipse)
Example: Face v1 (code) 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
Example: Face v1.5 (design) Immediate response – good!
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 – 198 (33 * 6)
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 – 51 (33 + 3 * 6)
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
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
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
Example: Face v4 Add facility to display whiskers:
Fetal Monitoring Confidential
Tutorial Exercises: Hotel Rooms Task 1: Get the Hotel Rooms example versions 1, 2, and 3 (from the lecture) working. Task 2: Modify your code – to give the result 0 if the user enters a negative number for either number of rooms or number of nights.
Tutorial Exercises: Face Task 1: Get the Face examples versions 1,2, and 3 (from the lecture) working. Task 2: Look at the If statement that controls the selection of the ear image – can you see a way to reduce the number of lines of code? Task 3: Add the ability to display whiskers (v4).