Validation in Javascript

21.Validation
This is easiest way to validate text box using javascript. when we click on submit button the javascript check the text box, if didn’t enter any value in the text box it will show FILL THE USER NAME otherwise the page login successfully.

< input id="fname_id" type="text" / >
< input onclick="validation()" type="submit" value="Submit" / >
< script type="text/javascript" >
function validation()
{
if(document.getElementById("fname_id").value=="")
{ alert("FILL THE USER NAME"); }
else { alert("successfully login"); }
}
< / script >

Project work in one part Zooming Image

20.Zooming Image: 
      When we click on the mytest button, image zooming Upto 500 width and height. we can change image Zooming size here if(value < =500).just copy the code and past to your HTML page

< html >
< body  >
< div id="main" >
< img id="image1" src="9.jpg" width="10" height="10" / >
< /div >
< input type="button" value="mytest" onClick="test()" / >
< /center >
< /body >
< /html >
< script type="text/javascript" >
var value=110;
function test()
{
if(value < =500)
{
var a=document.getElementById("main");
var b=a.getElementsByTagName("img");
b[0].width=value;
b[0].height=value;
value=value+2;
setTimeout(test,1);
}
}
< /script >

Events: onLoad,onFocus, onBlur and onChange,onMouseOver , onMouseOut and onSubmit

19.Events:

we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button.
Note: the function will not be executed before the event occurs.

onSubmit:

The onSubmit event is used to validate all form fields before submit

onFocus, onBlur and onChange:

The onFocus, onBlur and onChange events are used to validation with form fields.

onLoad:

its call onload page time.

onMouseOver and onMouseOut:

onMouseOver and onMouseOut are used to create "animated" .
Below is an example of an onMouseOver event, an alert box appears when an onMouseOver event is detected:
< a href="http://www.Sun-Javascript.blogspot.com" onmouseover="alert('An onMouseOver event');" >Sun-Javascript.blogspot.com < / a >
< br / >
< br / >
< a href="http://www.Sun-Javascript.blogspot.com" onmouseout="alert('An onmouseout event1');" > Sun-Javascript.blogspot.com < / a >

for in

18.  for in concepts is usefull for us no need to mention total number of array

One dimensional array

<  script type  =  "  text  /  javascript  "  >

var x;

var   no_list = new Array();

no_list [ 0 ] = "Saab";

no_list [ 1 ] = "Volvo";

no_list [ 2 ] = "BMW";

for (x in no_list)

  {

  document.write ( no_list [ x ]  +  " < br  / > " ) ;

  }

< / script >

Output:

Saab

Volvo

BMW

it will display all the name inside the no_list array.

how to break loop condition ?

17. Break Loop: Easy to break loop condition just see below coding .

<  script type  =  "  text  /  javascript  "  >

var i= 0;

for ( i= 0 ; i < = 10 ; i++ )

  {

  if (i == 3)

    {

    break;

    }

  document.write( i);

  }

<  / script  >

Output:

012

Different Between while and do while

14. Different Between while and do while

Execution start from top to bottom

While:

First while loop check condition if true then only execute inside loop otherwise come out from that particular loop.

Do While:

do while do not check condition true or not first time execute one time after that it will check condition if true means execute up to false come, if false fist time come out from that particular loop.

15. Example programs While and do while Loop condition checking
< script type = " text / javascript " >
var i=0;
while (i<0) { document.write("first check condition but condition is false"); } < / script >

16 . Do while condition checking
< script type = " text / javascript " >
var i=0;
do
{
document.write("condition is false but executing one time");

}
while ( i < 0); < / script >

How to call function name when we click on the button?

13. < script type = " text / javascript " >
function test ()
{
alert( " Welcome To Sun-Javascript.blogspot.com ! " ) ;
}
< / script >

< input type="button" value="Click me!" onclick="test()" / >

simple java script triangle

Easy to learn java script programming and download if you want this program or copy and past to your HTML page. it will work

10 . Different Output in Java script triangle format


 < script type = " text / javascript " >

for (var i=0;i<10;i++) { if( i < 5 ) { for(var k=0;k<=5-i;k++) { document.write("  "); } for(var j=0;j<=i;j++) { document.write("  "+i); } } else if(i>=5)
{

if(i==5)
{
var s=3;
}
for(var j=0;j<=i;j++) { document.write(" "); } for(var k=0;k<=8-i;k++) { document.write("  "+s); } s--; } document.write("< br / >");
}
< / script >

