Where to Write JavaScript Code in HTML

List of places in HTML, where we can write our JavaScript code are:

<HEAD>
<BODY>

That is, either we can write our JavaScript code anywhere between <HEAD> and </HEAD>, or anywhere between <BODY> and </BODY>.

Note - We can also write our JavaScript code, in both HEAD and BODY section of an HTML document.

Write JavaScript in HEAD Section of an HTML Document

Before writing JavaScript code inside an HTML document, open a <SCRIPT> tag, and after the completion of JavaScript code, close the </SCRIPT> tag.

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<head>
   <script>
      function codescracker() {
         alert("Hello there!");
      }
   </script>
</head>
<body>

   <input type="button" onclick="codescracker()" value="Click Me">
   
</body>
</html>

Output

When you will click on the Click Me button, a function named codescracker will be called, that displays Hello there! as an alert box.

Write JavaScript in BODY Section of an HTML Document

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <input type="button" onclick="codescracker()" value="Click Me">
   
   <script>
      function codescracker() {
         alert("Hello there!");
      }
   </script>
   
</body>
</html>

Output

Write JavaScript in HEAD and BODY Section of an HTML Document

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<head>
   <script>
      function codes() {
         alert("Hello there!");
      }
   </script>
</head>
<body>

   <script>
      function cracker() {
         alert("JavaScript is Fun!");
      }
   </script>
   
   <input type="button" onclick="codes()" value="Button 1"><br><br>
   <input type="button" onclick="cracker()" value="Button 2">
   
</body>
</html>

Output

Note - To include an external JavaScript in an HTML document, use src attribute of SCRIPT tag.

Include External JavaScript File in HTML

We can also write our JavaScript code in an external file, and then include/link that file into an HTML document anywhere in the HEAD or BODY section.

For example, write the following JavaScript code in any text editor say NotePad:

function codescracker() {
   alert("Hello there!");
}

Save this file with any name ending with .js extension say codescracker.js, inside the same directory (the directory where the .html file is saved). Now, here is the code of codescracker.html file:

<!DOCTYPE html>
<html>
<head>
   <script src="codescracker.js"></script>
</head>
<body>

   <input type="button" onclick="codescracker()" value="Click Me">
   
</body>
</html>

You will get the same output, as the output of the first example available at top of this article.

Here is the snapshot of both files, that is codescracker.html and codescracker.js, available in the same folder:

You can also include an external JavaScript file, from other directory or folder. For that, provide the full path, to the src attribute. For example:

<script src="file:///C:/javascript/files/codescracker.js"></script>

Here are the ways, to access and include an external JavaScript file in an HTML document, from different-different directories.

<script src="codescracker.js"> - Indicates to the file codescracker.js available in the same folder
<script src="myjs/codescracker.js"> - Indicates to the file codescracker.js available in the myjs folder of current folder
<script src="/myjs/codescracker.js"> - Indicates to the file codescracker.js available in the myjs folder from the root
<script src="../codescracker.js"> - Indicates to the file codescracker.js available in the one level up folder from the current folder

JavaScript Online Test

« Previous Tutorial Next Tutorial »