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>

46.1 - Contrôle des champs de saisie

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 :

Entrez une chaîne vide  :   Entrez une adresse :   Entrez un nombre :  

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. 
Les définitions des procédures test1 , test2 et test3 JavaScript sont les suivantes : 

 
<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.  
L'exemple suivant prend en compte l'évènement onClick qui correspond au clic de la souris sur un bouton, mais il est possible d'utiliser l'ensemble des évènements disponibles

46.2 - Ecriture de textes défilants

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. 

Dans le bandeau de status

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.  
L'appel à ce bandeau se fait par un appel à l'événement onLoad de la façon suivante : 

<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. 

Dans un formulaire

Il est naturellement possible et peut être même plus efficace de mettre un bandeau déroulant dans la zone texte d'un formulaire.


L'appel à ce bandeau est fait toujours dans la balise BODY et jumelé avec la précédente par la syntaxe : 
<BODY onLoad="setTimeout('deroule2()',50);setTimeout('deroule()',100)">

La fonction deroule2 est similaire à l fonction déroule() avec les adaptations suivantes : 

46.3 - Horloge en JavaScript

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)  

46.4 - Feuille de calcul


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 : 


 

Désignation
Durée unitaire
Quantité
Prix unitaire
Prix 
Total 
Ceci est assez complexe à coder mais assez instructif sur le mode opératoire de JavaScript : 
var nombre = 0 ;
//Creation de l'article produit 

function Produit (referenceP, prix, nbjour) {
 this.referenceP=referenceP
 this.prix=prix
 this.nbjour=nbjour
}
// Creation du tableau produitsUNGI

function DeclareTableau(n) {
   this.length = n
   for (var i = 0; i<= n; i++) {
     this[i] = 0 
   } 
  return this
 }
 

// Creation de l'article Commande

function Commande ( referenceC, prixunitaire, quantite , somme )
{
 this.referenceC=referenceC
 this.prixunitaire=prixunitaire
 this.quantite=quantite
 this.somme=somme
}

produitsUNGI = new DeclareTableau (6) 

produitsUNGI[0] = new Produit('*Choisir*',0,0)
produitsUNGI[1] = new Produit('Formation Découverte',1300.00,1)
produitsUNGI[2] = new Produit('Formation HTML',5700.00,3)
produitsUNGI[3] = new Produit('Formation JavaScript',4300.00,2)
produitsUNGI[4] = new Produit('Formation PERL',7800.00,4)
produitsUNGI[5] = new Produit('Formation Java',7800.00,4)
produitsUNGI[6] = new Produit('Publicite',7000,15)

commandeUNGI = new DeclareTableau (6) 
for (var i=1; i<= 10; i++) {
        commandeUNGI[i] = new Commande(0,0,0,0)}

function majligne(ligne){ 
 
  var index ;
  var total = 0 ; 
  eval ('index=document.Commande.DESIGNATION'+ligne+'.selectedIndex')
  eval ('commandeUNGI[ligne].referenceC=document.Commande.DESIGNATION'+ligne+'.value' ) 
  eval ('commandeUNGI[ligne].quantite=document.Commande.QUANTITE'+ligne+'.value' ) 
  commandeUNGI[ligne].prixunitaire=produitsUNGI[index].prix
  commandeUNGI[ligne].somme=commandeUNGI[ligne].quantite * produitsUNGI[index].prix ;
 
  
  eval ('document.Commande.DUREE'+ligne+'.value= produitsUNGI[index].nbjour') 
  eval ('document.Commande.PRIXUNITAIRE'+ligne+'.value=produitsUNGI[index].prix')
  eval ('document.Commande.PRIX'+ligne+'.value=commandeUNGI[ligne].somme')
  for ( var j = 1 ; j <= 10 ; j ++ ) {
   total += commandeUNGI[j].somme  }
  document.Commande.TOTAL.value=total 
 }
        

</SCRIPT>



Produit est un article défini par fonction. 
La fonction Declare tableau déclare un tableau de n'iporte quel type 

La fonction majligne sera appelée a chaque modification d'un champ sensible dans la ligne. 
C'est donc elle la plus intéressante à étudier. 
Comme le formulaire comprend des champs DESIGNATION1 DESIGNATION2 etc, on calcule ce champ en fonction de sa ligne. C'est pour cela qu'on est obligé d'évaluer le résultat.

Sans cette évaluation, le travail serait assez simple. 

Il faut néanmoins remarquer comment l'utilisation de tableaux pour mémoriser les informations



TABLE>
<TR>
<TH WIDTH=192><CENTER><B>D&eacute;signation</B></CENTER>
</TH>

<TH WIDTH=72><CENTER><B>Dur&eacute;e unitaire</B></CENTER>
</TH>

<TH WIDTH=72><CENTER><B>Quantit&eacute;</B></CENTER>
</TH>

<TH WIDTH=120><CENTER><B>Prix unitaire</B></CENTER>
</TH>

<TH WIDTH=120><CENTER><B>Prix&nbsp;</B></CENTER>
</TH>
</TR>


<BR><SCRIPT>for (var ligne= 1;ligne <= 10; ligne++) {
document.write('<TR><TD>')
document.write('<SELECT NAME="DESIGNATION'+ligne+'" onChange="majligne('+ligne+')">')
for ( var i = 0; i <= 6; i++) {
   document.write ("<OPTION>"+produitsUNGI[i].referenceP)
} 
document.write ('</SELECT>')

document.write ('</TD><TD><CENTER><INPUT NAME="DUREE'+ligne+'" VALUE="0" SIZE=3>')
document.write ('</TD><TD><CENTER><INPUT NAME="QUANTITE'+ligne+'" onChange="majligne('+ligne+')"')
document.write ('MAXLENGTH="3" SIZE=3">')
document.write ('</TD><TD><CENTER>')
document.write ('<INPUT NAME="PRIXUNITAIRE'+ligne+'" MAXLENGTH="10"')
document.write ('SIZE=10 onfocus="this.blur()"></CENTER>')
document.write ('</TD><TD WIDTH=120><CENTER>')
document.write ('<INPUT NAME="PRIX'+ligne+'" VALUE="" MAXLENGTH="10"')
document.write ('SIZE=10 onfocus = "this.blur()"></CENTER>')
document.write ('</TD></TR>')
        }</SCRIPT>


<TR>
<TD>
</TD>

<TD>
</TD>

<TD>
</TD>

<TD><B>Total</B>
</TD>

<TD><INPUT NAME=TOTAL VALUE=0>
</FORM>
</TD>
</TR>
</TABLE>

Dans le code on remarque ici l'utilisation de boucles en Javascript pour construire le tableau alors que le tableau est déjà initialisé en HTML

Le résultat est amusant, mais peu d'éditeurs savent gérer ce type de manoeuvres.

On montre ici l'importance des caractères ' et ", la concaténation des chaînes par + est aussi à retenir.

Haut Haut Suivant Sommaire Recherche Fenêtre Glossaire Nouveau Bientôt Courrier Souscription Aide Copyright