Embed Size (px)
Citation preview
Mark Dixon Page 1
04 – 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).
function btnAns_OnClick(){ document.bgColor = "yellow"; lblComment.innerText = "Correct, well done!"; document.bgColor = "cyan"; lblComment.innerText = "Sorry, try again";}
1
ClickOnClick
Mark Dixon Page 3
function btnAns_OnClick(){ document.bgColor = "yellow"; lblComment.innerText = "Correct, well done!"; document.bgColor = "cyan"; lblComment.innerText = "Sorry, try again";}
Questions: Properties
• Consider the following code:
a) How many unique properties does it contain?
b) Name the properties.
2
bgColor, innerText
Mark Dixon Page 4
function btnAns_OnClick(){ document.bgColor = "yellow"; lblComment.innerText = "Correct, well done!"; document.bgColor = "cyan"; lblComment.innerText = "Sorry, try again";}
Questions: Keywords
• Consider the following code:
a) How many unique keywords does it contain?
b) Name the keywords.
1
function
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– identify inputs, outputs, and processes of simple
problems– 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
• Code cannot be understood
Errors: Syntax
missing ( syntax error
• Click Yes
• keyboard cursor moves to error
Mark Dixon Page 8
• Code cannot be executed (ignored)
Errors: Run time
• 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 insteadof red
Mark Dixon Page 10
Questions: Errors• Spot the errors (you
should find 6), and
• decide whether they are syntax or logical
<html> <head><title>Hello</title></head> <body onclick="window_onClick()"> <input type="button" id="btnRed" Value="Red" onclick="btnRed_onClick()" /> <input type="button" id="btnBlue" Value="Blue" onclick="btnBlue_onClick()" /> <p id="lblHello"></p> </body></html>
<script language="JavaScript"> function btnBlue_onCluck(){ document.bgColor = "Red"; }
function btnRed_onlick(){ document.bgColor "Red"; }
function Window_onClick(){ document.bgColour = "White"; }</script>
JavaScriptis case sensitive
Mark Dixon Page 11
Meet George
• Common Boa Constrictor– boa constrictor imperator
• Native toCentral & SouthAmerica
• 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 objectivesno 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 Data Process Output Data
9
716+
following this pattern:
for example: to add two numbers: 7 + 9 = 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
9
5)32( f
c
Mark Dixon Page 16
• To convert from Fahrenheit to Celsius:
e.g. Fahrenheit is:
Example: Temp (processing)
9
5)32( f
c
9
5)3250( c
c = 10
50
9
518
9
90
Mark Dixon Page 17
Operators
• 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
9
5)32( f
c
c = ((f – 32) * 5) / 9convert mathematical symbols into operators
Mark Dixon Page 18
Example: Temp (User Interface)
<html> <head><title>Temperature</title></head> <body> <p>Fahrenheit: <input id="txtFah" type="text" style="background-color: lime" /> <input id="btnCalc" type="button" value="Calculate" /></p> <p id="parCel" style="background-color: Yellow; width: 100px;">0</p> </body></html>
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)<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" onclick="btnCalc_onClick()" /></p> <p id="parCel" style="background-color: Yellow; width: 100px;">0</p> </body></html>
<script language="JavaScript"> function btnCalc_onClick(){ parCel.innerText = ((txtFah.value - 32) * 5) / 9; }</script>
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 = 68can evaluate expression:parCel.innerText = ((txtFah.value - 32) * 5) / 9 = ((68 - 32) * 5) / 9 = (36 * 5) / 9 = (180 / 9 = 20
Mark Dixon Page 23
Expression Errors
many peopleinstinctively knowthese are wrong
data
operator
data data data
operator operator
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
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 (user click)– get ball char to move right on page automatically
Mark Dixon Page 25
Example: Ball Char (v2)<html> <head> <title>Ball Char</title> </head>
<body style="background-color: Lime;" onload="window_onload()"> <img id="picBall" src="BallChar.gif" style="position: absolute;" /> </body></html>
<script language="JavaScript"> function Window_OnLoad(){ window.setInterval("MoveBallRight()", 50); }
function MoveBallRight(){ picBall.style.posLeft = picBall.style.posLeft + 5; }</script>
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
sqrt
Function
(16) 4
Mark Dixon Page 27
Functions (cont.)• Functions: come before the data (which is
in brackets) sqrt(16) square root result is 4
abs(-23) absolute value result is 23
floor(2.543) integer result is 2
sin(3.1) sine result is 0.998
cos(0) cosine result is 1
random() random number result 0 to 0.99999...
Mark Dixon Page 28
Questions: Expressionsa) What is the result of:
Math.floor(12.93) / 2
b) What is the result of:
1 + Math.floor(5.76786) + Math.sqrt(Math.floor(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
Math.sqrt(9)
Math.floor(16.7658765)
Mark Dixon Page 29
Problem solving: Pseudo-code
• To solve problem– think about how
you would solve it manually (without computer)
– think of steps you would take
When btnGo is clicked, Read txtNum Add 6 Put in parRes
function btnGo_onClick(){ parRes.innerText = txtNum.value + 6;}
• Convert to code
Mark Dixon Page 30
Question: Pseudo-code
• Write VBScript code that does the following:
when btnAdd is clicked read txtAge add 1 put in parNewAge
function btnAdd_onClick(){ parNewAge.innerText = txtAge.value + 1;}
Mark Dixon Page 31
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 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 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.
