Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

L’OBJET JAVASCRIPT DATE

Présentation de l’objet JavaScript Date

L’objet Date est un objet natif du JavaScript qui va nous permettre de manipuler des dates.

Les dates en JavaScript peuvent être écrites de deux manières : soit littéralement (c'est-à-dire sous forme de chaînes de caractères), soit sous forme d’un Timestamp Unix multiplié par 1000.

Le Timestamp Unix correspond au nombre de secondes écoulées depuis le premier janvier 1970 à minuit UTC (Universal Time).

En JavaScript, on va compter en millisecondes (ms). C’est donc pour cela que le nombre renvoyé par le JavaScript correspond au Timestamp Unix multiplié par 1000.

Récupérer la date actuelle

Pour récupérer la date actuelle sous forme littérale, on va tout simplement utiliser Date().

Pour afficher cette même date sous forme de nombre (le nombre de millisecondes écoulées depuis le 1er janvier 1970), on peut utiliser la méthode now() de l’objet Date.

On peut récupérer la date sous forme littérale ou numéraire

On affiche les deux écritures possibles de la date

Essayer ce code !

Comme vous pouvez le remarquer, la forme littérale est difficilement exploitable telle quelle pour nous car celle-ci suit les normes anglo-saxonnes.

Dans la suite de cette partie, nous apprendrons à mettre en forme des dates pour qu’elles s’affichent en français.

Concernant le Timestamp, celui-ci va nous être très utile dans de nombreuses occasions car d’une part il est simple de travailler avec des nombres en JavaScript et car c’est un standard partagé par la majorité des langages web.

Encore une fois, pensez bien que le nombre retourné par le JavaScript correspond au Timestamp Unix multiplié par 1000. Pour retrouver le Timestamp standard, il faudra donc diviser le nombre renvoyé par 1000.

Créer un objet de type date

Pour créer un objet de type date, nous allons cette fois-ci être obligé d’utiliser le constructeur Date() avec le mot clef new.

Nous pouvons ensuite préciser quatre types de valeurs différents en argument de notre constructeur, qui vont constituer autant de manières de créer un objet de type date.

La première façon est de ne pas passer d’argument à notre constructeur. De cette manière, l’objet créé va stocker la date actuelle.

Création d’un nouvel objet de type date

On a créé un objet Date stockant la date actuelle en JavaScript

Essayer ce code !

La deuxième manière de procéder est de passer une date littérale en argument de notre constructeur Date().

De cette manière, l’objet créé stockera la date indiquée. Evidemment, il va nous falloir écrire la date en anglais et au bon format pour que JavaScript la reconnaisse.

On crée un objet de type date en passant une date littérale

On affiche le contenu de notre objet date créé

Essayer ce code !

On peut encore préciser un nombre en argument de notre constructeur. Ce nombre va correspondre au nombre de millisecondes écoulées depuis le 1er janvier 1970.

Par exemple, il y a 604800000 millisecondes dans une semaine. Si on passe cette valeur en argument pour notre constructeur Date(), l’objet créé stockera comme date le 8 janvier 1970 (1er janvier + une semaine).

Création d’un nouvel objet JavaScript de type date avec un Timestamp en millisecondes

La date créée correspond au 1er janvier 1970 plus le nombre de millisecondes précisé

Essayer ce code !

Finalement, on va encore pouvoir créer un nouvel objet de type date en passant sept nombres en arguments à notre constructeur Date().

Ces nombres vont correspondre respectivement à l’année, le mois, le jour, l’heure, les minutes, les secondes et les millisecondes correspondants à la date qui doit être stockée dans l’objet créé.

Sachez toutefois que seuls les trois premiers nombres sont strictement obligatoires.

Création d’un nouvel objet JavaScript de type date avec constructeur Date()

On a bien créé un nouvel objet de type date

Essayer ce code !

Comme vous pouvez l’observer, si on ne précise pas l’heure, les minutes, etc. le point de référence par défaut est minuit.

Notez également qu'en créant une date de cette manière, le mois de janvier est associé au chiffre 0, février est associé à 1, juillet à 6, etc.

Les formats de date en JavaScript

Dans la partie précédente, nous avons vu quatre grandes façons de créer un objet de type date avec le constructeur Date() :

  • En ne précisant pas d’argument ;
  • En précisant une date littérale ;
  • En précisant un nombre (nombre de millisecondes) ;
  • En précisant l’année, le mois, le jour, etc.

Vous devez savoir qu’il existe plusieurs écritures valides lorsque l’on précise une date littérale en JavaScript.

Le JavaScript reconnaît en effet quatre grands types de formats de dates littérales :

  • Le format de dates ISO ;
  • Les dates courtes ;
  • Les dates longues ;
  • Les dates complètes.

Voyons immédiatement avec un exemple à quoi correspondent ces différents formats de dates.

Les formats de date JavaScript

JavaScript reconnaît différents formats de date

Essayer ce code !

Notez que généralement on préférera utiliser la norme ISO pour créer une date en JavaScript.

Chapitre précédent

Chapitre suivant