|
|
|
||
|
|
|||
Techbull.com est hébergé chez Hébergement-web-québec.com
|
|
|
||
|
|
|||
Échange de bannières Québécoises
Chapitre 41 : Exercices en JavaScript
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. |
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.
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. |
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.
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 :
<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 :
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ésignation</B></CENTER>
</TH>
<TH WIDTH=72><CENTER><B>Durée unitaire</B></CENTER>
</TH>
<TH WIDTH=72><CENTER><B>Quantité</B></CENTER>
</TH>
<TH WIDTH=120><CENTER><B>Prix unitaire</B></CENTER>
</TH>
<TH WIDTH=120><CENTER><B>Prix </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. |
 |
|
|
Accueil - Techbull.com? - Nous contacter - Ajouter Un bon lien(s) |
|
|
|
| Copyright © 2000 Les Technologies Bulldog |