JavaScript Placements in HTML

« Previous Tutorial Next Tutorial »

You can place or include your JavaScript code anywhere in your HTML document, even you can also place your JavaScript code in an external file and include this file in any HTML document to use your JavaScript code present in that file. Here are the place, where you can include your JavaScript code:

in the <head> .. </head> section
in the <body> .. </body> section
in the <body> .. </body> and <head> .. </head> sections
in an external file and then include this file in the <head> .. </head> section

JavaScript Code in Head

Here is an example, shows how to place JavaScript code in the head section of an HTML document:

<html>
<head>
<script type="text/javascript">
<!--
function fun1() {
   alert("Hello JavaScript")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="fun1()" value="click here" />
</body>
</html>

Here is the output produced by the above JavaScript program:

JavaScript Code in Body

Here is an example, shows how to place your JavaScript code in body section in an HTML document:

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello JavaScript")
//-->
</script>
<p>Hello Browser, I am HTML </p>
</body>
</html>

Here is the output of the above JavaScript program:

JavaScript Code in Body and Head

Here is an example, shows how to place your JavaScript code in body and head sections in your HTML document:

<html>
<head>
<script type="text/javascript">
function fun1() {
   alert("Hello HTML")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write("Hello HTML")
</script>
<br/>
<input type="button" onclick="fun1()" value="Click Here" />
</body>
</html>

Here is the sample output of the above JavaScript program. To watch the effect, just click on Click Here button:

JavaScript Code in External File

You can also use your JavaScript code from an external file. Here is an example, shows how to use your JavaScript code placed in external file to any HTML document. This example, shows how to include external JavaScript file in an HTML document/file:

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
...
...
...
</body>
</html>

This is the most preferred and safe way to use your all JavaScript code from an external file. Because if you want to use same JavaScript code in multiple HTML file, then this is the most preferred way. You can write all your JavaScript code in a simple text file having name like myjavascript.js. Use .js extension after the filename.

Now you can include this file in any HTML document to use all the code present in that file. And later if you want to change the JavaScript code, you only have to make changes in a single file (say myjavascript.js), and all the HTML document automatically changes. Here is an example, Let's assume that this JavaScript code is saved in a file named filename.js, containing the following JavaScript code:

function fun1() {
   alert("Hello HTML")
}

Now we are going to include the above JavaScript file filename.js in the following HTML document:

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>

<input type="button" onclick="fun1()" value="Click Here" />

</body>
</html>

Now after including the JavaScript file in the above HTML document, the code will become like this:

<html>
<head>
<script>
   function fun1() {
      alert("Hello HTML")
   }
</script>
</head>
<body>

<input type="button" onclick="fun1()" value="Click Here" />

</body>
</html>

Here is the output of the above JavaScript/HTML program:

JavaScript Online Test

« Previous Tutorial Next Tutorial »