By Benito Mendoza

CSCE 102 – Chapter 11 (Performing Calculations)

CSCE 102 - General Applications Programming

Benito Mendoza 123/4/22 Benito Mendoza 1

ByBenito 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


CalculatorMathematical operators

+ Addition - Subtraction * Multiplication / Division


CalculatorMath with constants

var result1, result2, result3result1 = 5.1 + 6.23result2 = 2 * 4result3 = 21 / 7


CalculatorMath with variables

var result1, result2, result3result1 = 1 + 3result2 = 4 * result1


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?


CalculatorSpaces ignored

x=3*4x = 3*4x = 3* 4x = 3 * 4

Equivalent


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


Calculator

var xStr = “75.2”, yStr=“10.1”var xNum=parseFloat(xStr)var yNum=parseFloat(yStr)var z = xNum + yNum

Ch11-Ex-01


CalculatorRunning totals

var xx = 0… x = x + 1


CalculatorRemember order of operations in an assignment statement

x = x + 1Do this

first

Then store result here


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?


CalculatorIncrement operator ++

x = 4 x = 4x = x + 1 x++ (result 5)

Ch11-Ex-02


CalculatorDecrement operator –

x = 4 x = 4x = x - 1 x-- (result 3)


CalculatorEquivalent forms:x++ and ++xx-- and --x

Unless used in an assignment statement…


Calculator

If operator follows variable thenAssignment firstIncrement second

x = 5y = x++

Result: y = 5, x = 6


Calculator

If operator precedes variable thenIncrement firstAssignment second

x = 5y = ++x

Result: y = 6, x = 6


CalculatorCombination assignment operators

x += 5 (x = x + 5)x -= 5 (x = x – 5)x *= 5 (x = x * 5)x /= 5 (x = x / 5)


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>


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


Calculator

9 + 2 * 49 + ( 2 * 4 )

9 + 817


Calculator9 + 2 * 4 - 7 * 8

9 + ( 2 * 4 ) – ( 7 * 8 )9 + 8 – ( 7 * 8 )

9 + 8 – 5617 – 56

-39


Calculator(9 + 2) * 4 - 7 * 8

(9 + 2) * 4 – ( 7 * 8 )(9 + 2) * 4 – 56

(11 * 4) – 5644 – 56

-12


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


Returning Values from FunctionsScope of a variable

Global – can be used anywhere in the source documentLocal – can be used only within a specific function


Returning Values from FunctionsCh11-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> <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


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


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.



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.


Returning Values from FunctionsSo far we’ve used functions to do things and store the results in variablesNow, we’re going to make the functions themselves have value.



Declaration:function calcAvg(n1, n2, n3) { var average average = (n1 + n2 + n3) / 3 alert(“The average is “+average)}Call:calcAvg(1, 2, 3)



Declaration:function calcAvg(n1, n2, n3) { var average average = (n1 + n2 + n3) / 3 return average}Call:x = calcAvg(1, 2, 3)



Declaration:function calcAvg(n1, n2, n3) { return (n1 + n2 + n3) / 3}Call:x = calcAvg(1, 2, 3)Ch11-Ex-06


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


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>

Date post:	24-Feb-2016
Category:	Documents
Upload:	keenan
View:	37 times
Download:	0 times

By Benito Mendoza

Documents