javascript

External JavaScript Files

Learn how to link and use external JavaScript files in your web projects. Understand the benefits of separation, reusability, and efficient loading techniques like async and defer.

11 min read 8 sections Tutorial

When you write JavaScript code, you can put it directly inside your HTML file. But for bigger projects, this makes your HTML messy and hard to manage. Instead, you can put your JavaScript code into separate files. These are called **external JavaScript files**. Using external files helps keep your code organized, makes it easier to reuse, and can even make your website load faster. This tutorial will show you exactly how to do it.

External JavaScript Files

An external JavaScript file is a plain text file that contains only JavaScript code. It has a .js ending, like script.js or app.js. You link this file to your HTML page using a special HTML tag.

This method is the standard way to include JavaScript in modern web development. It makes your projects much cleaner and easier to work with, especially as they grow larger and more complex.

What is an External JavaScript File?

An external JavaScript file is a separate .js file that holds your JavaScript code. You connect it to your HTML page using the <script> tag with a src attribute.

Code Organization

Keeps your JavaScript separate from HTML and CSS, making your project folders neat and easy to navigate.

Reusability

You can use the same JavaScript file on many different HTML pages without copying the code.

Faster Loading

Browsers can store (cache) external files, so they only download them once, speeding up repeat visits.

Maintainability

When you need to change JavaScript, you only edit one file, and the changes apply everywhere it's used.

Linking Your First External File

Getting Started

Linking Your First External File

To link an external JavaScript file, you use the <script> HTML tag, but you add a special src attribute. The src attribute tells the browser where to find your JavaScript file. It works just like the src attribute for images or the href attribute for CSS.

You place this <script> tag inside your HTML file. When the browser sees it, it stops what it's doing, goes to find that .js file, downloads it, and then runs all the JavaScript code inside it.

htmlConnecting an HTML page to an external JavaScript file

1<!-- index.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>My Web Page</title>
8</head>
9<body>
10    <h1>Welcome!</h1>
11
12    <!-- This script tag links to our external JavaScript file -->
13    <!-- The 'src' attribute points to the file's location -->
14    <script src="script.js"></script>
15</body>
16</html>
17
18// script.js (this is a separate file)
19console.log('Hello from the external JavaScript file!'); // This message will appear in the browser console
20
21alert('The external script is running!'); // This alert box will pop up

Script Location Matters

If your JavaScript code tries to change something on the HTML page (like an element with an id), the <script> tag must be placed after that HTML element. Otherwise, the JavaScript runs too early and cannot find the element. A common practice is to put scripts just before the closing </body> tag.

How the Browser Loads External Scripts

When a browser reads your HTML file and finds a <script src="..."></script> tag, it immediately pauses. It stops building the rest of the HTML page. First, it downloads the JavaScript file from the internet.

Once the file is downloaded, the browser runs all the code inside it. Only after the JavaScript finishes running does the browser continue building the rest of your HTML page. This is important because a slow script can make your page appear blank for a long time.

htmlSeeing the order of execution

1<!-- index.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <title>Script Order</title>
7</head>
8<body>
9    <h1 id="page-title">Loading...</h1>
10    <p>This text appears before the script runs.</p>
11
12    <!-- The browser pauses here to fetch and run script.js -->
13    <script src="script.js"></script>
14
15    <p>This text appears after the script has finished running.</p>
16</body>
17</html>
18
19// script.js (separate file)
20// This script will change the heading text
21const titleElement = document.getElementById('page-title');
22titleElement.textContent = 'Page Loaded!';
23
24// It will also simulate a delay (DO NOT do this in real projects!)
25// This delay will make the page appear stuck for 2 seconds
26const startTime = new Date().getTime();
27while (new Date().getTime() < startTime + 2000) {
28    // do nothing, just wait
29}
30
31console.log('Script finished executing!');

✗ BadBad: Inline script blocking

<!DOCTYPE html>
<html>
<head>
    <title>Inline Block</title>
</head>
<body>
    <h1>Page Title</h1>
    <script>
        // Long running script directly here
        const startTime = new Date().getTime();
        while (new Date().getTime() < startTime + 2000) {}
        console.log('Inline script done');
    </script>
    <p>This text appears after a delay.</p>
</body>
</html>

✓ GoodBetter: External script

<!DOCTYPE html>
<html>
<head>
    <title>External Script</title>
</head>
<body>
    <h1>Page Title</h1>
    <!-- Script is in a separate file -->
    <script src="script.js"></script>
    <p>This text appears after a delay.</p>
</body>
</html>

// script.js
const startTime = new Date().getTime();
while (new Date().getTime() < startTime + 2000) {}
console.log('External script done');

Script Placement: head vs. body

