# 12 Procedures Mark Dixon 1 Session Aims Objectives

• Slides: 30

12 – Procedures Mark Dixon 1

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 2

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 3

Example: Hotel Rooms v 1 Option Explicit Sub btn. Calc_on. Click() Dim Cost Dim vat Dim Total. Cost = txt. Rooms. value * txt. Nights. value * 48. 50 vat = cost * 0. 175 Total. Cost = Cost + vat lbl. Cost. inner. Text = "£" & Cost lbl. Vat. inner. Text = "£" & vat lbl. Tot. Cost. inner. Text = "£" & Total. Cost End Sub result of operations should be visible immediately! Shneiderman 1998, p. 205 Mark Dixon 4

Example: Hotel Rooms v 2 Option Explicit Dim Cost Dim vat Dim Total. Cost • Much longer (28 lines) • More work to change Mark Dixon Sub window_on. Load() Cost = txt. Rooms. value * txt. Nights. value * 48. 50 vat = cost * 0. 175 Total. Cost = Cost + vat lbl. Cost. inner. Text = "£" & Cost lbl. Vat. inner. Text = "£" & vat lbl. Tot. Cost. inner. Text = "£" & Total. Cost End Sub Duplicate Sub txt. Rooms_on. Key. Up() Cost = txt. Rooms. value * txt. Nights. value * 48. 50 vat = cost * 0. 175 Total. Cost = Cost + vat lbl. Cost. inner. Text = "£" & Cost lbl. Vat. inner. Text = "£" & vat lbl. Tot. Cost. inner. Text = "£" & Total. Cost End Sub Duplicate Sub txt. Nights_on. Key. Up() Cost = txt. Rooms. value * txt. Nights. value * 48. 50 vat = cost * 0. 175 Total. Cost = Cost + vat lbl. Cost. inner. Text = "£" & Cost lbl. Vat. inner. Text = "£" & vat lbl. Tot. Cost. inner. Text = "£" & Total. Cost End Sub Duplicate 28 lines 5

Large Programs • Real programs get very large • Exponential increase in effort Mark Dixon 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) 6

Fetal Monitoring l a i t n e C Mark Dixon d i f n o 7

Fetal Monitoring l a i t n e C Mark Dixon d i f n o 8

Fetal Monitoring l a i t n e C Mark Dixon d i f n o 9

Physical Procedure Demo Mark Dixon 10

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 11

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

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

Procedures Mark Dixon 14

Example: Hotel Rooms v 3 Option Explicit Sub window_on. Load() Calculate End Sub txt. Rooms_on. Key. Up() Calculate End Sub Duplicate Calls, not Code Sub txt. Nights_on. Key. Up() Calculate End Sub • Shorter (21 lines) • Easier to change Mark Dixon Sub Calculate() Dim Cost Dim vat Dim Total. Cost = txt. Rooms. value * txt. Nights. value * 48. 50 vat = cost * 0. 175 Total. Cost = Cost + vat lbl. Cost. inner. Text = "£" & Cost lbl. Vat. inner. Text = "£" & vat lbl. Tot. Cost. inner. Text = "£" & Total. Cost End Sub 15

Questions: Procedures • Write a line of code that calls the following procedure: Sub Thing() x = 24 End Sub Thing • Add lines of code around the following code to define a procedure: Sub Position. Ship() img. Ship. style. pos. Top = 100 img. Ship. style. pos. Left = 500 End Sub Mark Dixon 16

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 17

Example: Face v 1 (design) <html> <head><title>Face</title></head> <body style="margin: 0 px"> <img id="img. Ear. L" src="Ear. Round. Sml. gif" style="position: absolute; " /> <img id="img. Ear. R" src="Ear. Round. Sml. gif" style="position: absolute; " /> <img id="img. Head" src="Head. gif" style="position: absolute; " /> <img id="img. Eyes" src="Eyes. Open. gif" style="position: absolute; " /> <img id="img. Nose" src="Nose. gif" style="position: absolute; " /> <img id="img. Mouth" src="Mouth. gif" style="position: absolute; " /> <div id="div. Menu" style="background-color: Green; "><center><table border="1"><tr> <td align="center">EYES <input id="opt. Open" type="radio" name="eyes" checked />Open <input id="opt. Closed" type="radio" name="eyes" />Closed <td align="center">EARS <input id="opt. Cir" type="radio" name="ears" checked />Circle <input id="opt. Tri" type="radio" name="ears" />Triangle <input id="opt. Ell" type="radio" name="ears" />Ellipse </tr></table><input id="btn. Draw" type="button" value="Draw" /></center> </div> </body> </html> Mark Dixon 18

