BUT MMI 1 · R1.12 Développement Web

Appli JS : le DOM et le Canvas

Deux petites applications pour passer de la théorie à la page web : un changeur de thème (sélectionner, écouter, modifier le DOM) puis un dessin animé sur canvas (tracer des cercles, les animer, créer un effet d'écho). Tous les exercices se font et se vérifient directement dans ces pages.

TP 1

Changeur de thème

getElementById, addEventListener, classList.toggle : un bouton qui bascule la page en mode sombre.

TP 2

Canvas : dessin

Contexte 2D, arc, stroke et fill : une cible de cercles concentriques à opacité progressive.

TP 3

Canvas : animation

requestAnimationFrame, rebond et Math.sin : des cercles qui pulsent comme des ondes.

Avant de commencer

Ces TP s'appuient sur les bases vues en TD : variables, conditions, boucles et fonctions. En cas de doute, reprenez les pages d'algorithmique et du TD Bases du JavaScript.

Comment travailler

▶ Exécuter

Lance votre code dans l'aperçu de l'exercice : une vraie petite page, avec son bouton ou son canvas. Vous pouvez cliquer dedans.

✔ Vérifier

Teste automatiquement votre code (clics simulés, dessins et images de l'animation contrôlés) et vous dit précisément ce qui manque.

📜 Certificat

Les exercices réussis comptent pour votre certificat PDF, établi à votre nom. Les solutions consultées y sont indiquées.

Votre progression et votre certificat

Identifiez-vous avec votre prénom et votre nom : votre progression est enregistrée à votre nom sur ce poste, et vous pouvez télécharger à tout moment votre certificat PDF (mention « NON TERMINÉ » tant que les 10 exercices ne sont pas réussis).

Objectifs

Savoir-faire technique

  • Sélectionner un élément du DOM et réagir à un clic.
  • Modifier le style d'une page en ajoutant ou retirant une classe.
  • Tracer des formes sur un canvas et régler couleur, épaisseur, opacité.
  • Construire une boucle d'animation avec requestAnimationFrame.

Façon de penser

  • Découper une interaction en trois temps : sélectionner, écouter, modifier.
  • Remplir un tableau de valeurs avant d'écrire une boucle.
  • Penser une animation image par image : effacer, calculer, redessiner.
  • Lire un message d'erreur (null, fonction non appelée…) pour trouver la cause.