1. 1 JavaScript Functions and Objects

2. 2 Objectives You will be able to Use JavaScript functions in JavaScript scripts. Get JavaScript functions executed in response to clicks on either HTML buttons or ASPX buttons. Define objects in JavaScript. Use properties and methods of your JavaScript objects. Add functionality to existing object defintions.

3. 3 JavaScript Functions JavaScript functions are similar to functions in other C based languages. Can have parameters. Can return a value. Can have local variables. Differences: No types are specified. Variables don’t have to be declared. Automatic type conversion where needed. Variables in functions are global by default. Declare variable name with “var” to make local. Variables normally should be local.

4. JavaScript Variables A variable declared with var is local to that function. A variable set inside a function without a declaration is automatically global. A variable declared outside a function definition is global. See http://www.w3schools.com/js/js_scope.asp http://www.w3schools.com/js/js_scope.asp 4

5. Lifetime of a JavaScript Variable Starts when it is declared. or set without being declared Local variables are deleted when the function is completed. Global variables belong to the window object. Are deleted when the window is closed 5

6. Memory Management in JavaScript Similar to C# and VB.NET Memory is allocated for variables when they are declared. Memory is deallocated by a garbage collection process when the variable is unreachable. For more details see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management 6

7. 7 JavaScript Objects Not quite the same as C# and Java. No class definition! Just write a constructor. The constructor can put anything you like into the object. Properties Methods Invoke the constructor to create an object.

8. 8 Properties and Methods Properties Like member variables in C# Always public Always Read/Write Methods Function is defined separately from the constructor. Function name, without parentheses, refers to the function itself. Constructor adds the function to the object.

9. 9 Example: Distance Calculator Create a new empty web site called JavaScript_Object_Demo. Add existing item: HTML Page object_demo.html JScript File object_demo.js http://www.csee.usf.edu/~turnerr/Web_Application_Design/ Downloads/210_Object_Demo/ We will define a JavaScript Point object, with properties x and y. Method to compute distance to another Point.

10. The Form 10 tbY2 tbY1 tbX2 tbX1 tbDistance btnEquals Download file object_demo.html from http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/ 210_Object_Demo/

11. 11 object_demo.js // Function to compute the distance to another point function Distance(pt) { var dx = this.x - pt.x; var dy = this.y - pt.y; return Math.sqrt(dx*dx + dy*dy); } // Constructor for Point objects function Point(x,y) { this.x = x; this.y = y; this.Distance = Distance; } http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/ 210_Object_Demo/

12. 12 object_demo.js function display_distance() { var tbX1 = document.getElementById("tbX1"); var tbX2 = document.getElementById("tbX2"); var tbY1 = document.getElementById("tbY1"); var tbY2 = document.getElementById("tbY2"); var tbDistance = document.getElementById("tbDistance"); var x1 = tbX1.value; var x2 = tbX2.value; var y1 = tbY1.value; var y2 = tbY2.value; var pt1 = new Point(x1, y1); var pt2 = new Point(x2, y2); var dist = pt1.Distance(pt2) tbDistance.value = dist; }

13. 13 Add Script Object Demo... <input id="btnEquals" type="button" value="=" onclick='display_distance();'/>

14. 14 Distance Calculator in Action End of Section

15. 15 JavaScript Objects Properties and methods can be added to a JavaScript object after it is created. Even for built-in objects. Although this is usually a bad idea.

16. function Say_Where() { alert("X = " + x + " Y = " + y); } Point.prototype.display = Say_Where; 16 A new method for Point objects ConstructorKeyword Name for the new method A previously defined function

17. 17 Computing Screen Distance between Clicks Download image of Florida map. File florida.jpg http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/ 210_Object_Demo/ http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/ 210_Object_Demo/ Download to desktop. Add to website.

18. 18 florida.jpg

19. map_functions.js Add new JavaScript file to the web site. map_functions.js function Say_Where() { alert("X = " + x + " Y = " + y); } Point.prototype.display = Say_Where; function click_function() { e = window.event; x = e.clientX; y = e.clientY; var click_point = new Point(x, y); click_point.display(); } 19

20. 20 map.html Add new item to website: HTML Page map.html Set as start page.

21. 21 map.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Florida Map <img src='florida.jpg' alt='Florida Map' onclick='click_function();'/> Distance

22. Design View 22

23. 23 Click on Tampa

24. 24 Computing Distance Between Screen Points var prev_click = 0; function click_function() { e = window.event; x = e.clientX; y = e.clientY; var click_point = new Point(x, y); click_point.display(); if (prev_click != 0) { var distance = click_point.Distance(prev_click); var tbDistance = document.getElementById("tbDistance"); tbDistance.firstChild.nodeValue = 'Distance = ' + distance; } prev_click = click_point; } Add to map_functions.js

25. 25 Click on Tampa then Miami End of Section

26. Question If we add a method to the prototype of a constructor, is that method available in objects created before it was added? Let’s find out! 26

27. 27

28. 28 Works the same.

29. 29 Summary JavaScript functions are similar to functions in other languages, but have some differences. The function name (without parentheses) represents the function itself. Can be used on right hand side of =. The function name followed by parentheses is a function call. Variables are global by default. Use declaration with var inside a function defintion to make the variable local.

30. 30 Summary A JavaScript object is a collection of properties and methods. The constructor defines the object. No class definition as in C++, C#, and Java. Methods and properties can be added to a constructor dynamically. Use the prototype property of the constructor.

31. 31 Assignment Do the examples from this presentation for yourself if you didn’t do them in class.