Where to Write JavaScript

You will be able to choose where JavaScript should live in a web page: inline in an HTML attribute, inside a script block, or in an external file.

What it is

JavaScript is code that runs in the browser. It can be attached to HTML in three common places:

• Inline JavaScript: a small expression placed inside an HTML attribute such as onclick.
• Script block: JavaScript written directly inside a <script> element in the HTML file.
• External file: JavaScript saved in a separate .js file and loaded with <script src="app.js"></script>.

Related terms include event handler, DOM, module, defer, and async.

Why it matters

• External files keep HTML, CSS, and JavaScript separated, making projects easier to read.
• External files can be reused across many pages.
• Browsers can cache external JavaScript files, which can improve repeat visits.
• Script blocks are useful for small page-specific setup.
• Inline JavaScript is quick for tiny tests but hard to maintain.

Syntax or steps

1. For a tiny one-off action, put code in an HTML attribute: onclick="console.log('clicked')".
2. For page-specific code, add a <script> block near the end of <body>.
3. For reusable code, create a file such as app.js and load it with <script src="app.js"></script>.

Example

<!doctype html>
<html>
<head>
  <title>Where to Write JavaScript</title>
</head>
<body>
  <button onclick="console.log('Inline JavaScript')">Inline</button>

  <script>
    console.log("Script block JavaScript");
  </script>

  <script src="app.js"></script>
</body>
</html>

Create app.js in the same folder:

console.log("External JavaScript");

The inline code runs when the button is clicked. The script block runs when the browser parses it. The external file runs after the browser loads app.js.

Common mistakes

• Putting large logic inline. Fix: move it to a script block or external file.
• Forgetting the closing </script> tag. Fix: always close script blocks.
• Using the wrong file path. Fix: check that src="app.js" points to the real file location.
• Running code before the page elements exist. Fix: place scripts near the end of <body> or use defer.

When to use it

Practice

Guided exercise: Create an HTML file with a button that logs Inline works when clicked, then add a script block that logs Script block works when the page loads.

Challenge: Move the script block code into app.js and load it with <script src="app.js"></script>.

Expected output: The page logs the script block or external message on load, and logs the inline message when the button is clicked.

Quick check

Which place is usually best for reusable JavaScript in a real project?

An external .js file loaded with <script src="app.js"></script>.

Summary

JavaScript can live inline, in a script block, or in an external file. External files are the normal choice for real projects because they are reusable, cacheable, and easier to maintain.