jQuery : as Cross Browser Solution :: Basics

• Javascript Basics
• Arrays
• Functions
• Scope
• The Document Object Model
• Built-in Functions

jQuery is a framework which is built on JavaScript capabilities. So while developing your applications using jQuery, you should have understanding of below functions and other capabilities available in JavaScript.
This article would explain most basic concepts but frequently used in jQuery based applications.

Numbers

Numbers in JavaScript are double-precision 64-bit format IEEE 754 values. They are immutable, just as strings.
Following are the valid examples of a JavaScript Numbers –

40490
1120.27
0.89

String

A string in JavaScript is an immutable object that contains none, one or many characters.
Following are the valid examples of a JavaScript String.

"This is hello String"
'This is hello String'
'This is "hello" String in JavaScript'
"This is 'hello' String in JavaScript"

Boolean

A boolean in JavaScript can be either true or false. If a number is zero, it defaults to false. If an empty string defaults to false.
Following are the valid examples of a JavaScript Boolean.

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

Objects

JavaScript supports Object concept very well. You can create an object using the object literal as follows.

var employee = {
   name: "james",
   age: 20
};
You can write and read properties of an object using the dot notation as follows.

// Setting object properties
employee.name = "Bond"  // <== Bond
employee.age  =  40     // <== 40

// Getting default object properties
employee.name  // ==> james
employee.age   // ==> 20

You can define arrays using the array literal in javascript as below.

var x = [];
var y = [10, 20, 30, 40, 50];

An array has a length property that is used for iteration.

var x = [10, 20, 30, 40, 50];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i] or print it
}

A function in JavaScript can be either named or anonymous. A named function can be defined using function keyword as below.

function named(){
   // do some process here
}

An anonymous function can be defined in similar way as a normal function but it would not have any name. A anonymous function can be assigned to a variable or passed to a method as shown below.

var handler = function (){
   // do some process here
}
JQuery makes a use of anonymous functions very frequently as below.

$(document).ready(function(){
   // do some process here
});

Arguments

JavaScript variable arguments is a kind of array which has length property. Following example explains it very well.

function func(a){
   console.log(typeof a, arguments.length);
}

func();                  //==> "undefined", 0
func(10);                //==> "number", 1
func("10", "20", "30");  //==> "string", 3

The arguments object also has a callee property, which refers to the function inside that is as below.

function func() {
   return arguments.callee; 
}

func();                // ==> func

Context

JavaScript famous keyword this always refers to the current context. Within a function this context can change, depending on how the function is called.

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

You can specify the context for a function call using the function-built-in methods call() and apply() methods.
The difference between them is how they pass arguments. Call passes all arguments through as arguments to the function, while apply accepts an array as the arguments.

function scope() {
   console.log(this, arguments.length);
}

scope() 			// window, 0
scope.call("james", [1,2]);  	//==> "james", 1
scope.apply("james", [1,2]); 	//==> "james", 2

Scope

The scope of a variable is the place of your program where it is defined. JavaScript variable will have only two scopes.

• Global Variables - A global variable has global scope which means it is defined everywhere in your JavaScript code.
• Local Variables - A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

Within the body of a function, a local variable takes precedence over a global variable with the same name.

var myVar1 = "global";     // ==> Declare a global variable

function ( ) {
   var myVar1 = "local";   // ==> Declare a local variable
   document.write(myVar1); // ==> local
}

The Document Object Model

The Document Object Model is a tree structure of various elements of HTML as follows.

<html> 
<head> 
	<title>The jQuery Example</title> 
</head> 
<body> 
	<div> 
		<p>Paragraph1 is here.</p> 
		<p>Paragraph2 is here.</p> 
		<p>Paragraph3 is here.</p> 
	</div> 
</body> 
</html>

This will produce following result. Following are the important points about the above tree structure.

• The <html> is the ancestor of all the other elements; in other words, all the other elements are descendants of <html> .
• The <head> and <body> elements are not only descendants, but children of <html> , as well.
• Likewise, in addition to being the ancestor of <head> and <body> , <html> is also their parent.
• The <p> elements are children (and descendants) of <div>, descendants of <body> and <html>, and siblings of each other <p> elements.

Built-in Functions

JavaScript comes along with a useful set of built-in functions. These methods can be used to manipulate Strings, Numbers and Dates.

Following are important JavaScript functions.