Javascript Examples

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:

<title>Untitled Page</title>

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>

<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:

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:

Monday, May 20, 2013

Create a simple Image Gallery In CSS3 and Javascript

Create a simple Image Gallery In CSS3 and Javascript

In this article, we will discuss that how we can create an image gallery in CSS3 and Javascript and put some beautiful animation it.

This example will be work properly in IE10, Firefox and Opera, Chrome and Safari.

IE9 and eariler version can't support the transition property which I will mention in our program.

In this program when we will be put our mouse over on some image, the image will be rotate on the 360 deg angle and information regarding that Image will be shown just like this:

Step1: First we will take some images like this:

<a>First Baby</a>

</div>

<a>Second baby</a>

</div>

<a>Third Baby</a>

</div>

<a>Forth Baby</a>

</div>

<a>Fifth Baby</a>

</div>

<a>Sixth Baby</a>

</div>

<a>Seventh Baby</a>

</div>

<a>Eight Baby</a>

</div>

Step2: Now we will take an Image and a Table to show the data when we put our mouse over on the image.

<tr>

<tr>

<tr><td style="font-size:Large;font-weight:bold;color:Brown;font-style:Italic;">Mother's Name :</td><td style="font-size:Large;color:Brown;"><p id="pmothername"></p></td>

<tr>

<tr><td style="font-size:Large;font-weight:bold;color:Brown;font-style:Italic;">Father's Name :</td><td style="font-size:Large;color:Brown;"><p id="pfathername"></p></td>

<tr>

</table>

</div>

Step3: Now we will set the style of our gallery first we set the style of the main div like this:

#MyGallery {

margin: 20px auto;

padding: 40px;

position: relative;}

#MyGallery div {

background: pink;

position: absolute;

overflow: hidden;

opacity: 0.6;

transition: all 1500ms linear;

-webkit-transition: all 1500ms linear;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

}

Here we will set the transition property like this:

-webkit-transition: all 1500ms linear;

It specifies that transition effect duration will be 1500ms and the linear property specifies that the transition effect has the same speed from the starting to the end.

Step4: Now we will write the code for the rotation of the div like this:

#MyGallery div#img1:hover,

#MyGallery div#img2:hover,

#MyGallery div#img3:hover,

#MyGallery div#img4:hover,

#MyGallery div#img5:hover,

#MyGallery div#img6:hover,

#MyGallery div#img7:hover,

#MyGallery div#img8:hover {

z-index: 999;

/* Safari */

-webkit-transform: rotate(360deg);

/* Firefox */

-moz-transform: rotate(360deg);

/* IE */

-ms-transform: rotate(360deg);

/* Opera */

-o-transform: rotate(360deg);

opacity: 1;}

Here we will specify that when we put our mouse over on the image it will be rotate on 360 deg.

Step5: Now we will be write the code for set the position of the images like this, Here we use the rotate property to rotate the images in the particular angle like this:

#MyGallery #img1 {

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

top: 30px;

left: 100px;

z-index:1;}

#MyGallery #img2 {

-webkit-transform: rotate(10deg);

-moz-transform: rotate(10deg);

top: 60px;

left:300px;

z-index:3;}

#MyGallery #img3 {

-webkit-transform: rotate(40deg);

-moz-transform: rotate(40deg);

top: 90px;

left:410px;

z-index:6;}

#MyGallery #img4 {

-webkit-transform: rotate(15deg);

-moz-transform: rotate(15deg);

top: 120px;

left: 270px;

z-index:9;}

#MyGallery #img5 {

top: 180px;

left: 110px;

z-index:12;}

#MyGallery #img6 {

-webkit-transform: rotate(-15deg);

top: 190px;

-moz-transform: rotate(-15deg);

left: 360px;

z-index:14;}

#MyGallery #img7 {

-webkit-transform: rotate(15deg);

-moz-transform: rotate(15deg);

top: 210px;

left: 280px;

z-index:14;}

#MyGallery #img8 {

-webkit-transform: rotate(-15deg);

-moz-transform: rotate(-15deg);

