mark dixon 1 05 – conditional execution. mark dixon 2 admin: test (next week) in class test...
TRANSCRIPT
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)- email: 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<script language="vbscript"> 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</script>
Mark Dixon 6
Questions: Data Typesa) 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<html> <head> <title>Student Loan Repayment Calculator</title> <meta http-equiv="x-ua-compatible" content="IE=10" /> </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="parPayment"></p> </body></html>
<script language="vbscript"> Sub btnCalc_onClick() parPayment.innerText = (txtIncome.value - 21000) * 0.09 End Sub</script> Problem: if salary < 21000 gives negative payment
Mark Dixon 10
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 11
Example: Multiplication Test v1<html> <head> <title>Multiply</title> <meta http-equiv="x-ua-compatible" content="IE=10" /> </head> <body> <p>What is 5 times 3?</p> <input id="txtAns" type="text" /><br /> <input id="btnAns" type="button" value="Check" /> <p id="parComment"></p> </body></html>
<script language="vbscript"> 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</script>
Mark Dixon 14
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 15
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 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 less than>= is greater than or equal to<= is less than or equal to<> is not equal to
Mark Dixon 18
Conditions: Examples (literal)• Using literals:
34 = 34
34 = 12
34 > 4
18 <= 18
"hello" > "zoo"
true
false
true
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
true
Mark Dixon 20
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 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)<html> <head> <title>Student Loan Repayment Calculator</title> <meta http-equiv="x-ua-compatible" content="IE=10" /> </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="parPayment"></p> </body></html>
<script language="vbscript"> Sub btnCalc_onClick() If txtIncome.value > 21000 Then parPayment.innerText = "£" & ((txtIncome.value - 21000) * 0.09) Else parPayment.innerText = "You pay nothing (£0.00)!" End If End Sub</script>
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)<html> <head> <title>Ball Char</title> <meta http-equiv="x-ua-compatible" content="IE=10" /> </head> <body> <img id="picBall" src="BallChar.gif" style="position: absolute;" /> </body></html>
<script language="vbscript"> 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</script>
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)<html> <head> <title>Ball Char</title> <meta http-equiv="x-ua-compatible" content="IE=10" /> </head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.jpg" style="position: absolute;" /> </body></html>
<script language="vbscript"> 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</script>
Mark Dixon 28
Example: Ball Char (v2.2)<html> <head> <title>Ball Char</title> <meta http-equiv="x-ua-compatible" content="IE=10" /> </head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.jpg" style="position: absolute;" /> </body></html>
<script language="vbscript"> 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</script>
Mark Dixon 29
Example: Ball Char (v2.3)<html> <head> <title>Ball Char</title> <meta http-equiv="x-ua-compatible" content="IE=10" /> </head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.jpg" style="position: absolute;" /> </body></html>
<script language="vbscript"> 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</script>
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<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="parCharge"></p> </body></html>
<script language="vbscript"> 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 If End Sub</script>
• Nested If statements– one if
inside another if
Mark Dixon 34
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 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