framework prototype

43
Framework Prototype

Upload: devmix

Post on 18-Jan-2015

763 views

Category:

Technology


5 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Framework prototype

Framework Prototype

Page 2: Framework prototype

purpose of presentation

is to write prototypal oopjavascript application

Page 3: Framework prototype

prototype framework

JavaScript Framework that aims to give advanced class-driven features

Page 4: Framework prototype

language frameworks

reusable set of libraries or classes thatis designed to support a language in

specific matter

Page 5: Framework prototype

language frameworks

reusable set of libraries or classes thatis designed to support a language in

specific matter

such as dotNet framework, jquery framework, Zend framework and prototype framework

Page 6: Framework prototype

javascript language

object-oriented client-side scripting language

Page 7: Framework prototype

javascript language

object-oriented client-side scripting languagejavascript is leading new era of windows applications

Page 8: Framework prototype

Fierce competition over javascript

Prototype JS - Dojotoolkit - Developer.Yahoo - Spry

Rico - Mootools - Sproutcore - Qooxdoo

Midori JS - ArchetypeJS - SimpleJS - JQuery

JS.Fleegix - Uize - Mochikit - Rialto

Page 9: Framework prototype

Fierce competition over javascript

Prototype JS - Dojotoolkit - Developer.Yahoo - Spry

Rico - Mootools - Sproutcore - Qooxdoo

Midori JS - ArchetypeJS - SimpleJS - jQuery

JS.Fleegix - Uize - Mochikit - Rialto

Page 10: Framework prototype

Top frameworks

Page 11: Framework prototype

Top frameworks

jQuery : the highest functionalitySpry : the best ajax frameworkprototype : the best oop supporter

Page 12: Framework prototype

Top frameworks

jQuery : the highest functionalitySpry : the best ajax frameworkprototype : the best oop supporter

(this is why)?..

Page 13: Framework prototype

How to install?..

http://www.prototypejs.org/

download v1.7.0.1 since November 16, 2010

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

Page 14: Framework prototype

oop concepts

1 -Encapsulation or classification2 -Data abstraction

3 -Inheritance4 -Polymorphism

Page 15: Framework prototype

oop concepts

1 -Encapsulation or classification2 -Data abstraction

3 -Inheritance4 -Polymorphism

5 -Aggregation or containment

Page 16: Framework prototype

Encapsulation

classification of methods and propertiesthat is every class is capsulethen the instance of the class is called

Page 17: Framework prototype

Encapsulation

classification of methods and propertiesthat is every class is capsulethen the instance of the class is called object

Page 18: Framework prototype

javascript Encapsulation

class-less.. classes .. methods .. constrictorsdefined as functionno direct access modifiers

Page 19: Framework prototype

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

;}...{}

Page 20: Framework prototype

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)

}......{ }

Page 21: Framework prototype

prototype class decleration

var Class_Name = Class.create({

initialize: function(parameters){ //constructor

this.property_name1 = value1; this.property_name2 = value2;

} method_name:function(parameters)

}......{ ;)}

Page 22: Framework prototype

instancing

var obj = new Class_Name(parameters);

var x = obj.property_name;obj.method_name;)(

Page 23: Framework prototype

javascript modifiers

public private priviliged

Page 24: Framework prototype

javascript modifierspublic: can be accessed from outside the class function Class_Name(parameters){

this.method_name = methodName;}

//orfunction Class_Name(parameters){Class_Name.prototype.method_name = methodName;

obj.method_name};)(

Page 25: Framework prototype

javascript modifiers

private : can't be accessed from outside the class//basic idea is that the member isn't included

by this keywordfunction Class_Name(parameters){

function methodName}{)(}

obj.methodName;)(

Page 26: Framework prototype

javascript modifiers

private : can't be accessed from outside the class//basic idea is that the member isn't included

by this keywordfunction Class_Name(parameters){

function methodName}{)(}

obj.methodName;)(

Page 27: Framework prototype

javascript modifierspriviliged : public function that is in the class that can access private methodsfunction Class_Name(parameters){

function methodName}...{)( this.pmethod_name =

function(){methodName();};}

//orfunction Class_Name(parameters){

function methodName}...{)( Class_Name.prototype.pmethod_name =

function(){methodName();};}

obj.pmethod_name;)(

Page 28: Framework prototype

Data abstraction

the process of making Summarized description for the common area of properties and methodsthat is not a class

Page 29: Framework prototype

Data abstraction

the process of making Summarized description for the common area of properties and methodsthat is not a class

No real data abstraction in client-scripting

Page 30: Framework prototype

Inheritance

relation between classes when a class has all the properties and methods of the otherthe small is called parent

Page 31: Framework prototype

javascript Inheritance

classical or class-based Inheritanceprototypal Inheritance

Page 32: Framework prototype

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

}

Page 33: Framework prototype

prototypal Inheritance

Object.extend(parentobj,sonobj)and if sonobj was not created yet then....

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

Page 34: Framework prototype

prototypal Inheritance

var parent = Class.create;)}....{(var son = class.create(Object.extend(

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

Page 35: Framework prototype

polymorphism

the method apperance in many-shapes amonginherited classes and every class implements its own method then only one is called)(

Page 36: Framework prototype

polymorphism

Page 37: Framework prototype

polymorphism

Page 38: Framework prototype

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

Page 39: Framework prototype

polymorphism

var parent = Class.create{(method_name:function(parameters)}....{

;)}var son = class.create(parent{,

method_name: function($super,parameters){$super(parameters)}

;)}

Page 40: Framework prototype

Aggregation

the concept that is talking about the ability of class to contain anotherobject

Page 41: Framework prototype

Key Words

mix-in modules Native extensionsValue and refrence in prototypePrototype DOM supportPrototype API’sJSON in prototype

Page 42: Framework prototype

Prototype Framework

Page 43: Framework prototype

Prototype Framework

Prototype Creator