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.
| Method | Description | Example |
|---|
| 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 string | var 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 element | var 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>
- <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.
