Les bases de JavaScript : comment travailler avec la date et l'heure

Introduction

La date et l'heure ne sont pas seulement des composants essentiels de la vie quotidienne, mais font également partie de la programmation informatique. Que vous en ayez besoin pour prendre des rendez-vous ou afficher un calendrier, il existe de nombreuses raisons pour lesquelles vous auriez besoin d'une date et d'une heure. Les applications des fonctionnalités de date et d'heure sont vastes et extrêmement polyvalentes. Cette polyvalence vient du fait que vous pouvez configurer l'heure et la date en fonction de l'utilisateur. Chaque utilisateur situé dans une zone géographique différente obtiendra un résultat différent en fonction de son fuseau horaire. Ces fonctionnalités sont utilisées pour les sites Web dotés d'interfaces de rendez-vous et de systèmes de réservation comme les restaurants.

Les programmeurs utilisent souvent JavaScript pour ajouter des fonctionnalités de date et d'heure à leur site Web. C'est parce que JavaScript dispose déjà d'une fonctionnalité intégrée pour ces aspects. Dans ce tutoriel, nous allons explorer l'objet Date plus en détail. Nous parlerons des méthodes que vous pouvez utiliser pour configurer les paramètres idéaux pour la date et l'heure sur votre site Web. Nous verrons également comment vous pouvez modifier le format et plus encore.

Qu'est-ce que l'objet Date ?

Comme nous venons de le mentionner, JavaScript dispose d'une fonctionnalité intégrée pour la date et l'heure. Elle s'appelle l'objet Date. Cet objet vous permet de modifier et de gérer les données associées à la date et à l'heure. Lorsque vous créez une instance de Date, un nouvel objet est créé. Cet objet correspond aux paramètres de date et d'heure de votre ordinateur à ce moment précis.

Pour mieux comprendre le fonctionnement de cet objet, prenons un exemple. Nous allons d'abord créer une variable. Ensuite, nous lui attribuerons une date donnée. Supposons que le jour soit mercredi et la date le 18 octobre dans le fuseau horaire de Londres (GMT). Jetez un œil à cette configuration :

Notre sortie affiche une chaîne de date. Elle se compose des données suivantes :

Jour de la semaine	Mois	Jour	Année	Heure	Minute	Seconde	Fuseau horaire
Wed	Oct	18	2017	12	41	34	GMT+0000 (UTC)

JavaScript reçoit les données via un horodatage. Cet horodatage provient du temps Unix. Il s'agit d'une valeur qui indique le nombre de millisecondes écoulées depuis le 1er janvier 1970 à minuit. Pour l'utilisateur, la date apparaît dans un format compréhensible. Si vous souhaitez obtenir cet horodatage, vous devez utiliser la méthode getTime() comme ceci :

Bien que cette valeur puisse sembler déroutante, elle représente la même chose que la chaîne de date. Il s'agit simplement du 18 octobre 2017.

Qu'est-ce que le temps Epoch ?

Le concept suivant à apprendre est le temps epoch. Il est également appelé temps zéro. Vous pouvez mieux le comprendre comme la chaîne de données 01 janvier, 1970 00:00:00 universel Temps (UTC) et l'horodatage 0 . Pour le tester, créez une nouvelle variable. Ensuite, attribuez-la à une nouvelle Date instance sur un 0 horodatage :

Le temps epoch était autrefois la norme pour les programmeurs. C'est également la méthode que JavaScript utilise pour mesurer le temps.

Formats pour la création de dates en JavaScript

Maintenant que nous savons comment créer une nouvelle instance Date avec une chaîne et un horodatage, nous pouvons parler des différents formats. Il existe quatre formats qui sont détaillés comme suit :

Cela signifie qu'il vous est possible de mentionner des dates et des heures spécifiques selon vos besoins. Vous pouvez également simplement utiliser une chaîne de données ou un horodatage comme nous en avons discuté précédemment. Pour votre compréhension, nous allons observer comment créer de nouveaux objets Date de trois manières différentes. En supposant que notre date et heure soient le 4 juillet 1776 à 12h30 GMT :

