Mark Dixon 1 06 – Conditional Execution. Mark Dixon 2 Admin: Test (next week) In class test –teaching week 7 50 minutes short answer (5 - 6 words max)

Mark Dixon 1

06 – Conditional Execution

Mark Dixon 2

Admin: Test (next week)• In class test

– teaching week 7

• 50 minutes

• short answer (5 - 6 words max)

• 25% of overall mark

Mark Dixon 3

Questions: Data Typesa) What is the result of:

Mid("George Boole", 5, 4)

b) What is put in lblRes?txtPetName.value = "George"lblRes.innerText = Right(txtPetName.value, 3)

c) What is put in lblRes?txtPetName.value = "George"lblRes.innerText = Right("txtPetName", 3)

ge B

rge

ame

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

more adaptable

Mark Dixon 5

Example: DrinksSPECIFICATION

• 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

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

Mark Dixon 7

Example: Drinks• What happens when run?

– Nothing?

– think of murder investigationwho-done-it?

– input boxes, button, and text displaystherefore: html works!

– button does not respondtherefore: prime suspect is button code

Mark Dixon 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" /><br /> £<span id="lblBottlePrice"></span> per bottle<br /> £<span id="lblPintPrice"></span> per pint<br /> </body></html>

<script language="vbscript"> Sub Calc_onClick() lblBottlePrice.innerText = txtQty.valu / txtPrice.value lblPintPrice.innerText = lblBottlePrice.innerText * (568 / txtBottleSize.value) End Sub</script>

Mark Dixon 9

Debugging• Examine code line by line

– can help, but time consuming

• Breakpoint (press F9 on keyboard):

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

Mark Dixon 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" /><br /> £<span id="lblBottlePrice"></span> per bottle<br /> £<span id="lblPintPrice"></span> per pint<br /> </body></html>

<script language="vbscript"> Sub Calc_onClick() lblBottlePrice.innerText = txtQty.valu / txtPrice.value lblPintPrice.innerText = lblBottlePrice.innerText * (568 / txtBottleSize.value) End Sub</script>

Mark Dixon 12

Debugging: Breakpoint hit• After event-handler fixed

– breakpoint hit, code paused

Mark Dixon 13

Debugging• Can run 1 line – press F8 on keyboard

Always click Break(this means pause)

Always read message

Mark Dixon 14

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

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

– therefore:bottle price must be wrong

Mark Dixon 16

Debugging: Immediate Window• Can now ask questions

– what is in txtPrice.value

Mark Dixon 17

Adaptive Behaviour• So far

– every statement always executed in sequence

• Often necessary for software to– change behaviour under different circumstances

Mark Dixon 18

Example: Multiplication TestSPECIFICATION

• 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

Mark Dixon 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" /> <p id="lblComment"></p> </body></html>

<script language="vbscript"> Sub btnAns_OnClick() If txtAns.value = 15 Then document.bgColor = "yellow" lblComment.innerText = "Correct, well done!" Else document.bgColor = "cyan" lblComment.innerText = "Sorry, try again" End If End Sub</script>

Mark Dixon 20

Example: Multiplication Test v1

Mark Dixon 21

Example: Multiplication Test v1

Mark Dixon 22

If Then statements• Use the following syntax (pattern):

If condition Then statementblockEnd If

• For example:If txtAge.value < 18 Then document.bgColor = "Red"End If

Mark Dixon 23

If Then Else statements• Use the following syntax (pattern):

If condition Then statementblock-1Else statementblock-2End If

• For example:If txtAge.value < 18 Then document.bgColor = "Red"Else document.bgColor = "Blue"End If

Mark Dixon 24

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 25

Conditions: Relational Operators• conditions contain relational operators:

= is equal to> is greater than< is less than>= is greater than or equal to<= is less than or equal to<> is not equal to

Mark Dixon 26

Conditions: Examples (literal)• Using literals:

34 = 34

34 = 12

34 > 4

18 <= 18

"hello" > "zoo"

true

false

true

true

false

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

true

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

