CODESCRACKER

Where to Write JavaScript Code in HTML

The list of places in HTML where we can write our JavaScript code is as follows:

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 the HEAD and BODY section of an HTML document.

Write JavaScript in the HEAD Section of an HTML Document

Before writing JavaScript code inside an HTML document, open a <SCRIPT> tag, and after the JavaScript code is complete, 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 click on the Click Me button, a function named codescracker is called that displays Hello there! as an alert box.

In the above example, the following JavaScript code:

function codescracker() { 
... 
}

is the declaration of the JavaScript function codescracker(). It defines a function that, upon execution, will show an alert box with the text "Hello there!"

Now the following JavaScript statement:

alert("Hello there!");

is a JavaScript function that creates an alert box with the specified message using built-in technology. Finally, the following code:

onclick="codescracker()

is used to call the function "codescracker()" when the button associated with this "onclick" event is clicked.

Note: The <script> tag is used to include JavaScript code in the HTML document.

You will learn both the function, alert box, and the onclick event later in this JavaScript tutorial series.

Write JavaScript in the 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 the HEAD and BODY Sections 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 external JavaScript in an HTML document, use the src attribute of the SCRIPT tag.

Include an external JavaScript file in HTML

We can also write our JavaScript code in an external file and then include or 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 for the 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 first example available at the top of this article.

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

include external javascript in html

You can also include an external JavaScript file from another 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 directories.

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Liked this article? Share it!




Like/follow us on social media for updates!



Like/follow us on social media for updates!