03 – information processing: expressions, operators & functions
DESCRIPTION
03 – Information Processing: Expressions, Operators & Functions. 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!" - PowerPoint PPT PresentationTRANSCRIPT
Mark Dixon, SoCCE SOFT 131 Page 1
03 – Information Processing:Expressions, Operators & Functions
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
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
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
Mark Dixon, SoCCE SOFT 131 Page 5
Script Debugging
• Labs have script debugging disabled
• Tools menu– Internet Options
• Advanced tab– Disable Script
Debugging
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
Mark Dixon, SoCCE SOFT 131 Page 7
Meet George
• Common Boa Constrictor– boa constrictor imperator
• Native toCentral & SouthAmerica
• No venom(no poison)
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
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+
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
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>
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
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
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
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)
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>
Mark Dixon, SoCCE SOFT 131 Page 17
Expression Evaluation
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
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
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
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)
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
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
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)
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
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
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)
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
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>
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
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
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.
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