06 Conditional Execution Mark Dixon Page 1 Admin
- Slides: 49
06 – Conditional Execution Mark Dixon Page 1
Admin: Test (next week) • In class test – teaching week 6 • 50 minutes • short answer (5 - 6 words max) • 25% of coursework mark Mark Dixon Page 2
Questions: Data Types a) What is the result of: String("George Boole"). sub. Str(4, 4) ge B b) What is put in lbl. Res? txt. Pet. Name. value = "George" lbl. Res. inner. Text = String(txt. Pet. Name. value). slice(3, 6) rge c) What is put in lbl. Res? txt. Pet. Name. value = "George" lbl. Res. inner. Text = String("txt. Pet. Name"). sub. Str(0, 3) txt Mark Dixon Page 3
Session Aims & Objectives • Aims – to introduce the main concepts involved in getting the computer to act differently under different circumstances • Objectives, by end of this week’s sessions, you should be able to: – evaluate and generate conditional expressions – use conditional statements to make your code more adaptable Mark Dixon Page 4
Example: Drinks SPECIFICATION • User Requirements – Students wish to decide which supermarket sells drinks at the best price • Software Requirements – Functional: – user enters offer details (bottle size, number of bottles, and price) – computer calculates bottle price and price per pint – Non-functional should be easy to use Mark Dixon Page 5
Debugging • key skill: – locate the cause of a bug • using testing methods • first step – narrow it down as much as possible • typical pattern in early tutorials: – – – student: it doesn't work lecturer: what doesn't work student: my code lecturer: yes, but which bit exactly student: ? ? lecturer: run your program, take me through it, which bits work, and where exactly does it go wrong – student: when I click this, nothing happens – lecturer: which bit of code is responsible for doing that? – student: this bit Mark Dixon Page 6
Example: Drinks • What happens when run? – Nothing? – think of murder investigation who-done-it? – input boxes, button, and text displays therefore: html works! – button click causes error therefore: prime suspect is button code Mark Dixon Page 7
Example: Drinks (with ERRORS) <html> <head><title></head> <body> Bottle Size: <input id="txt. Bottle. Size" type="text" />ml Quantity: <input id="txt. Qty" type="text" /> Price (£): <input id="txt. Price" type="text" /> <input id="btn. Calc" type="button" value="Calc" onclick="btn. Calc_on. Click()" /><br £<span id="lbl. Bottle. Price"></span> per bottle £<span id="lbl. Pint. Price"></span> per pint </body> </html> <script language="javascript"> function Calc_on. Click(){ lbl. Bottle. Price. inner. Text = txt. Qty. valu / txt. Price. value; lbl. Pint. Price. inner. Text = lbl. Bottle. Price. inner. Text * (568 / txt. Bottle. Size. value); } </script> Mark Dixon Page 8
Debugging • Examine code line by line – can help, but time consuming • Breakpoint (press F 9 on keyboard): Mark Dixon Page 9
Debugging • Breakpoint: like DVD pause, when line hit • Logic: – if breakpoint hit, code will pause, therefore event handler is OK, must be code – if nothing happens, breakpoint not hit, therefore event handler not working (this is what happens – check name) Mark Dixon Page 10
Example: Drinks (with ERRORS) <html> <head><title></head> <body> Bottle Size: <input id="txt. Bottle. Size" type="text" />ml Quantity: <input id="txt. Qty" type="text" /> Price (£): <input id="txt. Price" type="text" /> <input id="btn. Calc" type="button" value="Calc" onclick="btn. Calc_on. Click()" /><br £<span id="lbl. Bottle. Price"></span> per bottle £<span id="lbl. Pint. Price"></span> per pint </body> </html> <script language="javascript"> function Calc_on. Click(){ lbl. Bottle. Price. inner. Text = txt. Qty. valu / txt. Price. value; lbl. Pint. Price. inner. Text = lbl. Bottle. Price. inner. Text * (568 / txt. Bottle. Size. value); } </script> Mark Dixon Page 11
Debugging: Breakpoint hit • After event-handler fixed – breakpoint hit, code paused Mark Dixon Page 12
Debugging • Can run 1 line – press F 8 on keyboard Always read message Mark Dixon Always click Break (this means pause) Page 13
Debugging – Stop Button • Click Stop button, to edit code Mark Dixon Page 14
Debugging: Check output • Is this right? – if each bottle is 0. 8, then 0. 8 * quantity should be same as price – 0. 8 * 4 = 3. 2 – this is wrong Mark Dixon Page 15
Debugging: Immediate Window • Can now ask questions – what is in txt. Price. value Mark Dixon Page 16
Adaptive Behaviour • So far – every statement always executed in sequence • Often necessary for software to – change behaviour under different circumstances Mark Dixon Page 17
Example: Multiplication Test SPECIFICATION • User Requirements – A primary school teacher wants to test the multiplication skills of her children. • Software Requirements – Functional: – display a multiplication question – allow the user to type a response – check the response and provide feedback – Non-functional should be interesting, colourful, and easy to use Mark Dixon Page 18
Example: Multiplication Test v 1 <html> <head><title>Multiply</title></head> <body> <p>What is 5 times 3? </p> <input id="txt. Ans" type="text" /> <input id="btn. Ans" type="button" value="Check" onclick="btn. Ans_on. Click()" /> <p id="lbl. Comment"></p> </body> </html> <script language="javascript"> function btn. Ans_on. Click(){ if (txt. Ans. value == 15){ document. bg. Color = "yellow"; lbl. Comment. inner. Text = "Correct, well done!"; }else{ document. bg. Color = "cyan"; lbl. Comment. inner. Text = "Sorry, try again"; } } </script> Mark Dixon Page 19
Example: Multiplication Test v 1 Mark Dixon Page 20
Example: Multiplication Test v 1 Mark Dixon Page 21
if statements • Use the following syntax (pattern): if (condition){ statementblock } • For example: if (txt. Age. value < 18){ document. bg. Color = "Red"; } Mark Dixon Page 22
if else statements • Use the following syntax (pattern): if (condition){ statementblock-1 }else{ statementblock-2 } • For example: if (txt. Age. value < 18){ document. bg. Color = "Red"; }else{ document. bg. Color = "Blue"; } Mark Dixon Page 23
George Boole • 1815 (Lincoln, UK) – 1864 • Invented Boolean algebra – key concept in computing – boolean datatype: • 0 • 1 false true • Condition – expression, evaluates to: – true – false Mark Dixon (stored as – 1) (stored as 0) Page 24
Conditions: Relational Operators • conditions contain relational operators: == is equal to > < >= <= != Mark Dixon is greater than is less than is greater than or equal to is less than or equal to is not equal to Page 25
Conditions: Examples (literal) • Using literals: 34 == 34 Mark Dixon true 34 == 12 false 34 > 4 true 18 <= 18 true "hello" > "zoo" false Page 26
Conditions: Examples (symbolic) • Using symbols (controls' properties): Assume that: pic. Main. style. pos. Left is 2300 pic. Main. style. pos. Left == 2300 true pic. Main. style. pos. Left == 2309 false pic. Main. style. pos. Left != 189 true pic. Main. style. pos. Left > 1900 true Mark Dixon Page 27
Conditions: Errors • Are the following valid: – 23 > 30 – 66 15 – 23 < missing (relational) operator missing data – pic. Bat. style. pos. Left > 1000 – < pic. Bat. style. pos. Top missing data Mark Dixon Page 28
Questions: Conditions • What is the result of (pic. Main. style. pos. Left is 5589): pic. Main. style. pos. Left > 4400 true • What is the result (txt. Age. value is 19, txt. Salary. value is 10787): txt. Age. value < 21 && txt. Salary. value < 10787 false • Write an expression to check if: the pos. Left of pic. Main is larger than 167 pic. Main. style. pos. Left > 167 • Write an expression to check if: pic. Main pos. Top is more than pic. Ball pos. Top pic. Main. style. pos. Top > pic. Ball. style. pos. Top Mark Dixon Page 29
Example: Student Loan <html> <head><title>Student Loan Repayment Calculator</title></head> <body> <center><font size="+2"><b>Student Loan Repayment Calculator</b></font></center> <input id="txt. Income" type="text" /> <input id="btn. Calc" type="button" value="Calculate" onclick="btn. Calc_on. Click()" /> <p id="lbl. Payment"></p> </body> </html> <script language="javascript"> function btn. Calc_on. Click(){ lbl. Payment. inner. Text = (txt. Income. value - 15000) * 0. 09; } </script> Mark Dixon Page 30
Example: Student Loan (v 2) <html> <head><title>Student Loan Repayment Calculator</title></head> <body> <center><font size="+2"><b>Student Loan Repayment Calculator</b></font></center> <input id="txt. Income" type="text" /> <input id="btn. Calc" type="button" value="Calculate" onclick="btn. Calc_on. Click()" /> <p id="lbl. Payment"></p> </body> </html> <script language="javascript"> function btn. Calc_on. Click(){ if (txt. Income. value > 15000){ lbl. Payment. inner. Text = "£" + ((txt. Income. value - 15000) * 0. 09); }else{ lbl. Payment. inner. Text = "You pay nothing (£ 0. 00)!"; } Mark }Dixon Page 31
Example: Ball Char • Functional Decomposition • Incremental Development • Get ball char to bounce horizontally: – get ball char to appear on left of page – get ball char to move right on page (user click) – get ball char to move right on page automatically – get ball char to stop at end – get ball char to change direction Mark Dixon Page 32
Example: Ball Char (v 2) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime; " onload="window_on. Load()"> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolute; " /> </body> </html> <script language="javascript"> function window_on. Load(){ window. set. Interval("Move. Ball. Right()", 50); } function Move. Ball. Right(){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 5; } </script> Mark Dixon Page 33
Example: Ball Char (v 2. 1) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime; " onload="window_on. Load()"> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolute; " /> </body> </html> <script language="javascript"> function window_on. Load(){ window. set. Interval("Move. Ball. Right()", 50); } function Move. Ball. Right(){ if (pic. Ball. style. pos. Left < document. body. client. Width){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 5; } Mark Dixon Page 34
Example: Ball Char (v 2. 2) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime; " onload="window_on. Load()"> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolute; " /> </body> </html> <script language="javascript"> function window_on. Load(){ window. set. Interval("Move. Ball. Right()", 50); } function Move. Ball. Right(){ If ((pic. Ball. style. pos. Left + pic. Ball. width) < document. body. client. Width){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 5; } } </script> Mark Dixon Page 35
Example: Ball Char (v 2. 3) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime; " onload="window_on. Load()"> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolute; " /> </body> </html> <script language="javascript"> function window_on. Load(){ window. set. Interval("Move. Ball. Right()", 50); } function Move. Ball. Right(){ If ((pic. Ball. style. pos. Left + pic. Ball. width + 5) < document. body. client. Width){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 5; } } </script> Mark Dixon Page 36
Example: Ball Char (v 2. 4) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime; " onload="window_on. Load()"> <img id="pic. Ball" src="Ball. Char. gif" style="position: absolute; " /> </body> </html> <script language="javascript"> function window_on. Load(){ window. set. Interval("Move. Ball. Right()", 50); } function Move. Ball. Right(){ if ((pic. Ball. style. pos. Left + pic. Ball. width + 5) < document. body. client. Width){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left + 5; }else{ window. set. Interval("Move. Ball. Left()", 50); } } function Move. Ball. Left(){ pic. Ball. style. pos. Left = pic. Ball. style. pos. Left – 5; } </script> Mark Dixon Page 37
Example: Ball Char (v 2. 5) • Bounce from side to side, with sound: Mark Dixon Page 38
Example: Pizza Delivery A Pizza shop provides a delivery service. If the delivery is within five miles of the shop, then no delivery fee is charged. If the cost of the goods is less than £ 10 then a £ 3 delivery fee is charged, otherwise a £ 1. 50 delivery fee is charged. Mark Dixon Page 39
Decision Trees • Natural language – ambiguous & difficult to follow • Decision trees – express same information clearly Free distance <= 5 miles Y N Mark Dixon value >= £ 10 Y N £ 1. 50 £ 3. 00 Page 40
Example: Pizza Delivery • Nested If statements – one if inside another if Mark Dixon <html> <head><title>Delivery</title></head> <body> <p>Distance: <input type="text" id="txt. Dist" /><br /> Cost: <input type="text" id="txt. Cost" /> <input type="button" id="btn. Calc" value="Calc" onclick="btn. Calc_on. Click()" /> </p> <p id="lbl. Charge"></p> </body> </html> <script language="javascript"> function btn. Calc_on. Click(){ if (txt. Dist. value <= 5){ lbl. Charge. inner. Text = "Delivery Charge: £ 0. 00"; }else{ if (txt. Cost. value >= 10){ lbl. Charge. inner. Text = "Delivery Charge: £ 1. 50"; }else{ lbl. Charge. inner. Text = "Delivery Charge: £ 3. 00"; } } } Page 41 </script>
If statements: Errors missing if (pic. Man. width > 5) document. bg. Color = "red"; } } if (txt. Num. value > 5){ if (txt. Num. value == 4){ document. bg. Color = "green"; } missing } Mark Dixon Page 42
Logical Operators Use to join conditions (pic. Main. v. Space is 23): • And True when both items are True pic. Main. v. Space > 5 && pic. Main. v. Space < 35 pic. Main. v. Space < 10 && pic. Main. v. Space > 55 pic. Main. v. Space > 6 && pic. Main. v. Space < 23 pic. Main. v. Space >= 6 && pic. Main. v. Space <= 23 true false true • Or True when either item is True pic. Main. v. Space == 23 || pic. Main. v. Space == 11 true pic. Main. v. Space < 10 || pic. Main. v. Space > 55 false • Not True when item is False ! (pic. Main. v. Space == 23) Mark Dixon false Page 43
Logical Operators: Errors if (pic. Man. width > 5 && < 10){ document. bg. Color = "red"; } missing data if (pic. Man. width > 5 && pic. Man. width < 10){ document. bg. Color = "red"; } Mark Dixon Page 44
Tutorial Exercises: Drinks • LEARNING OBJECTIVE: use interactive debugger to identify and correct errors • Task 1: Create a new project, and type in the code for the drinks example. Running it should display the html, but the calc button does nothing. • Task 2: Use the interactive debugger to identify and correct the errors in the code. Mark Dixon Page 45
Tutorial Exercises: Multiplication • LEARNING OBJECTIVE: use if statement to perform conditional execution • Task 1: Get the Multiplication v 1 examples (from the lecture) working. • Task 2: Modify your program so that the text box is disabled after the answer is checked • Task 3: Modify your program so that it makes a suitable sound when the user gets the answer right/wrong. Sound files are in the resources section of the web-site Mark Dixon Page 46
Tutorial Exercises: Student Loan • LEARNING OBJECTIVE: use if statement to perform conditional execution • Task 1: Get the Student Loan v 1 and v 2 examples (from the lecture) working. • Task 2: Modify your program so that it calculates and displays monthly income and repayment amounts (as well an annual). Mark Dixon Page 47
Tutorial Exercises: Ball. Char • LEARNING OBJECTIVE: use if statement to perform conditional execution • Task 1: Get the Ball. Char example (from the lecture) working. You will need to work out the code for v 2. 5 – use the previous code for inspiration. • Task 2: Modify your program so that the Ball Character blinks when the mouse moves over it • Task 3: Modify your program to play a sound when the ball character is clicked Mark Dixon Page 48
Tutorial Exercises: Pizza Delivery • LEARNING OBJECTIVE: use nested if statements to perform conditional execution • Task 1: Get the Pizza Delivery example (from the lecture) working. Mark Dixon Page 49
Mark dixon artist
Mark dixon
Apa title page
Past real conditionals
First conditional statement
Jennifer dixon accident
Paul dixon smu
Grafico de dixon
Dixon montessori charter school
Dixon swivel joints
Karen k dixon
Dixon's q test
The boy does nothing dance
David dixon ubc
Sistema circulatorio vegetal
George washington dixon
Jefferson dixon campus
A mason-dixon memory summary
Thomas dixon the clansman
Dixon case study
Gda school
Admin stuff
Uts llb
Emu brugeradministration
Introduction rapport
Gacepa
Admin grouper
Ppn admin cbo
Lms vbs admin
Ict220 admin password
Nextera admin
Admin grouper
Admin officer dwp
Bikesafe admin
National 5 admin and it
Lpma admin
Special education academy
Gmetrix admin
Https //esanjeevani.in login
Admin stuff
Admin stuff
[email protected]
Phpmy admin
Kde admin code training
Vermeer rpc packet exploit
Gmetrix student login
Higher admin
Voadmin
Cern admin e-guide
Epson print admin download
