• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Framework prototype
 

Framework prototype

on

  • 437 views

Framework prototype by ahmed daif at devent1 #devMix

Framework prototype by ahmed daif at devent1 #devMix

Statistics

Views

Total Views
437
Views on SlideShare
437
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Framework prototype Framework prototype Presentation Transcript

    • FrameworkPrototype
    • 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 decleration
      function 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
      varClass_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
      varClass_Name = Class.create(
      {
      initialize: function(parameters){ //constructor
      this.property_name1 = value1;
      this.property_name2 = value2;
      }
      method_name:function(parameters)
      {......}
      });
    • instancing
      varobj = new Class_Name(parameters);
      var x = obj.property_name;
      obj.method_name();
    • javascript modifiers
      public
      private
      priviliged
    • javascript modifiers
      public: 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 modifiers
      priviliged : 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