Home »
JavaScript
Where to place JavaScript Code?
Placing JavaScript in HTML: In this tutorial, we will learn about the placement of the JavaScript code, where can we place the JavaScript code in an HTML file?
By IncludeHelp Last updated : July 29, 2023
In an HTML code, JavaScript can be placed at three places...
- Between the <head>...</head> tag
- Between the <body>...</body> tag
- In the external file with an extension ".js"
Between the <head>...</head> and <body>...</body> tags
If we want to place a JavaScript code in an HTML file, we can place either in <head>...</head> tag or <body>...</body> tag.
Syntax
<script type="text/javascript">
//js code
</script>
Example
<html>
<head>
<title>JavaScipt Example</title>
<script type="text/javascript">
//function to add two numbers
function sum(a, b){
return (a+b);
}
</script>
</head>
<body>
<script type="text/javascript">
//function to subtract two numbers
function sub(a, b){
return (a-b);
}
</script>
<p>Here, we are printing sum & sum...</p>
<p id="result1"></p>
<p id="result2"></p>
<script type="text/javascript">
//calling functions & printing the values
document.getElementById("result1").innerHTML = "sum = " + sum(10,20);
document.getElementById("result2").innerHTML = "sub = " + sub(10,20);
</script>
</body>
</html>
The output of the above example is::
Here, we are printing sum & sum...
sum = 30
sub = -10
In the external file with an extension ".js"
We can also write JavaScript code in an external file, and import the file in an HTML file.
Syntax
Syntax to import JavaScript file in an HTML file:
<script src="file_name.js"></script>
Example
JavaScript File (functions.js)
//function to add two numbers
function sum(a, b) {
return (a + b);
}
//function to subtract two numbers
function sub(a, b) {
return (a - b);
}
HTML file
<html>
<head>
<title>JavaScipt Example</title>
<script src="functions.js"></script>
</head>
<body>
<p>Here, we are printing sum & sum...</p>
<p id="result1"></p>
<p id="result2"></p>
<script type="text/javascript">
//calling functions & printing the values
document.getElementById("result1").innerHTML = "sum = " + sum(10,20);
document.getElementById("result2").innerHTML = "sub = " + sub(10,20);
</script>
</body>
</html>
The output of the above example is:
Here, we are printing sum & sum...
sum = 30
sub = -10
JavaScript Tutorial »