Chapitre 46 : Exercices en JavaScript
Chapitre 46 : Exercices en JavaScript
| Dernière mise à jour | 8 mars 1996 | Auteur | Gilles Maire |
| Serveur | http://www.imaginet.fr/ime/javaex.htm | Adresse | Gilles.Maire@UNGI.com |
Après les chapitres théoriques Introduction
à JavaScript et JavaScript référence,
regardons d'un point de vue pratique des exemples de programmation de ce
langage si proche du HTML.
Remarquons au passsage, le nombre d'exemples déjà présents
tout au long du chapitre référence.
Nous adopterons la convention suivante dans toute la suite de ce chapitre
:
Ainsi le code suivant :
<HTML>
<HEAD>
<SCRIPT language=JavaScript>
function OuvrirFenetre ()
{
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type=button name=Button1 value=appuyer
onclick=OuvrirFenetre()>
</FORM>
</BODY>
</HTML>
sera noté avantageusement comme ceci :
< SCRIPT>
function OuvrirFenetre ()
{
}
< SCRIPT>
<FORM>
<INPUT type=button name=Button1 value=appuyer
onclick=OuvrirFenetre()>
</FORM>
L'application la plus importante dans l'utilisation du langage HTML est
le contrôle des masques de saisies. En effet ceux-ci peuvent s'avérer
coûteux en temps CPU sur le serveur HTTP chargé de réceptionner
les données entrées par les utilisateurs.
Nous allons mettre en oeuvre une procédure chargée de contrôler
ces saisies. Prenons la forme suivante que je vous propose de tester :
Ce formulaire est défini par la programmation suivante :
| <FORM> Entrez une chaîne vide : <INPUT
NAME=Texte1> <INPUT TYPE=button NAME=bouton1 VALUE=Test1 onClick="test1(this.form)">
Entrez une adresse : <INPUT NAME=Texte2> <INPUT TYPE=button NAME=bouton2 VALUE=Test2 onClick="test2(this.form)"> </FORM> Entrez un nombre : <INPUT NAME=Texte3> <INPUT TYPE=button NAME=bouton3 VALUE=Test3 onClick="test3(this.form)"> </FORM> |
La définition du formulaire est une définition classique
à laquelle on ajoute l'événement onClick
qui est exécuté lors d'un clic sur le bouton.
Trois procédures sont appelées ici, il s'agit de test1, test2 et test3qui doivent être définie dans la partie HEAD ou à la rigueur juste avant la définition FORM. |
<SCRIPT language=JavaScript>
function test1(form) {
if (form.Texte1.value == "")
alert("entrez maintenant une chaîne non vide")
else
alert("entrez maintenant une chaîne vide")
}
function test2(form) {
if (form.Texte2.value == "" ||
form.Texte2.value.indexOf('@', 0) == -1)
alert("entrez une adresse");
}
function test3(form)
{
var erreur = 0 ;
for (var i = 0; i < form.Texte3.value.length ; i++)
{
var chaine = form.Texte3.value.substring (i, i + 1);
if (chaine > "0" || "9" < chaine)
{
erreur=1 ;
}
}
if (erreur == 1 )
{
alert ("entrez un nombre" ) ;
}
}
</SCRIPT>
|
C'est le couple de balise SCRIPT qui permet de définir les
fonctions JavaScript.
Chacune des procédures prendra en argument le formulaire qui généralement est appelé par this.form pour le formulaire courant ou qui peut être désigné par les indices du tableau forms[]. La valeur d'un champ du fomulaire est traité par l'indexation form.Texte1.value sachant que Texte1 est ici le nom de l'un des champs du formulaire. La fonction alert est bien commode pour afficher un message d'erreur. |
Ecrire un texte défilant dans une page est du plus bel effet, cet affichage peut être fait dans la barre d'état ou dans une zone texte.
Regardons d'abord le code de la fonction pour l'écriture dans le bandeau de status.
<SCRIPT>
// mettre ici le texte de votre choix
var Texte="UNGI (c) 1997 ";
// mettre ici la longueur de chaîne affichée qui doit
// être plus longue que Texte
var Taille=100;
// mettre ici le délai en milliseconde entre deux
// affichages
var Delai = 100 ;
// position de départ
var Position=Taille;
// variables privées
var Longueur=Texte.length;
function deroule()
{
Position -- ;
// la chaîne va se déplacer vers la gauche.
var Tampon="";
// et donc la chaîne va grossir
var i ;
if (Position == 0) {
Position=Taille;
}
for ( i=0; i<Position; i++)
{
Tampon=Tampon + " ";
}
Tampon = Tampon + Texte.substring(0,Taille-i);
window.status = Tampon;
setTimeout("deroule()",Delai);
}
</SCRIPT>
|
Cette partie du code est encadrée dans un couple de balise
SCRIPT avant l'appel, dans la partie HEAD ou dans la partie BODY.
Les commentaires commencent par les symboles // et condernent toute la ligne. La déclaration porte ici sur toute la durée de vie de la page. La fonction déroule (avec l'accent qui est autorisé en JavaScript) sera appelée de façon répétitive. C'est la varibale globale "Position" qui va faire tout le travail de scrolling en s'incrémentant. Tampon est construit avec des caractères blancs et complété avec le début de la chaîne. On remarque la temporisation et l'appel récursif par l'appel setTimeout. |
<body onLoad="deroule();return true;">
Notons que la balise BODY peut être appelée plusieurs fois, ainsi cette ligne peut-elle être mis n'importe où dans la page.
Il est naturellement possible et peut être même plus efficace de mettre un bandeau déroulant dans la zone texte d'un formulaire.
<BODY onLoad="setTimeout('deroule2()',50);setTimeout('deroule()',100)">
La fonction deroule2 est similaire à l fonction déroule() avec les adaptations suivantes :
<FORM NAME=FORM><INPUT SIZE=100 NAME=Bandeau>
Il est très facile d'afficher l'heure en JavaScript. Ceci est presque
trivial si l'on affiche l'heure en texte par utilisation des procédures
getHours() et getMinutes().
Nous affichons plutôt l'heure avec des images de 0.gif à
9.gif représentées sous forme de bitmap : Regardons comment cela se programme :
<SCRIPT>
// UNGI(c) 1996 Libre d'utilisation
// en laissant le Copyright
var IMAGE;
Heure2IMG();
function Heure2IMG() {
IMAGE = ""
Heure = new Date();
var H = Heure.getHours();
var M = Heure.getMinutes();
if (M < 10)
M = "0" + M
H = "" + H
M = "" + M
for ( i = 0; i< H.length; i ++) {
IMAGE += "<IMG SRC=gif/" +
H.substring (i, i+1) + ".gif >"
}
IMAGE += "<IMG SRC=gif/p.gif >"
for ( i = 0; i < M.length; i ++) {
IMAGE += "<IMG SRC=gif/" +
M.substring (i, i+1) + ".gif >"
}
}
document.write(IMAGE)
</SCRIPT>
|
La variable IMAGE va contenir une séquence de <IMG SRC=gif/x.gif>
pour afficher l'heure sous forme digitale. Le fichier p.gif contient le
séparateur heure minute. On aura donc 11 fichier gif de 0.gif à
9.gif et p.gif
La fonction Heure2IMG va faire mettre la variable IMAGE à jour. Les variables H et M sont des valeurs entières qui contiennent l'heure et les minutes. On force d'ailleurs les minutes sur deux digits. On remarque que la séquence H = "" + H transforme la variable H en une chaîne de caractères.<¨P> Pour afficher l'heure il suffit d'appeler la fonction write avec en argument la variable IMAGE. document.write(IMAGE) |
Faire des calculs dynamiques est chose aisée en JavaScript. Nous
allons étudier ici un exemple souvent exposé au sujet de
JavaScript, celle d'une facture :