Skip to content

Where to put JavaScript in an HTML Document

  • by

JavaScript code can be inserted into an HTML page in various ways. It can be placed within the body or head section of the HTML page, or even in both sections. Alternatively, JavaScript code can also be placed in an external file, which can be linked to the HTML page using the script tag and specifying the source file.

  1. Inline: inside an HTML element using the “onclick” attribute or other event attributes.
  2. Internal: code within the HTML document using the “script” tag. You can place the “script” tag inside the “head” section of the HTML document or inside the “body” section.
  3. External: file and link to it from the HTML document using the “script” tag.

Examples of how to put JavaScript in an HTML Document

Inline: You can include JavaScript code directly inside an HTML element using the “onclick” attribute or other event attributes.

<button onclick="alert('Hello world!')">Click me</button>

Internal: You can include JavaScript code within the HTML document using the “script” tag.

<html>
<head>
    <title>My page</title>
    <script>
        function showMessage() {
            alert('Hello world!');
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click me</button>
</body>
</html>

In this example, the JavaScript code is placed inside the “head” section of the HTML document.

External: You can also include JavaScript code in an external file and link to it from the HTML document using the “script” tag.

<html>
<head>
    <title>My page</title>
    <script src="myscript.js"></script>
</head>
<body>
    <button onclick="showMessage()">Click me</button>
</body>
</html>

In this example, the JavaScript code is in the file “myscript.js“, which is linked to the HTML document. The code in the file might look like this:

function showMessage() {
    alert('Hello world!');
}

Practical example

We’ve created a simple calculator that adds two numbers together.

<!DOCTYPE html>
<html>
<head>
	<title>My Page</title>
	<script type="text/javascript">
		function addNumbers() {
			// Get the input values
			var num1 = document.getElementById("num1").value;
			var num2 = document.getElementById("num2").value;
			
			// Convert to integers
			num1 = parseInt(num1);
			num2 = parseInt(num2);
			
			// Add the numbers
			var result = num1 + num2;
			
			// Display the result
			document.getElementById("result").innerHTML = "Result: " + result;
		}
	</script>
</head>
<body>
	<h1>Addition Calculator</h1>
	<label for="num1">Number 1:</label>
	<input type="text" id="num1"><br>
	<label for="num2">Number 2:</label>
	<input type="text" id="num2"><br>
	<button onclick="addNumbers()">Add</button>
	<p id="result"></p>
</body>
</html>

Output:

Where to put JavaScript in an HTML Document

Do comment if you have any doubts or suggestions on this JS HTMl topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading