Un autre objet bien utile du langage Javascript est l'objet DATE.
Il permet d'afficher la date, l'heure et même de produire des calendriers.
Découvrons cet objet.
Au besoin cliquez ICI pour obtenir des explications.
Description
Dans cet exercice nous allons créer une horloge qui affichera l'heure en temps réél.
Notions à connaître : L'objet Date possède un certain nombre de méthodes permettant d'afficher la date sous une forme plus classique.
Méthode getDate() :
elle renvoie le numéro du jour dans le mois, donc un nombre entier entre 1 et 31.
Méthode getMonth() :
elle renvoie le numéro du mois dans l'année, mais attention ce numéro est un entier entre 0 (pour janvier) et 11 (pour décembre); il faudra donc ajouter 1 pour obtenir le numéro usuel.
Méthode getFullYear() :
elle renvoie le numéro de l'année en 4 chiffres.
Méthode getHours() :
elle renvoie le numéro de l'heure.
Méthode getMinutes() :
elle renvoie le numéro des minutes.
Méthode getSeconds() :
elle renvoie le numéro des secondes.
Ajoutez une page à votre portfolio en affichant les assitants HTML FORMULAIRE et JAVASCRIPT ainsi que la directive 9147
Inscrivez dans le champ titre : Javascript Objet Date
Sélectionnez la matière : informatique
Inscrivez dans le champ No de la directive : 9147
Inscrivez dans votre page le titre de niveau 1 : Javascript Objet Date
Insérez sous le titre, en utilisant le bouton FORMULAIRE le code d'un formulaire nommé f
Insérez dans ce formulaire, en utilisant le (Bouton CHAMP TEXTE), un champ de type texte nommé t. Ce champ contiendra l'heure.
Insérez après le formulaire, en utilisant le bouton JAVASCRIPT le code qui défini le langage JAVASCRIPT
Dans ce code, insérez le code qui lancera la fonction : heure()
Insérez au dessus de ce formulaire, en utilisant le bouton JAVASCRIPT le code qui défini le langage JAVASCRIPT
Dans ce code, insérez en utilisant le bouton FONCTION , la fonction heure()
Dans cette fonction, créez une variable nommé "auj" (aujourd'hui) et une instance de l'objet Date() en écrivant : var auj = new Date(); L'objet Date contient : le jour, le mois, l'année, les heures, les minutes et les secondes.
Nous ne retiendrons que les heures, minutes et secondes.
Créez ensuite une variable nommé minu qui contiendra les minutes en écrivant ceci : var minu=auj.getMinutes();
Créez ensuite une variable nommé sec qui contiendra les secondes en écrivant ceci : var sec=auj.getSeconds();
Créez ensuite une variable nommé h qui contiendra les heures en écrivant ceci : var h=auj.getHours();
Maintenant, vous allez vérifier si le chiffre des minutes est inféreur à 10 et dans ce cas vous allez ajouter un "0" devant le chiffre des minutes en écrivant : if(minu<10) minu= "0" + minu;
Effectuez la même opération pour vérifier si le chiffre des secondes est inférieur à 10. if(sec<10) sec= "0" + sec;
Créez maintenant l'heure complète en juxtaposant l'heure, les minutes et les secondes en écrivant : h= h + " : " + minu + " : " + sec;
Notez que vous avez placé le signe " : " afin de séparer l'heure, les minutes et les secondes et que vous avez utilisé la variable h pour contenir cette expression.
Sur la ligne suivante, inscrivez le code qui insérera cette expression au champ t du formulaire f en écrivant : document.f.t.value=h;
Il ne vous reste maintenant qu'à mettre à jour l'heure à chacune des secondes. Pour effectuer la mise à jour de votre horloge, vous allez utiliser la méthode setTimeout qui permet de lancer une fonction à intervalle défini.
Cette méthode s'utilise de la façon suivante : setTimeout("heure()",1000);
Explication : la méthode setTimeout lancera la fonction heure() à intervalle de 1000 millisecondes.
En utilisant les connaissances acquises dans cette activité, ajoutez à la suite de votre formulaire le code javascript qui écrira la date (jour-mois-année) dans un nouveau champ nommé "t2" du formulaire f.
Visualisez votre page et apportez des modifications au besoin.
