Dans cette formation en ligne dédiée au JavaScript moderne avancé, nous allons apprendre à gérer le temps.
La gestion du temps inclut la manipulation JavaScript des dates ainsi que des heures.
Au programme JavaScript Moderne Avancé - Manipulation du temps
Cette formation avancée sur le JavaScript moderne est composée de 3 parties :
- La première partie est centrée sur la théorie.
1h30 pour connaître l'essentiel de ce qu'il y a à savoir sur la gestion des dates en JavaScript (objet Date, timestamp, afficher la date au format français, heure UTC, Zulu Time, créer des intervalles de temps...) - La seconde partie est l'application de tout ce que nous aurons appris lors de la première partie.
Je vous propose 2 projets : la création d'un chronomètre ainsi que la création d'un compte à rebours. - La troisième et dernière partie est dédiée à l'apprentissage de la librairie moment.JS.
Nous verrons cette librairie une fois que le fonctionnement de la gestion du temps en Javascript pur aura été compris et maîtrisé.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Pour suivre ce cours en ligne dans de bonnes conditions, il est fortement conseillé d'avoir des connaissances en JavaScript et notamment en JavaScript moderne. Je mets à votre disposition, un programme complet qui vous permettra de connaître toutes les bases en programmation moderne en JavaScript.
Table des matières de cette formation JavaScript (durée : 4h16m)
-
Théorie sur les dates en JavaScript
- Instanciation de l'objet date gratuit 00:04:18
- Comprendre le timestamp 00:07:37
- Manipulation du timestamp 00:09:04
- Afficher la date au format français 00:03:57
- Retourner l'heure de l'objet Date 00:03:25
- Retourner tous les éléments de l'objet Date 00:08:44
- Heure UTC 00:04:03
- Modifier tous les éléments de l'objet Date 00:05:46
- Créer une date 1/2 00:04:10
- Créer une date 2/2 00:04:37
- Le Zulu Time 00:04:21
- Manipulation du Zulu Time 00:09:07
- Créer des intervalles de temps 00:04:01
- Exercice: Afficher l'heure en direct 00:09:38
- Appel d'une fonction de Callback 00:01:39
-
Exercice : Création d'un chronomètre
- Présentation du travail gratuit 00:03:15
- Mise en place du HTML 00:03:22
- Mise en place du CSS 00:08:49
- Mise en place des bases du JavaScript 00:07:18
- Incrémentation des millisecondes 00:08:11
- Incrémentation des secondes et des minutes 00:05:04
- Désactiver le bouton GO 00:07:10
- Arrêter le chrono 00:07:43
- Rendre de nouveau actif le bouton GO 00:04:56
- On reset le chrono 00:04:45
- Réactivation des boutons 00:03:31
-
Exercice : Création d'un compte à rebours
- Présentation du travail gratuit 00:01:47
- Mise en place du HTML 00:03:53
- Mise en place du CSS 00:07:47
- Déclaration des différentes dates 00:07:50
- Calcul des secondes restantes 00:09:21
- Affichage des résultats 00:05:36
- Affichage de 0 supplémentaire 00:04:37
- Arrêter le décompteur 00:03:42
-
La librairie moment.JS
- Présentation gratuit 00:01:02
- Téléchargement de la librairie 00:04:49
- Instanciation de la librairie 00:04:39
- Affichage des différents éléments de la date 00:09:16
- Changement de langue 00:09:05
- Formatage de la date 00:03:54
- Le temps relatif 1/2 00:03:59
- Le temps relatif 2/2 00:02:36
- Exercice 1/2 00:12:38
- Exercice 2/2 00:03:41
- Méthode supplémentaire 00:05:18
-
Conclusion
- Conclusion 00:02:09
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Tuto très complet et parfaitement expliqué .
-
Merci pour ces si jolis outils! Deux observations au sujet de votre chronomètre: 1° en remplaçant 10 par 1 (au lieu de 0) dans la boîte des dixièmes de seconde, vous créez des "secondes qui durent... 9 dixièmes de seconde! (même remarque pour les minutes). 2° l'essai du doublage du 0 conduit à l'incrémentation d'une string, ce qui semble provoquer la bizarrerie (serait-ce alors une concaténation récurrente de '1' ?). Pour que ça marche, j'ai mis la ternaire dans l'affichage: boxsec.innerText = (sec<10) ? `0${sec}`: sec; etc
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
-
Que contient le fichier source ?Le code complet des exercices présents dans ce tutoriel.
note moyenne
avis laissés