7 Procedures Mark Dixon So CCE SOFT 131

  • Slides: 39
Download presentation
7 – Procedures Mark Dixon, So. CCE SOFT 131 Page 1

7 – Procedures Mark Dixon, So. CCE SOFT 131 Page 1

Coursework 1 (Test) - Results Student Number Score (max 50) Classification is for guidance

Coursework 1 (Test) - Results Student Number Score (max 50) Classification is for guidance only Please feel free to come and discuss your results with me Mark Dixon, So. CCE SOFT 131 Page 2

Coursework 1 (Test) - Debrief • Range of marks normal • Failure rate quite

Coursework 1 (Test) - Debrief • Range of marks normal • Failure rate quite high – 26% (10 / 39) – not unusual for this module – recoverable if corrective action is taken • Please feel free to discuss marks in tutorial Mark Dixon, So. CCE SOFT 131 Page 3

Coursework 1 (Test) – Problems • Answer question: – Name a variable: Dim x

Coursework 1 (Test) – Problems • Answer question: – Name a variable: Dim x x • Conditional expressions: x>4 – used in if statements: If pic. Main. height < 0 Then • Parameters – data given to functions: x = Int(34. 56) + 34. 56 + sqr(b) Mark Dixon, So. CCE SOFT 131 Page 4

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, So. CCE SOFT 131 Page 5

The 'Software Crisis' • failure of software: – late – over budget – does

The 'Software Crisis' • failure of software: – late – over budget – does not work • inaccurate (consistently incorrect) • unreliable (only works sometimes) – difficult to change Mark Dixon, So. CCE SOFT 131 Page 6

Software Engineering • Response to failure of software (1968) • Specifications – describe what

Software Engineering • Response to failure of software (1968) • Specifications – describe what software should do • acts as ‘to do’ list for developer • acts as contract between developer and user • Functional decomposition – break down problem into smaller chunks • Incremental Development – do a bit at a time • Modular design Mark Dixon, So. CCE SOFT 131 Page 7

Good Software: Aim • • • Reliable Accurate Robust (to external failures) Easy to

Good Software: Aim • • • Reliable Accurate Robust (to external failures) Easy to understand code Easy to maintain (change) code … • Useful • Easy to use • Easy to learn Mark Dixon, So. CCE SOFT 131 Page 8

Good Software: How • Thoroughly tested • Short • Clearly laid out – indentation

Good Software: How • Thoroughly tested • Short • Clearly laid out – indentation – good variable and object names • Re-use code • Documented • … Mark Dixon, So. CCE SOFT 131 Page 9

Algorithms & Pseudo-code • Algorithm = sequence of instructions to solve a Making a

Algorithms & Pseudo-code • Algorithm = sequence of instructions to solve a Making a cup of tea: specific problem 1. Fill the kettle with water 2. Plug the kettle in 3. Switch the kettle on 4. Wait for the kettle to boil 5. Put a tea bag into the cup 6. Add sugar to the cup 7. Add milk to the cup 8. Stir 9. Take the tea bag out • e. g. Swap contents of two text boxes – need temporary store • put box. A in temp • put box. B in box. A • put temp in box. B Mark Dixon, So. CCE SOFT 131 Page 10

Inefficient Code • duplication in both branches of if If weight > 2. 2

Inefficient Code • duplication in both branches of if If weight > 2. 2 Then x=5 Else x=5 End If • unused variable declarations Dim x Dim y x=5 • redundant (nil effect) lines of code x = 23 x=5 Mark Dixon, So. CCE SOFT 131 x=5 Dim x x=5 Page 11

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, So. CCE SOFT 131 Page 12

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. innertext = "£" & Cost lbl. Vat. innertext = "£" & vat lbl. Tot. Cost. innertext = "£" & Total. Cost End Sub result of operations should be visible immediately! Shneiderman 1998, p. 205 Mark Dixon, So. CCE SOFT 131 Page 13

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, So. CCE Sub window_On. Load() Cost = txt. Rooms. value * txt. Nights. value * 48. 50 vat = cost * 0. 175 Total. Cost = Cost + vat lbl. Cost. innertext = "£" & Cost lbl. Vat. innertext = "£" & vat lbl. Tot. Cost. innertext = "£" & 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. innertext = "£" & Cost lbl. Vat. innertext = "£" & vat lbl. Tot. Cost. innertext = "£" & 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. innertext = "£" & Cost lbl. Vat. innertext = "£" & vat lbl. Tot. Cost. innertext = "£" & Total. Cost End Sub Duplicate SOFT 131 28 lines Page 14

Large Programs • Real programs get very large • Exponential increase in effort A

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

Fetal Monitoring l a i t n e C Mark Dixon, So. CCE d

Fetal Monitoring l a i t n e C Mark Dixon, So. CCE d i f n o SOFT 131 Page 16

Fetal Monitoring l a i t n e C Mark Dixon, So. CCE d

Fetal Monitoring l a i t n e C Mark Dixon, So. CCE d i f n o SOFT 131 Page 17

Fetal Monitoring l a i t n e C Mark Dixon, So. CCE d

