How Logical Operators work in JavaScript?

Let’s understand the Logical Operators and how they work in JavaScript…

  1. Logical AND (&&)
  2. Logical OR (||)
  3. Logical NOT (!)

Logical operators are typically used with Boolean values but can also be used with non-Boolean values-

=> When values are Boolean then they return a Boolean value

=> When values are non-Boolean then they may return a non-Boolean value. In this case && and || operators actually return the value of one of the specified operands

LogicalOperators.PNG

LogicalOperators1.PNG

Programming is Easy…

 

Advertisements

What is ES-5, ES-6 or ES2015 and TypeScript? [ES = ECMAScript]

Before discussing ES5 or ES6 let’s discuss what actually is ECMAScript-

ECMAScript is a standard, JavaScript is an implementation of that standard. ECMAScript defines the standard and browsers implement it.

In a similar way, HTML specifications (most recently HTML5) are defined by the organising body and are implemented by the browser vendors. Different browsers implement specifications in different ways, and there’s varying amounts of support for different features.

  1. ES5-  ES5 is the JavaScript we know today and use in web applications. It does not require a build step to transform it into something that will run in today’s browsers.
  2. ES6 – Also called ES2015 is the next iteration of JavaScript with many enhanced features(http://es6-features.org) but it does not run in today’s browsers. So we need a transpiler like Babel that will export ES5 code means it will compile ES6 code to ES5 code that today’s browsers support and can be run easily in the today’s browsers. 
  3. TypeScript – TypeScript is a typed superset of JavaScript that also compiles to plain JavaScript. This is pulling in features from ES6, ES7… Or future’s JavaScript. It help us to write safe JavaScript code means mistakes in JavaScript code can be noticed at development time due to it’s compile feature. As this is the superset of JavaScript so it contains JavaScript and some additional features as well.

What is “this” value in JavaScript?

In JavaScript a function’s this keyword value is –

  1. determined by how a function is called. 
  2. never static and has a different value depending on how the function was invoked.

Below are the this values in different execution context- 

  • Global Context– In the global execution context (outside of any function), this refers to the global object, whether in strict mode or not.
  • Function Context – If code is not in strict mode, and because the value of this is not set by the call, this will default to the global object- In strict mode, however, the value of this remains at whatever it was set to when entering the execution context, so, in the following case, this will default to undefined 
    So, in strict mode, if this was not defined by the execution context, it remains undefined.
  • Custom value- To pass this value from one context to another we can use call or apply functionsWhere a function uses the this keyword in its body, its value can be bound to a particular object in the call using the call or apply methods which all functions inherit from Function.prototype

What is the difference between attributes and properties in HTML/JAVASCRIPT ?

The difference is that,  the  prop  method deals with properties defined by the Dom  ApI  HTMLElement  object,  rather than attributes defined by the  htmL element in markup.

Often,  the attributes and properties are the same,  but this isn’t always the case.  A simple example is the  class  attribute,  which is represented in the  HTMLElement  object using the  className  property.

In general,  the  prop  method is the one you should use because it returns objects that are easier to work with than attribute values.

Programming is Easy !!!!

What is Undefined and Null in JavaScript?

Many people get confused with the difference between undefined and null.  In truth, it’s quite simple to see how it works.

=》Undefined is the default value assigned to any variable.
So, if I created a variable as follows and printed its value, it would be undefined.

var initialVariable;
console.log(initialVariable);

=》Null has to be assigned by the programmer to empty a variable and is not a default value.

var initialVariable = ‘hello’;
initialVariable = null;

Both of these types are considered primitive data types in the JavaScript world.

Programming is Easy….

Objects in JavaScript

A JavaScript Object is an un-ordered collection of key value pairs.

Each object has a single prototype object. The prototype may be the null value. The keys of objects are called properties. Properties are containers for primitive values and other objects. When properties contain functions as their values, they are called methods.

Object are dynamic in nature means we can add, modify or remove properties of objects
at any time of program execution.

Below is a sample java script object:-

var objStudent = { // object "objStudent" with four properties: firstName, lastName,getFullName and otherInfo.
  firstName: 'Jogendra', // primitive value
  lastName: 'Singh', // primitive value
  getFullName: function () { // function (method)
    return this.firstName+' '+ this.lastName;
  },
  otherInfo:{age:28} //object 'otherInfo' with property age
};
 
alert(objStudent.firstName); // 'Jogendra'
alert(objStudent.lastName); // 'Singh'
alert(objStudent.getFullName()); // 'Jogendra Singh'
alert(objStudent.otherInfo); // [object Object]
alert(objStudent.otherInfo.age); // 28

We can also access object properties as-
alert(objStudent['firstName']); // 'Jogendra'
etc...

There are several ways to create objects in java script. Some of the techniques are given below:-

1) Object constructor-

