Download presentation
Presentation is loading. Please wait.
1
Programming the Web using XHTML and JavaScript
Chapter 11 Calculations
2
Calculations Goal: for a rectangle create a calculator that determines the: Area Perimeter Need: Input fields Width Height Output fields Ability to perform calculations Ability to invoke calculation function
3
Calculations Mathematical operators + Addition - Subtraction
* Multiplication / Division
4
Calculations Math with constants var result1, result2, result3
5
Calculations Math with variables var result1, result2, result3
6
Calculations Changes are not retroactive var x, y, z x = 12 y = 5
What’s the value of z at this point? x = 6 Now what’s the value of z?
7
Calculations Spaces (white space) ignored x=3*4 x = 3*4 x = 3* 4
Equivalent
8
Calculations Problems: parseFloat() parseInt()
Text box values are stored as strings Can’t do mathematical operations on strings Ch11-Ex-00 parseFloat() Converts a string into a real value parseInt() Converts a string into an integer value
9
Calculations Ch11-Ex-01 var xStr = “75.2”, yStr=“10.1”
var xNum=parseFloat(xStr) var yNum=parseFloat(yStr) var z = xNum + yNum Ch11-Ex-01
10
Calculations Running totals var x x = 0 … x = x + 1
11
Calculations Remember order of operations in an assignment statement
x = x + 1 Do this first Then store result here
12
Calculations var x … x = 35 x = x + 15
Value of x before the next statement is executed? Value of x just after the previous statement is executed?
13
Calculations Increment operator ++ x = 4 x = 4
x = x + 1 x++ (result 5) Ch11-Ex-02
14
Calculations Decrement operator -- x = 4 x = 4
x = x - 1 x-- (result 3)
15
Calculations When used in an assignment statement…
(Almost) Equivalent forms: x++ and ++x x-- and --x When used in an assignment statement…
16
Calculations If operator follows variable then x = 5 y = x++
Assignment first Increment second x = 5 y = x++ Result: y = 5, x = 6
17
Calculations If operator precedes variable then x = 5 y = ++x
Increment first Assignment second x = 5 y = ++x Result: y = 6, x = 6
18
Calculations In a nutshell: Always use the x++ form
Unless you know the ++x form is what you really want If you use the ++x form comment why!
19
Calculations Combination assignment operators x += 5 (x = x + 5)
20
Calculations Problem: decrement operator has specific use in XHTML syntax Can’t use in JavaScript and stay compliant with XHTML Solution: put JavaScript code in an external JavaScript file (filename.js) Include only JavaScript, not <script> elements Call by <script src=“filename.js” type=“text/javasacript”> </script>
21
Calculations Precedence of operations (order of operations)
Increment and decrement Multiplication and division Addition and subtraction Combination Left to right for multiples of the same level of operation Use parentheses to override Hint: use parentheses on any complex operation
22
Calculations 9 + 2 * 4 9 + ( 2 * 4 ) 9 + 8 17
23
Calculations 9 + 2 * 4 - 7 * 8 9 + ( 2 * 4 ) – ( 7 * 8 )
9 + 8 – ( 7 * 8 ) 9 + 8 – 56 17 – 56 -39
24
Calculations (9 + 2) * 4 - 7 * 8 (9 + 2) * 4 – ( 7 * 8 )
(9 + 2) * 4 – ( 7 * 8 ) (9 + 2) * 4 – 56 (11 * 4) – 56 44 – 56 -12
25
Calculations Is +, -, *, and / all JavaScript can do for math?
Those are the four primitive functions Whole library of advanced functions available
26
Calculations The Math object Math methods: Ch11-Ex-03
Math.methodname(…) Math methods: Square root – Math.sqrt(x) Power – Math.pow(x,n) Round – Math.round(x) [if .5 round up, else down] Floor – Math.floor(x) [down to next integer] Book is wrong on this one (e.g. floor(-5.2) is -6 PI – Math.PI [as in Math.PI*radius] Random – Math.random() [value between 0 and 1] …and many more… Ch11-Ex-03
27
Returning Values from Functions
Scope of a variable Global – can be used anywhere in the source document Local – can be used only within a specific function
28
Returning Values from Functions
29
Returning Values from Functions
Fun with values: What happens to the second variable? Ch11-Ex-04
30
Returning Values from Functions
<head> <title>Ch11-Ex-05</title> <script type="text/javascript"> var firstAnswer = 93.7 var secondAnswer = "New York" alert("Answer #1 is "+firstAnswer) alert("Answer #2 is "+secondAnswer) function testVar() { var secondAnswer="Florida" alert("Answer #2 in testVar is "+secondAnswer) } </script> </head> <body> testVar() </body> Known only within the testVar function
31
Returning Values from Functions
Declaring the variable (using var) makes it local Local variables can’t be changed outside their function That means other programming team members won’t write code that changes your variables Ch11-Ex-05
32
Returning Values from Functions
Rules of Thumb Use var keyword to make a variable local Declare all global variables in <head> section Declaring a variable without using var: Makes it global No matter where the declaration occurs Variables are known only to the web page where they are used i.e., you can’t use variables from one page, load a new page, and expect those variable values to still be there – they won’t be
33
Returning Values from Functions
Similar to using parameters except… The function itself has a value x = 2 x = sqrt(4) The sqrt function is equivalent to the number 2 when called with a parameter of 4
34
Returning Values from Functions
So far we’ve used functions to do things and store the results in variables Now, we’re going to make the functions themselves have value
35
Returning Values from Functions
Declaration: function calcAvg(n1, n2, n3) { var average average = (n1 + n2 + n3) / 3 alert(“The average is “+average) } Call: calcAvg(1, 2, 3)
36
Returning Values from Functions
Declaration: function calcAvg(n1, n2, n3) { var average average = (n1 + n2 + n3) / 3 return average } Call: x = calcAvg(1, 2, 3)
37
Returning Values from Functions
Declaration: function calcAvg(n1, n2, n3) { return (n1 + n2 + n3) / 3 } Call: x = calcAvg(1, 2, 3) Ch11-Ex-06
38
Finally, the calculator
Goal: create a calculator that determines the area and perimeter of a rectangle Need: Input fields for width and length Output fields for area and perimeter Ability to perform calculations Ability to invoke calculation function Example: Ch11-Ex-07 Note: example made with “help” from SharePoint
39
Assignment See Assignments Web Page Appearance
Technical correctness of code Proper results
Similar presentations
