L'objet Date
Le Javascript est souvent utilisé ppour gérer le temps (faire un chronomètre ou une horloge en temps réel).
Toutes les informations sur les dates que l'on peut rêver d'avoir se trouvent dans l'objet Date.
En premier, il faut donc déclarer un nouvel objet:

var horloge = new Date();

Voilà déjà un bon début pour créer une horloge!

L'objet Date contient de nombreuses propriétés; en voici une liste:
getDate()donne le jour du mois
getMonth()renvoie le numéro du moin -1 (Janvier = 0)
getDay()renvoie le numéro du jour de la semaine (Lundi = 0)
getFullYear()donne l'année en 4 chiffres
getHours()renvoie les heures
getMinutes()renvoie les minutes
getSeconds()donne les secondes
getYear()retoune les deux derniers chiffres de l'anné (ex: 08

Pour afficher l'année, il faudra donc taper ceci:

var date = new Date();
document.write("Nous sommes en "+ dat.getFullYear());

Voici le résultat:

Exercice



Affichez la date EN TOUTES LETTRES. Ex:

Bonne chance (un mot d'aide: Array)
..............
..............
C'est fini?
Voici la correction:

var date = new Date();
var mois = new Array("decembre", "janvier", "fevrier", "mars", "avril", "mai", "juin", "juillet", "aout", "septembre", "octobre", "novembre");
var jours = new Array("dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi");
document.write("Nous sommes "+ jours[date.getDay()] + " " + date.getDate() + " " + mois[date.getMonth()] + " " + date.getFullYear());



Répéter une action



Javascript vous permet aussi de répeter une action, un peu comme les boucles, si ce n'est que vous pouvez décider après combien de temps. Par exemple, vous pouvez dire à Javascript de mettre à jour votre chat toutes les 3 secondes.
la fonction que l'on utilisera pour ça est:

setInterval('fonction_callback()', '3000');

Cette fonction prend deux arguments: le premier est le nom d'une fonction de callback et le second, l'interval de temps avant de répèter l'action en milisecondes.

Une fonction de call.... quoi?

Une fonction de callback est une fonction tout à fait ordinaire sauf que son nom est passé en argument d'une autre fonction comme une chaine de carctères (avec des ' '-/ Nous donnons donc à setInterval() le nom d'une fonction de callback. setInterval() va appeller cette fonction toutes les X milisecondes.

Exemple:

function actualister_chat(){
....actualisation du chat....
}
setInterval('actualiser_chat', 3000);

Avec ce code, la fonction sera appellée toutes les 3 secondes.

Le seul problème de setInterval, c'est qu'il ne s'arrête jamais. Pour stopper setInterval(), il faut utiliser la fonction clearInterval() qui prend un argument: le timer de setInterval (en gras, setInterval() lui-même).
Pour pouvoir indiquer à clearInterval() ce qu'il doit arrêter, on va stoker setInterval() dans une variable.
Exemple:

function affiche_mot(){
        document.getElementsByTagName('p')[0].innerHTML = document.getElementsByTagName('p')[0].innerHTML + ' poires';
}
document.write('<p>J\'aime les</p>');
var compteur = setInterval('affiche_mot()', 1000);
document.write('<input type="button" value="Stop!!!" onClick="javascript:clearInterval(compteur); />');

L'avantage de mettre setInterval() dans une variable est, qu'en plus de pouvoir stopper le compteur, on peut facilement gérer plusieurs setInterval().

Cependant, si vous souhaitez effectuer une seule fois une action, ce peut être lourd d'utiliser setInterval() et clearInterval(). C'est pourquoi Javascript dispose de la fonction setTimeout() qui lance une fonction UNE SEULE FOIS après X milisecondes.
La fonction setTimeout() prend deux arguments:
-le nom d'une fonction de callback (encore une)
-le délai en milisecondes
Il existe aussi la fonction clearTimeout() qui arrête le timer (l'horloge) de setTimeout().
Exemple:

function affiche_boite(){
        var compteur = setTimeout("alert('Hello')", 5000);
}
document.write('<input type="button" value="Lancer le timer" onClick="javascript:affiche_boite();" />');

Voici le résultat:

La seule chose qui change dans cet exemple, c'est que setTimeout() se trouve à l'intérieur de la fonction et ce, pour ne pas qu'il se lance dés le démarrage de la page mais juste lorsqu'on clique sur "Lancer le timer".

L'horloge

Grâce à vos connaissances, vous pouvez donc créer cette petite horloge:


Essayez de la créer par vous même, c'est un bon exercice sur les timers et les dates.

C'est fait?
Voici la solution:

<script type="text/javascript">
function rafraichir(){
        var date = new Date();
        var horloge = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
        document.getElementById('clock').innerHTML = horloge;
}
document.write('<p id="clock"></p>');
setInterval('rafraichir()', 1000);
</script>

Eh bien voilà, vous avez une merveilleuse petite horloge en temps réel.

Précédent   suivant

Creative Commons License
Sauf mention contraire, le contenu de cette page est sous licence Creative Commons
Page générée en 0.3434 secondes.
Retour en haut de la page
Imprimer cette page