OUTPUT:

              0
            1  1
          2  2  2
        3  3  3  3
      4  4  4  4  4
        3  3  3  3
         2  2  2
          1  1
           0

11 . Different Output in javascript  triangle format

< script type = " text / javascript " >

for (var i=0;i<10;i++)

{

                if(i<5)

                {

                     for(var k=0;k<=5-i;k++)

                     {

                                document.write("  ");

                     }

                     for(var j=0;j<=i;j++)

                     {

                                document.write("  "+i);

         }

                 }

                 else if(i>=5)

                {

                for(var j=0;j<=i;j++)

                     {

                                document.write(" ");

         }    

                                for(var k=0;k<=8-i;k++)

                     {

                                document.write("  "+i);

                     }

                               

                    

                   

                 }

               

                document.write(" < br / > ");

}

 < /  script  >

 

OUTPUT:

            0
            1  1
          2  2  2
        3  3  3  3
      4  4  4  4  4
        5  5  5  5
         6  6  6
          7  7
           8

Different Types of Traingle output

Types of Traingle Output in Javascript
Just copy below script and past to your HTML Page. you will get output.
6.Left Triangles

< script type = " text / javascript " >
for (var i=0;i<=5;i++)
{
for( var j=0; j<=i; j++ )
{
document.write(i);
}
document.write("");
}
< / script >

Output:

0
11
222
3333
44444
555555

7.Right Triangles

 < script type= " text / javascript " >

for (var i = 0 ; i < = 5 ; i + +)

{

                for(var k=0;k<=5-i;k++)

                {

                                document.write("  ");

                }

                for(var j=0;j<=i;j++)

                {

                                document.write(i);

                }

               

                document.write ( " < br  / > " );

}

< / script >

Output:

            0
          11
        222
      3333
    44444
  555555

8. Upper Left Triangle  

<  script type = " text / javascript " >

for (var i = 0 ; i < = 5 ; i + +)

{

                for(var j = 6-i ; j > 0 ; j--)

                {

                                document.write ( i ) ;

                }

document.write ( " <  br  / > " ) ;

}

< / script  >

Output:

000000
11111
2222
333
44
5

9. Upper Right Triangle

< script type = " text / javascript " >

for (var i = 0 ; i < =  5;i++)

{

                for(var j=0; j < i;j++)

                {

                                document.write("  ");

                }

                for(var k=0;k<=5-i;k++)

                {

                                document.write(i);

                }

                document.write ( "< br   / > " ) ;

}

< / script >

Output:

000000
  11111
    2222
      333
        44
          5

return Statement

5. The return statement is used to specify the value that is returned from the function.

< html >
< head >
< script type = " text / javascript " >
function add( a , b )
{
return a + b ;
}
< / script >
< / head >

< body >
< script type = " text / javascript " >
document.write ( add ( 10 , 13 ) ) ;
< / script >

< / body >
< / html >

Basic Java script

1.What is JavaScript?

JavaScript: Interactivity to HTML pages .JavaScript is a Scripting Language. A scripting language is a lightweight programming language. JavaScript is an interpreted language. Everyone can use JavaScript without purchasing a license.

Example:

   1.                 < script type= ' text / JavaScript'>
                                document. write  ( ' Welcome To Java Script ! ' ) ;
                     < /script >      

2.         < script type="text/javascript" >
                      document.write("  <  h1  > This is a heading  <  /  h1  >" ) ;
                      document.write(" < p > This is a paragraph. < / p > " ) ;
                      document.write ( " < b > This is another paragraph. < / b > " ) ;
            < / script >

3.           //Display  a "Good morning"  if true
             //the time is less than 10

               var d=new Date();
              var time=d.getHours();

               if ( time < 10 )
              {
                       document.write ( "  Good morning " ) ;
             }

4.        function name is test()  just copy below script past to your HTML page. if we click on the button the     alert box will display that  I am an alert box!

            < Html  >
           < script type="text/javascript" >
             function test()
             {
                    alert ( " I am an alert box ! " ) ;
              }
            < / script >


           < body  >
              < input type="button" onclick="test()" value="Show alert box" / >
           < / body  > 

< / Html  >