Coding Cheatsheets - Learn web development code and tutorials for Software developers which will helps you in project. Get help on JavaScript, PHP, XML, and more.

Post Page Advertisement [Top]

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');

26 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. 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
  3. Thank you for this post. Thats all I are able to say. You most absolutely have built this blog website into something speciel. You clearly know what you are working on, youve insured so many corners.thanks

    Selenium training in Chennai

    Selenium training in Bangalore

    ReplyDelete
  4. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing..
    Believe me I did wrote an post about tutorials for beginners with reference of your blog. 




    Selenium training in bangalore
    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training

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

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

    ReplyDelete
  7. Amazing post. I really enjoy for this status.
    This post are very useful and powerful . Your services are best.
    Thanks for sharing..Study in Canada Consultants
    study in Canada consultansts in Delhi
    canada immigration consultants in delhi

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

    ReplyDelete
  9. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    splunk online training

    ReplyDelete
  10. https://www.chihuahuapuppiesforsale1.com/
    https://www.chihuahuapuppiesforsale1.com/chihuahua-puppies-for-sale-near-me/
    https://www.chihuahuapuppiesforsale1.com/teacup-chihuahuas-puppies-for-sale/
    https://www.chihuahuapuppiesforsale1.com/chihuahuas-for-sale/
    https://www.chihuahuapuppiesforsale1.com/teacup-chihuahuas-for-sale/
    https://www.chihuahuapuppiesforsale1.com/chihuahua-pupies-for-sale/
    https://www.chihuahuapuppiesforsale1.com/chihuahua-puppies-near-me/
    https://www.chihuahuapuppiesforsale1.com/chihuahua-for-sale/
    https://www.chihuahuapuppiesforsale1.com/teacup-chihuahua-puppies-for-sale-2/

    ReplyDelete
  11. This post is very simple to read and appreciate without leaving any details out. Great work!
    data analytics training in aurangabad

    ReplyDelete
  12. Windows 7 product keys for 64-bit version · MLPOK-NJIUH-BVGYT-FCXDR-ESZAQ · W1Q2A-3S4F4-R5TGY-HG7UH-Y8IKJ · M9N8B-7V6C5-X4Z32-SDA4D-EF5GH · T6HJY-67JKI-U789L-KMNBV- .Windows 7 Product Key Crack

    ReplyDelete
  13. Synthesia Crack is a best tool to learn or play the piano in an advanced manner. It works like a real piano to provide you the full taste. File Magic License Key

    ReplyDelete

Bottom Ad [Post Page]