Mark Dixon 1 05 – Conditional Execution

Mark Dixon 2 Admin: Test (next week) In class test –teaching week 6 50 minutes short answer (5 - 6 words) currently 10% of overall mark

Mark Dixon 3 Admin Test Current –Coursework C1 25% C2 25% –Test T1 10% T2 10% –Examination 30% Proposed –Coursework C1 25% C2 25% –Test T1 25% T2 25% - Felt that exam duplicated other assessment - looking to change now – student feedback has influence (but outcome is not certain) - no response taken as No

Mark Dixon 4 Can't touch this Student work from previous year: based on work done by Daniel Thornton & David Orrock

Mark Dixon 5 Questions name: event, object, property, event handler, operator, function, expression Sub window_onLoad() imgHammer.style.posLeft = 500 imgHammer.style.posTop = 100 imgHammer.style.height = 100 imgHammer.style.width = 75 sndPlayer.src = "Hammer.wav" End Sub Sub imgHammer_onMouseOver() imgHammer.style.posLeft = Rnd() * (document.body.clientWidth - imgHammer.width) imgHammer.style.posTop = Rnd() * (document.body.clientHeight - imgHammer.height) End Sub

Mark Dixon 6 Questions: Data Types a)What is the result of: Mid("George Boole", 5, 4) b)What is put in parRes? txtPetName.value = "George" parRes.innerText = Right(txtPetName.value, 3) c)What is put in parRes? txtPetName.value = "George" parRes.innerText = Right("txtPetName", 3) ge B rge ame

Mark Dixon 7 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 (If) to make your code more adaptable

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

Mark Dixon 9 Example: Student Loan Student Loan Repayment Calculator Student Loan Repayment Calculator Sub btnCalc_onClick() parPayment.innerText = (txtIncome.value ) * 0.09 End Sub Problem: if salary < gives negative payment

Mark Dixon 10 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 11 Example: Multiplication Test v1 Multiply What is 5 times 3? Sub btnAns_OnClick() If txtAns.value = 15 Then document.bgColor = "yellow" parComment.innerText = "Correct, well done!" Else document.bgColor = "cyan" parComment.innerText = "Sorry, try again" End If End Sub

Mark Dixon 12 Example: Multiplication Test v1

Mark Dixon 13 Example: Multiplication Test v1

Mark Dixon 14 If Then statements Use the following syntax (pattern): If condition Then statementblock End If For example: If txtAge.value < 18 Then document.bgColor = "Red" End If

Mark Dixon 15 If Then Else statements Use the following syntax (pattern): If condition Then statementblock-1 Else statementblock-2 End If For example: If txtAge.value < 18 Then document.bgColor = "Red" Else document.bgColor = "Blue" End If

Mark Dixon 16 George Boole 1815 (Lincoln, UK) – 1864 Invented Boolean algebra –key concept in computing –boolean datatype: false(stored as 0) true(stored as 1 or -1) Condition – Boolean expression, evaluates to true or false

Mark Dixon 17 Conditions: Relational Operators conditions contain relational operators: =is equal to >is greater than =is greater than or equal to is not equal to

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

Mark Dixon 19 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

Mark Dixon 20 Conditions: Errors Are the following valid: – 23 > 30 – – 23 < – picBat.style.posLeft > 1000 – < picBat.style.posTop   missing (relational) operator missing data  missing data

Mark Dixon 21 Questions: Conditions What is the result of (picMain.style.posLeft is 5589): picMain.style.posLeft > 4400 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 picMain.style.posLeft > 167 picMain.style.posTop > picBall.style.posTop

Mark Dixon 22 Example: Student Loan (v2) Student Loan Repayment Calculator Student Loan Repayment Calculator Sub btnCalc_onClick() If txtIncome.value > Then parPayment.innerText = "£" & ((txtIncome.value ) * 0.09) Else parPayment.innerText = "You pay nothing (£0.00)!" End If End Sub

Mark Dixon 23 If statements: Errors If txtNum.value > 5 Then If txtNum.value = 4 Then document.bgColor = "green" End If If picMan.width > 5 document.bgColor = "red" End If missing Then keyword missing End If

Mark Dixon 24 Example: Ball Char (v2) Functional Decomposition Incremental Development Get ball char to move automatically: –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

Mark Dixon 25 Example: Ball Char (v2) Ball Char Sub window_onLoad () window.setInterval "MoveBallRight()", 500 picBall.style.posLeft = 0 picBall.style.posTop = 60 End Sub Sub MoveBallRight () picBall.style.posLeft = picBall.style.posLeft + 5 End Sub Procedure name Interval (in milliseconds: 1000 = 1s)

Mark Dixon 26 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 27 Example: Ball Char (v2.1) Ball Char Sub window_onLoad() window.setInterval "MoveBall()", 500 picBall.style.posLeft = 0 picBall.style.posTop = 60 End Sub Sub MoveBall() If picBall.style.posLeft < document.body.clientwidth Then picBall.style.posLeft = picBall.style.posLeft + 5 End If End Sub

Mark Dixon 28 Example: Ball Char (v2.2) Ball Char Sub window_onLoad() window.setInterval "MoveBall()", 500 picBall.style.posLeft = 0 picBall.style.posTop = 60 End Sub Sub MoveBall() If ( picBall.style.posLeft + picBall.width) < document.body.clientWidth Then picBall.style.posLeft = picBall.style.posLeft + 5 End If End Sub

Mark Dixon 29 Example: Ball Char (v2.3) Ball Char Sub window_onLoad() window.setInterval "MoveBall()", 500 picBall.style.posLeft = 0 picBall.style.posTop = 60 End Sub Sub MoveBall() If (picBall.style.posLeft + picBall.width + 5 ) < document.body.clientwidth Then picBall.style.posLeft = picBall.style.posLeft + 5 End If End Sub

Mark Dixon 30 Example: Ball Char (v2.4) Bounce from side to side, with sound:

Mark Dixon 31 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 32 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

Mark Dixon 33 Example: Pizza Delivery Delivery Distance: Cost: Sub btnCalc_onClick() If txtDist.value <= 5 Then parCharge.innerText = "Delivery Charge: £0.00" Else If txtCost.value >= 10 Then parCharge.innerText = "Delivery Charge: £1.50" Else parCharge.innerText = "Delivery Charge: £3.00" End If End Sub Nested If statements –one if inside another if

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

Mark Dixon 35 Logical Operators: Errors If picMan.width > 5 And < 10 Then document.bgColor = "red" End If missing data If picMan.width > 5 And picMan.width < 10 Then document.bgColor = "red" End If

Mark Dixon 36 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

Mark Dixon 37 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).

Mark Dixon 38 Tutorial Exercises: Ball Char LEARNING OBJECTIVE: to assign a value to a object's property, using combination of literal values, operators, functions, and identifiers Task 1: get the ball char (v2) example working Task 2: add a button that resets the ball char's horizontal position to 0 Task 3: add a text box that allows the user to control the speed of the ball character. HINT: Currently, the ball char will always move 5 pixels at a time. Task 4: add a button that stops the ball char moving. HINT: button should put 0 into the text box Task 5: add two buttons – one for fast and one for slow Task 6: add two more buttons – one for fast backwards and one for slow backwards Task 7: make it bounce off both sides of the client area (screen). Task 8: hide the speed text box HINT: this should happen when the window loads, using style.visibility Task 9: make the Ball Character blink when the mouse moves over it Task 10: play a sound when the ball character is clicked

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