1 JavaScript Functions and Objects. 2 Objectives You will be able to Use JavaScript functions in...

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



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


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



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


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

1 JavaScript Functions and Objects. 2 Objectives You will be able to Use JavaScript functions in...

Documents

Transcript of 1 JavaScript Functions and Objects. 2 Objectives You will be able to Use JavaScript functions in...