Terminology and Concepts to look out for

JavaScript · event · trigger · verb · adverb

Relevance to Me

Two days now, the page has been sitting still. Today the ball moves, the paddle reacts, the score climbs. Everything on the page that happens because of something else is what we look at today.

Board Question

Chromebooks open. Breakout runs on the workstation; today's classwork form is on your Chromebook. The exit ticket pops up in the last twenty minutes and opens in its own tab.

HTML — the parts of the page and where they sit. Nouns and prepositional phrases. Nothing about how the parts look, nothing about what they do.

Just the words Click me. No box, no background, no border, no color — and yet those two words are a real, working button. Click them and the button activates. HTML declares what a thing is (a clickable action), not how it looks. The gray box with the darkening hover you may have seen elsewhere is the browser’s own stylesheet filling in visual defaults so buttons don’t render as invisible text.

<button>Click me</button>

CSS — how those parts look. Adjectives layered on the HTML nouns. Color, size, spacing, edges, hover states.

The same button. Now it is colored, rounded, has a shadow, brightens when you hover, and drops down a couple of pixels when you press it — all still CSS. Every one of those is an adjective on the button. Click it — you see the press animation, and then nothing else happens. CSS makes the page beautiful, and beautiful is not the same as working.

<style>
  button {
    background: #b3541f;
    color: #fff;
    border: none;
    padding: 14px 28px;
    font-size: 18px;
    border-radius: 8px;
    box-shadow: 0 3px 0 #7a3a15;
    cursor: pointer;
  }
  button:hover  { background: #c85f24; }
  button:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #7a3a15;
  }
</style>

<button>Click me</button>

JavaScript — what the parts do. Verbs and adverbs. The behavior added on top of the noun and its adjectives.

The same button, the same styling. Now click it. Something happens. That something is JavaScript, listening for the click and running code in response. Three languages, three jobs, one working page.

<style>
  button { /* same styles as before */ }
</style>

<button id="b">Click me</button>
<p id="msg"></p>

<script>
  var count = 0;
  document.getElementById("b").addEventListener("click", function() {
    count++;
    document.getElementById("msg").textContent =
      "Clicked " + count + " time" + (count === 1 ? "" : "s") + ".";
  });
</script>

Here is a wrinkle worth knowing. We teach these three languages in the order HTML → CSS → JS because that is how the layers stack. But that is not the order they actually arrived on the web.

The real order was HTML → JavaScript → CSS. For a couple of years in the mid-1990s, this is roughly what an interactive web page looked like:

HTML shipped in 1991. JavaScript shipped in December 1995 (Brendan Eich, ten days at Netscape). CSS was not published as a spec until December 1996, and browsers did not render CSS reliably until closer to 2000. So for a couple of years, the web had interactivity before it had consistent style. Buttons looked like the browser’s built-in gray beveled default (the user-agent stylesheet from slide 1) — but they could react to clicks. The web went from just-HTML to HTML-plus-JavaScript first, and CSS layered on top only afterward.

<button id="b">Click me</button>
<p id="msg"></p>

<script>
  var count = 0;
  document.getElementById("b").addEventListener("click", function() {
    count++;
    document.getElementById("msg").textContent =
      "Clicked " + count + " time" + (count === 1 ? "" : "s") + ".";
  });
</script>

Today's language is JavaScript, and its job is one thing only: making the page react. It listens for something happening — a click, a keypress, the ball hitting the paddle, a moment in time reached — and runs code in response. Verbs and adverbs, layered on the nouns HTML gave you and the adjectives CSS painted on those nouns.

What the letters stand for.

JavaScript. No fancy acronym. Just the name of a programming language.

The name is famously misleading. JavaScript is not related to Java. It picked up the name for a marketing reason (Java was the hot language of the mid-1990s, and Netscape wanted the connection), but under the hood the two languages have almost nothing in common. If it helps, mentally read "JavaScript" the same way you would read "peanut butter" — a compound word that names one specific thing.

Where it came from.

JavaScript was created by an American programmer named Brendan Eich at Netscape (the company that made the browser most people were using in 1995). He was told to invent a new scripting language for the browser and to have it working in ten days. He did. It shipped in Netscape Navigator 2.0 in December 1995, initially called Mocha, then briefly LiveScript, then finally JavaScript for the launch.

Ten days for a language that, thirty years later, runs the front end of every website on Earth. The web is younger than your parents. JavaScript is younger than most of your teachers.

What JavaScript added.

Before JavaScript: a web page was a printed thing. You opened it, you read it, you clicked a link to go somewhere else. Anything that felt like reacting — a form checking whether you filled it in correctly, a game running in the browser, a picture changing when you moused over it, a button counting your clicks — was impossible.

After JavaScript: web pages could listen. A keypress could move a paddle. A click could send a message off to a server without reloading the page. A timer could animate something over hours. A game could respond to the player. The web went from pages you read to things you use.

Every one of those responses starts with a verb — moves, sends, animates, counts, plays — and a trigger, the when — when the arrow key goes down, when the mouse enters, when the timer fires, when the ball collides with a brick. If a sentence about a page contains a when-phrase pointing at a specific event, that sentence is JavaScript.

The two motions look the same and are not the same.

Yesterday you learned that CSS can move things. A paddle can slide on its own, on a loop, using CSS animation. That is a temporal adjective — the paddle looks like this over time. It never asks about you.

JavaScript motion is different. It runs because of something. The paddle slides when you press the arrow key. The score climbs when the ball hits a brick. The game ends when the ball falls past the paddle three times. Every one of those sentences contains a trigger — the when-clause — and every one of them requires JavaScript.

The rule from Wednesday is doing double duty now: "CSS runs on its own. JavaScript runs when something else does." The word when pointing at a user action or an event is the tell.

Breakout, through all three grammars.

Look at Breakout. Now you have all three lenses.

• HTML — the parts. The paddle. The bricks. The score. The container.
• CSS — the adjectives. The paddle is green. The bricks are stacked. The score is monospace. The container has a dark background.
• JavaScript — the verbs. The paddle slides when you press an arrow key. The ball bounces off the walls. The bricks disappear when the ball hits them. The score climbs when a brick is broken. The game ends when you lose your last ball.

Every one of the JavaScript sentences has a when-clause. Every one names the event that triggers the verb. That is what JavaScript does: hooks verbs to events.

Today's job.

Five observations. Each one names a part (noun, HTML), places it (prepositional phrase, HTML), gives it one adjective (CSS), and adds a verb with its trigger (JavaScript). "A green paddle. Below the bricks. Slides when you press the arrow key." Four ideas per sentence: what it is, where it sits, how it looks, and what it does when something happens.

This is the full trilingual observation — every language of the web, in one sentence, about one part of a game. Monday you start writing sentences like this on purpose, ahead of time, so a machine can build the page from your writing. What you practice today is what you will write to the AI on Monday. Get the shape right now, and the AI will be able to follow you when the time comes.