1. Mark Dixon Page 1 06 – Conditional Execution

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

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

4. Mark Dixon Page 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. Mark Dixon Page 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-functional should be easy to use

6. Mark Dixon Page 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. Mark Dixon Page 7 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

8. Mark Dixon Page 8 Example: Drinks (with ERRORS) Bottle Size: ml Quantity: Price (£): £ per bottle £ per pint function Calc_onClick(){ lblBottlePrice.innerText = txtQty.valu / txtPrice.value; lblPintPrice.innerText = lblBottlePrice.innerText * (568 / txtBottleSize.value); }

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

10. Mark Dixon Page 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. Mark Dixon Page 11 Example: Drinks (with ERRORS) Bottle Size: ml Quantity: Price (£): £ per bottle £ per pint function Calc_onClick(){ lblBottlePrice.innerText = txtQty.valu / txtPrice.value; lblPintPrice.innerText = lblBottlePrice.innerText * (568 / txtBottleSize.value); }

12. Mark Dixon Page 12 Debugging: Breakpoint hit After event-handler fixed –breakpoint hit, code paused

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

14. Mark Dixon Page 14 Debugging – Stop Button Click Stop button, to edit code

15. Mark Dixon Page 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. Mark Dixon Page 16 Debugging: Immediate Window Can now ask questions –what is in txtPrice.value

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

18. Mark Dixon Page 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-functional should be interesting, colourful, and easy to use

19. Mark Dixon Page 19 Example: Multiplication Test v1 Multiply What is 5 times 3? function btnAns_onClick(){ if (txtAns.value == 15){ document.bgColor = "yellow"; lblComment.innerText = "Correct, well done!"; }else{ document.bgColor = "cyan"; lblComment.innerText = "Sorry, try again"; }

20. Mark Dixon Page 20 Example: Multiplication Test v1

21. Mark Dixon Page 21 Example: Multiplication Test v1

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

23. Mark Dixon Page 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. Mark Dixon Page 24 George Boole 1815 (Lincoln, UK) – 1864 Invented Boolean algebra –key concept in computing –boolean datatype: 0false 1true Condition – expression, evaluates to: –true(stored as –1) –false(stored as 0)

25. Mark Dixon Page 25 Conditions: Relational Operators conditions contain relational operators: ==is equal to >is greater than =is greater than or equal to <=is less than or equal to !=is not equal to

26. Mark Dixon Page 26 Conditions: Examples (literal) Using literals: 34 == 34 34 == 12 34 > 4 18 "zoo" true false true false

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

28. Mark Dixon Page 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. Mark Dixon Page 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. Mark Dixon Page 30 Example: Student Loan Student Loan Repayment Calculator Student Loan Repayment Calculator function btnCalc_onClick(){ lblPayment.innerText = (txtIncome.value - 15000) * 0.09 ; }

31. Mark Dixon Page 31 Example: Student Loan (v2) Student Loan Repayment Calculator Student Loan Repayment Calculator function btnCalc_onClick(){ if (txtIncome.value > 15000){ lblPayment.innerText = "£" + ((txtIncome.value - 15000) * 0.09); }else{ lblPayment.innerText = "You pay nothing (£0.00)!"; }

32. Mark Dixon Page 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. Mark Dixon Page 33 Example: Ball Char (v2) Ball Char function window_onLoad (){ window.setInterval("MoveBallRight()", 50); } function MoveBallRight (){ picBall.style.posLeft = picBall.style.posLeft + 5; }

34. Mark Dixon Page 34 Example: Ball Char (v2.1) Ball Char function window_onLoad(){ window.setInterval("MoveBallRight()", 50); } function MoveBallRight(){ if (picBall.style.posLeft < document.body.clientWidth){ picBall.style.posLeft = picBall.style.posLeft + 5; }

35. Mark Dixon Page 35 Example: Ball Char (v2.2) Ball Char 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; }

36. Mark Dixon Page 36 Example: Ball Char (v2.3) Ball Char 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; }

37. Mark Dixon Page 37 Example: Ball Char (v2.4) Ball Char 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; }

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

39. Mark Dixon Page 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. Mark Dixon Page 40 Decision Trees Natural language –ambiguous & difficult to follow Decision trees –express same information clearly distance <= 5 miles value >= £10 Free £1.50 £3.00 Y N Y N

41. Mark Dixon Page 41 Example: Pizza Delivery Delivery Distance: Cost: <input type="button" id="btnCalc" value="Calc" onclick="btnCalc_onClick()" /> 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"; } Nested If statements –one if inside another if

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

43. Mark Dixon Page 43 Logical Operators AndTrue when both items are True picMain.vSpace > 5 && picMain.vSpace 55 false picMain.vSpace > 6 && picMain.vSpace = 6 && picMain.vSpace <= 23 true OrTrue when either item is True picMain.vSpace == 23 || picMain.vSpace == 11 true picMain.vSpace 55 false NotTrue when item is False ! (picMain.vSpace == 23) false Use to join conditions (picMain.vSpace is 23):

44. Mark Dixon Page 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. Mark Dixon Page 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. Mark Dixon Page 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. Mark Dixon Page 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. Mark Dixon Page 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. Mark Dixon Page 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.