How to Link JavaScript File to a Separate HTML File?
Last Updated :
24 May, 2025
Linking a JavaScript file to an HTML document creates a connection that enables the execution of JavaScript code within the webpage. This is commonly achieved using the <script> tag in the HTML file, where the src attribute specifies the path to the external JavaScript file. Approximately 90% of modern websites use JavaScript to enhance interactivity and functionality, making this linking process a fundamental part of web development.
1. Using src attribute in script Tag
We use the src attribute within the <script> tag in the HTML file to specify the source file (JavaScript) location. The external JavaScript file is then linked to the HTML document, enabling the execution of its code.
Syntax:
<script src="js-file-name"></script>
Example: The below example uses the src attribute in <script> Tag to link the javascript file to a separate HTML file.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Link JavaScript file
to a separate HTML file
</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Using src attribute in
<script> Tag
</h3>
<button onclick="h1ChgFn()">
Change Heading
</button>
<script src="script.js"></script>
</body>
</html>
// script.js
function h1ChgFn() {
let heading1 = document.querySelector('h1');
heading1.textContent = 'GFG';
}
Output:
2. Using ECMAScript Modules
This approach uses ECMAScript Modules to link a JavaScript file to an HTML document. The import statement in the JavaScript file specifies the module's path. This method allows for cleaner and more organized code.
Syntax:
import { functionName, variableName } from './file.js';Example: The below example uses the ECMAScript Modules to link the javascript file to a separate HTML file.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Link JavaScript using ECMAScript Modules</title>
</head>
<body>
<script type="module">
import { initialize } from './script.js';
initialize();
</script>
</body>
</html>
// script.js
let headingColor = 'green';
export function initialize() {
document.addEventListener('DOMContentLoaded', function () {
let heading1 = document.createElement('h1');
heading1.textContent = 'GeeksforGeeks';
heading1.style.color = headingColor;
document.body.appendChild(heading1);
let heading3 = document.createElement('h3');
heading3.textContent = 'Using ECMAScript Modules';
document.body.appendChild(heading3);
let button = document.createElement('button');
button.textContent = 'Change Color';
button.addEventListener('click', function () {
changeColor(heading1);
});
document.body.appendChild(button);
});
}
function changeColor(element) {
headingColor = headingColor === 'green' ? 'red' : 'green';
element.style.color = headingColor;
}
Output:
Similar Reads
How To Save Text As a File in HTML CSS and JavaScript? In this tutorial, we will learn how to save user input as a text file using HTML, CSS, and JavaScript. This can be particularly useful for web applications where users need to download their input or notes as a file.Project PreviewWe will build a simple web page that allows users to enter text in a
2 min read
How to Create a Link in JavaScript ? In JavaScript, a link typically refers to creating HTML hyperlinks (<a> tags) dynamically using JavaScript. You can link using a document.createElement('a'), setting attributes like href and textContent, and then appending it to the document with appendChild().Here are some common approaches t
4 min read
How to share code between files in JavaScript ? JavaScript is a powerful and popular programming language that is widely used for web development. One of the key features of JavaScript is its ability to share code between files. This can be useful for organizing large projects, reusing code, and maintaining code quality. In this article, we'll se
6 min read
How to define a client-side script in HTML5 ? To define a client-side script in HTML5, we can do <script> tag or adding external script file by src attribute to the HTML file. <script> tag contains the JavaScript to be added for the client-side scripting. Syntax: <script> // JavaScript goes here console.log('GeeksforGeeks');
1 min read
How To Include a JavaScript File in Another JavaScript File? The import and export syntax available in ES6 (ECMAScript 2015) module is used to include a JavaScript file in another JavaScript file. This approach is the most modern and recommended way to share code between JavaScript files.It allows you to break your code into smaller modules and then import th
4 min read