Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de JavaScript

Programmer un compte à rebours

Testez gratuitement nos 1334 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez programmer un compte à rebours en JavaScript. C'est l'occasion pour vous d'utiliser les évènements, les timers et différents objets de JavaScript.

Transcription

Pour démarrer ce dernier chapitre, je vous propose quelques exemples qui vont mettre en pratique les différents concepts que nous avons vus dans cette formation. Alors, je commence par une simple page HTML, qui contient un « div » qui s'appelle « container » et qui contient l'ensemble de la page. Dans ce « div container », j'ai un « div » qui s'appelle « inputArea », et qui est complètement vide, ici, dans l'HTML, mais vous voyez, ici, sur la page web que ce « div » n'est, en fait, pas vide, il contient un champ de formulaire et un bouton, et puis, j'ai un élément, un titre de niveau 1, qui s'appelle « time » et qui contient cette information : « 0:00 », qui apparaît, ici, au milieu de la page. Alors, comment marche tout cela ? Eh bien si je tape, ici, des lettres, et que je clique sur le bouton, j'ai une alerte qui me dit : « s'il vous plaît, rentrez un nombre », et puis quand je clique sur OK, vous voyez que rien du tout ne se passe. Alors, je vais rentrer un nombre, ici, dans le champ formulaire, le nombre 1 et quand je clique sur le bouton, eh bien mon formulaire a disparu. Donc, je n'ai plus de champ de formulaire, ni de bouton, et puis mon 1, c'était, en fait, une minute. Maintenant, j'ai démarré un compte à rebours, dans environ 50 secondes, ce compte à rebours sera terminé, et j'aurai une seconde alerte qui va apparaître à l'écran, qui me dit que c'est fini. Cette seconde alerte, une fois que j'aurai appuyé sur le bouton OK, la page sera remise à zéro, le champ de formulaire et le bouton vont réapparaître pour me permettre d'encoder une nouvelle valeur dans le champ et de démarrer un nouveau compte à rebours. Je vais rafraîchir cette page pour arrêter ceci, et vous montrer comment cela marche en JavaScript. Dans mon JavaScript, tout commence, ici, dans le fond du fichier, avec l’événement « window.onload », donc j'attends que la page ait complètement fini de charger pour lancer une fonction anonyme. Cette fonction va utiliser « createElement » pour créer deux éléments. Un premier élément qui utilise la balise « input » de l'HTML, un « input » de type texte, donc, un champ texte, qui a pour identifiant « minutes ». Je stocke cet élément dans la variable « inputMinute », que voici. Alors, je crée un deuxième élément, qui est également un élément qu'utilise la balise « input » de l'HTML, mais cette fois-ci, qui est de type bouton et qui a pour valeur « Démarrer le compte à rebours ». Je vais aussi assigner à l’événement « onclick » de ce bouton une fonction qui va démarrer cette autre fonction qui s'appelle « startCountDown ». Enfin, pour terminer tout cela, je vais ajouter les deux éléments que je viens de créer, donc « inputMinute » et « startButton », je vais utiliser « appendChild » pour les ajouter à cet élément « inputArea », qui est vide, pour le moment, dans l'HTML et c'est comme cela que, il est vide dans l'HTML, mais qu'il n'est plus vide quand la page apparaît dans le navigateur. Une fois que je clique sur le bouton, je vais démarrer « startCountDown », Alors, où est cette fonction ? Elle est ici : « startCountDown », que vais-je faire, à ce moment-là ? Je vais créer une variable qui s'appelle « minute » et qui sera égale à la valeur de ce qu'on a tapé dans le champ minute. Ensuite, je vais vérifier si ce qu'on a tapé est un nombre ou pas. Et si ce n'est pas un nombre, remarquez que j'utilise « isNaN», eh bien, j'envoie une alerte à l'écran qui dit « S'il vous plaît, entrez un nombre », et puis je tape, ici, « return ». « Return », quand une fonction rencontre ce mot-clé, la fonction s'arrête et ne va pas continuer à exécuter le code qui est en dessous. Ici, ce « return » dit « On arrête tout, la valeur n'est pas correcte, on arrête et on attend qu'on tape une autre valeur ». Alors, par contre, si la valeur qui est stockée ici, dans la variable « minute », est un nombre, eh bien je vais multiplier ce nombre par 60, et stocker ceci dans une variable qui s'appelle « secondsRemaining », qui a été définie, ici, tout en haut de la page, elle avait été définie en dehors de toute fonction, donc c'est une variable globale qui a été définie, ici, mais pas encore initialisée, c'est-à-dire qu'elle existe mais qu'elle n'a pas de valeur. Eh bien, maintenant, cette variable va avoir une valeur et il s'agit de la conversion en secondes, donc j'ai fait x60 de la valeur tapée dans le champ. Ensuite, je vais utiliser « setInterval » pour lancer la fonction « tick », toutes les milles millisecondes, c'est-à-dire toutes les secondes. La valeur qui m'est retournée par « setInterval », je la stocke dans cette autre variable, « intervalHandle», que j'avais également définie tout en haut, donc c'est une variable globale. Ensuite, qu'est-ce que je fais ? Je cache le formulaire donc je vais chercher « inputArea » avec « getElementById », et puis j'atteins sa propriété CSS « display », que je rends égale à « none » pour cacher cet élément. Voilà, maintenant, c'est la fonction « tick » qui va prendre le relais toutes les mille millisecondes, donc toutes les secondes, alors cette fonction « tick » eh bien, elle est ici. Que va-t-elle faire ? Elle va être exécutée toutes les mille millisecondes, donc ici, tout à la fin, vous voyez que j'ai « secondsRemaining-- », c'est-à-dire que, toutes les secondes, je décrémente c'est-à-dire que je retire 1 à la valeur de cette variable « secondsRemaining ». Donc, c'est ça qui va faire que le temps s'égraine vers le bas. Alors, ensuite, je vais chercher l'élément, dans le DOM, qui s'appelle « time », il s'agit, rappelez-vous, de cette balise H1 et je stocke ceci dans une variable qui s'appelle « timeDisplay ». Ensuite, je crée deux variables, une qui s'appelle « min », et une qui s'appelle « sec », et je vais, en fait, chercher ce qui reste, comme secondes, et je vais transformer cela en minutes et en secondes. Pour cela, je divise ceci par 60, ce qui va me donner un nombre avec des virgules, probablement, donc j'utilise « math.floor » pour arrondir ce nombre à l'unité inférieure, ce qui me donne le nombre de minutes, et puis ici, un petit peu plus de maths pour trouver le nombre de secondes. Alors, je vais vérifier, maintenant, si le nombre de secondes est, ou pas, inférieur à dix. Donc, s'il reste moins de dix secondes, que fais-je ? Eh bien, je vais préfixer les secondes qui restent par cette chaîne de caractères 0. 0 est une chaîne de caractères, puisqu'il y a des guillemets, « sec », ici, est un nombre, donc le « + » est l'opérateur de concaténation. Cela est pour évite, à la fin du compte à rebours, d'avoir 9, 8, 7, 6, 5 jusqu'à 0, j'ai envie d'avoir 09, 08, 06, etc. Je vais maintenant concaténer ces deux variables « min » et « sec », donc je vais créer la variable « message » qui sera la concaténation de : « min + ":" + sec », alors comme « : » est une chaîne de caractères, eh bien les deux « + » qui sont ici sont des opérateurs de concaténation. Et maintenant que j'ai ce message, je vais modifier l' « innerHTML » de mon « timeDisplay », rappelez-vous, c'est la variable qui est ici, il s'agit en fait de l'élément H1 du code HTML, et je vais afficher le résultat de la concaténation de minutes et de secondes dans cet élément, grâce à « innerHTML ». Ensuite, je vais vérifier s'il reste, ou pas, 0 seconde. Et si « secondsRemaining » est égal à 0, mon compte à rebours est arrivé à la fin, donc j'envoie une alerte qui dit que c'est fini. Ensuite, je fais un « clearInternal », de « intervalHandle », rappelez-vous « intervalHandle », c'était ceci, j'avais donné une valeur à cette variable quand j'avais appelé « setInterval », donc maintenant, ici, cela me permet d'arrêter le « countDown », d'arrêter le compte à rebours vers le bas, d'arrêter la machine, et je demande d'exécuter la fonction « resetPage ». La fonction « resetPage », c'est une toute petite fonction qui est ici, qui va rechercher l'élément « inputArea » qu'on avait caché, tout à l'heure et qui, simplement, remet la propriété « display » de cet élément à « block », la propriété CSS « display » le rend de nouveau égal à « block » pour afficher, de nouveau, cet élément sur la page. Vous voyez qu'ici, on utilise plein de concepts qu'on a appris dans cette formation, on utilise l'objet « math », on utilise les événements « onload » et les événements « onclick », on utilise les propriétés du DOM, donc « createElement », « setAttribute », on utilise aussi « appendChild », on utilise plein de choses que l'on a vues dans cette formation, alors, ce n'est pas un exemple parfait, il y a encore moyen de l'améliorer, vous pourriez, par exemple, garantir que la valeur que l'on tape, dans le champ n'est pas supérieure à un maximum ou inférieure à un minimum que vous choisissez. Vous pouvez, également, par exemple, générer un bouton « Pause » pendant le compte à rebours, pour arrêter, temporairement ce compte à rebours, toutes des choses que vous savez faire, donc, si le cœur vous en dit, n'hésitez pas à explorer ce code par vous-même, et à l'agrémenter de vos nouvelles connaissances en JavaScript.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !