In this French‑language tutorial, the presenter walks through the JavaScript Date object from creation to practical use. He first shows how to instantiate a Date with the default constructor, emphasizing the need to capitalize the constructor. He then demonstrates how to extract each component of a date using the various getter methods, pointing out quirks such as getYear returning a two‑digit offset, the zero‑based month index, and the numeric day‑of‑week mapping. The lesson explains the Unix timestamp returned by getTime, how it represents milliseconds since 1 January 1970, and why it is useful for arithmetic on dates (e.g., calculating hotel night‑stays). Next, he shows how to build a Date for a specific moment by passing year, month, day, and optionally hour/minute/second/millisecond to the constructor, again stressing the month‑zero indexing. Finally, he creates a live digital clock in the browser: a recursive setTimeout loop that rebuilds a Date each second, extracts hours/minutes/seconds, formats them with leading zeros, makes the colon separator blink by toggling it on even/odd seconds, and applies a monospace font to prevent layout shift. The tutorial ends with a brief recap and invitation to the next video.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui nous allons découvrir comment manipuler les dates. Pour créer une date en JavaScript on fait appel au constructeur Date de la manière suivante. L'objet d que je viens de créer ici contient la date actuelle avec toutes les informations nécessaires. Il ne faut pas oublier de capitaliser le constructeur Date parce que la casse est vérifiée en JavaScript. Désormais nous disposons de l'objet d qui contient toutes les informations de la date actuelle. Bon maintenant pour afficher ces informations-là on peut mettre console.log. On exécute pour voir le résultat. Alors ça nous affiche la date actuelle avec toutes les informations nécessaires. Le problème c'est que ces informations-là on ne peut pas les mettre telles qu'elles sont sur une page web par exemple. Alors on va essayer d'extraire les informations une à une comme par exemple le jour, le mois, l'année, etc. Alors on va faire appel aux méthodes de l'objet Date. On va commencer par la première méthode qui est celle de l'année. On va par exemple essayer d'afficher l'année en cours. On va mettre console.log On prend l'objet d que l'on vient de créer et on va lui associer la méthode getYear avec un Y majuscule. Bon, maintenant quand j'exécute, bon, je vais voir que ça m'affiche 119. Bon, ça fait référence à l'année 2019. Ici c'est un préfixe qui signifie le siècle. Bon, si on a un 0, ça veut dire si on a tout simplement la valeur 19, ça fait référence à l'année 1919 et non pas à 2019. Mais il est préférable d'afficher l'année sur 4 chiffres. Alors on va mettre ici getFullYear. Donc quand j'actualise, ça m'affiche 2019. Si je veux récupérer le mois, je vais mettre getMonth. Donc maintenant quand j'exécute, ça m'affiche 0. En fait, en JavaScript, les mois commencent par 0. 0, ça fait référence à janvier et 11, c'est décembre. Alors dans ce cas de 0, ça signifie tout simplement le mois 1 ou bien le mois janvier. Il y a aussi getDate qui retourne la date d'aujourd'hui. Dans ce cas c'est 20, on est le 20 janvier, alors ça me retourne la valeur 20. Il y a aussi getDay. getDay va me retourner un nombre compris entre 0 et 6. 0 ça fait référence au jour dimanche, 1 c'est lundi et 6 c'est samedi. Donc puisqu'on a 0, alors c'est un dimanche. Il y a aussi getHours qui me retourne l'heure actuelle. Dans ce cas, il est 19 heures. Il y a aussi getMinutes. Faites toujours attention aux majuscules. Bon, ça me retourne les minutes actuelles, donc il est 19 heures 14 minutes. seconds qui retourne les secondes actuelles. Bon, c'est 26 secondes. Quand j'actualise, la valeur change systématiquement. Bon, c'est 28, etc. Il y a aussi getMilliseconds qui retourne les millisecondes actuellement parce que JavaScript est tellement précis qu'il peut aller jusqu'aux millisecondes. Il y a aussi getTime. getTime, ça retourne ce que l'on appelle le timestamp Unix. Bon, quand j'actualise pour voir le résultat, ça m'affiche une valeur qui ressemble à ceci. Je vais pas actualiser, je vais voir que la valeur change. Voilà. En fait, le timestamp, ça correspond en JavaScript au nombre de millisecondes qui se sont écoulées depuis le 1er janvier 1970 à minuit. C'est une date de référence utilisée dans d'autres langages de programmation comme Java ou bien PHP, etc. Bon, l'essentiel c'est que ici ça retourne un nombre entier qui représente le nombre de millisecondes écoulées depuis cette date-là. Bon, la question qui s'impose, à quoi ça peut servir? Tout simplement, c'est pour faire des opérations arithmétiques sur les dates comme l'addition ou bien la soustraction. C'est-à-dire, imaginez que vous voulez développer un site web ou bien une application qui permet la réservation de chambres d'hôtel. Le client, quand il va se rendre sur votre site, doit fournir les dates, la date d'arrivée, la date de départ. Le site doit automatiquement calculer le nombre de nuitées que le client envisage passer au sein de l'hôtel. Alors, pour faire ces opérations, c'est-à-dire la soustraction de 2 dates, il suffit de passer par ce qu'on appelle le timestamp Unix ou bien le getTime en JavaScript. Bon, maintenant que nous avons vu l'objet Date, comment on peut le manipuler, n'oubliez pas qu'ici c'est la date courante. Bon, imaginez qu'on veut faire référence à une date différente de la date courante. Dans ce cas, on va passer au constructeur les informations dans l'ordre suivant: l'année, le mois, puis le jour. Par exemple, mettre ici 2019, on va mettre le mois 0, c'est-à-dire janvier, et 1, c'est-à-dire le 1er janvier. Dans ce cas, le getTime que je vais afficher fait référence au 1er janvier. Bon, puisque j'ai pas spécifié les heures, les minutes et les secondes, alors c'est automatiquement à minuit. Sinon, je peux carrément spécifier les heures, les minutes et les secondes. Par exemple, 23 heures 59 minutes et Voilà, 0. Bon, ça veut dire que c'est à 23h59'00. Dans ce cas, le getTime que je vais afficher ne change pas. Regardez, j'actualise la page, ça change pas. C'est normal parce que j'ai fixé la date que j'ai passée au constructeur. Alors, le plus important, c'est l'ordre. Nous avons l'année, le mois. Il faut pas oublier de commencer à 0 pour dire janvier, c'est 0. 1, c'est le jour. Ensuite, vous avez les heures, les minutes et les secondes. Vous pouvez aussi spécifier les millisecondes si vous voulez une meilleure précision. Maintenant, nous allons essayer de faire un exemple, c'est afficher l'horloge sur le navigateur. Alors pour ça, on aura besoin d'un formulaire, on va par exemple form name et foo. Dedans, je mettrai une zone de texte Voilà, donc la taille 8 parce que j'aurai besoin de 8 caractères. Ensuite, au chargement de la page, j'appelle la fonction f. Et la fonction f, il soit récursif parce qu'il va rafraîchir la date chaque seconde. Donc setTimeout f chaque seconde, ça fait 1000 millisecondes. Et à chaque fois, je vais créer une date, bon, égal new Date, et je vais extraire les informations de la date, à savoir l'heure les minutes et les secondes. On va mettre par exemple h= d.getHours, m= d.getMinutes et s= d.getSeconds. Ensuite, je vais afficher dans la zone de texte les informations de l'horloge. On va mettre ici document.info horloge.value= par exemple h plus, mettre ici un espace ou bien deux points si vous voulez, plus m, c'est une concaténation, voilà, plus s. Bon, j'exécute pour voir le résultat. Bon, je vais masquer ça. Bon, vous avez vu ici que donc les secondes changent de cette manière. Voyons ça dans ceci. Voilà, il faut juste prendre en considération que les zéros initiaux ne sont pas pris en compte, c'est-à-dire que si on arrive par exemple à 0:00, il va afficher un seul zéro. Même chose, pour une seconde il va afficher 1 et non pas 01. Alors il faut ajouter le 0 initial manuellement. Alors là, ce qu'on va faire c'est on va mettre par exemple une condition, ça veut dire si h est inférieur à 10, alors je vais ajouter un 0 initial. Par exemple s'il est 9 heures du matin, je ne vais pas afficher 9 mais 09. On mettrait donc la nouvelle valeur de h égale à 10 concaténé avec le h. Bon, je vais faire le même traitement pour les minutes et les secondes. Bon, et les secondes aussi. Voilà, donc maintenant j'actualise. Bon, rien n'a changé réellement parce qu'on est toujours au-dessus de la valeur 10, mais l'essentiel c'est qu'on a réglé le problème des zéros initiaux. Il reste un truc, c'est Par exemple, on veut faire clignoter les deux points pour que ça ressemble à une vraie horloge. Alors comment on va faire? On va ajouter ici, nous avons fixé le caractère deux points, on va le remplacer par une variable que j'appellerai sep pour dire séparateur. Et ici, je vais spécifier la valeur de sep. Par exemple, si je mets sep égal à deux points, alors je n'ai rien changé, ça veut dire que les deux points vont persister. Mais maintenant je veux alterner entre deux points et espace. C'est-à-dire que je vais afficher deux points et espace selon les secondes, s'ils sont pairs ou bien impairs. Alors je mettrai ici une condition, voilà, if Si les secondes modulo 2 est égal à 0, c'est-à-dire si les secondes sont paires, alors le séparateur dans ce cas est égal à deux points. Sinon, else, alors le séparateur est égal à un simple espace. Dans ce cas-ci, les secondes sont paires, j'affiche deux points, sinon j'affiche espace. Et ça donnera l'impression que les deux points clignotent de cette manière. Vous avez peut-être remarqué qu'il y a un petit décalage parce que l'espace occupé par un espace blanc est différent de celui occupé par deux points. Je peux régler ça avec un simple CSS en appliquant du monospace. Ici je vais mettre un style local, par exemple font-family monospace. Bon, ça veut dire que c'est une police uniforme. Donc maintenant on n'a plus le problème de décalage parce que les caractères monospace, ils occupent le même espace quelle que soit leur nature. Donc que ce soit deux-points, espace, virgule, peu importe. Donc voilà, maintenant nous avons réglé ce problème et l'horloge est bel et bien affichée comme on le souhaite. Merci pour votre attention et à la vidéo prochaine.
