Adding JavaScript to HTML

Before JavaScript can do anything, the browser must load and run it. There are several ways to include scripts — and small details like defer decide whether your page feels fast or broken. This chapter covers every placement method and the production-ready setup.

Method 1: inline event attribute (avoid)

<button onclick="alert('Hi')">Click</button>

It works, but logic lives inside your markup, cannot reuse handlers, and is hard to test. Use it only for quick experiments.

Method 2: internal script

<head>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      console.log('Page ready');
    });
  </script>
</head>

Fine for one-page demos, but every page that needs the logic must repeat the block, and the browser cannot cache it.

Method 3: external script (the winner)

<body>
  <button id="btn">Click me</button>
  <script src="/js/main.js"></script>
</body>

// /js/main.js
const btn = document.getElementById('btn');
btn.addEventListener('click', () => alert('It works!'));

Expected output: clicking the button shows an alert — logic in its own file, cached by the browser, reusable across pages.

Placement and loading: none, async, defer

A plain <script> in <head> is render-blocking: the browser stops parsing HTML to download and run the file. The two attributes fix that:

<head>
  <link rel="stylesheet" href="/css/styles.css">
  <script src="/js/main.js" defer></script>  <!-- recommended -->
</head>

With defer: the page renders while the script downloads, the DOM is fully parsed before your code runs, and scripts execute in order — all three properties you want.

DOMContentLoaded: the safe starting gun

Scripts with defer (and scripts at the end of <body>) run after the HTML exists. If you must run earlier, wait for the event:

document.addEventListener('DOMContentLoaded', () => {
  // Safe: every element below exists now
  const title = document.querySelector('h1');
  console.log(title.textContent);
});

Expected output: the heading's text — instead of the TypeError you get when querying elements before they are parsed.

Modules preview

Modern JavaScript splits code across files using ES modules — one script declaration powers both loading and importing:

<script type="module" src="/js/app.js"></script>

type="module" implies defer, enables import/export syntax, and runs in strict mode automatically. The full system is chapter 23.

Best-practice production setup

1. One external entry file (or a few), linked with defer (or type="module").
2. Root-absolute paths: src="/js/main.js" — relative paths break on nested URLs (the same trap as CSS stylesheets).
3. Wrap DOM work in DOMContentLoaded (or use defer, which guarantees it).
4. Minify and bundle before deploying; keep source files readable while developing.

Common mistakes

• Script in <head> without defer — white screen until the file downloads, and DOM queries fail because nothing is parsed yet.
• Relying on async for dependent code — with order not guaranteed, app.js may run before helpers.js.
• Querying elements that do not exist yet — querySelector returns null and the next line throws.
• Duplicate ids and double-binding — attaching the same handler twice doubles your logic; check for repeated addEventListener calls.

Practice checklist

1. Move an inline onclick into an external file; confirm it still works.
2. Put a query at the top of a head script without defer, watch it fail — then fix it with defer.
3. Compare Network-tab load order with and without defer.

With the plumbing in place, it is time for real syntax — starting with Variables: let, const & var.