Javascript Examples: November 2013

Friday, November 29, 2013

Constructors in JavaScript

A constructor is a function, which is used to instantiate a new object, this is done only when memory has been allocated for it. We create a new object like this:

var obj=new Object();

var obj={};

var n=new Number(10); // Here we create a Number Object

We can also create custom constructor functions like this:

function Calc(a,b,Total)

{

this.a=a;

this.b=b;

this.Total=Total;

}

Now we can easily invoke the Calc constructor like this:

var c1=new Calc(20,10,0);

Prototype: A Prototype is a property of a function in JavaScript. So when we invoke the Constructor in order to create an object, all the properties of the constructor’s prototype are available to the newly created object.

Now we will take an example in which we will set a method (add()) on the prototype. Here we create multiple objects of Calc, these objects can access the add() function like this:

<head runat="server">

<title>Untitled Page</title>

<script language="javascript" type="text/javascript">

function Calc(a,b,Total)

{

this.a=a;

this.b=b;

this.Total=Total;

Calc.prototype.add=function add(){

this.Total=this.a+this.b;

return this.Total;

}

}

var c1=new Calc(20,10,0);

alert(c1.add());

</script>

</head>

<body onload="Calc(x,y,t)">

<form id="form1" runat="server">

<div>

</div>

</form>

</body>

Here we create a function add() , with the help of the function we add the two values (a,b) and assign the total in (Total) and return the value of Total.

After that, we invoke the Calc Constructor like this:

var c1=new Calc(20,10,0);

alert(c1.add());

here we assign the value: a=20,b=10, Total=0.

So the output will be:

In this program we use Prototype like this:

Calc.prototype.add=function add(){

Now we create another Calc() object like this:

var c2=new Calc(30,15,0);

alert(c2.add());

and the output is:

Ex 2:

<script language="javascript" type="text/javascript">

function Student(name) {

this.name = name;

}

Student.prototype.Total=function (){ return 300;};

Student.prototype.Total1=200;

var theStudent = new Student('Mahak');

alert(theStudent.Total());

alert(theStudent.Total1);

alert(theStudent.name);

</script>

The Output Will Be:

Wednesday, November 27, 2013

Closures in JavaScript

In this Article, we will discuss that how we can use the Closures in JavaScript. Basically a closure is a local variable that will be execute after the particular function has returned. A Closure provides us a free environment the outer function can easily access inner functions and inner variables without any scope restrictions. So first we will be discussing the types of Scope:

Local Scope: In the Local Scope, we can’t access the variable, which can be defined in a function. Means that we assign a variable, which is defined and accessible for a certain part of the code. Like this:

Ex :

<html>

<head>

    <script language="javascript" type="text/javascript">

     function Local()

    {

       var s="my name is Mahak";

      alert(s);

     }

      alert(s);    //Throws an error

     </script>

</head>

<body onload="Local()">

</body>

</html>

In this example, we define a variable s and it can be accessible in the function Local(). So if we can use it outside the function it returns an error or it is not accessible.

Note: We can call the Local Variable as a Global Variable , when we declare it without var keyword. The Local variable treats like a Global variable when we call the particular function at least on time like this:

Ex:

<html>

<head>

    <script type="text/javascript" language="JavaScript">

function scope()

{

            var lv1 = 'My First Local Variable';

            lv2 = 'My Second Local Variable'; //delared without var keyword

document.writeln('Local Variables:<br /><br />');

            document.writeln(lv1 + '<br />');

            document.writeln(lv2 + '<br />'+'<br />');

}

scope();

alert(lv2);

</script>

</head>

<body onload="scope()">

</body>

</html>

The Output will be:

Global Scope: Global means we can use a variable or a function anywhere without any Restrictions. We can also declare it without var keyword.

Ex:

<html>

<head>

    <script type="text/javascript" language="JavaScript">

var gv1 = 'My First Global Variable';

gv2= 'My Second Global Variable'; //delared without var keyword



function scope()

{

                var lv1 = 'My First Local Variable';

                lv2 = 'My Second Local Variable'; //delared without var keyword

                document.writeln('Global Variables:<br /><br />');

                document.writeln(gv1 + '<br />');

                document.writeln(gv2 + '<br />'+'<br />');



                document.writeln('Local Variables:<br /><br />');

                document.writeln(lv1 + '<br />');

                document.writeln(lv2 + '<br />'+'<br />');



}

</script>

</head>

<body onload="scope()">

</body>

</html>

The Output Will Be:

Closures: A closure is a local variable that will be execute after the particular function has returned. A Clouse provides us a free environment the outer function can easily access inner functions and inner variables without any scope restrictions.

Ex:

<html>

<head>

    <script type="text/javascript" language="JavaScript">

function ExClosure(a,ref1) {

var v1 = a;

var ref = ref1;

return function(v2) {

      v1 += v2;

      alert("Add:"+ v1)

      alert("Reference Value:" +ref.cv);

    }

}

myclosure=ExClosure(10,{cv:'My First Closure'});

myclosure(5);

</script>

</head>

<body onload="ExClosure(b,ref)">

</body>

</html>

In this Example, when the ExClosure function is called it returns a function. The function remembers the value of a (10) in the form of v1, it means myclosure will add 10 together with 5 and return 15 as an alert, and the next alert returns the Reference value (Reference Value: My First Closure).

The Output Will Be:

If we use :

Myclosure1=ExClosure(10,{cv:'My Second Closure'});

Myclosure1(20);

Output:

Subscribe to: Posts (Atom)