8 Procedures Mark Dixon Page 1 Session Aims
- Slides: 31
8 – Procedures Mark Dixon Page 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 Page 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 x=5 Dim x x=5 Page 3
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 Page 4
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 Page 5
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. 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 28 lines Page 6
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) Page 7
Fetal Monitoring l a i t n e C Mark Dixon d i f n o Page 8
Fetal Monitoring l a i t n e C Mark Dixon d i f n o Page 9
Fetal Monitoring l a i t n e C Mark Dixon d i f n o Page 10
Physical Procedure Demo Mark Dixon Page 11
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 Page 12
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 Page 13
General Procedures (how) • Definition: Sub name() statementblock End Sub • Call: name Mark Dixon Page 14
Procedures Mark Dixon Page 15
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 Sub txt. Rooms_On. Key. Up() Calculate End Sub Duplicate Calls, not Code Sub txt. Nights_On. Key. Up() Calculate End Sub Page 16
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 Page 17
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 Page 18
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 Page 19
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 Page 20
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 1 + 33 lines Page 21
Example: Face v 1. 5 (design) Mark Dixon Page 22
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. 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 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 Page 23
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 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 24
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 Page 25
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. 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 Page 26
Module Hierarchy Charts Sub Position. Face() Head Nose Mouth Eyes Ears End 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 Position Face Head Nose Mark Dixon 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 Page 27
Example: Face v 4 • Add facility to display whiskers: Mark Dixon Page 28
Fetal Monitoring l a i t n e C Mark Dixon d i f n o Page 29
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 Page 30
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 Page 31
- Mark dixon
- Mark dixon artist
- Session aims
- Session aims
- Title page apa
- Paul dixon smu
- Grafico de dixon
- Dixon montessori charter school
- Dixon swivel joints
- Karen k dixon
- Dixon's q test
- Alesha dixon he does nothing
- David dixon ubc
- Circulacion vegetal
- George washington dixon
- Jefferson dixon campus
- A mason-dixon memory summary
- Thomas dixon the clansman
- Dixon case study
- Gda school
- Jennifer dixon accident
- Session mobility in mobile computing
- Lac session minutes sample
- Daily 10/4 keller williams
- Jeus session clustering
- Cosmos db consistency levels
- Eds/m
- Factor label definition
- Training session design
- Hkn review session
- Welcome to today's session
- Flow polar com start