CSCE 102 – Chapter 11 (Performing Calculations) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza Department of Computer Science & Engineering

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 2 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

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 3 Calculator Mathematical operators + Addition - Subtraction * Multiplication / Division

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 4 Calculator Math with constants var result1, result2, result3 result1 = result2 = 2 * 4 result3 = 21 / 7

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 5 Calculator Math with variables var result1, result2, result3 result1 = result2 = 4 * result1

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 6 Calculator Changes are not retroactive var x, y, z x = 12 y = 5 z = x + y What’s the value of z at this point? x = 6 Now what’s the value of z?

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 7 Calculator Spaces ignored x=3*4 Equivalent

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 8 Calculator Problems: Text box values are stored as strings Can’t do mathematical operations on strings To convert a string into a real numeric value use the parseFloat() function Use parseInt() to convert a string into an integer value

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 9 Calculator var xStr = “75.2”, yStr=“10.1” var xNum=parseFloat(xStr) var yNum=parseFloat(yStr) var z = xNum + yNum Ch11-Ex-01

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 10 Calculator Running totals var x x = 0 … x = x + 1

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 11 Calculator Remember order of operations in an assignment statement x = x + 1 Do this first Then store result here

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 12 Calculator 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?

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 13 Calculator Increment operator ++x = 4 x = x + 1x++ (result 5) Ch11-Ex-02

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 14 Calculator Decrement operator –x = 4 x = x - 1x-- (result 3)

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 15 Calculator Equivalent forms: x++ and ++x x-- and --x Unless used in an assignment statement…

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 16 Calculator If operator follows variable then Assignment first Increment second x = 5 y = x++ Result: y = 5, x = 6

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 17 Calculator If operator precedes variable then Increment first Assignment second x = 5 y = ++x Result: y = 6, x = 6

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 18 Calculator Combination assignment operators x += 5 (x = x + 5) x -= 5 (x = x – 5) x *= 5 (x = x * 5) x /= 5 (x = x / 5)

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 19 Calculator 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 elements Call by

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 20 Calculator Precedence of operations (order of operations) Increment and decrement Multiplication and division Addition and subtraction Combination Left to right for multiples of the same operation Use parentheses to override

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 21 Calculator * ( 2 * 4 )

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 22 Calculator * * ( 2 * 4 ) – ( 7 * 8 ) – ( 7 * 8 ) – –

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 23 Calculator (9 + 2) * * 8 (9 + 2) * 4 – ( 7 * 8 ) (9 + 2) * 4 – 56 (11 * 4) – –

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 24 Calculator The Math object 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) [truncates decimal portion] PI – Math.PI [as in Math.PI*radius] Random – Math.random() [value between 0 and 1] Ch11-Ex-03

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 25 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

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 26 Returning Values from Functions Ch11-Ex-04

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 27 Returning Values from Functions Ch11-Ex-05 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) } alert("Answer #1 is "+firstAnswer) alert("Answer #2 is "+secondAnswer) testVar() alert("Answer #2 is "+secondAnswer) Known only within the testVar function

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 28 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

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 29 Returning Values from Functions Rules of Thumb Use var keyword to make a variable local Declare all global variables in 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.

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 30 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.

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 31 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.

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 32 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)

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 33 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)

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 34 Returning Values from Functions Declaration: function calcAvg(n1, n2, n3) { return (n1 + n2 + n3) / 3 } Call: x = calcAvg(1, 2, 3) Ch11-Ex-06

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 35 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

CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 36 Debugging Rectangle Calculator function calcArea(l, w) { var area = l*w } function calcPerim(l, w) { var perimeter = 2*(l+w) } function calc(f) { var width = parseFloat(widthBox) var length = parseFloat(lengthBox) area = calcArea(length.value, width.value) areaBox.value = area perimeterBox.value = calcPerim(length.value, width.value) } Area and Perimeter Calculator Enter the width of the rectangle: Enter the length of the rectangle: <input type="button" value="Calculate" onclick="calc(document.calculatorForm)" /> The area is: The perimeter is: