Table of Contents
hide
Example : How to Use/Call External JavaScript file in an HTML Page.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="external.js"></script>
<script type="text/javascript" src="JS\external.js"></script>
<script type="text/javascript" src="D:\JS\external.js"></script>
<script src="external.js"></script>
<script src="JS\external.js"></script>
<script src="D:\JS\external.js"></script>
<script src="https://www.codershelpline.com/JS/File1.js"></script>
</head>
<body>
<h2>Calling of External JS file in Html</h2>
---
---
---
</body>
</html>
---------------------------- OR ----------------------------
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="external.js"></script>
<script type="text/javascript" src="JS\external.js"></script>
<script type="text/javascript" src="D:\JS\external.js"></script>
<script src="external.js"></script>
<script src="JS\external.js"></script>
<script src="D:\JS\external.js"></script>
<script src="https://www.codershelpline.com/JS/File1.js"></script>
<h2>Calling of External JS file in Html</h2>
---
---
---
</body>
</html>
---------------------------- OR ----------------------------
First.html
<!DOCTYPE html>
<html>
<head>
<script src="external.js"></script>
<script src="JS\external.js"></script>
<script src="D:\JS\external.js"></script>
</head>
<body>
<h2>Calling of External JS file's function in Html</h2>
<input type="button" onclick="msg()" value="Show External JS Message">
</body>
</html>
external.js
function msg()
{
alert("Hello, Codershelpline");
}<!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: hsl(211, 18%, 53%);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()
{
location.replace("https://www.codershelpline.com");
// OR window.location = "https://www.codershelpline.com";
// OR window.location.href = "https://www.codershelpline.com";
// OR window.location.replace("https://www.codershelpline.com");
// OR location.assign("https://www.codershelpline.com");
}
</script>
</head>
<body>
<h2>Page Redirection using JS</h2>
<button onclick="Redirect()">Redirect Page</button>
setTimeout('Redirect()', 10000); // Redirect page after every 10sec.
</body>
</html>Example : A JS program/code segment to Refresh or Auto Refresh the Page.
NB : To refresh a web page as per need we can simply use an event or when the user clicks on a link having a code JavaScript location.reload() method.
<a href="javascript:location.reload(true)">Refresh the Page</a>
------------------------ OR ------------------------
<body onload="JavaScript:AutoRefresh(3000);">
<p>This code will refresh the page every 3 seconds.</p>
</body>
------------------------ OR ------------------------
</head>
<script>
function AutoRefresh( t )
{
setTimeout("location.reload(true);", t);
}
</script>
</head>
<body onload="JavaScript:AutoRfresh(2000);">
<p>This code will refresh the page every 2 seconds.</p>
</body>Example : A JS program/code segment to Print the web page.
<body>
<form>
<input type="button" value="Print the Page" onclick="window.print()" />
</form>
</body> 
0 Comments