By Benito Mendoza

1. By Benito Mendoza Department of Computer Science & Engineering Benito Mendoza Benito Mendoza 1

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 Benito Mendoza

3. Calculator • Mathematical operators • + Addition • - Subtraction • * Multiplication • / Division Benito Mendoza

4. Calculator • Math with constants var result1, result2, result3 result1 = 5.1 + 6.23 result2 = 2 * 4 result3 = 21 / 7 Benito Mendoza

5. Calculator • Math with variables var result1, result2, result3 result1 = 1 + 3 result2 = 4 * result1 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? Benito Mendoza

7. Equivalent Calculator • Spaces ignored x=3*4 x = 3*4 x = 3* 4 x = 3 * 4 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 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 Benito Mendoza

10. Calculator • Running totals var x x = 0 … x = x + 1 Benito Mendoza

11. Then store result here Calculator • Remember order of operations in an assignment statement x = x + 1 Do this first 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? Benito Mendoza

13. Calculator • Increment operator ++ x = 4 x = 4 x = x + 1 x++ (result 5) • Ch11-Ex-02 Benito Mendoza

14. Calculator • Decrement operator – x = 4 x = 4 x = x - 1 x-- (result 3) Benito Mendoza

15. Calculator • Equivalent forms: x++ and ++x x-- and --x • Unless used in an assignment statement… Benito Mendoza

16. Calculator • If operator follows variable then • Assignment first • Increment second x = 5 y = x++ • Result: y = 5, x = 6 Benito Mendoza

17. Calculator • If operator precedes variable then • Increment first • Assignment second x = 5 y = ++x • Result: y = 6, x = 6 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) 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> elements • Call by <script src=“filename.js” type=“text/javasacript”> </script> 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 Benito Mendoza

21. Calculator 9 + 2 * 4 9 + ( 2 * 4 ) 9 + 8 17 Benito Mendoza

22. Calculator 9 + 2 * 4 - 7 * 8 9 + ( 2 * 4 ) – ( 7 * 8 ) 9 + 8 – ( 7 * 8 ) 9 + 8 – 56 17 – 56 -39 Benito Mendoza

23. Calculator (9 + 2) * 4 - 7 * 8 (9 + 2) * 4 – ( 7 * 8 ) (9 + 2) * 4 – 56 (11 * 4) – 56 44 – 56 -12 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 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 Benito Mendoza

26. Returning Values from Functions • Ch11-Ex-04 Benito Mendoza

27. Known only within the testVar function 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> 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 Benito Mendoza

29. Returning Values from Functions • Rules of Thumb • Use var keyword to make a variable local • Declare all global variables in <head> 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. 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. 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. 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) 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) 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 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 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 = area perimeterBox.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> Benito Mendoza