Include JavaScript html page

Include JavaScript html page

There are three ways you can include JavaScript in html page those are as below:

  • Include external JavaScript: In this way you keep JavaScript outside of html file and include this in the header of the html page. Advantage of adding external JavaScript is you can use in multiple pages and control behavior:

HTML page:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample html page</title>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h2 style="">Sample HTML page</h2>
<input type="button" Value="Check JavaScript Click" onclick="checkJS();">
</body>
</html>

 

  • External sample.js page inside js folder:
function checkJS(){
    alert("Check JavaScript Clicked");
}

Output:
Include JavaScript html page

  • Inline JavaScript: This way you could directly call JavaScript inside the tab as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample html page</title>
</head>
<body>
<h2 style="">Sample HTML page</h2>
<input type="button" Value="Check JavaScript Click" onclick="alert('Check JavaScript Clicked');">
</body>
</html>

Output:

Include JavaScript html page

  • Internal JavaScript: This way you include Java Script on top of the page inside head tag so it can be applied to whole page example shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample html page</title>
<script type="text/javascript">
function checkJS(){
    alert("Check JavaScript Clicked")
}

</script>
</head>
<body>
<h2 style="">Sample HTML page</h2>
<input type="button" Value="Check JavaScript Click" onclick="checkJS();">
</body>
</html>

Output:

Include JavaScript html page

 

That’s it Include JavaScript html page

Leave a Reply

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