Comment utiliser les fonctionnalités date avec JavaScript

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Et voici la suite des cours consacrés au langage JavaScript.

Apprenez à utiliser l’objet Date. Vous allez le rencontrer très souvent dans votre programmation.

Tout est dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Comment utiliser les fonctionnalités date avec JavaScript

Bonjour à tous et bienvenu sur Développement Facile.

Déjà le cours dernier vous avez découvert l’objet string qui est énormément utilisé. Là vous allez découvrir l’objet date qui est également énormément utilisé, vous allez l’utiliser très souvent, et peut être même dès vos premières applications en JavaScript. Donc vous allez apprendre à manipuler des dates, récupérer la date du jour, le mois, l’heure courante etc., je vais tout vous expliquer.

Objet date : les méthodes

getDate c’est une méthodes, les méthodes de l’objet date vous avez getDate ça va vous renvoyer le numéro du jour du mois entre 1 et 31.
getDay par contre c’est le numéro du jour de la semaine entre 0 et 6, donc 0 ça correspond à dimanche et 6 à samedi.
getFullYear ça va vous renvoyer l’année sur 4 chiffres,
getHours ça vous vous renvoie l’heure avec le 0 pour minuit, attention,
getMilliseconds comme son nom l’indique ça vous renvoi le nombre de millisecondes,
getMinutes le nombre de minutes,
getMonth attention également, ça renvoi le numéro du mois, mais 0 pour janvier et 11 pour décembre. Je ne sais pas si vous avez fait attention dans un des cours précédents, j’ai utilisé la fonction getMonth et j’avais fait un +1 pour que le mois que je récupère corresponde. Pour janvier vous récupérez 0 donc il faut mettre +1 pour que ça corresponde.

getSeconds vous allez récupérer le nombre de secondes,
getTimes c’est un nombre de millisecondes écoulées depuis le 1er janvier 1970, une sorte de times temp
getTimezoneOffset ça renvoie le nombre de minutes qui sépare le lieu de l’exécution du script du méridian Greenwich, ça peut vous être utile,
getYear ça va vous renvoyer l’année sur deux chiffres pour toutes les années avant l’an 2000, et pous les années après l’an 2000, ça va vous vous renvoyer quatre chiffres donc 99 pour 1999, 2013 pour 2013.

Un petit exemple de script pour afficher la date vous faites un oDate = new date(), donc une nouvelle instance de votre objet, et vous récupérez la date, faites un petit test, rappelez-vous le cours sur les conditions if jour est inférieur à 10, rappelez-vous le cours également sur les concaténations de chaines de caractères “0” + jour pour afficher 01, 02 jusqu’à 09 pour le mois, pour le jour, pardon, ensuite pour le mois on récupère .getMonth +1 on pourrait faire if également, mois <10, “0” + le mois donc ça nous fait pour le jour, 01 pour le mois 01, 02, 03 comme ça on a toujours des chiffres sur deux, donc ça fera le premier 01/01/2014, 02/02/2014, 2 février 2014 1er janvier 2014 et on récupère FullYear et donc on fait un document.write, rappelez-vous l’objet de document, le cours dédié à l’objet document.write pour écrire dans la page HTML sans avoir besoin de la recharger, donc nous somme le 07 jour, 02 mois février, 2014 année.

Vous avez d’autres méthodes pour modifier cette date, setDate vous pouvez mettre à jour le jour du mois,
setFullYear pour modifier l’année,
setHours modifier l’heure,
setMilliseconds pour modifier les millisecondes,
setMinutes pour les minutes,
setMonth modifier le jour du mois,
setSeconds pour modifier les secondes,
setTime pour mettre à jour la date,
setYear pour mettre à jour l’année,
Tout en sachant que pour Month, pour Date, rappelez-vous 0 ça part de 0 pour janvier, 0 pour le dimanche.

