Adding JavaScript to HTML

There are three ways to put JavaScript on a page. They work like the three ways to add CSS.

1. Inline

JavaScript written in an HTML attribute.

1

<button onclick="console.log('Clicked')">Click me</button>

It works, but it mixes behaviour into the HTML and gets messy fast. You will see it in older code and quick demos. Prefer the other two.

2. Internal

JavaScript inside a <script> element.

1
2
3
4

<p id="out"></p>
<script>
  document.querySelector("#out").textContent = "Written inside the page";
</script>

Good for small demos, and every example in this course uses it so you can see the HTML and the script together.

3. External

JavaScript in its own file, linked with src.

1

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

1

console.log("Loaded from a file");

One file can be shared by every page, and the browser can cache it. This is the right choice for real websites.

Where does the script tag go?

A script can only see elements that already exist. If it runs before the HTML below it is read, document.querySelector() finds nothing. There are two good solutions:

• Put the <script> at the end of the <body>, or
• Put it in the <head> with the defer attribute. The file downloads while the page loads, and runs after the HTML is parsed.

For most pages: defer, or type="module".