jQuery - Basics

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

An anonymous function can be defined in the same way as a normal function, but it will not have any name.

An anonymous function can be assigned to a variable or passed to a method as shown below.

var handler = function (){ // do some stuff here }  
   

jQuery uses anonymous functions very often like this:

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

arguments

JavaScript variable arguments are a kind of array that has a length property . The following example explains it very well −

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


func (); //==> "undefined", 0 
func ( 1 ); //==> "number", 1 
func ( "1" , "2" , "3" ); //==> "string", 3                                    

The arguments object also has a callee property that refers to the function you're in. For example -

function func () { return arguments . callee ; } 
    


func (); // ==> func                

context

JavaScript is a well-known keyword, it 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 calling a function using the call () and apply () methods built into methods .

The difference between the two is how they pass arguments. Call passes all arguments to the function as arguments, while apply takes an array as arguments.

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


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

Volume

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

• Global Variables − A global variable has a global scope, which means that it is defined everywhere in your JavaScript code.

• Local Variables - A local variable will only be visible within the function in which it is defined. Function parameters are always local to that function.

Global Variables − A global variable has a global scope, which means that it is defined everywhere in your JavaScript code.

Local Variables - A local variable will only be visible within the function in which 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 of the same name −

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

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

call back

A callback is a simple JavaScript function that is passed to some method as an argument or option. Some callbacks are simply events called to give the user a chance to react when a particular condition is triggered.

The jQuery event system uses callbacks like this throughout, for example:

$ ( "body" ). click ( function ( event ) { 
   console . log ( "clicked: " + event . target ); });   

Most callbacks provide arguments and context. In the event handler example, the callback is called with one argument, Event.

Some callbacks must return something, others make that return value optional. To prevent the form from being submitted, the submit event handler can return false as follows:

$("#myform").submit(function() {
   return false;
});

closures

Closures are created whenever a variable defined outside the current scope is accessed from some inner scope.

The following example shows how a variable counter is visible inside the create, increment, and print functions, but not outside of them.

function create () { var counter = 0 ; 
    
	
   return { 
      increment : function () { 
         counter ++; }, print : function () { 
         console . log ( counter ); } } }   
      
	     
      
   


var c = create (); 
c . increment (); 
c . print (); // ==> 1     

This pattern allows you to create objects with methods that operate on data that is not visible to the outside world. It should be noted that data hiding is the very foundation of object-oriented programming.

Proxy template

A proxy object is an object that can be used to control access to another object. It implements the same interface as this other object and passes any method calls to it. This other object is often called the real subject.

Instead of this real principal, you can create a proxy server and allow remote access to it. We can keep jQuery's setArray method and close it like this:

( function () { // log all calls to setArray var proxied = jQuery . fn . setArray ; 
   
   

   jquery . fn . setArray = function () { 
      console . log ( this , arguments ); return proxy . apply ( this , arguments ); };  
      
   
	
})();

The above wraps its code in a function to hide the variable being proxied . The proxy then logs all method calls and delegates the call to the original method. Using apply(this, arguments) ensures that the caller cannot tell the difference between the original method and the upstream method.

Built-in Functions

JavaScript comes with a useful set of built-in functions. These methods can be used to manipulate strings, numbers, and dates.

Following are the important functions of JavaScript −

charat()

Returns the character at the specified index.

CONCAT()

Concatenates text from two strings and returns a new string.

for each()

Calls a function for each element in an array.

index()

Returns the index in the calling String object of the first occurrence of the specified value, or -1 if not found.

length ()

Returns the length of the string.

pop()

Removes the last element from an array and returns that element.

Push()

Adds one or more elements to the end of an array and returns the new length of the array.

reverse()

Changes the order of the array elements - the first becomes the last, and the last becomes the first.

Sort()

Sorts the elements of an array.

zbzbz ()

Returns the characters in a string starting at the specified location after the specified number of characters.

toLowerCase()

Returns the value of the calling string converted to lower case.

to string()

Returns a string representation of the value of a number.

toUpperCase()

Returns the value of the calling string converted to uppercase.