30
Mark Dixon 1 03 – Information Processing
| Date post: | 04-Jan-2016 |
| Category: |
Documents |
| Upload: | osborn-cannon |
| View: | 216 times |
| Download: | 0 times |
Mark Dixon 1
03 – Information Processing
Mark Dixon 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" parComment.innertext = "Correct, well done!" document.bgcolor = "cyan" parComment.innertext = "Sorry, try again"End Sub
1
ClickOnClick
Mark Dixon 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" parComment.innertext = "Correct, well done!" document.bgcolor = "cyan" parComment.innertext = "Sorry, try again"End Sub
2
bgcolor, innertext
Mark Dixon 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" parComment.innertext = "Correct, well done!" document.bgcolor = "cyan" parComment.innertext = "Sorry, try again"End Sub
2
Sub End
Mark Dixon 5
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:
– 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 6
Meet George• Common Boa Constrictor
– boa constrictor imperator
• Native toCentral & SouthAmerica
• No venom(no poison)
Mark Dixon 7
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 8
Example: Temp (Analysis)•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 9
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
Sub btnGo_onClick() parRes.innerText = txtNum.value + 6End Sub
• Convert to code
Mark Dixon 10
Question: Pseudo-code• Write VBScript code that does the following:
when btnAdd is clicked read txtAge add 1 put in parNewAge
Sub btnAdd_onClick() parNewAge.innerText = txtAge.Value + 1End Sub
Mark Dixon 11
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 12
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 13
• 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 14
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 15
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 16
Maths with Objects
c = ((f – 32) * 5) / 9
parCel.innerText = ((txtFah.value - 32) * 5) / 9
Mark Dixon 17
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" /></p> <p id="parCel" style="background-color: Yellow; width: 100px;">0</p> </body></html>
<script language="vbscript"> Sub btnCalc_OnClick() parCel.innertext = ((txtFah.value - 32) * 5) / 9 End Sub</script>
Mark Dixon 18
Expression Evaluation
Mark Dixon 19
• 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 20
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 21
Programming vs. Maths 2• In maths:
x = y * 2y * 2 = x
• Are the same
• In programming:txtX.value = txtY.value * 2
txtY.value * 2 = txtX.value
left side is destination – cannot have expression
Mark Dixon 22
Functions• Used to:
– process (manipulate) data
• Functions (& Operators):– take input data/parameters (1 or more item)– process it– return a result
• which replaces the expression (substitution)
input output
SQR
Function
(16) 4
Mark Dixon 23
Functions (cont.)• Functions: come before the data (which is
in brackets) Sqr(9) square root result is 3
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
Rnd() random number result 0 to 0.99999...
Mark Dixon 24
Questions: Expressionsa) What is the result of:
Int(12.93) / 2
b) Write an expression to:
give the integer value of txtNum
c) Write an expression to:
put the square root of 9 into txtRes
6
Int(txtNum.value)
txtRes.value = Sqr(9)
Mark Dixon 25
Example: Expressions• demonstrates use of expressions in assignment
statements:
• little use for an end-user
Mark Dixon 26
Example: Student Loan (Analysis)
• What: Calculate annual student load repayment from salary
• How:
• Algorithm:– read annual salary– deduct £21000– calculate 9%– display result
Mark Dixon 27
Example: Student Loan (Design)
• When Calculate button is clicked:– read annual salary text
box– deduct £21000– calculate 9%– put result in paragraph
• Test Data: Input Process Output
– £21000 (21000-21000)*0.09 = £0– £22000 (22000-21000)*0.09 = £90
Mark Dixon 28
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 29
Tutorial Exercises: Expressions• LEARNING OBJECTIVE:
to assign a value to a object's property,• using combination of literal values, operators, functions, and
identifiers
• Task 1: get the expressions example working• Task 2: modify your page to add an extra button that performs some
calculation using the first text box (putting the result into the second text box).
Mark Dixon 30
Tutorial Exercises: Student Loan• LEARNING OBJECTIVE:
implement an algorithm in code
• Task 1: Create the user interface (page design) for the Student Loan example (from the lecture), using HTML tags (you will need a text box, a button, and a paragraph).
• Task 2: Add code that implements the following algorithm:When the Calculate button is clicked:– read annual salary text box– deduct £21000– calculate 9%– put result in paragraph
• Task 3: Modify your program so that it calculates and displays monthly income and repayment amounts (as well an annual).
