Post on 14-Jan-2016
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>
</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>
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
tbY2tbY1
tbX2tbX1
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
<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
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
Keyword
Name 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 = "<" + 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/Dow
nloads/ 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.