Loading...

JavaScript Where To

You already know JavaScript adds behavior. The next question is practical: where does the code live so the browser finds it, and so the page elements you want to change already exist?

Where should you put JavaScript in an HTML page?

Put JavaScript inside a <script> element — either inline between the tags, or external with a src pointing at a .js file. For everyday beginner work that touches the page, place the script just before the closing </body> so the HTML above it is ready. When the code grows, move it to an external file and keep that same end-of-body habit (or learn defer later).

Three placement choices at a glance

📊 Where JavaScript can live

Choice Where it sits Best beginner use
Inline in the head <script> inside <head> Tiny setup only; risky if you touch elements that are not in the page yet
Inline at end of body <script> just before </body> Default for short demos that change headings or text
External .js file <script src="app.js"> (often end of body) Default once logic grows or you reuse the file

Script in the head (know it, use carefully)

A script in the head runs early, while the browser is still reading the document. That can delay visible content. If your code immediately looks for an element with getElementById, that element may not exist yet — the call fails or returns null.

Script in the head

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Head</title>
<script>
console.log("Head script ran early");
</script>
</head>
<body>
<h1>Content comes after the head script</h1>
</body>
</html>

When a head script is fine

  • Logging a message or setting a simple value that does not need the DOM
  • Loading a library with modern attributes (you will meet defer / async later)
  • Not your default for “change this paragraph” demos in this course

Script at the end of the body (beginner default)

Put the markup visitors need first. Then run your script. Elements with id values above the script are already in the document when the statements run.

Script at the end of body

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Body End</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<p>HTML arrives first; then the script updates the heading.</p>
<script>
document.getElementById("title").textContent =
"Ready — script ran at the end of body";
</script>
</body>
</html>

Why this habit helps

  • The heading and paragraph can paint before script work finishes
  • getElementById("title") finds a real node
  • Short demos stay in one file while you learn the language
  • Later you can move the same statements into an external file without changing the idea

External JavaScript file (project default)

Keep HTML for structure and put logic in app.js. Point to the file with src. Paths are relative to the HTML file unless you use a folder path.

HTML that loads app.js

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — External</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<script src="app.js"></script>
</body>
</html>

External app.js

javascript 
document.getElementById("title").textContent =
"Loaded from app.js";

Why external wins as you grow

  • One .js file can serve several pages
  • Editors show JavaScript with clearer syntax highlighting in its own file
  • You avoid huge <script> blocks inside markup
  • A wrong src path fails silently in the page — check the Console and Network tabs if nothing runs

Order matters

The browser reads top to bottom. A script runs when the parser reaches it (unless you use advanced attributes later). If line 1 of your script needs #title, that element must appear above the script in the HTML, or you must wait for the document to finish loading. End-of-body placement is the simple way to get that order right.

Try it yourself

  1. Create where.html with the end-of-body example. Open it and confirm the heading updates.
  2. Change the textContent string, save, and refresh.
  3. Create app.js with the external example’s JavaScript. Change where.html to load <script src="app.js"></script> just before </body>, with no inline code left.
  4. Rename app.js temporarily or break the src path, refresh, and watch the Console — then fix the path.
  5. Optional: move the same script into the head (without defer) and see that getElementById may fail until you move it back.

Common mistakes

  • Putting a DOM-updating script in the head so getElementById runs before the element exists
  • Linking <script src="app.js"> with a typo or wrong folder — the page looks fine but nothing runs
  • Leaving hundreds of lines inline in every HTML file instead of one shared .js
  • Confusing this session with CSS wiring: styles use <link> / <style>; behavior uses <script>

Summary

  • JavaScript lives in a <script> — inline or via src to a .js file
  • End of body is the beginner-friendly default when code touches page elements
  • Head scripts run early; avoid DOM updates there until you know loading attributes
  • External files are the project default once demos grow
  • Script order follows document order unless you use advanced loading options later
  • Practice by splitting a working inline demo into HTML + app.js

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
6
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 2 of 4
Javascript Tutorial