framework prototype
DESCRIPTION
Framework prototype by ahmed daif at Devent1TRANSCRIPT
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