Successfully reported this slideshow.
FrameworkPrototype<br />
purpose of presentation<br />is to write prototypal oop<br />javascript application<br />
prototype framework<br />JavaScript Framework that aims to give <br />advanced class-driven features<br />
language frameworks<br />reusable set of libraries or classes that<br />is designed to support a language in specific matt...
language frameworks<br />reusable set of libraries or classes that<br />is designed to support a language in specific matt...
javascript language<br />object-oriented client-side scripting language<br />
javascript language<br />object-oriented client-side scripting language<br />javascript is leading new era of windows appl...
Fierce competition over javascript<br />Prototype JS - Dojotoolkit - Developer.Yahoo - Spry<br />Rico - Mootools - Sproutc...
Fierce competition over javascript<br />Prototype JS - Dojotoolkit - Developer.Yahoo - Spry<br />Rico - Mootools - Sproutc...
Top frameworks<br />
Top frameworks<br />jQuery : the highest functionality<br />Spry : the best ajax framework<br />prototype : the best oop s...
Top frameworks<br />jQuery : the highest functionality<br />Spry : the best ajax framework<br />prototype : the best oop s...
How to install..?<br />http://www.prototypejs.org/<br />download v1.7.0.1 since November 16, 2010<br /><script type="text/...
oop concepts<br />1- Encapsulation or classification<br />2- Data abstraction<br />3- Inheritance<br />4- Polymorphism<br />
oop concepts<br />1- Encapsulation or classification<br />2- Data abstraction<br />3- Inheritance<br />4- Polymorphism<br ...
Encapsulation<br />classification of methods and properties<br />that is every class is capsule<br />then the instance of ...
Encapsulation<br />classification of methods and properties<br />that is every class is capsule<br />then the instance of ...
javascript Encapsulation<br />class-less ..<br />classes .. methods .. constrictors<br />defined as function<br />no direc...
class decleration<br />function Class_Name(parameters)<br />{<br />this.property_name = value;<br />this.method_name = met...
prototype class decleration<br />varClass_Name = Class.create();<br />Class_Name.prototype = {<br /> initialize: function(...
prototype class decleration<br />varClass_Name = Class.create(<br />{<br /> initialize: function(parameters){ //constructo...
instancing<br />varobj = new Class_Name(parameters);<br />var x = obj.property_name;<br />obj.method_name();<br />
javascript modifiers<br />public <br />private <br />priviliged<br />
javascript modifiers<br />public: can be accessed from outside the class <br />function Class_Name(parameters)<br />{<br /...
javascript modifiers<br />private : can't be accessed from outside the class<br />//basic idea is that the member isn't in...
javascript modifiers<br />private : can't be accessed from outside the class<br />//basic idea is that the member isn't in...
javascript modifiers<br />priviliged : public function that is in the class <br />that can access private methods<br />fun...
Data abstraction <br />the process of making Summarized description <br />for the common area of properties and methods<br...
Data abstraction <br />the process of making Summarized description <br />for the common area of properties and methods<br...
Inheritance<br />relation between classes when a class has <br />all the properties and methods of the other<br />the smal...
javascript Inheritance<br />classical or class-based Inheritance<br />prototypal Inheritance<br />
classical inheritance<br />/* we include the parent in the son <br />class by the running of the parent <br />class as par...
prototypal Inheritance<br />Object.extend(parentobj,sonobj)<br />and if sonobj was not created yet then....<br />Class.cre...
prototypal Inheritance<br />var parent = Class.create({....});<br />var son = class.create(Object.extend(<br />new parent(...
polymorphism<br />the method apperance in many-shapes among<br />inherited classes and every class implements <br />its ow...
polymorphism<br />
polymorphism<br />
polymorphism<br />Only key marking is supported in javascript<br />for accessing the higher polymorphic method <br />we us...
polymorphism<br />var parent = Class.create({<br />method_name:function(parameters){....}<br />});<br />var son = class.cr...
Aggregation<br />the concept that is talking about the <br />ability of class to contain another<br />object<br />
Key Words<br />mix-in modules <br />Native extensions<br />Value and refrence in prototype<br />Prototype DOM support<br /...
Prototype Framework<br />
Prototype Framework<br />Prototype Creator<br />
Upcoming SlideShare
Loading in …5
×

Framework prototype

957 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Framework prototype

  1. 1. FrameworkPrototype<br />
  2. 2. purpose of presentation<br />is to write prototypal oop<br />javascript application<br />
  3. 3. prototype framework<br />JavaScript Framework that aims to give <br />advanced class-driven features<br />
  4. 4. language frameworks<br />reusable set of libraries or classes that<br />is designed to support a language in specific matter <br />
  5. 5. language frameworks<br />reusable set of libraries or classes that<br />is designed to support a language in specific matter <br />such as <br />dotNet framework, jquery framework, Zend framework and prototype framework<br />
  6. 6. javascript language<br />object-oriented client-side scripting language<br />
  7. 7. javascript language<br />object-oriented client-side scripting language<br />javascript is leading new era of windows applications<br />
  8. 8. Fierce competition over javascript<br />Prototype JS - Dojotoolkit - Developer.Yahoo - Spry<br />Rico - Mootools - Sproutcore - Qooxdoo<br />Midori JS - ArchetypeJS - SimpleJS - JQuery<br />JS.Fleegix - Uize - Mochikit - Rialto<br />
  9. 9. Fierce competition over javascript<br />Prototype JS - Dojotoolkit - Developer.Yahoo - Spry<br />Rico - Mootools - Sproutcore - Qooxdoo<br />Midori JS - ArchetypeJS - SimpleJS - jQuery<br />JS.Fleegix - Uize - Mochikit - Rialto<br />
  10. 10. Top frameworks<br />
  11. 11. Top frameworks<br />jQuery : the highest functionality<br />Spry : the best ajax framework<br />prototype : the best oop supporter<br />
  12. 12. Top frameworks<br />jQuery : the highest functionality<br />Spry : the best ajax framework<br />prototype : the best oop supporter<br />(this is why..?)<br />
  13. 13. How to install..?<br />http://www.prototypejs.org/<br />download v1.7.0.1 since November 16, 2010<br /><script type="text/javascript" src="prototype.js"><br /></script><br />
  14. 14. oop concepts<br />1- Encapsulation or classification<br />2- Data abstraction<br />3- Inheritance<br />4- Polymorphism<br />
  15. 15. oop concepts<br />1- Encapsulation or classification<br />2- Data abstraction<br />3- Inheritance<br />4- Polymorphism<br />5- Aggregation or containment<br />
  16. 16. Encapsulation<br />classification of methods and properties<br />that is every class is capsule<br />then the instance of the class is called<br />
  17. 17. Encapsulation<br />classification of methods and properties<br />that is every class is capsule<br />then the instance of the class is called object<br />
  18. 18. javascript Encapsulation<br />class-less ..<br />classes .. methods .. constrictors<br />defined as function<br />no direct access modifiers<br />
  19. 19. class decleration<br />function Class_Name(parameters)<br />{<br />this.property_name = value;<br />this.method_name = methodName; <br />} <br />//or class declaration is the constructor<br />function Class_Name(parameters)<br />{<br />this.property_name = value;<br />this.method_name = function methodName(){...}; <br />}<br />
  20. 20. prototype class decleration<br />varClass_Name = Class.create();<br />Class_Name.prototype = {<br /> initialize: function(parameters){ //constructor<br /> this.property_name1 = value1;<br /> this.property_name2 = value2;<br />}<br />method_name:function(parameters)<br /> {......}<br />}<br />
  21. 21. prototype class decleration<br />varClass_Name = Class.create(<br />{<br /> initialize: function(parameters){ //constructor<br /> this.property_name1 = value1;<br /> this.property_name2 = value2;<br />}<br />method_name:function(parameters)<br /> {......}<br />});<br />
  22. 22. instancing<br />varobj = new Class_Name(parameters);<br />var x = obj.property_name;<br />obj.method_name();<br />
  23. 23. javascript modifiers<br />public <br />private <br />priviliged<br />
  24. 24. javascript modifiers<br />public: can be accessed from outside the class <br />function Class_Name(parameters)<br />{<br />this.method_name = methodName; <br />}<br />//or<br />function Class_Name(parameters)<br />{<br />Class_Name.prototype.method_name = methodName;<br />obj.method_name();}<br />
  25. 25. javascript modifiers<br />private : can't be accessed from outside the class<br />//basic idea is that the member isn't included<br />by this keyword<br />function Class_Name(parameters)<br />{<br /> function methodName(){} <br />}<br />obj.methodName();<br />
  26. 26. javascript modifiers<br />private : can't be accessed from outside the class<br />//basic idea is that the member isn't included<br />by this keyword<br />function Class_Name(parameters)<br />{<br /> function methodName(){} <br />}<br />obj.methodName();<br />
  27. 27. javascript modifiers<br />priviliged : public function that is in the class <br />that can access private methods<br />function Class_Name(parameters)<br />{<br /> function methodName(){...}<br />this.pmethod_name = <br /> function(){methodName();}; <br />}<br />//or<br />function Class_Name(parameters)<br />{<br /> function methodName(){...}<br />Class_Name.prototype.pmethod_name = <br /> function(){methodName();}; <br />}<br />obj.pmethod_name();<br />
  28. 28. Data abstraction <br />the process of making Summarized description <br />for the common area of properties and methods<br />that is not a class <br />
  29. 29. Data abstraction <br />the process of making Summarized description <br />for the common area of properties and methods<br />that is not a class <br />No real data abstraction in client-scripting<br />
  30. 30. Inheritance<br />relation between classes when a class has <br />all the properties and methods of the other<br />the small is called parent <br />
  31. 31. javascript Inheritance<br />classical or class-based Inheritance<br />prototypal Inheritance<br />
  32. 32. classical inheritance<br />/* we include the parent in the son <br />class by the running of the parent <br />class as part of the son */ <br />function parent(parameters)<br />{...}<br />function son(){<br />this.inheritFrom = parent;<br />this.inheritFrom(parameters);<br />}<br />
  33. 33. prototypal Inheritance<br />Object.extend(parentobj,sonobj)<br />and if sonobj was not created yet then....<br />Class.create(Object.extend(parentobj,sonobj))<br />
  34. 34. prototypal Inheritance<br />var parent = Class.create({....});<br />var son = class.create(Object.extend(<br />new parent(),{......}));<br />
  35. 35. polymorphism<br />the method apperance in many-shapes among<br />inherited classes and every class implements <br />its own method then only one is called()<br />
  36. 36. polymorphism<br />
  37. 37. polymorphism<br />
  38. 38. polymorphism<br />Only key marking is supported in javascript<br />for accessing the higher polymorphic method <br />we use $super<br />we need just Class.create()<br />Class.create(parent,sonobj); <br />
  39. 39. polymorphism<br />var parent = Class.create({<br />method_name:function(parameters){....}<br />});<br />var son = class.create(parent,{<br />method_name: function($super,parameters)<br />{$super(parameters)}<br />});<br />
  40. 40. Aggregation<br />the concept that is talking about the <br />ability of class to contain another<br />object<br />
  41. 41. Key Words<br />mix-in modules <br />Native extensions<br />Value and refrence in prototype<br />Prototype DOM support<br />Prototype API’s<br />JSON in prototype<br />
  42. 42. Prototype Framework<br />
  43. 43. Prototype Framework<br />Prototype Creator<br />

×