Where you put your <script> tag in the HTML file affects when the JavaScript code runs. There are two main places: inside the <head> section or at the end of the <body> section.

Placing scripts in the <head> means they run very early, before any of your page content is even shown. Placing them at the end of the <body> means they run after all your HTML content has been loaded and displayed. Each placement has its own benefits and drawbacks.

Scripts in the <head>

Scripts at the end of <body>

Scripts in the <head>

<!DOCTYPE html>
<html>
<head>
    <title>Head Script</title>
    <!-- Script here runs before page content is visible -->
    <script src="head-script.js"></script>
</head>
<body>
    <h1>Page Content</h1>
    <p>Some text.</p>
</body>
</html>

// head-script.js
console.log('Script in head started');
// If this script tries to access <h1>, it might not exist yet
// document.getElementById('some-id').textContent = 'Changed'; // ❌ Error if element not loaded
console.log('Script in head finished');

Scripts at the end of <body>

<!DOCTYPE html>
<html>
<head>
    <title>Body Script</title>
</head>
<body>
    <h1>Page Content</h1>
    <p>Some text.</p>
    <!-- Script here runs after all page content is visible -->
    <script src="body-script.js"></script>
</body>
</html>

// body-script.js
console.log('Script in body started');
// Now it's safe to access page elements
document.querySelector('h1').textContent = 'Content Ready!';
console.log('Script in body finished');

<!DOCTYPE html>
<html>
<head>
    <title>Head Script</title>
    <!-- Script here runs before page content is visible -->
    <script src="head-script.js"></script>
</head>
<body>
    <h1>Page Content</h1>
    <p>Some text.</p>
</body>
</html>

// head-script.js
console.log('Script in head started');
// If this script tries to access <h1>, it might not exist yet
// document.getElementById('some-id').textContent = 'Changed'; // ❌ Error if element not loaded
console.log('Script in head finished');

<!DOCTYPE html>
<html>
<head>
    <title>Body Script</title>
</head>
<body>
    <h1>Page Content</h1>
    <p>Some text.</p>
    <!-- Script here runs after all page content is visible -->
    <script src="body-script.js"></script>
</body>
</html>

// body-script.js
console.log('Script in body started');
// Now it's safe to access page elements
document.querySelector('h1').textContent = 'Content Ready!';
console.log('Script in body finished');

Best Practice: Place Scripts at the End of <body>

For most of your JavaScript code that interacts with your page content, place the <script> tag just before the closing </body> tag. This ensures that all HTML elements are loaded and ready before your JavaScript tries to use them. It also makes your page appear faster to the user.

Using defer and async Attributes

The default behavior of scripts (pausing HTML parsing) can make your website feel slow. To fix this, you can add special attributes to your <script> tag: defer and async. These attributes tell the browser to download the script without stopping the HTML parsing.

This means your user sees the page content much faster. The JavaScript will still run, but it won't block the display of your page.

Understand the Default Behavior

Without async or defer, the browser stops rendering HTML, downloads the script, and then executes it. This is called parser blocking.

htmlUnderstand the Default Behavior

1<script src="blocking-script.js"></script>

Use `async` for Independent Scripts

The async attribute tells the browser to download the script in the background while still parsing HTML. The script will execute as soon as it's downloaded, even if HTML parsing isn't finished. Use async for scripts that don't depend on other scripts or the HTML structure, like analytics or ads.

htmlUse `async` for Independent Scripts

1<script src="analytics.js" async></script>

Use `defer` for Dependent Scripts

The defer attribute also downloads the script in the background. However, it guarantees that the script will execute after the HTML parsing is complete and in the order they appear in the HTML. Use defer for scripts that need the full HTML page to be ready or depend on other deferred scripts.

htmlUse `defer` for Dependent Scripts

1<script src="main-app.js" defer></script>

Loading Heavy Scripts Without async or defer

If you have a very large JavaScript file (like a big library) and you link it without async or defer in the <head>, your users will see a blank screen for a long time. The browser will be busy downloading and running that script before it can even show any part of your webpage. Always consider using defer or async for better user experience.

Script Tag Attributes Reference

Attribute	Download Behavior	Execution Behavior	When to Use
None (default)	Blocks HTML parsing	Immediately after download	Small, critical scripts in `<body>` that need to run right away.
`async`	Does not block HTML parsing	As soon as downloaded (can be before HTML is fully parsed, out of order)	Independent scripts (analytics, ads) that don't rely on DOM or other scripts.
`defer`	Does not block HTML parsing	After HTML is fully parsed, in order of appearance	Scripts that depend on the DOM or other scripts, for better page load performance.

Test Your Knowledge

Quick Check

Which HTML tag is used to link an external JavaScript file?