02 – Information Processing
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"; parComment.innerText = "Correct, well done!"; document.bgColor = "cyan"; parComment.innerText = "Sorry, try again"; } 1 Click OnClick
Questions: Properties Consider the following code: a) How many unique properties does it contain? b) Name the properties. function btnAns_OnClick(){ document.bgColor = "yellow"; parComment.innerText = "Correct, well done!"; document.bgColor = "cyan"; parComment.innerText = "Sorry, try again"; } 2 bgcolor, innertext
Questions: Keywords Consider the following code: a) How many unique keywords does it contain? b) Name the keywords. function btnAns_OnClick(){ document.bgColor = "yellow"; parComment.innerText = "Correct, well done!"; document.bgColor = "cyan"; parComment.innerText = "Sorry, try again"; } 1 function
Session Aims & Objectives 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
George the Snake Common Boa Constrictor boa constrictor imperator Native to Central & South America No venom (no poison)
Looking after George Problem: Solution 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
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
Problem solving: Pseudo-code To solve problem think about how you would solve it manually (without computer) think of steps you would take Convert to code When btnGo is clicked, Read txtNum Add 6 Put in parRes function btnGo_onClick(){ parRes.innerText = txtNum.value + 6; }
Question: Pseudo-code Write JavaScript code that does the following: when btnAdd is clicked read txtAge add 1 put in parNewAge function btnAdd_onClick(){ parNewAge.innerText = txtAge.Value + 1; }
Information Processing All computing problems: following this pattern: Input Data Process Output Data for example: to add two numbers: 7 + 9 = 16 9 7 16 +
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
Example: Temp (processing) To convert from Fahrenheit to Celsius: e.g. Fahrenheit is: 50 c = 10
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 convert mathematical symbols into operators c = ((f – 32) * 5) / 9
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>
Maths with Objects c = ((f – 32) * 5) / 9 parCel.innerText = ((txtFah.value - 32) * 5) / 9;
Example: Temp (code) function btnCalc_onClick(){ <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>
Expression Evaluation
Expressions The following assignment statement: parCel.innerText = ((txtFah.value - 32) * 5) / 9; contains an expression Given: txtFah.Value = 68; can evaluate expression: parCel.innerText = ((txtFah.value - 32) * 5) / 9; = ((68 - 32) * 5) / 9 = (36 * 5) / 9 = (180 / 9 = 20
Expression Errors 23 + 11 - txtNum1.Value * 2 data operator 23 + 11 - txtNum1.Value * 2 34 + * 12 + txtNum1.Value d o o d o d many people instinctively know these are wrong txtNum1.Value + 1 – 21 45 d o d o d d
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
Functions Function Used to: Functions (& Operators): process (manipulate) data Functions (& Operators): take input data/parameters (1 or more item) process it return a result which replaces the expression (substitution) input Function output sqrt (16) 4
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...
Questions: Expressions What is the result of: Math.floor(12.93) / 2 Write an expression to: give the integer value of txtNum Write a line of code to: put the square root of 9 into txtRes 6 Math.floor(txtNum.value) txtRes.value = Math.sqrt(9)
Example: Student Loan (Analysis) What: Calculate annual student loan repayment from salary How: Algorithm: read annual salary deduct £21000 calculate 9% display result Plan 2
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
Break
Session Aims & Objectives to introduce the idea of types of data introduce you to the interactive debugger Objectives, after this week’s sessions, you should be able to: recognise different types of data numeric string (text) correct errors relating to data types Use Debugger to locate and fix errors
Example: AddNum v1 Doesn't work! plus not doing what we expect <html> <head><title>Add Numbers</title></head> <body> <input id="txtNum1" type="text" /><br /> <input id="txtNum2" type="text" /><br /> <input id="btnAdd" type="button" value="Add" onclick="btnAdd_onClick()" /> <p id="parResult"></p> </body> </html> <script language="JavaScript"> function btnAdd_onClick(){ parResult.innerText = txtNum1.value + txtNum2.value; } </script> Doesn't work! plus not doing what we expect
Types of Information Numeric (numbers) 29 (integer/whole) 56.23 (real/decimal) String (text) "Hello there!" "BOO" Pictures (numbers) Sound (numbers)
AddNum problem The + operator works with: Text input boxes store text: numbers, and text 23 + 16 39 "23" + "16" "2316" double quotes enclose text Text input boxes store text: txtNum1.value + txtNum2.value We need to convert text to numbers
String Functions parseInt("63") convert to integer result is 63 String("cat").charAt(0) result is "c" String("hello there!").slice(4,7) result is "o t" String("hello there!").substr(4,7) result is "o there" String("S Smith").length result is 7
The Empty String Two double quotes (no space between) "" Used to clear contents: txtNum.value = "";
String Expressions
Questions: String Expressions What is the result of: String("what is the time?").substr(3, 4) What is the result of: String("bob sal").slice(2,6) Write an expression to: convert "16" to a number Write an expression to: give the first two letters of "Mr Jon Smith" "t is" "b sa" parseInt("16") String("Mr Jon Smith").substr(0, 2)
String Expressions same pattern as numeric expressions: "What is " + txtN1.value + " times " data operator
String Expressions & Errors "What is twice " txtN1.value + "?" "What is 6 minus " + + txtN1.value + "?" "This is a number + txtN1.value ERROR! missing operator ERROR! missing data ERROR! missing "
Example: AddNum v2 parseInt converts to Integer <html> <head><title>Add Numbers</title></head> <body> <input id="txtNum1" type="text" /><br /> <input id="txtNum2" type="text" /><br /> <input id="btnAdd" type="button" value="Add" onclick="btnAdd_onClick()"/> <p id="parResult"></p> </body> </html> <script language="javascript"> function btnAdd_onClick(){ parResult.innerText = parseInt(txtNum1.value) + parseInt(txtNum2.value); } </script> parseInt converts to Integer
Error Types 3 error types : 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.
Errors: Syntax Code cannot be understood missing ( syntax error Browsers often ignore code with errors
Errors: Run time Code cannot be executed Computer missing e run time error Computer just symbol matching No intelligence
Errors: Logical Code does not do what you wanted blue instead of red
Questions: Errors Spot the errors (you should find 6), and <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> Spot the errors (you should find 6), and decide whether they are syntax or logical JavaScript is case sensitive
Debugging key skill: first step typical pattern in early tutorials: locate the cause of a bug using testing methods first step narrow it down as much as possible typical pattern in early tutorials: student: it doesn't work lecturer: what doesn't work student: my code lecturer: yes, but which bit exactly student: ???? lecturer: run your program, take me through it, which bits work, and where exactly does it go wrong student: when I click this, nothing happens lecturer: which bit of code is responsible for doing that? student: this bit
Debugging Process What happens when run? Nothing? Errors (syntax, or run-time)? Does the wrong thing (logical error)?
Debugging Process murder investigation doctor treating patient who-done-it? doctor treating patient diagnosis treatment scientific: observation experimentation (systematic)
Example: Drinks SPECIFICATION User Requirements Software Requirements Students wish to decide which supermarket sells drinks at the best price Software Requirements Functional: user enters offer details (bottle size, number of bottles, and price) computer calculates bottle price and price per pint Non-functional should be easy to use
Example: Drinks What happens when run? Nothing? think of murder investigation who-done-it? input boxes, button, and text displays therefore: html works! button does not respond therefore: prime suspect is button code
Example: Drinks (with ERRORS) <html> <head><title></title></head> <body> Bottle Size: <input id="txtBottleSize" type="text" />ml<br /> Quantity: <input id="txtQty" type="text" /><br /> Price (£): <input id="txtPrice" type="text" /><br /> <input id="btnCalc" type="button" value="Calc" onclick="btnCalc_onClick()" /><br /> £<span id="spnBottlePrice"></span> per bottle<br /> £<span id="spnPintPrice"></span> per pint<br /> </body> </html> <script language="javascript"> function Calc_onClick(){ spnBottlePrice.innerText = txtQty.valu / txtPrice.value; spnPintPrice.innerText = spnBottlePrice.innerText * (568 / txtBottleSize.value); } </script>
Debugging: Error Messages Always read message Always click Break (this means pause)
Debugging – Stop Button Click Stop button, to edit code
Debugging Clicking button gives NaN (Not a Number)
Debugging: Breakpoints Breakpoint: like DVD pause, when line hit Logic: if breakpoint hit, code will pause, therefore event handler is OK, must be code if nothing happens, breakpoint not hit, therefore event handler not working (this is what happens – check name)
Debugging: Breakpoints Examine code line by line can help, but time consuming Breakpoint (press F9 on keyboard):
Debugging: Breakpoint hit After event-handler fixed breakpoint hit, code paused
Debugging: Immediate Window Use ? to ask ‘what is in txtQty.valu’ F8 run single line
Debugging: Check output Is this right? if each bottle is 0.8, then 0.8 * quantity should be same as price 0.8 * 4 = 3.2 this is wrong therefore: bottle price must be wrong
Remarks Comments – ignored by computer: // JS uses 2 slashes for comments. function btnClear_onClick(){ txtNum1.Value = 0; // put 0 into txtNum1 } useful for: learning (you can explain your code) giving additional information (professional) disable line (rather than delete it)
Tutorial Exercises: Temperature LEARNING OBJECTIVE: to assign a value to an 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)
Tutorial Exercises: AddNum LEARNING OBJECTIVE: use a function to convert string (text) to integer (number) data Task 1: get the addnum examples (v1 and v2) working
Tutorial Exercises: Drinks LEARNING OBJECTIVE: use interactive debugger to identify and correct errors Task 1: Create a new project, and type in the code for the drinks example. Running it should display the html, but the calc button does nothing. Task 2: Use the interactive debugger to identify and correct the errors in the code.
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).