Post on 18-Jan-2016
transcript
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
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
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 3
CalculatorMathematical operators
+ Addition - Subtraction * Multiplication / Division
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 4
CalculatorMath with constants
var result1, result2, result3result1 = 5.1 + 6.23result2 = 2 * 4result3 = 21 / 7
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 5
CalculatorMath with variables
var result1, result2, result3result1 = 1 + 3result2 = 4 * result1
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?
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 7
CalculatorSpaces ignored
x=3*4x = 3*4x = 3* 4x = 3 * 4
Equivalent
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
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
CalculatorRunning totals
var xx = 0… x = x + 1
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
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?
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 13
CalculatorIncrement operator ++
x = 4 x = 4x = x + 1 x++ (result 5)
Ch11-Ex-02
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 14
CalculatorDecrement operator –
x = 4 x = 4x = x - 1 x-- (result 3)
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 15
CalculatorEquivalent forms:
x++ and ++xx-- and --x
Unless used in an assignment statement…
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
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
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)
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>
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
CSCE 102 – Chapter 11 (Performing Calculations) Benito Mendoza 21
Calculator
9 + 2 * 49 + ( 2 * 4 )
9 + 817
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
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
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
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
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
<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
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
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.
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.
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.
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 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
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>