Ex-

var objStudent=new Object();
objStudent.firstName='Jogendra';
objStudent.lastName='Singh';
objStudent.getFullName=function () { 
    return this.firstName+' '+ this.lastName;
};
objStudent.otherInfo={age:28};

2) Literal notation-

Ex-

var objStudent={};
objStudent.firstName='Jogendra';
objStudent.lastName='Singh';
objStudent.getFullName=function () { 
    return this.firstName+' '+ this.lastName;
};
objStudent.otherInfo={age:28};

3. Function Constructor- It allows to encapsulate and re-use the logic for creating similar objects.

Ex-

function Student(fName, lName, age){
    this.firstName=fName;
    this.lastName=lName;
    this.getFullName=function(){
        return this.firstName+' ' +this.lastName;
    }
    this.otherInfo={age:age};
}

var objStudent=new Student('Jogendra', 'Singh', 28);

4. Object.create method- It allows you to choose the prototype object for the object you want to create, without having to define a constructor function.

var Student = { 
  firstName: '', 
  lastName: '', 
  getFullName: function () { 
    return this.firstName+' '+ this.lastName;
  },
  otherInfo:{age:0} 
};

var objStudent1=Object.create(Student);
objStudent1.firstName='Jogendra';
objStudent1.lastName='Singh';
objStudent1.getFullName=function () { 
    return this.firstName+' '+ this.lastName;
};
objStudent1.otherInfo={age:28};

As stated above js objects are dynamic in nature. So we can add/remove properties from onjects-

var objTemp={x:100};

Object.defineProperty(objTemp, "y", {
  value: 20,
  writable: false, // read-only
  configurable: false // non-configurable
});
 
// can't modify
objTemp.y = 200;
 
// can't delete
delete objTemp.y; // false
 
// prevent extensions
Object.preventExtensions(objTemp);
console.log(Object.isExtensible(objTemp)); // false
 
// can't add new properties
objTemp.z = 30;
 
console.log(objTemp); {x: 10, y: 20}

we can also freeze the object as-

var objTemp = {x: 10};
 
// freeze the object
Object.freeze(objTemp);
console.log(Object.isFrozen(objTemp)); // true
 
// can't modify
objTemp.x = 100;
 
// can't extend
objTemp.y = 200;
 
// can't delete
delete objTemp.x;
 
console.log(objTemp); // {x: 10}

There are several API methods for objects like Object.getOwnPropertyNames(objTemp) etc….

More info please visit to- http://msdn.microsoft.com/en-us/library/ie/ff800817(v=vs.94).aspx

Programming is Easy…

How to disable the button and change text to processing while the page is processing?

As we know that a button behaviour is submitting the data, If we click multiple times on a button then form data submits multiple times and makes repetitive entries in the database which is wrong. To prevent multiple entry we can follow the following simple solution.

1) On very first click we will disabled the button using any client side scripting language.

2) we can also change the text like “Processing…” etc… if needed.

3) On completion the task we will enable the button and change the text to old one.


function DisableButton() {
    $("#btnSubmit").attr("disabled", "disabled");
    $("#btnSubmit").attr('value', 'Processing...');
}

//We will call this method on client side using onClientClick event.  
<asp:Button runat="server" ID="btnSubmit" ClientIDMode="Static" 
Text="Submit" OnClick="btnSubmit_Click"  OnClientClick="DisableButton();" />
						

Here button will cause the page postback so the button will get the enabled and the text will change the same as before. If your button does not cause the page postback then we need to enable the button on the task completion in our scripting code.

function EnableButton() {
    $("#btnSubmit").removeAttr("disabled");
    $("#btnSubmit").attr('value', 'submit');
}					

Programming is Easy..