Example: Face v 1 (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 19

Example: Face v 1 (code) Option Explicit Sub btn. Draw_on. Click() Dim m img. Head. style. pos. Left = (document. body. client. Width - img. Head. width) / 2 img. Head. style. pos. Top = (document. body. client. Height) / 1. 8 m = img. Head. style. pos. Left + img. Head. width / 2 img. Nose. style. pos. Left = m - img. Nose. width / 2 img. Nose. style. pos. Top = img. Head. style. pos. Top + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pos. Left = img. Nose. style. pos. Left img. Mouth. style. pos. Top = img. Nose. style. pos. Top + img. Nose. height img. Eyes. style. pos. Left = m - img. Eyes. width / 2 img. Eyes. style. pos. Top = img. Nose. style. pos. Top - img. Eyes. height If opt. Closed. checked Then img. Eyes. src = "Eyes. Closed. gif" Else img. Eyes. src = "Eyes. Open. gif" End If img. Ear. L. style. pos. Left = m - img. Ear. L. width img. Ear. L. style. pos. Top = (img. Eyes. style. pos. Top + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pos. Left = m img. Ear. R. style. pos. Top = img. Ear. L. style. pos. Top If opt. Tri. checked Then img. Ear. L. src = "Ear. Triangle. gif" img. Ear. R. src = "Ear. Triangle. gif" Else If opt. Ell. checked Then img. Ear. L. src = "Ear. Long. gif" img. Ear. R. src = "Ear. Long. gif" Else img. Ear. L. src = "Ear. Round. gif" img. Ear. R. src = "Ear. Round. gif" End If End Sub Mark Dixon 1 + 33 lines 20

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

Example: Face v 2 Option Explicit • Create general procedure: – Position. Face • Used by all event procedures: – windows_on. Load – opt. Open, opt. Close – opt. Cir, opt. Tri, opt. Ell • total lines – 52 (1 + 33 + 3 * 6) Mark Dixon Sub window_on. Load() Position. Face End Sub opt. Open_on. Click() Position. Face End Sub opt. Closed_on. Click() Position. Face End Sub opt. Cir_on. Click() Position. Face End Sub opt. Tri_on. Click() Position. Face End Sub opt. Ell_on. Click() Position. Face End Sub Position. Face() Dim m img. Head. style. pos. Left = (document. body. client. Width - img. Head. width) / 2 img. Head. style. pos. Top = (document. body. client. Height) / 1. 8 m = img. Head. style. pos. Left + img. Head. width / 2 img. Nose. style. pos. Left = m - img. Nose. width / 2 img. Nose. style. pos. Top = img. Head. style. pos. Top + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pos. Left = img. Nose. style. pos. Left img. Mouth. style. pos. Top = img. Nose. style. pos. Top + img. Nose. height img. Eyes. style. pos. Left = m - img. Eyes. width / 2 img. Eyes. style. pos. Top = img. Nose. style. pos. Top - img. Eyes. height If opt. Closed. checked Then img. Eyes. src = "Eyes. Closed. gif" Else img. Eyes. src = "Eyes. Open. gif" End If img. Ear. L. style. pos. Left = m - img. Ear. L. width img. Ear. L. style. pos. Top = (img. Eyes. style. pos. Top + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pos. Left = m img. Ear. R. style. pos. Top = img. Ear. L. style. pos. Top If opt. Tri. checked Then img. Ear. L. src = "Ear. Triangle. gif" img. Ear. R. src = "Ear. Triangle. gif" Else If opt. Ell. checked Then img. Ear. L. src = "Ear. Long. gif" img. Ear. R. src = "Ear. Long. gif" Else img. Ear. L. src = "Ear. Round. gif" img. Ear. R. src = "Ear. Round. gif" End If End Sub 23