2. JavaScript Where To

What you will learn

The three places JavaScript can be written
Why the position of a script matters
How defer helps
Why external files are best

1. Inside a script element

JavaScript goes between <script> and </script>. You can place it in the <head> or in the <body>.

Example

<p id="demo">Waiting...</p>

<script>
  document.getElementById("demo").textContent = "The script ran!";
</script>

Output (after the script runs)

The script ran!

Why position matters

The browser reads a page from top to bottom. If a script runs before the element it wants has been created, it cannot find it.

Example: this does not work

<script>
  // The paragraph does not exist yet at this point.
  var p = document.getElementById("demo");
  p.textContent = "Hello";   // Error: p is null
</script>

<p id="demo">Waiting...</p>

Two common fixes: put the script after the elements (usually just before </body>), or use the defer attribute with an external file, shown below.

2. In an external file

For real websites, put JavaScript in its own file, such as app.js, and link it with the src attribute. The file contains only JavaScript, with no <script> tags.

HTML file

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

app.js file

document.getElementById("demo").textContent = "Loaded from an external file";

Why external files are best

One file can be shared by many pages.
HTML stays clean and readable.
Browsers can cache the file, so later pages load faster.

The defer attribute

With defer, the browser downloads the script while it reads the page, then runs it after the whole page has been built. That means you can safely put the link in the <head>, and your script can find every element.

Attribute	Behaviour
none	Stops the page while the script downloads and runs
`defer`	Downloads in the background, runs after the page is ready, and keeps scripts in order
`async`	Downloads in the background and runs as soon as ready, in any order

For most of your own scripts, defer is the best choice.

3. Inside an HTML attribute (older style)

You can place a little JavaScript directly in an event attribute such as onclick.

Example

<p id="demo">Not clicked yet.</p>
<button type="button" onclick="document.getElementById('demo').textContent = 'Clicked!'">Click me</button>

Output (before clicking)

Not clicked yet.

This works, but it mixes behaviour into the HTML and gets messy fast. Prefer addEventListener in a script, as you saw in the last lesson. Many sites also block inline JavaScript for security.

The Try it Yourself editor cannot load external files, so examples that link app.js are shown for reading and copying only. On your own computer they work normally.

If JavaScript is switched off

The <noscript> element shows content only when scripts cannot run:

Syntax

<noscript>Please turn on JavaScript to use this feature.</noscript>

Common mistakes

Running a script before the element it needs exists.
Putting <script> tags inside a .js file.
A wrong file path in src, so the script never loads.
Writing code between the tags of a script that also has a src. When src is present, the code between the tags is ignored.

Exercise

This script does not work, because it runs before the paragraph exists. Fix it by moving the script to the right place.

Show solution

<p id="demo">Waiting...</p>

<script>
  document.getElementById("demo").textContent = "It works!";
</script>

Knowledge check

1. Which attribute links an external JavaScript file?

src

2. What does defer do?

It runs the script after the page has been built, without blocking it.

3. Why are external files better than long inline scripts?

They are reusable, keep HTML clean, and can be cached by the browser.

Summary

JavaScript can sit in a <script> element, in an external file, or in an event attribute.
Scripts must run after the elements they use exist.
Use external files with defer for real websites.