Saturday, 1 April 2017

Simple JavaScript Object and Class Examples

In JavaScript, most things are objects. An object is a collection of related data and/or functionality

Namespace: Everything you create in JavaScript is by default global. In JavaScript namespace is Global object.
How to create a namespace in JavaScript?
Create one global object, and all variables, methods, and functions become properties of that object.
Example: 
// global namespace
var MYAPP = MYAPP || {};
Explaination: Here we first checked whether MYAPP is already defined.If yes, then use the existing MYAPP global object, otherwise create an empty object called MYAPP

How to create sub namespaces?
// sub namespace
MYAPP.event = {};

Class
JavaScript is a prototype-based language and contains no class statement.JavaScript classes create simple objects and deal with inheritance.

Example:
var Person = function () {};
Explaination: Here we define a new class called Person with an empty constructor.

Use the class keyword
class Calculation {};
A class expression is another way to define a class. Class expressions can be named or unnamed.
// unnamed
var Calculation = class {};

// named
var Calculation = class Calculation { };

Function based classes

function Calculation() { }
// associate method to class
Calculation.prototype.square = function() {
  return this;
}
Calculation.cube = function() {
  return this;
}

let obj = new Calculation();
let square = obj.square;
square(); // global object

let cube = Calculation.cube;
cube(); // global object

Sub classing with extends
class Teacher { 
  constructor(name) {
    this.name = name;
  }
  
  attendance() {
    console.log(this.name + ' teacher present.');
  }
}

class Student extends Teacher {
  attendance() {
    console.log(this.name + ' student present.');
  }
}

var d = new Student('Sudhir');
d.attendance(); // Sudhir student present.


JavaScript object
A JavaScript object is a collection of named values
var address = {city:"Noida", state:"Uttar Pradesh", country:"India"};
To access city use : address.city;

Or you can create using new keyword

var address = new Object();
address.city = "Noida";
address.state = "Uttar Pradesh";
address.country = "India";

Note:JavaScript objects are mutable.Any changes to a copy of an object will also change the original.Every object in JavaScript is an instance of the object Object and therefore inherits all its properties and methods.
Example:
var address = {city:"Noida", state:"Uttar Pradesh", country:"India"}
var x = address;
x.state = "Delhi";
document.getElementById("demo").innerHTML =
address.city + " is " + address.state + " state.";

Constructor
In JavaScript the function serves as the constructor of the object, therefore there is no need to explicitly define a constructor method.
Example:
var Person = function () {
  console.log('instance created');
};

var person1 = new Person();
Example:
function Person(name) {
  this.name = name;
}
var thePerson = new Person('Redwood');
console.log('thePerson.constructor is ' + thePerson.constructor);

This example displays the following output:

thePerson.constructor is function Tree(name) {
  this.name = name;



The methods
To define a method, assign a function to a named property of the class's prototype property.
Example:
var Person = function (firstName) {
  this.firstName = firstName;
};

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.firstName);
};
var person1 = new Person("Alice");
person1.sayHello();

var helloFunction = person1.sayHello;
helloFunction.call(person1);

For loop in JavaScript
var address = {fname:"Noida", state:"Uttar Pradesh", country:"India"}; 
for (x in address) {
txt += address[x];
}


JavaScript object method: 
var address = {
    city: "Noida",
    state:"Uttar Pradesh", 
    country:"India"
   fullAddress : function() {
        return this.city + " " + this.state + " " + this.country;
   }
};
address.fullAddress(); // returns fullAddress

JavaScript Prototypes
A prototype is an object from which other objects inherit properties.Every object has a prototype by default.

Adding Methods to a Prototype
Example: 
function Address(city, state) {
     this.city = city;
     this.state = last;
     this.cityState = function() {
         return this.city + " " + this.state
      };
}

Address.prototype.location = function() {
return this.city*this.state;
}

var myAddress = new Address("Noida", "Delhi");
myAddress.cityState(); 
myAddress.location(); // It will return Noida Delhi

Using the prototype Property

JavaScript prototype property allows you to add new properties to an existing prototype
Example: Address.prototype.nationality = "English";

Place the javascript function inside a variable
var consoleOutput = function consoleOutput()
{
console.log('Hello Sudhir');
}

Bind a function with event javascript
document.getElementsByClassName("inner-heading")[0].addEventListener("click", consoleOutput);

