Anatomy of a jQuery Script

It is a type of framework which uses all the data types, functions and the capabilities of Javascript.

1. String

It is an object which contains none (“”), one (“a”) or many characters (“abcd”).

2. Numbers

It has double – precision 64 – bit format IEEE 754 values.
Example: 1256, 102.64, 0.36

3. Boolean

This is either true or false. The number 'zero' and an 'empty string' always defaults to false.

Example:
  • If there is 0, the value will be false.
  • If there is an empty space like “ ” then also the value is false.
  • If there is a value “TutorialRide” then the value is true.

4. Arrays

Arrays are defined by using the array literals in the following manner.

Example

var a = [];
var b = [10,20,30];
for (var i = 0; i<y.length; i++)
{
     a[i] = y[i];
}

5. Objects

The objects can be created, get(read) and set(write) in the following ways

Example:
var emp = {fname: “Seema”, age: 29};          //creating an object
emp.fname          // Getting the (read) object properties for “Seema”
emp.age          // Getting  the (read) object properties for 29
emp.fname = “Rajesh”          // Setting the object properties
emp.age = 24          // Setting the object properties

6. Functions

There are two types of functions:

a) Named function: Defined by using the function keyword.

Example:
function namedfunct ()
{
     //code
}

b) Anonymous function: Defined in the similar manner as that of a named function except that it will not have any name. This function can be assigned to a variable or can be passed to a method.

Example 1 : Anonymous function assigned to a variable
var hand = function()
{
     //code
}

Example 2: Anonymous function is passed to a method (this is used frequently)
$(document).ready(function()
{
     //code
});

7. Arguments

They are arrays which are passed to the functions.

Example : How to pass the arguments?

function func(a)          //named function
{
     console.log(typeof a, arguments.length);
}
funct();          //“undefined”, 0
funct(1);          //“number”, 1
funct(“1”,“2”,“3”);          //“string”, 3

The argument objects can have a called property which refers to the function we are currently in.

Example : Demonstrating called property of arguments
function funct()
{
     return arg.called;
}
funct();          //===> func

8. Context

It refers to the current context.

Example:
$(document).ready(function(){   });          // This refers to the window.document
$(“div”).click(function() {   });          // This refers to a DOM element div

The context for a function call can be specified by using the built in functions call() and apply().

Difference between call() and apply()

call() - It passes all the arguments as arguments to the function.
apply() - An array is accepted as an argument.

Example : Demonstrating context

function diff()
{
          console.lo(this, args.length);
}
diff()
diff.call(“a1”,[1,2]);          // “a1”, 1
diff.apply(“a2”,[1,2]);          // “a2”, 2

9. Scope

It helps in defining the region of the program in which the variable is defined.

There are two types of variables:

a. Global variable – There is global scope which means that they can be used anywhere in the program file.
b. Local variable – There is local scope which means that it is visible only within the function where it is defined.

Scope Precedence : In case of the variables with the same name inside the body of a function, a local variable has more precedence over a global variable.

Example : Demonstrating the global and the local variables

var x = “global”          //Declaration of a global variable

function()
{
     var x = “local”;          // Declaration of local variable
     document.write(x);          // returns 'local'
}

10. Callback

It is a simple javascript function or an event which is passed as an argument to some method so that the user gets a chance to react when a certain state is triggered.

Example 1:
$(“body”).click(function(event)
{
     console.log(“clicked:” + event.target);
});

Example 2 : Returns from a callback function
$(“#formname”.submit(function()
{
     return false;
});

11. Closures

It is created when a variable which is defined outside the current scope is accessed from within some inner scope.

Example

Demonstrating how the variable count is visible within the create, increment and print functions but are not visible outside them.

function creation()
{
     var count = 0;
     return
     {
          increment: function() {cnt++};
          print: function() {console.log(cnt);}
     }
}
var x = creation();
x.increment();
x.print();          //1

12. Proxy Pattern

  • Controls access to another object.
  • Proxy object implements same interface as real object and passes on any method invocations to it.
  • For executing a proxy pattern we use jQuery's setArray method in a closure and overwrite it.

Example

var proxied = jQuery.ajax;          // Preserving original function
jQuery.ajax = function()
{
     jQuery("#loading").dialog({modal: true});
     return proxied.apply(this, arguments);
}

13. Built-in functions

They are used to manipulate strings, numbers and dates.

MethodDescriptionExample
charAt()Character returned at specified index.var s = new String(“My string”);

document.writeln(“str.charAt(0) is:” +str.charAt(0)); //returns M

document.writeln(“<br/>str.charAt(1) is:” + str.charAt(1)); // returns y
concat()Combination of two strings into one string.var s1 = new String (“THE”);
var s1 = new String (“END”);
var s3 = s1.concat(s2);
indexOf()Index is returned within a string of the first occurrence of the specified value. Returns -1 if not found.var s1 = new String (“Be the change”);

var I = s1.indexOf(“string”);

document.write(“indexOf found string” +index);
length()Length of the stringvar s = new String (“TutorialRide”);
document.write (“String length:” + s.length);
// returns 12
pop() It removes and returns last element from an array.var n = [3,6,20];
var last = n.pop();
document.write(“last is:” + element); //returns 20
push()Adds one or more elements to the end of an array and returns the new length of the array.var n = [3,6,20];
var len = n.push(15);
document.write(“new numbers are:” + n); //returns  3,6,20,15
reverse()Reverses the order of the array element.var a = [5,6,7,8].reverse();
//returns 8,7,6,5
sort()Sorts the array elementvar a = new Array(“apple”, “sun”, “bowl”, “moon”);

var s = a.sort(); //returns apple,bowl,moon,sun
substr()Characters are returned in a string beginning at a specified position through specified number of characters.var s = “TutorialRide”;
document.write(str.substr(1,3));
//returns uto
toLowerCase()Converts string to lower case.var s = “TutorialRide”;
document.write(s.toLowerCase( ));
//returns tutorialride
toString()It converts a number value to a string representation.var n = 3;
document.write(num.toString( ));
//returns string 3
toUpperCase()Converts string to uppercase.var s = “TutorialRide”;
document.write(s.toUpperCase( ));
//returns TUTORIALRIDE

14. DOM

  • It is abbreviated as Document Object Model.
  • It is a tree structure of various html elements.

Example : Illustrating the DOM structure

<html>
     <head>
          <title>The Document</title>
     </head>
     <body>
          <div>
               <p>Have a proper font and font size.</p>
               <p>See that the topic is written properly.</p>
               <p>Have a good reference book.</p>
          </div>
     </body>
</html>


The above tree structure says,
  • <html> - ancestor(parent) of all the other html elements.
  • <head> and <body> - decendants (children) of <html>.
  • <p> element is descendant (children) of <div>, <body> and <html>. <p> are siblings to each other.