Link external JavaScript file in HTML

Post Views: 406

In this article, we will see how to link external JavaScript (js) file in HTML.

We can link an external JavaScript file to an HTML document to separate our JavaScript code from your HTML content. This makes our code more organized and maintainable. This is a common practice in Web Development.

Now, have a look at the steps below to link an external js file in HTML.

Create the HTML Structure

First of all, we have to create an HTML file then in that file, we need to create a basic structure of an HTML document where we want to use our JavaScript file.

Here is an example of a basic HTML template

<!DOCTYPE html>
<html>
<head>
    <title>External JavaScript Example</title>
</head>
<body>
    <h1>Click the button to greet:</h1>
    <button onclick="greet()">Greet Me</button>
</body>
</html>

In the above HTML code, I have created a heading and a button that will display when we open this HTML file in a web browser.

Now, when we click the button, it will try to execute a JavaScript function called greet() that I have declared into another external JavaScript file.

If we click the Greet me button it will not work here, because I have not linked that external JavaScript file in the above HTML code. That means the above HTML code has no functionality to Greet.

Create a JavaScript (js) file

Now, we need to create a separate JavaScript file (script.js) that we want to link to the above HTML code. This file can contain functions, variables, or any JavaScript code we want to run on our webpage.

Example

function greet () {
    alert("Hey! Welcome to CodeSpeedy")
}

In the above program, I have defined a function called greet(), this function will execute when we click the Greet me button and show a pop-up alert with the message”Hey! Welcome to CodeSpeedy“.

File structure

The project file structure should look like below.

Link the JavaScript file in the HTML code

We can link the external JavaScript file to our HTML document by using the <script> tag in the <head> or at the end of the <body>.

Syntex

<script src="file name or path of file"></script>

Here is an example to link the JavaScript file in the <head> section in an HTML document (this is the recommended approach).

<!DOCTYPE html>
<html>
<head>
    <title>External JavaScript Example</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Click the button to greet:</h1>
    <button onclick="greet()">Greet Me</button>
</body>
</html>

In the above code, I have linked the JavaScript file (script.js), there is a function called greet(). When we click the “Greet Me” button the greet() function will execute and display an alert with the message “Hey! Welcome to CodeSpeedy“.

Output:

Place the JavaScript file at the End of the <body>

We can also place the <script> tag at the end of the <body> just before the closing </body> tag. We basically do this to improve page loading performance, especially for larger websites.

<!DOCTYPE html>
<html>
<head>
    <title>External JavaScript Example</title>
</head>
<body>
    <h1>Click the button to greet:</h1>
    <button onclick="greet()">Greet Me</button>

  <script src="script.js"></script>
</body>
</html>