Você está na página 1de 6

1) Alert Box

An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed. <html><head><title>hello</title> <script language="JavaScript"> function show() { alert("Hello world !"); } </script> </head> <body bgcolor="aqua"> <center> <input type=button value="click" onClick="show()"> </center> </body> </html>

2) Confirm Box
A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. <html><head><title>hello</title> <script language="JavaScript"> function show() { var r; r=confirm("do you want to continue !"); if(r==true) alert("Welcome"); else alert("Bye!"); }

Dolon Mukherjee

</script> </head> <body bgcolor="aqua"> <center> <input type=button value="click" onClick="show()"> </center> </body> </html>

3) Prompt Box
A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. <html><head><title>hello</title> <script language="JavaScript"> function show() { var s; s=prompt("Enter your name","Harry Porter"); document.write("Hello "+s+" how are you ?"); } </script> </head> <body bgcolor="aqua"> <center> <input type=button value="click" onClick="show()"> </center> </body> </html>

4) Sometimes it can be useful to detect the visitor's browser, and then serve the
appropriate information. The Navigator object contains information about the visitor's browser name, version, and more.

Dolon Mukherjee

<html><head><title>hello</title> <script language="JavaScript"> function show() { txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt+= "<p>Browser Name: " + navigator.appName + "</p>"; txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt+= "<p>Platform: " + navigator.platform + "</p>"; document.write(txt); } </script> </head> <body bgcolor="aqua"> <center> <input type=button value="click" onClick="show()"> </center> </body> </html>

5) User id and Passworda user is given 3 chances to log infailing which the form
will be closed

6) Form validation
a) b) c) d) e) the login name should be of 10 characters minimum the login name should begin with a capital letter the login name, password, confirm password cant be left empty the email id needs to scanned for the presence of @ and . Password should contain only alphabet and numbers

<html><head><title>hello</title> <script language="JavaScript"> function verify() { var flag1,flag2,numofelement, len1,len2,flag3,flag4,flag5; flag1=0; flag2=0; flag3=0; flag4=0; flag5=0; numofelement=document.form1.elements.length; alert("the number of elemnts in the form = "+numofelement); for(i=0;i<2;i++) {if(document.forms[0].elements[i].value=="")

Dolon Mukherjee

flag1=1;} len1=document.form1.elements[0].value.length; if(len1<5) flag2=1; len2=document.form1.elements[1].value.length ;

for(i=0;i<len2;i++) { if(document.form1.elements[1].value.charAt(i)=='@') { flag3=1; break;} } for(i=0;i<len2;i++) { if(document.form1.elements[1].value.charAt(i)=='.') { flag4=1; break;} } //Name should begin with capital letter if(document.form1.elements[0].value.charCodeAt(0)>=65 && document.form1.elements[0].value.charCodeAt(0)<=90) flag5=1; //Empty validation if(flag1==1) alert("Please fill in the values"); //length validation if(flag2==1) alert("Name should be of 5 characters"); //email validation ...must contain @ and . if(flag3!=1) alert("Email should contain @"); if(flag4!=1) alert("Email should contain ."); if(flag5!=1) alert("Name should begin with capital letter ");

Dolon Mukherjee

} </script> </head> <body bgcolor="aqua"> <form name="form1"> <center> Name :<input type=text vame=t1><br> Email:<input type=text name=t2><br> <input type=button value="Ok" onClick="verify()"> <input type=reset value="Reset"> </center> </form> </body> </html>

7) Show a message in 2 seconds


<html><head><title>hello</title> <script language="JavaScript"> var c; var t; var flag; flag=0; c=0; function start() { var t=setTimeout("show()",1000); } function show() { alert("Hello World"); } </script> </head>

Dolon Mukherjee

<body bgcolor="aqua"> <form name="form1"> <center> <input type=button value="Show a message in 2 second" onClick="start()"> </center> </form> </body> </html>

8) Change the background color of the window (button animation)


<html> <body bgcolor="aqua"> <input type =button value="magic" onMouseover=document.bgColor="Red"; onMouseout=document.bgColor="Aqua" > </body> </html> 9)

Dolon Mukherjee

Você também pode gostar