top: 250px;

left: 500px;

z-index:14;}

#MyGallery #img9 {

top: 10px;

left: 850px;

z-index:14;}

Step6: Now we will write the javascript code so when we put our mouse over on the image the table will show the information:

javascript code:

function ShowImage1()

{

document.getElementById('table1').style.display='block';

document.getElementById('imgmain').style.display='block';

document.getElementById('imgmain').src='1.jpg';

document.getElementById('pname').innerHTML='Khyati Zindal';

document.getElementById('page').innerHTML='5';

document.getElementById('pmothername').innerHTML='Anjana';

document.getElementById('pfathername').innerHTML='Abhinav';

}

</script>

Here we set the display property of the table so it will be visible when we will put our mouse over on the image. Here we also set the source of the Image and set the data in the <p> tags. So the output will be:

function ShowImage1()

{

document.getElementById('table1').style.display='block';

document.getElementById('imgmain').style.display='block';

document.getElementById('imgmain').src='1.jpg';

document.getElementById('pname').innerHTML='Khyati Zindal';

document.getElementById('page').innerHTML='5';

document.getElementById('pmothername').innerHTML='Anjana';

document.getElementById('pfathername').innerHTML='Abhinav';

}

function ShowImage2()

{

document.getElementById('table1').style.display='block';

document.getElementById('imgmain').style.display='block';

document.getElementById('imgmain').src='2.jpg';

document.getElementById('pname').innerHTML='Megha';

document.getElementById('page').innerHTML='4';

document.getElementById('pmothername').innerHTML='Girja';

document.getElementById('pfathername').innerHTML='Yogesh';

}

function ShowImage3()

{

document.getElementById('table1').style.display='block';

document.getElementById('imgmain').style.display='block';

document.getElementById('imgmain').src='3.jpg';

document.getElementById('pname').innerHTML='Mahak Garg';

document.getElementById('page').innerHTML='4';

document.getElementById('pmothername').innerHTML='Manju';

document.getElementById('pfathername').innerHTML='Arun';

}

function ShowImage4()

{

document.getElementById('table1').style.display='block';

document.getElementById('imgmain').style.display='block';

document.getElementById('imgmain').src='4.jpg';

document.getElementById('pname').innerHTML='Abhinav';

document.getElementById('page').innerHTML='3';

document.getElementById('pmothername').innerHTML='Manju';

document.getElementById('pfathername').innerHTML='Arun';

}

function ShowImage5()

{

document.getElementById('table1').style.display='block';

document.getElementById('imgmain').style.display='block';

document.getElementById('imgmain').src='5.jpg';

document.getElementById('pname').innerHTML='Meghal';

document.getElementById('page').innerHTML='5';

document.getElementById('pmothername').innerHTML='Kusum';

document.getElementById('pfathername').innerHTML='Anil';

}

function ShowImage6()

{

document.getElementById('table1').style.display='block';

document.getElementById('imgmain').style.display='block';

document.getElementById('imgmain').src='6.jpg';

document.getElementById('pname').innerHTML='Pratyaksh';

document.getElementById('page').innerHTML='3';

document.getElementById('pmothername').innerHTML='Rekha';

document.getElementById('pfathername').innerHTML='Narendra';

}

function ShowImage7()

{

document.getElementById('table1').style.display='block'; document.getElementById('imgmain').style.display='block';

document.getElementById('imgmain').src='7.jpg';

document.getElementById('pname').innerHTML='Miya';

document.getElementById('page').innerHTML='3';

document.getElementById('pmothername').innerHTML='Kate';

document.getElementById('pfathername').innerHTML='John';

}

function ShowImage8()

{

document.getElementById('table1').style.display='block';

document.getElementById('imgmain').style.display='block';

document.getElementById('imgmain').src='8.jpg';

document.getElementById('pname').innerHTML='Nidhi';

document.getElementById('page').innerHTML='4';

document.getElementById('pmothername').innerHTML='Nimi';

document.getElementById('pfathername').innerHTML='Rakesh';

}

</script>

Video: