Framework prototype

purpose of presentation

is to write prototypal oop

javascript application

prototype framework

JavaScript Framework that aims to give

advanced class-driven features

language frameworks

reusable set of libraries or classes that

is designed to support a language in specific

matter

language frameworks

reusable set of libraries or classes that

is designed to support a language in specific

matter

such as

dotNet framework, jquery framework, Zend

framework and prototype framework

javascript language

object-oriented client-side scripting language

javascript language

object-oriented client-side scripting language

javascript is leading new era of windows

applications

Fierce competition over

javascript

Prototype JS - Dojotoolkit - Developer.Yahoo -

Spry

Rico - Mootools - Sproutcore - Qooxdoo

Midori JS - ArchetypeJS - SimpleJS - JQuery

JS.Fleegix - Uize - Mochikit - Rialto

Fierce competition over

javascript

Prototype JS - Dojotoolkit - Developer.Yahoo -

Spry

Rico - Mootools - Sproutcore - Qooxdoo

Midori JS - ArchetypeJS - SimpleJS - jQuery

JS.Fleegix - Uize - Mochikit - Rialto

Top frameworks

Top frameworks

jQuery : the highest functionality

Spry : the best ajax framework

prototype : the best oop supporter

Top frameworks

jQuery : the highest functionality

Spry : the best ajax framework

prototype : the best oop supporter

(this is why..?)

How to install..?

http://www.prototypejs.org/

download v1.7.0.1 since November 16, 2010

<script type="text/javascript" src="prototype.js">

</script>

oop concepts

1- Encapsulation or classification

2- Data abstraction

3- Inheritance

4- Polymorphism

oop concepts

1- Encapsulation or classification

2- Data abstraction

3- Inheritance

4- Polymorphism

5- Aggregation or containment

Encapsulation

classification of methods and properties

that is every class is capsule

then the instance of the class is called

Encapsulation

classification of methods and properties

that is every class is capsule

then the instance of the class is called object

javascript Encapsulation

class-less ..

classes .. methods .. constrictors

defined as function

no direct access modifiers

class declerationfunction Class_Name(parameters)

{

this.property_name = value;

this.method_name = methodName;

}

//or class declaration is the constructor

function Class_Name(parameters)

{

this.property_name = value;

this.method_name = function methodName(){...};

}

prototype class decleration

var Class_Name = Class.create();

Class_Name.prototype = {

initialize: function(parameters){ //constructor

this.property_name1 = value1;

this.property_name2 = value2;

}

method_name:function(parameters)

{......}

}

prototype class decleration

var Class_Name = Class.create(

{

initialize: function(parameters){ //constructor

this.property_name1 = value1;

this.property_name2 = value2;

}

method_name:function(parameters)

{......}

});

instancing

var obj = new Class_Name(parameters);

var x = obj.property_name;

obj.method_name();

javascript modifiers

public

private

priviliged

javascript modifierspublic: can be accessed from outside the class

function Class_Name(parameters)

{

this.method_name = methodName;

}

//or

function Class_Name(parameters)

{

Class_Name.prototype.method_name = methodName;

obj.method_name();}

javascript modifiers

private : can't be accessed from outside the class

//basic idea is that the member isn't included

by this keyword

function Class_Name(parameters)

{

function methodName(){}

}

obj.methodName();

javascript modifiers

private : can't be accessed from outside the class

//basic idea is that the member isn't included

by this keyword

function Class_Name(parameters)

{

function methodName(){}

}

obj.methodName();

javascript modifierspriviliged : public function that is in the class

that can access private methods

function Class_Name(parameters)

{

function methodName(){...}

this.pmethod_name =

function(){methodName();};

}

//or

function Class_Name(parameters)

{

function methodName(){...}

Class_Name.prototype.pmethod_name =

function(){methodName();};

}

obj.pmethod_name();

Data abstraction

the process of making Summarized description

for the common area of properties and methods

that is not a class

Data abstraction

the process of making Summarized description

for the common area of properties and methods

that is not a class

No real data abstraction in client-scripting

Inheritance

relation between classes when a class has

all the properties and methods of the other

the small is called parent

javascript Inheritance

classical or class-based Inheritance

prototypal Inheritance

classical inheritance

/* we include the parent in the son

class by the running of the parent

class as part of the son */

function parent(parameters)

{...}

function son(){

this.inheritFrom = parent;

this.inheritFrom(parameters);

}

prototypal Inheritance

Object.extend(parentobj,sonobj)

and if sonobj was not created yet then....

Class.create(Object.extend(parentobj,sonobj))

prototypal Inheritance

var parent = Class.create({....});

var son = class.create(Object.extend(

new parent(),{......}));

polymorphism

the method apperance in many-shapes among

inherited classes and every class implements

its own method then only one is called()

polymorphism

polymorphism

polymorphism

Only key marking is supported in javascript

for accessing the higher polymorphic method

we use $super

we need just Class.create()

Class.create(parent,sonobj);

polymorphism

var parent = Class.create({

method_name:function(parameters){....}

});

var son = class.create(parent,{

method_name: function($super,parameters)

{$super(parameters)}

});

Aggregation

the concept that is talking about the

ability of class to contain another

object

Key Words

mix-in modules

Native extensions

Value and refrence in prototype

Prototype DOM support

Prototype API’s

JSON in prototype

Prototype Framework

Prototype Framework

Prototype Creator