By Benito Mendoza

transcript

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

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>

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

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

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

(11 * 4) – 5644 – 56

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>

By Benito Mendoza

Documents