JavaScript - Browser Details of Client, Cookies in JavaScript, Validation Using JavaScript, Animation Using JavScript, Time Setting Using JavaScript
| Browser Details of Client |
| Browser Name |
Browser is a program used to view the web pages. Web pages are created using any markup language like html , xml etc. The popular Browser programs are Internet Explorer, Netscape Navigator, Fire Fox etc. Navigator object of JavaScript can avail us the details about our browser, like which browser program we are using , what is the version of the browser we are using etc. |
| Example |
<html> <head> </head> <body bgcolor="yellow" text=red> <script type="text/javascript"> var browse = navigator.appName document.write("<br>My Brower's Name is :"+browse) </script> </body> </html> |
| Browser Version |
Browser is a program used to view the web pages. Web pages are created using any markup language like html , xml etc. The popular Browser programs are Internet Explorer, Netscape Navigator, Fire Fox etc. Navigator object of JavaScript can avail us the details about our browser, like which browser program we are using , what is the version of the browser we are using etc. |
| Example |
<html> <head> </head> <body bgcolor="yellow" text=red> <script type="text/javascript"> var ver = navigator.appVersion document.write("<br>My Brower's Version is :"+ver) </script> </body> </html> |
| Cookies in JavaScript |
| Cookies |
| Cookies is a method of storing information locally in browser and sending it to server whenever the pages are requested by the user. When a user requests a page, an HTTP request is sent to the server. The request includes a header that defines several pieces of information, including the page being requested. The server returns a HTTP response that also includes a header. The header contains information about the document being returned. These headers all contains one or more fields of information in a basic format like fieldname : information. |
| Example |
<html> <head> </head> <body bgcolor="yellow" text=red> Type any desired word in the text box it will be kept as cookie for this document. <form mehtod="post()"> <br> Cookie value : <input type = text size=10 onchange="ck(this.value);"> <br> <input type="submit"> </form>
<script type="text/javascript"> function ck(ff) { document.cookie=ff } var cooky =((document.cookie != "") && (document.cookie != null)) var cname=((cooky)? document.cookie: "Hello") document.write("<br>Cookies : "+document.cookie); </script> </body> </html> |
| Validation Using JavaScript |
| Validations |
| We can validate the user input for our form inquiries using JavaScript. A form controls are used to collect data from the user , but we also know that garbage in garbage out, if a bad data will be collected then the results will also be bad. So to collect a good data we require validations & checks on the data being collected. Like if name of the person is asked the user can enter only name only in the text field. There are some examples to validate name, age, phone number of a person. |
| Example to Validate a user's name: |
<html> <head> </head> <body bgcolor=yellow text=red> Name :<input type="text" name="t1"> <input type="Button" value="check" onclick="ncheck()"> <script> var ok=0 function ncheck() { var a=t1.value; for(i=0;i<a.length;i++) { if((a.charAt(i)>='a' && a.charAt(i)<='z')||(a.charAt(i)>='A' && a.charAt(i)<='Z') || (a.charAt==" " )) { ok=1 } else { ok=0 } } if (ok==0) { t1.value="Invalid Name"; } else { t1.value="Good Name"; } } </script> </body> </html> |
| Example to validate a user's age: |
<html> <head> </head> <body bgcolor=yellow text=red> How many years old are Your ? :<input type="text" name="t1"> <input type="Button" value="check" onclick="ncheck()">
<script> var ok=0 function ncheck() { var a=t1.value; should=0 if(a.length>0 && a.length<3) { should=1 } if (a.length>0 && parseInt(a.value)==0) { should =0 } if (should==1) { for(i=0;i<a.length;i++) { if((a.charAt(i)>0) && (a.charAt(i)<10)) { ok=1; } else { ok=0 break; } } } if ((ok==1) && (should==1)) { t1.value="..Long Live..."; } else { t1.value="Do not play.. please.."; } } </script> </body> </html> |
| Example to validate a user's Phone number: |
<html> <head> </head> <body bgcolor=yellow text=red> Enter Phone Number :<input type="text" name="t1"> <input type="Button" value="check" onclick="ncheck()">
<script> var ok=0 function ncheck() { var a=t1.value; should=0 if(a.length==8) { should=1 } if (a.length>9 && a.length <12) { should=1 }
if (should==1) { for(i=0;i<a.length;i++) { if((a.charAt(i)>-1) && (a.charAt(i)<10)) {
ok=1; } else { ok=0 break; } } } else { t1.value="Invalid Phone Number"; }
if ((ok==1) && (should==1)) { t1.value="valid Phone Number"; } else { t1.value="Invalid Phone Number"; } } </script> </body> </html> |
| Animation Using JavScript |
| Animations |
We can create animations also using JavaScript. It is a rich language to program an animation. In the below given two programs an image is flipped with angular rotations. We have used cos() & sin functions of Math Object.There are few examples of animation given below. |
| Example: |
<html> <head><title>Animation</title> </head> <body background="pic.jpg" onload="setInterval('ff()',10)"> <img name= "im1" id ="m1" src="pic.jpg" width=200 height=200 style="position:absolute;left:100;top:300;width:100;height:100;"> <img name ="im2" id ="m2" border=3 src="pic.jpg" width=200 height=200 style="position:absolute;left:520;top:320;width:15;height:15;"> <script> var angle=0 var angle2=50 var a=document.all.m1.style; var b =document.all.m2.style; function ff() { if(angle<581) { angle++ } else { angle=0 }
if (a.pixelLeft<=700 && a.pixelTop<500) { a.pixelLeft=angle+Math.cos(angle) a.pixelTop=angle+Math.sin(angle) } else { a.pixelLeft=10 a.pixelTop=50 } pp() }
function pp() { if (b.pixelLeft<600 && b.pixelLeft>0) { b.pixelLeft=angle2+Math.sin(angle) b.pixelTop=angle2+Math.cos(angle2) }
} </script> </body> </html> |
| Example: |
<html> <head> <script language="JavaScript"> var x,y; y=x=0;
function ff() { var t=document.all.m1.style; if(x<250) { t.pixelTop=(240-(x/2))-(t.pixelTop/4); t.pixelLeft=(320-(y/2))-(t.pixelLeft/4); t.width=x; t.height=y; x++; y++; } else { x=x-15; y=y-15; } } </script> </head> <body bgcolor="gray" onLoad="setInterval('ff();',1)"> <img id="m1" src="pic.jpg" style="position:absolute;width:100;height:100;"> </body> </html> |
| Time Setting Using JavaScript |
| Timings |
| JavaScript provides facility to deal with the time. SetInterval() function is used to call any assigned function after every given number of milliseconds. SetTimeout() function is used to delay for assigned number of milliseconds in calling assigned function. There are few examples of timings given below. |
| Example: |
<html> <head> <title> Timing </title> </head> <script> function talt() { var s=setTimeout("alert('with in 1 Second ')",1000) } function talt1() { var s=setTimeout("alert('with in 5 Second ')",5000) } </script> <body bgcolor=blue text=yellow> Click on button to view message <br> <input type="Button" Value="Show me Timed Alert box in one second" onclick="talt()"> <input type="Button" Value="Show me Timed Alert box in Five second" onclick="talt1()"> </body> </html> |
| Example: |
<html> <head> <title> Timing </title></head> <script> function talt() { var s=setTimeout("alert('with in Every 10 Second ')",10000) }
function talt1() { var s=setTimeout("alert('with in Every 5 Second ')",5000) }
</script> <body bgcolor=blue text=yellow> Click on button to view message <br> <input type="Button" Value="Show me Timed Alert box in Every Ten second" onclick="setInterval('talt()',10000)"> <input type="Button" Value="Show me Timed Alert box in Every Five second" onclick="setInterval('talt1()',5000)">
</body> </html> |
Post a Comment