12 Procedures Mark Dixon 1 Session Aims Objectives

  • Slides: 30
Download presentation
12 – Procedures Mark Dixon 1

12 – Procedures Mark Dixon 1

Session Aims & Objectives • Aims – To introduce the main concepts involved in

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

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

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

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

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

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

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

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

Physical Procedure Demo Mark Dixon 10

Physical Procedure Demo Mark Dixon 10

General Procedures (what? ) • Group of ordered instructions • Identified by unique name

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

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

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

Procedures Mark Dixon 14

Procedures Mark Dixon 14

Example: Hotel Rooms v 3 Option Explicit Sub window_on. Load() Calculate End Sub txt.

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

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

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.

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

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.

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 1. 5 (design) Immediate response – good! Mark Dixon 21

Example: Face v 1. 5 • Copy code to each event procedure: – windows_on.

Example: Face v 1. 5 • Copy code to each event procedure: – windows_on. Load – opt. Open – opt. Close – opt. Cir – opt. Tri – opt. Ell • total lines – 199 (1 + 33 * 6) Mark Dixon Option Explicit Sub window_on. Load() 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 opt. Open_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 opt. Closed_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 opt. Cir_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 opt. Tri_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 opt. Ell_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 22

Example: Face v 2 Option Explicit • Create general procedure: – Position. Face •

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

Option Explicit Sub window_on. Load() Dim m img. Head. style. pos. Left = (document.

Option Explicit Sub window_on. Load() 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 opt. Open_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 opt. Closed_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 Face v 1. 5 and v 2 Option Explicit 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 v 1. 5 199 lines v 2 52 lines 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 opt. Cir_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 opt. Tri_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 opt. Ell_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 24

Example: Face v 3 Sub Position. Face() Head Nose Mouth Eyes Ears End Sub

Example: Face v 3 Sub Position. Face() Head Nose Mouth Eyes Ears End Sub • Split Position. Face into smaller procedures • increases number of lines • makes code easier to understand change Mark Dixon Sub Head() 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 End Sub Nose() 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 End Sub Mouth() img. Mouth. style. pos. Left = img. Nose. style. pos. Left img. Mouth. style. pos. Top = img. Nose. style. pos. Top + img. Nose. height End Sub Eyes() 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 End Sub Ears() 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 25

Module Hierarchy Charts Sub Position. Face() Head Nose Mouth Eyes Ears End Sub Head()

Module Hierarchy Charts Sub Position. Face() Head Nose Mouth Eyes Ears End Sub Head() 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 End Sub Nose() 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 End Sub Mouth() img. Mouth. style. pos. Left = img. Nose. style. pos. Left img. Mouth. style. pos. Top = img. Nose. style. pos. Top + img. Nose. height End Sub Eyes() 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 End Sub Position Face Head Nose Mark Dixon Mouth Eyes Ears Sub Ears() 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 26

Example: Face v 4 • Add facility to display whiskers: Mark Dixon 27

Example: Face v 4 • Add facility to display whiskers: Mark Dixon 27

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

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

Tutorial Exercises: Hotel Rooms • Task 1: Get the Hotel Rooms example versions 1,

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 29

Tutorial Exercises: Face • Task 1: Get the Face examples versions 1, 2, and

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 (v 4). Mark Dixon 30