Hello guys! Welcome to a new section of my tutorial on jQuery. In my last tutorial, i did a brief introduction of jQuery with few examples on the two ways to use a jQuery. I also talked about the custom jQuery and how to use it.
So in this tutorial, am going to be discussing about the basic concepts of jQuery. These basic concepts that we are going to be discussing all come from the conventional JavaScript which i believe you all know.
jQuery is a frame work built using JavaScript capabilities. So in real sense, you can use all the functions and other capabilities available to us in JavaScript.
So in this tutorial, am going to be discussing about the basic concepts of jQuery. These basic concepts that we are going to be discussing all come from the conventional JavaScript which i believe you all know.
jQuery is a frame work built using JavaScript capabilities. So in real sense, you can use all the functions and other capabilities available to us in JavaScript.
String
A string in JavaScript is a fixed object which contains none, one or more characters. The following below are the valid examples of a JavaScript String.
"This is a JavaScript String"
'This is a JavaScript String'
"This is a 'JavaScript' String"
'This is a "JavaScript" String'
'This is a JavaScript String'
"This is a 'JavaScript' String"
'This is a "JavaScript" String'
Boolean
A boolean in JavaScript can be either true or false. If a number is zero, it defaults to false. If an empty string, it defaults to false. Below are the valid examples of a JavaScript Boolean.
true // true
false // false
0 // false
1 // true
" " // false
"String" // true
false // false
0 // false
1 // true
" " // false
"String" // true
You can also read our tutorial post on: How to implement the JavaScript Boolean Properties with examples
Numbers
Numbers in JavaScript are double precision 64 bit format IEEE 754 values. They are fixed, just like strings. Below are the valid examples of a JavaScript Numbers.
5350
120.27
0.26
120.27
0.26
Objects
jQuery supports the concept of object very well. You can create an object using the object literal as follows -
var emp = {
name: "Precious";
age = 15
};
name: "Precious";
age = 15
};
You can write and read properties of an object using the dot notation as follows -
// Getting Object Properties
emp.name // Precious
emp.age // 15
// Setting Object Properties
emp.name = "Kenny" // Kenny
emp.age = 18 // 18
emp.name // Precious
emp.age // 15
// Setting Object Properties
emp.name = "Kenny" // Kenny
emp.age = 18 // 18
You can also read our tutorial post on: JavaScript Math Methods
Functions
A function in JavaScript can be either named or anonymous. A named function can be defined using function keyword as follows -
function named( ) {
// Do some coding here.
}
// Do some coding here.
}
An anonymous function can also be defined in a similar way as a normal function but it won't 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 coding here.
}
// Do some coding here.
}
jQuery makes use of anonymous functions very frequently as follows -
$( document ).ready(function( ) {
// Do some coding here.
} );
// Do some coding here.
} );
Arrays
You can define arrays using the array literal as follows -
var x = [ ];
var y = [1, 2, 3, 4, 5, 6, 7, 8];
var y = [1, 2, 3, 4, 5, 6, 7, 8];
An array has a length property that is very useful for iteraton -
var x = [1, 2, 3, 4, 5, 6, 7, 8];
for (var i = 0; I < x.length; i++ ) {
// Do something with x[ i ]
}
for (var i = 0; I < x.length; i++ ) {
// Do something with x[ i ]
}
You can also read our tutorial post on: A Practical Guide to JavaScript Multimedia with examples
Arguments
JavaScript variable arguments is a kind of array which has length property. The example below explains it properly -
function func( x ) {
console.log(typeof x, arguments.length);
}
func( ); // "undefined", 0
func(1); // "number", 1
func("1", "2", "3"); // "string", 5
console.log(typeof x, arguments.length);
}
func( ); // "undefined", 0
func(1); // "number", 1
func("1", "2", "3"); // "string", 5
The arguments object also has a callee property, which refers to the function you are inside of.
function func( ) {
return arguments.callee;
}
func( ); // func
return arguments.callee;
}
func( ); // func
Context
JavaScript famous keyword this always refers to the current context. With a function this context can be changed, depending on how the function was called.
$( document ).ready( function( ) {
// This refers to window.document
} );
$( "div" ).click( function( ) {
// This refers to a div DOM element
} );
// 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 cal() and apply() methods.
The difference between the both of them, and how they pass arguments is that Call passes all arguments through as argument to the function while apply accepts an array as the argument.
The difference between the both of them, and how they pass arguments is that Call passes all arguments through as argument to the function while apply accepts an array as the argument.
function scope( ) {
console.log(this, argument.length);
}
scope( ) // window, 0
scope.call("toolbar", [1, 2] ); // "toolbar", 1
scope.apply("toolbar", [1, 2] ); // "toolbar", 2
console.log(this, argument.length);
}
scope( ) // window, 0
scope.call("toolbar", [1, 2] ); // "toolbar", 1
scope.apply("toolbar", [1, 2] ); // "toolbar", 2
You can also read our tutorial post on: Learn the various ways in which JavaScript can be used to redirect a web page to another
Variable Scope
The scope of a variable is the region of your program in which it is defined. The JavaScript variables has only two scopes.
- Global Variables - A global variable has global scope which means it is defined every where in your program.
- Local Variables - A local variable will be visible only within a function where it is defined.
Within the body of a function, a local variable supersedes a global variable with same name.
var myVar = "global"; // Declare a global variable
function( ) {
var myVar = "local"; // Declare a local variable
document.write( myVar ); // local
}
function( ) {
var myVar = "local"; // Declare a local variable
document.write( myVar ); // local
}
Callback
A callback is a plain JavaScript function passed to some methods as an argument or an 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 every where. For example -
jQuery's event system uses such callbacks every where. For example -
$( "body" ).click(function( event ) {
console.log("clicked : " + event.target );
} );
console.log("clicked : " + event.target );
} );
Most callbacks provide arguments as well as a context. In the event handler example that we have above, the callback is called with just one argument, an Event.
Some callbacks are required to return some thing, others make that return value optional. To prevent a form submission, a JavaScript submit event handler can return false as follows -
Some callbacks are required to return some thing, others make that return value optional. To prevent a form submission, a JavaScript submit event handler can return false as follows -
$( "#myform" ).submit(function( ) {
return false;
} );
return false;
} );
Closures
Closures are created whenever a variable that is defined outside the current scope, is accessed from within some inner scope.
The following example shows how the variable counter is visible within the create, increment, and print functions, but not outside of them -
The following example shows how the variable counter is visible within 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
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 using methods that operates on data that isn't visible to the outside world. It should be noted that data hiding is the basis of (OOP) object oriented programming.
You can also read our tutorial post on: Learn how to implement JavaScript Literals with examples
Proxy Pattern
A proxy is an object that can be used to control access to another object. It implements same interface as this other object and passes on any method invocation to it. This other object is often called the real subject.
A proxy can be incorporated in place of this real subject and allow it to be accessed remotely. We can save jQuery's setArray method in a closure and overwrite it as follows -
A proxy can be incorporated in place of this real subject and allow it to be accessed remotely. We can save jQuery's setArray method in a closure and overwrite it as follows -
(function( ) {
// Set all call to setArray
var proxied = jQuery.fn.setArray;
jQuery.fn.setArray = function( ) {
console.log(this, arguments);
return proxied.apply(this, arguments);
};
} ) ( );
// Set all call to setArray
var proxied = jQuery.fn.setArray;
jQuery.fn.setArray = function( ) {
console.log(this, arguments);
return proxied.apply(this, arguments);
};
} ) ( );
The above example wraps its code in a function to hide the proxied variable. The proxy then logs all calls to the method and delegates the call to the original method. Making use of the jQuery's apply(this, arguments) guarantees that the caller won't be able to notice the difference between the original and the proxied method.
Built-in Functions
JavaScript comes along with useful set of functions. These inbuilt functions or methods can be used to manipulate Strings, Numbers, and Dates.
The following below are the important functions of JavaScript -
The following below are the important functions of JavaScript -
| Sr.No. | Method & Description |
|---|---|
| 1 |
charAt()
Returns the character at the specified index.
|
| 2 |
concat()
Combines the text of two strings and returns a new string.
|
| 3 |
forEach()
Calls a function for each element in the array.
|
| 4 |
indexOf()
Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.
|
| 5 |
length()
Returns the length of the string.
|
| 6 |
pop()
Removes the last element from an array and returns that element.
|
| 7 |
push()
Adds one or more elements to the end of an array and returns the new length of the array.
|
| 8 |
reverse()
Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.
|
| 9 |
sort()
Sorts the elements of an array.
|
| 10 |
substr()
Returns the characters in a string beginning at the specified location through the specified number of characters.
|
| 11 |
toLowerCase()
Returns the calling string value converted to lower case.
|
| 12 |
toString()
Returns the string representation of the number's value.
|
| 13 |
toUpperCase()
Returns the calling string value converted to uppercase.
|
You can also read our tutorial post on: JavaScript Syntax
The Document Object Model
The document object model is a tree structure of various elements of HTML. Below is a very short example -
<html>
<head>
<title>jQuery Document Object Model</title>
</head>
<body>
<div>
<p>This is a Paragraph.</p>
<p>This is another Paragraph.</p>
<p>This is a third Paragraph.</p>
</div>
</body>
</html>
<head>
<title>jQuery Document Object Model</title>
</head>
<body>
<div>
<p>This is a Paragraph.</p>
<p>This is another Paragraph.</p>
<p>This is a third Paragraph.</p>
</div>
</body>
</html>
Output
Below is the output of the above example
This is a Paragraph.
This is another Paragraph.
This is the third Paragraph.
This is another Paragraph.
This is the third Paragraph.
The following are the important points about the above tree structure -
- The <html> above is the ancestor of all the other elements; in order words, all the other element are decendants <html>.
- The <head> and <body> elements are not only decendants, but also children of <html> as well.
- Likewise, in addition to being the ancestor of <head> and <body>, <html> is also their parents.
- The <p> elements are children and decendants of <div>, decendants of <body> and <html>, and the siblings of <p> elements.
While learning jQuery concepts, it will be helpful to have a proper understanding of DOM. DOM full tutorial will be made available to this blog very soon.
Alright guys! We have come to the end of this tutorial post. In my next tutorial post, i will be discussing about the various selectors available in jQuery.
Feel free to ask your questions where necessary and i will attend to them as soon as possible.
Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails. Thanks for reading and bye for now.
Alright guys! We have come to the end of this tutorial post. In my next tutorial post, i will be discussing about the various selectors available in jQuery.
Feel free to ask your questions where necessary and i will attend to them as soon as possible.
Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails. Thanks for reading and bye for now.