JavaScript Object Creation

/*
 * JavaScript object functional constructor.
 */
var constructStudent = function(name, age, caddress, paddress) {
    this.name = name;
    this.age = age;
  
    Object.defineProperties(this, {
        "Caddress" : {
            enumerable : false,
            value : caddress
        },
        "Paddress" : {
            enumerable : true,
            value : paddress
        },
        "University" : {
            value : "UPTU",
            writable : false
        },
        "Country" : {
            value : "India",
            configurable : false,
        },
    });
    return this;
}

function kick() {
    console.log('kick');
}
/*
 * prototype of javaScript object.
 */
constructStudent.prototype = {
    collegeName : "GLBITM",
    markCalculator : function(math, science) {
        var totalMarks = math + science;
        return totalMarks;
    },
    resultCalculator : function(totalMarks) {
        var total = totalMarks;
        if (total > 33) {
            console.log("pass");
        } else {
            console.log("fail");
        }

    }

}
var firstBoy = new constructStudent('anshul', '23', 'bangalore', 'mahoba');
firstBoy.name = "rahul";
firstBoy.University = "MTU";
console.log(firstBoy.name);
console.log(firstBoy.University);
var total = firstBoy.markCalculator(22, 56);
firstBoy.resultCalculator(total);
console.log(total);
console.log(firstBoy.collegeName);
console.log(Object.keys(firstBoy));
console.log(Object.getOwnPropertyNames(firstBoy));
console.log(firstBoy.hasOwnProperty('collegeName'));
var result = [];
for ( var propName in firstBoy) {
    result.push(propName);
}
console.log(result);
delete firstBoy.Country;
console.log(Object.getOwnPropertyNames(firstBoy));
console.log(firstBoy.propertyIsEnumerable('collegeName'));

Website start-up terms

How to start a website :

1. choose a registrar company, buy a domain name.

2. choose a web- host company, they will provide some server space and web interfaces to your website.

3.go back to your registrar and provide your server space address.By doing this you told your resistrar that whose DNS server you are using.

Now when website hit first time, my request will propagate to the root servers, those root servers do know  who knows where all the .com mappings taken, and finally you get your response, thats what registrar do for you.

MX- mail server setup. go to google.com, reach at appropriate choice that I want to host my mail here.than they give you some MX records list by saying that tell your resister that your are going to use these MX records for your website mails.Now when an email is sent it may be go to your DNS server but then finally it reaches to google server and your mail finally  outsourced.

CNAME - CNAME maps from one domain name to another domain name.

A - A maps from IP address to domain name.

If I have a website and wants to tell world about my website than what I need to do.for example if I have firstemission.com as my website than first I need to create  A map for my website.

After that If I want to open my mails as mail.firstemission.com despite of that we have our MX records at google server than we need to map CNAME mapping for that.

Virtual Private Server(VPS)- for more control in our server.we can buy VPS.it is good for learning purpose.                                                                                                                         

Prototype in JavaScript

Few Important things before reading prototype :

• The functions in JavaScript are objects and they contain methods and properties. Some of the common methods are apply() and call() and some of the common properties are length and constructor. Another property of the function objects is prototype.
• prototype is the property of functional objects. 
• Only functions and no other object can be used as a constructor in javascript .

1.  Extending an object by adding a custom method can be quite convenient, but it only applies to that particular object's instance. What if you wanted to modify the entire existing class to add new functionality? For this, we use the prototype property.


2.  Adding properties or methods to the prototype property of an object class makes those items immediately available to all objects of that class, even if those objects were created before the prototype property was modified.


3.  Note that adding a public property to a class of objects creates a single value which all instance objects share. However, modifying this value through this.globalPropertyName will result in a local public property of the object being created and set. Modifications to the class-wide property must be made through the prototype property of the class.


4.  Declaring javascript object methods in constructor or in prototype:

a)  If your methods do not use local variables defined in your constructor , then use the prototype approach.
b) If you're creating lots of Dogs, use  the prototype approach. This way, all "instances" (i.e. objects  created by the Dog constructor) will share one set of functions, whereas the constructor way, a new set of functions is created every time the Dog constructor is called, using more memory.


5. Inheritance :

a) You cause a class to inherit using  ChildClassName.prototype = new ParentClass();.
b) You need to remember to reset the constructor property for the class using ChildClassName.prototype.constructor=ChildClassName.
c) You can call ancestor class methods which your child class has overridden using the Function.call() method.
d) Javascript does not support protected methods.
(For detailed study follow : this link )


6. To add a property or method to an entire class of objects, the prototype property of the object class must be modified. The intrinsic object classes in JavaScript which have a prototype property are:
Object.prototype — Modifies both objects declared through the explicit new Object(...) constructor and the implicit object {...} syntax. Additionally, all other intrinsic and user-defined objects inherit from Object, so properties/methods added/modified in Object.prototype will affect all other intrinsic and user-defined objects.
Array.prototype — modifies arrays created using either the explicit new Array(...) constructor or the implicit [...] array syntax.
String.prototype — modifies strings created using either the explicit new String(...) constructor or the implicit "..." string literal syntax.
Number.prototype — modifies numbers created using either the explicit new Number(...) constructor or with inline digits.
Date.prototype — modifies date objects created with either the new Date(...) constructor.
Function.prototype — modifies functions created using either the explicit new Function(...) constructor or defined inline with function(...){...}.
RegExp.prototype — modifies regular expression objects created using either the explicit new RegExp(...) constructor or the inline /.../ syntax.
Boolean.prototype — applies to boolean objects created using the explicit new Boolean(...) constructor or those created using inline true|false keywords or assigned as the results of a logical operator.
(For detailed study follow : this link)

7. Danger of adding methods to Object.prototype:

·         Object.prototype.length = function(){

    var count = -1;

    for(var i in this) count++;

    return count; //appendTo method brock.

  }

           // Do not use this

Object.prototype.load = function () {};

   $(window).load(function () {

  alert('load event'); // never fired

});​

Augmenting the Object.prototype object in that way is never recommended, because those properties will be inherited by a great number of objects -even also by some host objects-, and as you know, the primary concern is that they will be enumerated by the for-in statement. Some methods of jQuery liberary are incompatible with extending Object.prototype.

In ECMAScript 5, now a safer way exists, because we can now declare non-enumerable properties, for example:

Object.defineProperty(Object.prototype, 'foo', {

value: 'bar',

 });

In the property descriptor -{ value: 'bar' }- we can specify property attributes, in the case of Value Properties as in the above example, we can specify the writable attribute, and the common configurable attribute (determines if a property can be re-configured -attribute changes- or deleted).

And we have also the enumerable attribute, which determines if the property will be enumerated by the for-in statement.

If we don't specify the attributes, they are false by default, the descriptor will look like:

{

  value: 'bar',

  writable: false,

  configurable: false,

  enumerable: false

}

So far we talked about various points, but from here we are concentrating only in enumeration.

8. About making properties non-enumerable:

Benefit of making properties non-enumerative- I think the main benefit is to be able to control what   shows up when enumerating an object's properties, such as for in or Object.keys().So normally, when people want to add a method to Object, such as a polyfill for some method not supported in old browsers, they modify the .prototype. But that makes the property enumerable and messes up what is returned in loops/keys collection (without using .hasOwnProperty).
So instead of something like:

Object.prototype.myMethod = function () {

    alert("Ahh");

};

you could use Object.defineProperty to explicitly say to have it not be enumerable:

Object.defineProperty(Object.prototype, 'myMethod', {

    value: function () {

        alert("Ahh");

    },

    enumerable: false

});

That way, for example when you use for (var key in obj), "myMethod" won't be an item enumerated, and you won't have to worry about using .hasOwnProperty. The main problem with this is that some browsers don't support it of course: link and that not all libraries/code use it, so you can't always rely on external libraries/code to do use correctly and all the time.
You can access a non-enumerable property at any time you want, it just won't show up when enumerating the object's properties - that's the main point.
And I do believe that all "predefined" properties of objects are non-enumerable. By that, I really only mean native properties, not necessarily inherited or created. So with your example, pop and push will not be enumerated over, but Array.prototype.indexOf will be if it is created as a polyfill on an old browser that doesn't support that method...which of course, can be avoided by using Object.defineProperty like my example above. Another example is the length property, which is not enumerated over.
Here's an example in general: link
The use and definition of Object.keys is important: "Returns an array of a given object's own enumerable properties, in the same order as that provided by a for-in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well)." - from MDN . 

9. There are some details to be aware of:

• Not all properties show up in a for-in loop. For example, the length (for arrays) and constructor properties will not show up. The properties that do show up are called enumerable. You can check which ones are enumerable with the help of the propertyIsEnumerable() method that everyobject provides.
• Prototypes that come through the prototype chain will also show up, provided they are enumerable. You can check if a property is an own property versus prototype's using the hasOwnProperty() method.
• propertyIsEnumerable() will return false for all of the prototype's properties, even those that are enumerable and will show up in thefor-in loop.

Let's see these methods in action. Take this simplified version of Gadget():

