Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de JavaScript

Travailler avec des dates

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Travaillez avec l'objet Date et analysez ses nombreuses méthodes d'utilisation. Damien Bruyndonckx vous donne également quelques trucs et astuces pour bien travailler avec des dates en JavaScript.

Transcription

Dans cette vidéo, je vous propose de découvrir un autre type de données qui est souvent un peu plus complexe à maîtriser, il s'agit des dates. J'ai créé ici une variable, que j'ai appelé « today », qui est pour le moment égale à rien du tout. Quand je fais un « console.log » de « today », j'ai cette valeur « undefined », puisque cette variable ne contient pour le moment aucune valeur. Je vais mettre une valeur dans cette variable, je vais rendre ça égal à un nouvel objet « date », avec cette syntaxe « New Date », (remarquez le « D » majuscule et les parenthèses) et quand je fais ça et rafraîchis ma page, j'obtiens la date mais aussi l'heure d'aujourd'hui, du moment où ce script a été exécuté. Nous sommes le 23 mars 2016, il est pour le moment 10 h 36 du matin et 23 secondes. Je suis dans le fuseau horaire, j'ai un petit « +1 ». Voyez, c'est très précis et encore on n'a pas toute l'information ici, puisque dans le JavaScript, dans l'ordinateur, tout ça est stocké jusqu'à la milliseconde. Vous voyez qu'on peut être vraiment très précis. Si je veux créer une date qui n'est pas celle de maintenant, je peux faire une deuxième variable, je vais créer la variable « other Date ». Je vais rendre ça égal à une « New Date ». Dans les parenthèses ici, je vais passer les différentes parties de la date que je veux créer, je vais commencer par l'année par exemple, 1976 puis le mois, puis le jour. Quand je sauvegarde ceci-- je vais d'abord faire un « console.log » de cet « other Date » --et que je rafraîchis ma page, j'obtiens « le mercredi 5 mai 1976 ». Voyez que là, l'heure n'a pas été définie donc c'est 0 heure. Ça, c'est un petit peu curieux, 1976, ça correspond. Pour le jour 05, ça correspond également, mais pour le mois, j'ai 04 donc je m'attendais à avoir le mois d'avril. Non, en JavaScript les mois sont numérotés de 0 à 11 : 0 pour janvier, 11 pour décembre donc 04, c'est bien le mois de mai et si vous vouliez le mois d’avril, il fallait mettre 03. J'obtiens maintenant « le lundi 5 avril 1976 », c'est mon anniversaire. Je peux compléter ces dates par un moment, une heure, une minute et une seconde. Au niveau des heures, je vais mettre 15 par exemple, au niveau des minutes, je vais mettre 30 et au niveau des secondes, je vais mettre 00. Maintenant regardez, dans la console, j'ai bel et bien une date et un moment dans cette journée-là, c'est à peu près l'heure à laquelle je suis né d'ailleurs... Maintenant que j'ai cette autre date disponible, je vais pouvoir manipuler cette donnée. Voyez ici « console.log », j'ai « other Date », je vais mettre un point après le « other Date » et ici Brackets va me donner tout ce qui est disponible dans un objet « Date ». Vous voyez qu'il y a plein de choses qui sont disponibles ici. Et vous constatez que la plupart de ces choses commencent par « get ». Ce sont des méthodes de l'objet « Date » qui vont me permettre de récupérer les différentes parties de cette date. Par exemple, ici, j'ai « getDate », comme c'est une méthode, j'ai besoin des parenthèses et ça, ça me renvoie cinq. Cinq, c'est le numéro du jour dans le mois donc ça va de 1 à 31. Par contre, si je fais « getDay », à ce moment-là, j'obtiens « 1 » et là, j'obtiens le numéro du jour dans la semaine et ça, c'est numéroté de 0 à 6, 0 étant le dimanche, 1 c'est donc le lundi et ça va jusqu'à 6 pour le samedi. Je peux également faire « getMonth » par exemple, j'obtiens le « 3 » puisque, rappelez-vous, le mois d'avril c'est le numéro 3 puisqu'on va de 0 à 11 : 0 pour janvier, 11 pour décembre. Je peux également faire « getFullYear » comme ceci et j'obtiens 1976. Je peux aller obtenir les différentes parties de cette date, je peux même aller dans l'heure, dans les minutes, dans les secondes, si je fais « getHours » comme ceci, j'obtiens 15 heures. Si je fais « getMilliseconds », je vais même obtenir le nombre de millisecondes ici, qui est égal à 0 puisque je n'ai pas été jusqu'à définir les millisecondes quand j'ai créé cette date mais vous voyez que la méthode existe. Avec ces méthodes « get », je peux obtenir les différentes informations de cette date. J'ai aussi une autre méthode, qui est la méthode « getTime » et celle-là est un petit peu particulière parce que vous allez voir qu'elle me renvoie un très grand nombre. Il s'agit en fait du nombre de millisecondes, tenez-vous bien, entre le 1 janvier 1970 et cette date du 5 avril 1976. Cela peut paraître un petit peu bizarre mais vous allez voir que « getTime » est l'une des fonctions les plus utiles de cet objet « Date ». Démonstration, je vais créer une nouvelle date qui représente maintenant : nous sommes en 2016, nous sommes au mois de mars. Le mois de mars, c'est 02 et nous sommes aujourd'hui le 23 mars 2016. Je vais rendre mon autre date également au 23 mars 2016 Apparemment, ces deux dates, « today » et « other Date » sont maintenant les mêmes. Pourtant, regardez, si je fais un « if », voilà la syntaxe du « if », et que je demande si « today » est égal à « other Date » ? et si c'est le cas, je vais faire un « console.log » un petit message « Dates égales », par exemple. Quand je rafraîchis ma page, vous voyez que mon message n'apparaît pas dans ma console. Tout simplement parce que, pour JavaScript, ces deux dates ne sont pas égales. En fait ces deux dates ont la même valeur mais ce ne sont pas les mêmes objets. JavaScript se rend bien compte que « today » et « other date » sont deux objets différents mais il ne va pas jusqu'à l'intérieur des objets pour aller voir si la valeur contenue dans ces objets est la même. C'est pour ça que je vais avoir besoin ici de « getTime ». Avec « get Time » je vais aller chercher le nombre de millisecondes de cette date « today ». Puis avec « getTime » également, je vais aller chercher le nombre de millisecondes de cette autre date, depuis le 1er janvier 1970. Maintenant cela me permet de comparer mes dates donc j'ai mon message « Dates égales » et vous avez vu que, pour pouvoir comparer ces dates, je n'ai pas dû aller chercher le jour, le mois, l'heure, etc.. Je suis allé chercher le grand nombre de millisecondes depuis le 1 janvier 1970. JavaScript a fait le reste, a comparé ces deux nombres et s'est rendu compte que les dates étaient égales. Cette fonction « getTime » est très pratique. Mais si j'ai plein de fonctions qui commencent par « get », j'ai aussi plein de fonctions qui commencent par « set » qui me permettent de modifier les dates. Par exemple, si je fais ici « otherDate.setMonth » comme ceci, et que je passe dans cette fonction l'information « 5 », par exemple, (« 5 » ça correspondra, rappelez-vous, au mois de juin puisqu'on commence à 0 pour le mois de janvier, jusqu'à 11 pour le mois de décembre) et que je fais maintenant un « console.log » de cette « other Date ». Qu'est-ce que je vais obtenir ? Je vais obtenir, dans ma console, le jeudi 23 juin. Vous voyez bien que le mois ici, au départ c'était 02 pour le mois de mars, maintenant, grâce à « setMonth », j'ai pu changer ce mois, c'est devenu « 5 » qui correspond au mois de juin. A toutes les fonctions « get » correspond une fonction « set ». Donc j'ai « 7 Month », « 7 Day », « 7 Date », « 7 Year » etc., etc. Vous voyez que j'ai plein de choses dans ces objets « Date », je vous invite à consulter en ligne sur Internet une documentation du JavaScript pour cet objet « Date » et à passer un petit peu de temps à vous familiariser avec les différentes fonctions et différentes méthodes de cet objet « Date » que nous n'avons pas toutes vues dans cette vidéo.

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 !