7 Procedures Mark Dixon So CCE SOFT 131
- Slides: 39
7 – Procedures Mark Dixon, So. CCE SOFT 131 Page 1
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 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 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 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 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 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 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 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 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 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 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 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 • 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 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 i f n o SOFT 131 Page 16
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 i f n o SOFT 131 Page 18
Physical Procedure Demo Mark Dixon, So. CCE SOFT 131 Page 19
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 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 Dixon, So. CCE SOFT 131 Page 22
Procedures Mark Dixon, So. CCE SOFT 131 Page 23
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 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 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. 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 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. 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 • 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 • 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. 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 • 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 - 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 SOFT 131 Page 36
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, 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 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
- Mark dixon artist
- Mark dixon
- Cce+
- Cce upea
- Cornell cooperative extension chautauqua county
- Development of cce
- Cce curriculum
- Digital diary cce
- Cce.upea
- Cce adecco relax
- Cce 2332
- What is cce
- George washington dixon
- Jefferson dixon campus
- Paul dixon smu
- Potky
- Dixon montessori charter school
- Gda school
- Jennifer dixon car accident
- Karen k dixon
- Grafico de dixon
- David dixon ubc
- Dixon swivel joints
- Circulacion vegetal
- Spreidingsbreedte
- Boy does nothing
- A mason dixon memory
- Dixon case study
- Psalm 131 vers 4
- Mis 131
- Salmo 131 2
- Violetta cavalli-sforza
- The ascent humble
- Cmpe 131 sjsu
- Art. 131 cpc
- Cmsc131
- Cse 131
- Mis 131
- Pp 131
- Aia 131