1 JavaScript Functions and Objects

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 JavaScript properties and methods of your JavaScript objects. Add functionality to existing object defintions.

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 are global by default. Declare variable name with “var” to make local. Variables normally should be local.

4 Example: Addition Function Get two numbers from text boxes and put their sum into a third text box. Create an ASP.NET Empty Web Site: JavaScript_Function_Demo Add new items: HTML Page function_demo.html JScript File function_demo.js

5 function_demo.html

6 Source View JavaScript Function Demo <script language="JavaScript" type="text/javascript" src="function_demo.js">

7 Source View #Button1 { width: 31px; } #Text1 { width: 67px; } #Text2 { width: 68px; } #Text3 { width: 71px; }

8 Add Client Event Handler + <input id="Button1" type="button" value="=" onclick="display_sum();"/>

9 function_demo.js function display_sum() { var t1 = document.getElementById("Text1"); var t2 = document.getElementById("Text2"); var t3 = document.getElementById("Text3"); t3.value = t1.value + t2.value; } Try it!

10 Function Demo in Action What’s going on here?

11 Look at Variables in Debugger Set a breakpoint on the last line of function display_sum(). Use QuickWatch to examine t1, t2, and t3

12 t1 in QuickWatch Scroll Down.

13 t1 in QuickWatch

14 The “+” Operator The “+” operator with string for both operands means “string concatenate”. If either operand is a number it will try to do numeric addition. If both operands are numbers it will do numeric addition. Otherwise, it will do string concatenation, converting one operand to a string if necessary.

15 Mixing Strings and Numbers Arithmetic operators with strings as argument try to convert the strings to numbers. So we can write: t3.value = (t1.value * 1.0) + (t2.value * 1.0);

16 Function Demo in Action

17 A Less Kludgy Solution JavaScript has built in functions to convert strings to numbers: parseInt() parseFloat() Using these functions makes our intentions more transparent.

18 Revised function display_sum() function display_sum() { var t1 = document.getElementById("Text1"); var t2 = document.getElementById("Text2"); var t3 = document.getElementById("Text3"); var n1 = parseFloat(t1.value); var n2 = parseFloat(t2.value); t3.value = n1 + n2; }

19 Works the Same

20 Also works with non-integer values End of Section

21 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.

22 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.

23 Example: Distance Calculator Create a new empty web site called JavaScript_Object_Demo. Add Web Form object_demo.aspx JScript File object_demo.js We will define a JavaScript Point object, with properties x and y. Method to compute distance to another Point.

24 Absolute Positioning We will use absolute positioning for the Distance Calculator app. Usually a bad idea! To set absolute positioning for controls by default Tools > Options

25 Setting Options Click here

26 Make Absolute Positioning the Default

27 Design the Form tbY2 tbY1 tbX2 tbX1 tbDistance btnEquals

28 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; }

29 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; }

30 Add Script Object Demo... <asp:Button ID="btnEquals" runat="server" style="z-index: 1; left: 363px; top: 193px; position: absolute" Text="=" onclientclick='display_distance();'/>

31 Distance Calculator in Action End of Section

32 JavaScript Objects Properties and methods can be added to a JavaScript object after it is created. Even for built-in objects. Example: Add a new method to the built-in String type String.prototype.Make_Heading = make_heading; Built-in Type KeywordName for new method A previously defined method

33 Adding a Method to String /* New method for type String. * Returns the string text in the form of an * HTML heading. */ function make_heading (level) { var html = "H" + level; var text = this.toString(); var start_tag = " "; var end_tag = " "; return start_tag + text + end_tag; } function write_heading(level) { var s = new String("Distance Calculator"); String.prototype.Make_Heading = make_heading; html_heading = s.Make_Heading(level); document.write(html_heading); }

34 object_demo.aspx <!-- <div style="z-index: 106; left: 108px; width: 253px; position: absolute; top: 9px; height: 22px"> Distance Calculator --> write_heading(1);

35 Distance Calculator Running End of Section

36 Computing Distance between Clicks Download image of Florida map. File florida.jpg Copy into website folder.

37 florida.jpg

38 object_demo.html Add new item to website: HTML File object_demo.html Set as start page. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Object Demo Distance

39 Add to object_demo.js function click_function() { e=window.event; x=e.clientX; y=e.clientY; alert("Click at X = "+ x + " Y = " + y); }

40 Click on Tampa

41 object_demo.js var prev_click = 0; function click_function() { e=window.event; x=e.clientX; y=e.clientY; alert("Click at X = "+ x + " Y = " + y); var click_point = new Point(x,y); 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; }

42 Click on Tampa then Miami End of Section

43 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” to make local.

44 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.

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