1. Mark Dixon Page 1 04 – Information Processing: Expressions, Operators & Functions

2. Mark Dixon Page 2 Questions: Events Consider the following code: a) How many unique events does it contain? b) Name the event(s). Sub btnAns_OnClick() document.bgcolor = "yellow" lblComment.innertext = "Correct, well done!" document.bgcolor = "cyan" lblComment.innertext = "Sorry, try again" End Sub 1 Click OnClick

3. Mark Dixon Page 3 Questions: Properties Consider the following code: a) How many unique properties does it contain? b) Name the properties. Sub btnAns_OnClick() document.bgcolor = "yellow" lblComment.innertext = "Correct, well done!" document.bgcolor = "cyan" lblComment.innertext = "Sorry, try again" End Sub 2 bgcolor, innertext

4. Mark Dixon Page 4 Questions: Keywords Consider the following code: a) How many unique keywords does it contain? b) Name the keywords. Sub btnAns_OnClick() document.bgcolor = "yellow" lblComment.innertext = "Correct, well done!" document.bgcolor = "cyan" lblComment.innertext = "Sorry, try again" End Sub 2 Sub End

5. Mark Dixon Page 5 Session Aims & Objectives Aims –Introduce you to main processing concepts, i.e. errors, expressions, operators and functions Objectives, by end of this week’s sessions, you should be able to: –identify and correct common errors –evaluate expressions –assign a value to a object's property, using combination of literal values, operators, functions, and identifiers

6. Mark Dixon Page 6 Testing & Debugging: Errors –syntax: computer unable to understand your instructions (program does not execute), e.g. –run-time: program can't execute instruction and exits (future lecture) –logical: program executes but does not match specification (do what was intended), e.g. 3 error types :

7. Mark Dixon Page 7 Errors: Syntax Code cannot be understood missing ( syntax error Click Yes keyboard cursor moves to error

8. Mark Dixon Page 8 Errors: Run time Code cannot be executed Computer –just symbol matching –No intelligence missing e run time error

9. Mark Dixon Page 9 Errors: Logical Code does not do what you wanted blue instead of red

10. Mark Dixon Page 10 Questions: Errors Spot the errors (you should find 6), and decide whether they are syntax or logical Hello Sub btnBlue_OnCluck() document.bgColor = "Red" End Sub Sub btnRed_Onlick() document.bgColor "Red" End Sub Sub window_OnClick() document.bgColour = "White" End Sib

11. Mark Dixon Page 11 Meet George Common Boa Constrictor –boa constrictor imperator Native to Central & South America No venom (no poison)

12. Mark Dixon Page 12 Looking after George Problem: –Difficult to keep –Require temperature and humidity controlled environment –Much of the literature is from the US Temperature in Fahrenheit: 80-85F day, 78F minimum at night (P Vosjoli 1998) Solution –Need a program to convert from Celsius to Fahrenheit

13. Mark Dixon Page 13 Example: Temp User Requirements –describe user's objectives no mention of technology Software Requirements –Functional list facilities to be provided (often numbered) –Non-functional list desired characteristics (often more subjective) SPECIFICATION User Requirements –help snake keeper convert from Fahrenheit to Celsius Software Requirements –Functional: –enter Fahrenheit value –display Celsius value –Non-functional should be quick and easy to use

14. Mark Dixon Page 14 Information Processing All computing problems: Input DataProcess Output Data 9 7 16+ following this pattern: for example: to add two numbers: 7 + 9 = 16

15. Mark Dixon Page 15 Information Processing (cont.) Hence, to solve any computing problem ask: –Input: what information goes in? –Process: what is done to it –Output: what information comes out Temperature in Fahrenheit Temperature in Celsius

16. Mark Dixon Page 16 To convert from Fahrenheit to Celsius: e.g. Fahrenheit is: Example: Temp (processing) c = 10 50

17. Mark Dixon Page 17 Operators Operators sit between the data = assignment operator 5 + 2 addition operatorresult is 7 5 - 2 subtraction operatorresult is 3 5 * 2 multiplication operatorresult is 10 5 / 2 division operatorresult is 2.5 c = ((f – 32) * 5) / 9 convert mathematical symbols into operators

18. Mark Dixon Page 18 Example: Temp (User Interface) Temperature Fahrenheit: 0

19. Mark Dixon Page 19 Maths with Objects c = ((f – 32) * 5) / 9 parCel.innertext = ((txtFah.value - 32) * 5) / 9

20. Mark Dixon Page 20 Example: Temp (code) Temperature Fahrenheit: 0 Sub btnCalc_OnClick() parCel.innertext = ((txtFah.value - 32) * 5) / 9 End Sub

21. Mark Dixon Page 21 Expression Evaluation

22. Mark Dixon Page 22 The following assignment statement: parCel.innerText = ((txtFah.value - 32) * 5) / 9 contains an expression Expressions Given: txtFah.Value = 68 can evaluate expression: parCel.innerText = ((txtFah.value - 32) * 5) / 9 = ((68 - 32) * 5) / 9 = (36 * 5) / 9 = (180 / 9 = 20

23. Mark Dixon Page 23 Expression Errors many people instinctively know these are wrong data operator data operator 23 + 11 - txtNum1.Value * 2 34 + * 12 + txtNum1.Value d o o d o d txtNum1.Value + 1 – 21 45 d o d o d d

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

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

26. Mark Dixon Page 26 Functions & Operators Used to: –process (manipulate) data Both Functions & Operators: –take input data/parameters (1 or more item) –process it –return a result which replaces the expression (substitution) Parameter(s) Result SQR Function (16)4

27. Mark Dixon Page 27 Functions (cont.) Functions: come before the data (which is in brackets) Sqr(16)square root result is 4 Abs(-23)absolute value result is 23 Int(2.543)integer result is 2 Sin(3.1)sine result is 0.998 Cos(0)cosine result is 1 Rnd()random number result 0 to 0.99999...

28. Mark Dixon Page 28 Questions: Expressions a)What is the result of: Int(12.93) / 2 b)What is the result of: 1 + Int(5.76786) + Sqr(Int(9.4523)) c)Write an expression to: give the square root of 9 d)Write an expression to: give the integer value of 16.7658765 6 1 + 5 + 3 = 9 Sqr(9) Int(16.7658765)

29. Mark Dixon Page 29 Problem solving: Pseudo-code To solve problem –think about how you would solve it manually (without computer) –think of steps you would take When btnGo is clicked, Read txtNum Add 6 Put in parRes Sub btnGo_onClick parRes.innerText = txtNum.Value + 6 End Sub Convert to code

30. Mark Dixon Page 30 Question: Pseudo-code Write VBScript code that does the following: when btnAdd is clicked read txtAge add 1 put in parNewAge Sub btnAdd_onClick() parNewAge.innerText = txtAge.Value + 1 End Sub

31. Mark Dixon Page 31 Tutorial Exercises: Temperature LEARNING OBJECTIVE: to assign a value to a object's property, using combination of literal values, operators, functions, and identifiers Task 1: get the temperature example working Task 2: modify the temperature example so that it has two extra buttons – a plus and minus to increase and decrease the input temperature (Fahrenheit)

32. Mark Dixon Page 32 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: use the properties window to hide the speed text box.