COURS JavaScript


Accueil | Les Objets JavaScript : L'objet Date

L'objet Date


Généralités

Pour les généralités, reportez vous à la page : L'objet Date, Généralités



Créer un objet Date

Comme nous l'avons dit plus haut, l'objet Date en lui même n'existe pas en JavaScript. Il faut le créer. Rassurez vous, c'est très simple. Comme d'habitude, nous devons commencer par lui choisir un nom. Comme j'ai toujours une imagination débordante, admettons que nous l'appellerons ObjetDate. C'est simple, clair, et sans possibilité de se tromper. Comme le chien de Colombo qui s'appelle "Le Chien" (clin œil aux fans de la série :-)). Il ne nous reste plus qu'à créer l'objet lui même. L'instruction est la suivante :

var ObjetDate = new Date();

Et désormais, ObjetDate est un objet JavaScript au sens strict du terme, avec ses propriétés et ses méthodes. Surtout ses méthodes, car comme propriété, il n'en a qu'une seule, que nous passerons sous silence pour le moment, car elle est d'une utilisation restreinte. Quant à ses méthodes, ce sont surtout elles qui vont nous intéresser, car elles vont nous permettre d''accéder à ce que nous voulons, c'est à dire les jours, les mois, les heures, les minutes, et bien plus encore pour en faire tout ce dont nous aurons besoin d'en faire.
Tel quel, l'objet ObjetDate, peut être visualisé. C'est tout simplement la date du jour, celle indiquée par votre ordinateur. Un détail : faites bien attention aux majuscules et aux minuscules, comme d'habitude. Pour ce qui est da l'instruction var, souvenez vous que vous n'avez besoin de l'utiliser que la première fois que vous utilisez une variable en JavaScript. Je recommande de déclarer toutes les variables en global (voir la leçon sur les variables pour celles ou ceux qui auraient oublié).
Pour vous en convaincre, cliquez sur le bouton ci dessous, et vous verrez l'objet ObjetDate :

Attention ! Selon votre Navigateur, vous n'aurez pas le même affichage. Testez le sous Netscape et sous MIE pour vous en convaincre. De plus, si vous modifiez la date interne de votre ordinateur, ce sera cette date modifiée qui sera l'objet Date. Pour être encore plus drôle, après l'an 2000, les deux navigateurs n'afficheront pas l'année de la même manière. Netscape repart de 100 et MIE affiche les quatre chiffres de l'année en entiers. Allez y comprendre quelque chose vous !!
On parle ici de la date interne de votre ordinateur !
Pas d'une date en temps universel quelconque...
De plus, une fois l'objet Date créé, il ne changera que lorsque vous rechargerez votre page HTML. Il capte la date courante en rencontrant l'instruction, et reste ainsi jusqu'à ce que la page soit rechargée ou l'instruction renouvelée.

Maintenant que nous avons ce bel objet à notre disposition, nous allons apprendre à nous en servir, en utilisant les méthodes qui lui sont associées dans JavaScript.



Les méthodes de l'objet Date.

