JavaScript Where To

JavaScript code has to live somewhere. You have three choices: inside a <script> tag in the <head>, inside a <script> tag in the <body>, or in a separate file ending in .js that the page loads. All three work, but they are not equal — where you put the code decides when it runs.

Diagram — see how it fits together

The browser reads a page from top to bottom, like you read a book. When it meets a <script> tag, it stops reading the HTML, runs the code, and only then carries on. So a script in the <head> runs before the page body exists. If that script tries to change a button that has not been read yet, it will fail — the button does not exist yet. That is the most common beginner mistake in JavaScript.

Script in the body — the safe default

Putting your <script> at the end of the <body>, just before </body>, is the safest choice for a beginner. By then the browser has already read all the HTML, so every button, input, and paragraph exists and your code can reach them. The page also appears faster, because the browser shows the content first and runs the code afterwards.

<body>
  <h1>My Chai Shop</h1>
  <button onclick="sayHello()">Say hello</button>
  <script>
    function sayHello() {
      alert("Namaste!");
    }
  </script>
</body>

The function is defined in the script, and the button calls it when clicked. Because the script sits after the button in the page, everything is in place by the time anyone can click.

Script in the head — and the defer trick

A script in the <head> runs early, which is useful for code that does not touch the page — for example, setting up a value or defining a function that will only be called later, after a click. Functions defined in the head are fine, because they only run when called. The danger is only code that runs immediately and touches page elements that do not exist yet.

For an external file, you can add the defer attribute: <script src="shop.js" defer></script>. Deferred scripts wait until the whole page has been read, then run in order. It gives you the tidiness of the head with the safety of the body.

External .js files — the professional way

When your code grows, move it into a separate file, for example shop.js, and load it with <script src="shop.js"></script>. The page stays clean, the same file can be shared by many pages, and the browser can cache it — so the second page loads faster. Real websites almost always use external files. For learning, inline scripts are fine; for real projects, external files are the habit to build.

Common mistakes

• Putting a script in the <head> that immediately touches a page element — the element does not exist yet, so the code fails with an error.
• Writing the src path wrong — shop.js must be in the same folder as the page, or the path must match where the file really is.
• Putting code between <script src="..."> and </script> — when src is present, the browser ignores anything written inside the tag.
• Forgetting that scripts run in order — a function must be defined before the line that calls it runs (unless it is only called later, on a click).

Remember

• The browser reads a page top to bottom and runs each script as it meets it.
• Safest for beginners: put <script> at the end of the <body>.
• defer makes a head script wait until the page is fully read.
• External .js files keep pages clean and can be shared between pages.

Example explained

• <script> at the end of the <body> — the script sits after all the HTML, so every element on the page already exists when the code runs.
• function greet() { ... } — defines a function called greet. Defining a function does not run it; it only stores the instructions for later.
• document.getElementById("message") — finds the paragraph with id="message" on the page.
• .textContent = "Namaste! Welcome to My Chai Shop." — changes that paragraph's text. The page updates without reloading.
• onclick="greet()" — the button calls greet when clicked. The script was ready before the click because it loaded with the page.