Animation canvas / javascript - 1e partie

Programme NSI : Chapitre " Interactions entre l'homme et la machine sur le Web "

Contenu : Evénementiel - Interaction avec l'utilisateur dans une page Web

Capacités attendues :

• Identifier les événements que les fonctions associées aux différents composants graphiques sont capables de traiter :

  « Il s'agit d'examiner le code HTML d'une page comprenant des composants graphiques et de distinguer ce qui relève de la description des composants graphiques en HTML de leur comportement (réaction aux événements) programmé par exemple en JavaScript. »

• Analyser et modifier les méthodes exécutées lors d'un clic sur un bouton d'une page Web.

Objectifs de l'activité :

• Découvrir comment effectuer des tracés au sein d'une page html grâce à la balise canvas

• Se familiariser avec les éléments graphiques canvas : système de coordonnées, type de forme, mise en couleurs, méthodes, ...

• Utiliser un éditeur de texte adapté à l'écriture des fichiers html et js, doté de fonctionnalités telles que : mise en couleur automatique en fonction du type de contenu écrit, indentation du texte, dépliement / repliement de paragraphes

• Tester le résultat obtenu dans un navigateur web, effectuer des modifications, apporter des améliorations

• Créer une page web dynamique, animer un graphisme par le biais de la fonction animate()

• S'initier aux structures algorithmiques classiques : switch, if then, ...

Modalités :

• Travail présenté en deux parties

• L'élève devra remettre une préparation ainsi qu'un compte-rendus rempli au fil de l'eau.

Pour la première partie, la programmation des tâches suivantes sera évaluée :