How to Add JavaScript to HTML (3 Easy Methods)
Do you want to run JavaScript code but don’t know how to add JavaScript to HTML? Don’t worry, this tutorial will teach you everything about that in detail. It’s very easy and we have 3 different ways to do this. I'm going to explain all those methods in this tutorial with code examples and tips. So, let’s begin.
JavaScript is the language that requires the support of HTML to run its scripts. We also call it a scripting language. We use js to convert static HTML websites to modern ones. JavaScript does a lot of wonders for web developers and provides a lot of flexibility.
It is the first step in your JavaScript journey. Now, let’s go to the main topic.
How to Add JavaScript to HTML
There are three ways to add JavaScript to HTML documents. And these are the only ways that we can use to link js to HTML. But all these methods have their own pros and cons. You’re probably thinking why three methods? Don’t worry, we’ll tell you that in each step.
The methods to insert js to HTML are the following:
- #1: Add JavaScript to the HTML header
- #2: Add JavaScript to the HTML body
- #3: You can Add JavaScript External file to HTML
Now, let’s see how to use these methods in detail.
Method #1: How to Add JavaScript to HTML Header
To add JavaScript in the HTML header we use <script> tags. Just add <script> tags between <head> tags of HTML. But at the bottom right before the closing </head> tag. And all the JavaScript code will come inside these script tags. Just see lines no. 8 to 11 in the code example below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Tutorials</title>
<script>
var greetings = "Hi, What's up!";
window.alert(greetings)
</script>
</head>
<body>
<h2> Add JavaScript to HTML Example</h2>
</body>
</html>
In the above code, I used a pair of script tags and wrote two lines of code to check if JavaScript is working or not. If you copy-paste the code in your HTML document. And after saving the file open it in your browser. You will see the pop-up alert as shown below.
As you saw this was the first method for adding JavaScript to HTML and this was easy. But why use this, instead of other methods?
Why Use this Method?
The pros and cons of using this method are the following:
- The first reason that makes it useful is that you don’t have to create a lot of js files. You can simply write your whole js code in HTML.
- It’s good if you’re learning JavaScript.
- The downside of using this method is that it slows your HTML webpage. It also increases the size of your HTML document. That’s why I do not recommend it.
- In some cases, it is useful and in some cases, it is not.
Now, let’s see the second method.
Method #2: How to Add JavaScript to HTML Body
To add JavaScript in the HTML body, we use the same <script> tags. But not inside the HTML header, we use it inside the <body> tags right before the closing </body>.
As you can see in the code example below, we placed JavaScript code in the body of the HTML. Just look at lines no. 13 to 16 in the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Tutorials</title>
</head>
<body>
<h2> Add JavaScript to HTML Example</h2>
<script>
var greetings = "Hi, What's up!";
window.alert(greetings)
</script>
</body>
</html>
In the code example above, I used the same <script> tags with the same two lines of code as above. I placed it right before closing </body> tags. The code output is the same and JavaScript is working as you can see below.
Why Use this Method?
The benefits of using JavaScript in the body of HTML are the following:
- It speeds up the HTML page a little bit.
- It loads after the DOM.
Tip: You can use scripts in the header and body of HTML both at the same time.
Now, let’s see the third method.
Method #3: How to Add External JavaScript to HTML
To include external JavaScript in HTML, we first create a js file and then link it to HTML. This is the best and recommended method to use JavaScript for HTML web pages. Because by using this method you can avoid the slow loading of web pages.
Let’s see how to do this.
First, create a JavaScript file in your text editor. This will look like the as below in your text editor with filename and (.js) extension. All JavaScript files have (.js) extensions.
After creating a JavaScript file, go to HTML and add <script> tags at the bottom of <head> tags with the src attribute. And inside the src (source) attribute use your JavaScript file name with its extension. As shown in the code below. Just see line no. 8 in the code below.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Tutorials</title> <script src="test.js"> </script> </head> <body> <h2> Add JavaScript to HTML Example</h2> </body> </html>
Note: When we link external JavaScript files to HTML, then <script> tags always remain empty because we write code in separate JavaScript files. But it is crucial to specify the src attribute and provide the source otherwise JavaScript will not work.
Remember, we don’t use <script> tags in the external JavaScript files.
Below is the external JavaScript file (test.js). I used the same code again. You can copy-paste the code and then see if is it working or not.
var greetings = "Hi, What's up!";
window.alert(greetings)
The result will be the same. And the code is working.
The best thing about this is, you can use several scripts in one HTML document. To do this, just add scripts inside the head section of HTML one by one as shown below.
<script src="test.js"> </script> <script src="scripts.js"> </script> <script src="functions.js"> </script>
Sometimes, third-party tools like font-awesome, bootstrap, google analytics, etc. want their scripts to add to your HTML document. Those are also external javascript files hosted somewhere else. Then, this method also helps in that way. You can just copy-paste the script for that.
Why Use this Method?
The benefits of using external JavaScript files are the following:
- You can use several JavaScript files on one webpage.
- By using an external js file, HTML and JavaScript code remains separate. Due to this, it reduces the HTML file size and speeds up your site.
- The code will be easier to read and manage.
- You can cache js files to further speed up your HTML site.
That’s it. This is the end of this tutorial. Hope you understood well. If you have any questions related to this topic then feel free to ask in the comment section below.
In our next JavaScript tutorial, you will learn to create JavaScript Hello World Program.
Lastly, if you’re new to JavaScript then you should start with what is JavaScript.
Topic: JavaScript
