JavaScript — Where To

Three homes for JavaScript

1. Between `<script>` tags

<script>
    function sayHello() {
        alert("Hello!");
    }
</script>

Inline code lives right inside the HTML page.

2. In `<head>` — with a caveat

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

Head scripts download and run before the page renders. A script that touches page elements here finds… nothing yet:

// app.js loaded from <head>
document.getElementById("demo");   // null — <p id="demo"> doesn't exist yet!

Classic first-week bug: "my script can't find my element."

Fixes, best first:

<!-- defer: download early, run AFTER document is parsed -->
<script src="app.js" defer></script>

head + defer = fastest loading AND elements exist.
This is the modern default for site-wide scripts.

3. Before `</body>` — the simple classic

<body>
    <h1 id="demo">Page</h1>

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

By the time this script runs, everything above it exists. Zero surprises; slightly slower start for big files than defer.

External files — the professional default

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

Benefit	Detail
Caching	Downloaded once per user, reused across pages
Reuse	Same script serves ten pages
Maintainability	JS code lives in JS files, not tangled in markup
Cleanliness	No quote-escaping gymnastics

Note: external scripts still need a closing tag: <script src="app.js"></script> — self-closing syntax silently fails.

Multiple scripts run in order:

<script src="utils.js" defer></script>
<script src="app.js" defer></script>   <!-- waits for utils.js -->

defer preserves order; async runs each the moment it arrives (order unpredictable) — use only for independent scripts like analytics.

Inline event handlers — know them, then avoid them

<button onclick="sayHello()">Hi</button>

Works everywhere and fills old tutorials — but mixes behavior into markup. The scalable pattern:

<button id="hello-btn">Hi</button>

<script>
    document.getElementById("hello-btn")
            .addEventListener("click", sayHello);
</script>

HTML stays declarative; JS owns behavior; one listener setup handles any button.

Placement decision table

Situation	Choice
Site-wide app logic	`<head>` + `defer`
Quick page experiment	bottom of `<body>`
Third-party analytics	`async` in head
Tiny demo/learning	inline `<script>` block

Mini Practice

Put a getElementById script in <head> — witness the null
Fix it with defer; verify
Move the script to end-of-body as an alternative fix
Split code into two files; confirm execution order with logs
Convert an onclick attribute to addEventListener

Next: output → (already written)

Frequently Asked Questions about Where To

What is Where To in JavaScript?

Where To is a fundamental concept in JavaScript. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Where To?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Where To.

Why is Where To important in JavaScript?

Where To is essential for JavaScript development. Understanding this concept will help you write better code and solve real-world problems more effectively.