1 / 45

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.

Download Presentation

JavaScript Functions and Objects

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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 <!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>

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

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

  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. Click here Setting Options

  26. Make Absolute Positioning the Default

  27. Design the Form btnEquals tbX2 tbX1 tbY2 tbY1 tbDistance

  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 <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();'/>

  31. Distance Calculator in Action End of Section

  32. 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;

  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 = "<" + 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); }

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

  35. Distance Calculator Running End of Section

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

  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" "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>

  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.

More Related