1. Mark Dixon 1 03 – Information Processing

2. 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

3. 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

4. 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

5. 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

6. Mark Dixon 6 Meet George Common Boa Constrictor –boa constrictor imperator Native to Central & South America No venom (no poison)

7. 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

8. 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

9. 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

10. 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

11. Mark Dixon 11 Information Processing All computing problems: Input DataProcess Output Data 9 7 16+ following this pattern: for example: to add two numbers: 7 + 9 = 16

12. 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

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

14. Mark Dixon 14 Operators Operators sit between the data = assignment operator 5 + 2 addition operatorresult is 7 5 - 2 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

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

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

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

18. Mark Dixon 18 Expression Evaluation

19. 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 = ((68 - 32) * 5) / 9 = (36 * 5) / 9 = (180 / 9 = 20

20. Mark Dixon 20 Expression Errors many people instinctively know these are wrong data operator data 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

21. 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 

22. 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

23. 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...

24. 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)

25. Mark Dixon 25 Example: Expressions demonstrates use of expressions in assignment statements: little use for an end-user

26. 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

27. 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(21000-21000)*0.09 =£0 –£22000(22000-21000)*0.09 =£90

28. 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)

29. 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).

30. 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).