33
Mark Dixon, SoCCE SOFT 131 Page 1 03 – Information Processing: Expressions, Operators & Functions

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

  • View
    224

  • Download
    2

Embed Size (px)

Citation preview

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