SlideShare a Scribd company logo

Javascript Oop

•Download as PPT, PDF•
•
mussawir20
mussawir20

This document discusses JavaScript object-oriented programming concepts like adding custom properties and methods to built-in and custom objects using prototypes. It provides examples of extending the built-in String object with a new method to write text backwards, and extending a custom "dummy" object with a property and method.

Related slideshows

Intro to Ember.js
Intro to Ember.jsIntro to Ember.js
Intro to Ember.js
 
Java script object model
Java script object modelJava script object model
Java script object model
 
Design patterns in javascript
Design patterns in javascriptDesign patterns in javascript
Design patterns in javascript
 
1 of 6
JAVASCRIPT OOP
Introduction //adding a custom property to a prebuilt object var myimage=new Image() myimage.size="26k" /*adding a custom property to the custom object "circle"*/ //First, create the custom object "circle" function circle(){ } var smallcircle=new circle() smallcircle.pi=3.14159 It will not work when a new object will created from circle as not inherited to it.
Using the prototype object to add custom properties to objects //First, create the custom object "circle" function circle(){ } circle.prototype.pi=3.14159 This is javascript object that helps function to inherit new properties and methods
Using the prototype object to add custom methods to objects //First, create the custom object "circle" function circle(){ } circle.prototype.pi=3.14159 // create the object method. function alertmessage(){ alert(this.pi) } circle.prototype.alertpi=alertmessage
Example 1-Extending functionality to the pre-built string() object <script type=&quot;text/javascript&quot;> /*code for extending String object with method that writes text backwards*/ //core custom method for writing text backwards function outputbackwards(){ for (i=this.length-1;i>=0;i--) document.write(this.charAt(i)) } /Attach custom method to string object String.prototype.writeback=outputbackwards var message1=&quot;Welcome to my site!&quot; message1.writeback() var message2=&quot;Today is a beautiful day&quot; message2.writeback() </script> Output: !etis ym ot emocleW yad lufituaeb a si yadoT
Example 2 Extending functionality to a custom JavaScript object <script type=&quot;text/javascript&quot;> //create dummy object function dummy(){ } //Create custom property function dummyproperty(){ } //Create custom method function dummymethod(){ } dummy.prototype.prop=dummyproperty dummy.prototype.method=dummymethod </script>

More Related Content

Javascript Oop

  • 2. Introduction //adding a custom property to a prebuilt object var myimage=new Image() myimage.size=&quot;26k&quot; /*adding a custom property to the custom object &quot;circle&quot;*/ //First, create the custom object &quot;circle&quot; function circle(){ } var smallcircle=new circle() smallcircle.pi=3.14159 It will not work when a new object will created from circle as not inherited to it.
  • 3. Using the prototype object to add custom properties to objects //First, create the custom object &quot;circle&quot; function circle(){ } circle.prototype.pi=3.14159 This is javascript object that helps function to inherit new properties and methods
  • 4. Using the prototype object to add custom methods to objects //First, create the custom object &quot;circle&quot; function circle(){ } circle.prototype.pi=3.14159 // create the object method. function alertmessage(){ alert(this.pi) } circle.prototype.alertpi=alertmessage
  • 5. Example 1-Extending functionality to the pre-built string() object <script type=&quot;text/javascript&quot;> /*code for extending String object with method that writes text backwards*/ //core custom method for writing text backwards function outputbackwards(){ for (i=this.length-1;i>=0;i--) document.write(this.charAt(i)) } /Attach custom method to string object String.prototype.writeback=outputbackwards var message1=&quot;Welcome to my site!&quot; message1.writeback() var message2=&quot;Today is a beautiful day&quot; message2.writeback() </script> Output: !etis ym ot emocleW yad lufituaeb a si yadoT
  • 6. Example 2 Extending functionality to a custom JavaScript object <script type=&quot;text/javascript&quot;> //create dummy object function dummy(){ } //Create custom property function dummyproperty(){ } //Create custom method function dummymethod(){ } dummy.prototype.prop=dummyproperty dummy.prototype.method=dummymethod </script>