Stephane Genaud
2005
Revision : 1:17 Date : 2007 01 1011 : 33 : 17
1 Introduction 5
1.1 JavaScript est utilise co^te client . . . . . . . . . . . . . . . . . . . . . 6
1.2 JavaScript est interprete . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 Ou et comment inserer du JavaScript? . . . . . . . . . . . . . . . . . 7
2 Le langage 11
2.1 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.1.1 Declaration et lecture/ecriture . . . . . . . . . . . . . . . . . 11
2.1.2 Types de donnees . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.1.3 Exemples de declaration . . . . . . . . . . . . . . . . . . . . . 13
2.2 Operations, expressions . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3 Commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.4 Deroulement d’un programe . . . . . . . . . . . . . . . . . . . . . . . 14
2.4.1 La sequence . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.4.2 Structures de contro^le . . . . . . . . . . . . . . . . . . . . . . 14
2.4.3 Fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.5 Portee des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.6 Les types de donnees en JavaScript . . . . . . . . . . . . . . . . . . . 17
2.6.1 Le type booleen . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.6.2 Le type entier . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.6.3 Le type chaine de caracteres . . . . . . . . . . . . . . . . . . . 17
2.6.4 Les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.6.5 Conversion de type . . . . . . . . . . . . . . . . . . . . . . . . 20
3 Exercices corriges 23
3.1 Fonction simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.2 Calcul d’une moyenne . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.3 Calcul de distance . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.4 Ecriture de la fonction factorielle . . . . . . . . . . . . . . . . . . . . 25
3.5 Ecriture de la fonction est premier . . . . . . . . . . . . . . . . . . . 25
3.6 Un rendeur de monnaie . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.7 Un rendeur de monnaie (general) . . . . . . . . . . . . . . . . . . . . 27
4 DHTML : JavaScript et HTML 29
4.1 Evenements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.2 Notation orientee objet . . . . . . . . . . . . . . . . . . . . . . . . . . 30
4.2.1 Classes et objets . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.2.2 Les methodes des objets . . . . . . . . . . . . . . . . . . . . . 32
4.3 Les objets DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
4.3.1 Modeles DHTML et DOM . . . . . . . . . . . . . . . . . . . . 32
4.3.2 Les objets instancies . . . . . . . . . . . . . . . . . . . . . . . 33
4.3.3 Comment designer les elements HTML . . . . . . . . . . . . . 34
TABLE DES MATIERES
4.3.4 Designation de l’objet courant : this . . . . . . . . . . . . . . 36
4.4 Utilisation des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
4.4.1 La classe Window . . . . . . . . . . . . . . . . . . . . . . . . . 37
4.4.2 La classe Document . . . . . . . . . . . . . . . . . . . . . . . . 39
4.4.3 La classe Image . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4.4.4 La classe Form . . . . . . . . . . . . . . . . . . . . . . . . . . 40
4.4.5 Quelques elements de la classe Form . . . . . . . . . . . . . . 41
A Objets - manuel de reference 49
A.1 anchor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
A.2 array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
A.3 button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
A.4 checkbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
A.5 Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
A.6 document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
A.7 form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
A.8 frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
A.9 hidden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
A.10 history . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
A.11 Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
A.12 link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
A.13 location . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
A.14 Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
A.15 navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
A.16 password . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
A.17 radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
A.18 reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
A.19 select . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
A.20 string . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
A.21 submit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
A.22 text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
A.23 textarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
A.24 window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Chapitre 1
A propos de ce document Ce document ne suppose que tres peu de connaissances pre-requises. Des notions de HTML permettront neanmoins de faire clairement la distinction entre le JavaScript et le HTML quand ces deux langages sont presents dans un m^eme texte. Le but principal est d’abord d’illustrer des concepts de base d’algorithmique et de langage de programmation. JavaScript n’a pas ete choisi pour ses aspects didactiques mais pour ses atouts pratiques : les navigateurs modernes les plus repandus possedent tous un interpreteur Javascript permettant de tester simplement ses programmes, et quasiment n’importe ou.
J’esaye de completer ce document en fonction des remarques des lecteurs ou des evolutions technologiques. Toutes les remarques (notamment les corrections d’erreurs) sont donc les bienvenues.
| avaScript est un langage de script oriente-objet utilise pour le developpement J d’applications internet. Ce langage a ete developpe par la societe Netscape Corporation, qui l’a introduit, pour la premiere fois dans son Navigator 2.0 en 1996. Netscape met a disposition sur son site un guide de reference complet du langage [Net98]. A n de rendre ce langage accessible a des navigateurs concus par d’autres entreprises, un procede de normalisation a ete entrepris des 1996. La norme porte le nom ECMA-262 [ECM99], et on se refere parfois a JavaScript sous le nom d’ECMA | |
| script. Cette norme est un sous-ensemble du langage JavaScript concu par Netscape, | Ne pas confondre |
| et il est necessaire de n’utiliser que les speci cations de cette norme pour s’assurer que le code ecrit sera compris de tous les navigateurs interpretant le JavaScript. Les programmes JavaScript s’integrent dans le code HTML d’une page web. L’inter^et d’un langage comme JavaScript est de pouvoir contro^ler dynamiquement le comportement d’un page web : on peut par exemple veri er que le code postal saisi dans la page est correct, faire a cher des menus speciaux quand la souris approche d’une zone donnee, a cher des bandeaux publicitaires animes, orienter automatiquement le visiteur sur une autre page, etc . Pour des exemples de mises en application de JavaScript, vous pouvez vous reporter a [Bra99]. | JavaScript et Java, langage concu et developpe par Sun Microsystems. |
1.1. JAVASCRIPT EST UTILISE COT^ E CLIENT
La charge d’executer le code JavaScript incombe au client, c’est-a-dire a un navigateur la plupart du temps. Le serveur envoie le code HTML et JavaScript au client qui l’interprete des qu’il est charge. Ce type de fonctionnement s’oppose aux langages orientes serveurs, comme PHP[BAS+99] ou ASP. Dans ce cas, le serveur execute le programme pour produire du HTML et l’envoie au client.
On distingue habituellement deux modes d’execution des programmes. Dans le premier mode, dit compile, le texte de programme ecrit par le programmeur (on dit aussi programme source) est traduit dans un autre format, directement comprehensible par la machine. La phase de traduction s’apelle la compilation et donne un chier executable (ou binaire). Les avantages de ce mode sont la rapidite d’execution (les instructions sont directement executees par la machine) et la validite syntaxique du programme source (pour que le compilateur puisse traduire le source il faut que les instructions soient syntaxiquement correctes). D’autre part, un avantage commercial est de pouvoir donner a une personne tierce, uniquement le chier executable sans que cette personne puisse voir le programme source. L’inconvenient est que le chier executable depend a la fois de la machine et du systeme d’exploitation, et il est par consequent plus di cile de le distribuer.
Le deuxieme mode est dit interprete : un programme interprete lit le programme source, et essaye d’executer les instructions les unes apres les autres. A la di erence du mode compile, il n’y a pas de chier executable. L’avantage de ce mode est que toute personne ayant le programme interprete sur son ordinateur, peut executer le programme. L’inconvenient est la lenteur du^e a l’execution et de l’interprete et du programme.
JavaScript est un langage interprete. Il faut donc un programme interprete pour executer des programmes ecrits dans ce langage. Les deux navigateurs les plus repandus a l’heure actuelle sur le marche, Netscape et Internet Explorer, incorporent de tels interpretes. Netscape Navigator 2.0, et ses versions ulterieures sont capables d’interpreter les programmes JavaScript. Quand un navigateur demande l’acces a une page HTML contenant un programme JavaScript, le serveur envoie le document complet (incluant le HTML et les instructions JavaScript) au navigateur. Le navigateur a che alors le texte HTML et execute le code JavaScript.
Quels navigateurs sont capables d’interpreter JavaScript ? Netscape a introduit pour la premiere fois l’interpretation de code JavaScript dans son Navigator version 2. Microsoft, avec Internet Explorer version 3, a suivi, en implementant une partie du langage. D’autres navigateurs integrent aussi l’interpretation de JavaScript aujourd’hui. Il est di cile de donner une information exhaustive a un moment donne, sur les versions de navigateurs etant capables d’interpreter telle ou telle version du langage, du fait de l’evolution rapide et incessante des logiciels et des langages. Citons simplement trois autres navigateurs qui respectent la norme ECMA-262 :
{ Opera, logiciel proprietaire disponible sous Windows/Linux/MacOs,
{ Konqueror, l’explorateur de chiers et navigateur de l’environnement KDE sous Linux,
{ Safari, le navigateur fourni dans l’environnement MacOSX, base sur Konqueror,
{ Firefox, le navigateur de la fondation Mozilla, base sur le navigateur Mozilla. MoCHAPITRE 1. INTRODUCTION
zilla aujourd’hui completement remplace par Firefox, a fourni son moteur Gecko a de nomberux autres navigateurs, dont les Netscape 6 et 7.
Detecter les erreurs Lors de la conception du programme javascript, des erreurs de programmation interviennent frequemment. La premiere des choses a faire est bien su^r de veri er la conformite de ce qu’on a ecrit avec ce qu’on voulait dire. Il faut egalement faire particulierement attention a la syntaxe, les fautes de frappe etant frequentes. Le programme etant interprete par le navigateur, celui ci peut aussi mettre a votre disposition un outil d’aide a la detection des erreurs. Les anciens navigateurs (e.g. Netscape series 4.7x, Microsoft IE 5) vous signalent une erreur de maniere discrete, voire pas du tout. dans le bandeau bas de la fen^etre du navigateur de maniere discrete , sans plus de details. Les navigateurs Mozilla 1.x et Netscape 7.x proposent dans le menu outils/developpement web une console JavaScript (voir la gure 1.1) et m^eme un debugger.
Fig. 1.1 { La console javascript de Mozilla 1.4
En n, les navigateurs recents comme Firefox 2.0 proposent des plugins puissants aidant la recherche d’erreurs et plus generalement le developpement oriente web (e.g. plugin web-developper, voir illustrations 1.2 et 1.3).
Fig. 1.2 { Le plugin web-developper dans FireFox 2.0
1.3 Ou et comment inserer du JavaScript?
Pour placer des intructions JavaScript dans une page HTML, il faut utiliser la balise <script> de la maniere suivante :
1.3. OU ET COMMENT INSERER DU JAVASCRIPT?
Fig. 1.3 { Le menu de tools dans le plugin web-developper
| <script type="text/javascript"> .. instructions javascript .. </script> |
Notons que l’ouverture <script > est su sante pour une ecriture rapide, mais que la type text/javascript est necessaire pour que la page soit conforme a la norme HTML 4.01.
Si l’on prefere inclure le code JavaScript stocke dans un autre chier, on peut l’indiquer par une ligne comme :
<script src="" type="text/javascript"></script>
Ces instructions peuvent s’inserer n’importe ou a l’interieur du code HTML. Dans l’exemple suivant, on note l’utilsation de la fonction document.write qui permet, en JavaScript, d’ecrire un message dans la fen^etre du navigateur. Nous reviendrons sur cette fonction plus tard.
| <html> ligne 1 de texte . <br> <script type="text/javascript"> document.write("ligne 2 de texte.") </script> <br>ligne 3 de texte. </html> |
Lors du chargement de cette page HTML, l’utilisateur ne verra s’a cher dans son navigateur que les trois lignes :
ligne 1 de texte ligne 2 de texte ligne 3 de texte
sans savoir si c’est du texte produit par HTML ou par JavaScript.
Cacher JavaScript a certains navigateurs Certains navigateurs ne comprennent pas le JavaScript. Pour eviter les erreurs que signaleraient ces navigateurs lors de la lecture du JavaScript, on peut leur faire croire qu’il s’agit de commentaires HTML. Par exemple :
CHAPITRE 1. INTRODUCTION
| <html> <script type="text/javascript"> <!-- cache le script . document.write("Bonjour !") // fin du commentaire ici. --> </script> reste du texte HTML. </html> |
S. Genaud
1.3. OU ET COMMENT INSERER DU JAVASCRIPT?
Chapitre 2
Nous presentons dans ce chapitre deux notions distinctes. D’une part, les concepts1 de base de la programmation et d’autre part, la syntaxe du langage qui permet d’exprimer ces concepts. La syntaxe du langage consiste en l’ensemble des regles qui nous sont imposees sur le vocabulaire employe lorsqu’on ecrit un programme dans ce langage.
Tou au long du chapitre, les conventions suivantes sont utilisees. On appelle motcle tout mot ou symbole appartenant au langage JavaScript. Ces mots-cles sont typographies en police teletype : par exemple, if est un mot-cle (il indique le debut d’un test). En pratique, ceci signi e qu’on ne peut utiliser un mot-cle en dehors de son contexte. Vous ne pourrez pas par exemple, choisir if comme nom de variable. La table 2.1 recense les mots-cles du langage.
Une variable est une case memoire a laquelle on a donne un nom. Dans les langages imperatifs, (comme JavaScript, Java,C/C++) le contenu de cette case memoire peut varier au cours de l’execution du programme. On peut ranger une valeur dans cette case, ou de maniere synonyme, dans la variable, par une instruction nommee a ectation. On peut aussi lire son contenu a tout moment. On peut par exemple indiquer que l’on utilise un variable pour compter les points d’un match. Il faut alors l’indiquer par l’instruction suivante, qu’on appelle declaration de variable :
var compteur;
Ici, var est un mot-cle et compteur un nom choisi par le programmeur. Apres une telle declaration et sans precision supplementaire, la variable vaut undefined2. Si je veux signi er a un moment du programme que le nombre de points est quatre, j’ecris l’instruction d’a ectation :
compteur = 4;
Les noms de variables sont de longueur quelconques, peuvent contenir des lettres, chi res et le caractere souligne ( ) , mais doivent commencer par une lettre. Notons que JavaScript, contrairement a HTML, distingue les majuscules des minuscules, et qu’ainsi MaVariable et mavariable designent deux variables di erentes.
1De la programmation imperative, c’est-a-dire le modele de programmation le plus repandu.
2Depuis JavaScript >= 1.3. Auparavant, undefined n’existait pas et la valeur d’une variable non initialisee etait true.
2.1. VARIABLES
| abstract | oat | public |
| boolean | for | return |
| break | function | short |
| byte | goto | static |
| case | if | super |
| catch | implements | switch |
| chat | import | synchronized |
| class | in | this |
| const | instanceof | throw |
| continue | int | throws |
| default | interface | transient |
| do | long | true |
| double | native | try |
| else | new | var |
| extends | null | void |
| false | package | while |
| nal | private | width |
| nally | protected |
Tab. 2.1 { Liste des mots-cles
Maintenant supposons que mon compteur a une valeur que je ne connais pas, et que je veuille indiquer qu’il faut ajouter un a cette valeur. Pour cela, je peux ecrire l’instruction :
compteur = compteur + 1;
Pour comprendre la signi cation de cette instruction, il faut savoir que l’ordinateur va d’abord evaluer la partie a droite du symbole egal. Le contenu de la variable compteur est lu, et on additionne un a ce contenu. Dans un deuxieme temps, la somme est re-ecrite dans la variable compteur. Cette operation est tellement courante en informatique qu’elle porte un nom : c’est l’incrementation d’une variable.
Il faut ici faire attention au sens du symbole =. Il denote en JavaScript (comme en Java ou en C) l’a ectation, et non l’egalite, auquel cas le texte precedent n’aurait pas de sens. On signi e l’egalite par le symbole ==, comme nous le verrons par la suite.
On pourrait se poser la question suivante : peut on mettre n’importe quelle sorte de donnees dans une variable? La reponse est non, car il se poserait alors des problemes de coherence : que se passerait il si on mettait le message <<bonjour>> dans compteur et que l’on essayait ensuite de lui ajouter un?
Pour assurer la coherence des instruction, les langages informatiques de nissent habituellement des types de donnees. Un type de donnees est un ensemble de valeurs et un ensemble d’operateurs sur ces valeurs. Par exemple, le type entier est constitue de l’ensemble des entiers et des operateurs +, -,*, /, etc. Un autre type tres utilise est le type chaine (ou chaine de caracteres) permettant de traiter les messages. Une chaine est un ensemble de caracteres compose indi eremment de lettres, symboles ou chi res. Sur l’ensemble des chaines de caracteres, on peut de nir des operateurs comme la concatenation (mettre deux chaines bout-a-bout). La section 2.6 revient en detail sur les types du langage JavaScript.
JavaScript, comme la plupart des langages de script, est un langage tres faiblement type. Ceci ne veut pas dire qu’il est capable d’e ectuer l’instruction 1+"bonjour", mais qu’il n’impose pas au programmeur d’indiquer explicitement le type d’une variable lors de la declaration de celle-ci.
Voici, quelques exemples de declarations :
var texte; var cle; var compteur = 3; var Erreur = "Connexion perdue."; var Erreur2 = ’Pas assez de memoire’;
Notons que l’on peut initialiser les variables (y inscrire une valeur initiale) a leur declaration, comme c’est le cas dans les trois dernieres declarations. On remarque aussi dans l’exemple precedent que l’on peut indi eremment utiliser les guillements ou les quotes pour delimiter une chaine de caracteres.
La plupart des expressions que l’on rencontre dans des langages comme C/C++ et Java existent en JavaScript. Nous ne donnerons que quelques exemples ici, et nous decouvrirons ces expressions au l de ce document. Voici quelques exemples, les instructions sur la m^eme ligne ayant la m^eme signi cation.
| total += 4; | total = total + 4; |
| i++; msg = "code erreur " + code; | i = i + 1; |
Parfois, un programmeur souhaite annoter le code qu’il vient d’ecrire, mais sans que ces annotations n’interferent avec les instructions proprement dites. On appelle ces annotations des commentaires du programmes. Pour que l’interprete ne confonde pas ces caracteres avec les instructions, (pour qu’il les ignore), on fait preceder un commentaire dispose en n de ligne par les deux barres obliques (//) et on utilise /* et */ pour delimiter un commentaire sur plusieurs lignes. Voici un exemple de code commente.
| /* test pour poser la bonne question */ if (reduc && vieux) { // a une reduction et est vieille document.write("Voulez que quelqu’un vous accompagne ?"); } |
2.4. DEROULEMENT D’UN PROGRAME
Quand on veut faire executer plusieurs instructions (c’est en pratique toujours le cas) on ecrit ces instuctions de haut en bas, en inserant un point-virgule entre chaque instruction . Pour incrementer ma variable compteur d’une unite, puis de deux, j’ecris :
compteur = compteur + 1; compteur = compteur + 2;
Cependant, la sequence simple rendrait fastidieuse l’ecriture d’instructions se repetant un grand nombre de fois. Si l’on doit par exemple a cher les cinquante premiers entiers, nous aurions besoin de cent instructions : cinquante instructions d’a chage, et cinquante incrementations. Pour simpli er l’ecriture, le langage fournit des structures de contr^ole permettant de modi er la sequence d’execution des instructions.
Parmi ces structures on trouve la boucle (aussi appelee iterative) et le test (ou alternative).
La boucle for
La boucle permet de repeter un certain nombre de fois un ensemble d’instructions. La boucle est introduite par le mot-cle for.
Pour a cher nos cinquante premiers entiers, nous pouvons ecrire une boucle qui nous permet de reduire le texte de programme a trois lignes (au lieu de cent). Cette boucle utilise la variable i qui vaut 1 initialement. Ensuite le corps de la boucle, c’est-a-dire les instructions a l’interieur des crochets ({ et }) est execute tant que la condition i<=50 est vraie. A chaque tour de boucle, on incremente la variable i.
| for (i=1; i<=50; i++) { document.writeln(i); } |
La syntaxe de la boucle en JavaScript est la suivante. La notation utilise les crochets pour indiquer les parametres optionnels.
for ([init expr;][condition;][incr expr] ){ instructions
}
Le comportement de cette instruction est :
1. execute init expr
2. si condition est faux aller en 6., sinon aller en 3.
3. executer incr expr 4. executer instructions
5. aller en 2.
6. sortie de l’instruction for
La boucle while
Une autre structure iterative plus simple est la boucle while. Celle-ci dit simplement qu’on doit repeter un ensemble d’instructions tant qu’une condition est vraie.
while (condition){ instructions
}
Le comportement de cette instruction est :
1. evalue condition
2. si condition est vraie aller en 3, sinon aller en 5. 3. executer instructions
4. aller en 1.
5. sortie de l’instruction while
Nous pouvons par exemple refaire un calcul tant que l’utilisateur le desire. Supposons que nous disposions par ailleurs d’une fonction calc moyenne() calculant une moyenne de notes. Dans l’exemple suivant, la variable recommence est un booleen qui contro^le la repetition du calcul de la moyenne. On relance ce calcul tant que l’utilisateur n’a pas clique sur Annuler dans la boite de dialogue a chee par prompt().
| var recommence = true; while (recommence) { m = calc_moyenne(); recommence=prompt("La moyenne est " + m + ".Recommencer ?"); } |
Notons qu’il est important d’initialiser la variable recommence a la valeur vraie a n d’entrer dans la boucle la premiere fois.
L’alternative
La structure alternative permet d’executer un ensemble d’instruction quand une condition est vraie. Le type de la condition est booleen (la condition est soit vraie soit fausse). La structure alternative est introduite par le mot-cle if, et sa syntaxe est la suivante :
if (condition1){ instructions1
}
[else {
instructions2
}]
Le comportement de cette instruction est :
1. si condition1 est vrai, aller en 2, sinon aller en 3.
2. executer instructions1 et aller en 4.
3. si il y a une partie else, executer instructions2 et aller en 4 sinon aller en 4.
4. sortie de l’instruction
Exemple : on peut simplement tester la valeur d’une variable, comme dans l’exemple suivant.
2.4. DEROULEMENT D’UN PROGRAME
| if (i==50) { document.writeln("i est egal a 50") } else { document.writeln("i n’est pas egal a 50") } |
De m^eme que la boucle permet de repeter plusieurs instructions, la fonction est tres utile pour accomplir une ta^che repetitive. Le principe consiste a regrouper dans un <<bloc>> un ensemble d’instructions necessaire pour accomplir une ta^che, a nommer ce bloc, et a l’appeler a chaque fois qu’on a besoin d’e ectuer la ta^che.
Une sophistication supplementaire reside dans la possibilite de pouvoir parametrer ce bloc, c’est-a-dire executer le bloc avec des parametres pouvant ^etre di erents a chaque appel. Il va de soi que si je construis un bloc permettant de calculer la factorielle d’un nombre, je veux que ce bloc puisse calculer la factorielle de n’importe quel entier. Cet entier est mon parametre (ou de maniere synonyme, l’argument du bloc).
De plus, les blocs en JavaScript, se nomment fonctions, comme les fonctions mathematiques, ils renvoient un resultat unique.
La de nition d’une fonction est introduite par le mot cle function suivi de ses arguments, puis du code de la fonction entre accolades (fg). Le resultat de la fonction est indique par le mot-cle return. Par exemple, ci-dessous est de nie la fonction carre qui rend le carre de son argument.
| <script type="text/javascript"> function carre(i) { return (i*i) } </script> |
Notons que rien ne se passe si on charge seulement la page contenant ce script. Il faut en e et appeler la fonction avec un argument e ectif pour que l’evaluation se fasse. Pour cela, on pourra par exemple ajouter apres le code de la fonction, un appel a cette fonction :
<script type="text/javascript"> document.write("La fonction a retourne ",carre(4),".") </script>
Pour appeler la fonction, il faut bien su^r qu’elle ait ete de nie auparavant. Par consequent, il est conseille de placer la de nition de fonction dans l’ent^ete de la page HTML, et les appels dans le corps de cette page. Pour notre exemple, la page HTML a donc la structure suivante :
<head>
<script type="text/javascript"> function carre(i) {
document.write("on a appele carre avec l’argument ",i ,"<br>")
| return i * i } </script> </head> <body>
<script type="text/javascript"> document.write("La fonction a retourne ",carre(4),".") </script> </body> |
Les variables declarees en dehors d’une fonction sont globales, c’est-a-dire qu’il est possible de les lire ou de les modi er de n’importe quelle partie du script ou de n’importe quelle fonction. Par opposition, les variables declarees a l’interieur d’une fonction sont locales, c’est-a-dire que leur valeur n’est connue qu’a l’interieur de la fonction.
Une expression de type booleen ne peut prendre que les valeurs true ou false. Ce type est notamment utilise dans l’instruction if. L’ensemble des operateurs de nis sur l’ensemble de valeurs ftrue;falseet bgsont de type booleen).est presente dans la table 2.2. (dans les exemples de cette table, les variables a
| nom | syntaxe | exemple | de nition |
| et logique | && | a && b | true; true; false; false; | true ! truefalse false ! false true ! false false ! |
| ou logique | || | a || b | true; true; false; false; | true ! truetrue false ! true true ! false false ! |
| Negation | ! | !a | true false | ! falsetrue |
!
Tab. 2.2 { Les operateurs logiques (de nis sur les booleens)
Remarque : l’implication est absente mais peut s’ecrire a partir de la negation et du ou logique (_). On a : (a ) b) (:a _ b), (c’est-a-dire (!a || b) en JavaScript).
2.6.3 Le type chaine de caracteres
L’ensemble de valeurs que peut prendre une variable de type chaine est une combinaison quelconque d’un nombre quelconque de caracteres quelconques. Comme indique dans l’introduction, des exemples de chaines sont "abcdef" ou "az1r" ou
"123". Dans les programmes, une chaine de caracteres est delimitee par des guillemets ("") ou des quotes (’’).
La liste des methodes sont listees en section A.20, page 56. On peut donner quelques exemples de methodes qui existent sur les chaines :
{ indexOf : cette methode indique a quelle place se situe la premiere occurrence d’une sous-chaine dans une chaine. Par exemple, dans la chaine "le baba de ECMA-script", la premiere occurrence de la sous-chaine "ba" est en position 3 (on compte a partir de 0). Dans la chaine "", la sous-chaine "@" est a la position 5. Si la sous-chaine n’existe pas dans la chaine, indexOf rend -1. En JavaScript, les deux exemples precedents peuvent s’ecrire ainsi, p1 et p2 recevan les positions indiquees :
var s1 = "le baba de ECMA-script"; var s2 = "";
p1 = s1.indexOf("ba"); // p1 = 3 p2 = s2.indexOf("@"); // p2 = 5 p3 = s2.indexof("abc"); // p3 = -1
Un tableau permet de stocker plusieurs valeurs de m^eme type, comme par exemple plusieurs entiers dans une seule variable. Les tableaux sont donc un type a part entiere : ma variable de contenant plusieurs entiers est de type <<tableau d’entiers>>. En JavaScript, la declaration d’une telle variable se fait par exemple comme suit :
var tableau_entiers = new Array();
Remarquez que nous n’avons pas precise que les elements du tableau etaient des entiers, du fait du typage faible de JavaScript. Ce sont les elements que nous metterons dans le tableau qui determineront le type du tableau.
Le lecteur connaissant d’autres langages de programmation de type imperatif peut
^etre surpris qu’il ne soit pas obligatoire de preciser la taille du tableau que l’on declare. Les tableaux sont e et dynamiques, c’est-a-dire qu’on peut leur ajouter a tout moment, autant d’elements que l’on veut.
Pour acceder a un valeur particuliere du tableau, il faut indiquer sa place dans le tableau, a l’aide de crochets. Attention, le premier element est numerote 0. On peut par exemple mettre la valeur 56 dans la premiere case du tableau, et la valeur 9 dans la cinquieme case :
tableau_entiers[0] = 56; tableau_entiers[4] = 9;
Il existe une facon plus concise d’initialiser les valeurs d’un tableau, a la condition de mettre des valeurs dans toutes les cases du tableau (pas de \trou"). On peut alors initialiser le tableau par l’une ou l’autre des lignes suivantes :
tableau_entiers = new Array(56,12,43,4,9); tableau_entiers = [56,12,43,4,9];
Il faut noter que la deuxieme ligne emprunte une notation uniquement acceptee par des navigateurs recents.
On peut ensuite lire le contenu d’une case, et le faire apparaitre a l’ecran par exemple :
document.write(tableau_entiers[4]);
Tout tableau possede une longueur. La longueur du tableau est le numero de case occupee le plus grand, plus un. Les tableaux etant dynamiques, l’interpreteur met a jour la longueur du tableau a chaque a ectation. Dans les deux a ectations precedentes, la longueur du tableau est 1 apres la premiere a ectation, et 5 apres la deuxieme a ectation. Le programmeur peut obtenir cette longueur en consultant la propriete length du tableau considere : par exemple, on peut faire a cher la longueur du tableau par :
document.writeln(tableau_entiers.length);
Les tableaux sont tres utiles car ils permettent de manipuler de maniere concise un ensemble de valeurs. En partriculier, on peut utiliser une boucle pour faire a cher toutes les valeurs contenues dans le tableau.
for (i=0;i<tableau_entiers.length;i=i+1) document.writeln(tableau_entiers[i]);
Tableaux multi-dimensionnels Les tableaux utilises jusqu’a present etaient des vecteurs, avec une dimension. Cependant, on a tres vite besoin de tables, a deux dimensions. Une limitation importante et decevante de JavaScript est qu’on ne peut decrire simplement des tableaux multi-dimensionnels.
Cependant, il existe des moyens detournes de creer de tels tableaux (voir [Goo98] pour plus de details). Il s’agit en fait de creer un tableau a une dimension, dont chaque case contient un nouveau tableau a une dimension. Dans l’extrait suivant, on cree d’abord un tableau de quatre cases (ligne 1), puis on met dans chacune des cases, un nouveau tableau de quatre cases (ligne 3). En n, on initialise chacune des seize cases du tableau avec la valeur 1 (ligne 5). On remarquera la notation utilisee pour acceder a une case d’un tel tableau bi-dimensionnel.
| a = new Array(4); for (i=0;i<4;i=i+1) { a[i] = new Array(4); for (j=0;j<4;j=j+1) a[i][j] = 1; } |
1
2
3
4
5
6
Operateurs sur les tableaux Les methodes suivantes sur les tableaux sont de nies a partir de JavaScript 1.3. Ces methodes s’appliquent toutes sur un tableau et utilisent donc la notation pointee (voir la section 4.2.1, 31 pour des explications detaillees). Ainsi si t, u et v sont des tableaux, on peut ecrire :
| u = t.reverse(); | /* u devient l’inverse du tableau t */ |
| v = u.concat(t); | /* v devient la concatenation de u et t */ |
v = u.concat(t,u,t); /* v est u,t,u,t mis bouts a bouts */ v = u.sort(); /* v devient le tableau u trie */
| concat() | Regroupe (concatene) plusieurs tableaux et rend un nouveau tabeau |
| join(delimiter) | Rend une cha^ne contenant les elements du tableau separes par le delimiteur speci e |
| pop() | Retourne le dernier element du tableau et le supprime du tableau |
| push(e1,e2, ) | Ajoute les elements e1, e2, a la n du tableau et retourne la nouvelle longueur. |
| reverse() | Renverse le tableau. |
| shift() | Retourne le premier element du tableau et le supprime du tableau. |
| slice(begin[,end]) | Retourne un nouveau tableau constitue d’une sous-partie d’un tableau existant. |
| sort([function]) | Trie le tableau selon l’ordre lexicographique (tri ascendant). Possibilite de de nir l’operateur de comparaison a l’aide d’une fonction |
| splice(index,n,[,el1,el2]) | Ajouter/Enlever des elements d’un tableau |
| toSource() | Retourne une cha^ne qui represente la de nition du tableau. |
| toString() | Retourne le tableau sous la forme d’une cha^ne. |
| unshift(e1,e2, ) | Ajoute les elements e1,e2, en t^ete du tableau et retourne la longueur du nouveau tableau. |
| valueOf() | Retourne une chaine decrivant les valeurs initiales du tableau. Notez que cette methode est utilisable sur tous les objets (fonctions, chaines, ). |
Notons que des fonctions pre-de nes sont fournies permettant d’e ecteur des conversions de types.
Converion de chaines en nombres Ce type de conversion est tres utilise en JavaScript car les donnees saisies par l’utilisateur ont toujours le type chaine de caracteres. Les fonctions parseInt() et parseFloat() permettent de convertir explicitement une chaine en un entier ou en un reel respectivement. Ainsi, parseFloat("13.56") rend le le reel 13.56 (a partir de la chaine "13.56"). La fonction parseInt agit de m^eme sur les entiers, mais accepte un deuxieme argument optionnel qui est la base dans laquelle est exprime l’entier rendu. Si on ne precise pas cette base, l’interpreteur decide de la base en fonction du format de la chaine : pour une chaine commencant par 0, il choisit par exemple la base 8, e.g. parseInt("011") rend 9. Il est par consequent recommande de preciser la base 10 en deuxieme parametre. On utilise par exemple parseInt("0345",10) pour obtenir l’entier 345.
Pour completer la conversion vers un nombre, il est souvent necessaire de s’assurer de la validite du resultat obtenu car il est parfois impossible de traduire une chaine en une expression numerique. Dans ce cas, le resultat de parseInt est Nan (Not a Number). Pour savoir si la chaine a convertir ne represente pas une expresson numerique, on doit utiliser la fonction isNaN(), qui renvoie vrai dans ce cas.
Notons qu’on peut aussi utiliser parseInt() pour extraire la partie entiere d’un reel : par exemple parseInt(5.67) rend 5. La partie decimale peut ^etre extraite par soustraction de la partie entiere (5.67 - parseInt(5.67) rend 0.67).
Converion vers une chaine La fonction toString() permet de faire la conversion inverse. Elle est cependant plus generale que les precedentes car peut s’appliquer, non pas uniquement a des nombres, mais aussi a une chaine (rend la m^eme chaine), a un booleen (rend "true" ou "false") a un tableau (rend le contenu des tableaux separes par des virgules), ou encore a une fonction (rend la de nition de la fonction).
Sur les nombres on utilise la fonction de la maniere suivante :
var i = 15;
i.toString(10);
La fonction toString() accepte un argument optionnel qui est la base utilisee pour representer le nombre en chaine. Dans l’exemple, on obtient simplement la chaine "15".
Chapitre 3
Voici une serie d’exercices permettant d’illustrer les notions evoquees dans ce chapitre. L’enonce est suivi d’un programme solution en JavaScript, puis de commentaires sur la solution. Bien evidemment, il ne s’agit que d’une solution parmi di erentes possibles.
Utilisation de function(), max().
Ecrire une fonction qui, etant donne trois nombres entiers non nul, a, b et c, determine si l’un des nombres est egal a la somme des deux autres. La fonction renvoie ce nombre s’il existe, 0 sinon.
| function sommededeux (a,b,c) { var m = (a,(b,c)); if (a+b+c== 2*m) return(m); else return(0); } |
1
2
3
4
5
6
7
8
9
La solution proposee repose sur la constatation suivante : si a = b + c alors
{ a est superieur a b et a c
{ a + b + c = 2a
La di culte est que nous ne savons pas qui de a, b ou c est le plus grand. On doit donc le determiner : il n’existe pas en Javascript de fonction donnant le maximum d’un ensemble d’elements, mais on peut utiliser la fonction max du module Math qui rend le maximum entre deux nombres.
Notons que cette solution est plus elegante et plus facilement adaptable que la solution qui consiste a tester les di erentes possibilites. On peut e ectivement ecrire :
if (a==b+c) return (a) else if (b==a+c) return (b) else if (c=a+b) return (c) else return (0);
3.2. CALCUL D’UNE MOYENNE
mais le nombre de tests augmenterait rapidement si le probleme se complixi ait un tant soit peu.
Utilisation de for, Array, prompt() et parseInt().
Ecrire un programme qui calcule la moyenne d’un ensemble de notes. Le programme doit ouvrir une fen^etre pour demander le nombre de notes, puis ouvrir une nouvelle fen^etre pour entrer chacune des notes. Quand toutes les notes sont saisies, une fen^etre a che la moyenne.
| var note = new Array(); var moyenne = 0; var nb; nb = prompt("Entrer le nombre de notes"); nb = parseInt(nb,10); for (var i=0;i<nb;i++){ note[i] = prompt("Entrer la note " + (i+1)); note[i] = parseInt(note[i],10); moyenne += note[i]; } moyenne = moyenne / nb; alert("La moyenne est " + moyenne); |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
A la ligne 6, nous demandons, avec parseInt(), la conversion d’une chaine vers un entier, car la fonction prompt() rend une chaine, et nous voulons traiter ce qu’a saisi l’utilisateur comme une valeur numerique. Nous faisons de m^eme a la ligne 9.
Utilisation de for, Array, prompt().
Ecrire un programme qui, connaissant un ensemble de villes et la distance les separant d’un point de reference, soit capable de dire, apres que l’utilisateur ait saisi une distance parcourue depuis le point de reference, quelles villes auraient pu ^etre atteintes.
| var villes = new Array("Bordeaux","Nantes","Lyon", "Marseille","Monptellier", "Paris","Rennes","Strasbourg"); var distance = new Array(950,850,450,800,1000,460,840,0); var dist; dist = parseInt(prompt("Entrer la distance parcourue : "),10); for (var i=0;i<villes.length;i++) if (dist>=distance[i]) alert("ville atteinte : " + villes[i]); |
1
2
3
4
5
6
7
8
9
10
11
CHAPITRE 3. EXERCICES CORRIGES
Supposons que le point de reference soit Strasbourg. Nous mettons alors dans la case 0 du tableau des distances, la distance separant Strasbourg de la ville inscrite dans la case 0 du tableau des villes (Bordeaux). La boucle parcout ensuite le tableau des distances, et quand la distance parcourue est superieure a l’eloignement de la ville, la ville correspondante est a chee.
Utilisation de function, for.
Ecrire une fonction qui, etant donne un parametre n, suppose ^etre un entier positif, calcule et retourne sa factorielle. Rappelons que la factorielle de n est notee n!, et de nie par :
n n 1 n 2 ::: 1 si n > 0
n! =
1 si n = 0
En examinant la de nition de factorielle, nous nous apercevons qu’il faut e ectuer n multiplications. Nous allons proceder avec une boucle qui fera n iterations, en enumerant les entiers consecutifs de n a 1 a l’aide d’une variable i. Concernant le calcul maintenant, la premiere etape doit nous donner comme resultat n. A la deuxieme, nous devons obtenir le resultat de n n 1. A la troisieme, nous devons obtenir le resultat de n n 1 n 2, c’est-a-dire le resultat calcule a la deuxieme etape, multiplie par n 2.
Par consequent, nous allons memoriser le resultat de chaque multiplication dans une variable, que nous appelons ici res. Nous initialisons cette variable a 1 (qui est l’element neutre pour la multiplication) et obtenons ainsi n apres la premiere multiplication. A la deuxieme etape, i vaut n 1, et nous multiplions donc n par n 1, resultat que nous remettons dans res. A la n de la boucle, nous avons fait les multiplications necessaires, et le resultat nal est present dans res.
Notons, que si n = 0, nous ne rentrons pas dans la boucle, et res vaudra 1.
| function factorielle( n ) { var res=1; for (i=n;i>=1;i=i-1) { res = res * i; } return(res); } |
1
2
3
4
5
6
7
8
Utilisation de function, while, modulo.
Ecrire une fonction qui, etant donne un entier a, suppose ^etre un entier positif, dit si a est un nombre premier. Par de nition, un nombre est premier s’il n’est divisible que par 1 et par lui-m^eme.
Nous utilisons une variable b qui sert a stocker touts les entiers consecutifs entre a 1 et 2. Si le reste de la division entre a et cet entier est nul, cela signi e que cet entier est un diviseur de a et que a n’est donc pas premier (par exemple a = 6 et l’entier est 3). Remarquez la facon dont le reste d’une division entiere est note : a
S. Genaud
3.6. UN RENDEUR DE MONNAIE
% b designe le reste de la division de a par b, et on le designe habituellement par le terme modulo.
| function est_premier( a ) { var b; var prem=true; b = a-1; while (b>1 && prem) { if (a%b==0) prem = false; b--; } return(prem); } |
1
2
3
4
5
6
7
8
9
10
11
Utilisation de la notion de partie entiere (parseInt()).
Ecrire un programme qui, etant donne une somme s introduite (on suppose cette somme multiple de 0.1 e) dans une machine a cafe, et le prix d’un cafe c, indique la composition de la monnaie rendue. On dispose de pieces de 1 , 0.5 , 0.2 et 0.1 e. On cherche a rendre le moins de pieces possibles.
Les variables p1,p50,p20,p10 utilisees dans la solution doivent stocker le nombre de pieces rendues pour chacune des valeurs. L’algorithme repose sur l’observation simple suivante : si je dois rendre une somme r avec des pieces de valeur v, il faut r=v pieces. Si le reste de cette division est nul, la monnaie est rendue, sinon, il reste a rendre r0 = r%v (le reste de la division entiere). Par de nition, on peut aussi calculer r0 comme ceci : r0 = r (r=v). si r0 n’est pas nul, on peut recommencer avec une valeur v0(v0 < v). Pour minimiser le nombre de pieces, on commence par compter le nombre de pieces necessaires dans la plus forte valeur (1 e). Dans le programme ci-dessous, est note en commentaire la solution alternative equivalente utilisant le modulo (ligne 8,10,12). Notez aussi qu’a la lgine 5, on s’est abstenu de diviser a rendre par la valeur de la piece car elle est de 1 (element neutre, donc division super ue).
| var p1, p50, p20, p10; var a_rendre; a_rendre = s - c; p1 = parseInt(a_rendre); a_rendre = a_rendre - p1 p50 = parseInt(a_rendre / .5); a_rendre = a_rendre - p50 * 0.5 // a_rendre = a_rendre % 0.5; p20 = parseInt(a_rendre / .2); a_rendre = a_rendre - p20 * 0.2 // a_rendre = a_rendre % 0.2; p10 = parseInt(a_rendre / .1); a_rendre = a_rendre - p10 * 0.1 // a_rendre = a_rendre % 0.1; document.write("piece de 1 E : ",p1,"<br/>"); document.write("piece(s) de 0.5 E : ",p50,"<br/>"); document.write("piece(s) de 0.2 E: ", p20,"<br/>"); document.write("piece(s) de 0.1 E: ", p10,"<br/>"); |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
CHAPITRE 3. EXERCICES CORRIGES
Notons que l’enonce facilite le probleme dans la mesure ou l’on est toujours capable de rendre la monnaie. Le probleme ne serait pas aussi simple si l’on n’avait pas de piece de 0.1 epar exemple. Dans ce cas en e et, notre programme ne pourrait pas rendre la monnaie sur 1.80 e(il donnerait 1 e+ 1 0.50 + 1 0.20 et il manquerait 0.10) alors qu’on pourrait rendre la monnaie avec 9 0.20.
Utilisation de la notion de partie entiere et de tableau .
Ecrire un programme qui, etant donne une somme s introduite dans une machine a cafe, et le prix d’un cafe c, indique la composition de la monnaie rendue. On dispose de n types de pieces de valeur stockees dans un vecteur v = (v1;:::vi;vi+1;:::;vn). Les valeurs sont classees par ordre decroissant, i.e. vi > vi+1. Representer la monnaie rendue par un vecteur p = (p0;:::;pn) qui indique combien de pieces de chaque valeur il faut rendre. La somme rendue est Pni=1 pi vi. On cherche a rendre le moins de pieces possibles.
| var v = new Array(1, 0.5 ,0.2, 0.1); /* par exemple */ var p = new Array(); var a_rendre; var i; var fenetre; a_rendre = s - c; fenetre = ("","monnaie","width=200,height=200"); fenetre.document.write("<html><body>"); fenetre.document.write("Monnaie a rendre : ",a_rendre,"<br/>"); for (i = 0; i < v.length ; i=i+1) { p[i] = parseInt(a_rendre / v[i]); a_rendre = a_rendre - p[i]*v[i]; } for (i = 0; i< v.length ; i=i+1) fenetre.document.writeln("piece de ",v[i]," E: ",p[i],"<br/>"); fenetre.document.writeln("</body></html>"); |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
S. Genaud
3.7. UN RENDEUR DE MONNAIE (GENERAL)
Chapitre 4
’une des raisons du succes de JavaScript est qu’il permet de construire des pages
L webpour designer l’utilisation de javascript dans les pages HTML.dynamiques. Le terme Dynamic HTML (ou DHTML) est souvent utilise
Une page web construite simplement avec du HTML ne propose a l’utilisateur que le lien hypertexte en guise d’interactivite. L’objectif de JavaScript est d’impliquer beaucoup plus activement l’utilisateur dans la consultation d’une page web. Nous allons utiliser dans ce chapitre les concepts de programmation presentes au chapitre precedent a n de les appliquer a une page de presentation HTML. Dans la pratique, l’utilisation de JavaScript revient quasiment toujours a modi er dynamiquement la structure ou le contenu de la page HTML initialement chargee, et nous verrons quelques exemples de cette utilisation.
L’interactivite avec l’utilisateur suppose que le navigateur soit capable de reagir quand l’utilisateur s’agite (clic de souris sur un lien, retour a la page precedente, etc). Pour cela, des evenements, correspondant a des actions de l’utilisateur, ont ete de nis. La table 4.1 liste les evenements geres par JavaScript et leurs signi cations. Chaque objet JavaScript reagit a certains evenements seulement, qui sont listes, objet par objet, en annexe A, page 49.
A n de gerer un evenement, il est necessaire de speci er quel evenement on veut surveiller, et quelle action entreprendre quand l’evenement se produit. Ceci s’ecrit a l’aide d’un attribut HTML. Par exemple, la ligne suivante :
<a href="" onClick="compte++">Page suivante</a>
indique que l’on gere l’evenement "clic de souris" sur ce lien. Quand l’evenement se produit, l’action a entreprendre est d’incrementer d’une unite la valeur de la variable compte. Notons que l’on aurait pu mettre n’importe quel code JavaScript en guise d’action a entreprendre (les di erentes instructions sont alors separees par un point-virgule ( ;)). Si l’action est compliquee, on appelle habituellement une fonction.
4.2. NOTATION ORIENTEE OBJET
| Evenement | Se produit quand |
| onAbort | le chargement d’une image a ete interrompu |
| onBlur | la souris quitte une zone formulaire |
|
onClick | on clique sur un formulaire ou un lien |
| onChange | on change une zone texte ou une selection d’element |
| onFocus | la souris entre dans une zone formulaire |
| onLoad | on charge la page dans le navigateur |
| onMouseOut | la souris sort d’une zone imagemap |
| onMouseOver | la souris passe au-dessus d’un lien ou d’un formulaire |
| onReset | on vide un formulaire |
| onSelect | on selectionne un element dans un formulaire |
| onSubmit | on envoie un formulaire |
| onUnload | on sort de la page |
Tab. 4.1 { Nom et descriptions des evenements en JavaScript
Note : Les noms d’evenements sont ici ceux de la de nition initiale, avec une majuscule apres on (comme dans onClick). Dans les recommandations courantes de HTML, ces noms ne sont plus sensibles aux majuscules/minuscules. On trouve maintenant ecrit onclick par exemple.
Les di erents objets HTML sont donc sujets a des evenements particuliers. Etant donne une balise designant un objet HTML, seuls quelques evenements parmi ceux listes dans la table 4.1 peuvent survenir. Autrement dit, on ne peut pas associer la surveillance de n’importe quel evenement dans le code HTML.
Par exemple, l’evenement onSubmit (validation d’un formulaire) ne peut concerner qu’un formulaire. La surveillance de cet evenement est inseree dans le HTML de maniere similaire a ceci :
<form id="formu" onSubmit="fait_qquechose()">
.
</form>
De m^eme, seul l’evenement onClick peut ^etre associe a un bouton radio. On remarquera egalement que la balise <input type="passwd"> utilisee pour des saisies con dentielles ne generent jamais d’evenement. Cette decision a ete prise par les concepteurs du langage a n de ne pas permettre a des gens mal intentionnes de recuperer des mots de passe.
La table 4.2 indique quels evenements concernent quelles balises.
Nous verrons tout au long du chapitre, a travers les exemples, comment sont utilises ces evenements. Mais avant cela, nous devons aborder la notion d’objet utilisee entre autres pour structurer les elements d’une page web.
JavaScript est un langage oriente objet. Je ne developpe pas ici les concepts de la programmation objet, mais precisons certains termes et idees a n de comprendre
| Balise | Evenement |
| <a> | onClick onMouseOver onMouseOut |
| <area> | onMouseOver onMouseOut |
| <body> | onBlur onFocus onLoad onUnload |
| <form> | onReset onSubmit |
| <img> | onAbort onLoad onError |
| <input type="button"> <input type="checkbox"> <input type="radio"> | onClick |
| <input type="text"> | onBlur |
| <textarea> | onChange onFocus |
| <input type="select"> | onSelect onBlur onChange onClick onFocus |
Tab. 4.2 { Les evenements associes aux balises
les notations utilisees.
Une classe est la description d’un ensemble de proprietes et de methodes. Les proprietes sont les donnees, et les methodes sont les fonctions qui manipulent ces donnees. Un objet est une instance de classe.
On pourrait par exemple de nir la classe voiture, dont les proprietes seraient l’immatriculation, le modele, la marque, la couleur, le propietaire, etc. Les methodes pourraient alors ^etre repeindre() qui changerait la propriete couleur, revendre() qui changerait la propriete proprietaire, etc. On pourrait de nir deux instances v1 et v2 de la classe voiture. Ces deux instances possedent automatiquement les proprietes et les methodes de la classe voiture. On peut ensuite appliquer a chacun de ces objets les methodes qui ont ete de nies pour cette classe. Par exemple, v1.revendre() et v2.revendre() modi eront les proprietaires respectifs de ces deux objets de la classe voiture.
On peut considerer que la notion d’objet est une generalisation de la notion de type decrite en section 2.6, page 17. Les objets possedent en e et des proprietes supplementaires, comme la notion de classe et d’heritage. Nous n’utiliserons pas ces notions, et par consequent nous pouvons considerer une classe d’objet comme un type dans ce qui suit.
Par consequent, nous retrouvons naturellement, parmi les classes d’objets prede nies dans le langage, les classes :
Array : les tableaux
Boolean : les booleens
Date : les dates
Number : les valeurs numeriques (entiers ou reels)
String : les chaines de caracteres
Par exemple, la classe String englobe les objets de type chaine de caracteres. Creer un objet de cette classe se fait a l’aide de l’operateur new. La declaration suivante :
var texte1 = new String; var texte2 = new String("bonjour ");
cree deux objets de noms texte1 et texte2 appartenant tous deux a la classe String. Notons que texte2 a ete initialise simultanement a sa declaration.
Les proprietes des objets
Pour acceder a une propriete p d’un objet o, on utilise la notation o.p. Par exemple, l’objet texte2 declare precedemment appartient a la classe String. Or tous les objets de cette classe ont la propriete length qui de nit la longueur de la chaine memorisee dans cette objet. On peut donc faire a cher la longueur par :
document.write(texte2.length);
La m^eme notation s’applique aussi pour executer des methodes des objets. La aussi, il est necessaire de conna^tre le noms des methodes existantes pour les objets prede nis. Toujours pour la classe String, la methode pre-de nie concat() permet de concatener (mettre bout-a-bout) deux chaines. Si, dans la continuite de l’exemple precedent j’ecris :
texte1 = texte2.concat(" monsieur");
alors le contenu de l’objet texte1 devient \bonjour monsieur", c’est-a-dire la concatenation de la chaine contenue dans texte2 et de la chaine \ monsieur".
Quand une page web est chargee, le navigateur cree plusieurs objets pour representer les informations y gurant. Les premieres versions de DHTML ont mis en place un modele d’objets presente ci-dessous et toujours en cours. Plus recemment, un modele plus general a ete propose par le W3C : c’est le Document Object Model (DOM). Il propose un ensemble de methodes et d’interfaces standarts permettant de decrire, parcourir et modi er de facon uniforme des documents HTML mais aussi XML. Pour les documents HTML, il est donc propose une representation conforme au DOM [HTM03].
Quelque soit le modele de document utilise, les principes sont proches et les designations d’objets totalement compatibles. La seule consequence actuellement, est qu’il y a souvent plusieurs manieres de proceder. On peut aussi noter que les methodes proposees par le DOM sont plus puissantes car permettent de modi er tous les elements du document (par exemple supprimer un morceau de texte HTML).
Quand une page web est chargee, le navigateur cree plusieurs objets pour representer les informations y gurant. Ces objets sont classes de maniere hierarchique, l’objet le plus haut dans la hierarchie (appele aussi racine car la hierarchie est arborescente) etant un objet de la classe Window. Le schema ci-dessous ( gure 4.1) montre l’organisation des di erentes classes dans le modele d’objets DHTML. On peut interpreter ce schema comme <<un objet window contient eventuellement des frames, une adresse, un document>> et <<un document contient lui-m^eme eventuellement des formulaires et des liens>>, etc.
Fig. 4.1 { Les classes d’objets DHTML
Les noms choisis par le navigateur pour instancier les objets des di erentes classes sont les m^emes que ceux de la classe mais typographies en minuscule. Quand plusieurs objets appartiennent a une m^eme classe, ils sont regroupes dans un tableau et peuvent ^etre distingues par leur place dans le tableau.
Ainsi, l’objet (unique) de la classe Window s’appelle window et les di erents objets cadres (eventuellement plusieurs dans une fen^etre) s’appellent window.frames[0], window.frames[1], etc.
Note : Etant donne qu’on accede tres souvent a des objets de la classe window, le langage permet, pour des raisons de commodite, d’ommettre le mot window quand on designe un objet faisant partie de la hierarche de window |il s’agit donc des objets location, history et document. Les deux declarations suivantes sont donc equivalentes, la deuxieme etant simplement plus concise :
var url = ; var url = ;
Pour chacun des elements HTML gurant dans une page (c’est-a-dire ceux de nis par des balises telles <img> pour une image), le navigateur les range dans la hierarchie vue dans la section precedente. Pour chaque objet HTML nomme avec l’attribut name ou id, il cree un objet JavaScript correspondant de m^eme nom.
Prenons le document HTML tres simple suivant :
| <html> <head></head> <body> <img id="header" src="header . jpg" alt="image"> <form id="quest"> <input id="email" type="text"><br> <input type="submit"> </form> <img id=" footer " src="greyfoot . jpg" alt="image"> </body> </html> |
Vu dans un navigateur, cet exemple pourrait ressembler a l’image representee gure 4.2 ci-dessous.
Fig. 4.2 { L’exemple HTML rendu par un navigateur
Ici <img> et <form> sont des balises HTML qui sont representees dans la classi cation de la gure 4.1 par les classes Image et Form respectivement. Pour les deux balises <input> on remarque que leur type est aussi reference dans la classi cation par les class Text et Submit.
En suivant les branches de la gure 4.1, on deduit l’objet qui a ete cree pour representer chacun de ces elements HTML. On part de Window, on passe par Document et on arrive au niveau Image et Form.
Fig. 4.3 { L’inspecteur DOM de Mozilla-Firefox montre la hierarchie des objets
Certains outils comme l’inspecteur DOM du navigateur Mozilla-Firefox sont capables d’a cher comment sont hierarchises les elements par le navigateur ( g. 4.3).
Designation par le nom Comme des noms on ete donnesa ces elements, on peut designer en javascript ces elements par (respectivement) :
window.document.bandeau window.document.quest window.document.footer
En suivant la hierarchie, on peut aussi designer le seul champ <input> portant un nom a l’interieur du formulaire en suivant la m^eme logique.
window.document.quest.email
Cette notation est concise et largement utilisee, mais n’est pas la seule.
Designation par tableau Des qu’une classe peut comporter plusieurs objets, le navigateur cree un tableau pour chaque classe avec les di erents objets. Dans chaque tableau les objets sont numerotes dans leur ordre d’apparition dans la page. Le nom du tableau est celui de la classe, mis au pluriel (e.g. images, forms, anchors, links, ). Ainsi, on peut aussi designer les elements precedents par leur numero d’ordre dans la classe. Aussi les expressions suivantes sont equivalentes (i.e. designent les m^emes objets).
window.document.bandeau = window.document.images[0] window.document.quest = window.document.forms[0] window.document.quest.email = window.document.forms[0].email window.document.footer = window.document.images[1]
Cette ecriture est cependant risquee : si l’element HTML change de place, sa designation en javascript risque d’^etre fausse. Etant donne que javascript supporte les tableaux associatifs, il est recommande de designer l’element de tableau a l’aide de son nom, et pas de son numero. De maniere equivalente, on peut ecrire :
window.document.bandeau = window.document.images[’bandeau’] window.document.quest = window.document.forms[’quest’] window.document.quest.email = window.document.forms[’quest’].email window.document.footer = window.document.images[’footer’]
Elements Notons que les classes en dessous de Form ne sont pas distinguees. (Il n’y a pas de tableau d’objets texts par exemple). Tous les objets sous un objet Form sont ranges dans un tableau elements, quelque soit leurs types.
On peut donc utiliser ces di erentes notations pour notre champ de texte :
window.document.quest.email
= window.document.forms[’quest’].elements[0]
= window.document.forms[’quest’].elements[’email’]
Methodes DOM La recommandation DOM propose des methodes pour acceder aux objets. Parmi celles-ci on a :
{ getElementById() et getElementsByName() qui rend un objet correspondant a l’element HTML designe par son attribut id ou name respectivment,
{ getElementsByTagName() qui rend un tableau des objets representant une balise. Par exemple, getElementsByTagName("a") donne un tableau comportant les hyper-liens.
Voici quelques exemples d’equivalence avec les notations precedentes :
window.document.quest.email = document.getElementById(’email’) window.document.images = document.getElementsByTagName(’img’)
Il est souvent commode de pouvoir designer l’objet manipule sans devoir le nommer de maniere explicite, comme nous l’avons decrit precedemment. Il existe le mot cle this qui permet de designer l’objet en cours de manipulation. Illustrons ceci par un exemple :
| <html> <head> <script type="text/ javascript "> function testResults (form) f var TestVar = form . elements [ ’champ ’ ] . value ; alert ("Vous avez tape : " + TestVar ); g </script> </head> <body> |
<form id="monformulaire" method="get" action="">
<p>Saisir quelquechose dans le champ :<br>
<input type="text" id="champ"><br>
<input type="button" id="bouton" value="Click" onClick=" testResults ( this . form)">
</p></form>
</body></html>
Dans la declaration du formulaire HTML (lignes 9 a 14), on remarque l’insertion de l’evenement Javascript onClick, qui indique qu’on doit appeler la fonction testResults() (de nie lignes 3 a 6) lorsque le bouton a ete clique. On desire passer comme argument a cette fonction le formulaire monformulaire. On pourrait designer cet objet par son nom complet, ce qui donnerait :
onClick="testResults(document.forms[’monformulaire’])". Cependant, il est aussi possible de le designer, comme c’est le cas, par . Cette designation est en e et plus generale, puisqu’elle est valable quelquesoit le nom du formulaire.
Nous passons en revue dans ce chapitre, quelques uns des objets les plus utilises, en donnant des exemples dans lesquels ils ont utilises. Vous trouverez plus de details concernant chacune des classes dans l’annexe A ou les proprietes et les methodes des classes sont listees de maniere exhaustive.
Cette classe fournit des methodes utiles d’a chage, parmi lesquelles on trouve des fen^etres pop-up de dialogue :
| alert() a | che une fen^etre de dialogue |
| confirm() a | che une fen^etre de dialogue avec boutons ’OK’ et ’Cancel’ |
| prompt() a | che une fen^etre de dialogue avec une zone texte |
|
Methode alert() | La methode alert() est tres utile pour le deboggage de code : |
on peut utiliser cette methode pour faire a cher les valeurs des variables. La gure 4.4 illustre l’apparition d’un fen^etre pop-up de dialogue apres l’appel a la methode alert().
Fig. 4.4 { Pop-up alert()
Cette fen^etre est obtenue gra^ce a la ligne de code suivante : window.alert("Texte affiche par window.alert()");
D’autres methodes permettent d’ouvrir et de fermer de nouvelles fen^etres ou de changer leur apparence. Une autre methode tres utile est la methode setTimeout(). Elle permet d’executer un code JavaScript apres un laps de temps donne (indique en millisecondes). Par exemple :
setTimeout("alert(’bonjour’);", 500);
fera appara^tre la fen^etre de dialogue une demi-seconde apres le chargement de la page.
Methode confirm() Cette methode permet de poser une question a l’utilisateur, qui repondra en appuyant soit sur "Ok" soit sur "Annuler". Si "Ok" est appuye, la fonction retourne true, et si "Annuler" est appuye, elle rend false.
Methode prompt()
String s = prompt()(message [,initial,]))
Cette methode permet a l’utilisateur, de lire une question, speci ee par la chaine message, de saisir une valeur et d’appuyer ensuite sur "Ok". On peut speci er une valeur par defaut a l’aide du deuxieme parametre optionnel initial. La fonction rend la valeur saisie sous la forme d’une chaine de caractere. Si le programme attend une valeur numerique, il faut la convertir avec des fonctions comme parseInt() que nous avons vu en section 2.6.5, page 20.
Dans l’exemple suivant, on demande a l’utilisateur son age, en supposant que 20 est une valeur qui fera l’a aire dans de nombreux cas. On convertit ensuite la reponse sous forme de chaine en une valeur numerique.
| reponse = prompt("Quel est votre age ?","20"); age = parseInt(reponse,10); |
1
2
Methode open() Cette methode permet d’ouvrir une nouvelle fen^etre de navigateur. Ce type d’action est utilise en general pour a cher des informations annexes qui ne doivent pas interferer avec la fen^etre principale. Le prototype de la fonction est :
window w = open()(URL ,titre [,options,]))
URL une chaine speci ant l’URL a charger l’ouverture de la fen^etre. L’URL peut ^etre un chier ou une page internet.
titre une chaine donnant un titre a la fen^etre.
options une chaine contenant une liste de mots-cles, separes par des virgules (ne pas inserer d’espaces dans cette chaine), qui indiquent quelle apparence doit avoir la nouvelle fen^etre, comme par exemple sa taille. Suit quelques unes des options qu’il est possible de speci er.
| height | hauteur de la fen^etre en pixels |
| width | largeur de la fen^etre en pixels |
| scrollbars | cree des ascenseurs de de lement si vaut yes |
| status | a che une barre d’etat si vaut yes |
| toolbar | cree la barre d’outil avec boutons de navigation |
| resizable | autorise le redimensionnement de la fen^etre si yes speci e. |
| location | cree la fen^etre permettant de saisir l’adresse |
Si on ne speci e pas d’URL la fen^etre ouverte sera vierge. Si on ne precise pas d’options, certaines options seront activees ou non, automatiquement selon le contexte (place disponible pour a cher la barre d’outils, etc). Voici deux exemples :
| i f ( confirm ("ouverture w1 ?")) w1 = window . open("http ://www. google .com" ,"" ,"toolbar=false " ); i f ( confirm ("ouverture w2 ?")) f w2 = window . open("" ,"nouvelle" ,"width=200,height=200" ); w2. document . write ("<html><body><h1>Bonjour</h1></body></html>" ); g |
La ligne 2 permet d’ouvrir dans une fen^etre sans barre d’outil, la page d’un moteur de recherche. La ligne 4 ouvre une fen^etre vierge, de petite taille, dans laquelle on imprime un message a la ligne 5.
Les cadres (frames) Les cadres sont representes par des objet de la classe Window. Quand une page contient des cadres, l’objet de cette classe contient un tableau de tels objets. A l’interieur d’un cadre, on peut faire reference a la fen^etre le contenant a l’aide de window.parent ou simplement parent. Pour des cadres imbriques doublement, on utilise window.parent.parent pour acceder a la fen^etre originelle ou simplement .
L’objet document est probablement le plus utilise. Les proprietes de cet objet font reference au contenu de votre page web. Parmi celles ci, on trouve : bgColor la couleur de fond
fgColor la couleur du texte
lastModified une chaine donnant la date de derniere modi cation
images un tableau d’objets Image forms un tableau d’objets Form links un tableau d’objets Link
La plupart de ces proprietes sont initialisees avec les balises HTML. La propriete bgColor par exemple, est celle qui est speci ee par l’attribut deprecie bgcolor dans la balise <body> de la page.
Les informations concernant les images peuvent ^etre stockees par un objet de cette classe. Les proprietes de cet objet recensent entre autres l’URL de l’image, son etat de chargement, ses dimensions, etc.
Pour illustrer simplement la manipulation d’images, voici quelques lignes permettant de changer l’image quand le pointeur de la souris passe au-dessus. En l’occurence, on veut que l’image du point vert () se transforme en une eche jaune () quand la souris passe sur l’image. Bien su^r, il faut gerer l’evenement qui se produit quand la souris passe sur l’image. Pour cela, on ecrit dans la partie HTML le code suivant, en supposant que notre image est la premiere de la page.
| <a href="#" onMouseOver="document . images [ 0 ] . src=’right . gif ’ " onMouseOut="document . images [ 0 ] . src=’greenball . gif ’ "> <img id="image1" src=" greenball . gif " alt=""> </a> |
Nous avons ici deux instructions HTML : celle qui cree un lien et celle qui cree une image. L’instruction de creation de lien comporte une instruction JavaScript qui charge les chiers ou dans la place reservee a l’image en fonction de l’evenement. Il est important de de nir la gestion de l’evenement avant de creer l’image par la balise <img>.
Un objet de type form est utilise pour decrire les proprietes et traitements inherents a un formulaire HTML. Cette classe est celle qui contient le plus grand nombre de classes derivees, comme le montre la gure 4.1. En e et, le formulaire peut contenir de nombreux objets de types di erents, comme des champs de saisie, des boutons a selection multiples, etc.
Pour illuster simplement la manipulation de formulaire, essayons de contro^ler la saisie d’un formulaire comme celui de la gure 4.5.
Fig. 4.5 { Un formulaire d’enregistrement
On veut interdire a l’utilisateur de valider le formulaire si il n’a saisi aucun caractere dans le champ nom.
Nous de nissons donc le formulaire correspondant en HTML avec la balise <form>. On donne le nom formulaire a ce formulaire et on associe une action JavaScript a executer lorsque l’utilisateur validera le formulaire. En l’occurence on execute une fonction que l’on a choisi d’appeler verifie().
Notons qu’il est necessaire de retourner la valeur faux au formulaire (d’ou la presence de return verifie() ligne 5) pour que l’attribut action ne soit pas realise. Pour cette veri cation, nous aurons besoin de savoir ce que l’utilisateur a saisi dans le champ nom du formulaire.
| <html> <body> Donnez moi votre nom: <form id="formulaire" onSubmit="return verifie ()" action="merci . html" method="get"> <p> Votre nom : <input id="nom" type="text" value=""> <br> <input type="submit" value=" Enregistrer "> <input type=" reset " value="Effacer"> </p> </form> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| </body> <html> |
15
16
Le formulaire de ni, il faut ecrire en quoi consiste la veri cation, c’est-a-dire ecrire la fonction verifie(). Comme d’habitude, nous placons la de nition de la fonction dans la partie <head> du document HTML.
La veri cation consiste ici a veri er que dans le formulaire, le champ nom n’est pas une chaine de caracteres vide. Si c’est le cas, une fen^etre pop-up a che un message d’erreur, le curseur revient dans le champ nom, et la fonction renvoie la valeur faux pour indiquer que la saisie n’est pas correcte. Dans le cas contraire, la fonction renvoie vrai et le formulaire a chera la page de remerciements pour avoir rempli correctement le formulaire.
| <html> <head> <script type="text/ javascript "> function verifie () f i f (document . forms [ ’ formulaire ’ ] . elements [ ’nom ’ ] . value == "") f document . forms [ ’ formulaire ’ ] . elements [ ’nom ’ ] . focus (); alert ("Le nom est obligatoire " ); return false ; g else return true ; g </script> </head> |
1
2
3
4
5
6
7
8
9
10
11
12
13
Nous avons vu dans l’exemple du formulaire precedent qu’il etait compose de trois types d’elements di erents : le type input, pour le champ nom, le type submit et le type reset. La balise <form> du langage HTML permet d’utiliser d’autres elements. Tous les elements qui peuvent composer un formulaire apparaissent dans la gure 4.1. Examinons maintenant comment nous pouvons manipuler certains de ces objets.
Les objets select
On peut par exemple creer des menus avec des elements de type select. Ci-dessous, nous creons un formulaire permettant de choisir un systeme d’exploitation. Nous prevoyons d’ores et deja d’appeler la fonction choix() lorsque l’utilisateur aura choisi un element de la liste.
| <form> Systeme d’ exploitation : <select id=" l i s t e " onChange="choix (); "> <option value="Vous avez choisiBeOs">BeOs</option> <option value="Vous avez choisiLinux">Linux</option> <option value="Vous avez choisiMacOs">Macintosh</option> <option value="Vous avez choisiSolaris ">Solaris</option> <option value="Vous avez choisiWindows">Windows</option> </select> </form> |
1
2
3
4
5
6
7
8
9
10
Ce formulaire nous permet d’obtenir l’ecran de la gure 4.6. On voit a gauche l’aspect initial du menu, et a droite son apparence lorsqu’on clique dessus.
Fig. 4.6 { Un formulaire avec menu select
Maintenant nous voulons a cher le choix de l’utilisateur. Par consequent, il faut retrouver l’element choisi dans la liste. Notre formulaire n’a pas de nom mais comme c’est le seul (donc le premier), on peut le designer par document.forms[0]. Nous avons donne un nom a notre menu : il s’appelle liste et nous pouvons le designer par document.forms[0].liste. Ce type de menu possede des proprietes de nies : la propriete selectedIndex conserve le numero de l’element choisi (les elements sont numerotes du haut vers le bas, et le premier est numerote 0). Les di erents attributs value sont eux stockes dans la propriete options, qui est un tableau de chaines. Nous avons la les informations necessaires pour a cher un message correspondant au choix fait par l’utilisateur. On ecrit la fonction :
| function choix () f var i , s ; i = document . forms [ 0 ] . elements [ ’ l i s t e ’ ] . selectedIndex ; s = document . forms [ 0 ] . elements [ ’ l i s t e ’ ] . options [ i ] . value ; window . confirm ( s ); g |
1
2
3
4
5
6
Une fois determine le message de value du formulaire associe avec le choix fait, on demande con rmation a l’utilisateur. Cette con rmation est illustree par la gure
4.7.
Fig. 4.7 { Fen^etre a chant la selection et demandant con rmation
Les objets radio
Les boutons radio sont des boutons permettant un choix unique parmi plusieurs options. Graphiquement, le fait de cliquer sur un des boutons entra^ne la de-selection des autres boutons. La gure 4.8 presente un exemple de choix par boutons radio. Dans cet exemple, nous voulons egalement a cher le choix fait par l’utilisateur apres qu’il ait appuye sur le bouton \A cher choix".
Fig. 4.8 { Selection par bouton radio
Le bouton radio fait partie du langage HTML : comme le bouton select, il est de ni dans un formulaire HTML. Pour creer l’exemple de la gure 4.8, nous avons decrit le formulaire :
1
| <form id="formu age" action=""><p> <input name="age" type="radio" value="15 ">vous avez 15 ans ou moins<br <input name="age" type="radio" value="16 30">vous avez 16 30 ans<br> <input name="age" type="radio" value="31 50">vous avez 31 50 ans<br> <input name="age" type="radio" value="50+">vous avez 50 ans ou plus<br> <input type="button" value=" Afficher choix" onClick="afficheChoix (); "> </p></form> |
2 >
3
4
5
6
7
Il est important que les noms donnes aux boutons dans le formulaire soient tous les m^emes, car c’est parmi ces boutons de m^eme nom que le choix unique est autorise. La derniere ligne du formulaire, associe au bouton permettant de valider le choix, la fonction JavaScript appelee quand on appuie sur le bouton. Cette fonction permet d’a cher le texte correspondant au bouton selectionne.
Pour determiner quel bouton est selectionne, le code decrit une boucle veri ant tour a tour pour chacun des boutons, si la propriete checked est vraie. Si c’est le cas, on ouvre une fen^etre a chant le texte associe au bouton. Le code de la fonction est le suivant :
| function afficheChoix () f var nb = document . forms [ ’ formu age ’ ] . age . length ; for ( var i =0;i< nb; i++) f if (document . forms [ ’ formu age ’ ] . age [ i ] . checked ) alert (document . forms [ ’ formu age ’ ] . age [ i ] . value ) g g |
1
2
3
4
5
6
7
Les objets checkbox
Les checkbox permettent de selectionner plusieurs elements dans une liste (choix multiple). En HTML, le formulaire presente en gure 4.9 est obtenu par l’extrait de texte suivant :
| Choisissez vos options : <form id="opt" action=""><p> <input type="checkbox" name="choix" value="radio"> Auto radio (1800 F)<br> <input type="checkbox" name="choix" value="p. metal . "> Peinture metalisee (3000 F)<br> <input type="checkbox" name="choix" value="jantes "> Jantes alliages (2500 F)<br> <input type="checkbox" name="choix" value="clim . "> Climatisation (7000 F)<br> <input type="button" value="Total options" onClick=" afficheTotal (); "> </p></form> |
1
2
3
4
5
6
7
8
9
10
11
12
13
Notons que tous les elements checkbox portent le m^eme nom. Comme precemment, ceci permet au navigateur de contruire un tableau (vecteur) regroupant tous ces objets et portant le nom choix[]. On note aussi, a la derniere ligne du formulaire, l’appel a la fonction afficheTotal(), qui sera chargee de faire le total du prix des options selectionnees par l’utilisateur.
Fig. 4.9 { Selection dans un formulaire a l’aide de cases checkbox
Le code de la fonction illustre l’acces au contenu des cases checkbox du formulaire. On determine le nombre nb de cases de nom choix dans le formulaire nomme opt (ligne 4). Puis, on peut parcourir le tableau des cases, et pour chaque case (.choix[i]), veri er si la case a ete cochee (ligne 8). Il faut utiliser ici la propriete de type booleen checked de l’objet checkbox. Si c’est le cas, on cumule le prix de cette option stockee dans le tableau tarif dans le m^eme ordre (choix arbitraire) que les cases (ligne 10). On ajoute aussi l’intitule de cette option au message recapitulatif nal (ligne 9).
| <script type="text/ javascript "> function afficheTotal () f tarif = new Array(1800 , 3000 ,2500 ,7000); |
1
2
3
| var nb = document . forms [ ’ opt ’ ] . choix . length ; var somme = 0; var recap = "" ; for ( var i =0;i< nb; i++) f if (document . forms [ ’ opt ’ ] . choix [ i ] . checked ) f recap += document . forms [ ’ opt ’ ] . choix [ i ] . value + " " ; somme += tarif [ i ] ; g g alert ("Total =" + somme + "F (" + recap +")" ); g </script > |
4
5
6
7
8
9
10
11
12
13
14
15
Annexe A
Une ancre (anchor) est un repere dans une page. L’utilite de l’ancre est de pouvoir amener l’utilisateur directement sur la zone de la page marquee par ce repere. Ceci n’est generalement utilise que quand la page est longue. zone d’une page. An example of an anchor would be
Syntaxe <A NAME="mon-ancre"> qui fait reference a l’ancre de nie par <A HREF="#mon-ancre">
Proprietes aucune
Methodes aucune
Les tableaux servent a stocker d’autres objets. comme par exemple plusieurs champs dans un formulaire. Les di erents elements sont ranges dans un tableau dans l’ordre ou ils apparaissent.
Proprietes length
Methodes aucune
L’objet button ainsi que ses proprietes sont de nis dans un formulaire. La propriete value est le texte appara^ssant sur le boutton.
Syntaxe <INPUT TYPE="button" name="Name" value="value">
Proprietes name et value
Methodes click()
Evenements onBlur, onClick, onFocus, onMouseDown, onMouseUp
A.4. CHECKBOX
Une checkbox a l’apparence d’une bo^te carree qu’on selectionne ou deselectionne par un clic de souris. Les checkbox sont de nies a l’aide de la balise <FORM>.
Syntaxe <INPUT TYPE="checkbox" name="Name" value="value">
Proprietes checked, defaultChecked, name, and value
Methodes blur(), click(), focus()
Evenements onBlur, onClick, onFocus
L’objet date est un objet dote de nombreuses methodes de manipulation. JavaScript memorise les dates comme le nombre de millisecondes (ms) ecoulees depuis le 1er Janvier 1970.
Proprietes aucune
Methodes
| getDate() | rend le jour du mois de la date courante |
| getDay() | rend le jour de la semaine de la date courante |
| getHours() | rend le jour de la semaine de la date courante |
| getMinutes() | rend les minutes de la date courante |
| getMonth() | rend le mois de la date courante |
| getSeconds() | rend les secondes de la date courante |
| getTime() | rend la valeur numerique de la date courante |
| getTimezoneO set() | rend le decalage horaire en minutes avec GMT |
| getYear() | rend l’annee de la date courante |
| parse(d) | rend le nombre de ms ecoulees entre d et le 1/1/70 |
| setDate(j) | met a la jour la date au jour j |
| setHours(h) | met a la jour la date au jour h |
| setMinutes(m) | met a la jour la date a la minute m |
| setMonth(m) | met a la jour la date au mois m |
| setSeconds(s) | met a la jour la date a la seconde s |
| setTime(n) |
met a jour la date etant donne le nombre n de ms depuis le 1/1/70 |
| setYear(d) | met a jour l’annee pour une date d |
| toGMTString() | convertit la date une date GMT |
| toLocaleString() | convertit la date une date locale |
| UTC(a,m,j) | rend le nombre de ms entre la date et le 1/1/70 |
L’objet document contient les onformations sur le document courant. Il fournit aussi des methodes pour a cher du texte au format HTML dans le navigateur.
| alinkColor | couleur d’un lien actif |
| anchors | tableau regroupant les ancres du document |
| bgColor cookie | couleur de fond |
| fgColor | couleur d’avant plan |
| forms | tableau des formulaires |
| lastModi ed | date de deniere modi cation |
| linkColor | couleur des liens |
| links | tableau des liens |
| location | URL du document courant |
| referrer | URL de la page precedemment visitee |
| title | titre de la page |
| vlinkColor | couleur d’un lien visite |
Methodes
| close() | ferme un ux ouvert par la methode open() |
| getSelection() | rend la chaine selectionnee dans le document courant |
| open() | ouvre un ux pour a chage de texte avec write() |
| write(e1;::;en) | a che les expressions e1;::;en dans le document. |
| writeln(e1;::;en) | idem mais ajoute un retour a la ligne |
L’objet form permet de creer un formulaire. Les formulaires peuvent contenir des champs, des zones de texte des boutons, des checkboxes, etc.
Syntaxe
<FORM NAME="name" TARGET="target" ACTION="file" METHOD="POST/GET" ENCTYPE="encodingtype">
ou TARGET designe la fen^etre dans laquelle les resultats doivent aller, ACTION de ni quelle action doit ^etre entreprise quand le formulaire a ete rempli. Ce peut ^etre entre autres un nom de chier HTML a a cher, un script cgi a executer, ou une adresse electronique vers laquelle envoyer un courrier. METHOD peut prendre les valeurs POST ou GET, qui de nissent comment la reponse est envoyee au serveur. ENCTYPE indique l’encodage MIME a utiliser dans le transfert.
Proprietes action, elements, encoding, length, method, target, button, checkbox, hidden, password, radio, reset, select, submit, text, et textarea
Methodes submit()
L’objet frame permet de manipuler les cadres. Un cadre est une division de la page web en plusieurs zone. La balise <FRAMESET> permet de diviser une zone en deux, chacune des zones pouvant ^etre nouveau divisee en deux.
A.9. HIDDEN
Syntaxe
<FRAMESET ROWS="x1,x2" COLS="y1,y2">
<FRAME SRC="file" NAME="name">
</FRAMESET>
ROWS speci e les nombres de lignes dans le premier cadre et le deuxieme cadre par x1 et x2 respectivement, qui sont soient des entiers, soit des pourcentages de la zone divisee. De la m^eme maniere, COLS speci e la largeur des cadres. SRC indique quel chier doit ^etre charge dans le cadre.
Proprietes frames name
length
parent
self
window
Methodes clearTimeout(), et setTimeout()
L’objet hidden est un champ texte invisible pour l’utilisateur, permettant d’ajouter des informations pre-de nies dans un formulaire.
Syntaxe <INPUT TYPE="hidden" NAME="name" VALUE="value"> ou VALUE est la valeur du champ.
Proprietes name et value
Methodes : aucune
L’objet history contient des informations sur la session de navigation en cours. Les informations sont essentiellement les URL des sites visites.
Proprietes length
Methodes back(), forward(), et go()
L’objet Image contient les informations concernant les images et cartes inserees dans le document HTML a l’aide des balises <IMG> et <AREA>. Les proprietes sont disponibles pour Netscape 3, Netscape 4 et Internet Explorer 4 a l’exception des proprietes x et y uniquement disponibles dans Netscape 4.
| border | valeur de l’attribut de m^eme nom dans la balise <IMG> | |
| complete | booleen indiquant si l’image est completement a chee | |
| height | la hauteur de l’image en pixels | |
| hspace | valeur de l’attribut de m^eme nom dans la balise <IMG> | |
| lowsrc | similaire a src, mais pour des images longues a charger | |
| name | valeur de l’attribut de m^eme nom dans la balise <IMG> | |
| src | le nom du chier image | |
| vspace | valeur de l’attribut de m^eme nom dans la balise <IMG> | |
| width | valeur de l’attribut de m^eme nom dans la balise <IMG> | |
| x | l’abscisse du coin haut-gauche de l’image | |
| y | l’ordonnee du coin haut-gauche de l’image | |
| Methodes | aucune | |
| A.12 link | ||
Syntaxe <HREF="location" NAME="name" TARGET="target"> avec HREF l’URL du chier a charger quand on clique sur le lien, et TARGET est le nom de la fen^etre ou l’a cher.
| Proprietes | hash | ancre dans l’URL |
| host | nom du serveur dans l’URL | |
| hostname | adresse IP du serveur | |
| href | URL complete | |
| pathname | texte apres le symbole / dans l’URL | |
| port | port que le serveur utilise | |
| protocol | debut de l’URL (http,ftp, ) | |
| search | texte apres le symbole? dans l’URL | |
| target | ou a cher la page de cette URL | |
| Methodes | aucune |
L’objet location contient les informations sur l’URL courante.
| Proprietes | hash | ancre dans l’URL |
| host | nom du serveur dans l’URL | |
| hostname | adresse IP du serveur | |
| href | URL complete | |
| pathname | texte apres le symbole / dans l’URL | |
| port | port que le serveur utilise | |
| protocol | debut de l’URL (http,ftp, ) | |
| search | texte apres le symbole? dans l’URL | |
| target | ou a cher la page de cette URL | |
| Methodes | aucune |
A.14. MATH
Proprietes E constante d’Euler ( 2:718) LN2 logarithme de 2 ( 0:693)
LN10 logarithme de 10 ( 2:302)
LOG2E Returns the base 2 logarithm of e, about 1.442
LOG10E Returns the base 10 logarithm of e, about 0.434
PI valeur de Pi ( 3:14159)
SQRT1_2 racine carree de ( 0:707)
SQRT2 racine carree de 2 ( 1:414)
Methodes abs(x) rend la valeur absolue de x acos(x) rends arc cosinus de x asin(x) rends arc sinus de x atan(x) rend l’arc tangente de x
ceil(x) rend l’entier immediatement superieur ou egal a x
cos(x) rend le cosinus de x
exp(x) rend ex
oor(x) rend l’entier immediatement inferieur ou egal a x
log(x) rend le logarithme de x max(x,y) rend le maximum de x et y min(x,y) rend le minium de x et y pow(x,y) rend xy random() rend un nombre aleatoire entre 0 et 1
round(x) rend l’entier le plus proche de x sin(x) rend le sinus de x sqrt(x) rend px tan(x) rend la tangente de x
Cet objet permet d’obtenir des informations sur le navigateur visitant la page.
Proprietes appCodeName rend le nom de code du navigateur (Mozilla) appName rend le nom commercial du navigateur appVersion rend le numero de version du navigateur userAgent rend le nom complet du navigateur
Methodes aucune
L’objet password cree un champ texte comme l’objet text, mais les caracteres saisis apparaissent comme des asterisques, rendant la saise con dentielle aux yeux d’autres personnes que l’utilisateur.
Syntaxe
<INPUT TYPE="PASSWORD" NAME="NAME" VALUE="VALUE" SIZE="SIZE">
SIZE est la largeurdu champ en nombre de caracteres.
defaultValue valeur initiale du champ
name nom du champ
value valeur courante du champ
Methodes blur() Enleve le curseur du champ
focus() Amene le curseur dans le champ select() Selectionne le texte saisi
Les objets radios sont des boutons ne permettant a l’utilisateur de ne choisir qu’une option parmi plusieurs.
Syntaxe <INPUT TYPE="radio" NAME="Name" VALUE="Value" {CHECKED}> ou VALUE est le texte apparaissant sur le bouton. En speci ant l’attribut CHECKED alors le bouton est pre-selectionne au chargement du formulaire.
Proprietes checked indique si le bouton a ete selectionne
defaultChecked indique quel bouton doit ^etre pre-selectionne
length donne le nombre de boutons
object
name permet de donner un nom au(x) bouton(s) value permet de donner une valeur au(x) bouton(s)
Methodes click()
Evenements onBlur, onClick, onFocus
Le bouton reset permet de reinitialiser un formulaire.
Syntaxe <INPUT TYPE="RESET" NAME="NAME" VALUE="VALUE"> ou VALUE est le texte apparaissant sur le bouton.
Proprietes name Le nom du bouton value La chaine associee au bouton
Methodes click()
Evenements onBlur, onClick, onFocus
Syntaxe
<SELECT NAME="NAME" SIZE="SIZE" {MULTIPLE}>
<OPTION VALUE="option"> Texte </SELECT> ou SIZE xe le nombre d’options avant de derouler le menu (defaut 1), MULTIPLE, s’il est precise fait du menu une liste a choix multiple. L’attribut <OPTION VALUE="option"> ajoute une option de menu a chaque fois qu’il est ajoute. Il faut donc un attribut OPTION pour chaque option du menu.
A.20. STRING
length Met a jour le nombre d’options name Met a jour le nom du menu
Proprietes
options Tableau des di erentes options du menu selectedIndex Rend le numero de l’option choisie
Methodes : blur(), et focus()
Evenements onBlur, onChange, onFocus
Proprietes length
| Methodes | big | A che la chaine dans une grande police |
| blink | A che la chaine en clignotant | |
| bold | A che la chaine en caracteres gras | |
| charAt | Rend le caractere a une certaine position dans la chaine | |
| xed | A che la chaine dans une police a taille xe | |
| fontcolor | La couleur de fond d’a chage de la chaine | |
| fontsize | La taille de la police d’a chage de la chaine | |
| indexOf | Rend la premiere occurence d’une sous-chaine dans la chaine | |
| italics | A che la chaine en italique | |
| lastIndexOf | Cherche la derniere occurence d’une valeur dans une chaine | |
| link | a che La chaine comme un lien | |
| small | A che la chaine en petite police | |
| strike | A che la chaine avec une barre en travers | |
| sub | A che la chaine en mode indice (subscript) | |
| substring | Reference une sous-chaine | |
| sup | A che la chaine en mode exposant (superscript) | |
| toLowerCase | Change la chaine en minuscules | |
| toUpperCase | Change la chaine en majuscules |
L’objet submit est le bouton permettant de valider un formulaire.
Syntaxe <INPUT TYPE="SUBMIT" NAME="NAME" VALUE="Text"> ou VALUE est le texte a che sur le bouton.
Proprietes name, et value Methodes click() Evenements onClick
Un objet text est un champ de saisie sur une ligne permettant de saisir toute chaine alphanumerique.
Syntaxe <INPUT TYPE="text" NAME="name" VALUE="value" SIZE="size"> ou VALUE est le texte a che initialement dans le champ, et SIZE est la largeur du champ en nombre de caracteres.
Proprietes defaultValue, name, form, type, value
Methodes focus, blur, and select
Evenements onBlur, onChange, onFocus, onSelect
L’objet textarea permet a l’utilisateur de saisir plusieurs lignes de textes dans un formulaire.
Syntaxe
| Proprietes | defaultStatus | Le message a che par defaut dans la barre de statut |
| document | Permet d’acceder au document courant | |
| frames | Le tableau contenant les cadres de la fen^etre | |
| frame | La fen^etre avec ascenseur utilisee pour un tableau | |
| length | Le nombre de cadre dans la fen^etre | |
| location | L’URL du document courant | |
| name | Le nom de la fen^etre | |
| parent | La fen^etre englobante | |
| self | Reference a la fen^etre elle-m^eme | |
| status | Le message de la barre de statut | |
| top | Reference a la fen^etre mere | |
| window | Reference a la fen^etre courante |
<TEXTAREA NAME="name" ROWS=rows COLS=cols
WRAP="off/virtual/physical">Text</TEXTAREA>
ou rows speci e le nombre de lignes du champ, et cols le nombre de caracteres par ligne.
Proprietes defaultValue, name, et select
Methodes focus, blur, et select
Evenements onBlur, onChange, onFocus, onKeyDown, onKeyPress, onKeyUp,
onSelect
Syntaxe w = ("URL", "NAME" {,"Options"}).
ou URL est l’adresse de la page a ouvrir, NAME est le nom de la fen^etre, et Options sont des parametres optionels comme la taille de la fen^etre, etc.
A.24. WINDOW
| Methodes | alert() | Cree une boite de dialogue de type message+OK |
| close() | Ferme le document | |
| con rm() | Cree une boite de dialogue de type message+OK/Cancel | |
| open() | Ouvre une nouvelle fen^etre | |
| prompt() | Cree une boite de dialogue de type message+zone de saisie+OK/Cancel | |
| setTimeout() | Execute le code JavaScript apres un certain nombre de millisecondes | |
| clearTimeout() | Annule l’e et de la commande setTimeout() |
Je remercie les gens ayant relu le document. Pour l’instant : Pierre Dureau (2005).
Cependant, Netscape series 4.7x permet (m^eme s’il est ancien) d’obtenir une console javascript expliquant les erreurs : quand une erreur est signalee dans le bandeau bas de la fen^etre, tapez javascript : dans la barre d’adresse
S. Genaud
[3] En realte, le point-virugle n’est pas necessaire en JavaScript. Il me semble cependant preferable de prendre cette habitude car de nombreux langages ayant une syntaxe tres proche utilise le pointvirgule pour separer deux instructions.
cette syntaxe n’est valable que pour des versions de navigateurs superieures a Netscape 2 et IE 3-DLL JScript 1. Pour une utilisation des tableaux avec des verions anciennes de navigateurs, vous pouvez consulter [Goo98].
A partir de Netscape 3 et IE 4
On a utilise id mais le resultat aurait ete le m^eme avec la balise (obsolete) name.
