j ava s cript shadi banitaan 1. o utline introduction javascript functions using objects in...

JAVASCRIPT

Shadi Banitaan

1

2

OUTLINE

Introduction JavaScript Functions Using Objects in JavaScript

Built-in Objects User-Defined Objects

Examples Events

3

JAVA VS JAVASCRIPT

JavaScript Java

Interpreted (not compiled) by client. Compiled on server before execution on client.

Object-based. Code uses built-in, extensible objects, but no classes

Object-oriented. Applets consist of object classes

Code integrated with, and embedded in, HTML.Applets distinct from HTML (accessed from HTML pages).

Variable data types not declared (loose typing).Variable data types must be declared (strong typing).

4

WEB SCRIPTING LANGUAGES

Fewer features Can be client side or Server side

Server sideInvoked from browserRun on the server

Client side - JavaScriptInvoked and Run on the browser

5

ADDING INTEGERS

6

ADDING INTEGERS

7

JAVASCRIPT: FUNCTIONS A function is a block of organized reusable

code (a set of statements) for performing a single or related action.

Begins with keyword “function” and the function name and

“( … )” Inside the parentheses

We can pass parameters to the function E.g. function myfunction(arg1, arg2) {…} Built-in and user-defined functions

8

BUILT-IN FUNCTIONS Functions provided by the language and you

cannot change them to suit your needs. Some of the built-in functions in JavaScript

are shown here: isFinite: Determines if a number is finite isNaN: Determines whether a value is “Not a

Number”

9

USER-DEFINED FUNCTIONS

10

JAVASCRIPT: OBJECTS

You can instantiate an object by using the constructor function

JavaScript is said to be an Object-based programming language

What is property?A variable belongs to the object.

What is method?It is a function belongs to the object

11

JAVASCRIPT: OBJECTS

Built-in Objects:  Math, Array, and String. E.g.) Math.random()

User-Defined Objects: The Class: JavaScript uses functions as classes.

E.g.) function Person() { } The Object (Class Instance)

var person1 = new Person(); var person2 = new Person();

The Property (object attribute): Properties are variables contained in the class

12

MATH OBJECT

Method Description Example abs( x ) absolute value of x abs( 7.2 ) is 7.2

abs( 0.0 ) is 0.0 abs( -5.6 ) is 5.6

ceil( x ) rounds x to the smallest integer not less than x

ceil( 9.2 ) is 10.0 ceil( -9.8 ) is -9.0

cos( x ) trigonometric cosine of x

cos( 0.0 ) is 1.0

exp( x ) exponential method exp( 1.0 ) is 2.71828 exp( 2.0 ) is 7.38906

floor( x ) rounds x to the largest integer not greater than x

floor( 9.2 ) is 9.0 floor( -9.8 ) is -10.0

log( x ) natural logarithm of x (base e)

log( 2.718282 ) is 1.0 log( 7.389056 ) is 2.0

max( x, y ) larger value of x and y max( 2.3, 12.7 ) is 12.7 max( -2.3, -12.7 ) is -2.3

13

MATH OBJECT

min( x, y ) smaller value of x and y

min( 2.3, 12.7 ) is 2.3 min( -2.3, -12.7 ) is -12.7

pow( x, y ) x raised to power y (xy)

pow( 2.0, 7.0 ) is 128.0 pow( 9.0, .5 ) is 3.0

round( x ) rounds x to the closest integer

round( 9.75 ) is 10 round( 9.25 ) is 9

sin( x ) trigonometric sine of x (x in radians)

sin( 0.0 ) is 0.0

sqrt( x ) square root of x sqrt( 900.0 ) is 30.0 sqrt( 9.0 ) is 3.0

tan( x ) trigonometric tangent of x (x in radians)

tan( 0.0 ) is 0.0

14

STRING OBJECT

Method Description charAt( index ) Returns a string containing the character at the

specified index. charCodeAt( index ) Returns the Unicode value of the character at the

specified index. concat( string ) Concatenates its argument to the end of the string

that invokes the method.. fromCharCode(value1, value2)

Converts a list of Unicode values into a string containing the corresponding characters.

indexOf(substring, index) Searches for the first occurrence of substring starting from position index in the string that invokes the method

15

STRING OBJECT

16

DATE OBJECT

Method Description getDate() getUTCDate()

