How to link/add javascript to HTML?

ByAnas Kiani

In this article, we will discuss how to link/add javascript to HTML. As we all know that javascript is an essential programming language and as web developers we often need to develop interactive, modern, dynamic, & user-friendly web applications.

Here are three methods listed below to link/add javascript to HTML:

  • Inline Javascript
  • Internal Javascript
  • External Javascript

1) Inline Javascript:

Inline javascript is the most simple & beginner-friendly method to write javascript inside the HTML. In this method the script tags are used before the closing body tags as shown in the code below:

<!DOCTYPE html>
<html>
<head>
    <title>Inline JavaScript Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        alert("Welcome to my website!");
    </script>
</body>
</html>

The code is very easy to understand for every developer. In the above code the script tags are used within the body tags and also at the end because when the page loads the HTML content loads first & javascript loads after HTML which improves the loading speed of the page.

2) Internal Javascript

The second method to write javascript inside the HTML is the internal javascript method which is also simple. In this method the script tags are placed in the head tags after the title tags as shown in the code below:

<!DOCTYPE html>
<html>
<head>
    <title>Internal JavaScript Example</title>
    <script>
        function greet() {
            alert("Hello, World!");
        }
    </script>
</head>
<body>
    <h1>Welcome</h1>
    <button onclick="greet()">Click me</button>
</body>
</html>

The above code is only suitable for small projects because we can not use this javascript in other pages of this project.

3) External Javascript:

In this method a separate javascript file is created such as script.js which can be used in other pages or components by writing the file path in src attribute of the script tags. The below code shows the use of this method:

First of all create a script.js file in which a greet function is written:

function greet() {
    alert("Hello, World!");
}

after creating a file link it with HTML document as shown below:

<!DOCTYPE html>
<html>
<head>
    <title>External JavaScript Example</title>
    <!-- Link to the external JavaScript file -->
    <script src="path/to/your/script.js"></script>
</head>
<body>
    <h1>Welcome</h1>
    <button onclick="greet()">Click me</button>
</body>
</html>

By using this method the javascript code can be reused.

Conclusion:

Hence in this article, we have learned how to link/add javascript to HTML. All methods discussed above are simple and straightforward inline method and internal method are for small projects & external javascript method can be used in large websites.

If you prefer to watch a video, here is a video that contains all the steps needed to link a javascript file to an HTML file.

Link JavaScript to HTML: How to run your JavaScript code in the browser

Similar Posts