Adding JavaScript to HTML

JavaScript makes pages interactive. It's attached with the <script> element — inline or from a file — and the attributes you choose decide when it downloads and runs. This lesson covers the options and how scripts interact with your HTML.

Inline and external scripts

<title>App</title>
<script src="js/app.js" defer></script>

For anything beyond a few lines, use an external file: it can be cached, shared between pages and kept separate from your HTML. A <script> with a src must be empty — code between its tags is ignored.

When scripts run: defer, async and module

By default the browser stops building the page when it reaches a script, downloads it, runs it, then continues. That slows the page down, and a script in the head can't find elements that come later. The defer, async and type="module" options fix this:

<title>Scripts</title>
<script src="js/app.js" defer></script>
<script src="https://analytics.example.com/tag.js" async></script>
<script type="module" src="js/main.js"></script>

The modern recommendation: put scripts in the head with defer (or type="module"). Placing a plain script at the very end of <body> also works and is common in older code.

Reacting to the page

Scripts find elements by id, class or CSS selector, listen for events and change the page. That's the subject of the JavaScript course — especially the DOM and events lessons.

Inline event handlers

You'll often see handlers written as attributes, like onclick="…". They work, but they mix behaviour into markup, only allow one handler per event, and are blocked by strict Content Security Policies. Prefer addEventListener in a script file, as above.

noscript

<noscript>
  <p>This calculator needs JavaScript. You can <a href="/rates.pdf">download our rate table</a> instead.</p>
</noscript>

<noscript> content only appears when scripting is disabled or blocked. Better still is progressive enhancement: build pages so the core content and forms work with plain HTML, then let JavaScript improve the experience.

Data for scripts

Scripts can read data you put in HTML — data-* attributes, or a JSON block that the browser doesn't execute:

A script with an unknown type (like application/json) is treated as inert data.

Security notes

• Third-party scripts run with full access to your page. Only include scripts you trust, from reputable sources.
• For scripts from CDNs, the integrity attribute (Subresource Integrity) lets the browser verify the file hasn't been tampered with: <script src="…" integrity="sha384-…" crossorigin="anonymous">.
• Never insert untrusted text into the page as HTML from a script — use textContent.

Try it yourself