Example : How to use External Java Script file in an HTML Page.

function external1() 
  {
    document.getElementById("msg").style.color= "red";
  }

function external2() 
  {
    document.getElementById("msg").style.color= "red";
  }

NB : Save this external file as extern1.js
--------------------------------------------------------------------------
<!DOCTYPE html>
<html>
	<head>
	   <script src="extern1.js"></script>  // when JS file is stored in Same folder   OR.
 
	   <script src="extern2.js"></script>     // when JS file is stored in Same folder.
           <script src="js/extern2.js"></script>      // when JS file is stored in js folder.
           <script src="D:/js/extern2.js"></script> //when JS file is stored in D drive in js folder.
           <script src="full website address/js/extern3.js"></script>  // when JS file is stored on 
                          the website in js folder.
           <script src="/js/extern3.js"></script>      // when JS file is stored on the current 
                          website in js folder.

	</head>
	
	<body>
		<h2>Use of External JS </h2>

		<div id="msg">Your Poupular Website Codershelpline</div><br>		
		<input type="button" value="Use External JS" onclick="external1();">		
	</body>
</html>

Example : How to move cursor in next html element on pressing Enter key/button [Enter Key Event].

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Trail</title>
		
        <script>
		
            function enter1()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.u_id.focus();
                }
            }
			
            function enter2()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.psd.focus();
                }
            }
			
            function enter3()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.dob.focus();
                }
            }
			
            function enter4()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.gender1.focus();
                }
            }
			
            function enter5()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.gender2.focus();
                }
            }
			
            function enter6()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.gender3.focus();
                }
            }
			
            function enter7()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.mcode.focus();
                }
            }
			
            function enter8()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.mob.focus();
                }
            }
			
            function enter9()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.email.focus();
                }
            }
			
            function enter10()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.matric.focus();
                }
            }
			
            function enter11()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.add.focus();
                }
            }
			
            function enter12()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.pin.focus();
                }
            }
			
            function enter13()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.state.focus();
                }
            }
			
            function enter14()
            {
                var x=event.keyCode||event.which;
                if(x===13)
                {
                    event.preventDefault();
                    document.form1.sub6.focus();
                }
            }

        </script>		
    </head>
	
    <body background="image/img1.jpg" style=" background-size: 100%; width: 100%" >
        <form name="form1">
            <center>
		<fieldset style="width: 60%; background-color: aliceblue; 
border-radius: 8px; border-width: 4px; border-color: cadetblue"> <table style="font-weight: bold; font-family: cambria"> <h1>User Registration</h1> <hr style="width: 95%"> <tr> <td>Sl. No.</td> <td>:</td> <td> <input type="text" name="sl_no" id="sl_no1"
onkeypress="enter1()" autofocus=""> </td> </tr> <tr> <td>User Name</td> <td>:</td> <td> <input type="text" name="u_id" id="u_id1"
onkeypress="enter2()" placeholder="Enter User ID"> </td> </tr> <tr> <td>Password</td> <td>:</td> <td> <input type="password" name="psd" id="psd1"
onkeypress="enter3()" placeholder="Enter Password"> </td> </tr> <tr> <td>Date of Birth</td> <td>:</td> <td> <input type="date" name="dob" id="dob1" onkeypress=
"enter4()"> </td> </tr> <tr> <td>Gender</td> <td>: </td> <td> <input type="radio" name="gender" id="gender1"
onkeypress="enter5()" value="Male" >Male <input type="radio" name="gender" id="gender2"
onkeypress="enter6()" value="Female" >Female </td> </tr> <tr> <td>Mobile No. </td> <td>:</td> <td> <select onkeypress="enter8()" name="mcode" id="mcode1"> <option value="+91">+91</option> <option value="+92">+92</option> <option value="+93">+93</option> <option value="+94">+94</option> </select> <input type="number" name="mob" id="mob1" onkeypress=
"enter9()" placeholder="Enter 10 digit No."> </td> </tr> <tr> <td>E-mail</td> <td>:</td> <td> <input type="Email" name="email" id="email1" onkeypress
="enter10()" placeholder="[email protected]"> </td> </tr> <tr> <td>Qualification</td> <td>:</td> <td> <input type="checkbox" name="matric" id="check1"
onkeypress="enter11()" value="Matric" >Matric </td> </tr> <tr> <td>Address</td> <td>:</td> <td> <textarea style="width: 200px; text-transform:
capitalize" onkeypress="enter12()" name="add" id="add1"> </textarea> </td> </tr> <tr> <td>Pin No.</td> <td>:</td> <td> <input type="number" name="pin" id="pin1" onkeypress=
"enter13()" placeholder="Enter 6 Digit pin"> </td> </tr> <tr> <td>State</td> <td>:</td> <td> <select name="state" id="state1" onkeypress="enter14()"> <option value="--Select--">--Select--</option> <option value="Bihar">Bihar</option> <option value="Delhi">Delhi</option> </select> </td> </tr> <tr> <td></td> <td></td> <td> <input type="submit" onclick="astrick()" name="sub"
id="sub6" value="Submit">  <input type="reset" value="Reset">  </td> </tr> </table> </center> </fieldset> <form> </body> </html>

Example : How to redirect/forward web page using Java Script [Redirect Page].

<!DOCTYPE html>

<html>
    <head>
        <script>
          function redirect()
            {             
             //window.location="HomePage1.html";    // Opens new Page replacing old one.
             //window.location="https://www.google.com/"; // Opens new Page replacing old one.
             //window.location.replace("HomePage1.html"); // Opens new Page replacing old one.
             //window.location.assign("HomePage1.html"); // Opens new Page replacing old one.
             //window.location.href="HomePage1.html"; // Opens new Page replacing old one.
             //self.location="HomePage1.html"; // Opens new Page replacing old one.
             //window.location.reload("HomePage1.html"); // for Internet Exploror only
             //window.navigate("https://www.google.com/"); // for Internet Exploror only
             //window.open('HomePage1.html','_blank');   // Opens Page in new Tab
               window.open('HomePage1.html','_newtab');  // Opens Page in new Tab           
            }
        </script>
     </head>

     <body>
         <input type="button"  onclick="redirect();" value="Send">
     </body>
 <html>

 1,499 total views,  2 views today


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.