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.
- Inline: inside an HTML element using the “onclick” attribute or other event attributes.
- 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.
- 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:
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