04 – Information Processing: Expressions, Operators & Functions
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" lblComment.innertext = "Correct, well done!" document.bgcolor = "cyan" lblComment.innertext = "Sorry, try again" End Sub 1 Click OnClick
Questions: Properties Consider the following code: a) How many unique properties does it contain? b) Name the properties. Sub btnAns_OnClick() document.bgcolor = "yellow" lblComment.innertext = "Correct, well done!" document.bgcolor = "cyan" lblComment.innertext = "Sorry, try again" End Sub 2 bgcolor, innertext
Questions: Keywords Consider the following code: a) How many unique keywords does it contain? b) Name the keywords. Sub btnAns_OnClick() document.bgcolor = "yellow" lblComment.innertext = "Correct, well done!" document.bgcolor = "cyan" lblComment.innertext = "Sorry, try again" End Sub 2 Sub End
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
Meet George Common Boa Constrictor Native to Central & South America 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 User Requirements SPECIFICATION Software 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
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) Sub 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" /></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>
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
Example: Ball Character (design) WHEN Right button Clicked move ball character right WHEN Left button Clicked move ball character left WHEN Up button Clicked move ball character up WHEN Down button Clicked move ball character down
Absolute Positioning change properties – change position picBall.style.posTop picBall.style.posLeft picBall.height picBall.width document.body.clientwidth change properties – change position
Example: Ball Character (script) <html> <head><title>Ball Character</title></head> <body bgcolor="#00ff00"> <input type="button" id="btnRight" value="Right" /> <input type="button" id="btnDown" value="Down" /> <img id="picBall" src="BallChar.gif" style="position: absolute" /> </body> </html> <script language="VBScript"> Sub Window_OnLoad() picBall.style.posLeft = 200 picBall.style.posTop = 100 End Sub Sub btnRight_OnClick() picBall.style.posLeft = picBall.style.posLeft + 10 Sub btnDown_OnClick() picBall.style.posTop = picBall.style.posTop + 10 </script>
Substitution Right hand side of assignment (after = sign) contains expressions (calculations)
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
Example: Ball Char (v2) Procedure name <html> <head> <title>Ball Char</title> </head> <body style="background-color: Lime;"> <img id="picBall" src="BallChar.gif" style="position: absolute;" /> </body> </html> <script language="vbscript"> Sub Window_OnLoad() window.setInterval "MoveBallRight()", 50 End Sub Sub MoveBallRight() picBall.style.posLeft = picBall.style.posLeft + 5 </script> Procedure name Interval (in milliseconds: 1000 = 1s)
Functions & Operators Function Used to: Both Functions & Operators: 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) Function Result SQR (16) 4
Functions (cont.) Functions: come before the data (which is in brackets) Sqr(16) square root result is 4 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...
Questions: Expressions What is the result of: Int(12.93) / 2 Write an expression to: give the square root of 9 Write an expression to: give the integer value of 16.7658765 6 Sqr(9) Int(16.7658765)
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 Sub btnGo_onClick() parRes.innerText = txtNum.value + 6 End Sub
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
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)
Tutorial Exercise: Ball Char LEARNING OBJECTIVE: to understand objects, events, properties, and event handler procedures, so that you can create dynamic content in your web-pages TASK 1: Get the Right and Down buttons from the Ball Character example working. (code provided, images in resources area on server). TASK 2: Get the Left and Up buttons working. (You will need to work out what code to use. Use the code provided as inspiration) TASK 3: Make the Ball Character blink when the user moves the mouse over it. (You will need to add code that changes the picture) TASK 4: Add a button to move the Ball Character diagonally. (You will need two lines of code in the same event handler)
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: hide the speed text box HINT: this should happen when the window loads, using style.visibility