Formations à l'informatique et à l'électronique

Auteur : SD
Créé le : 04-03-2022

Javascript - Programmation d'un chronomètre

Dans ce TP vous allez réaliser la programmation d'un chronomètre en Javascript.

La capture d'écran ci-dessous montre le résultat final du chronomètre qui sera obtenu à la fin de ce TP.

javascript chronometre resultat final

Un code de base est donné : code de départ TP Javascript Chronomètre.

Ce code de base affiche l'heure. Cet affichage est rafraîchi automatiquement toutes les 100ms.

Analyser le fonctionnement du code présent dans le fichier "Chronometre.html".

Étape 1

Le but de cette étape est de remplacer l'affichage de l'heure actuelle par la valeur d'un compteur initialisé à 0 qui sera incrémenté toutes les secondes.

Vidéo du résultat attendu :

Créer une variable nommée "chrono", l'initialiser à 0.

Créer une fonction "afficheChrono()" qui affiche la valeur de la variable "chrono" sur l'afficheur 7 segments. L'unité de la variable "chrono" est la seconde.

Indications :

Modifier la fonction "animate()" selon le diagramme d'activité ci-dessous :

javascript chronometre diagramme activité UML

Tester

Faire constater au professeur

Étape 2 : Gestion des clics sur les boutons

Le but de cette étape est de coder les évènements liés aux clics sur les boutons Start, Stop et Reset.

Le diagramme d'état ci-dessous décrit le fonctionnement de l'application :

javascript chronometre diagramme etat UML

Créer trois fonctions "start()", "stop()" et "reset()". Ces trois fonctions afficheront, pour le moment, leurs noms respectifs dans la console (console.log()).

Définir l'évènement "onClick" des 3 boutons présents sur la page de manière à associer l'exécution des trois fonctions à leur bouton homonyme.

Tester

Faire constater au professeur

Modifier le code des 3 fonctions "start()", "stop()" et "reset()" de manière à obtenir le fonctionnement décrit dans le diagramme d'état ci-dessus.

Rappel sur les transitions dans un diagramme d'état

Une transition indique le passage d’un état (état source) dans un autre (état cible). Elle est représentée par une flèche orientée de l’état source vers l’état cible.

Syntaxe générale d’une transition :

{ <événement> } { [ <condition de garde> ]} { / <effet> }

Exemple :

Dans le diagramme d'état ci-dessus, la transition "ResetClick/chrono = 0", indique que l'évènement clic sur le bouton "Reset" entraine la mise à 0 de la variable "chrono".

En utilisant la propriété "disabled" des balises "button", faire en sorte que selon dans l'état dans lequel le programme est, seules les boutons utilisables soient activés. Par exemple quand le chronomètre est dans l'état "Run" seul le bouton "Stop" est utilisable donc les 2 autres boutons devront être alors "disabled".

Tester

Faire constater au professeur

Étape 3 : Amélioration de la résolution

Le but de cette étape est d'améliorer la résolution de notre chronomètre.

Pour un instrument de mesure, la résolution est le plus petit incrément ou décrément pouvant être mesuré par celui-ci.

Actuellement nous avons une résolution de 1s. Modifier le code de manière à avoir une résolution de 1/10s.

Vidéo du résultat attendu :

Tester

Faire constater au professeur

Articles connexes


Vous avez apprécié cet article ? Partagez le !

Article connexe : Introduction au Javascript