Programming the Web using XHTML and JavaScript Chapter 11 Calculations
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
Calculations Mathematical operators + Addition - Subtraction * Multiplication / Division
Calculations Math with constants var result1, result2, result3
Calculations Math with variables var result1, result2, result3
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?
Calculations Spaces (white space) ignored x=3*4 x = 3*4 x = 3* 4 Equivalent
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
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
Calculations Running totals var x x = 0 … x = x + 1
Calculations Remember order of operations in an assignment statement x = x + 1 Do this first Then store result here
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?
Calculations Increment operator ++ x = 4 x = 4 x = x + 1 x++ (result 5) Ch11-Ex-02
Calculations Decrement operator -- x = 4 x = 4 x = x - 1 x-- (result 3)
Calculations When used in an assignment statement… (Almost) Equivalent forms: x++ and ++x x-- and --x When used in an assignment statement…
Calculations If operator follows variable then x = 5 y = x++ Assignment first Increment second x = 5 y = x++ Result: y = 5, x = 6
Calculations If operator precedes variable then x = 5 y = ++x Increment first Assignment second x = 5 y = ++x Result: y = 6, x = 6
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!
Calculations Combination assignment operators x += 5 (x = x + 5)
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>
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
Calculations 9 + 2 * 4 9 + ( 2 * 4 ) 9 + 8 17
Calculations 9 + 2 * 4 - 7 * 8 9 + ( 2 * 4 ) – ( 7 * 8 ) 9 + 8 – ( 7 * 8 ) 9 + 8 – 56 17 – 56 -39
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
Calculations Is +, -, *, and / all JavaScript can do for math? Those are the four primitive functions Whole library of advanced functions available
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
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
Returning Values from Functions
Returning Values from Functions Fun with values: What happens to the second variable? Ch11-Ex-04
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
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
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
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
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
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)
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)
Returning Values from Functions Declaration: function calcAvg(n1, n2, n3) { return (n1 + n2 + n3) / 3 } Call: x = calcAvg(1, 2, 3) Ch11-Ex-06
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
Assignment See Assignments Web Page Appearance Technical correctness of code Proper results