1. Mark Dixon Page 1 03 – 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 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 not match specification (do what was intended), e.g. 3 error types :

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

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

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

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

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

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

12. Mark Dixon Page 12 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 celcius Software Requirements –Functional: –enter fahrenheit value –display celsius value –Non-functional should be quick and easy to use

13. Mark Dixon Page 13 Information Processing All computing problems: –involve processing information/data information has meaning (e.g. 5lb 3.3kg 18 years) data has no meaning (e.g 5 3.3 18) –following this pattern: For example: –to add two numbers: 7 + 9 = 16 Input DataProcessOutput Data 9 7 16+

14. Mark Dixon Page 14 Information Processing (cont.) Hence, to solve any computing problem ask: –what information goes in –what processing is done to it –what information comes out

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

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

17. Mark Dixon Page 17 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 convert mathematical symbols into operators: c = ((f – 32) * 5) / 9

18. Mark Dixon Page 18 Symbolic Representation Symbols (names) represent data txtFah.Value = 50 replace mathematical symbols with objects: parCel.innertext = ((txtFah.value - 32) * 5) / 9 Puts 50 into txtFah.Value The symbol txtFah.Value now represents 50

19. Mark Dixon Page 19 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 (from above) parCel.innertext = ((68 - 32) * 5) / 9 (substitute) lblResult.InnerText = 20 (calculate)

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 Expression Errors 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 many people instinctively know these are wrong data operator data operator

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

24. Mark Dixon Page 24 Client-side Object Model window object – properties include: –.status: get/set status bar window.status = “Hello” –.close: close current window window.close –.SetInterval: allow timed actions document object – properties include: –.title: get/set title of page –.write: write text to page –.bgColor: get/set background colour of page –.location: get/set current location of browser

25. Mark Dixon Page 25 Absolute Positioning change properties – change position picBall.style.pixeltop picBall.style.pixelleftpicBall.width picBall.height document.body.clientwidth

26. Mark Dixon Page 26 Example: Ball Char (v2) Ball Char Sub Window_OnLoad () Window.SetInterval "MoveBallRight", 50 End Sub Sub MoveBallRight () picBall.style.pixelLeft = picBall.style.pixelLeft + 5 End Sub Procedure name Interval (in milliseconds: 1000 = 1s) enable absolute positioning

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

28. Mark Dixon Page 28 Functions (cont.) Functions: come before the data (which is in brackets) Sqr(16) square rootresult is 4 Abs(-23) absolute valueresult is 23 Int(2.543) integerresult is 2 Sin(3.1) sineresult is 0.998 Cos(0) cosineresult is 1

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

30. Mark Dixon Page 30 Example: Moon Orbit – Analysis SPECIFICATION User Requirements –need to keep children occupied/entertained, while learning about the moon's orbit Software Requirements –Functional: –Orbit of moon around earth should be animated –Children should be able to control speed and direction –Non-functional should be easy and fun to use

31. Mark Dixon Page 31 Problem solving: Pseudo-code To solve problem –think about how you would solve it manually (without computer) –think of steps you would take Moon position –increase angle –move moon horizontal position vertical position Convert to code 1 2 3

32. Mark Dixon Page 32 Trigonometry: In general angle (ang) hypotenuse (H) opposite (O) = Sin(ang) * H adjacent (A) = Cos(ang) * H

33. Mark Dixon Page 33 Trigonometry: Moon Orbit Sin(ang) * 150 Cos(ang) * 150 angle (ang) 150

34. Mark Dixon Page 34 Trigonometry: Radians Radians used by computers instead of degrees: 0 or 360 deg (0 or 6.2 rad) 90 deg (1.55 rad) 180 deg (3.1 rad) (4.65 rad) 270 deg rad = (deg/180) * 3.1 π π/2

35. Mark Dixon Page 35 Example: Moon Orbit v1.0 Moon orbit Angle: Sub Window_OnLoad() imgEarth.style.pixelLeft = document.body.clientwidth / 2 imgMoon.style.pixelLeft = imgEarth.style.pixelLeft txtAngle.value = 0 End Sub Sub btnCalc_OnClick() imgMoon.Style.PixelLeft = imgEarth.style.PixelLeft + (Sin(txtAngle.value) * 150) imgMoon.Style.PixelTop = imgEarth.style.PixelTop + (Cos(txtAngle.value) * 150) End Sub 1 2 3

36. Mark Dixon Page 36 Example: Moon Orbit v1.1 Use: –setInterval change angle move moon’s horizontal move moon’s vertical

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

38. Mark Dixon Page 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 enter the rate of increase 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.

39. Mark Dixon Page 39 Tutorial Exercises: Moon Orbit LEARNING OBJECTIVE: use functions to perform more complex calculations for circular motion Task 1: Get the Moon Orbit v1.0 example working. The code is provided on the slides. Task 2: Modify your page so that the Earth is centred properly on the page. Use code the is provided as inspiration. Task 3: Modify your page so that the plus and minus buttons work. Use code from previous example as inspiration. Task 4: Get the Moon Orbit v1.1 example working. The moon should continuously orbit (rotate around) the earth, without the user doing anything. Make a separate copy of your page, and remove the plus and minus buttons. Use code from previous example as inspiration. You will need to use SetInterval (Ball Character example).