JavaScript Functions and Objects

JavaScript Functions and Objects

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.

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.

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

function_demo.html

Source View <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript Function Demo</title> <script language="JavaScript" type="text/javascript" src="function_demo.js"></script>

Source View <style type="text/css"> #Button1 { width: 31px; } #Text1 { width: 67px; } #Text2 { width: 68px; } #Text3 { width: 71px; } </style> </head>

Add Client Event Handler <body> <p> </p> <p> <input id="Text1" type="text" /> + <input id="Text2" type="text" /> <input id="Button1" type="button" value="=" onclick="display_sum();"/> <input id="Text3" type="text" /></p> </body> </html>

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!

Function Demo in Action What’s going on here?

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

t1 in QuickWatch Scroll Down.

t1 in QuickWatch

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.

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);

Function Demo in Action

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

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

Works the Same

Also works with non-integer values End of Section

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.

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.

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.

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

Click here Setting Options

Make Absolute Positioning the Default

Design the Form btnEquals tbX2 tbX1 tbY2 tbY1 tbDistance

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

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

Add Script <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Object Demo</title> <script type='text/javascript' src='object_demo.js'></script> </head> <body> ... <asp:Button ID="btnEquals" runat="server" style="z-index: 1; left: 363px; top: 193px; position: absolute" Text="=" onclientclick='display_distance();'/>

Distance Calculator in Action End of Section

Built-in Type Keyword Name for new method A previously defined method 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;

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 = "<" + html + ">"; var end_tag = "</" + html + ">"; 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); }

object_demo.aspx <body>  <script language="JavaScript" type="text/javascript"> write_heading(1); </script>

Distance Calculator Running End of Section

Computing Distance between Clicks • Download image of Florida map. • http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/ • File florida.jpg • Copy into website folder.

florida.jpg

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Object Demo</title> <script type='text/javascript' src='object_demo.js'></script> </head> <body> <img src='florida.jpg' alt='Florida Map' onclick='click_function();'/> <br /> <div id="tbDistance">Distance</div> </body> </html>

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

Click on Tampa

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

Click on Tampa then Miami End of Section

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.

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.

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

JavaScript Functions and Objects