function Gadget(name, color) { 
   this.name = name; 
   this.color = color; 
   this.someMethod = function(){return 1;}
}
Gadget.prototype.price = 100;
Gadget.prototype.rating = 3;

Creating a new object:

var newtoy = new Gadget('webcam', 'black');

Now if you loop using a for-in, you see of the object's all properties, including those that come from the prototype:

for (var prop in newtoy) { 
   console.log(prop + ' = ' + newtoy[prop]); 
}

The result also contains the object's methods (as methods are just properties that happen to be functions):
name = webcam
color = black
someMethod = function () { return 1; }
price = 100
rating = 3
If you want to distinguish between the object's own properties versus the prototype's properties, use hasOwnProperty(). Try first:
 >>> newtoy.hasOwnProperty('name')
true

>>> newtoy.hasOwnProperty('price')

false .

Best practice with jQuery

 1. How to select your selector ?

There are various ways of selecting a DOM element in jQuery, but performance depend on how we select our selector.faster to slower-
 $(“#id”) - This is the fastest way of selecting a DOM element.because it uses native document.getElementId() method.
 $(“tagName”) - Use of tag name for selector is also very fast, such as for better performance we can use $(“p”), because it uses native document.getElementsByTagname() method.
 $(“.class”) - This also a fast selector but slow in older versions of IE.It uses native document.getElementByClassName() method. because all above methods have their respective native methods so they are very fast. 
 $(“[attribute=name]”) - Selection by using attribute is slow because it does not have any native method in JavaScript.
 $(“:hidden”) - This is the most powerful but slowest selector in all of above so be careful when we use pseudo-selectors.

2. How to use jQuery Object for Chaining ?

An important fact about jQuery is that its almost all methods returns a jQuery object, its mean we can use multiple methods in a single line.It will make our code slightly shorter and more faster.Example:
$(“obj”).addClass(“try”);
$(“obj”).css(“color”,”red”);
$(“obj”).height(100);
by using chaining we can minimize our code as :
$(“obj”).addClass(“try”).css(“color”,”red”).height(100);

3. How to use Cache ?

If you are using a selector more than one times in your code then its better to use caching in your program.It will improve your program performance.
$(“multiply”).find(“id”).addClass(“plus”);
$(“multiply”).find(“id”).removeClass(“plus”);
by using Cache:
var multi = $(“multiply”).find(“id”);
multi.addClass(“plus”);
multi.removeClass(“plus”);
by using cache and chaining both:
var multi = $(“multiply”).find(“id”);
multi.addClass(“plus”).removeClass(“plus”);

4. How to handle events in better way ?

“Event-listeners cost memory”
Whenever we are writing a event-listener than always kept in mind the above statement.
Commonly in our code we uses hundreds of event-listener and jQuery provides us various method for that but how to use efficiently these methods is upto us.Example:
$(“table”).find(“td”).click(function(){
          $(this).toggleClass(“active”); })
Here, we are binding an event to each “td” of table which will take more memory,instead of that we can use “on” method which wrap-up functionality of all jQuery’s previous event-listeners (.bind(),delegate(),.live()). additionally “on” support some other parameters also which helps in delegation.
$(“table”).find(“td”).on(“click”,function(){
          $(this).toggleClass(“active”); })
but in above still we are binding our event with each “td” again wastage of memory, so we can use in such a manner.here we are binding event with our table not  in a particular “td”,so here we reduced our memory uses.
$(“table”).on(“click”,”td”,function(){
       $(this).toggleClass(“active”);})

5.How to separate “CSS” and “jQuery” ?

Instead of changing appearances by jQuery directly, we can use CSS classes for changing  appearances.
$(“table”).css(“color”,”red”);
Instead of that we should make a CSS class and then use jQuery methods to implement that class.Such as:
CSS class:
.red{
 color:red;
}
jQuery:
$(“table”).addClass(“red”);
It will provide us more flexibility, we can easily remove that css whenever required.

6. How to store data in jQuery ?

.attr or .data - Many of us use .attr method for storing data, which is not a good practice.Instead of that we should use .data method for storage. .attr method is for manipulating the attribute.So:
$(‘selector’).attr(‘alt’, ‘this is the data that I am storing’);
           // then later getting that data with
          $(‘selector’).attr(‘alt’);
Here we are storing data with HTML, which are not meant to be.Instead of that we store data in our javaScript code,which is a better idea.
Instead of that we should use:
$(‘selector’).data(‘meaningfullname’, ‘this is the data I am storing’);
// then later getting the data with
$(‘selector’).data(‘meaningfullname’);

Updation continue in this article @ click  you can send your suggestion on java.ansh@gmail.com .