Structure of JavaScript

📖 Theory

The button that could not find its box

You add JavaScript to FestConnect to show the seat count. You put the <script> in the <head>, it runs, and it crashes: 'cannot read property of null'. The seat-count element does not exist yet when the script runs, because the browser reads top to bottom and had not reached the <body> where that element lives.

Before writing logic, you need to know where JavaScript goes, how it is structured, and one rule that trips everyone: it is case-sensitive.

📖 Theory

Instructions read top to bottom

A recipe is a list of steps done in order: you cannot 'stir the batter' before the step that makes the batter. JavaScript runs the same way, line by line from the top. So a script that touches a page element must run after that element has been created, which is why scripts usually sit at the bottom of the page, once everything above them exists.

📖 Theory

Where JS goes and how it reads

• Internal: a <script> ... </script> block in the HTML.
• External: <script src="app.js"></script> links a separate file (reusable, cacheable, the Unit 1 external-file idea again).
• Placement: put the script just before </body> so the elements above it already exist (or use defer in the head).

Inside, JavaScript is a list of statements run top to bottom, each usually ended with a semicolon. Comments are // one line or /* many lines */. console.log(...) prints to the browser console for testing.

⌨️ Practical

FestConnect's first script

<body>
  <h1 id="title">FestConnect</h1>

  <!-- script at the bottom: #title already exists above -->
  <script>
    // this prints to the browser console (F12)
    console.log("FestConnect script loaded");

    /* statements run top to bottom, semicolons end them */
    let heading = document.getElementById("title");
    console.log(heading.textContent);   // "FestConnect"
  </script>
</body>

<!-- external alternative:  <script src="app.js"></script> -->

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

Why does the head version crash?

The exact same script works before </body> but throws 'null' when placed in the <head>. Explain what 'null' means here and give two fixes.

🧩 Quiz

A student writes document.getElementByID("title") and it fails. The correct method is getElementById. What kind of error is this?

1. A case-sensitivity error: JS distinguishes ID from Id
2. A missing semicolon error
3. A comment that was not closed
4. A server-side error unrelated to JavaScript

⚠️ Watch out

Structure traps

1. Script above the elements it uses: put it before </body> or add defer, or you get null errors.

2. Wrong capitalisation: getElementById, not getElementByID or getelementbyid. Same for console.log, not Console.Log.

3. Forgetting `src` makes a block external: <script src="app.js">code here</script> ignores the inline code; a tag either links a file or holds code, not both.

📖 Theory

console.log is your test tube

For the rest of this unit, console.log() and the browser console (press F12) are how you check what your code is doing without any UI: print a variable, see its value. It is the client-side echo of the print statements you used while learning Python in BCA303. Get comfortable opening the console now; every later lesson leans on it.

✅ Summary

Key takeaways

• Add JS with an internal <script> block or an external <script src="app.js">.
• Place scripts just before </body> (or use defer) so the elements they touch already exist.
• Code runs top to bottom as statements, usually ended with semicolons.
• Comments are // (one line) and / / (many); console.log() prints to the browser console for testing.
• JavaScript is case-sensitive: getElementById is not getElementByID.
• Memory hook: read top to bottom, so script at the bottom.