Aide-mémoire

DOM, événements et Canvas

À garder ouvert dans un onglet pendant les TP.

Le DOM

Code	Rôle
`document.getElementById("id")`	L'élément qui a cet id (écrit sans `#`), ou `null`.
`document.querySelector("sélecteur")`	Le premier élément qui correspond au sélecteur CSS, ou `null`.
`document.querySelectorAll("sélecteur")`	Tous les éléments qui correspondent (liste).
`el.textContent = "…"`	Remplace le texte de l'élément.
`el.classList.add / remove / toggle("classe")`	Ajoute, retire, inverse une classe (sans le point).
`el.classList.contains("classe")`	`true` si l'élément a la classe.
`el.style.color = "red"`	Style en ligne (préférer les classes).

Les événements

el.addEventListener("click", function () {
  // exécuté à chaque clic sur el
});

Autres événements courants : "mouseover", "keydown", "input", "submit". Avec une fonction nommée : addEventListener("click", basculer), sans parenthèses après basculer.

Le Canvas

Code	Rôle
`const ctx = canvas.getContext("2d")`	L'outil de dessin du canvas.
`ctx.beginPath()`	Commence un nouveau tracé.
`ctx.arc(x, y, r, 0, 2 * Math.PI)`	Décrit un cercle complet de centre (x, y) et de rayon r.
`ctx.stroke()` / `ctx.fill()`	Peint le contour / remplit la forme décrite.
`ctx.strokeStyle`, `ctx.fillStyle`	Couleur du contour, du remplissage.
`ctx.lineWidth`	Épaisseur du contour, en pixels.
`ctx.globalAlpha`	Opacité de 0 (transparent) à 1 (opaque) ; à remettre à 1 après usage.
`ctx.clearRect(0, 0, largeur, hauteur)`	Efface un rectangle (ici tout le canvas).
`ctx.fillRect(x, y, largeur, hauteur)`	Dessine un rectangle plein.

Repère : origine (0, 0) en haut à gauche, x vers la droite, y vers le bas.

La boucle d'animation

function animer() {
  ctx.clearRect(0, 0, 400, 400); // 1. effacer
  // 2. mettre à jour les valeurs
  // 3. redessiner
  requestAnimationFrame(animer); // 4. image suivante
}
animer(); // premier appel

Erreurs fréquentes

Symptôme	Cause probable
`Cannot read properties of null`	Sélection ratée : id mal écrit, `#` en trop dans `getElementById`, ou script exécuté avant le HTML.
Le clic ne fait rien	Écouteur sur le mauvais élément, ou fonction appelée avec `()` dans `addEventListener`.
La classe ne s'applique pas	Point en trop : `toggle(".dark-theme")` au lieu de `toggle("dark-theme")`.
Rien ne s'affiche sur le canvas	`stroke()` ou `fill()` oublié, ou forme hors du canvas.
Tous les cercles sont reliés	`beginPath()` oublié avant chaque `arc`.
Le dessin laisse une traînée	`clearRect` oublié au début de chaque image.
L'animation ne démarre pas	Premier appel `animer();` oublié.