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

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

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

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

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

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 :

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

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

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

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

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

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

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

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

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

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

Mark Dixon Page 17 Operators Operators sit between the data = assignment operator addition operatorresult is 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

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

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

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

Mark Dixon Page 21 Expression Evaluation

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 = (( ) * 5) / 9 = (36 * 5) / 9 = (180 / 9 = 20

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

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

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

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

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 Cos(0)cosine result is 1 Rnd()random number result 0 to

Mark Dixon Page 28 Questions: Expressions a)What is the result of: Int(12.93) / 2 b)What is the result of: 1 + Int( ) + 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 = 9 Sqr(9) Int( )

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

Mark Dixon Page 30 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

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

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

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

Mark Dixon Page 34 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

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

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

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

Mark Dixon Page 38 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 the code that is provided as inspiration. Task 3: Modify your page so that the plus and minus buttons work (add / subtract 1 from the angle – no need to re-calculate automatically). 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).