The Three Layers of a Web Page: Structure, Style, and Behavior

In the HTML and CSS course you built tidy, attractive pages. But those pages were still static: buttons did not react, values could not be calculated, and content never changed without reloading. This is where JavaScript comes in.

The school notice board analogy

Picture your class notice board. The board and its columns are HTML (structure). The paper colours, fonts, and layout are CSS (style). Then there is a student council member who replaces announcements every morning, counts competition sign-ups, and pins up news when something urgent happens. That person is JavaScript (behavior): it reads the current state, makes decisions, and changes what is on the board.

How the browser runs JavaScript

1. The browser reads the HTML file from top to bottom and builds a tree of elements called the DOM (Document Object Model).
2. CSS is applied to those elements.
3. When the browser finds a <script> tag, it runs the JavaScript code using its JavaScript engine (for example V8 in Chromium or SpiderMonkey in Firefox).
4. That code can read and change the DOM at any time, for example when the user clicks a button.

Where to put your code

The best approach is to keep code in its own file, for example script.js, and link it inside <head> with the defer attribute so the script only runs after all the HTML has been read:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Belajar JS</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Halo!</h1>
</body>
</html>

The Console: your playground

Every browser has DevTools (press F12 or Ctrl+Shift+I). The Console tab shows output from console.log() and error messages. Put this in script.js:

console.log("Halo, SMA!");
console.log(7 * 6);

Open the page and look at the Console: the text and the number 42 appear. Get into the habit of always opening the Console while writing JavaScript, because that is where the browser tells you when something goes wrong.

Remember: HTML answers "what is the content", CSS answers "what does it look like", and JavaScript answers "what happens if...".