03 – Information Processing: Expressions, Operators & Functions
description
Transcript of 03 – Information Processing: Expressions, Operators & Functions
![Page 1: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/1.jpg)
Mark Dixon, SoCCE SOFT 131 Page 1
03 – Information Processing:Expressions, Operators & Functions
![Page 2: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/2.jpg)
Mark Dixon, SoCCE SOFT 131 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
ClickOnClick
![Page 3: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/3.jpg)
Mark Dixon, SoCCE SOFT 131 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
![Page 4: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/4.jpg)
Mark Dixon, SoCCE SOFT 131 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
![Page 5: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/5.jpg)
Mark Dixon, SoCCE SOFT 131 Page 5
Script Debugging
• Labs have script debugging disabled
• Tools menu– Internet Options
• Advanced tab– Disable Script
Debugging
![Page 6: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/6.jpg)
Mark Dixon, SoCCE SOFT 131 Page 6
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
![Page 7: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/7.jpg)
Mark Dixon, SoCCE SOFT 131 Page 7
Meet George
• Common Boa Constrictor– boa constrictor imperator
• Native toCentral & SouthAmerica
• No venom(no poison)
![Page 8: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/8.jpg)
Mark Dixon, SoCCE SOFT 131 Page 8
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
![Page 9: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/9.jpg)
Mark Dixon, SoCCE SOFT 131 Page 9
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 Data Process Output Data
9
716+
![Page 10: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/10.jpg)
Mark Dixon, SoCCE SOFT 131 Page 10
Information Processing (cont.)• Hence, to solve any computing problem ask:
– what information goes in
– what processing is done to it
– what information comes out
![Page 11: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/11.jpg)
Mark Dixon, SoCCE SOFT 131 Page 11
Example: Temp (User Interface)
<html> <head> <title>Temperature</title> </head> <body> <p>Fahrenheit: <input id="txtFah" style="background-color: lime" type="text" /> <input id="btnCalc" type="button" value="Calculate" /></p> <p id="parCel" style="background-color: Yellow; width: 100px;">0</p> </body></html>
![Page 12: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/12.jpg)
Mark Dixon, SoCCE SOFT 131 Page 12
• To convert from Fahrenheit to Celsius:
e.g. Fahrenheit is:
Example: Temp (processing)
9
5)32( f
c
9
5)3250( c
c = 10
Fahrenheit Process Celsius
50
![Page 13: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/13.jpg)
Mark Dixon, SoCCE SOFT 131 Page 13
Operators• Sit between the data
= assignment operator
5 + 2 addition operator result is 7 5 - 2 subtraction operator result is 3 5 * 2 multiplication operator result is 10 5 / 2 division operator result is 2.5
• convert mathematical symbols into operators:
c = ((f – 32) * 5) / 9
![Page 14: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/14.jpg)
Mark Dixon, SoCCE SOFT 131 Page 14
Symbolic Representation
• Symbols (names) represent datatxtFah.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
![Page 15: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/15.jpg)
Mark Dixon, SoCCE SOFT 131 Page 15
• 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)
![Page 16: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/16.jpg)
Mark Dixon, SoCCE SOFT 131 Page 16
Example: Temp (code)<html> <head> <title>Untitled Page</title> <script language="vbscript">
Sub btnCalc_OnClick() parCel.innertext = ((txtfah.value - 32) * 5) / 9 End Sub </script> </head> <body> <p>Fahrenheit: <input id="txtFah" style="background-color: lime" type="text" /> <input id="btnCalc" type="button" value="Calculate" /></p> <p id="parCel" style="background-color: Yellow; width: 100px;">0</p> </body></html>
![Page 17: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/17.jpg)
Mark Dixon, SoCCE SOFT 131 Page 17
Expression Evaluation
![Page 18: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/18.jpg)
Mark Dixon, SoCCE SOFT 131 Page 18
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 peopleinstinctively knowthese are wrong
data
operator
data data data
operator operator
![Page 19: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/19.jpg)
Mark Dixon, SoCCE SOFT 131 Page 19
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
![Page 20: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/20.jpg)
Mark Dixon, SoCCE SOFT 131 Page 20
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
![Page 21: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/21.jpg)
Mark Dixon, SoCCE SOFT 131 Page 21
Example: Ball Char (v2)<html> <head> <title>Ball Char v2</title> <script language="VBScript"> Sub window_OnLoad() window.SetInterval "MoveBallRight", 50 End Sub Sub MoveBallRight() picBall.hspace = picBall.hspace + 5 End Sub </script> </head> <body bgcolor="#00ff00"> <p><img id=picBall src="BallChar.jpg" hspace=0 vspace=11></p> </body></html>
Procedure name
Interval(in milliseconds: 1000 = 1s)
![Page 22: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/22.jpg)
Mark Dixon, SoCCE SOFT 131 Page 22
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
![Page 23: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/23.jpg)
Mark Dixon, SoCCE SOFT 131 Page 23
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
![Page 24: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/24.jpg)
Mark Dixon, SoCCE SOFT 131 Page 24
Questions: Expressionsa) 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)
![Page 25: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/25.jpg)
Mark Dixon, SoCCE SOFT 131 Page 25
Example: Navigation• Survey ship
– mapping sea bed– must avoid oil rigs– 8km of streamers
(with hydrophones)– 7-9 hours to turn
• know– cable length (500m)– cable angle
• work out– how far out
![Page 26: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/26.jpg)
Mark Dixon, SoCCE SOFT 131 Page 26
Example: Navigation
• Need to ensure horizontal distance– between ship and outer bouy (a) is less than– between ship and oil rig (b)
• bouy moves with current
• sensor equipment worth ~£30 million
• impossible to replace quickly
a
b
![Page 27: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/27.jpg)
Mark Dixon, SoCCE SOFT 131 Page 27
Trigonometry: Triangles
hypotenuse (H) =500m
opposite (O)
adjacent (A)
SOH CAH TOA
Sin(ang) = O/HO = Sin(ang) * H
Cos(ang) = A/HA = Cos(ang) * H
Tan(ang) = O/A
angle (ang)
![Page 28: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/28.jpg)
Mark Dixon, SoCCE SOFT 131 Page 28
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
![Page 29: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/29.jpg)
Mark Dixon, SoCCE SOFT 131 Page 29
Example: Navigation<html> <head> <title>Navigation</title> <script language=vbscript> Sub Window_OnLoad() imgShip.style.left = 100 imgShip.style.top = 200 imgOilR.style.left = 150 imgOilR.style.top = 100 End Sub </script> </head> <body> <p> Angle: <input id=txtAngle type=text value=10 /> <input id=btnCalc type=button value=Calc /> </p> <p id=parAngle></p> <img id=imgShip src=Ship.gif style="position: absolute" /> <img id=imgBouy src=Bouy.gif style="position: absolute" /> <img id=imgOilR src=OilR.gif style="position: absolute" /> </body></html>
![Page 30: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/30.jpg)
Mark Dixon, SoCCE SOFT 131 Page 30
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
![Page 31: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/31.jpg)
Mark Dixon, SoCCE SOFT 131 Page 31
Tutorial Exercises: Exchange• LEARNING OBJECTIVE:
to assign a value to a object's property,• using combination of literal values, operators, functions, and
identifiers
• Task 1: create a new page that helps the user covert from Pounds to Dollars use the web to find the current exchange rate
![Page 32: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/32.jpg)
Mark Dixon, SoCCE SOFT 131 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 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.
![Page 33: 03 – Information Processing: Expressions, Operators & Functions](https://reader035.fdocuments.in/reader035/viewer/2022062423/56814580550346895db2590d/html5/thumbnails/33.jpg)
Mark Dixon, SoCCE SOFT 131 Page 33
Tutorial Exercises: Navigation• LEARNING OBJECTIVE:
to assign a value to a object's property,• using combination of literal values, operators, functions, and
identifiers
• Task 1: get the Navigation example working when the user clicks the Calc button, your program should calculate the angle in radians, and use this to re-position the bouy
• Task 2: modify the Navigation example so that the plus and minus buttons change the number of degrees by a value of 5