Returns a number from 1 to 31 representing the day of the month in local time or UTC, respectively.

getDay() getUTCDay()

Returns a number from 0 (Sunday) to 6 (Saturday) representing the day of the week in local time or UTC, respectively.

getFullYear() getUTCFullYear()

Returns the year as a four-digit number in local time or UTC, respectively.

getHours() getUTCHours()

Returns a number from 0 to 23 representing hours since midnight in local time or UTC, respectively.

getMilliseconds() getUTCMilliSeconds()

Returns a number from 0 to 999 representing the number of milliseconds in local time or UTC, respectively. The time is stored in hours, minutes, seconds and milliseconds.

getMinutes() getUTCMinutes()

Returns a number from 0 to 59 representing the minutes for the time in local time or UTC, respectively.

getMonth() getUTCMonth()

Returns a number from 0 (January) to 11 (December) representing the month in local time or UTC, respectively.

getSeconds() getUTCSeconds()

Returns a number from 0 to 59 representing the seconds for the time in local time or UTC, respectively.

17

DATE OBJECT

Method Description setFullYear(y,m,d ) setUTCFullYear(y,m,d)

Sets the year in local time or UTC, respectively.

setHours(h, m,s, ms) setUTCHours(h,m,s, ms)

Sets the hour in local time or UTC, respectively.

setMilliSeconds( ms ) setUTCMilliseconds( ms )

Sets the number of milliseconds in local time or UTC, respectively.

setMinutes( m, s, ms ) setUTCMinutes( m, s, ms )

Sets the minute in local time or UTC, respectively.

setMonth( m, d ) setUTCMonth( m, d )

Sets the month in local time or UTC, respectively.

setSeconds( s, ms ) setUTCSeconds( s, ms )

Sets the second in local time or UTC, respectively.

18

DATE OBJECT

19

DOCUMENT OBJECT Each HTML document loaded into a browser window

becomes a Document object. Provided by the browser and allows JavaScript code

to manipulate the current document in the browser

20

DOCUMENT OBJECT

21

DOCUMENT OBJECT

22

EXTRACTING DOCUMENT INFORMATION

23

EXTRACTING DOCUMENT INFORMATION

24

BOOLEAN OBJECT

The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).

25

NUMBER OBJECT

The Number object is an object wrapper for primitive numeric values.

26

JAVASCRIPT: USER-DEFINED OBJECTS

Fields Can Be Added On-the-Fly Adding a new property (field) is a simple

matter of assigning a value to one If the field doesn’t already exist when you try

to assign to it, JavaScript will create it automatically.

For instance:var test = new Object();test.field1 = "Value 1"; // Create field1 propertytest.field2 = 7; // Create field2 property

27

LITERAL NOTATION

We can create objects using a shorthand “literal” notation of the form { field1:val1, field2:val2, ... , fieldN:valN }

For example, the following gives equivalent values to object1 and object2var object1 = new Object();object1.x = 3;object1.y = 4;object1.z = 5;

object2 = { x:3, y:4, z:5 };

28

OBJECTS: ITERATES OVER PROPERTIES JavaScript, unlike Java or C++, has a

construct that lets you easily retrieve all of the fields of an object

The basic format is as follows:For (fieldName in object) { doSomethingWith(fieldName);}

Also, given a field name, you can access the field via object["field"] as well as via object.field

29

OBJECTS: ITERATES OVER PROPERTIES

30

OBJECTS: ITERATES OVER PROPERTIES

31

OBJECTS: CONSTRUCTOR

A “Constructor” is Just a Function that Assigns to “this”

JavaScript does not have an exact equivalent to Java’s class definition

The closest you get is when you define a function that assigns values to properties in the this reference

function Ship(x, y, speed, direction) {this.x = x;this.y = y;this.speed = speed;this.direction = direction;}

32

EXAMPLE (CONSTRUCTOR)

33

EXAMPLE (PROTOTYPE)

34

EXAMPLE (USER-DEFINED OBJECT)

35

EXAMPLE (USER-DEFINED OBJECT)

36

EXAMPLE (INSTANCE)

37

NESTED OBJECT

EVENTS

JavaScript events allow scripts to respond to user interactions and

modify the page accordingly Events and event handling

help make web applications more dynamic and interactive

39

SIMPLE BUTTON

40

MOUSE EVENTS