CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito...
-
Upload
moris-mcbride -
Category
Documents
-
view
220 -
download
0
Transcript of CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito...
![Page 1: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/1.jpg)
CSCE 102 – Chapter 11 (Performing Calculations)
CSCE 102 - General Applications Programming
CSCE 102 - General Applications Programming
Benito Mendoza 123/4/21 Benito Mendoza 1
By
Benito Mendoza
Department of Computer Science & Engineering
![Page 2: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/2.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 2
CalculatorGoal: create a calculator that determines the area and perimeter of a rectangleNeed:
Input fields for width and lengthOutput fields for area and perimeterAbility to perform calculationsAbility to invoke calculation function
![Page 3: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/3.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 3
CalculatorMathematical operators
+ Addition - Subtraction * Multiplication / Division
![Page 4: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/4.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 4
CalculatorMath with constants
var result1, result2, result3result1 = 5.1 + 6.23result2 = 2 * 4result3 = 21 / 7
![Page 5: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/5.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 5
CalculatorMath with variables
var result1, result2, result3result1 = 1 + 3result2 = 4 * result1
![Page 6: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/6.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 6
CalculatorChanges are not retroactivevar x, y, zx = 12y = 5z = x + y
What’s the value of z at this point?
x = 6 Now what’s the value of z?
![Page 7: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/7.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 7
CalculatorSpaces ignored
x=3*4x = 3*4x = 3* 4x = 3 * 4
Equivalent
![Page 8: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/8.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 8
CalculatorProblems:
Text box values are stored as stringsCan’t do mathematical operations on strings
To convert a string into a real numeric value use the parseFloat() functionUse parseInt() to convert a string into an integer value
![Page 9: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/9.jpg)
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
![Page 10: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/10.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 10
CalculatorRunning totals
var xx = 0… x = x + 1
![Page 11: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/11.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 11
CalculatorRemember order of operations in an assignment statement
x = x + 1Do this
first
Then store result here
![Page 12: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/12.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 12
Calculatorvar 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?
![Page 13: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/13.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 13
CalculatorIncrement operator ++
x = 4 x = 4x = x + 1 x++ (result 5)
Ch11-Ex-02
![Page 14: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/14.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 14
CalculatorDecrement operator –
x = 4 x = 4x = x - 1 x-- (result 3)
![Page 15: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/15.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 15
CalculatorEquivalent forms:
x++ and ++xx-- and --x
Unless used in an assignment statement…
![Page 16: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/16.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 16
Calculator
If operator follows variable thenAssignment firstIncrement second
x = 5y = x++
Result: y = 5, x = 6
![Page 17: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/17.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 17
Calculator
If operator precedes variable thenIncrement firstAssignment second
x = 5y = ++x
Result: y = 6, x = 6
![Page 18: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/18.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 18
CalculatorCombination assignment operators
x += 5 (x = x + 5)x -= 5 (x = x – 5)x *= 5 (x = x * 5)x /= 5 (x = x / 5)
![Page 19: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/19.jpg)
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 <script> elementsCall by
<script src=“filename.js” type=“text/javasacript”>
</script>
![Page 20: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/20.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 20
Calculator
Precedence of operations (order of operations)
Increment and decrementMultiplication and divisionAddition and subtractionCombination
Left to right for multiples of the same operationUse parentheses to override
![Page 21: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/21.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 21
Calculator
9 + 2 * 49 + ( 2 * 4 )
9 + 817
![Page 22: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/22.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 22
Calculator9 + 2 * 4 - 7 * 8
9 + ( 2 * 4 ) – ( 7 * 8 )9 + 8 – ( 7 * 8 )
9 + 8 – 5617 – 56
-39
![Page 23: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/23.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 23
Calculator(9 + 2) * 4 - 7 * 8
(9 + 2) * 4 – ( 7 * 8 )(9 + 2) * 4 – 56
(11 * 4) – 5644 – 56
-12
![Page 24: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/24.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 24
CalculatorThe 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
![Page 25: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/25.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 25
Returning Values from Functions
Scope of a variableGlobal – can be used anywhere in the source documentLocal – can be used only within a specific function
![Page 26: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/26.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 26
Returning Values from Functions
Ch11-Ex-04
![Page 27: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/27.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 27
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> <script type="text/javascript"> alert("Answer #1 is "+firstAnswer) alert("Answer #2 is "+secondAnswer) testVar() alert("Answer #2 is "+secondAnswer) </script> </body>
Known only within the
testVar function
![Page 28: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/28.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 28
Returning Values from Functions
Declaring the variable (using var) makes it localLocal variables can’t be changed outside their functionThat means other programming team members won’t write code that changes your variablesCh11-Ex-05
![Page 29: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/29.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 29
Returning Values from FunctionsRules of Thumb
Use var keyword to make a variable localDeclare all global variables in <head> sectionDeclaring a variable without using var makes it global no matter where the declaration occursVariables 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.
![Page 30: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/30.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 30
Returning Values from Functions
Similar to using parameters except…The function itself has a valuex = 2x = sqrt(4)The sqrt function is equivalent to the number 2 when called with a parameter of 4.
![Page 31: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/31.jpg)
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 variablesNow, we’re going to make the functions themselves have value.
![Page 32: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/32.jpg)
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)
![Page 33: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/33.jpg)
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)
![Page 34: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/34.jpg)
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
![Page 35: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/35.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 35
Finally, the calculatorGoal: create a calculator that determines the area and perimeter of a rectangleNeed:
Input fields for width and lengthOutput fields for area and perimeterAbility to perform calculationsAbility to invoke calculation function
![Page 36: CSCE 102 – Chapter 11 (Performing Calculations) CSCE 102 - General Applications Programming Benito Mendoza 1 2015-12-22 Benito Mendoza 1 By Benito Mendoza.](https://reader036.fdocuments.us/reader036/viewer/2022062519/5697bfe11a28abf838cb3e3d/html5/thumbnails/36.jpg)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 36
Debugging<head>
<title>Rectangle Calculator</title><script type="text/javascript">
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 = areaperimeterBox.value = calcPerim(length.value, width.value)
}</script>
</head><body><p><strong>Area and Perimeter Calculator</strong></p><form id="calcForm" name="calcForm">
Enter the width of the rectangle: <input type="text" name="widthBox" size="6" /><br />Enter the length of the rectangle: <input type="text" name="lengthBox" size="6" /><p><input type="button" value="Calculate"
onclick="calc(document.calculatorForm)" /></p>The area is: <input type="text" name="areaBox" size="12" /><br />The perimeter is: <input type="text" name="perimeterBox" size="12" />
</form></body>