How to add JavaScript to HTML
JavaScript is one of the most important languages today. It is a high-level, interpreted, lightweight programming language that makes web pages more interactive. It is a language of the web. JavaScript makes the web page alive by adding motion to it.
JavaScript is an object-based scripting language. JavaScript supports polymorphism, encapsulation, and inheritance. It does not require any compiler and runs in a web browser. Some of the most popular websites, like Facebook, Google, Amazon, Netflix, and Flipkart, use JavaScript to build their website. It is also used to make small-scale games.
It is known for creating beautiful web pages and applications. We can add JavaScript directly to HTML pages. With the help of HTML, JavaScript is executed. We cannot run JavaScript programs without the use of HTML.
There are three ways in which we can add JavaScript to HTML:
- Embedding JavaScript Code
- Inline Code
- External Code
Let us look at them one by one and understand:
1. Embedding JavaScript Code:
We use a dedicated HTML tag, <script> JavaScript Code </script> tag, to embed JavaScript code in HTML. We can place <script> tag inside the <head> section or in the <body> section of the HTML document.
To keep JavaScript code out of the main content, we place JavaScript code inside the <head> section.
Embedding code is the easiest way to add JavaScript to HTML.
Let us understand it with the help of examples.
Example 1:
We will place the JavaScript code inside the <head> section in this example. See the code below:
<!DOCTYPE html>
<html>
<head>
<title> JavaScript in Head </title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "JavaScript is my favourite programming language";
}
</script>
</head>
<body>
<h2> Adding JavaScript in Head </h2>
<p id="language"> Your favourite programming language. </p>
<button type="button" onclick="myFunction()"> Try it </button>
</body>
</html>
Output:
The output shows the heading, paragraph, and button.
When you click the button, JavaScript is executed, and the text is changed.
Example 2:
This example will put the JavaScript code inside the <body> section.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> JavaScript in Body </title>
</head>
<body>
<script>
let da = new Date();
document.body.innerHTML = "<h2> Today's date is " + da + "</h2>"
</script>
</body>
</html>Output:
Today’s date can be seen in the output below:
2. External Code:
When we have to write large JavaScript code in an HTML document, the code becomes difficult to read. To increase the readability of the code, we can keep large JavaScript code in a separate file and organize it.
The extension of JavaScript file is (.js). We can call the JavaScript file in the HTML document using the source, src attribute inside the <script> tag.
You can also use the same JavaScript file in another HTML document.
We will use the following code to link the external file to the HTML document:
<script scr="filename.js"> </script>
Example 1:
External JavaScript code:
document.write(" You are learning how to add an external JavaScript file to an HTML document. ")
alert(" This file is working. ")You can call link up this external JavaScript code in an HTML document using the <script> tag as shown in the code below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Adding External JavaScript Code to HTML </title>
</head>
<body>
<h2> External JavaScript Code </h2>
<script src="external.js"> </script>
</body>
</html>
Output:
Example 2:
External JavaScript code:
function sayHello() {
alert("External JavaScript code is executed.");
}
document.getElementById("btn").onclick = sayHello;You have to link the external JavaScript code to the HTML document, like this,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> External JavaScript File </title>
</head>
<body>
<h2> External JavaScript Code </h2>
<button type="button" id="btn"> Click here </button>
<script src="external2.js"></script>
</body>
</html>Output:
You can see the heading and a button in the output.
When you click on this button, external JavaScript is executed, and the message will appear on the screen as shown below:
Benefits of using an external JavaScript code in an HTML document:
- It separates HTML documents and JavaScript code.
- We can easily manage JavaScript files and HTML documents.
- The external JavaScript file is initially downloaded only once and stored in the browser’s cache. That’s why web page loading time is reduced.
- We can reuse the code.
- We can use the exact code in different HTML documents.
- It is a good practice to keep HTML, CSS, and JavaScript code in separate files.
Inline Code:
We can add JavaScript code directly to HTML by inlining the code. We can insert code inline using tag attributes like onload, onclick, etc.
Whenever you have to write small code, you can write inline code, but if the code is big, then do not keep the code inline as it reduces the readability of the code and makes it difficult to maintain.
Example 1:
We are using the onclick attribute to add inline code, like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Inline JavaScript Code </title>
</head>
<body>
<h2> Inline Code </h2>
<button onclick="alert('This code is working!')"> Click here </button>
</body>
</html>Output:
When you click the button, an alert message will appear on the screen.
Example 2:
<!DOCTYPE html>
<html>
<Title> Example of Inline Code </Title>
<body onload="myFunc()">
<h1> Example of Inline Code </h1>
<script>
function myFunc() {
alert("Page is loaded");
}
</script>
</body>
</html>Output:
When you load the page, an alert message will appear on the screen.
Browser Support:
It supports the following browsers:
- Google Chrome
- Internet Explorer
- Mozilla Firefox
- Opera
- Safari