de l'onglet Javascript...Il est très facile d'incorporer la date du système et/ou l'heure dans une de vos pages HTML, grâce à cet assistant de WebExpert 5.
Pour lancer l'assistant, cliquez sur le bouton
de l'onglet Javascript...
Ici, on emploie les méthodes associées à l'Objet Date ([getDate()],[getMonth()]), mais pour ce faire, il faut d'abord créer l'Objet Date, par le code suivant, qui donne la date du système :
Le nom donné "adate" est choisi arbitrairement. Ensuite, il suffit d'employer les méthodes correspondant au jour [(getDate()] et au mois [(getMonth()] et de la date qui sont donnés en chiffre. Si vous avez choisi l'option la plus complète (par défaut), à savoir les mois exprimés en lettre, il faut donc créer des instructions (if) imbriquées qui vont remplacer le chiffre (1...12) par un chaîne de caractères correspondante (janvier....décembre), par exemple pour janvier :
Sur les systèmes qui sont adaptés à l'an 2000 (calcul de la date sur quatre chiffres), il n'est plus nécessaire de vérifier si l'année du système [adate.getYear()] est supérieure à "99", dans le cas inverse (date sur deux chiffres), le script doit ajouter 2000 à la valeur de "adate",ajouté d'un nombre d'espace, pour centrer la chaîne. Vérifiez si le script a bien changé l'ancienne valeur de "1900" en "2000" pour les vieux systèmes qui travaillent encore sur deux chiffres pour la date (bug de l'an 2000). Cette vérification n'est plus nécessaire sur les systèmes adaptés...
Le code "date = " " + date;" est inséré pour centrer la chaîne.
Voici le code pour rappel :
Enfin, on attribue (comme dans le script de la bannière), la valeur de la variable date à l'<INPUT> (NAME=date) de l'élément <FORM> (NAME=Temps21) :
Le délai attribué, pour le timer, en msec (10000) [1000 = 1 sec], relance la fonction, pour réactualiser la date.
Même procédé, d'attribution de la valeur de la fonction (hhmmss) à un champ <INPUT> (NAME=heure) de l'élément <FORM> (NAME=Temps11). On emploie dans le script les méthodes associées à l'Objet Date [(getHours()],[getMinutes()]), en créant également l'Dbjet Date ([adate = new Date()]). Comme le chiffre des minutes et des secondes est parfois plus petit que 10, pour ne pas avoir un mauvais effet visuel, le programmeur à ajouté une petite condition :
if (min <10) hhmmss +=":0" + min;
else hhmmss += ":" + min;
sec = adate.getSeconds();
if (sec <10) hhmmss +=":0" + sec;
else hhmmss += ":" + sec;
Un "0" sera donc ajouté à la variable "min" et "sec" : de cette manière, par exemple 8 donnera ":08" et dans le cas ou les minutes et secondes seront supérieures à 10, les variables seules interviendront dans la chaîne hhmmss. Le délai attribué (1000), en msec, pour le timer, relance la fonction, pour réactualiser l'heure affichée, et bien sûr, ici le délai sera d'une seconde (ou plus si l'on change ce paramètre pour une actualisation plus espacée).
Il est plus pratique ici d'enlever le code inséré (<HEAD> - <BODY> et corps du document) plutôt que de changer le script lui-même et de relancer l'assistant.
Si vous désirez une visualisation plus complète, c'est-à-dire avec "min" et "sec", vous ajoutez dans le format complet les chaînes "h","min" et "sec" aux variables respectives, ce qui donnerait, pour la partie de code à changer :
adate = new Date()
hhmmss += adate.getHours()+ "h";
min = adate.getMinutes();
if (min <10) hhmmss +=":0" + min + "min";
else hhmmss += ":" + min + "min";
sec = adate.getSeconds();
if (sec <10) hhmmss +=":0" + sec + "sec";
else hhmmss += ":" + sec + "sec";
Enfin, si vous désirez placer les deux <INPUT> l'un à côté de l'autre, vous les placez dans un tableau (comme dans cette page) ou en positionnement dynamique, tout en ne modifiant pas leur "ID" puisque les scripts s'en réfèrent pour attribuer la valeur à chaque <INPUT> contenu dans chaque <FORM>.
Vous pouvez choisir des formats différents pour les deux scripts, et dans ce cas, l'assistant créera des fonctions plus simples, où par exemple, les jours (chiffre) ne seront pas remplacés par des chaînes (lundi...) et pour le script de l'heure, en supprimant la variable (sec) : soit en supprimant de la chaîne (hhmmss) la valeur des seconde, sans rien ajouter, soit en ajoutant (h ou heure) pour donner (17 heure 15) ou (17 h 15).
Enfin, si vous ne voulez pas employer des espaces pour positionner (centrer) plus ou moins convenablement le contenu des <INPUT>, ajouter un attribut de style à ceux-ci (STYLE="text-align:center"). Dans ce cas, il faut changer les lignes de code des scripts qui ajoutent des espaces, puisque cela n'est plus nécessaire. C'est la raison pour laquelle il est donné une valeur si grande, dans cette page, à la largeur des zones de saisie (l'effet de centrage ne serait pas aussi net avec des espaces...) avec en plus, d'autres attributs de style (font-family:Arial;font-weight:bold;color:green etc.).
Le seul petit problème actuel, c'est que seul Internet Explorer 4.x accepte ces attributs de style, donc pour rendre cela compatible avec Netscape, il faut soit laisser le code tel quel (avec des espaces pour centrer la chaîne) ou mettre une condition devant les lignes de codes avec espaces, qui ne seront employées que pour Netscape (avec des espaces supplémentaires ici puisque la zone de saisie est plus grande) : c'est ce qui fut réalisé dans cette page...
