Trivia about JavaScript Variables

• Variables are typeless.
• Act like containers
• Prefixed with var keyword for declaration (Not mandatory)
• variable name must begin with a letter (exception characters being $ or _ but not recommended)
• variables are case sensitive  
• Many variables can be declared and assigned (separated with a coma) with a single var prefix.
• An unassigned variable will return 'undefined' when referred
  

JavaScript: defer vs async

defer in JavaScript

To run a script block after the page is parsed in other words after the page is loaded, we use the defer keyword in the <script> block.
 
The keyword instructs the browser to wait until ready before executing the JavaScript block.
 
The key rule is the defer attribute will work only for external scripts i.e the keyword can be used only if the JavaScript file is loaded with a src attribute.

syntax:

<script src="test.js" defer>

async in JavaScript

Instructs the browser to run a script block as soon as the the block is available.

There is no wait time here for the browser to be ready. The script block is run in an asynchronous manner as and then the page is being parsed.

syntax:

<script src="test.js" async>

async vs defer

1. aync will take precedence over defer. The script will be asynchronously executed when the page is being parsed.
 
2. If no async but defer, the defer attribute property is executed.
 
3. If not defer or sync, the  script is fetched and executed immediately before parsing.

JavaScript: typeof

The typeof is an operator in JavaScript. 
It gets the data type of the variable. 
It returns a string value mentioning the datatype of the string. 
The operand can be a value, function or an object.

The following are the six possible typeof returns;

object
boolean
function
number
string
undefined

Syntax:

var sName = 'JavaScript';

//Usage format #1
alert(typeof sName);    //Will display string

//Usage format #2
alert(typeof(sName));    //Will display string

Tip: Always use the strict compare "===" when sing the typeof in a conditional operation.

Example:

var sName = 'JavaScript';

if(typeof(sName) === 'string')
{
    alert('The variable is a String');
}

Trivia: typeof(null) returns object

JavaScript: OOP Fundamentals

An overview on what are the data types, objects, object types, constructor and 'arguments' keyword available in JavaScript are discussed below.

JavaScript Data types

UNDEFINED
NULL
NUMBER
STRING
BOOLEAN

Later three are extensively used.

How to determine the data type?

TYPEOF operator

Example: alert(typeof true);

Here this will return Boolean.

OBJECT

A collection of properties which can be primitive data types, other objects or functions. The "new" keyword tells the JavaScript to create an object for the function.

Types 

a. Native Objects

These are by default supplied by the JavaScript. A few examples include Date, Image, Array, Math, etc., 
 

b. Host Objects

 

These objects are available for use in JavaScript related to the browser and supplied by the browser. A few examples include navigator, window, document, etc.,

 

c. User-Defined Objects

 

These are user/programmer designed objects.

 

Constructor

Also can be termed as a constructor function that can be used to create an object.

Example: var objDate = new Date();

Here objDate is the OBJECT and Date() is the CONSTRUCTOR.

"this" Keyword

The scope this keyword is limited to the object created for a specific function.

ARGUMENT

In every function there is a variable named argument which holds an array of argument values passed. This can be overwritten.

for(iCounter=0;iCounter

{

alert(“This is Argument Number - ” + iCounter + “. Argument Value is : ” + arguments[iCounter]);

}

JavaScript: Checkbox - Select All

A very common scenario in a HTML table with check-box(s), a select / un-select all. Here is a simple approach to do that using JavaScript viz.,
1. Let's have two links (like gmail) to Select All and UnSelect All.
2. Let the two functions call a single function to do the operation. The function will accept the following parameters viz.,

    1. A boolean value where true => Select / false => UnSelect
    2. The name mentioned for the checkbox.

function fnCheckAll(status)
{
    var arrCheckBoxList;
    var iCounter;
    arrCheckBoxList = document.getElementsByTagName('checkboxlist');

for(iCounter=0;iCounter<arrCheckBoxList.length;iCounter++)
    {
        arrCheckBoxList[iCounter].checked = status;
    }
}

The following is a HTML snippet to call the function viz.,

<a href=”javascript:void(0);” onclick=”javascript:fnCheckAll(true);”>Select All</a>

<a href=”javascript:void(0);” onclick=”javascript:fnCheckAll(false);”>UnSelect All</a>

Note: All the checkboxes should have the same name passed in the second parameter.

This JavaScript snippet will do the trick. :)

Technorati Tags: JavaScript,Select All,Checkbox,JavaScript Select All

JavaScript: IE Check

We might come across a scenario where in the JavaScript code being written should be compactable in IE and non IE browsers. A very simple check can be made for this and the snippet is as follows viz.,

if(window.ActiveXObject)
{
    alert('Browser is an Internet Explorer');
}
else
{
    alert('Browser is a Non Internet Explorer');
}

Technorati Tags: JavaScript,Checking IE,Cross Browser Code

JavaScript: document Object

 

The document is the root object that can consists of all the elements enclosed within HTML, HEAD and BODY tags in a web page.

The most common functions to get the element(s) / the element properties are as follows viz.,

• document.getElementById
• document.getElementsByName
• document.getElementsByTagName

The document.getElementById returns the require object of the element searched.

The other two functions return an array object which can be looped to get the individual elements.

Technorati Tags: JavaScript,JavaScript document,document,document Object

JavaScript IIF

A control statement (IIF) in JavaScript. A very simple terminology reference that might be used in a day to day programming paradigm.

Syntax

(CONDITION)?'OUTPUT_WHEN_SATISFIED':'OUTPUT_WHEN_NOT_SATISFIED';

Sample Snippet

    var sResult;
    sResult=(1==2)?'No':'Yes';
    alert(sResult);

Output: Yes will be displayed as a message.

Tags: JavaScript, JavaScriptIIF,JavaScript IIF, JavaScript iif, iif