Skip to main content

JavaScript Object Oriented

Congratulations, you just created an object. There are two ways to create a JavaScript object: they are 'Constructor functions' and 'Literal notation'. The one above is a Constructor function, I'll explain what the difference is shortly, but before I do, here is what an Object definition looks like using literal notation.
Literal is a preferred option for name spacing so that your JavaScript code doesn't interfere (or vice versa) with other scripts running on the page and also if you are using this object as a single object and not requiring more than one instance of the object, whereas Constructor function type notation is preferred if you need to do some initial work before the object is created or require multiple instances of the object where each instance can be changed during the lifetime of the script. Let's continue to build on both our objects simultaneously so we can observe what the differences are.
For each of the objects we have created a property 'iAm' which contains a string value that is used in our objects method 'whatAmI' which alerts a message.
Properties are variables created inside an object and methods are functions created inside an object.
Now is probably as good a time as any to explain how to use properties and methods (although you would already have done so if you are familiar with a library).
To use a property first you type what object it belongs to - so in this case it's myObject - and then to reference its internal properties, you put a full stop and then the name of the property so it will eventually look like myObject.iAm (this will return 'an object').
For methods, it is the same except to execute the method, as with any function, you must put parenthesis after it; otherwise you will just be returning a reference to the function and not what the function actually returns. So it will look like myObject.whatAmI() (this will alert 'I am an object').
  • The constructor object has its properties and methods defined with the keyword 'this' in front of it, whereas the literal version does not.
  • In the constructor object the properties/methods have their 'values' defined after an equal sign '=' whereas in the literal version, they are defined after a colon ':'.
  • The constructor function can have (optional) semi-colons ';' at the end of each property/method declaration whereas in the literal version if you have more than one property or method, they MUST be separated with a comma ',', and they CANNOT have semi-colons after them, otherwise JavaScript will return an error.
There is also a difference between the way these two types of object declarations are used.
To use a literally notated object, you simply use it by referencing its variable name, so wherever it is required you call it by typing;
With constructor functions you need to instantiate (create a new instance of) the object first; you do this by typing;
Let's use our previous constructor function and build upon it so it performs some basic (but dynamic) operations when we instantiate it.
Just like any JavaScript function, we can use arguments with our constructor function;
Now let's instantiate our object and call its whatAmI method, filling in the required fields as we do so.
This will alert 'I am an object of the JavaScript language.'
FOR EXAMPLE     use above code  and save  cunsturctortype.html:

<script>

function myObject(){
    this.iAm = 'an object';
    this.whatAmI = function(){
        alert('I am ' + this.iAm);
    };
};

var myNewObject = new myObject();
myNewObject.whatAmI();

</script>

and another  example of    literal  type   save file name lietraltype.html:

<script>
var myObject = {
    iAm : 'an object',
    whatAmI : function(){
        alert('I am ' + this.iAm);
    }
}

myObject.whatAmI();

</script>

Comments

  1. Sir this blog is really helps to me one of my colleague is stuck in the java script so i forward your blog link for knowledge on java

    ReplyDelete
    Replies
    1. great information on java script
      i recommend your blog to my junior for java knowledge for this page https://sisgain.com/angular-js-development

      Delete
  2. Hey, Wow all the posts are very informative for the people who visit this site. Good work! We also have a Website. Please feel free to visit our site. Thank you for sharing.
    Website Development
    Keep Posting:)

    ReplyDelete
  3. Saved as a favorite, I really like your blog! Hola!
    I've been following your weblog for a while now and finally got the courage to go
    ahead and give you a shout out from Dallas Texas! Just wanted to mention keep up the great work!
    mobile apps for telemedicine

    ReplyDelete

Post a Comment

Popular posts from this blog

layout code example:-

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body>  <section>       <div class="container">         <header>           <h3  class="text-center">Services</h3>           <p class="text-center">Laudem latine pe

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax.

Juqery fade

jQuery Fading Methods :-  With jQuery you can fade an element in and out of visibility. jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() Method The jQuery fadeIn() method is used to fade in a hidden element. Syntax:- $(selector).fadeIn(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><