j ava s cript shadi banitaan 1. o utline introduction javascript functions using objects in...
TRANSCRIPT
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