Episode 5 of 46

Where to Put Your JavaScript

Learn the three places you can add JavaScript to your web pages: inline, internal, and external.

There are three ways to add JavaScript to an HTML page, similar to how CSS can be inline, embedded, or external.

1. Inline JavaScript

Directly on an HTML element using event attributes:

<button onclick="alert('Clicked!')">Click Me</button>

Avoid this — it mixes behaviour with content and is hard to maintain.

2. Internal JavaScript

Inside a <script> tag in your HTML file:

<body>
    <h1>My Page</h1>

    <script>
        console.log("Hello from internal JS!");
        let name = "Alice";
        alert("Welcome, " + name);
    </script>
</body>

3. External JavaScript (Recommended)

Create a separate .js file and link it:

// app.js
console.log("Hello from external JS!");
let name = "Alice";
alert("Welcome, " + name);

<!-- In your HTML -->
<body>
    <h1>My Page</h1>
    <script src="app.js"></script>
</body>

Where to Place the Script Tag

Bottom of <body> (recommended) — ensures HTML loads before the script runs
In <head> with defer — loads the script in parallel but runs it after HTML parses

<head>
    <script src="app.js" defer></script>
</head>

For this course, we'll use external JavaScript files placed at the bottom of the <body>.