Mark Dixon 29

Questions: Conditions• What is the result of (picMain.style.posLeft is 5589):


• 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.posTop > picBall.style.posTop

Mark Dixon 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" /> <p id="lblPayment"></p> </body></html>

<script language="vbscript"> Sub btnCalc_onClick() lblPayment.innerText = (txtIncome.value - 15000) * 0.09 End Sub</script>

Mark Dixon 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" /> <p id="lblPayment"></p> </body></html>

<script language="vbscript"> Sub btnCalc_onClick() If txtIncome.value > 15000 Then lblPayment.innerText = "£" & ((txtIncome.value - 15000) * 0.09) Else lblPayment.innerText = "You pay nothing (£0.00)!" End If End Sub</script>

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

Mark Dixon 33

Example: Ball Char (v2)<html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.gif" style="position: absolute;" /> </body></html>

<script language="vbscript"> Sub window_onLoad() window.setInterval "MoveBallRight()", 50 End Sub Sub MoveBallRight() picBall.style.posLeft = picBall.style.posLeft + 5 End Sub</script>

Mark Dixon 34

Example: Ball Char (v2.1)<html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.gif" style="position: absolute;" /> </body></html>

<script language="vbscript"> Sub window_onLoad() window.setInterval "MoveBallRight()", 50 End Sub Sub MoveBallRight() If picBall.style.posLeft < document.body.clientWidth Then picBall.style.posLeft = picBall.style.posLeft + 5 End If End Sub</script>

Mark Dixon 35


<script language="vbscript"> Sub window_onLoad() window.setInterval "MoveBallRight()", 50 End Sub

Sub MoveBallRight() If (picBall.style.posLeft + picBall.width) < document.body.clientWidth Then picBall.style.posLeft = picBall.style.posLeft + 5 End If End Sub</script>

Mark Dixon 36



Sub MoveBallRight() If (picBall.style.posLeft + picBall.width + 5) < document.body.clientWidth Then picBall.style.posLeft = picBall.style.posLeft + 5 End If End Sub</script>

Mark Dixon 37



Sub MoveBallRight() If (picBall.style.posLeft + picBall.width + 5) < document.body.clientWidth Then picBall.style.posLeft = picBall.style.posLeft + 5 Else window.setInterval "MoveBallLeft()", 50 End If End Sub

Sub MoveBallLeft() picBall.style.posLeft = picBall.style.posLeft - 5 End Sub</script>

Mark Dixon 38

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

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

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

Mark Dixon 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" /> </p> <p id="lblCharge"></p> </body></html>

<script language="vbscript"> Sub btnCalc_onClick() If txtDist.value <= 5 Then lblCharge.innerText = "Delivery Charge: £0.00" Else If txtCost.value >= 10 Then lblCharge.innerText = "Delivery Charge: £1.50" Else lblCharge.innerText = "Delivery Charge: £3.00" End If End If End Sub</script>

• Nested If statements– one if

inside another if

Mark Dixon 42

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 43

Logical Operators

• And True when both items are TruepicMain.vSpace > 5 AND picMain.vSpace < 35 truepicMain.vSpace < 10 AND picMain.vSpace > 55 falsepicMain.vSpace > 6 AND picMain.vSpace < 23 falsepicMain.vSpace >= 6 AND picMain.vSpace <= 23 true

• Or True when either item is TruepicMain.vSpace = 23 OR picMain.vSpace = 11 truepicMain.vSpace < 10 OR picMain.vSpace > 55 false

• Not True when item is FalseNot (picMain.vSpace = 23) false

Use to join conditions (picMain.vSpace is 23):

Mark Dixon 44

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

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

Mark Dixon 47

Tutorial Exercises: Student Loan• LEARNING OBJECTIVE:


• 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 48

Tutorial Exercises: BallChar• LEARNING OBJECTIVE:


• 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

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

Documents

Mark Dixon 1 06 – Conditional Execution. Mark Dixon 2 Admin: Test (next week) In class test –teaching week 7 50 minutes short answer (5 - 6 words max)