|
35.3 exemples : objet date |
  copyleftSee You Why? |
Nous savons que les dates avec les méthodes applicables sont des outils remarquables pour tester des durées courtes (avec une précision du 1/1000 seconde) ou longues.
Dans les deux séquences précédentes relatives à l'objet Date(), nous avons déjà :
Si l'on crée un objet de type Date(), rien ne nous empêche d'en créer d'autres à d'autres moments, ou d'affecter une nouvelle valeur à un autre moment.
Ainsi, en début de page (au moment de créer le menu qui se trouve en haut de chacune de nos pages, nous créons arrivee, un premier objet qui retiendra la date (et tous ces paramètres) d'arrivée sur la page :
arrivee = new Date();
Au même endroit, nous créons la fonction temps() qui sera appelée au moment voulu. Ce moment pourrait être lorsque l'internaute quitte la page <body onunLoad="temps();" ou lorsque l'internaute actionne un bouton (cela a été notre choix).
Dans cette fonction, nous créons un deuxième objet que nous avons baptisé nu retiendra la date de sortie ou du clic...
puis, comme nous ne pouvons additionner ou soustraire des dates, nous convertissons en millisecondes écoulées depuis le 1/1/1900 chaque objet Date() et faisons la différence de deux valeurs exprimées en msec. que nous stockons dans la variable appelée sec,
comme nous savons que sec est pour l'instant, exprimée en millisecondes, nous divisons par 1000 et stockons le résultat dans la même variable nommée sec, il faut bien économiser les variables utilisées,
il n'y a plus qu'à afficher le message avec la valeur sec calculée de secondes, d'où :
function temps() {
nu = new Date();
sec = nu.getTime() - arrivee.getTime();
sec = sec / 1000;
alert("Vous êtes sur cette page depuis "+sec+ " secondes.");
}
Le lecteur aura compris que je pouvais n'écrire qu'une seule ligne pour l'affectation de la variable sec, à savoir :
sec = nu.getTime()/1000 - arrivee.getTime()/1000;
voire même :
sec = (nu.getTime() - arrivee.getTime())/1000;
qui diminuera le nombre d'opérations à effectuer par l'ordinateur de votre internaute visiteur.
Il n'y a plus qu'à créer le bouton appelant la fonction de la manière suivante :
... cliquer sur ce bouton : <input value="Depuis combien de temps êtes-vous sur cette page ?" type="button" onClick="javascript:temps();">
Si l'on admet qu'une image qui clignote est une image qui apparait un certain temps pour disparaitre un certain temps et que disparaitre peut être assimilé à faire apparaitre une autre image transparente, on comprendra facilement que l'on puisse faire clignoter une image, le tout étant de fixer les temps d'apparition et de disparition de celle-ci.
Le choix de l'image ne devrait pas poser de problème. Nous allons prendre comme image un sigle de CUY, dont l'adresse relative est "../../images/logocuy1mini4.gif" et une autre image vide, dont l'adresse relative est "../../html/typoweb/videj.gif" qui n'est autre qu'une image transparente de 1 pixel sur 1... plus petit, on ne peut pas ;o) . Dans le <body>, donnons l'instruction de faire apparaitre le logo CUY et surtout sans oublier de donner un nom à cette image (ici : "clignote") :
<img name="clignote" src="../../images/logocuy1mini4.gif" width="60" height="40">
 |
tab_img qui contiendra l'adresse de nos deux images (dont une sera notre logo et l'autre d'un seul pixel qui pourrait même être de couleur transparente) :tab_img = new Array("../../images/logocuy1mini4.gif","../../html/typoweb/videj.gif");var i_compteur = 0;setInterval("if (++i_compteur==2) i_compteur=0;"+"document.clignote.src = tab_img[i_compteur];"
,750);
Ne le dites à personne, vous venez de découvrir ici l'essentiel des images clignotantes de la page d'accueil de CUY, sauf que là :
* il y a 3 images différentes
et le choix de l'image modifiée est aléatoire ;
* chacune peut avoir une quinzaine de valeurs
et le choix de la valeur suivante est aléatoire ;
* le délai entre chaque changement est aléatoire.
On ne s'occupera pas ici de la manière de recueillir la date de naissance. On la fixera dans la première ligne du script ; la théorie vue précédemment nous a indiqué que deux formats étaient corrects : pour le 7 juin 1953, on écrira soit date_naiss=new Date("June 7, 1953 11:30:05"), soit date_naiss=new Date(1953,5,7) où l'on n'oubliera pas que juin, le 6e mois, aura l'indice 5...
Il suffit alors de faire la différence entre l'année actuelle et l'année de naissance et, si l'anniversaire n'a pas encore eu lieu, retirer un an. On en arrive alors à rédiger le script de la manière suivante :
date_naiss=new Date(1953,5,7);
nu = new Date();
ans = nu.getFullYear()-date_naiss.getFullYear();
anniv_en_cours = new Date(nu.getFullYear(),date_naiss.getMonth(),date_naiss.getDate());
if (nu < anniv_en_cours) {
ans--;
}
alert("Vous avez aujourd'hui " + ans + " ans.");
Notre exemple montre que l'on peut comparer deux objets Date(). Cependant...
Attention : une erreur fréquente lorsqu'on veut comparer des dates est d'oublier que l'objet Date a une précision au millième de seconde... n'espérez donc jamais tester l'égalité de deux dates pour envoyer une carte de bons vœux ;o).
Ainsi, dans notre exemple, nu dépend de l'heure qu'il est à l'instant, mais anniv_en_cours est supposée être à minuit, zéro seconde et 000 millème de seconde.
voir suite >>>
voir suite >>>
voir suite >>>