Download
1 / 16
160 likes | 286 Views
J a v a Script II. popo. JavaScript. Changing Time in the status bar <SCRIPT> function showTime () { var now = new Date(); var hours = now.getHours (); var minutes = now.getMinutes (); var seconds = now.getSeconds (); var timeStr = "" + ((hours > 12) ? hours - 12 : hours);
E N D
JavaScript II popo
JavaScript • Changing Time in the status bar • <SCRIPT> • function showTime() { • var now = new Date(); • var hours = now.getHours(); • var minutes = now.getMinutes(); • var seconds = now.getSeconds(); • vartimeStr = "" + ((hours > 12) ? hours - 12 : hours); • timeStr += ((minutes < 10) ? ":0" : ":") + minutes; • timeStr += ((seconds < 10) ? ":0" : ":") + seconds; • timeStr += (hours >= 12) ? " P.M." : " A.M."; • status = timeStr; // time is displayed in the Status Line • setTimeout("showTime()", 1000); • } • </SCRIPT> • <BODY onLoad="showTime()"> popo
JavaScript • Enable & disable select option • <html> • <script type="text/javascript"> • function disable() • { • document.getElementById("mySelect").disabled=true;} • function enable() • { • document.getElementById("mySelect").disabled=false;} • </script> • <body> • <form> • <select id="mySelect"> • <option>Apple</option> • <option>Banana</option> • <option>Orange</option> • </select> • <br /><br /> • <input type="button" onclick="disable()" value="Disable list"> • <input type="button" onclick="enable()" value="Enable list"> • </form> • </body> • </html> popo
JavaScript • print Output all options • <html> • <script type="text/javascript"> • function getOptions(){ • var x=document.getElementById("mySelect"); • var txt="All options: "; • vari; • for (i=0;i<x.length;i++) • { • txt=txt + "\n" + x.options[i].text; • } • alert(txt); • } • </script> • <body> • <form> • <select id="mySelect"> • <option>Apple</option> • <option>Orange</option> • <option>Banana</option> • </select> • <br><input type="button" onclick="getOptions()" value="Output all options"> • </form> • </body> • </html> popo
JavaScript • print index of selected option • <html> • <script type="text/javascript"> • function getIndex(){ • var x=document.getElementById("mySelect"); • alert(x.selectedIndex); • } • </script> • <body> • <form> • Select your favorite fruit: • <select id="mySelect"> • <option>Apple</option> • <option>Orange</option> • <option>Banana</option> • </select> • <input type="button" onclick="getIndex()" value="Alert index of selected option"> • </form> • </body> • </html> popo
JavaScript • Set text of selected option • <html> • <script type="text/javascript"> • function changeText() • { • var x=document.getElementById("mySelect"); • x.options[x.selectedIndex].text="Melon"; • } • </script> • <body> • <form> • Select your favorite fruit: • <select id="mySelect"> • <option>Apple</option> • <option>Orange</option> • <option>Banana</option> • </select> • <input type="button" onclick="changeText()" value="Set text of selected option"> • </form> • </body> • </html> popo
JavaScript • Remove selected option • <html> • <script type="text/javascript"> • function removeOption() • { • var x=document.getElementById("mySelect"); • x.remove(x.selectedIndex); • } • </script> • <body> • <form> • <select id="mySelect"> • <option>Apple</option> • <option>Banana</option> • <option>Orange</option> • </select> • <input type="button" onclick="removeOption()" value="Remove selected option"> • </form> • </body> • </html> popo
JavaScript • Javascript function to check for all letters in a field • function allLetter(inputtxt) • { • var letters = /^[A-Za-z]+$/; • if(inputtxt.value.match(alphaExp)) • { • 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
JavaScript 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><br> • Children<input type=checkbox><br> • <input type="button" onclick="check(this.form)" value="Remove selected option"> • </form> • </body></html> popo
JavaScript II • Login form • <html> • <script type="text/javascript"> • function validate(form){ • varuserName = form.Username.value; • var password = form.Password.value; • if (userName.length === 0) { • alert("You must enter a username."); • return false; • } • if (password.length === 0) { • alert("You must enter a password."); • return false; • } • } • </script> • <body> • <h1>Login Form</h1> • <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
JavaScript II • validates that the entry is formatted as an e-mail address • <script type="text/javascript"> • function check(elem) • { • varstr = elem.email.value; • var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-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“ /> • <br> • <input type="reset" /> <input type="submit" /> • </form> popo
JavaScript II • Check fname is empty • <html> • <head> • <script type="text/javascript"> • function validateForm(f) • { • var x=f.fname.value; • if (x==null || x=="") • { • alert("First name must be filled out"); • return false; • } • } • </script> • </head> • <body> • <form name="myForm" onsubmit="return validateForm(this)" > • First name: <input type="text" name="fname"> • <input type="submit" value="Submit"> • </form> • </body> • </html> popo
JavaScript II • String reversal using charat and length property • <script type="text/javascript"> • varmy_str="nattop" • vari=my_str.length; • i=i-1; • for (var x = i; x >=0; x--) • { • document.write(my_str.charAt(x)); • } • </script> popo
JavaScript II • Hide & Show • <script> • function show1() • { • document.getElementById('s').style.display='block'; • } • function show2() • { • document.getElementById('s').style.display='none'; • } • </script> • <form > • <input type=button value=show onClick="show1();"> • <br> • <span id="s" style="display:none; color:#FF0000">Show ME</span> • <input type=button value=hide onClick="show2();"> • </form>
JavaScript II • <html> • <head> • <script language="javascript"> • function check() • { • if(document.getElementById('uname').value==""||document.getElementById('upass').value=="") • { • if(document.getElementById('uname').value=="") • { • document.getElementById('suname').style.display='block'; • } • else • { • document.getElementById('suname').style.display='none'; • } • if(document.getElementById('upass').value=="") • { • document.getElementById('supass').style.display='block'; • } • else • { • document.getElementById('supass').style.display='none'; • } • } • else • { • document.f.submit(); • } • } • </script> • </head> • <body> • <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:#FF0000">Enter Name</span> • <tr><td>Passsword<td><input type=password id="upass"> • <td><span id="supass" style="display:none; color:#FF0000">Enter Password</span> • <tr><td><input type=button value=click onClick="check();"> • </table> • </form> • </center> • </body> • </html>
