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 Click OnClick

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 to Central & South America 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 objectives no 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 + 6 End 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 + 1 End Sub

Mark Dixon 11 Information Processing All computing problems: Input DataProcess Output Data following this pattern: for example: to add two numbers: = 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

Mark Dixon 13 To convert from Fahrenheit to Celsius: e.g. Fahrenheit is: Example: Temp (processing) c = 10 50

Mark Dixon 14 Operators Operators sit between the data = assignment operator addition operatorresult is subtraction operatorresult is 3 5 * 2 multiplication operatorresult is 10 5 / 2 division operatorresult is 2.5 c = ((f – 32) * 5) / 9 convert mathematical symbols into operators

Mark Dixon 15 Example: Temp (User Interface) Temperature Fahrenheit: 0

Mark Dixon 16 Maths with Objects c = ((f – 32) * 5) / 9 parCel.innerText = ((txtFah.value - 32) * 5) / 9

Mark Dixon 17 Example: Temp (code) Temperature Fahrenheit: 0 Sub btnCalc_OnClick() parCel.innertext = ((txtFah.value - 32) * 5) / 9 End Sub

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 = 68 can evaluate expression: parCel.innerText = ((txtFah.value - 32) * 5) / 9 = (( ) * 5) / 9 = (36 * 5) / 9 = (180 / 9 = 20

Mark Dixon 20 Expression Errors many people instinctively know these are wrong data operator data operator txtNum1.Value * * 12 + txtNum1.Value d o o d o d txtNum1.Value + 1 – d o d o d d

Mark Dixon 21 Programming vs. Maths 2 In maths: x = y * 2 y * 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 Cos(0)cosine result is 1 Rnd()random number result 0 to

Mark Dixon 24 Questions: Expressions a)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: InputProcess Output –£21000( )*0.09 =£0 –£22000( )*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).