Linking all three front-end languages - HTML, CSS, and JavaScript - makes your website look neater and more polished. The steps on how to include Javascript in HTML will be discussed in this tutorial.
You will get useful tips and understand where you should add your JavaScript in HTML documents. We will also show you how you can link separate JavaScript files to your HTML files. While you might need to create additional files, it is easier for your browser to display it that way. Also, you won't get lost in hundreds of lines of code.
Contents
JavaScript in HTML: Main Tips
- You should write long JavaScript codes in separate files, as dividing the code in portions makes it more readable.
- In HTML, you need to write your code between <script> and </script> tags. These tags define JavaScript code.
- It is suggested to only implement short JavaScript codes inside the <body> tag. Otherwise, the code can become hard to read.
- JavaScript file extension is
.js.
Inline JavaScript
There are two ways to include JavaScript in your HTML document. The first is by writing JavaScript code within <script> tags. The other is by including it via an external file. The latter one will be covered further down in this tutorial. Now, let's jump into inline JavaScript!
In <head>
First, we will see how you can include JavaScript in the HTML <head> tag. The example below shows a JavaScript myFunction() function, which is called by clicking a button, being placed in the <head> section.
When you click the button, a click event occurs, which dynamically inserts JavaScript defined content in the HTML. This is done by setting the paragraph's id and then targeting it with JavaScript upon click:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("example").innerHTML = "I love learning JavaScript!";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="example">What do I love?</p>
<button type="button" onclick="myFunction()">Answer!</button>
</body>
</html>In <body>
You can do the same kind of thing to write JavaScript in the HTML <body> tag. Our next example defines how JavaScript myFunction() function, which is called upon a button click, is placed in the <body> section.
When you click the button, a click event occurs and dynamically inserts JavaScript defined content in the HTML. This is again done by setting paragraph's id and then targeting it with JavaScript upon click:
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="example">What do I love?</p>
<button type="button" onclick="myFunction()">Answer!</button>
<script>
function myFunction() {
document.getElementById("example").innerHTML = "I love learning JavaScript";
}
</script>
</body>
</html>External JavaScript
You should only use inline JavaScript when writing just a few lines of code. In other cases, you should place your JavaScript code in a separate file and link it to your HTML file. The external script will behave the same way as it would when written in a <script> tag. Let's take a look.
Imagine you have a piece of JavaScript code like the one below. You should place it in a separate file. The file name can be anything you want, though the convention is to name it scripts. The file extension for JavaScript files is .js. Let's name the external JavaScript file for this piece of code myScript.js.
function myFunction() {
document.getElementById("example").innerHTML = "I love JavaScript!";
}Now, you have to link JavaScript to HTML. In the HTML document, within the <head> section, write a <script> tag and add a src attribute, setting it's value to the external file:
You can add multiple JavaScript files to your HTML file, too:
<script src="script.js"></script>
<script src="moreScripts.js"></script>Advantages of Such Usage
Placing scripts in external files has multiple advantages:
- If JavaScript files are cached in the web page, the loading can speed up.
- It is easier to manage your code when it's split up among seperate files.
- If you're using the same scripts in different HTML files, including an external file prevents repetitive code.
- It's considered good practice among developers to keep HTML, CSS and JavaScript code within their separate files.
External References
As you already know, external HTML scripts can be linked to webpages using the src attribute and setting its value to the external file's name:
<script src="https://www.bitdegree.org/js/exampleScript.js"></script>If the external JavaScript file is within a different folder than the HTML file, you have to indicate an entire path to the external file. A slash (/) is used to go up or out of the current folder into its parent folder.
The code snippet below indicates that the file exampleScript.js is in a folder named js, which is located in the same folder alongside the HTML document.
<script src="/js/exampleScript.js"></script>Now take a look at the example below. This is how it would look if the script were located in the same folder as HTML file:
<script src="exampleScript.js"></script>JavaScript in HTML: Summary
- You can include JavaScript code in your HTML document either by using inline or external methods.
- Inline JavaScript is placed either in the
<body>or<head>tags. - External JavaScript is written in a separate
.jsfile. The path to it is included in the HTML file (placed within<script>tag in the<head>section, usingsrcattribute). - Placing your scripts in a separate
.jsfile and linking it to your HTML file is good practice.