Elles sont nombreuses et variées. Elles permettent d'avoir accès aux différents paramètres de la date, tels que le jour, le mois, l'heure etc. et en plus, elles sont modifiables (à voir dans une autre leçon), ce qui signifie que nous pouvons aussi créer des objets Date en leur donnant des valeurs que nous choisirons nous même. Comme la date de notre naissance par exemple, pour afficher notre âge exact le jour de la consultation de la page par un Internaute (utilité très limitée, je vous l'accorde, mais ça n'est qu'un exemple... pour mettre dans un C.V. toujours à jour... je sais pas moi ...).

Vous pouvez vérifier, c'est vrai ! A un jour près, vu que je n'ai pas vraiment fignolé sur les fuseaux horaires... Et demain, et tous les jours où vous regarderez cette page, ce sera mis à jour automatiquement (pour peu que votre ordinateur soit à la bonne date et sur le bon fuseau horaire, évidemment).

Comme toutes les méthodes des objets JavaScript, elles représentent ce que l'objet est capable de faire (voir la leçon sur les objets). Ici, elles sont capables chacune, de nous donner une partie de la date complète.

Accéder : Méthode : Valeur retournée : (valeurs selon la date interne de votre ordinateur)    
         
à l'année .getYear() Deux derniers chiffres de l'année (pourquoi pas ..) pour MIE et Netscape avant 2000. Mais après, MIE affichera les 4 chiffres de l'année et Netscape repartira de 100 (sic !)    
à l'année plus simplement .getFullYear() Donne les 4 chiffres de l'année pour tout le monde (plus simple non ?) Oui, mais pour Netscape, ça ne marche que jusqu'en 2037. Après, on obtient 1902 !!!    
au mois .getMonth() Entre 0 et 11 (hé oui !! Ca fait 12 en tout !)    
au jour du mois .getDate() Entre 1 et 31 (c'est plus logique, mais pas cohérent avec le reste)    
au jour de la semaine .getDay() Entre 0 et 6 (0 pour dimanche et 6 pour samedi, hé oui aussi !!)    
à l'heure .getHours() Entre 0 et 23 (normal. Ca fait bien 24 heures ! Comme tout le monde)    
aux minutes .getMinutes() Entre 0 et 59 (normal aussi! Ca fait 60 minutes par heure)    
aux secondes .getSeconds() Entre 0 et 59 (c'est cohérent ! Ca fait bien 60 secondes à la minute)    

Si vous voulez une illustration immédiate de ces différentes méthodes, avant de les étudier une à une, cliquez sur le bouton ci dessous

Comme toutes les méthodes (ce qu'un objet est capable de faire) les méthodes de l'objet Date, renvoient une valeur. Pour pouvoir se servir de cette valeur, nous devons d'abord (et c'est plus propre ainsi) la mettre dans une variable. Ensuite, seulement, nous pourrons nous servir de cette variable et de son contenu. Donc, dans ce qui va suivre, nous déclarerons d'abord une variable et nous mettrons dans cette variable les valeurs dont nous avons besoin pour travailler.


Accéder à l'année

Créons une variable qui contiendra l'année courante (selon la date interne de votre ordinateur) :
var Annee
Pour mettre l'année courante dans la variable Annee, nous n'avons qu'à écrire :
var Annee = ObjetDate.getYear();

Pas plus dur que ça. Souvenez vous que l'année courante est représentée par les deux derniers chiffres de l'année.
Cliquez ICI pour voir le résultat.

Nous verrons bien ce que ça donnera après le 1er janvier 2000 ! Quoi qu'en dise les manuels et autres documentations en ligne. Pour le moment, et jusqu'en 2000, Netscape et MIE affichent les deux derniers chiffres de l'année. Après 2000, MIE affichera les 4 chiffres de l'année entière (2000, 2001 etc.) alors que Netscape affichera 100 pour 2000, 101 pour 2001 etc. De quoi nous simplifier la vie à nous autres développeurs non ? Ce serait tellement simple si ils faisaient tous pareil... Ben non ! Ce serait trop simple, certainement.

Pour vous convaincre de tout ça, modifiez la date interne de votre machine, et testez dans différentes conditions, sous Netscape et sous MIE, avant et après 2000 ! Vous verrez, c'est très amusant :-((

Retour au tableau des Méthodes


Accéder à l'année plus simplement

JavaScript 1.3 a développé une méthode beaucoup plus simple pour accéder à l'année. La méthode .getFullYear()

Créons une variable qui contiendra l'année courante complète (selon la date interne de votre ordinateur) :
var FullAnnee
Pour mettre l'année courante dans la variable FullAnnee, nous n'avons qu'à écrire :
var FullAnnee = ObjetDate.getFullYear();

Pas plus dur que ça. Souvenez vous que l'année courante est représentée par les deux derniers chiffres de l'année.

Cliquez ICI pour voir le résultat.

A priori, cette nouvelle méthode semble fonctionner pour tous les Navigateurs capables d'interpréter JavaScript 1.3 et pour toutes les années avant et après 2000 !

Sauf que : pour Netscape, ça ne marche que jusqu'en 2037 inclus. Après, on affiche 1902 pour 2038, 1903 pour 2039 etc. et 1963 pour l'année 2999 !!! Pas très au point hein ? Y aura-t-il le Bug de 2038 ? Alors que dans la doc officielle de netscape lui même, on peut lire à l'adresse internet : http://developer.netscape.com/docs/manuals/js/client/jsref/index.htm

Traduction : "La valeur retournée par la méthode .getFullYear est un nombre. Pour les dates comprises entre les années 1000 et 9999, la méthode .getFullYear renvoi un nombre à quatre chiffres, par exemple 1995. Utilisez cette fonction pour être certain que l'année sera compatible après 2000. Utilisez cette méthode à la place de la méthode .getYear()."

On voit ce que ça donne !!!! Je ne sais pas non plus ce que ça donne sur des navigateurs de version 3.0 autant sous Netscape que sous MIE, ni sous MacIntosh. Si vous avez de ces versions de ces navigateurs, et que vous testez cette méthode, n'hésitez pas à me faire part du résultat. Par avance merci.

 

Retour au tableau des Méthodes


 

Accéder au mois

Créons une variable qui contiendra le mois courant (selon la date interne de votre ordinateur)
var Mois
Pour mettre le mois courant dans la variable Mois, nous n'avons qu'à écrire :
var Mois = ObjetDate.getMonth();
Cliquez ICI pour voir le résultat.

Mais là, ATTENTION, les mois commencent à 0 pour Janvier etc. Donc, pour avoir le véritable numéro du mois en cours, il faudra rajouter +1 pour l'utiliser dans une notation courante de style 15/10/99 par exemple !

Et c'est là que vous voyez tout de suite l'utilité des Tables que nous avons étudiées en leur temps dans la leçon correspondante : Les tables indexées . Comme nous ne pouvons pas obtenir le nom du mois en cours par une méthode directe de l'objet Date, il va falloir créer une table des mois contenant les noms des mois de l'année. Elle pourra avoir la forme suivante :

var TableMois = Array(); // déclaration de la table des mois

Puis nous remplissons la table :

TableMois[0] = "Janvier";
TableMois[1] = "Février";
TableMois[2] = "Mars";
TableMois[3] = "Avril";
TableMois[4] = "Mai";
TableMois[5] = "Juin";
TableMois[6] = "Juillet";
TableMois[7] = "Août";
TableMois[8] = "Septembre";
TableMois[9] = "Octobre";
TableMois[10] = "Novembre";
TableMois[11] = "Décembre";

 

En commençant bien par l'index 0, ce qui nous facilitera la tâche. Dès lors, nous avons accès au nom du mois facilement.
Créons une variable pour contenir le nom du mois tiré de la table TableMois :
var NomMois
L'instruction :
NomMois = TableMois[Mois];

Met le nom du mois en cours dans la variable NomMois. Pas plus compliqué que ça.
Cliquez ICI pour voir le résultat

N'est-ce pas vraiment merveilleux ? :-)

Retour au tableau des Méthodes


Accéder au jour du mois

Créons une variable qui contiendra le jour mois courant (selon la date interne de votre ordinateur)
var JourDuMois
Pour mettre le jour du mois courant dans la variable JourDuMois, nous n'avons qu'à écrire :
var JourDuMois = ObjetDate.getDate();
Cliquez ICI pour voir le résultat.

Là, pas de problème, puisque JavaScript (ou les Navigateurs) nous font l'insigne honneur de bien vouloir nous donner le véritable jour du mois, entre 1 et 31 comme tout le monde. Encore une chance !

Retour au tableau des Méthodes


Accéder au jour de la semaine

Créons une variable qui contiendra le jour de la semaine courant (selon la date interne de votre ordinateur)
var JourDeLaSemaine
Pour mettre le jour de la semaine courant dans la variable JourDeLaSemaine, nous n'avons qu'à écrire :
var JourDeLaSemaine = ObjetDate.getDay() ;
Cliquez ICI pour voir le résultat.

Mais là, ATTENTION, les jours commencent à 0 pour Dimanche etc.

Et c'est là que vous voyez encore une fois l'utilité des Tables que nous avons étudiées en leur temps dans la leçon correspondante : Les tables indexées . Comme nous ne pouvons pas obtenir le nom du jour de la semaine en cours par une méthode directe de l'objet Date, il va falloir créer une table des jours cette fois ci, contenant les noms des jours de la semaine. Elle pourra avoir la forme suivante :

var TableJours = Array(); // déclaration de la table des mois

Puis nous remplissons la table :

TableJours[0] = "Dimanche";
TableJours[1] = "Lundi";
TableJours[2] = "Mardi";
TableJours[3] = "Mercredi";
TableJours[4] = "Jeudi";
TableJours[5] = "Vendredi";
TableJours[6] = "Samedi";

 

En commençant bien par l'index 0, ce qui nous facilitera la tâche. Dès lors, nous avons accès au nom du jour de la semaine facilement
Créons une variable pour contenir le nom du jour de la semaine tiré de la table TableJours :
var NomJours
L'instruction :
NomJours = TableJours[JourDeLaSemaine];

Met le nom du jour de la semaine en cours dans la variable NomJours. Pas plus compliqué que ça non plus.
Cliquez ICI pour voir le résultat

N'est-ce pas tout aussi merveilleux que pour les noms des mois ? :-)

Retour au tableau des Méthodes


Accéder à l'heure

Créons une variable qui contiendra l'heure courante (selon l'heure interne de votre ordinateur)
var Heure
Pour mettre l'heure courante dans la variable Heure, nous n'avons qu'à écrire :
var Heure = ObjetDate.getHours();
Cliquez ICI pour voir le résultat.

Là, pas de problème non plus, puisque JavaScript (ou les Navigateurs) nous font l'insigne honneur de bien vouloir nous donner l'heure réelle entre 0 et 23 comme tout le monde. On nage dans le bonheur !

Retour au tableau des Méthodes


Accéder aux minutes

Créons une variable qui contiendra les minutes de l'heure courante (selon l'heure interne de votre ordinateur)
var LesMinutes
Notez bien que j'emploie la variable LesMinutes et non pas Minutes, car le mot Minutes est un mot réservé JavaScript. Faites-y toujours très attention ! Ensuite, pour mettre les minutes de l'heure courante dans la variable LesMinutes, nous n'avons qu'à écrire :
var LesMinutes = ObjetDate.getMinutes();
Cliquez ICI pour voir le résultat.

Là, pas de problème non plus, puisque JavaScript (ou les Navigateurs) nous font l'insigne honneur de bien vouloir nous donner les minutes de l'heure réelle entre 0 et 59 comme tout le monde. On nage dans le bonheur encore une fois!

Retour au tableau des Méthodes


Accéder aux secondes

Créons une variable qui contiendra les secondes de l'heure courante (selon l'heure interne de votre ordinateur)
var Secondes
Pour mettre les secondes de l'heure courante dans la variable Secondes, nous n'avons qu'à écrire :
var Secondes = ObjetDate.getSeconds();
Cliquez ICI pour voir le résultat.

Là, pas de problème non plus, puisque JavaScript (ou les Navigateurs) nous font l'insigne honneur de bien vouloir nous donner les secondes de l'heure réelle entre 0 et 59 comme tout le monde. On nage toujours dans le bonheur !

Retour au tableau des Méthodes


Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.