1 / 39

04 – Conditional Execution

04 – Conditional Execution. Questions: Expressions. What is the result of: 10 * Int(3.1973265765) How many functions are in the following: Int(12.472) * Sqr(9)) + 8 / 2 How many operators are in the following: Int(12.472) * Sqr(9)) + 8 / 2

lolita
Download Presentation

04 – Conditional Execution

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 04 – Conditional Execution

  2. Questions: Expressions • What is the result of: 10 * Int(3.1973265765) • How many functions are in the following:Int(12.472) * Sqr(9)) + 8 / 2 • How many operators are in the following:Int(12.472) * Sqr(9)) + 8 / 2 • Write an expression to: divide 15 by 3 and multiply the result by 6 30 2 3 (15 / 3) * 6

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

  4. Example: AddNum v1 <html> <head><title>Add Numbers</title></head> <body> <input type="text" id="txtNum1" /><br /> <input type="text" id="txtNum2" /><br /> <input type="button" id="btnAdd" value="Add" /> <p id="lblResult"></p> </body> </html> <script type="text/vbscript"> Sub btnAdd_OnClick() lblResult.InnerText = txtNum1.Value + txtNum2.Value End Sub </script> Doesn't work!

  5. Types of Information • Numeric (numbers) 29 (integer/whole) 56.23 (decimal/real) • String (text) "Hello there!" "BOO" • Pictures (numbers) • Sound (numbers)

  6. AddNum problem double quotes enclose text • The + operator works with: • numbers, and • text • Text input boxes store text 23 + 16 39 "23" + "16" "2316"

  7. String Functions CInt("63") convert to integer result is 63Left("boo",2) left string result is "bo"Right("hello",3) right string result is "llo"Mid("hello",2,2) middle string result is "el"Len("S Smith") length result is 7Space(5) spaces result is " "

  8. String Expressions

  9. String Expressions & Errors data data data operator operator ERROR! missing operator ERROR! missing data "What is " + txtN1.Value + " times " "What is twice " txtN1.Value + "?" "What is 6 minus " + + txtN1.Value + "?"

  10. Questions: String Expressions • What is the result of:Mid("what is the time?", 3, 4) • What is the result of: "23" + "18" + Left("bob",1) + Right("sal",2) • Write an expression to:convert "16" to a number • Write an expression to:give the first two letters of "Mr John Smith" "at i" "2318bal" CInt("16") Left("Mr John Smith", 2)

  11. Example: AddNum v2 <html> <head><title>Add Numbers</title></head> <body> <input type="text" id="txtNum1" /><br /> <input type="text" id="txtNum2" /><br /> <input type="button" id="btnAdd" value="Add" /> <p id="lblResult"></p> </body> </html> <script type="text/vbscript"> Sub btnAdd_OnClick() lblResult.InnerText = CInt(txtNum1.Value) + CInt(txtNum2.Value) End Sub </script>

  12. Example: Text Shift <html> <head><title>Text Shift</title></head> <body> <p id="parH"></p> </body> </html> <script type="text/vbscript"> Sub Window_OnLoad() parH.innertext = "Hello There" + Space(100) Window.SetInterval "TextShift", 50 End Sub Sub TextShift() parH.innertext = Mid(parH.innertext,2) + Left(parH.innerText,1) End Sub </script>

  13. Adaptive Behaviour • So far • every statement always executed in sequence • Often necessary for software to • change behaviour under different circumstances

  14. 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-functionalshould be interesting, colourful, and easy to use

  15. Example: Multiplication Test v1 <html> <head><title>Multiply</title></head> <body> <p>What is 5 times 3?</p> <input type="text" id="txtAns" /><br /> <input type="button" id="btnAns" value="Check" /> <p id="lblComment"></p> </body> </html> <script type="text/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>

  16. Example: Multiplication Test v1

  17. Example: Multiplication Test v1

  18. Example: Multiplication Test v1.1 <html> <head><title>Multiply</title></head> <body> <embed id="sndFanfare" src="Fanfare.wav" hidden="true" autoplay="False"></embed> <p>What is 5 times 3?</p> <input type="text" id="txtAns" /><br /> <input type="button" id="btnAns" value="Check" /> <p id="lblComment"></p> </body> </html> <script type="text/vbscript"> Sub btnAns_OnClick() If txtAns.Value = 15 Then document.bgcolor = "yellow" lblComment.innertext = "Correct, well done!" sndFanfare.Play Else document.bgcolor = "cyan" lblComment.innertext = "Sorry, try again" End If End Sub </script>

  19. If Then statements • Use the following syntax (pattern):IfconditionThenstatementblockEndIf • For example:If txtAge.value < 18 Then document.bgColor = "Red" End If

  20. If Then Else statements • Use the following syntax (pattern):Ifcondition1Thenstatementblock-1Elsestatementblock-2EndIf • For example:If txtAge.value < 18 Then document.bgColor = "Red" Else document.bgColor = "Blue" End If

  21. Conditions & Relational Operators • Conditions – expression, evaluates to: • true (stored as –1) • false (stored as 0) • contain relationaloperators:= is equal to> is greater than< is less than>= is greater thanor equal to<= is less thanor equal to<> is not equal to

  22. Examples: Conditions • Using literals: (34 = 34) (evaluates to true) (34 = 12) (evaluates to false) (34 > 4) (evaluates to true) (18 <=18) (evaluates to true) • Using controls' properties:Assume that picMain.hSpace is 2300 (picMain.hSpace = 2300) (true) (picMain.hSpace = 2309 (false) (picMain.hSpace <> 189 (true) (picMain.hSpace > 1900 (true)

  23. Logical Operators Use to join conditions (assume picMain.vSpace is 23): • And True when both itemsare True(picMain.vSpace > 5) AND (picMain.vSpace < 35) (true)(picMain.vSpace < 10) AND (picMain.vSpace > 55) (false)(picMain.vSpace > 6) AND (picMain.vSpace < 23) (false)(picMain.vSpace >=6) AND (picMain.vSpace <= 23) (true) • Or True when either itemis True(picMain.vSpace = 23) OR (picMain.vSpace = 11) (true)(picMain.vSpace < 10) OR (picMain.vSpace > 55) (false) • Not True whenitemis FalseNot (picMain.vSpace = 23) (false)

  24. Exercise: Conditions • What is the result of (picMain.hSpace is 5589): (picMain.hSpace > 4400) • What is the result (txtAge.value is 19, txtSalary.value is 10787):(txtAge.Value < 21) AND (txtSalary.Value < 10787) • Write an expression to check if:picMain.hSpace is larger than 167 • Write an expression to check if:picMain.vSpace is larger than picBall.vSpace true false (picMain.hSpace > 167) (picMain.vSpace > picBall.vSpace)

  25. 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 type="text" id="txtIncome" /> <input type="button" id="btnCalc" value="Calculate" /> <p id="lblPayment"></p> </body> </html> <script type="text/vbscript"> Sub btnCalc_OnClick() lblPayment.innertext = (txtIncome.value - 15000) * 0.09 End Sub </script> SLC

  26. 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 type="text" id="txtIncome" /> <input type="button" id="btnCalc" value="Calculate" /> <p id="lblPayment"></p> </body> </html> <script type="text/vbscript"> Sub btnCalc_OnClick() If txtIncome.value > 15000 Then lblPayment.innertext = "£" + CStr((txtIncome.value - 15000) * 0.09) Else lblPayment.innertext = "You pay nothing (£0.00)!" End If End Sub </script>

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

  28. Example: Ball Char (v2) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.jpg" style="position: absolute;" /> </body> </html> <script type="text/vbscript"> Sub Window_OnLoad() Window.SetInterval "MoveBallRight", 50 End Sub Sub MoveBallRight() picBall.style.pixelLeft = picBall.style.pixelLeft + 5 End Sub </script>

  29. Example: Ball Char (v2.1) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.jpg" style="position: absolute;" /> </body> </html> <script type="text/vbscript"> Sub Window_OnLoad() Window.SetInterval "MoveBallRight", 50 End Sub Sub MoveBallRight() If picBall.style.pixelLeft < document.body.clientwidth Then picBall.style.pixelLeft = picBall.style.pixelLeft + 5 End If End Sub </script>

  30. Example: Ball Char (v2.2) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.jpg" style="position: absolute;" /> </body> </html> <script type="text/vbscript"> Sub Window_OnLoad() Window.SetInterval "MoveBallRight", 50 End Sub Sub MoveBallRight() If picBall.style.pixelLeft < (document.body.clientwidth - picBall.width) Then picBall.style.pixelLeft = picBall.style.pixelLeft + 5 End If End Sub </script>

  31. Example: Ball Char (v2.3) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.jpg" style="position: absolute;" /> </body> </html> <script type="text/vbscript"> Sub Window_OnLoad() Window.SetInterval "MoveBallRight", 50 End Sub Sub MoveBallRight() If (picBall.style.pixelLeft + 5) < (document.body.clientwidth - picBall.width) Then picBall.style.pixelLeft = picBall.style.pixelLeft + 5 End If End Sub </script>

  32. Example: Ball Char (v2.4) <html> <head><title>Ball Char</title></head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.jpg" style="position: absolute;" /> </body> </html> <script type="text/vbscript"> Sub Window_OnLoad() Window.SetInterval "MoveBallRight", 50 End Sub Sub MoveBallRight() If (picBall.style.pixelLeft + 5) < (document.body.clientwidth - picBall.width) Then picBall.style.pixelLeft = picBall.style.pixelLeft + 5 Else Window.SetInterval "MoveBallLeft", 50 End If End Sub Sub MoveBallLeft() picBall.style.pixelLeft = picBall.style.pixelLeft - 5 End Sub </script>

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

  34. Tutorial Exercises: AddNum • LEARNING OBJECTIVE:use function to convert string (text) to integer (number) • Task 1: get the addnum examples (v1 and v2) working

  35. Tutorial Exercises: Text Shift • LEARNING OBJECTIVE:use string manipulation functions • Task 1: get the Text Shift example (from the lecture) working • Task 2: modify your program so that the text goes the other way.

  36. Tutorial Exercises: Initials • LEARNING OBJECTIVE:use string manipulation functions • Task 1: create a new site with two text boxes (surname and forenames), and a button (initials). When the button is clicked the first character from each text box (i.e. the person's initials) should be displayed.

  37. Tutorial Exercises: Multiplication • LEARNING OBJECTIVE:use if statement to perform conditional execution • Task 1: Get the Multiplication v1 and v1.1 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

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

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

More Related