JQuery Basics

basics in jquery

Jquery Basics : JQuery is a framework built using JavaScript capabilities. So, you can use all the functions and other capabilities available in JavaScript. This chapter would explain most Jquery basics concepts but frequently used in JQuery.

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:

Example:

“This is JavaScript String”
‘This is JavaScript String’
‘This is “really” a JavaScript String’
“This is ‘really’ a JavaScript String”

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 :

Example:

5350
120.27
0.26

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.

Example:

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 :

Example:

var emp = {
   name: “Zara”,
   age: 10
};

You can write and read properties of an object using the dot notation as follows :

Example:

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10
// Setting object properties
emp.name = “Daisy”  // <== Daisy
emp.age  =  20      // <== 20

Arrays:

You can define arrays using the array literal as follows :

Example:

var x = [];
var y = [1, 2, 3, 4, 5];

An array has length property that is useful for iteration :

Example:

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

Functions:

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

Example:

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

Arguments:

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

Example:

function 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, which refers to the function you’re inside of.

Example:

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 :

Example:

$(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.

Example:

function scope() {
   console.log(this, arguments.length);
}
scope() // window, 0
scope.call(“foobar”, [1,2]);  //==> “foobar”, 1
scope.apply(“foobar”, [1,2]); //==> “foobar”, 2

Scope:

The scope of a variable is the region of your program in which it is defined. JavaScript variable will have only two scopes.

  1. Global Variables : A global variable has global scope which means it is defined everywhere in your JavaScript code.
  2. 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 :

Example:

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

Callback:

A callback is a plain JavaScript function passed to some method as an argument or option. Some callbacks are just events, called to give the user a chance to react when a certain state is triggered.

jQuery’s event system uses such callbacks everywhere for example :

$(“body”).click(function(event) {

   console.log(“clicked: ” + event.target);

});


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

Some callbacks are required to return something, others make that return value optional. To prevent a form submission, a submit event handler can return false as follows :

Example:

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

Closures:

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

Following example shows how the variable counter is visible within the create, increment, and print functions, but not outside of them :

Example:

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

Recommended Posts

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *