1 / 49

06 – Conditional Execution

06 – Conditional Execution. Admin: Test (next week). In class test teaching week 6 50 minutes short answer (5 - 6 words max) 25% of coursework mark. Questions: Data Types. What is the result of: String ( "George Boole").subStr(4, 4 )

fraley
Download Presentation

06 – Conditional Execution

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 06 – Conditional Execution

  2. Admin: Test (next week) • In class test • teaching week 6 • 50 minutes • short answer (5 - 6 words max) • 25% of coursework mark

  3. Questions: Data Types • What is the result of:String("George Boole").subStr(4, 4) • What is put in lblRes?txtPetName.value = "George"lblRes.innerText = String(txtPetName.value).slice(3, 6) • What is put in lblRes?txtPetName.value = "George"lblRes.innerText = String("txtPetName").subStr(0, 3) ge B rge txt

  4. 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

  5. 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-functionalshould be easy to use

  6. 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

  7. Example: Drinks • What happens when run? • Nothing? • think of murder investigationwho-done-it? • input boxes, button, and text displaystherefore: html works! • button click causes errortherefore: prime suspect is button code

  8. Example: Drinks (with ERRORS) <html> <head><title></title></head> <body> Bottle Size: <input id="txtBottleSize" type="text" />ml<br /> Quantity: <input id="txtQty" type="text" /><br /> Price (£): <input id="txtPrice" type="text" /><br /> <input id="btnCalc" type="button" value="Calc" onclick="btnCalc_onClick()" /><br /> £<span id="lblBottlePrice"></span> per bottle<br /> £<span id="lblPintPrice"></span> per pint<br /> </body> </html> <script language="javascript"> function Calc_onClick(){ lblBottlePrice.innerText = txtQty.valu / txtPrice.value; lblPintPrice.innerText = lblBottlePrice.innerText * (568 / txtBottleSize.value); } </script>

  9. Debugging • Examine code line by line • can help, but time consuming • Breakpoint (press F9 on keyboard):

  10. 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)

  11. Example: Drinks (with ERRORS) <html> <head><title></title></head> <body> Bottle Size: <input id="txtBottleSize" type="text" />ml<br /> Quantity: <input id="txtQty" type="text" /><br /> Price (£): <input id="txtPrice" type="text" /><br /> <input id="btnCalc" type="button" value="Calc" onclick="btnCalc_onClick()" /><br /> £<span id="lblBottlePrice"></span> per bottle<br /> £<span id="lblPintPrice"></span> per pint<br /> </body> </html> <script language="javascript"> function Calc_onClick(){ lblBottlePrice.innerText = txtQty.valu / txtPrice.value; lblPintPrice.innerText = lblBottlePrice.innerText * (568 / txtBottleSize.value); } </script>

  12. Debugging: Breakpoint hit • After event-handler fixed • breakpoint hit, code paused

  13. Debugging • Can run 1 line – press F8 on keyboard Always read message Always click Break(this means pause)

  14. Debugging – Stop Button • Click Stop button, to edit code

  15. 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

  16. Debugging: Immediate Window • Can now ask questions • what is in txtPrice.value

  17. Adaptive Behaviour • So far • every statement always executed in sequence • Often necessary for software to • change behaviour under different circumstances

  18. 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-functionalshould be interesting, colourful, and easy to use

  19. Example: Multiplication Test v1 <html> <head><title>Multiply</title></head> <body> <p>What is 5 times 3?</p> <input id="txtAns" type="text" /><br /> <input id="btnAns" type="button" value="Check" onclick="btnAns_onClick()" /> <p id="lblComment"></p> </body> </html> <script language="javascript"> function btnAns_onClick(){ if (txtAns.value == 15){ document.bgColor = "yellow"; lblComment.innerText = "Correct, well done!"; }else{ document.bgColor = "cyan"; lblComment.innerText = "Sorry, try again"; } } </script>

  20. Example: Multiplication Test v1

  21. Example: Multiplication Test v1

  22. if statements • Use the following syntax (pattern):if(condition){statementblock} • For example:if (txtAge.value < 18){ document.bgColor = "Red"; }

  23. if else statements • Use the following syntax (pattern):if(condition){statementblock-1}else{statementblock-2} • For example:if (txtAge.value < 18){ document.bgColor = "Red";}else{ document.bgColor = "Blue";}

  24. George Boole • 1815 (Lincoln, UK) – 1864 • Invented Boolean algebra • key concept in computing • boolean datatype: • 0 false • 1 true • Condition – expression, evaluates to: • true(stored as –1) • false(stored as 0)

  25. Conditions: Relational Operators • conditions contain relationaloperators:== is equal to> is greater than< is less than>= is greater thanor equal to<= is less thanor equal to!= is not equal to

  26. Conditions: Examples (literal) • Using literals:34 == 3434 == 1234 > 418 <= 18 "hello" > "zoo" true false true true false

  27. Conditions: Examples (symbolic) • Using symbols (controls' properties):Assume that:picMain.style.posLeft is 2300picMain.style.posLeft == 2300picMain.style.posLeft == 2309picMain.style.posLeft != 189picMain.style.posLeft > 1900 true false true true

  28. Conditions: Errors • Are the following valid: • 23 > 30 • 66 15 • 23 < • picBat.style.posLeft > 1000 • < picBat.style.posTop   missing (relational) operator  missing data   missing data

  29. Questions: Conditions • What is the result of (picMain.style.posLeft is 5589): picMain.style.posLeft > 4400 • What is the result (txtAge.value is 19, txtSalary.value is 10787):txtAge.value < 21 && txtSalary.value < 10787 • Write an expression to check if:the posLeft of picMain is larger than 167 • Write an expression to check if:picMain posTop is more than picBall posTop true false picMain.style.posLeft > 167 picMain.style.posTop > picBall.style.posTop

  30. 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="txtIncome" type="text" /> <input id="btnCalc" type="button" value="Calculate" onclick="btnCalc_onClick()" /> <p id="lblPayment"></p> </body> </html> <script language="javascript"> function btnCalc_onClick(){ lblPayment.innerText = (txtIncome.value - 15000) * 0.09; } </script>

  31. Example: Student Loan (v2) <html> <head><title>Student Loan Repayment Calculator</title></head> <body> <center><font size="+2"><b>Student Loan Repayment Calculator</b></font></center> <input id="txtIncome" type="text" /> <input id="btnCalc" type="button" value="Calculate" onclick="btnCalc_onClick()" /> <p id="lblPayment"></p> </body> </html> <script language="javascript"> function btnCalc_onClick(){ if (txtIncome.value > 15000){ lblPayment.innerText = "£" +((txtIncome.value - 15000) * 0.09); }else{ lblPayment.innerText = "You pay nothing (£0.00)!"; } } </script>

  32. 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

  33. Example: Ball Char (v2) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;" onload="window_onLoad()"> <img id="picBall" src="BallChar.gif" style="position: absolute;" /> </body> </html> <script language="javascript"> function window_onLoad(){ window.setInterval("MoveBallRight()", 50); } function MoveBallRight(){ picBall.style.posLeft = picBall.style.posLeft + 5; } </script>

  34. Example: Ball Char (v2.1) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"onload="window_onLoad()"> <img id="picBall" src="BallChar.gif" style="position: absolute;" /> </body> </html> <script language="javascript"> function window_onLoad(){ window.setInterval("MoveBallRight()", 50); } function MoveBallRight(){ if (picBall.style.posLeft < document.body.clientWidth){ picBall.style.posLeft = picBall.style.posLeft + 5; } } </script>

  35. Example: Ball Char (v2.2) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"onload="window_onLoad()"> <img id="picBall" src="BallChar.gif" style="position: absolute;" /> </body> </html> <script language="javascript"> function window_onLoad(){ window.setInterval("MoveBallRight()", 50); } function MoveBallRight(){ If ((picBall.style.posLeft + picBall.width) < document.body.clientWidth){ picBall.style.posLeft = picBall.style.posLeft + 5; } } </script>

  36. Example: Ball Char (v2.3) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"onload="window_onLoad()"> <img id="picBall" src="BallChar.gif" style="position: absolute;" /> </body> </html> <script language="javascript"> function window_onLoad(){ window.setInterval("MoveBallRight()", 50); } function MoveBallRight(){ If ((picBall.style.posLeft + picBall.width + 5) < document.body.clientWidth){ picBall.style.posLeft = picBall.style.posLeft + 5; } } </script>

  37. Example: Ball Char (v2.4) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"onload="window_onLoad()"> <img id="picBall" src="BallChar.gif" style="position: absolute;" /> </body> </html> <script language="javascript"> function window_onLoad(){ window.setInterval("MoveBallRight()", 50); } function MoveBallRight(){ if ((picBall.style.posLeft + picBall.width + 5) < document.body.clientWidth){ picBall.style.posLeft = picBall.style.posLeft + 5; }else{ window.setInterval("MoveBallLeft()", 50); } } function MoveBallLeft(){ picBall.style.posLeft = picBall.style.posLeft – 5; } </script>

  38. Example: Ball Char (v2.5) • Bounce from side to side, with sound:

  39. 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.

  40. Decision Trees • Natural language • ambiguous & difficult to follow • Decision trees • express same information clearly Free Y £1.50 distance <= 5 miles Y N value >= £10 N £3.00

  41. Example: Pizza Delivery <html> <head><title>Delivery</title></head> <body> <p>Distance: <input type="text" id="txtDist" /><br /> Cost: <input type="text" id="txtCost" /><br /> <input type="button" id="btnCalc" value="Calc" onclick="btnCalc_onClick()" /> </p> <p id="lblCharge"></p> </body> </html> <script language="javascript"> function btnCalc_onClick(){ if (txtDist.value <= 5){ lblCharge.innerText = "Delivery Charge: £0.00"; }else{ if (txtCost.value >= 10){ lblCharge.innerText = "Delivery Charge: £1.50"; }else{ lblCharge.innerText = "Delivery Charge: £3.00"; } } } </script> • Nested If statements • one ifinside another if

  42. If statements: Errors if (txtNum.value > 5){ if (txtNum.value == 4){ document.bgColor = "green"; } missing } if (picMan.width > 5) document.bgColor = "red"; } missing }

  43. Logical Operators Use to join conditions (picMain.vSpace is 23): • And True when both itemsare TruepicMain.vSpace > 5 && picMain.vSpace < 35 truepicMain.vSpace < 10 && picMain.vSpace > 55 falsepicMain.vSpace > 6 && picMain.vSpace < 23 falsepicMain.vSpace >= 6 && picMain.vSpace <= 23 true • Or True when either itemis TruepicMain.vSpace == 23 || picMain.vSpace == 11 truepicMain.vSpace < 10 || picMain.vSpace > 55 false • Not True whenitemis False! (picMain.vSpace == 23) false

  44. Logical Operators: Errors if (picMan.width > 5 && < 10){ document.bgColor = "red"; } missing data  if (picMan.width > 5 && picMan.width < 10){ document.bgColor = "red"; }

  45. 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.

  46. Tutorial Exercises: Multiplication • LEARNING OBJECTIVE:use if statement to perform conditional execution • Task 1: Get the Multiplication v1 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

  47. Tutorial Exercises: Student Loan • LEARNING OBJECTIVE:use if statement to perform conditional execution • Task 1: Get the Student Loan v1 and v2 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).

  48. Tutorial Exercises: BallChar • LEARNING OBJECTIVE:use if statement to perform conditional execution • Task 1: Get the BallChar example (from the lecture) working.You will need to work out the code for v2.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

  49. 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.

More Related