Presentation is loading. Please wait.

Presentation is loading. Please wait.

06 – Conditional Execution

Published byMarian Parker Modified over 6 years ago

Similar presentations

Presentation on theme: "06 – Conditional Execution"— Presentation transcript:

1 06 – Conditional Execution

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

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

4 Session Aims & Objectives
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

5 Example: Drinks SPECIFICATION User Requirements Software 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 Debugging key skill: first step typical pattern in early tutorials:
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 investigation who-done-it? input boxes, button, and text displays therefore: html works! button does not respond therefore: 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" /><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>

9 Debugging Examine code line by line Breakpoint (press F9 on keyboard):
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" /><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>

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 therefore: bottle price must be wrong

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

17 Adaptive Behaviour So far Often necessary for software to
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-functional should 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" /> <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>

20 Example: Multiplication Test v1

21 Example: Multiplication Test v1

22 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

23 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

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

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

26 Conditions: Examples (literal)
Using literals: 34 = = > <= 18 "hello" > "zoo" true false true true false

27 Conditions: Examples (symbolic)
Using symbols (controls' properties): Assume that: picMain.style.posLeft is picMain.style.posLeft = picMain.style.posLeft = picMain.style.posLeft <> picMain.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 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

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 ) * 0.09 End Sub </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" /> <p id="lblPayment"></p> </body> </html> <script language="vbscript"> Sub btnCalc_onClick() If txtIncome.value > Then lblPayment.innerText = "£" & ((txtIncome.value ) * 0.09) Else lblPayment.innerText = "You pay nothing (£0.00)!" End If End Sub </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;"> <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 </script>

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 </script>

35 Example: Ball Char (v2.2) <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 + picBall.width) < document.body.clientWidth Then picBall.style.posLeft = picBall.style.posLeft + 5 End If </script>

36 Example: Ball Char (v2.3) <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 + picBall.width + 5) < document.body.clientWidth Then picBall.style.posLeft = picBall.style.posLeft + 5 End If </script>

37 Example: Ball Char (v2.4) <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 + picBall.width + 5) < document.body.clientWidth Then picBall.style.posLeft = picBall.style.posLeft + 5 Else window.setInterval "MoveBallLeft()", 50 End If Sub 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 Decision trees
ambiguous & difficult to follow Decision trees express same information clearly Free Y distance <= 5 miles £1.50 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" /> </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" lblCharge.innerText = "Delivery Charge: £3.00" End If End Sub </script> Nested If statements one if inside another if

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

43 Logical Operators Use to join conditions (picMain.vSpace is 23):
And True when both items are True picMain.vSpace > 5 AND picMain.vSpace < true picMain.vSpace < 10 AND picMain.vSpace > false picMain.vSpace > 6 AND picMain.vSpace < false picMain.vSpace >= 6 AND picMain.vSpace <= true Or True when either item is True picMain.vSpace = 23 OR picMain.vSpace = true picMain.vSpace < 10 OR picMain.vSpace > false Not True when item is False Not (picMain.vSpace = 23) false

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

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.

Download ppt "06 – Conditional Execution"

Similar presentations

Summer Computing Workshop. Introduction to Variables Variables are used in every aspect of programming. They are used to store data the programmer needs.

Summer Computing Workshop. Introduction to Variables Variables are used in every aspect of programming. They are used to store data the programmer needs.
RAPTOR Syntax and Semantics By Lt Col Schorsch

RAPTOR Syntax and Semantics By Lt Col Schorsch
CS0004: Introduction to Programming Visual Studio 2010 and Controls.

CS0004: Introduction to Programming Visual Studio 2010 and Controls.
Mark Dixon Page 1 16 – Passing Data between pages: Forms, Sessions, & Query Strings.

Mark Dixon Page 1 16 – Passing Data between pages: Forms, Sessions, & Query Strings.
Mark Dixon Page 1 05 – Constants and Variables. Mark Dixon Page 2 Admin: Test (next week) In class test –teaching week 6 50 mins short answer (5 - 6 words.

Mark Dixon Page 1 05 – Constants and Variables. Mark Dixon Page 2 Admin: Test (next week) In class test –teaching week 6 50 mins short answer (5 - 6 words.
Mark Dixon, SoCCE SOFT 136Page 1 05 – Conditional Execution.

Mark Dixon, SoCCE SOFT 136Page 1 05 – Conditional Execution.
Mark Dixon Page 1 05 – Conditional Execution. Mark Dixon Page 2 Admin: Test (next week) In class test –teaching week 6 50 minutes short answer (5 - 6.

Mark Dixon Page 1 05 – Conditional Execution. Mark Dixon Page 2 Admin: Test (next week) In class test –teaching week 6 50 minutes short answer (5 - 6.
Mrs. Chapman. Tabs (Block Categories) Commands Available to use Script Area where you type your code Sprite Stage All sprites in this project.

Mrs. Chapman. Tabs (Block Categories) Commands Available to use Script Area where you type your code Sprite Stage All sprites in this project.
Mark Dixon Page 1 02 – Dynamic HTML (client-side scripting)

Mark Dixon Page 1 02 – Dynamic HTML (client-side scripting)
Information Technology Center Hany Abdelwahab Computer Specialist.

Information Technology Center Hany Abdelwahab Computer Specialist.
CIS101 Introduction to Computing Week 11. Agenda Your questions Copy and Paste Assignment Practice Test JavaScript: Functions and Selection Lesson 06,

CIS101 Introduction to Computing Week 11. Agenda Your questions Copy and Paste Assignment Practice Test JavaScript: Functions and Selection Lesson 06,
Mark Dixon, SoCCE SOFT 131Page 1 05 – Conditional Execution.

Mark Dixon, SoCCE SOFT 131Page 1 05 – Conditional Execution.
Mark Dixon, SoCCE SOFT 131Page 1 03 – Information Processing: Expressions, Operators & Functions.

Mark Dixon, SoCCE SOFT 131Page 1 03 – Information Processing: Expressions, Operators & Functions.
Mark Dixon, SoCCE SOFT 131Page 1 04 – Conditional Execution.

Mark Dixon, SoCCE SOFT 131Page 1 04 – Conditional Execution.
CIS101 Introduction to Computing Week 12 Spring 2004.

CIS101 Introduction to Computing Week 12 Spring 2004.
Mr. Wortzman. Tabs (Block Categories) Available Blocks Script Area Sprite Stage All sprites in this project.

Mr. Wortzman. Tabs (Block Categories) Available Blocks Script Area Sprite Stage All sprites in this project.
Mark Dixon Page 1 10 – Iterative Execution. Mark Dixon Page 2 Questions: Variables Write a line of code to declare a variable called h Write a line of.

Mark Dixon Page 1 10 – Iterative Execution. Mark Dixon Page 2 Questions: Variables Write a line of code to declare a variable called h Write a line of.
02 – Client-side code: JavaScript

02 – Client-side code: JavaScript
Mark Dixon 1 07 – Variables. Mark Dixon 2 Questions: Conditional Execution What is the result of (txtFah.value is 50): (txtFah.value >= 40) What will.

Mark Dixon 1 07 – Variables. Mark Dixon 2 Questions: Conditional Execution What is the result of (txtFah.value is 50): (txtFah.value >= 40) What will.
M Dixon 1 04 – Data Types & Debugging. Questions: Expressions a)What is the result of: 7 + Int(8.245) b)Write an expression to: put a random number into.

M Dixon 1 04 – Data Types & Debugging. Questions: Expressions a)What is the result of: 7 + Int(8.245) b)Write an expression to: put a random number into.

Similar presentations

Ads by Google