Java Script II popo Java Script Changing Time

  • Slides: 16
Download presentation
Java. Script II popo

Java. Script II popo

 • • • • Java. Script Changing Time in the status bar <SCRIPT>

• • • • Java. Script Changing Time in the status bar <SCRIPT> function show. Time() { var now = new Date(); var hours = now. get. Hours(); var minutes = now. get. Minutes(); var seconds = now. get. Seconds(); var time. Str = "" + ((hours > 12) ? hours - 12 : hours); time. Str += ((minutes < 10) ? ": 0" : ": ") + minutes; time. Str += ((seconds < 10) ? ": 0" : ": ") + seconds; time. Str += (hours >= 12) ? " P. M. " : " A. M. "; status = time. Str; // time is displayed in the Status Line set. Timeout("show. Time()", 1000); } </SCRIPT> <BODY on. Load="show. Time()"> popo

 • • • • • • Java. Script Enable & disable select option

• • • • • • Java. Script Enable & disable select option <html> <script type="text/javascript"> function disable() { document. get. Element. By. Id("my. Select"). disabled=true; } function enable() { document. get. Element. By. Id("my. Select"). disabled=false; } </script> <body> <form> <select id="my. Select"> <option>Apple</option> <option>Banana</option> <option>Orange</option> </select> <input type="button" onclick="disable()" value="Disable list"> <input type="button" onclick="enable()" value="Enable list"> </form> </body> </html> popo

 • • • • • • • Java. Script print Output all options

• • • • • • • Java. Script print Output all options <html> <script type="text/javascript"> function get. Options(){ var x=document. get. Element. By. Id("my. Select"); var txt="All options: "; var i; for (i=0; i<x. length; i++) { txt=txt + "n" + x. options[i]. text; } alert(txt); } </script> <body> <form> <select id="my. Select"> <option>Apple</option> <option>Orange</option> <option>Banana</option> </select> <input type="button" onclick="get. Options()" value="Output all options"> </form> </body> </html> popo

 • • • • • Java. Script print index of selected option <html>

• • • • • Java. Script print index of selected option <html> <script type="text/javascript"> function get. Index(){ var x=document. get. Element. By. Id("my. Select"); alert(x. selected. Index); } </script> <body> <form> Select your favorite fruit: <select id="my. Select"> <option>Apple</option> <option>Orange</option> <option>Banana</option> </select> <input type="button" onclick="get. Index()" value="Alert index of selected option"> </form> </body> </html> popo

 • • • • • • Java. Script Set text of selected option

• • • • • • Java. Script Set text of selected option <html> <script type="text/javascript"> function change. Text() { var x=document. get. Element. By. Id("my. Select"); x. options[x. selected. Index]. text="Melon"; } </script> <body> <form> Select your favorite fruit: <select id="my. Select"> <option>Apple</option> <option>Orange</option> <option>Banana</option> </select> <input type="button" onclick="change. Text()" value="Set text of selected option"> </form> </body> </html> popo

 • • • • • Java. Script Remove selected option <html> <script type="text/javascript">

• • • • • Java. Script Remove selected option <html> <script type="text/javascript"> function remove. Option() { var x=document. get. Element. By. Id("my. Select"); x. remove(x. selected. Index); } </script> <body> <form> <select id="my. Select"> <option>Apple</option> <option>Banana</option> <option>Orange</option> </select> <input type="button" onclick="remove. Option()" value="Remove selected option"> </form> </body> </html> popo

 • • • • Java. Script Javascript function to check for all letters

• • • • Java. Script Javascript function to check for all letters in a field function all. Letter(inputtxt) { var letters = /^[A-Za-z]+$/; if(inputtxt. value. match(alpha. Exp)) { return true; } else { alert("message"); return false; } } To get a string contains only letters (both uppercase or lowercase) we use a regular expression (/^[A-Za-z]+$/) which allows only letters. Next the match() method of string object is used to match the said regular expression against the input value. Here is the complete web document. popo

 • • • • • Java. Script II Checkbox checked <html> <script type="text/javascript">

• • • • • Java. Script II Checkbox checked <html> <script type="text/javascript"> function check(f) { if(f. elements[0]. checked&&f. elements[1]. checked) { var no=prompt("no of children? "); if(no==2)alert("U r eligible for the loan Rs 1000000"); else alert("U r eligible for loan Rs 50000"); } else alert("not eligible"); } </script><body> <form> Marital Status<input type=checkbox> Children<input type=checkbox> <input type="button" onclick="check(this. form)" value="Remove selected option"> </form> </body></html> popo

 • • • • • • Java. Script II Login form <html> <script

• • • • • • Java. Script II Login form <html> <script type="text/javascript"> function validate(form){ var user. Name = form. Username. value; var password = form. Password. value; if (user. Name. length === 0) { alert("You must enter a username. "); return false; } if (password. length === 0) { alert("You must enter a password. "); return false; } } </script> <body> <h 1>Login Form</h 1> <form method="post" action="Process. html" onsubmit="return validate(this); "> Username: <input type="text" name="Username" size="10"><br/> Password: <input type="password" name="Password" size="10"><br/> <input type="submit" value="Submit"> </form></body></html> popo

 • • • • • Java. Script II validates that the entry is

• • • • • Java. Script II validates that the entry is formatted as an e-mail address <script type="text/javascript"> function check(elem) { var str = elem. email. value; var re = /^[w-]+(. [w-]+)*@([w-]+. )+[a-z. A-Z]{2, 7}$/; if (!str. match(re)) { alert("Verify the e-mail address format. "); return false; } else { return true; } } </script> <form method="GET" onsubmit="return check(this)"> E-mail Address: <input type="text" size="30" name="email“ /> <input type="reset" /> <input type="submit" /> </form> popo

 • • • • • • Java. Script II Check fname is empty

• • • • • • Java. Script II Check fname is empty <html> <head> <script type="text/javascript"> function validate. Form(f) { var x=f. fname. value; if (x==null || x=="") { alert("First name must be filled out"); return false; } } </script> </head> <body> <form name="my. Form" onsubmit="return validate. Form(this)" > First name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> </body> </html> popo

 • • • Java. Script II String reversal using charat and length property

• • • Java. Script II String reversal using charat and length property <script type="text/javascript"> var my_str="nattop" var i=my_str. length; i=i-1; for (var x = i; x >=0; x--) { document. write(my_str. char. At(x)); } </script> popo

Java. Script II

Java. Script II

Java. Script II • • • • Hide & Show <script> function show 1()

Java. Script II • • • • Hide & Show <script> function show 1() { document. get. Element. By. Id('s'). style. display='block'; } function show 2() { document. get. Element. By. Id('s'). style. display='none'; } </script> <form > <input type=button value=show on. Click="show 1(); "> <span id="s" style="display: none; color: #FF 0000">Show ME</span> <input type=button value=hide on. Click="show 2(); "> • </form>

 • • • • • • • • • • • • <html>

• • • • • • • • • • • • <html> Java. Script II <head> </head> <body> Name</span> <script language="javascript"> function check() { </script> <center> <form name=f action=p. html> <table border=1> <tr><td>Name<td><input type=text id="uname"> <td><span id="suname" style="display: none; color: #FF 0000">Enter <tr><td>Passsword<td><input type=password id="upass"> <td><span id="supass" style="display: none; color: #FF 0000">Enter Password</span> </html> </body> } if(document. get. Element. By. Id('uname'). value==""||document. get. Element. By. Id('upass'). value=="") { if(document. get. Element. By. Id('uname'). value=="") { document. get. Element. By. Id('suname'). style. display='block'; } else { document. get. Element. By. Id('suname'). style. display='none'; } if(document. get. Element. By. Id('upass'). value=="") { document. get. Element. By. Id('supass'). style. display='block'; } else { document. get. Element. By. Id('supass'). style. display='none'; } } else { document. f. submit(); } </center> <tr><td><input type=button value=click on. Click="check(); "> </table> </form>