JavaScript for kids: a real start

// Paste these lines into the browser Console (ours)
let name = "Sam";
console.log("Hi " + name + "!");

let roll = Math.floor(Math.random() * 6) + 1;   // 1 to 6
console.log("You rolled a " + roll);

MDN says Math.random returns a number greater than or equal to 0 and less than 1. Multiplying by 6 and rounding down with Math.floor gives 0 to 5; adding 1 gives 1 to 6.

<!-- clap.html: a button that counts (ours) -->
<button id="clap">Clap</button>
<p id="count">Claps: 0</p>

<script>
  let claps = 0;
  const button = document.querySelector("#clap");
  const label = document.querySelector("#count");

  button.addEventListener("click", function () {
    claps = claps + 1;
    label.textContent = "Claps: " + claps;
  });
</script>

querySelector finds the button and the paragraph; addEventListener sets up a function that runs on every click; textContent replaces the paragraph’s text. If querySelector finds nothing, it returns null, the usual cause of a beginner’s first big red error.

<!-- steer.html: move a square with the arrow keys (ours) -->
<canvas id="game" width="300" height="150"></canvas>

<script>
  const canvas = document.querySelector("#game");
  const ctx = canvas.getContext("2d");
  let x = 140;     // left edge of the square
  let speed = 0;   // pixels per frame

  document.addEventListener("keydown", function (event) {
    if (event.key === "ArrowRight") speed = 3;
    if (event.key === "ArrowLeft") speed = -3;
  });
  document.addEventListener("keyup", function () {
    speed = 0;
  });

  function frame() {
    x = x + speed;
    if (x < 0) x = 0;
    if (x > 280) x = 280;  // 300 minus the 20 px square
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 65, 20, 20);
    requestAnimationFrame(frame);  // ask for the next frame
  }
  requestAnimationFrame(frame);
</script>

keydown fires when a key is pressed and keyup when it is released; event.key tells you which key, such as ArrowRight. The frame function moves, clears, draws and then asks for the next frame.