Same thing can be done by using jquery
$(".inner-heading").click(consoleOutput);


Lets us take real example for bootstrap notification
var flashMessage;
flashMessage = flashMessage || (function(){
var loadingDiv = $('<div id="myModal" class="modal fade" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><i class="fa fa-spin fa-spinner fa-5x"></i></div></div></div></div>');
return {
showPleaseWait: function() {
loadingDiv.modal('show');
loadingDiv.on('hidden.bs.modal', function(){
loadingDiv.remove();
});
},
hidePleaseWait: function () {
loadingDiv.modal('hide');
},
alertMessageBox:function(msg,type){
if ($('section').hasClass('_alertDialog')) {
$('._alertDialog').remove();
}
if(type == 'success'){
_curAlertClass = 'alert-success';
_curAlertIcon = 'fa-check';
}else{
_curAlertClass = 'alert-danger';
_curAlertIcon = 'fa-warning';
}

var _dialogContainer = $('<section class="content _alertDialog" style="display:none;"></section>');
var _ele = $('<div class="alert '+ _curAlertClass +' alert-dismissable"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><div class="alert-message"><i class="fa '+_curAlertIcon+'"></i> '+msg+'</div></div>');
_dialogContainer.html(_ele);
$('body').after(_dialogContainer);
_dialogContainer.fadeIn(400);
var _timerId = setTimeout(function() { _dialogContainer.slideUp( 300 ); clearTimeout(_timerId); }, 5000);
}
}
})();

Now How to access its function
flashMessage.showPleaseWait();
flashMessage.hidePleaseWait();

flashMessage.alertMessageBox('<p>This is testing javascript object</p>', 'success');

10 comments:


  1. very useful info, and please keep updating........
    Best Online Software

    Training

    ReplyDelete
  2. This is an amazing blog,it gives very helpful messages to us.Besides that Wisen has established as Best Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete
  3. Sap Training Institute in Noida-Webtrackker is the best SAP training institute in noida. SAP is drastically a completely state-of-the-art element ever to analyze and to excel in it. However with the ever-growing price, and being the most accessible organization solution key, agencies are greater involved to have their employees specialized in it. The education courses effectively deliver you with the fundamental recognition of SAP, in a grade by grade way.
    Sas Training Institute in Noida
    PHP Training Institute in Noida
    Hadoop Training Institute in Noida
    Oracle Training Institute in Noida
    Linux Training Institute in Noida
    Dot net Training Institute in Noida

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Australia best tutor is well known academic portal. Here students can get different kind of Online Assignment help services like that

    1.Online Assignment Help
    2.Instant Assignment Help
    3.Assignment Help
    4.Help with Assignment
    5.my assignment Help

    And also access that services at any time and any where.

    ReplyDelete
  6. Air conditioning maintenance birmingham- onlyrepaircenter has the 30 Years Experience in Air conditioning maintenance service in birmingham. If you are facing the problem in your air conditioning of any company such as Daikin, Mitsubishi, Carrier, Fujitsu, Toshiba, Airedale, Sanyo, Trane and LG then you can contact to us.

    Air Conditioning Installation birmingham
    Commercial air conditioning repair Birmingham
    residential air conditioning repair birmingham
    Air Conditioning Maintenance birmingham
    window ac repair birmingham

    ReplyDelete
  7. I can only express a word of thanks! Nothing else. Because your topic is nice, you can add knowledge. Thank you very much for sharing this information.

    Avriq India
    avriq
    pest control
    cctv camera

    ReplyDelete
  8. CIIT Noida provides Best MCA Courses in Noida based on the current IT industry standards that help students to get high paying jobs in Top MNCs. CIIT provides Best MCA Training in Noida, Greater Noida, and Ghaziabad. CIIT is one of the trusted MCA training institutes in Noida providing practical knowledge and 100% job assistance with basic as well as advanced level MCA subjects. CIITN is the best MCA college in Noida, greater noida, ghaziabad, delhi, gurgaon regoin.

    At CIIT MCA classes in Noida is conducted by subject experts corporate professionals with 9+ years of experience in managing real-time and live projects. Sofracle Nano Specialized MCA classes Noida is the perfect blend of academic learning and practical sessions to provide maximum exposure to students that transform an average student into a corporate professional whom companies prefer to hire.

    Best MCA College in Noida

    ReplyDelete