J AVA S CRIPT Shadi Banitaan 1

O UTLINE Introduction JavaScript Functions Using Objects in JavaScript Built-in Objects User-Defined Objects Examples Events 2

J AVA VS J AVA S CRIPT 3 JavaScriptJava 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).

W EB S CRIPTING L ANGUAGES Fewer features Can be client side or Server side Server side Invoked from browser Run on the server Client side - JavaScript Invoked and Run on the browser 4

A DDING I NTEGERS 5

6

J AVA S CRIPT : F UNCTIONS 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 7

B UILT -I N F UNCTIONS 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” 8

U SER -D EFINED F UNCTIONS 9

J AVA S CRIPT : O BJECTS 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 10

J AVA S CRIPT : O BJECTS 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 11

M ATH O BJECT 12

M ATH O BJECT 13

S TRING O BJECT 14

S TRING O BJECT 15

D ATE O BJECT 16

D ATE O BJECT 17

D ATE O BJECT 18

DOCUMENT O BJECT 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 19

DOCUMENT O BJECT 20

DOCUMENT O BJECT 21

E XTRACTING DOCUMENT INFORMATION 22

E XTRACTING DOCUMENT INFORMATION 23

B OOLEAN O BJECT The Boolean object is used to convert a non- Boolean value to a Boolean value (true or false). 24

N UMBER O BJECT The Number object is an object wrapper for primitive numeric values. 25

J AVA S CRIPT : 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 property test.field2 = 7; // Create field2 property 26

L ITERAL N OTATION 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 object2 var object1 = new Object(); object1.x = 3; object1.y = 4; object1.z = 5; object2 = { x:3, y:4, z:5 }; 27

O BJECTS : I TERATES O VER P ROPERTIES 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 28

O BJECTS : I TERATES O VER P ROPERTIES 29

O BJECTS : I TERATES O VER P ROPERTIES 30

O BJECTS : C ONSTRUCTOR 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; } 31

E XAMPLE (C ONSTRUCTOR ) 32

E XAMPLE (P ROTOTYPE ) 33

E XAMPLE (U SER - DEFINED O BJECT ) 34

E XAMPLE (U SER - DEFINED O BJECT ) 35

E XAMPLE (I NSTANCE ) 36

N ESTED O BJECT 37

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

S IMPLE BUTTON 39

M OUSE E VENTS 40