Fetal Monitoring l a i t n e C Mark Dixon, So. CCE d i f n o SOFT 131 Page 18

Physical Procedure Demo Mark Dixon, So. CCE SOFT 131 Page 19

Physical Procedure Demo Mark Dixon, So. CCE SOFT 131 Page 19

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, So. CCE SOFT 131 Page 20

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, So. CCE SOFT 131 Page 21

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, So. CCE SOFT 131 Page 22

Procedures Mark Dixon, So. CCE SOFT 131 Page 23

Procedures Mark Dixon, So. CCE SOFT 131 Page 23

Example: Hotel Rooms v 3 Option Explicit Dim Cost Dim vat Dim Total. Cost

Example: Hotel Rooms v 3 Option Explicit Dim Cost Dim vat Dim Total. Cost Sub Calculate() Cost = txt. Rooms. value * txt. Nights. value * 48. 50 vat = cost * 0. 175 Total. Cost = Cost + vat lbl. Cost. innertext = "£" & Cost lbl. Vat. innertext = "£" & vat lbl. Tot. Cost. innertext = "£" & Total. Cost End Sub window_On. Load() Calculate End Sub • Shorter (21 lines) • Easier to change Mark Dixon, So. CCE Sub txt. Rooms_On. Key. Up() Calculate End Sub Duplicate Calls, not Code Sub txt. Nights_On. Key. Up() Calculate End Sub SOFT 131 Page 24

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. pixeltop = 100 img. Ship. style. pixelleft = 500 End Sub Mark Dixon, So. CCE SOFT 131 Page 25

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, So. CCE SOFT 131 Page 26

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; " /> <img id=img. Wisk. L src=Wiskers. gif style="position: absolute; " /> <img id=img. Wisk. R src=Wiskers. 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><button id=btn. Draw>Draw</button></center></div> </body> </html> Mark Dixon, So. CCE SOFT 131 Page 27

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, So. CCE SOFT 131 Page 28

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. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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, So. CCE SOFT 131 1 + 33 lines Page 29

Example: Face v 1. 5 (design) Mark Dixon, So. CCE SOFT 131 Page 30

Example: Face v 1. 5 (design) Mark Dixon, So. CCE SOFT 131 Page 30

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 Sub window_On. Load() Dim m img. Head. style. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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 • total lines – 199 (1 + 33 * 6) Mark Dixon, So. CCE Option Explicit Sub opt. Ell_On. Click() Dim m img. Head. style. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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 SOFT 131 Page 31

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, So. CCE SOFT 131 Sub Position. Face() Dim m img. Head. style. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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 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 Page 32

Option Explicit Sub window_On. Load() Dim m img. Head. style. pixelleft = (document. body.

Option Explicit Sub window_On. Load() Dim m img. Head. style. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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 Position. Face() Dim m img. Head. style. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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 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 v 1. 5 199 lines v 2 52 lines Sub opt. Ell_On. Click() Position. Face End Sub opt. Cir_On. Click() Dim m img. Head. style. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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, So. CCE SOFT 131 Page 33

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, So. CCE Sub Head() img. Head. style. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 End Sub Nose() img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 End Sub Mouth() img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height End Sub Eyes() img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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 SOFT 131 Page 34

Module Hierarchy Charts Sub Head() img. Head. style. pixelleft = (document. body. clientwidth -

Module Hierarchy Charts Sub Head() img. Head. style. pixelleft = (document. body. clientwidth - img. Head. width) / 2 img. Head. style. pixeltop = (document. body. clientheight) / 1. 8 m = img. Head. style. pixelleft + img. Head. width / 2 End Sub Position. Face() Head Nose Mouth Eyes Ears End Sub Nose() img. Nose. style. pixelleft = m - img. Nose. width / 2 img. Nose. style. pixeltop = img. Head. style. pixeltop + img. Head. height / 2 - img. Nose. height / 2 End Sub Mouth() img. Mouth. style. pixelleft = img. Nose. style. pixelleft img. Mouth. style. pixeltop = img. Nose. style. pixeltop + img. Nose. height End Sub Eyes() img. Eyes. style. pixelleft = m - img. Eyes. width / 2 img. Eyes. style. pixeltop = img. Nose. style. pixeltop - 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, So. CCE Mouth Eyes Ears Sub Ears() img. Ear. L. style. pixelleft = m - img. Ear. L. width img. Ear. L. style. pixeltop = (img. Eyes. style. pixeltop + img. Eyes. height / 2) - img. Ear. R. height img. Ear. R. style. pixelleft = m img. Ear. R. style. pixeltop = img. Ear. L. style. pixeltop 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 SOFT 131 Page 35

Example: Face v 4 • Add facility to display whiskers: Mark Dixon, So. CCE

Example: Face v 4 • Add facility to display whiskers: Mark Dixon, So. CCE SOFT 131 Page 36

Fetal Monitoring l a i t n e C Mark Dixon, So. CCE d

Fetal Monitoring l a i t n e C Mark Dixon, So. CCE d i f n o SOFT 131 Page 37

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, So. CCE SOFT 131 Page 38

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, So. CCE SOFT 131 Page 39