parse ça permet de convertir un objet date en nombre de millisecondes écoulées depuis le 1er janvier 1970,
toLocaleString ça convertit l’objet date en une chaîne de caractères selon le format local,
toString vous connaissez toString, dans le cours précédent sur l’objet String ça va convertir l’objet date en chaîne de caractères,
toUTCString ça va convertir l’objet date en chaîne de caractères selon le format UTC (Univers Times Converter), ça convertit en millisecondes la différence entre une date et le 1er janvier 1970.

setIntervalle très pratique, setIntervalle ou setTimeout c’est la même chose, ça déclenche des instructions en fonction d’une fréquence en millisecondes, setTimeout en principe on met le nom d’attache d’une fonction et un nombre de millisecondes, 5000 millisecondes, ça veut dire qu’au bout de 5 secondes, je vais appeler ma fonction JavaScript qui va exécuter un bloc d’instruction,
clearInterval, clearTimeout ça arrête justement ce décompte, parce que setTimeout toutes les 5 secondes ça va rappeler la fonction. Donc clearInterval et clearTimeout ça reste des fonctions.

Je vous conseille d’utiliser setTimeout, c’est la dernière mise à jour dans l’appli JavaScript, il est fiable, stable, il fonctionne avec tous les navigateurs, donc utilisez setTimeout le nom de la fonction JavaScript à appeler avec le bloc d’instruction, deuxième paramètre l’intervalle en millisecondes donc l’appel de la fonction au bout de X millisecondes.

Voilà je vous ai mis, ça s’affiche sur votre écran, la fonction, la période et les arguments de la fonction, pareil setTimeout la fonction, le délai en millisecondes, et les arguments de la fonction. Très pratique vous pouvez appeler une fonction avec des arguments.

Là un exemple tout con, c’est pour créer une horloge, donc ça affiche l’heure sur la page Web de l’utilisateur, qu’est-ce qu’on fait ? Il y a un petit formulaire body onLoad, on appelle getHours directement à l’affichage de la page, en gros, chargement de la page, ça va appeler la fonction getHours, on récupère la date dans l’objet date on récupère l’heure, les minutes, les secondes, si l’heure est inférieure à 10 pareil pour les minutes et les secondes, on veut un affichage sur deux caractères au lieu d’afficher 1, 9 on affiche 01, 02, 09, et document.forms, on va attaquer le formulaire, remarquez qu’il y a un champs input de type texte donc une ligne de texte qui s’appelle heure locale, donc on fait forms.heurelocale.value, on change la valeur de ce formulaire, le contenu de ce champs texte on le modifie, on affiche l’heure locale, on fait un setTimeOut, getHours 900 millisecondes. Toutes les 900 millisecondes, on va appeler la fonction getHours, pourquoi j’ai mis 900 millisecondes et pas une seconde ? Pour être beaucoup plus précis, donc on va l’appeler tout le temps avant l’écoulement d’une seconde, ça fait qu’on sera beaucoup plus précis pour l’affichage de l’heure. Si on mettait toutes les une seconde, qu’il y a un petit décalage on ne sera pas vraiment précis, ça ne se verra pas mais on sera quand même moins précis. C’est du détail, toujours en programmation s’attarder sur les détails, justement.

Votre plan d’actions !

Alors là l’objet date ça vous offre tout un tas de possibilités pour afficher la date, l’heure locale, à votre visiteur, pour stocker la date, l’heure locale dans une base de données MySQL par exemple, utilisez l’objet date, profitez-en vous pouvez modifier votre page HTML sans la recharger le page, retrouvez un exemple de code source directement ce cours vidéo vous avez des questions posez-les également sous cette vidéo et je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source JavaScript

Retrouvez un exemple de code JavaScript avec l’objet Date.

Downloads

Comment implémentez-vous l’objet Date dans vos applications ?

Avez-vous créé une classe ou fonction JavaScript pour utiliser plus facilement l’objet Date ? Partagez votre code directement dans les commentaires ci-dessous.

Créez des Applications Hyper-Intéractives avec la Formation Gratuite JavaScript Facile !