Comme vous pouvez le voir, les trois méthodes donnent la même date en sortie. Une différence est que si vous utilisez une heure antérieure à l’époque Unix (Epoch), le timestamp s’affichera avec un nombre négatif. De plus, les secondes et les millisecondes sont à 0 par défaut dans la méthode date et heure. Si vous oubliez de saisir un nombre, il sera également défini sur 0 par défaut.

Un autre aspect déroutant est que juillet est représenté par 6 au lieu de 7. Cela s’explique par le fait que la numérotation commence à 0. Gardez ces éléments à l’esprit lorsque vous créez les instances.

Utilisation de la commande get pour récupérer la date

Maintenant que la date est définie, voyons comment vous pouvez accéder à ses composants. Une façon de faire consiste à utiliser la commande get. Ce tableau présente toutes les méthodes get pour l’objet Date :

Dans cet exemple, nous allons attribuer une nouvelle date à une nouvelle variable, le 31 juillet 1980 :

Voici à quoi cela ressemblerait si vous deviez obtenir tous les composants individuels de la date à l’aide de cette méthode :

Dans certaines situations, vous pouvez n’avoir besoin que d’une partie spécifique de la date. Vous pouvez utiliser ces méthodes pour cela. Voici comment vous pouvez tester pour confirmer si nous sommes le 3 octobre :

C’est la sortie que vous obtiendriez si la date n’était pas le 3 octobre et que vous effectuiez le test.

Utilisation de la commande set pour modifier la date

Semblable aux commandes get, vous disposez des équivalents de la commande set . Cette commande vous permet de modifier les composants de la date. Ce tableau présente toutes les méthodes :

Supposons que nous voulions modifier la variable birthday de 1997 à 1980:

Maintenant, notre sortie affiche la nouvelle année. Vous pouvez également modifier de la même manière d'autres composants de la date.

Méthodes de date UTC en JavaScript

Si vous extrayez les composants de la date à l’aide de la méthode get, vous les recevrez en fonction des paramètres système locaux du fuseau horaire de l’utilisateur. Alternativement, vous pouvez le configurer pour calculer l’heure en fonction de la norme UTC. UTC signifie Coordinated Universal Time (Temps universel coordonné). Vous pouvez le faire en utilisant la méthode getUTC method. Ce tableau présente toutes les méthodes UTC pour l’objet Date en JavaScript :

Comme vous pouvez le voir, toutes les méthodes sont similaires aux commandes get . Cependant, les sorties seraient différentes. Vous pouvez tester la différence avec ce code :

Ce code vous montrera l'heure actuelle ainsi que l'heure dans le fuseau horaire UTC. Les chiffres seront les mêmes si vous êtes déjà dans le fuseau horaire UTC. La raison pour laquelle vous utiliseriez l'UTC est qu'il permet une cohérence entre les zones et régions internationales.

Conclusion

Nous avons couvert les différentes méthodes pour l'objet Date dans ce tutoriel. Cela inclut la manière de récupérer les composants de la date avec get et comment les modifier avec set. Nous avons également exploré les fuseaux horaires UTC et comment les utiliser en JavaScript.

En fin de compte, JavaScript dispose d'une multitude de fonctionnalités intégrées pour la date et l'heure. Cela rend la programmation de sites web complexes assez simple. Vous pouvez en savoir plus sur les fonctionnalités de date et d'heure de JavaScript sur le Mozilla Developer Network. Cependant, ce tutoriel devrait vous aider à acquérir les bases concernant les fondamentaux.

Voici d'autres ressources de notre blog qui faciliteront la programmation avec JavaScript :

• JavaScript : un tutoriel sur la façon d'indexer, de diviser et de manipuler des chaînes de caractères
• Travailler avec JavaScript : comment fonctionnent les prototypes et l'héritage
• Un guide sur l'ajout de JavaScript au HTML
• Un aperçu du format de partage de données JSON

Bonne programmation !