Download - JavaScript Functions and Objects
![Page 1: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/1.jpg)
1
JavaScript Functions and Objects
![Page 2: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/2.jpg)
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.
![Page 3: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/3.jpg)
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.
![Page 4: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/4.jpg)
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
![Page 5: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/5.jpg)
5
function_demo.html
![Page 6: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/6.jpg)
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>
![Page 7: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/7.jpg)
7
Source View
<style type="text/css">
#Button1
{
width: 31px;
}
#Text1
{
width: 67px;
}
#Text2
{
width: 68px;
}
#Text3
{
width: 71px;
}
</style>
</head>
![Page 8: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/8.jpg)
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>
![Page 9: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/9.jpg)
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!
![Page 10: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/10.jpg)
10
Function Demo in Action
What’s going on here?
![Page 11: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/11.jpg)
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
![Page 12: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/12.jpg)
12
t1 in QuickWatch
Scroll Down.
![Page 13: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/13.jpg)
13
t1 in QuickWatch
![Page 14: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/14.jpg)
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.
![Page 15: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/15.jpg)
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);
![Page 16: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/16.jpg)
16
Function Demo in Action
![Page 17: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/17.jpg)
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.
![Page 18: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/18.jpg)
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;
}
![Page 19: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/19.jpg)
19
Works the Same
![Page 20: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/20.jpg)
20
Also works with non-integer values
End of Section
![Page 21: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/21.jpg)
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.
![Page 22: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/22.jpg)
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.
![Page 23: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/23.jpg)
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.
![Page 24: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/25.jpg)
25
Setting Options
Click here
![Page 26: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/26.jpg)
26
Make Absolute Positioning the Default
![Page 27: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/27.jpg)
27
Design the Form
tbY2tbY1
tbX2tbX1
tbDistance
btnEquals
![Page 28: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/28.jpg)
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;
}
![Page 29: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/29.jpg)
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;
}
![Page 30: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/30.jpg)
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();'/>
![Page 31: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/31.jpg)
31
Distance Calculator in Action
End of Section
![Page 32: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/32.jpg)
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
![Page 33: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/33.jpg)
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);
}
![Page 34: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/34.jpg)
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>
![Page 35: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/35.jpg)
35
Distance Calculator Running
End of Section
![Page 36: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/36.jpg)
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.
![Page 37: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/37.jpg)
37
florida.jpg
![Page 38: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/38.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>
![Page 39: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/39.jpg)
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);
}
![Page 40: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/40.jpg)
40
Click on Tampa
![Page 41: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/41.jpg)
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;
}
![Page 42: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/42.jpg)
42
Click on Tampa then Miami
End of Section
![Page 43: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/43.jpg)
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.
![Page 44: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/44.jpg)
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.
![Page 45: JavaScript Functions and Objects](https://reader035.vdocuments.site/reader035/viewer/2022062422/568133f9550346895d9aed85/html5/thumbnails/45.jpg)
45
Assignment
Do the examples from this presentation for yourself if you didn’t do them in class.