Station 08 · State, events & handlers

The wiring

Until now you have built bones, mixed paint, and choreographed motion. None of those things knew when you clicked. JavaScript is what makes the boat listen. Think of it as the wiring under the decks: a button is hooked to a small recipe, the recipe edits a tiny notebook the boat keeps about itself, and the display reads that notebook to decide what to show.

Below is a working miniature theater, complete with its own script. Push the controls. Watch the values inside the state object update under your hands, and watch the boat answer. The recipes never move — only the values do, and the display follows.

theater.js — state on top, recipes below

1// the boat's whole memory of right now
2let stage = {
3  curtain: "closed",
4  reel:    "Captain's welcome",
5  lights:  "up",
6};
7
8// recipes the buttons are wired to
9function raise() {
10  stage.curtain = "open";
11  stage.lights  = "down";
12  render();
13}
14
15function lower() {
16  stage.curtain = "closed";
17  stage.lights  = "up";
18  render();
19}
20
21function pick(reel) {
22  stage.reel = reel;
23  render();
24}

Hover any line of code, or any part of the stage — both light up together.

Now showing · Captain's welcome

footlights

The curtain button

Wired to raise()

Pick a reel — wired to pick(reel)

Three controls, one tiny script. Every click runs a recipe; every recipe edits the same little box of state; the boat just shows whatever the box says. That loop runs every interactive piece of this site — only larger.

What you just learned

State is one little box that says what is true right now: this stage has these values, that is all.
An event (a click, a key, a hover) is a signal from outside. A handler is the short script the boat runs when the signal arrives.
Handlers do not draw anything; they only edit the state. The display reads the state and follows.
Three controls and one tiny script ran the whole theater. Every interactive piece of this site is this same loop, larger.

Next — Station 09: The loop

Right this way…

The wiring

1// the boat's whole memory of right now

2let stage = {

3 curtain: "closed",

4 reel: "Captain's welcome",

5 lights: "up",

6};

8// recipes the buttons are wired to

9function raise() {

10 stage.curtain = "open";

11 stage.lights = "down";

12 render();

13}

15function lower() {

16 stage.curtain = "closed";

17 stage.lights = "up";

18 render();

19}

21function pick(reel) {

22 stage.reel = reel;

23 render();

24}

What you just learned

State is one little box that says what is true right now: this stage has these values, that is all.

An event (a click, a key, a hover) is a signal from outside. A handler is the short script the boat runs when the signal arrives.

Handlers do not draw anything; they only edit the state. The display reads the state and follows.

Three controls and one tiny script ran the whole theater. Every interactive piece of this site is this same loop, larger.