Cours Javascript

Le Javascript en 25 leons -
Version 1.0
LE JAVASCRIPT - en 25 chapitres par Professor Maddy
23/06/2004 Professor Maddy
Version 1.0
SOMMAIRE
INTRODUCTION 1.GENERALITES
1.1.Le langage Javascript 1.2.Ct pratique 1.3.Dtails techniques
6 7
7 7 7 8 8
2.LE LANGAGE
2.1.Incorporation du code 2.2.Spcificits du langage
8 10
10 10 14 14 15 15 15 16 16 16 16 17 18 19 19 19 21 22 22 23 23 23 24 24 26 26 26 27
3.LES STRUCTURES DE DONNEES

3.1.Les donnes constantes 3.2.Les variables en JS
4. LES OPERATEURS
4.1.Les oprateurs de calcul 4.2.Les oprateurs de comparaison 4.3.Les oprateurs associatifs 4.4.Les oprateurs logiques 4.5.Les oprateurs d'incrmentation
14
5. LES FONCTIONS
5.1.Dfinition 5.2.Dclaration 5.3.Les fonctions dans len-tte 5.4.L'appel d'une fonction 5.5.Fonctions manipulant des valeurs 5.6.Variables locales et variables globales
16
6. LES STRUCTURES DE CONTROLE

6.1.Les structures algorithmiques 6.2.La structure squentielle 6.3.Les instructions conditionnelles 6.4.Les instructions itratives 6.5.Interrompre une boucle 6.6.Exercice
19
7. LES BOITES DE MESSAGE

7.1.Gnralits 7.2.Alert() 7.3.Prompt() 7.4.Confirm() 7.5.Exercice : Confirmation et vrification
23
8. NOTION OBJET
8.1.Le concept objet 8.2.Cration dun objet 8.3.Accs aux proprits et aux mthodes 8.4.Lobjet this
26
Version 1.0
9. LES FORMULAIRES
9.1.Gnralits 9.2. Champ de texte 9.3.Cases slectionner 9.4.Liste de slection 9.5.Bouton 9.6.Contrle cach 9.7.Un formulaire complet 9.8.Les objet du formulaire 9.9.Exercice
28
28 29 31 33 34 36 38 39 40 41 42 42 44 45 46 46 47 47 47 48 49 50 50 51 51 52 54 54 55 55 56 57 57 58 59 59 62 63 66 66
10. LES EVENEMENTS

10.1.Gnralits 10.2.Le clic de souris 10.3.Le chargement 10.4.Le passage de la souris 10.5.Le focus 10.6.Les changements 10.7.La slection 10.8.Lenvoi 10.9.Le reset 10.10.Lutilisation de lobjet document 10.11.Exemple concret 10.12.Exercice
41
11. LOBJET ARRAY

11.1.Gnralits 11.2.Cration et affectation dun tableau 11.3.Accs aux donnes dun tableau 11.4.Tableau 2 dimensions 11.5.Proprits et mthodes 11.6.Exemple concret 11.7.Exercice
50
12.LES OBJETS DU NAVIGATEUR

12.1.Gnralits 12.2.Arborescence
55 56
13.LOBJET NAVIGATOR
13.1.Les proprits de navigator 13.2.Les mthodes de navigator 13.3.Les objets de navigator 13.4.Exemple
14.LOBJET WINDOW
14.1.Les proprits de window 14.2.Les mthodes de window 14.3.Les vnements de window 14.4.Les objets de window 14.5.Exemple concret 14.6.Exercice
59
Version 1.0
15.LOBJET DOCUMENT
15.1.Les proprits de document 15.2.Les mthodes de document 15.3.Les vnements de document 15.4.Les objets de document 15.5.Exercice
67
67 68 69 69 72 73 73 74 75 75 75 76 76 76 85 87 88 88 90 91 92 92 92 95 96 97
16.LES OBJET DU NOYAU JAVASCRIPT

16.1.Gnralits 16.2.Quelques prcisions
73 74
17.LOBJET MATH
17.1.Fonctions 17.2.Constantes 17.3.Simplification 17.4.Exercice
18.LOBJET STRING
18.1.Gnralits 18.2.La proprit 18.3.Les mthodes 18.4.Manipulations sur les chanes 18.5.Exercice
76
19.LOBJET DATE
19.1.Gnralits 19.2.Les mthodes 19.3.Exemple concret 19.4.Exercice
88
20.LOBJET IMAGE
20.1.Rappel HTML 20.2.Lobjet 20.3.Les proprits 20.4.Afficher une image 20.5.Exemple concret : cliquer pour changer dimage 20.6.Exercice
92
21.LA PROGRAMMATION MULTI-CADRES

21.1.Rappel HTML 21.2.Gnralits 21.3.Liens hypertexte 21.4.Accs aux lments des frames 21.5.Exemple concret 21.6.Exercice
98 98 98 99 100 101 102 102 103 104 105
98
22.LES COOKIES
22.1.Prsentation 22.2.Crer un cookie 22.3.Rcuprer un cookie 22.4.Modifier un cookie 22.5.Supprimer un cookie
102
Version 1.0
23.LA PROGRAMMATION OBJET

23.1.Prsentation 23.2.Dclaration dune classe 23.3.Utilisation de mthodes 23.4. Exercice
106
106 106 107 108 109 109 110 113 114 115 116 116 118 120
24.LES EXPRESSION REGULIERES

24.1.Prsentation 24.2.Dfinition 24.3.Paramtres dune expression rgulire 24.4.Utilisation dune expression rgulire 24.5.Exemple concret 24.6.Exercice
109
25.FONCTIONS ET PROPRIETES
25.1.Prsentation 25.2.Les fonctions du langage 25.3.Mthodes et proprits des objets 25.4.Exercice
116
CONCLUSION AUTEUR
DESCRIPTION COORDONNEES
121 122
122 122
REMERCIEMENTS
123
Version 1.0
INTRODUCTION
Que dire propos de ce cours ? Voil une bien grande question... laquelle je ne peux pas rpondre. Je pourrais parler de son contenu, mais quoi bon ? Vous allez le lire enfin je lespre dans quelques instants. Je pourrais parler de moi, mais ce nest pas intressant... Un problme insoluble se prsente donc moi. Ce cours sadresse tout programmeur, du dbutant ayant soif dapprendre lexpert ayant besoin de se remmorer quelque dtail, en passant par le programmeur qui souhaite dcouvrir un langage ou se perfectionner... Son but nest pas de former quelquun au Javascript, car ce serait se vanter. Non, son but est de donner des bases, que le programmeur averti saura complter par dautres lectures. Il le cours - na pas vocation tre exhaustif. Je dirai plutt quil est volutif, cest-dire quil nexiste que pour tre amlior. Je compte bien entendu lenrichir au fur et mesure. A ce propos, je vous serai reconnaissant de madresser vos suggestions, critiques, complments, et autres aides. Je ne mengage pas fournir un cours parfait. Il peut et il doit y avoir des erreurs. Je ne prtends pas possder le cours sans fautes. Je suis tout oue vos critiques et corrections. Mme si vous tes content de ce cours mon vu le plus cher donnez-moi votre avis, cela me permettra damliorer encore ce cours. Enfin, si vous rencontrez un problme, si vous ne comprenez pas un point, nhsitez pas piocher dans la liste des liens que je vous fournit, et mme, si un passage ne vous semble pas clair, crivez-moi. Mes coordonnes figurent la fin du document. Cependant, nabusez pas de ce service, je ne suis pas une aide en ligne, jai aussi une vie professionnelle voir la partie AUTEUR, pour ceux que cela intresse et je ne peux passer mon temps rpondre vos questions. Si la rponse se fait attendre, patientez encore. Peut-tre nai-je pas le temps ou peut-tre nai-je pas encore trouv la solution Dernier point : si vous souhaitez rutiliser ce cours, ce nest pas un problme. Je vous demande cependant de bien vouloir me contacter, car je souhaite savoir ce quil devient. Sachez que cela me flatterait. Merci davoir lu cette introduction. Je vous souhaite une bonne lecture et bienvenue dans lunivers de Javascript !
Version 1.0
1.GENERALITES
1.1.Le langage Javascript
Le langage Javascript a t mis au point par Netscape en 1995. Microsoft ayant sorti son propre langage quelques temps aprs, un standard a t cr, le Javascript 1. Actuellement, la version du langage est le Javascript 1.52. Ce langage est interprt, cest--dire quil nest pas compil en langage machine avant excution, comme le Java ou le C++. Le Javascript est intgr au code HTML, il vous faudra donc des bases assez solides en HTML. Si ce nest pas le cas, il est conseill de consulter un cours HTML de toute urgence. Il sagit, a priori, du premier langage de script cr pour le web. Il permet dexcuter des commandes du ct utilisateur, donc au niveau du navigateur et non du serveur -comme le PHP - . Son principal inconvnient est le fait quil ne dispose pas de dbogueur, la dtection des erreurs en devient fastidieuse. Ensuite, il le code est accessible, puisque contenu dans la page envoye au navigateur.
1.2.Ct pratique
Pour programmer en Javascript, il vous faut un navigateur web assez rcent et un diteur de texte, le bloc-notes de Windows est suffisant. Une connexion Internet est souhaitable. Au niveau de lditeur de texte, je vous conseillerait un diteur un peu plus volu. Le mieux serait bien entendu Dreamweaver MX3, si vous avez les moyens, bien que ce soit surtout utile si vous faites un site web. Du ct des diteurs gratuits, je conseillerai Editplus24, un diteur tous langages qui propose une coloration syntaxique. Si vous devez prendre un autre diteur, veillez ce quil propose cette coloration syntaxique, a claire le code.
1.3.Dtails techniques
Par convention, labrviation JS, utilise souvent tout au long de ce cours, dsigne Javascript. Chaque chapitre concerne un point du langage qui peut tre pris comme une leon. A chaque fin de chapitre, je prsente un exemple concret quand cest possible et un ou plusieurs exercice(s). Ces exercices sont corrigs un lien mne au fichier HTML dans le dossier solutions . Les cases blanches correspondent la syntaxe, cest--dire la mise en forme du langage. Les cases grises correspondent aux exemples. Lorsque ces derniers ont un rsultat
1
Pour plus de prcisions, voir le site http://www.commentcamarche.net. Ne fonctionne quavec Nestcape Navigator6.X et Internet Explorer 6.X 3 Edit par Macromdia 4 Edit par ES-Computing, tlcharger sur http://www.telecharger.com.
2
Version 1.0
graphique, un lien mne au fichier HTML de lexemple. Ces derniers sont dans le dossier Exemples
Version 1.0
2.LE LANGAGE
2.1.Incorporation du code
Comme son nom lindique, il sagit dun langage de script. Le code sintgre donc dans la page HTML avec les balises <script>. Il existe deux faons dintgrer votre code. La premire consiste le placer entre les balises, tout simplement. Syntaxe : <script language = "Javascript">code</script>
Exemple 2.1 :
<script language = "Javascript"> var mavariable = 12 ; document.write (typeof(mavariable)) ; </script>
Il est aussi possible de placer votre code dans un fichier Javascript, comportant lextension .js . Ensuite, il faut linsrer dans la page HTML ave la balise <script>. Ne pas oublier il est prfrable de placer le fichier JS dans la mme dossier que la page. Syntaxe : <script src = "chemin_fichier"></script>
Exemple 2.2 :
<script src = "date.js"> </script>
2.2.Spcificits du langage
La premire chose quil faut noter en Javascript, comme dans le C, est que chaque instruction se termine par un point-virgule ;. Il est possible de mettre plusieurs instructions sur le mme ligne, puisque linterprteur ignore les sauts de lignes. Vous pouvez aussi insrer des blancs o vous voulez except dans des noms de variables ou dans des expressions cela ne change pas le code. Exemple 2.3 : var mavariable = 12 ; document.write ( typeof(mavariable) ) ;
Version 1.0
Il est utile de commenter son code. Cela se fait laide de //, tout le texte suivant le double slash jusqu la fin de la ligne est ignor par linterprteur. Exemple 2.4 : var mavariable = 12 ; //commentaire document.write ( typeof(mavariable) ) ;
Il est aussi possible de mettre des commentaires au milieu dun ligne, ou sur plusieurs ligne, en les encadrant avec /* et */ Exemple 2.5 : var mavariable = 12 ; /*commentaire sur plusieurs lignes*/ document.write ( typeof(mavariable) ) ;
10
Version 1.0
3.LES STRUCTURES DE DONNEES

3.1.Les donnes constantes
Le JS fournit quatre types de constantes dj dfinies : Les constantes numriques, en notation dcimale ( 75,2 ) ou flottante, cest--dire scientifique (752E-1). Les constantes boolennes : true et false. Les chanes de caractres, encadres de guillemets ou de dapostrophes (). La constante null qui signifie rien , sans valeur , et qui est attribue au variables non dfinies.
3.2.Les variables en JS
3.2.1.Les types de variable
Un nom de variable doit commencer par une lettre (alphabet ASCII) ou le signe _ et se composer de lettres, de chiffres et des caractres _ et $ ( l'exclusion du blanc). Le nombre de caractres n'est pas prcis. Javascript est sensible la casse (majuscules et minuscules). Cela signifie que MaVariable nest pas quivalent mavariable . Il existe 5 types de variables en Javascript : Les nombres : number Les chanes de caractres : string 5 Les boolens : boolean Les objets : object Les fonctions : function Nous verrons les fonctions au chapitre 5.LES FONCTION, mais je vous prsente la premire que vous verrez : la fonction typeof(), qui retourne le type dune variable. Exemple 3.1 :
var mavariable = 12 ; document.write (typeof(mavariable)) ;
Rsultat Si la variable nest pas affecte dune valeur, elle recevra alors le type undefined, comme le montre lexemple 3.2.
Variable ne pouvant avoir que deux valeur : true (1) et false (0). 11
Version 1.0
Exemple 3.2 :
document.write (typeof(mavariable)) ;
Rsultat
3.2.2.La dclaration et laffectation

On distinguera ici la dclaration et laffectation. La premire consiste donner un nom la variable alors que la seconde consiste donner une valeur la variable. La diffrence est quune variable peut-tre affecte dune valeur plusieurs fois alors quelle ne peut tre dfinie quune seule fois. Lexemple suivant illustre une dfinition sans affectation. Exemple 3.3 :
var Numero;
Dans les exemples qui suivent, par facilit, jai regroup laffectation avec la dclaration. Les variables peuvent tre dclares de deux faons :
De faon explicite, avec le mot-cl var .
Exemple 3.4 :
var Numero = 1 ;
De faon implicite. On crit directement le nom de la variable suivi de la valeur que l'on lui attribue.
Exemple 3.5 :
Numero = 1 ;
12
Version 1.0
3.2.3.Les noms rservs

Les mots de la liste ci-aprs ne peuvent tre utiliss pour des noms de fonctions et de variables. Certains de ces mots sont des mots cls Javascript, d'autres ont t rservs par Netscape pour un futur usage ventuel.
Lettre A B C D E F G I L N P R S T V W
Mot-cl abstract boolean / break / byte case / catch / char / class / const / continue default / do / double else / extends false / final / finally / float / for / function goto if / implements / import / in / instanceof / int / interface long native / new / null package / private / protected / public return short / static / super / switch / synchronized this / throw / throws / transient / true / try var / void while / with
Tab. 3.1 : Noms rservs
3.2.4.Manipulations sur les chanes de caractres

Javascript convertit automatiquement les entiers en chane de caractres. Pour les puristes, il sagit du transtypage automatique. Il est ainsi possible de concatner des entiers avec des chanes de caractres. Dans la fonction dcriture dans le document courant ( document.write() ), les donnes peuvent tre spars par des , ou des +. Certains caractres peuvent tre insrs dans les chanes de caractres : le retour arrire (\b), le saut de page (\f), le saut de ligne (\n), lentre (\r), la tabulation (&) et lapostrophe (\).
13
Version 1.0
On peut insrer des codes HTML dans les chanes de caractres. Ces dernires seront interprts comme de vraies balises. Nous reverrons tout cela plus en dtail dans le chapitre 16.LOBJET STRING.
3.2.5.Variables globales et variables locales

Les variables dclares tout au dbut du script, en dehors et avant toutes fonctions (voir plus loin), seront toujours globales, qu'elles soient dclares avec var ou de faon contextuelle. On pourra donc les exploiter partout dans le script. Dans une fonction, une variable dclare par le mot cl var aura une porte limite cette seule fonction. On ne pourra donc pas l'exploiter ailleurs dans le script. D'o son nom de locale. Par contre, toujours dans une fonction, si la variable est dclare contextuellement (sans utiliser le mot var), sa porte sera globale.
14
Version 1.0
4. LES OPERATEURS
Comme tout langage informatique, JS possde des oprateurs pour effectuer les calculs. Leur prsentation est rapide, surtout pour les plus simples. Dans les exemples, la valeur initiale de x sera toujours gale 11, et celle de y sera gale 5.
4.1.Les oprateurs de calcul

Signe + * / % = Nom plus moins multipli par divis par modulo affectation Signification addition soustraction multiplication division reste de la division par a la valeur Exemple x+3 x-3 x*2 x/2 x%5 x=5 Rsultat 14 8 22 5.5 1 5
Tab 4.1 : oprateurs de calcul
4.2.Les oprateurs de comparaison

Signe == < <= > >= != Nom Egal Infrieur Infrieur ou gal Suprieur Suprieur ou gal Diffrent Exemple x == 11 x < 11 x <= 11 x > 11 x >= 11 x != 11 Rsultat true false true false true false
Tab 4.2 : oprateurs de comparaison Ces oprateur seront utiliss dans les boucles conditionnelles6. Le rsultat sexprime alors en valeur boolenne.
Voir pour cela le chapitre 6.STRUCTURES DE CONTROLE 15
Version 1.0
4.3.Les oprateurs associatifs

Signe += -= *= /= Description plus gal moins gal multipli gal divis gal Exemple x += y x -= y x *= y x /= y Signification x=x+y x=x-y x=x*y x=x/y Rsultat 16 6 55 2.2
Tab 4.3 : oprateurs associatifs Ces oprateurs permettent un raccourci dcriture, sans pour autant changer le rsultat. Il permettent un incrmentation ou une dcrmentation autre que 1.
4.4.Les oprateurs logiques

Signe && || Nom et ou Exemple (condition1) && (condition2) (condition1) || (condition2) Signification condition1 et condition2 condition1 ou condition2
Tab 4.4 : oprateurs logiques On utilisera ces oprateurs dans les boucles conditionnelles principalement. Chaque condition correspondant une expression avec un oprateur de comparaison. Ces oprateurs fonctionnent comme un ET logique et un OU logique7.
4.5.Les oprateurs d'incrmentation

Signe
x++ x--
Description
incrmentation dcrmentation
Exemple
y = x++ y= x--
Signification
y =x+1 y =x-1
Rsultat
6 4
Tab 4.5 : oprateurs dincrmentation
Il sagit dun OU non exclusif, pour les puristes. 16
Version 1.0
5. LES FONCTIONS
5.1.Dfinition
Cest un groupe dinstruction prdfini et excut lorsquil est appel et que lon peut appeler plusieurs fois. En Javascript, il existe deux types de fonctions : 8 les fonctions propres Javascript, appeles mthodes . Elles sont associes un objet en particulier. les fonctions que vous dfinissez vous-mme. Ce sont celles qui nous intressent ici.
5.2.Dclaration
Pour dclarer ou dfinir une fonction, on utilise le mot-cl function. La syntaxe d'une dclaration de fonction est la suivante : Syntaxe :
function nom_de_la_fonction (arguments) { code des instructions }
Le nom dune fonction suit les mmes rgles que celui dune variable 9. Chaque nom de fonction doit tre unique dans un mme script. Les parenthses sont obligatoires mme si il ny a pas darguments, puisque Javascript reconnat une fonction grce elles.
5.3.Les fonctions dans len-tte

Il est plus prudent de placer les dclarations de fonctions dans len-tte <head></head> pour qu elles soient prises en compte par linterprteur avant leur excution dans le corps de la page <body></body>
5.4.L'appel d'une fonction

Syntaxe :
nom_de_la_fonction();
Il faut que la fonction aie t dfinie avant lappel, tant donn que linterprteur lit le script de haut en bas.
8 9
Ces fonctions particulires seront lobjet dune sous-partie du chapitre 8.NOTION OBJET. voir Chapitre 1.STRUCTURES DE DONNEES. 17
Version 1.0
5.5.Fonctions manipulant des valeurs

5.5.1.Passer une valeur une fonction
On peut passer des valeurs une fonction. On parle alors de paramtres. Pour passer un paramtre une fonction, on fournit un nom d'une variable dans la dclaration de la fonction. Exemple 5.1 : une fonction affichant le texte dans la page laquelle on fournit le texte afficher.
function Exemple(texte) { //dfinition avec un paramtre document.write(texte); } Exemple("Salut tous"); // appel avec un paramtre
Rsultat On peut passer plusieurs paramtres une fonction, en sparant les paramtres par des virgules. Syntaxe :
function nom_de_la_fonction(arg1, arg2, arg3) { instructions }
Exemple 5.2 : function cube(nombre) { y = nombre*nombre*nombre; return y; //retour de valeur } x = cube(5); //appel avec paramtre document.write(x); //rsultat Rsultat
5.5.2.Retourner une valeur

Une fonction peut retourner une valeur. Il suffit alors de placer le mot-cl return suivi de la valeur ou de la variable retourner.
18
Version 1.0
Exemple 5.3 :
function cube(nombre) { //Dfinition de la fonction var c = nombre*nombre*nombre ; return c; //Retour du cube du paramtre } var x = cube(5) ; // appel avec paramtre document.write (x) ; //affichage
NB : Le mot-cl return est facultatif.
5.6.Variables locales et variables globales

Une variable dclare dans une fonction par le mot-cl var aura une porte limite cette seule fonction. On l'appelle donc variable locale et ne pourra tre utilis dans le reste du script. Exemple 5.4 :
function cube(nombre) { var c = nombre*nombre*nombre ; }
Si la variable est dclare sans utiliser le mot var, sa porte sera globale. Exemple 5.5 :
function cube(nombre) { cube = nombre*nombre*nombre ; }
Les variables dclares tout au dbut du script, en dehors et avant toutes fonctions, seront toujours globales, qu'elles soient dclares avec var ou de faon contextuelle. Exemple 5.6 :
var cube=1 function cube(nombre) { var cube = nombre*nombre*nombre ; }
19
Version 1.0
6. LES STRUCTURES DE CONTROLE

6.1.Les structures algorithmiques
Quelque soit le langage informatique utilis10, un programme informatique utilise 3 catgories principales dinstructions. Ce sont : les instructions squentielles. les instructions alternatives, ou conditionnelles. les instructions itratives, ou rptitives. Nous verrons chacun des types de structures, en comparant lalgorithme et le code JS.
6.2.La structure squentielle

Cest une suite dinstructions excutes dans lordre o elles sont crites, lune aprs lautre. Lexemple le plus frquent est la fonction. Algorithme DEBUT Instruction1 Instruction2 FIN Code JS { Instruction1 Instruction2 }
6.3.Les instructions conditionnelles

6.3.1.Lexpression if else
Il sagit de tester une condition et deffectuer une srie dinstructions si la condition est vraie et si elle est fausse, effectuer une autre srie dinstructions. Algorithme SI condition ALORS Instructions1 SINON Instructions2 FINSI Code JS If (condition) { Instruction1 } else { Instruction2 }
10
Ce chapitre, except pour quelques expressions, est valables pour de nombreux langages, notamment le C++. 23/06/2004 Professor Maddy 20
Version 1.0
Tab. 6.1 : Expression conditionnelle ifelse Exemple 6.1 :

x = prompt ("votre age?","age"); if ( x < 40) { alert ('vous tes jeune') ; } else { alert ('vous tes vieux') ; }
Rsultat Dans lexemple 6.1, la fonction prompt() permet dafficher une bote de dialogue.
6.3.2.Lexpression () ? :
Il sagit dun moyen rapide de tester une condition et de dexcuter une instruction selon son rsultat.
Algorithme SI condition ALORS Instructions1 SINON Instructions2 FINSI
Code JS (condition) ? instruction 1 : instruction 2
Tab. 6.2 : Expression conditionnelle () ? : Dans cette expression, si la condition est vrifie, linstruction 1 est effectue, sinon, linstruction 2 est effectue. Prcisons, que toute lexpression doit se trouver sur la mme ligne. Exemple 6.2 :
x = prompt ("votre age?","age"); age = (x < 40)? jeune : vieux; alert ('vous tes ' + age) ;
Rsultat
21
Version 1.0
6.4.Les instructions itratives

6.4.1.Litration for
Elle permet de rpter des instructions en sarrtant un certain nombre ditrations (boucles). Algorithme Code JS POUR i = valeur For (val initiale ; initiale A i = valeur condition ; finale incrmentation) { REPETER instructions Instructions FIN POUR } Tab. 6.3 : Expression itrative for Exemple 6.3 :
for (i = 0; i < 10; i++) { document.write(i + " "); }
Rsultat
6.4.2.Litration while
Elle permet de rpter des instructions tant quune condition est vraie. Algorithme TANT QUE (condition vraie) REPETER instructions FIN TANT QUE Exemple 6.4 :
i = 0; while (i < 10) { document.write(i + " "); i++; }
Code JS while (condition) { instructions }
Tab. 6.4 : Expression itrative while
Rsultat
22
Version 1.0
6.5.Interrompre une boucle

6.5.1.Linstruction break
Elle permet de mettre fin prmaturment une instruction itrative while ou for. Exemple 6.5 :
for (i = 0; i < 10; i++) { if (i == 5) { break; } document.write(i + ); }
Rsultat
6.5.2.Linstruction continue
Elle permet de mettre fin une itration et de passer la boucle suivante. Exemple 6.6 :
for (i = 0; i < 5; i++) { if (i == 2) { continue ; } document.write(i + <br>); }
Rsultat
6.6.Exercice
Dans cet exercice, vous devez afficher tous les nombres pairs compris entre 0 et 20 inclus, dans lordre dcroissant. Il ne faudra pas afficher 10 mais 100, et il ne faudra pas non plus afficher 14. Solution
23
Version 1.0
7. LES BOITES DE MESSAGE

7.1.Gnralits
Nous abordons les botes de dialogue, qui sont des mthodes de lobjet window, que nous verrons plus tard, dans la partie objet du langage. Mme si nous navons pas encore abord la programmation objet, il me semble important de vous donner ces boites de dialogue, qui savrent utile en JS. Il en existe 3, que nous dtaillerons lune aprs lautre.
7.2.Alert()
Nous avons dj utilis cette mthode prcdemment, sans savoir forcment ce qui en retournait. Il ne comporte quun texte informatif et un bouton OK . Syntaxe : alert (paramtres) ;
Paramtres : Une chane de caractre Une variable Un enchanement des deux, spars par le signe "+" Exemple 7.1 : x = 5 ; alert ('Le nombre est ' + x) ; Rsultat
7.3.Prompt()
Il sagit dune boite dinvite, compose dun texte, dune zone de texte, dun bouton OK et dun bouton Annuler . Syntaxe : variable = prompt ("texte", "valeur");
La mthode retourne la valeur du champ si le bouton OK est choisi dans le cas inverse (bouton Annuler ), la variable reoit la valeur NULL . Paramtres : Le texte afficher dans la boite de message
24
Version 1.0
La valeur par dfaut afficher dans la boite dinvite.
Exemple 7.2 : x = prompt ('Votre prnom ?','prnom') ; alert (x) ; Rsultat
7.4.Confirm()
Il sagit dune boite de confirmation, compose dun texte, dun bouton OK et dun bouton Annuler . Syntaxe : variable = confirm ("texte"); La mthode retourne true si on clique sur OK , et false si on clique sur Annuler Paramtre : Le texte afficher dans la boite de message Exemple 7.3 : x = prompt ('Votre prnom ?','prnom') ; y = confirm ('Votre prnom est bien ' + x + ?) ; Rsultat
7.5.Exercice : Confirmation et vrification

Le but est de rcuprer et afficher 3 informations de lutilisateur lcran. Il faut demander lutilisateur son login. Sil choisit annuler, on affiche la page blanche. Ensuite, on compare le login entr avec celui attendu : sil est diffrent, on redemande le login, sinon, on continue le traitement. On demande ensuite le password. On vrifie quil est correct et on continue. Sil ne lest pas, on redemande 2 fois ce password. Sil est toujours incorrect au 3me essai, on affiche un message derreur lcran, et le traitement est fini. Enfin, on demande le prnom de lutilisateur, puis on demande vrification linternaute. Si le prnom est correct, on laffiche lcran. Pour afficher lcran, utiliser la mthode document.write(), en passant la chane afficher en paramtre.
23/06/2004 Professor Maddy 25
Version 1.0
Cet exercice utilisera vos connaissances au niveau des fonctions, des variables, des structures algorithmiques, et bien entendu des boites de dialogue. Dans la solution, le login est prof et le password est abcd . Je suis rest classique. Solution
26
Version 1.0
8. NOTION OBJET
Bien que ce ne soit pas le but dans ce chapitre, il me semble important de rappeler le concept objet, notamment pour ceux qui ne le connaissent pas. Il ne sagit pas dun cours magistral, mais juste dun rsum des fins dutilisation en JS.
8.1.Le concept objet

Jusque-l, nous avons vu des variables, avec une valeur, indpendantes des autres. Maintenant, on parlera dobjet. Un objet en gnral - possde des caractristiques et des comptences. On peut voir ces caractristiques et utiliser les comptences. En informatique, un objet possde des variables et des fonctions, qui permettent de dcrire son comportement. Ces variables sont appeles proprits et ces fonctions sont appeles mthodes. De cette faon, on peut voir les proprits et utiliser les mthodes.
8.2.Cration dun objet

Un objet est cr en utilisant une fonction spciale de la classe, prcde du mot new. Cette fonction est appele constructeur, et porte le nom de la classe. Un objet est appel instance de la classe. Syntaxe : Exemple 8.1 : var objet = new classe (); var montableau = new Array ();
8.3.Accs aux proprits et aux mthodes

On accde aux proprits et aux mthodes dun objet en accolant lobjet et sa proprit avec loprateur . . Syntaxe : objet.proprit objet.mthode()
Exemple 8.2: par extrapolation Rmi = new Homme () ; Rmi.yeux = "bleus" ; Rmi.cheveux = "bruns" ;
27
Version 1.0
Exemple 8.3: document.write ("Hello world !"); Lobjet document est intgr au langage, et sa mthode write() permet dcrire dans la page courante.
8.4.Lobjet this
Il existe un objet trs utile en JS objet : this. Mme sil sera plus utile en programmation objet, lorsque vous crerez vos classes. Il sagit dun objet qui reprsente lobjet en cours. Il possde alors les proprits et les mthodes de lobjet. Etant donn son utilit minime avant la programmation objet, je ne donnerai pas dexemple ici.
28
Version 1.0
9. LES FORMULAIRES
9.1.Gnralits 9.1.1.Prsentation
On attaque ici le gros morceau du JS. Sans les formulaires, les pages HTML ne proposent aucune interactivit avec lutilisateur. En effet, la page appele est envoye par le serveur et le browser ne fait que lafficher, il ne peut rien faire avec le serveur. Les champs de formulaire (form) permettent lutilisateur dentrer des informations auxquelles la page pourra ragir. Ces ractions seront programmes lavance par vous. Cela reste assez limit, puisque linteraction ne quitte pas la machine du client, mais on peut effectuer quelques traitements. Mon but nest pas de vous apprendre le HTML, je ne reviendrai donc pas sur le fonctionnement des balises. Autre point, jindique ici, par commodit, les proprits JS, dont on se servira plus loin. Ne vous en proccupez pas si vous ne comprenez pas de quoi il sagit.
9.1.2.La balise form

Chaque formulaire doit tre encadr par les balises <form></form>. Toutes les balises seront comprises entre ces deux-l. Si vous travaillez avec PHP ou un autre langage, vous aurez srement besoin denvoyer les informations un serveur. Dans ce cas, indiquez dans la balise <form> la mthode (post ou get) et lURL du script qui traitera linformation. Exemple 9.1 : <form method=post action=traitement.php> </form> Si vous dsirez que les informations du formulaire vous soient envoyes par mail, prcisez mailto: dans laction. Exemple 9.2 : <form method=post action=mailto:e-mail> </form> Dans chaque cas, noubliez pas dinsrer un bouton submit dans votre formulaire.
29
Version 1.0
9.2. Champ de texte

9.2.1.Ligne de texte
Il sagit de llment dentre/sortie le plus courant en JS. Une simple ligne o lutilisateur peut crire quelques mots. Syntaxe HTML : <input type=text name=nom value="valeur" size=x maxlength=z> Paramtres HTML : name : le nom du champ (servira lors de la programmation) value : la valeur que vous voulez afficher dans la ligne de texte (facultatif). size : la longueur de la ligne de texte. Si le texte est trop long, la ligne dfilera. maxlength : le nombre de caractres maximum contenus dans la ligne de texte (facultatif mais conseill). Proprits JS : name : indique le nom du contrle. defaultvalue : indique la valeur par dfaut affiche dans la ligne de texte. value : indique la valeur actuellement dans la zone de texte. Exemple 9.3 : <form method=post action=mailto:lapape@levatican.com> <input type=text name=text1 size=20 maxlength=40><br> <input type="submit"name="envoi" value="envoyer"> </form> Rsultat
9.2.2.Zone de texte
Il sagit de plusieurs ligne de textes. Utile quand le texte est long. Syntaxe HTML : <textarea name=nom rows=x cols=y> texte par dfaut </textarea>
30
Version 1.0
Paramtres HTML : name : le nom du champ (servira lors de la programmation) rows : le nombre de lignes affichs lcran. Si le texte est trop long, la zone de texte dfilera. cols : le nombre de colonnes affiches lcran. Proprits JS : name : indique le nom du contrle. defaultvalue : indique la valeur par dfaut affiche dans la ligne de texte. value : indique la valeur actuellement dans la zone de texte. Exemple 9.4 : <form method=post action=mailto:lapape@le-vatican.com> <textarea name=text2 rows=5 cols=20> zone de texte </textarea><br> <input type="submit"name="envoi" value="envoyer"> </form> Rsultat
9.2.3.Champ password
Il sagit dune ligne de texte dont les caractres sont cachs. Syntaxe HTML : <input type=password name=nom value="valeur" size=x maxlength=z> Paramtres HTML : name : le nom du champ (servira lors de la programmation) value : la valeur que vous voulez afficher dans le champ (facultatif). size : la longueur de la ligne de texte. Si le texte est trop long, la ligne dfilera. maxlength : le nombre de caractres maximum contenus dans la ligne de texte (facultatif mais conseill). Proprits JS : name : indique le nom du contrle. defaultvalue : indique la valeur par dfaut affiche dans la ligne de texte. value : indique la valeur actuellement dans le champ password.
31
Version 1.0
Exemple 9.5 : <form method=post action=mailto:lapape@levatican.com> <input type=password value=password name=text1 size=20 maxlength=40><br> <input type="submit"name="envoi" value="envoyer"> </form> Rsultat
9.3.Cases slectionner
9.3.1.Boutons radios
Il sagit de cases cocher choix unique. Dune forme ronde, elle sont lies entre elles au niveau du code JS. Syntaxe HTML : <input type=radio name=nom value="valeur"> texte Paramtres HTML : name : le nom du champ (servira lors de la programmation) il doit tre identique pour chaque choix. value : la valeur que vous voulez afficher dans le champ (facultatif). checked : mettre sur un seul bouton, qui sera slectionn par dfaut. Il est ncessaire de prciser le label aprs le contrle (texte) Proprits JS : name : indique le nom du contrle. checked : indique si le bouton radio est coch, actuellement. defaultchecked : indique si le bouton radio est coch ou non par dfaut. value : indique la valeur du bouton radio. index : indique le rang du bouton radio, partit de 0.
32
Version 1.0
Exemple 9.6 : <form method=post action=mailto:lapape@levatican.com> <input type=radio name=choix value=1> choix 1<br> <input type=radio name=choix value=2> choix 2<br> <input type=radio name=choix value=3> choix 3<br> <input type="submit"name="envoi" value="envoyer"> </form> Rsultat
9.3.2.Checkbox
Il sagit de cases cocher choix multiple. Syntaxe HTML : <input type=checkbox name=nom value="valeur"> texte Paramtres HTML : name : le nom du champ (servira lors de la programmation). Il doit tre diffrent pour chaque choix. value : la valeur que vous voulez afficher dans le champ (facultatif). checked : mettre sur un (ou plusieurs) bouton, qui sera slectionn par dfaut. Il est ncessaire de prciser le label aprs le contrle (texte) Proprits JS : name : indique le nom du contrle. checked : indique si la case est coche, actuellement. defaultchecked : indique si la case est coche ou non par dfaut. value : indique la valeur de la case cocher.
33
Version 1.0
Exemple 9.7 : <form method=post action=mailto:lapape@levatican.com> <input type=checkbox name=choix1 value=1> choix 1<br> <input type=checkbox name=choix2 value=2> choix 2<br> <input type=checkbox name=choix3 value=3> choix 3<br> <input type="submit"name="envoi" value="envoyer"> </form> Rsultat
9.4.Liste de slection
Il sagit dune liste droulante dans laquelle on peut slectionner un option. Syntaxe HTML : <select name=nom size=x> <option value="valeur"> texte </select> Paramtres HTML : name : le nom du champ (servira lors de la programmation). size : le nombre doptions que vous voulez afficher lcran. Sil nest pas prcis, la liste naffiche quune seule ligne. value : la valeur que vous voulez afficher dans le champ (facultatif). selected : mettre dans une balise <option>. Cette option sera slectionne par dfaut. Multiple : mettre dans une balise <select>. Autorise la slection de plusieurs options dans la liste droulante. Chaque option de la liste droulante correspond une balise <option>. Il est ncessaire de prciser le label aprs chaque option contrle ( texte). Proprits JS : name : indique le nom du contrle. selected : indique si le bouton radio est slectionn defaultselected : indique si le bouton radio est coch ou non par dfaut. length : indique le nombre dlments de la liste.
34
Version 1.0
Exemple 9.8 : <form method=post action=mailto:lapape@levatican.com> <select name=choix size=3> <option value=1>choix 1 <option value=2>choix 2 <option value=3>choix 3 </select><br> <input type="submit"name="envoi" value="envoyer"> </form> Rsultat Exemple 9.9 : <form method=post action=mailto:lapape@levatican.com> <select name=choix> <option value=1>choix 1 <option value=2>choix 2 <option value=3>choix 3 </select><br> <input type="submit"name="envoi" value="envoyer"> </form> Rsultat
9.5.Bouton
9.5.1.Bouton simple
Syntaxe HTML : <input type=button name=nom value=valeur> Paramtres HTML : name : le nom du champ (servira lors de la programmation). value : la valeur que vous voulez afficher sur le bouton. Proprits JS : name : indique le nom du contrle. value : indique la valeur actuelle du bouton. defaultselected : indique la valeur par dfaut du bouton.
Version 1.0
Exemple 9.10 : <form method=post action=mailto:lapape@levatican.com> <input type="button"name="click" value="Cliquez"> </form> Rsultat
9.5.2.Bouton reset
Il permet de remettre la valeur par dfaut de tous les champs du formulaire. Syntaxe HTML : <input type=reset name=nom value=valeur> Paramtres HTML : name : le nom du champ (servira lors de la programmation). value : la valeur que vous voulez afficher sur le bouton. Proprits JS : name : indique le nom du contrle. value : indique la valeur actuelle du bouton. defaultselected : indique la valeur par dfaut du bouton. Exemple 9.11 : <form method=post action=mailto:lapape@levatican.com> <select name=choix size=3> <option value=1>choix 1 <option value=2>choix 2 <option value=3 selected>choix 3 </select><br> <input type="reset" name="effacer" value="effacer"> </form> Rsultat
9.5.3.Bouton submit
36
Version 1.0
Il permet dexcuter laction prvue dans la balise <form>, comme on la vu dans la partie 6.1.2. Syntaxe HTML : <input type=submit name=nom value=valeur> Paramtres HTML : name : le nom du champ (servira lors de la programmation). value : la valeur que vous voulez afficher sur le bouton. Proprits JS : name : indique le nom du contrle. value : indique la valeur actuelle du bouton. defaultselected : indique la valeur par dfaut du bouton. Exemple 9.12 : <form method=post action=mailto:lapape@levatican.com> <select name=choix size=3> <option value=1>choix 1 <option value=2>choix 2 <option value=3 selected>choix 3 </select><br> <input type="submit" name="envoi" value="envoyer"> </form> Rsultat
9.6.Contrle cach
Il permet de mettre dans le script des lments (souvent des donnes) qui ne seront pas affiches par le navigateur, mais qui pourront tre envoyes par mail ou un serveur. Syntaxe HTML : <input type=hidden name=nom value=valeur> Paramtres HTML : name : le nom du champ (servira lors de la programmation). value : la valeur qui sera contenue dans le contrle. Proprits JS : name : indique le nom du contrle.
Version 1.0
value : indique la valeur actuelle du contrle. defaultselected : indique la valeur par dfaut du contrle.
Exemple 9.13 : <form method=post action=mailto:lapape@levatican.com> <input type="hidden" name="date" value="30/06/2004"> <input type=button name=click value=Vous pouvez cliquez!> </form> Rsultat
38
Version 1.0
9.7.Un formulaire complet

Voil un formulaire complet, utilisant la plupart des contrles que nous avons vu cidessus. Il pourrait sagir dun formulaire rel, mais je lai invent de toutes pices. De nombreux sites proposent des formulaires, rien ne vous empche denregistrer la page est daller fouiner pour voir leur astuces Exemple 9.14 : <form method=post action=traitement.php> Inscription au stage<br> Identit<br> <input type="hidden" name="date" value="15/06/04"> <input type=text name=nom value=Nom> <input type=text name=prnom value=Prnom><br> <input type=text name=date value=Date de naissance ><br> Activit<br> <select name=Activit> <option value=Collgien>Collgien <option value=Lycen>Lycen <option value=Etudiant>Etudiant <option value=Salari>Salari <option value=Fonctionnaire>Fonctionnaire <option value=Patron>Patron </select><br> Qualification(s):<br> <input type=checkbox name=choix1 value=bafa> BAFA<br> <input type=checkbox name=choix2 value=bafd> BAFD<br> <input type=checkbox name=choix3 value=rien> rien<br> Semaine choisie:<br> <input type=radio name=semaine value=1> 1re<br> <input type=radio name=semaine value=2> 2me<br> <input type=radio name=semaine value=3> 3me<br> Vos motivations :<br> <textarea name="motivations" rows=5 cols=20></textarea><br> <input type="submit" name="envoi" value="envoyer"> <input type="reset" name="effacer" value="effacer"> </form> Rsultat
39
Version 1.0
9.8.Les objet du formulaire

Nous avons vu prcdemment la notion dobjet11. Maintenant que nous avons vu tous les composants dun formulaire, nous allons pouvoir utiliser le concept objet appliqu aux formulaires. Mme si nous navons pas encore vu les objets du navigateur12, nous allons introduire ici lobjet document. Il renvoie la page en cours. Il contient en proprits tous les lments de la page. Les attributs des balises deviennent les proprits de llment objet. On y a accs de la faon suivante : Syntaxe : document.formulaire.lment.proprit
Un exemple clairera le propos. Lexemple 9.15 montre comment attribuer une valeur une ligne de texte. Exemple 9.15 : <html> <head> <script language = "Javascript"> function f() { document.form1.texte.value="voici du texte"; } </script> </head> <body onLoad="f();"> <form name="form1"> <input type="text" name="texte" value=""> </form> </body> </html> Rsultat Dans lexemple 9.15, la fonction est appele la fin du chargement grce au gestionnaire dvnement13 plac dans la balise <body>. De cette faon, on peut accder chaque lment de chaque formulaire de la page. Il est important de donner un nom, la fois au formulaire et au contrle. Ce nom doit de prfrence tre explicite, mme si celui du formulaire peut rester classique, tant donn
11
Voir, pour ceux qui auraient oubli, le chapitre 8.NOTION OBJET. Voir pour cela le chapitre 12.LES OBJETS DU NAVIGATEUR. 13 Nous verrons cela dans le chapitre 10.LES EVENEMENTS.
12
40
Version 1.0
quil y en a rarement plusieurs sur une seule et mme page. Lorsque nous travaillerons avec les frames, en revanche, ce nom sera important. Cette manire de pouvoir accder aux objets est trs pratique, mme si pour le moment, elle ne semble pas trs utile. Cette utilit sera mise en valeur lors du prochain chapitre. Mais avant cela, il est souhaitable de faire un petit exercice.
9.9.Exercice
Le but de cet exercice est darriver un formulaire complet et assez ergonomique. Il faudra faire attention aux choix des contrles et la disposition. La solution propose nest pas parfaite loin de l mais elle illustre peu prs ce quest un formulaire de qualit correcte. Le formulaire crer est un formulaire dadhsion une association, pour lactivit checs. Les informations demandes sont les suivantes : nom, prnom, date de naissance, numro de tlphone, adresse, mail, profession (choix, dont autres : prciser ), centres dintrt (choix), niveau de jeu, motivations. Vous prsenterez ce formulaire de faon assez esthtique, mais la police et la taille de caractres ne sont pas importantes, cela dpend plutt du cours HTML. Bien entendu, on envoie le tout traitement.php , par la mthode post en cliquant sur un bouton. Solution
41
Version 1.0
10. LES EVENEMENTS

10.1.Gnralits 10.1.1.Prsentation
Les vnement sont lintrt du JS en matire de programmation Web. Il donnent une interactivit la page que vous consultez, ce qui nexiste pas avec le HTML, si on excepte bien entendu le lien hypertexte. Le JS permet de ragir certaines actions de lutilisateur. On nomme vnement le mot Event, et gestionnaire dvnement le mot-cl onEvent.
10.1.2.Fonctionnement
Les vnements sont indiqus dans la balise, dun formulaire, le plus souvent. Ils apparaissent comme un paramtres supplmentaire et suivent une syntaxe particulire. Syntaxe : <balise onEvent=code">

balise : dsigne le nom de la balise HTML qui supporte lvnement. onEvent : dsigne le gestionnaire dvnement associ lvnement Event. Le code insr entre guillemets fait le plus souvent rfrence une fonction dfinie dans les balises <head></head>. Il peut cependant sagir dinstructions directement.
Plusieurs gestionnaires dvnements peuvent tre placs dans la mme balise. Certaines balises nappartenant pas un formulaire peuvent supporter des gestionnaires dvnement. Exemple 10.1 : <a href=http://www.google.fr onClick=alert(vous avez cliqu!); onMouseOver=alert(Hh) ;> click?</a> Rsultat
42
Version 1.0
10.2.Le clic de souris

Lorsque vous cliquez sur un lment de formulaire de la page que vous consultez. Gestionnaire dvnement : onClick Exemple 10.2 : <input type=button onClick=alert(vous avez cliqu sur le bouton) ;"> Rsultat Balises supportes : <input type="button">, <input type="checkbox">, <input type="radio">, <input type="reset">, <input type="submit">, <a href..>
10.3.Le chargement 10.3.1.Load

Lorsque la page que vous consultez finit de se charger. Gestionnaire dvnement : onLoad Exemple 10.3 : <body onLoad=alert(la page est charge !) ;"> Rsultat Balises supportes : <body>, <frameset>
43
Version 1.0
10.3.2.UnLoad
Lorsque vous quittez un document ou une page web. Gestionnaire dvnement : onUnLoad Exemple 10.4 : <body onUnLoad=alert(Vous quittez la page !) ;"> Rsultat Balises supportes : <body>, <frameset>
10.3.3.Error
Lorsque le chargement dune page ou dun image sinterrompt en erreur. Gestionnaire dvnement : onError Exemple 10.5 : <img src="pix.gif" onError=alert(Erreur de chargement !) ;"> Balises supportes : <body>, <frameset>, <img>
10.3.4.Abort
Lorsque vous interrompez le chargement dune image. Gestionnaire dvnement : onAbort Exemple 10.6 :
44
Version 1.0
<img src="pix.gif" onAbort=alert(Vous avez interrompu le chargement de limage !) ;"> Balises supportes : <img>
10.4.Le passage de la souris 10.4.1.MouseOver

Lorsque vous survolez un lien ou une zone dimage activable. Un zone dimage activable est une partie dimage qui a t transforme en lien. Je ne reviendrai pas sur ce sujet, ce nest pas lobjet de ce cours. Gestionnaire dvnement : onMouseOver Exemple 10.7 : <a href="http://www.google.fr" onMouseOver=alert(Pour aller sur google.fr, cliquer ici) ;">http://www.google.fr</a> Rsultat Balises supportes : <a href>, <area href>
10.4.2.MouseOut
Lorsque vous sortez de la zone de survol dun lien ou dune zone dimage activable. Gestionnaire dvnement : onMouseOut Exemple 10.8 : <a href="http://www.google.fr" onMouseOut=alert(Vous ne voulez pas y aller ?) ;">http://www.google.fr</a>
45
Version 1.0
Rsultat Balises supportes : <a href>, <area href>
10.5.Le focus 10.5.1.Focus

Lorsque vous activer un contrle texte ou slection. Gestionnaire dvnement : onFocus Exemple 10.9 : <input type="text" value="votre nom" name=nom onFocus=alert(Ecrivez votre nom ici) ;"> Rsultat Balises supportes : <input type="text">, <select>, <textarea>, <input type="password">
10.5.2.Blur
Lorsque vous quitter un contrle texte ou slection. Gestionnaire dvnement : onBlur Exemple 10.10 : <input type="text" value="votre nom" name=nom onBlur=alert(Vous n\avez rien oubli ?) ;"> Rsultat Balises supportes :
Version 1.0
<input type="text">, <select>, <textarea>, <input type="password">
47
Version 1.0
10.6.Les changements
Lorsque la valeur dun texte ou dune option change dans un formulaire. Si vous cliquez dans la zone de texte mais que vous ne touchez pas au texte, rien ne se produit. Gestionnaire dvnement : onChange Exemple 10.11 : <input type="text" value="votre nom" name=nom onChange=alert(Vous avez chang votre nom ??) ;"> Rsultat Balises supportes : <input type="text">, <select>, <textarea>, <input type="password">
10.7.La slection
Lorsque vous slectionnez du texte dans un champ de texte. Gestionnaire dvnement : onSelect Exemple 10.12 : <input type="text" value="votre nom" name=nom onSelect=alert(Vous avez slectionn un champ) ;"> Rsultat Balises supportes : <input type="text">, <textarea>
48
Version 1.0
10.8.Lenvoi
Lorsque vous cliquez sur un bouton submit dun formulaire de type post ou get . Gestionnaire dvnement : onSubmit Exemple 10.13 : <input type="submit" value="Envoyer" name=envoi onSubmit=alert(Cest parti !) ;"> Rsultat Balises supportes : <input type="submit">
10.9.Le reset
Lorsque vous slectionnez un champ de texte. Gestionnaire dvnement : onReset Exemple 10.14 : <input type="reset" value="Effacer" name=effacer onSubmit=alert(On efface tout !) ;"> Rsultat Balises supportes : <input type="reset">
10.10.Lutilisation de lobjet document

Avant de voir les vnements, lintrt de laccs au lments travers lobjet document tait discutable. Maintenant, on voit que lon peut changer des valeurs selon des vnements, ce qui est trs intressant. Il est aussi possible de demander confirmation, de
49
Version 1.0
demander si on veut vraiment changer la valeur Tout est permis. Cette partie ne comporte pas dexemple, car la partie 10.11.Exemple concret en prsente un assez complet.
10.11.Exemple concret
Voici un exemple parmi tant dautres de ce que pourrait tre un formulaire interactif, avec tous les vnements auxquels on peut penser. Exemple 10.15 :
<HTML> <HEAD> <TITLE>New Document</TITLE> <script language="Javascript"> var TestLog = 0; //test pour le login function ChangeLog() { TestLog++; //incrmente le test //si le login a t chang plus d'une fois if (TestLog > 1) { alert("Vous changez de login?\n Dcidez-vous!"); } } function VerifPass () { // si les deux password sont diffrents if (document.form1.pass1.value != document.form1.pass2.value) { alert("Vous avez entr deux password diffrents !\nVrifiez les deux."); } } function VerifMail () { //confirmation du mail var test = confirm ("Votre mail est bien : " + document.form1.mail.value + " ?"); if (test == false) { //si l'internaute ne confirme pas alert("N'oubliez pas de changer votre mail!"); } } </script> </HEAD> <BODY> <form name="form1"> <center>Formulaire d'inscription sur notre site</center><br/> Login : <input type="text" name="login" onChange="ChangeLog();" value="login"><br/> Password : <input type="password" name="pass1"><br/> Password (vrification) : <input type="password" name="pass2" onBlur="VerifPass();"><br/> Adresse e-mail : <input type="text" name="mail" onBlur="VerifMail();" value="@"><br/> Vous voulez recevoir la newsletter? <input type="radio" name="news" value="yes">Oui <input type="radio" name="news" value="no" onClick="alert('Tant pis pour vous!')">Non<br/> <input type="submit" name="sub" value="Envoi"> <input type="reset" name="reset" value="Effacer"> </form> </BODY> </HTML> 23/06/2004 Professor Maddy 50
Version 1.0
Rsultat
10.12.Exercice 10.12.1.Le bouton

Lexercice consiste faire un bouton dont la valeur sincrmente chaque clic. Ce nest pas trs compliqu. Solution
10.12.2.La phrase
Lexercice consiste demander 3 informations un utilisateur, puis de les afficher dans un zone de texte en faisant un phrase. Il faudra demander le nom laide dune boite de message, ainsi que lge et la ville avec des lignes de texte. Ensuite, en cliquant sur un bouton, on affiche une phrase contenant les 3 informations dans un zone de texte. Solution
51
Version 1.0
11. LOBJET ARRAY

11.1.Gnralits
Lobjet Array nest rien dautre quun tableau. Un tableau est en quelque sorte une liste dlments indexs que lon pourra lire chercher les donnes - ou crire entrer les donnes volont.
11.2.Cration et affectation dun tableau

11.2.1 Cration dun tableau
On cr un tableau comme nimporte quel objet de classe. On invoque le constructeur de classe. On indique en paramtre du constructeur le nombre maximum dlments (x) que lon souhaite entrer dans le tableau. Ce nombre est cependant facultatif, car JS prend en compte le numro du dernier lment entr comme taille du tableau si le ce nombre nest pas indiqu. Syntaxe : variable = new Array(x) ; Exemple 11.1 : var MonTableau = new Array (10) ;
11.2.2 Affectation dun tableau

On affecte un tableau trs simplement. Il suffit daffecter une valeur (y) la variable avec le numro de llment (i) entre crochets. Ces derniers ne sont pas prsents lors de la cration mais sont indispensables lors de laffectation . Le numro commence 0 et finit au nombre maximum moins 1. Syntaxe : variable = new Array(x) ; variable [i] = y; Exemple 11.2 : var MonTableau = new Array (2) ;
52
Version 1.0
MonTableau [0] = 7 ; MonTableau [1] = 4 ; Evidemment, ce rythme-l, laffectation est longue, surtout si votre tableau compte plus que quelques lments. Cest pourquoi on utilise la boucle itrative for. Lexemple suivant entre une srie de nombre en ajoutant 1 chaque fois. Il sagit dun exemple rapide et simple, mais on peut imaginer faire un calcul ou demander une valeur lutilisateur chaque boucle. Exemple 11.3 : var MonTableau = new Array (5) ; for ( var i = 0 ; i < 5 ; i++) { MonTableau [i] = i; document.write (MonTableau[i]); } Rsultat
11.3.Accs aux donnes dun tableau

On accde aux donnes dun tableau en indiquant le numro de llment entre crochets. On affecte cette valeur une variable, par exemple. On peut aussi la rentrer comme paramtre dune fonction. Syntaxe : variable1 = new Array(x) ; variable1 [i] = y ; variable2 = variable1 [i] ; Exemple 11.4 : var MonTableau = new Array (2) ; MonTableau [0] = 7 ; var element = MonTableau [0] ; document.write (MonTableau [0]) ; Rsultat
11.4.Tableau 2 dimensions
Pour crer un tableau 2 dimensions, on utilise lastuce suivante : on dclare chaque lment comme un nouveau tableau.
Version 1.0
Syntaxe : variable = new Array (x) ; variable [i] = new Array (y) ; Exemple 11.5 : var MonTableau = new Array (2) ; MonTableau [0] = new Array (7) ; Il est bien entendu plus rapide dutiliser une instruction itrative pour crer ce tableau 2 dimensions. Exemple 11.6 : var MonTableau = new Array (5) ; for ( var i = 0 ; i < 5 ; i++) { MonTableau [i] = new Array (3); } Avec ce systme, on peut crer un tableau 3,4 dimensions ou plus, bien que lutilit en soit quelque peu douteuse
11.5.Proprits et mthodes
Comme tout objet, lobjet Array possde une proprit et des mthodes qui savrent assez utiles.
11.5.1.Proprit
Lobjet Array ne possde quune proprit length qui dsigne le nombre dlments du tableau. Syntaxe : variable = new Array (x) ; y = variable.length ;
Exemple 11.7 : var MonTableau = new Array (2) ; document.write (MonTableau.length) ;
54
Version 1.0
Rsultat
55
Version 1.0
11.5.2.Mthodes
Lobjet Array possde plusieurs mthodes qui permettent de manier les lments du tableau. Syntaxe : tableau.mthode() ;
join (sparateur) : regroupe tous les lments du tableau en une seule chane. Chaque lment est spar par un sparateur. Ci celui-ci nest pas prcis, ce sera une virgule. reverse () : inverse lordre des lments sans les trier. sort () : Renvoie les lments par ordre alphabtique, sils sont de mme nature. concat(tableau) : concatne le tableau pass en paramtre avec celui de la mthode. pop() : supprime le dernier lment du tableau. push(lment1,) : ajoute l(es) lment(s) pass(s) en paramtre la fin du tableau. shift() : supprime le premier lment du tableau. slice(dbut,fin) : renvoie les lments contenus entre la position suprieure ou gale dbut et infrieure fin. splice(dbut, nombre, lments) : supprime les lments partir de la position dbut et sur nombre de position. Les lments sont remplacs par ceux fournis en paramtre (facultatif). unshift(lment1,) : ajoute l(es) lment(s) pass(s) en paramtre au dbut du tableau.
Exemple 11.8 : var MonTableau = new Array (4) ; MonTableau [0] = Moi ; MonTableau [1] = Toi ; MonTableau [2] = Lui ; MonTableau [3] = Elle ; MonTableau.reverse() ; document.write (MonTableau.join( )) ; MonTableau.sort() ; document.write ("<br>" + MonTableau.join( )) ; Rsultat
56
Version 1.0
Le but de cet exemple est de remplir et afficher les valeurs 0.1 prs comprises entre 0 et 10 exclu. Pour cela, on utilise un tableau deux dimensions, dont la premire indique la partie entire du nombre, et la deuxime dimension indique la partie dcimale. On va dabord crer le tableau, puis le remplir et enfin lafficher. Exemple 11.9 :
<script language="Javascript"> var Tableau = new Array (10) ; // objet tableau for (i = 0; i < 10; i++) { // pour chaque lment... Tableau[i] = new Array(10); // on redfinit un tableau } // remplissage du tableau for (i = 0; i < 10; i++) { /* pour chaque lment de la premire dimension*/ for (j = 0; j < 10; j++) { /* pour chaque lment de la seconde dimension*/ Tableau[i][j] = i + "." + j; //on remplit l'lment } } // affichage du tableau for (i = 0; i < 10; i++) { /* pour chaque lment de la premire dimension */ for (j = 0; j < 10; j++) { /* pour chaque lment de la seconde dimension */ document.write( Tableau[i][j] + " ; " ); /*on affiche l'lment, avec un point virgule */ } document.write ("<br>"); /* a chaque unit, on revient la ligne. */ } </script>
Rsultat
11.7.Exercice
Le but de lexercice est dafficher les entiers compris entre 1 et 10 inclus dans lordre dcroissant. Vous utiliserez pour cela un tableau de 10 lments. Solution
57
Version 1.0
12.LES OBJETS DU NAVIGATEUR

12.1.Gnralits
Nous avons vu les classes prdfinies en JS. Il existe aussi plusieurs objets en JS rattachs la fentre, la page et au navigateur. Il sont appels window, document et navigator. Ce sont 3 classes distinctes - sans lien entre elle puisque lhritage nexiste pas en JS. Nous tudierons chaque classe lune aprs lautre. Cependant, lobjet document fait partie de lobjet window.
12.2.Arborescence
Je prsente ici larborescence des objets de JS. Elle comprend les 3 objets principaux ainsi que tous les sous-objets contenus dans chaque objet principal.
navigator plugins [] window parent frames[] top opener history location external screen event document document all / layers frames[] images[] anchors[] applets[] plugins[] links[] forms [] elements []
58
Version 1.0
59
Version 1.0
13.LOBJET NAVIGATOR
Il sagit comme son nom lindique de votre navigateur, ou votre browser. Les deux principaux sont srement Microsoft Internet Explorer et Netscape. Lobjet navigator possde toutes les caractristiques de votre navigateur ainsi que certaines de votre ordinateur. Cela peut savrer utile pour tester la compatibilit de certains codes avec un browser. Lobjet navigator tant intgr dans le langage, il nest pas ncessaire de crer une instance de cette classe.
13.1.Les proprits de navigator

Toutes ces proprits ne font que donner des informations sur votre type de navigateur. Pour y accder, on suit la syntaxe habituelle dun objet. Syntaxe : variable = navigator.proprit ; Les proprits qui suivent fonctionnent sous tous les navigateurs. Les compatibilit ne seront voqus que pour Netscape et Internet Explorer. appCodeName : nom de code du navigateur. appName : nom complet du navigateur. appVersion : numro de version du navigateur ainsi que dautres informations de plate-forme. userAgent : informations de appCodeName et de appVersion runies.
Certaines proprits ne fonctionnent quavec Microsoft Internet Explorer. Veillez tester le type de browser avant dexcuter le script !

appMinorVersion : numro de version mineure. browserLanguage : code langue du browser. userLanguage : code langue de lutilisateur. systemLanguage : code langue du systme dexploitation. cpuClass : classe du processeur. platform : code type de plate-forme (pc, mac, linux ). cookieEnabled : boolen qui indique si lutilisateur accepte les cookies. onLine : boolen qui indique si le poste est connect Internet.
60
Version 1.0
Une proprit existe sous Netscape pour remplacer la proprit browserLanguage dInternet Explorer.
language : code langue du browser.
13.2.Les mthodes de navigator

Dans cette partie, je vous cite les mthodes de navigator, mais malheureusement, je ne suis pas en mesure de vous expliquer leur utilit. Si vous le savez, merci de me le faire savoir. Syntaxe : variable = navigator.mthode() ;

javaEnabled() taintEnabled()
13.3.Les objets de navigator

Lobjet navigator contient un autre objet, qui nhrite pas de lui. Il sagit du tableau plugins, qui nest reconnu que par Netscape. Il sagit de la liste de tous les plugins installs. Personnellement, je ne vois pas lutilit de cet objet, mais par souci didactique, je vous le dcris. Syntaxe : variable = navigator.plugin.proprit ;

plugins.length : nombre de plugins plugins[i].name : nom du plugin n i. plugins[i].filename : nom de lexcutable du plugin n i. plugins[i].description : description du plugin n i. plugins[i].length : nombre de types de fichiers supports par le plugin n i. plugins[i][j].type : type n j du plugin n i. plugins[i][j].suffixes : Extensions des fichiers du type n j du plugin n i.
61
Version 1.0
13.4.Exemple
Le but de lexemple 13.1 est dafficher les informations du navigateur, en fonction de celui-ci. On commencera donc par tester le type de navigateur. Lexemple 13.1 nest pas comment car il n a rien de nouveau except les proprits vues ci-dessus. Exemple 13.1 : <script language="Javascript"> document.write (navigator.appCodeName + "<br>"); document.write (navigator.appName + "<br>"); document.write (navigator.appVersion + "<br>"); document.write (navigator.userAgent + "<br>"); if (navigator.appName == "Microsoft Internet Explorer") { document.write (navigator.appMinorVersion + "<br>"); document.write (navigator.browserLanguage + "<br>"); document.write (navigator.userLanguage + "<br>"); document.write (navigator.systemLanguage + "<br>"); document.write (navigator.cpuClass + "<br>"); document.write (navigator.platform + "<br>"); document.write (navigator.cookieEnabled + "<br>"); document.write (navigator.onLine + "<br>"); } else { document.write (navigator.language + "<br>"); } </script> Rsultat Ce chapitre ne comporte pas dexercice car le contenu est assez restreint. Lexemple 13.1 devrait suffire illustrer lobjet navigator.
62
Version 1.0
14.LOBJET WINDOW
Il sagit comme son nom lindique de la fentre du browser en cours dexcution. Tous les lments de la fentre sont des proprits ou des mthodes de window. Lobjet window tant intgr dans le langage, il nest pas ncessaire de crer une instance de cette classe.
14.1.Les proprits de window

Toutes ces proprits correspondent des lments de la fentre ouverte. Elles permettent de changer quelques dtails sympathiques dans le visuel dune page web. Pour y accder, on suit la syntaxe habituelle dun objet. Syntaxe : window.proprit;

defaultStatus : le texte par dfaut affich dans la barre dtat. status : le texte afficher dans la barre dtat, prioritaire par rapport defaultStatus. name : le nom de la fentre screenTop : ordonne du point suprieur gauche de la fentre. screenLeft : abscisse du point suprieur gauche de la fentre. closed : boolen indiquant si la fentre est ferme.
14.2.Les mthodes de window

14.2.1.Gnralits
Lobjet window possde de nombreuses mthodes, dont certaines que nous avons dj vu prcdemment les botes de dialogue -, et qui peuvent offrir quelques atouts votre page web. La plupart renvoient une valeur la variable qui appelle la fonction. Syntaxe : variable = window.mthode(); Certaines proprits ne ncessitent pas de prciser le suffixe window. pour fonctionner. Cest notamment le cas des boites de dialogue.
63
Version 1.0
14.2.2.Liste des mthodes

alert (texte) : boite de message avec un bouton unique. prompt (texte, valeur_dfaut) : boite dinvite avec un texte informatif et une zone de texte avec une valeur par dfaut facultative. confirm (texte) : boite de confirmation avec un texte informatif et deux boutons OK et annuler . print (texte) : afficher le texte dans la page. open (URL, nom, options) : ouvre une page pop-up avec les caractristiques donnes en paramtres. close () : ferme la fentre. focus () : donne le focus la page. blur () : enlve le focus la page. moveBy (x,y) : dplacement relatif du coin suprieur gauche de la fentre. moveTo (x,y) : dplacement absolu du coin suprieur gauche de la fentre. resizeBy (x,y) : redimensionnement relatif de la fentre. resizeTo (x,y) : redimensionnement absolu de la fentre. scrollBy (x,y) : scroll relatif. scrollTo (x,y) : scroll absolu. setTimeOut (fonction, temps) : dclenche une minuterie en millisecondes. clearTimeout(timer) : suspend la minuterie. stopTimeOut (timer) : arrte une minuterie. setInterval(code, dlai) : excute le code sous forme de String - pass en paramtre chaque fois que le dlai est coul. clearInterval(timer) : arrte la minuterie dfinie avec setInterval(). stop() : arrte le chargement de la page. home() : ouvre la page de dmarrage de linternaute.
14.2.3.Exemples
Voici, pour illustrer les liste propose ci-dessus, deux faons e faire un chronomtre. La premire utilise la mthode setInterval() moins connue - , ce qui conomise un ligne de code. La seconde utilise la mthode setTimeout() plus connue - qui doit tre rappele chaque boucle. Le reste du code est identique. Il sert incrmenter chaque fois les secondes, et permet de rendre laffichage un peu plus agrable.
64
Version 1.0
Exemple 14.1 :
<HTML> <HEAD> <TITLE>New Document</TITLE> <script language="Javascript"> var seconds = 0; var minutes = 0; var hours = 0; function chrono () { if (seconds == 60) { seconds = 0; minutes++; } if (minutes == 60) { minutes = 0; hours++; } h = hours; m = minutes; s = seconds; if (s < 10) s = "0" + s; if (m < 10) m = "0" + m; if (h < 10) h = "0" + h; document.form1.chrono.value = h + ":" + m + ":" + s; seconds++; } </script> </HEAD> <BODY onLoad="window.setInterval('chrono();',1000)"> <form name="form1"> <center><input type="text" value="" name="chrono" size=6></center> </form> </BODY> </HTML>
Rsultat
65
Version 1.0
Exemple 14.2 :
<HTML> <HEAD> <TITLE>New Document</TITLE> <script language="Javascript"> var seconds = 0; var minutes = 0; var hours = 0; function chrono () { if (seconds == 60) { seconds = 0; minutes++; } if (minutes == 60) { minutes = 0; hours++; } h = hours; m = minutes; s = seconds; if (s < 10) s = "0" + s; if (m < 10) m = "0" + m; if (h < 10) h = "0" + h; document.form1.chrono.value = h + ":" + m + ":" + s; seconds++; window.setTimeout('chrono()',1000); } </script> </HEAD> <BODY onLoad="chrono();"> <form name="form1"> <center><input type="text" value="" name="chrono" size=6></center> </form> </BODY> </HTML>
Rsultat
14.3.Les vnements de window

On peut rattacher certains vnements lobjet window. Il seront placs dans la balise <body>, grce au gestionnaire dvnement onEvent. Syntaxe : <body onEvent=code> load : fin de chargement de la page. unLoad : dchargement de la page. focus : prise de focus de la fentre ou dun de ses lments. blur : perte de focus de la fentre ou dun de ses lments.

66
Version 1.0
resize : redimensionnement de la fentre. Pour plus de prcisions, consultez le chapitre 7, relatif au vnements de Javascript.
14.4.Les objets de window

Lobjet window contient plusieurs autres objets assez rduits que je prsente dans cette partie. Syntaxe : variable = window.objet.proprit ; variable = window.objet.mthode() ;
14.4.1.Lobjet frames
Il sagit dun tableau contenant toutes les frames dclares dans la page. Il ne possde ni proprits ni mthodes. Syntaxe : variable = window.frames[i] ;
14.4.2.Lobjet parent
Il sagit de la page principale, qui contient la dclaration de toutes les frames. Il possde les mmes attributs que lobjet window. Syntaxe : variable = window.parent.mthode() ; variable = window.parent.proprit ;
14.4.3.Lobjet top
Il sagit de la page de plus haut niveau. Il possde les mmes attributs que lobjet window. Syntaxe : variable = window.top.mthode() ; variable = window.top.proprit ;
Version 1.0
14.4.4.Lobjet opener
Il sagit de la page responsable de louverture de la page courante. Il possde les mmes attributs que lobjet window. Syntaxe : variable = window.opener.mthode() ; variable = window.opener.proprit ;
14.4.5.Lobjet history
Il sagit de lhistorique des pages consultes. Il possde une proprit et 3 mthodes. Voici la proprit et les mthodes de cet objet, qui se dclarent selon la syntaxe objet. Syntaxe : variable = window.history.mthode() ; variable = window.history.proprit ; length : le nombre dentres de lhistorique. back () : permet de retourner la page prcdente. forward () : permet daller la page suivante. go (numro) : permet daller la page du numro pass en paramtre.
14.4.6.Lobjet location
Il sagit de toutes les informations contenues dans lURL de la page en cours. Voici la proprit et les mthodes de cet objet, qui se dclarent selon la syntaxe objet. Lobjet window.location renvoie lURL complte de la page en cours. Syntaxe : variable = window.location.mthode() ; variable = window.location.proprit ; Les proprits suivantes renvoient des informations plus prcises concernant lURL. Je ne prcise pas quoi elle renvoient exactement car ce nest pas trs utile dans ce cours.
68
Version 1.0
hash host hostName pathName href port protocole search : renvoie la partie de lURL situe aprs le ? .

Il existe deux proprits de lobjet window.location, qui concernent toutes deux le rechargement de la page.

reload () : recharge la page. Ne fonctionne pas sous tous les navigateurs. replace (page) : recharge la page en cours sans modifier lhistorique.
14.4.7.Lobjet screen
Il sagit de toutes les informations du systme daffichage de lutilisateur. Il y a 4 proprits rattaches cet objet. Syntaxe : variable = window.screen.proprit ;

availHeight : hauteur en pixels de la zone utilisable pour laffichage. availWidth : largeur en pixels de la zone utilisable pour laffichage. height : hauteur de la fentre en pixels - contient barres de menus, dtat, de titre et de scrolling - . width : largeur de la fentre en pixels - contient barres de menus, dtat, de titre et de scrolling - . colorDepth : Contient la profondeur de couleur en nombre de bits.
14.4.8.Lobjet event
Il sagit dun objet propre Microsoft Internet Explorer. Il renvoie le type dvnement qui a eu lieu. Syntaxe : variable = window.event.proprit ;
69
Version 1.0
70
Version 1.0
altKey : renvoie le code du caractre frapp au clavier. button : renvoie le type de clic de souris effectu.
14.4.9.Lobjet external
Il sagit dun objet propre Microsoft Internet Explorer. Il permet daccder aux proprits du navigateur. Syntaxe : variable = window.external.proprit ;
AddFavorite(URL,titre): Ajoute une ligne la liste des favoris. Demande confirmation linternaute.
Dans lexemple 14.1, on a voulu afficher les attributs de la fentre (hauteur/largeur, place affichable) ainsi que lURL en cours. Il ny a pas de commentaires car les instructions utilises sont dtailles ci-dessus. Exemple 14.3 : <script language="Javascript"> document.write (window.location + "<br>"); document.write (window.screen.availHeight + "<br>"); document.write (window.screen.availWidth + "<br>"); document.write (window.screen.height + "<br>"); document.write (window.screen.width + "<br>"); </script> Rsultat
14.6.Exercice
Le but de lexercice est de donner lutilisateur la possibilit de modifier la fentre laide de boutons. Il pourra redimensionner et revenir la taille initiale, la dplacer et la remettre en position initiale, lui enlever le focus, et la fermer. Lors de la fermeture, lutilisateur sera averti par une boite de message. Solution
71
Version 1.0
72
Version 1.0
15.LOBJET DOCUMENT
Il sagit comme son nom lindique de la page en cours dexcution. Tous les lments de la page sont des proprits ou des mthodes de document. Lobjet document tant intgr dans le langage, il nest pas ncessaire de crer une instance de cette classe. Lobjet document fait partie de lobjet window, mais il nest pas ncessaire de prciser le suffixe "window."
15.1.Les proprits de document

Toutes ces proprits correspondent des lments de la page ouverte. Cela permet duniformiser et de changer quelques dtails de votre page. On les utilise grce la syntaxe habituelle. Syntaxe : document.proprit;

bgColor : couleur du fond. fgColor : couleur du texte. linkColor : couleur des liens ni actifs ni visits. alinkColor : couleurs des liens actifs. vlinkColor : couleurs des liens visits. cookie : chane de caractres contenant les cookie. lastModified : date de dernire modification du fichier source referrer : adresse de la page par laquelle la page en cours a t appele. title : titre du document, indiqu par les balises <title></title>. Nest modifiable quavec Microsoft Internet Explorer. fileSize : taille de la page en octets. defaultCharset : jeu de caractre du document charg. mimeType : type du document charg. URLUnencoded : URL complte de la page, avec les caractres spciaux encods. URL : URL de la page. protocol : protocole de chargement de la page. domain : domaine de lURL complte de la page.
73
Version 1.0
Exemple 15.1 :
<script language="Javascript"> document.write ("Taille du fichier : " + document.fileSize + "<br>"); document.write ("Type mime : " + document.mimeType + "<br>"); document.write ("Jeu de caractres : " + document.defaultCharset + "<br>"); document.write ("URL dcode : " + document.URLUnencoded + "<br>"); document.write ("URL : " + document.URL + "<br>"); document.write ("Protocole : " + document.protocol + "<br>"); document.write ("Dernire modification : " + document.lastModified + "<br>"); </script>
Rsultat
15.2.Les mthodes de document

Lobjet document possde de plusieurs mthodes, dont certaines que nous avons dj vu prcdemment. Syntaxe : variable = document.mthode(); Certaines proprits ne ncessitent pas de prciser le suffixe window. pour fonctionner. Cest notamment le cas des boites de dialogue. write (texte) : affiche le texte et le code HTML dans la page courante. getSelection () : renvoie le texte qui a t slectionn dans la page. handleEvents : cr un gestionnaire dvnement. captureEvents : dtecte un vnement. open () : ouvre une nouvelle fentre de votre browser. close () : ferme le flux daffichage externe. getElementById(ID) : renvoie un objet HTML en fonction de son ID. A ne pas confondre avec le Name. getElementsByName(nom) : renvoie un objet HTML en fonction de son name. getElementsByTagName(type) : renvoie un tableau de toutes les balises HTML du type pass en paramtre.

74
Version 1.0
Exemple 15.2 :
<HTML> <HEAD> <TITLE>New Document</TITLE> <script language="Javascript"> function f() { var tab = document.getElementsByTagName ("input"); var result; for (i = 0; i < tab.length; i++) { result = result + " " + (tab[i].value); } document.form1.result.value = result; } </script> </HEAD> <BODY> <form name="form1"> <input type="text" name="1" value=" "><br/> <input type="text" name="2" value=" "><br/> <input type="text" name="3" value=" "><br/> <input type="text" name="4" value=" "><br/> <input type="text" name="5" value=" "><br/> <input type="button" value="click!" name="click" onClick="f();"><br/> <textarea rows=4 cols=40 name="result"></textarea> </form> </BODY> </HTML>
Rsultat
15.3.Les vnements de document

On peut rattacher certains vnements lobjet document.

onClick : clic de souris sur un lment de la page. onDblClick : le double clic de souris. onKeyPress : la frappe dune touche de clavier. Pour plus de prcisions, consultez le chapitre 7, relatif au vnements de Javascript.
15.4.Les objets de document

Lobjet document contient plusieurs autres objets assez rduits que je prsente dans cette partie.
75
Version 1.0
Syntaxe : variable = document.objet.proprit ; variable = document.objet.mthode() ; Nous prciserons ici que tout lment de la page est en soit un objet de document. On y accde selon la syntaxe ci-dessus. Il serait trop lourd de donner la liste des lments, qui sont rpertoris dans tout cours HTML digne de ce nom.
15.4.1.Lobjet all
Il sagit dun tableau contenant tous les calques dclars dans la page dans les balises <div></div>. Il sagit dune particularit de Microsoft Internet Explorer. Il possde les proprits de la balise <div>. Syntaxe : document.all[calque].style.proprit = x ;
15.4.2.Lobjet layers
Cest l quivalent de lobjet all pour Netscape, pour les calques des balises <div> ou <layer>. Il possde les proprits de la balise <div>. Syntaxe : document.layers[calque].style.proprit = x ;
15.4.3.Lobjet forms
Il sagit dun tableau contenant tous les formulaires du document. Il possde une proprit elements[] qui est un tableau de tous les lments de formulaire. Syntaxe : document.forms[i].elements[j] ;
15.4.4.Lobjet anchors
Il sagit dun tableau contenant toutes les ancres les balises <a> - de la page courante. Il ne possde ni proprits ni mthodes.
Version 1.0
Syntaxe : document.anchors[i] ;
15.4.5.Lobjet images
Il sagit dun tableau contenant toutes les images les balises <img> - de la page courante. Il ne possde ni proprits ni mthodes. Cela permet de faire des effets, par exemple des rollovers, sur les images. Syntaxe : document.images[i] ;
15.4.6.Lobjet applets
Il sagit dun tableau contenant toutes les applets java dclars dans la page courante. Il ne possde ni proprits ni mthodes. Syntaxe : document.applets[i] ;
Il sagit du tableau plugins, qui nest reconnu que par Netscape. Il sagit de la liste de tous les plugins installs. Il est aussi rattach lobjet navigator. Je ne prciserai pas une nouvelle fois les proprits. Pour cela, voyez la section 16.3.Les objets de navigator.
15.4.7.Lobjet plugins
15.4.8.Lobjet frames
Il sagit dun tableau contenant toutes les frames dclares dans la page courante. Il ne possde ni proprits ni mthodes. Syntaxe : document.frames[i] ;
77
Version 1.0
15.5.Exercice
Vous devez crer un formulaire avec un texte, dans lequel on pourra entrer une couleur dans une zone de texte et avec un click, on change soit la couleur du texte, soit la couleur du fond. Solution
78
Version 1.0
16.LES OBJET DU NOYAU JAVASCRIPT

16.1.Gnralits
Le langage JS nest pas un langage orient objet, mais il possde une partie des concepts dun langage objet comme le C++. Nous avons dj vu prcdemment ce concept14. Certains de ces objets ne vous sont pas inconnus. Vous connaissez lobjet boolean. Nous avons vu lobjet Array. Nous verrons dans ci-aprs les 4 autres objets intgrs au JS. Il sagit de lobjet Math, de lobjet String, de lobjet Date et de lobjet Image.
16.2.Quelques prcisions
Certains de ces objets seront dj dfinis, comme lobjet Math. Lobjet String est dfini par une variable il sagit des chanes de caractres et na pas besoin de constructeur. Les objets Date et Image ncessitent un constructeur, intgr au langage, mais quil faut appeler selon la syntaxe habituelle. Certains objets Image existent dj dans votre page, sans que vous le sachiez. Il sagit des balises <img>. Ces dernires nont donc pas besoin de faire appel au constructeur.
14
Pour les tourdis, il sagit du chapitre 8.NOTION OBJET 79
Version 1.0
17.LOBJET MATH
17.1.Fonctions
Les fonctions mathmatiques usuelles ont t transcrites en langage JS travers lobjet Math. La plupart des fonctions sutilisent selon la mme syntaxe. Syntaxe : var1 = math.fonction(paramtres) ;
17.1.1.Fonctions diverses
Ces fonctions tant simples, je ne fournirai pas dexemples.

abs(x) : renvoie la valeur absolue de x. ceil(x) : renvoie lentier suprieur x. floor(x) : renvoie lentier infrieur x. round(x) : renvoie lentier le plus proche de x. max(x,y) : renvoie le plus grand nombre entre x et y. min(x,y) : renvoie le plus petit nombre entre x et y. pow(x,y) : renvoie le nombre x la puissance y. random(x,y) : renvoie un nombre alatoire entre 0 et 1. sqrt(y) : renvoie la racine carre de x.
17.1.2.Fonctions trigonomtriques

sin(x) asin(x) cos(x) acos(x) tan(x) atan(x)
17.1.3.Fonctions logarithmiques

exp(x) log(x)
80
Version 1.0
17.2.Constantes

math.PI math.LN2 math.LN10 math.E math.LOG2E math.LOG10E
17.3.Simplification
Si vous utilisez beaucoup lobjet math, lcriture deviendra vite pnible. Il est possible de ne pas avoir crire le mot "math" chaque fois. Il suffit dencadrer la zone de code par des accolades et lexpression with(math). Syntaxe : with (math) { code... }
Exemple 17.1 : with (Math) { x = sqrt (238) ; y = sin (x) ; document.write(y) ; } Rsultat
17.4.Exercice
Lexercice est relativement simple. Il consiste afficher la racine carre de tous les x entiers, compris dans [0 ; 20]. Le rsultat doit tre arrondi lentier. Solution
81
Version 1.0
18.LOBJET STRING
18.1.Gnralits
Un objet string est une chane de caractres. Il possde une proprit et 7 mthodes. Cet classe permet la manipulation des caractres qui savre trs utile en JS. Il est prciser que lobjet string ne se construit pas comme les autres objets. Une chane de caractre est en soi un objet string.
18.2.La proprit
Il sagit de la longueur de la chane, "length". Syntaxe : variable1 = variable2.length ; variable = (chaine).length ;
Exemple 18.1 : x = "Mon chteau" ; y = x.length ; document.write(y) ; Rsultat
18.3.Les mthodes
18.3.1.CharAt ()
Cette mthode renvoie le caractre situ la position x fournie en paramtre. Le numro de la position est compris entre 0 et la longueur de la chane 1. Syntaxe : chaine1 = chaine2.charAt(x) ; chaine1 = (chaine).charAt(x) ; chaine1 = charAt(chaine2,x) ;
82
Version 1.0
Exemple 18.2 : x = "Mon Chteau" ; y = x.charAt(4) ; document.write(y) ; Rsultat
18.3.2.FromCharCode ()
Cette mthode renvoie les nombre ASCII passs en paramtres sous forme de chane de caractre. Syntaxe : chaine.fromCharCode(i1,i2,i3)
Exemple 18.3 : document.write(y.formCharCode(12,105,123,104)) ; Rsultat
18.3.3.CharCodeAt ()
Cette mthode renvoie le code ASCII du caractre prsent la position indique en paramtre. Syntaxe : variable = chaine1.charCodeAt(position)
Exemple 18.4 : y = "lepape@le-vatican.com"; document.write(y.charCodeAt(6)) ; Rsultat
18.3.4.IndexOf ()
Cette mthode renvoie la premire position dune chane partielle dans une autre chane en partant de gauche, partir de la position x indique en paramtre. Si elle nest pas
83
Version 1.0
prsente, la mthode renvoie 1. Le numro de la position est compris entre 0 et la longueur de la chane 1. Syntaxe : variable = chaine.indexOf (chaine_partielle, x)
Exemple 18.5 : x = "maman" ; y = x.indexOf("ma",0) ; document.write(y) ; Rsultat
18.3.5.LastIndexOf ()
Cette mthode renvoie la premire position dune chane partielle dans une autre chane en partant de gauche, partir de la position x indique en paramtre. Si elle nest pas prsente, la mthode renvoie 1. Le numro de la position est compris entre 0 et la longueur de la chane 1. Syntaxe : variable = chaine.lastIndexOf (chaine_partielle, x)
Exemple 18.6 : x = "maman" ; y = x.lastIndexOf("ma",4) ; document.write(y) ; Rsultat
18.3.6.Substring ()
Cette mthode renvoie la sous-chane comprise entre les positions x et y indiques en paramtres, dans la chane principale. Syntaxe : variable = chaine.substring (x,y)
Exemple 18.7 :
84
Version 1.0
x = "maman" ; y = x.substring(1,3) ; document.write(y) ; Rsultat
18.3.7.Substr ()
Cette mthode renvoie le texte une sous-chane de la String de la mthode, partir du dbut et sur n caractres.. Syntaxe : variable = chaine1.substr(dbut, n)
Exemple 18.8 : y = "lepape@le-vatican.com"; document.write(y.substr(5,2)) ; Rsultat
18.3.8.Slice ()
Equivalent substring(). La fin est facultative. Syntaxe : variable = chaine.slice(dbut, fin)
Exemple 18.9 : y = "lepape@le-vatican.com"; document.write(y.slice(7)) ; Rsultat
18.3.9.Split ()
Cette mthode renvoie un tableau de sous-chanes dcoupes selon le sparateur pass en paramtres. Syntaxe : variable = chaine.split(sparateur)
Exemple 18.10 :
Version 1.0
x = "lepape@le-vatican.com" ; y = x.split("@") ; document.write(y[0] + "<br>" + y[1]) ; Rsultat
18.3.10.Concat ()
Cette mthode renvoie la concatnation de la chane passe en paramtre avec celle de la mthode. Syntaxe : variable = chaine1.concat(chaine2)
Exemple 18.11 : x = "Ecrivez-moi " ; y = "lepape@le-vatican.com"; z = x.concat(y) ; document.write(z) ; Rsultat
18.3.11.ToLowerCase ()
Cette mthode renvoie la chane avec tous les caractres en minuscules Syntaxe : variable = chaine.toLowerCase()
Exemple 18.12 : x = "MAMAN" ; y = x.toLowerCase() ; document.write(y) ; Rsultat
18.3.12.ToUpperCase ()
Cette mthode renvoie la chane avec tous les caractres en majuscules
86
Version 1.0
Syntaxe :
variable = chaine.toUpperCase()
87
Version 1.0
Exemple 18.13 : x = "Maman" ; y = x.toUpperCase() ; document.write(y) ; Rsultat
18.3.13.FontColor ()
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <font color=couleur></font>. Syntaxe : variable = chaine1.fontColor(couleur)
Exemple 18.14 : y = "lepape@le-vatican.com"; document.write(y.fontColor("blue")) ; document.write(y.fontColor("red")) ; Rsultat
18.3.14.FontSize ()
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <font size=taille></font>. Syntaxe : variable = chaine1.fontSize(taille)
Exemple 18.15 : y = "lepape@le-vatican.com"; document.write(y.fontSize("16")) ; document.write(y.fontSize("8")) ; Rsultat
18.3.15.Fixed ()
88
Version 1.0
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <pre></pre>. Syntaxe : variable = chaine1.fixed()
Exemple 18.16 : y = "lepape@le-vatican.com"; document.write(y.fixed()) ; Rsultat
18.3.16.Bold ()
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <b></b>. Syntaxe : variable = chaine1.bold()
Exemple 18.17 : y = "lepape@le-vatican.com"; document.write(y.bold()) ; Rsultat
18.3.17.Strike ()
Cette mthode renvoie le texte de lobjet barr. Syntaxe : variable = chaine1.strike()
Exemple 18.18 : y = "lepape@le-vatican.com"; document.write(y.strike()) ; Rsultat
18.3.18.Sub ()
89
Version 1.0
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <sub></sub>. Syntaxe : variable = chaine1.sub()
Exemple 18.19 : y = "lepape@le-vatican.com"; document.write(y.sub()) ; Rsultat
18.3.19.Big ()
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <big></big>. Syntaxe : variable = chaine1.big()
Exemple 18.20 : y = "lepape@le-vatican.com"; document.write(y.big()) ; Rsultat
18.3.20.Sup ()
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <sup></sup>. Syntaxe : variable = chaine.sup()
Exemple 18.21 : y = "lepape@le-vatican.com"; document.write(y.sup()) ; Rsultat
90
Version 1.0
18.3.21.Blink ()
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <blink></blink>. Ne fonctionne que sous Netscape Syntaxe : variable = chaine.blink()
Exemple 18.22 : y = "lepape@le-vatican.com"; document.write(y.blink()) ; Rsultat
18.2.22.Small ()
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <small></small>. Syntaxe : variable = chaine.small()
Exemple 18.23 : y = "lepape@le-vatican.com"; document.write(y.small()) ; Rsultat
18.3.23.Italics ()
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <i></i>. Syntaxe : variable = chaine.italics()
Exemple 18.24 : y = "lepape@le-vatican.com"; document.write(y.italics()) ; Rsultat

Version 1.0
18.3.24.Link ()
Cette mthode renvoie le texte de lobjet en y ajoutant les balises <a href=URL ></a>. Syntaxe : variable = chaine1.link(URL)
Exemple 18.25 : y = "lepape@le-vatican.com"; document.write(y.link("http://www.google.fr")) ; Rsultat
18.3.25.Anchor ()
Cette mthode cre un ancre,et renvoie le texte de lobjet en y ajoutant les balises <a name=ancre ></a>. Syntaxe : variable = chaine1.anchor(ancre)
Exemple 18.26 : y = "lepape@le-vatican.com" document.write(y.anchor("ancre")) ; Rsultat
18.4.Manipulations sur les chanes

La manipulation des chanes demande certaines connaissances syntaxiques. Ces dernires ont dj t prcises dans le chapitre Structures de donnes, mais elles doivent tre dtailles. Elles concernent laffectation, la concatnation, et les caractres spciaux.
18.4.1.Affectation
92
Version 1.0
Les chanes de caractres se prsentent sous deux formes. Elles sont soient encadres de quotes , soient encadres de guillemets " ". On affecte les chanes leur variables comme toute variable. Exemple 18.27 : x = "Maman" ; y = Maman ; Dans lexemple 12.8, les chanes x et y sont quivalentes. Elles contiennent la mme donne.
18.4.2.Concatnation
Il est possible dajouter des chanes de les mettre la suite lune de lautre grce loprateur + . Exemple 18.28 : x = "Maman" ; y = Papa ; z = x + " " + y ; document.write (z); Rsultat Dans les fonctions, comme la mthode write(), il est possible dajouter ces chanes laide de loprateur + ou , . Exemple 18.29 : x = "Maman" ; y = Papa ; document.write (x + " " + y); document.write (x , " " , y); Rsultat
93
Version 1.0
18.4.3.Caractres spciaux
Certains caractres permettent de faire un effet dans laffichage, dautres doivent tre prcds du caractre \ . Ils sont rpertoris dans le tableau suivant. Caractre \b \f \n \r \t \" \' \\ Affichage touche de suppression formulaire plein retour la ligne appui sur la touche ENTREE tabulation guillemets apostrophes caractre antislash Tab. 12.1 : Caractres spciaux Les autres caractres spciaux si on peut les appeler ainsi sont les balises HTML. En effet, celles-ci peuvent tre insres dans les chanes de caractre, et seront interprtes comme des balises par le navigateur lors de lcriture avec la mthode document.write(). Exemple 18.30 : x = "Maman" ; y = Papa ; document.write (x + "<br>" + y); Rsultat
18.5.Exercice
Dans cet exercice, vous devez crer un formulaire avec un bouton et une zone de texte. Linternaute entre une srie de mots spars par des espaces. Ensuite, on rcupre ces mots, et on les spare par des virgules. Enfin, on les affiche lcran avec document.write(). Solution
94
Version 1.0
19.LOBJET DATE
19.1.Gnralits
La date et lheure sont regroupes en JS dans la classe Date. On cr alors une variable Date grce au constructeur. Syntaxe : variable =new Date()
La date et lheure en JS ne commencent qu partir du 1 er janvier 1970, 0h 0min 0s. Toute rfrence une date antrieure donnera un rsultat alatoire. Je ne mets pas dexemple chaque mthode, je ferai un exemple gnral et concret la fin du chapitre.
19.2.Les mthodes
19.2.1.Get
Une fois notre variable Date cre, il faut lui donner les informations sur la date et lheure actuelle. Les fonctions suivantes remplissent la variable qui est une chane Date avec les donnes courantes. Elles utilisent toutes la mme syntaxe, ce sont des mthodes objet. Syntaxe : variable1 =new Date() variable2 = variable1.getInfo();

getYear() : Retourne les 2 derniers chiffres de lanne. Il faudra donc rajouter le prfixe "20". getFullYear() : Retourne la date sur 4 chiffres. getMonth() : Retourne le mois sous la forme dun entier compris entre 0 et 11. getDate() : Retourne le jour du mois sous forme dun entier compris entre 1 et 31. getDay() : Retourne le jour de la semaine sous forme dun entier compris entre 0 et 6. getHours() : Retourne lheure sous forme dun entier compris entre 0 et 23. getMinutes() : Retourne les minutes sous forme dun entier compris entre 0 et 59. getSeconds() : Retourne les secondes sous forme dun entier compris entre 0 et 59. getMilliseconds() : retourne les millisecondes de la date. A ne pas confondre avec getTime().
95
Version 1.0
19.2.2.Set
Il est aussi possible de remplir la variable Date avec nos propres donnes. Les fonctions suivantes remplissent la variable qui est une chane Date avec les donnes que vous voulez. Elles utilisent toujours la mme syntaxe, ce sont des mthodes objet. Syntaxe : variable1 = new Date() variable2 = variable1.setInfo();

setYear() : Assigne les 2 derniers chiffres de lanne, sous forme dun entier suprieur 1900. setYear() : Assigne lanne sur 4 chiffres. setMonth() : Assigne le mois sous la forme dun entier compris entre 0 et 11. setDate() : Assigne le jour du mois sous forme dun entier compris entre 1 et 31. setDay() : Assigne le jour de la semaine sous forme dun entier compris entre 0 et 6. setHours() : Assigne lheure sous forme dun entier compris entre 0 et 23. setMinutes() : Assigne les minutes sous forme dun entier compris entre 0 et 59. setSeconds() : Assigne les secondes sous forme dun entier compris entre 0 et 59. setMilliseconds() : assigne les millisecondes de la date. A ne pas confondre avec setTime().
19.2.3.Lheure
Lheure est trs utile en JS, elle possde donc plusieurs mthode utiles. La syntaxe est toujours la mme. Syntaxe : variable1 =new Date() variable2 = variable1.mthode();
96
Version 1.0
getTime() : Renvoie lheure courante sous forme dun entier reprsentant le nombre de millisecondes depuis le 1er janvier 1970 00h 00min 00s. getTimezoneOffset() : Renvoie la diffrence entre lheure locale et lheure GMT sous forme dun entier en minutes. setTime() : Assigne lheure courante sous forme dun entier reprsentant le nombre de millisecondes depuis le 1er janvier 1970 00h 00min 00s. toGMTString() : Renvoie la valeur actuelle de la variable Date en heure GMT. toLocaleString() : Renvoie la valeur actuelle de lheure de la variable Date. Cest plus rapide que de combiner getHours(), getMinutes(), et getSeconds().
Le but de cet exemple est dafficher une horloge dans une ligne de texte. Pour cela, on utilise la mthode window.setTimeout(), qui rappelle la fonction daffichage toute les secondes. Exemple 19.1 :
<HTML> <HEAD> <script language="Javascript"> function GetTime () { //la fonction que lon doit appeler var time = new Date (); // objet Date() var hours = time.getHours(); //on rcupre les heures var min = time.getMinutes(); //on rcupre les minutes var sec = time.getSeconds(); //on rcupre les secondes if (hours < 10) hours = "0" + hours; //on rajoute un 0 if (min < 10) min = "0" + min; //si le chiffre est if (sec < 10) sec = "0" + sec; //infrieur 10 // affichage de lheure dans une zone de texte document.time.heure.value = hours + ":" + min + ":" + sec; window.setTimeout('GetTime()',1000); /* le timer rappelle la fonction toutes les secondes */ } </script> </HEAD> <BODY onLoad="GetTime();"> <form name="time"> Voici l'heure :  <center><input type="text" name="heure" value="" size=6></center> </form> </BODY>
</HTML> Rsultat
97
Version 1.0
19.4.Exercice
19.4.1.Nombre de jours
Le but de lexercice est de calculer le nombre de jours couls depuis lan 2000. Solution
19.4.2.Heure GMT
Cet exercice consiste donner lheure GMT de deux faons diffrentes. Solution
98
Version 1.0
20.LOBJET IMAGE
20.1.Rappel HTML
Il semble utile de rappeler que la balise <img> possde de nombreux attributs dont certains quil est conseill de dclarer en Javascript. Ci-dessous, la liste de ces attributs.

src : URL, souvent relative, de limage. name : nom de limage dans la page, trs important en JS. width : largeur de limage affiche. height : hauteur de limage affiche. align : alignement de limage par rapport au texte.
Il est important de rajouter quune image peut servir dancre pour un lien hypertexte, cest--dire tre place entre les balises <a href></a>. Cela permet certaines astuces daffichage.
20.2.Lobjet
La classe Image correspond la balise HTML <img>. Son emploi est assez difficile et ce cours ne dcrira pas en dtail toutes ses facettes. Il permet de manipuler les images de faon dynamique, ce qui est impossible avec le HTML. On rappellera que les images sont stockes dans le tableau images[] de lobjet document. Grce un objet Image, on peut prcharger une image et la stocker en cache, contrairement au HTML. Limage ne sera cependant pas affiche. Elle le sera laide de la balise <img>. Un objet Image est appel selon la syntaxe objet habituelle, avec le constructeur Image(). Lobjet possde alors les proprits de la balise HTML <img>, dont la liste figure dans 20.3.Les proprits.
20.3.Les proprits
20.3.1.Syntaxe
Un objet Image possde plusieurs proprits, que lon peut assimiler aux attributs de la balise <img>. Syntaxe : variable = new Image(); variable.proprit = x ; var2 = variable.proprit ;
99
Version 1.0
20.3.2.Src
Il sagit de lURL absolue ou relative le limage. Elle peut tre modifie. Cela permet de charger en cache limage lors du chargement de la page. Exemple 20.1 : <img src="0.gif" name="image1" onMouseOver="document.image1.src='2.gif';" onMouseOut="document.image1.src='0.gif';"> Rsultat
20.3.3.Name
Cest le nom dfini par lattribut name="" de la balise <img>. A ne pas confondre avec lID. Permet de trouver limage dans le tableau document.images[]. Exemple 20.2 : <img src="0.gif" name="image1" onMouseOver="alert('Adresse de l\'image : ' + document.images['image1'].src);"> Rsultat
20.3.4.Id
Cest lID dfini par lattribut id="" de la balise <img>. A ne pas confondre avec le nom. Permet de retrouver limage grce la mthode document.getElementById(). Exemple 20.3 : <img src="0.gif" name="image1" onMouseOver="alert('Adresse de l\'image : ' + document.getElementById('image1').src);"> Rsultat
20.3.5.Width
Il sagit de la largeur de limage. Elle contient la valeur de lattribut width de la balise <img>. Si cet attribut nest pas prcis, elle contient la largeur relle de limage. Ne peut tre modifie.
Version 1.0
Exemple 20.4 : <img src="0.gif" name="image1" onMouseOver="alert('Largeur de l\'image : ' + document.getElementById('image1').width);"> Rsultat
20.3.6.Height
Il sagit de la hauteur de limage. Elle contient la valeur de lattribut height de la balise <img>. Si cet attribut nest pas prcis, elle contient la hauteur relle de limage. Ne peut tre modifie. Exemple 20.5 : <img src="0.gif" name="image1" onMouseOver="alert('Hauteur de l\'image : ' + document.getElementById('image1').height);"> Rsultat
20.3.7.Complete
Cest un boolen qui indique si le chargement de limage est termin. Renvoie true si le chargement est achev et false dans le cas contraire. Exemple 20.6 : <img src="0.gif" name="image1" onMouseOver="alert(chargement complt ? ' + document.getElementById('image1').complete);"> Rsultat
20.3.8.Alt
Elle contient le texte qui affich avant la chargement de limage et en info-bulle lorsquelle est survole. Contient la valeur de lattribut alt="" de la balise <img>. Ne peut tre modifie.
101
Version 1.0
Exemple 20.7 : <img src="0.gif" name="image1" alt="Image" onMouseOut="alert(alt : ' + document.getElementById('image1').alt);"> Rsultat
20.3.9.FileSize
Elle contient la taille en octets de limage. Nest accessible que lorsque le chargement est termin, do lutilit de la proprit complete. Exemple 20.8 : <img src="0.gif" name="image1" alt="Image" onMouseOver="alert(Octets : ' + document.getElementById('image1').fileSize);"> Rsultat
20.4.Afficher une image

Il suffit de prendre llment <img> voulu dans la page et de changer sa proprit. Cet lment est assimil un objet Image, faisant partie de lobjet document. Exemple 20.9 : document.image1.src = img2.jpg ;
Dans ce cas prcis, limage change et img2.jpg est affich dans le champ image1. Lintrt de crer un objet Image reste donc discutable, puisquon ne lutilise pas Lobjet image permet de stocker limage en cache au moment du chargement de la page. Il ne reste plus qu trouver le moyen de lafficher De plus, on peut crer un tableau dobjets Image, ce qui nous facilitera les manipulations ensuite.
102
Version 1.0
Exemple 20.10 :
<html> <head> <script language="Javascript"> var tab = new Array (4) ; //tableau for (i = 0; i < 4; i++) {//remplissage dimages tab[i] = new Image(); tab[i].src = i + ".gif"; } function f() { //fonction daffichage for (i = 0; i < 4; i++) { document.images[i].src = tab[i].src ; } } </script> </head> <body> <img name="img0"><br/> <img name="img1"><br/> <img name="img2"><br/> <img name="img3"><br/> <input type="button" name="click" value="Afficher images" onClick="f();"> <!appel des laffichage--> </body> </html>
les
Rsultat Lexemple 14.3 permet de charger 5 images et des les afficher dans 5 balises <img> diffrentes grce au tableau images[].
20.5.Exemple concret : cliquer pour changer dimage

Ici, le but est de crer une page avec une image et un bouton. Lorsque lon clique sur le bouton, limage change. On a au total 4 images diffrentes. On utilise un tableau dobjets Image, une balise <img>, une balise <input>, et une fonction. Lorsque les 4 images ont dfil, on recommence la premire. Pour cela, on utilise un compteur.
103
Version 1.0
Exemple 20.11 :
<HTML> <HEAD> <TITLE>New Document</TITLE> <script language="Javascript"> //cration d'un tableau de 4 lments var tab_images = new Array(4); for (i = 0; i < tab_images.length; i++) { // pour chaque lment tab_images[i] = new Image(); /*on cre un objet Image et on lui donne un fichier charger */ tab_images[i].src = i + ".gif"; } var nb = 0; //on initialise un compteur function changer() { // la fonction qui sera appele. nb++; //incrmenter le compteur if (nb == tab_images.length) { //si on est 4 nb = 0; //on remet 0 le compteur } //affichage de l'image window.document.image.src = tab_images[nb].src; } </script> </HEAD>  <BODY onload="changer();"> <img src="" name="image"><br> <input type="button" name="bouton" value="cliquez" onClick="changer();">  </BODY> </HTML>
Rsultat
20.6.Exercice
Ici, le but est aussi de crer une page avec une image. Lorsque passe la souris sur limage, limage change. Quand on ressort de limage, limage de base revient. 4 images diffrentes safficheront en un cycle. Solution
104
Version 1.0
21.LA PROGRAMMATION MULTI-CADRES15

21.1.Rappel HTML
Les frames sont un lment du langage HTML. Il sagit du partage de la fentre en plusieurs cadres o lon pourra afficher diffrentes pages HTML. Les frames se dclarent dans le fichier principal avec la balise <frameset> suivie de plusieurs balises <frame>. Il ny a alors pas de balise <body> dans la page principale. Pour plus de prcisions, consulter un cour HTML.
21.2.Gnralits
Les frames ne sont pas trs utilises en JS, mais il est important de savoir quelques dtails en cas dutilisation de frames au niveau HTML. Il est important, lorsque le JS est utilis, de prciser le nom de la frame dans la balise <frame>. Exemple 21.1 : <frame src="fichier.htm" name="cadre1"> Ce nom ne parat pas trs utile en HTML, mais il prend toute son importance en JS. Il sera utilis dans deux cas : la cible des liens ainsi que pour accder un lment dune autre frame de la page.
21.3.Liens hypertexte
Lorsque de lutilisation des frames, il peut savrer utile dafficher une page dans une frame diffrente de celle o se trouve le lien. Cest l o intervient lattribut target de la balise <a href>. Il permet dindiquer la frame o lon veut que la page appele saffiche. Syntaxe : <a href="lien" target=frame>texte</a> La rfrence indique dans lattribut target peut tre de deux types. Dans un premier cas, il sagit du nom de la frame dclare dans la page principale, cas o il faut savoir ce nom. Sinon, si on fait rfrence au cadre parent, on indiquera _parent , et si on fait rfrence la fentre complte, on indiquera _top .
15
Par programmation multi-cadres, jentend la programmation avec frames. 105
Version 1.0
Exemple 21.2 : <a href="lien1.htm" target=frame1>cliquez ici</a> <a href="lien2.htm" target=_parent>ou ici</a>
21.4.Accs aux lments des frames

Lorsque de lutilisation des frames, il est souvent ncessaire en JS daccder aux lments des autres frames. Lobjet window que nous avons vu prcdemment nous fournit de quoi le faire. Il contient lobjet parent, qui possde les mmes proprits que lui.
21.4.1.Lobjet frames[]
La premire faon daccder aux lments dune autre frame se fait bien sr par le tableau frames[] proprit de parent dont le numro des frames est attribu dans lordre de dclaration de celles-ci. On accde ensuite chaque lment de la frame ainsi qu ses proprits et mthodes. Syntaxe : parent.frames[i].objet.proprit parent.frames[i].objet.mthode() Exemple 21.3 : Parent.frames[1].form1.action = "get"; Exemple 21.4 : parent.frames[1].form1.button1.value = "Click"; Dans lexemple 20.4, on accde la valeur du bouton appel Button1 du formulaire nomm form1 .
21.4.2.Le nom de la frame

Lautre faon daccder aux lments dune frame est dutiliser son nom. Ce sera alors un objet de parent. Il faut donc prendre soin donner un nom aux frames lors de leur
106
Version 1.0
dclaration. On accde ensuite chaque lment de la frame ainsi qu ses proprits et mthodes. Syntaxe : parent.nom.objet.proprit parent.nom.objet.mthode() Exemple 21.5 : parent.frame1.form1.action = "get"; Exemple 21.6 : parent.frame1.form1.button1.value = "Click";
Lexemple 21.7 permet de faire un compteur de secondes impair sur une frame et pair sur lautre. Exemple 21.7 : Exemple 21.7.1.htm
<HTML> <HEAD> <TITLE>New Document</TITLE> <script language="Javascript"> </script> </HEAD> <body> <form name="form1"> <center><input type="text" name="out1" value="00:00:00"></center> </form> </body> </HTML>
Exemple 21.7.2.htm
<HTML> <HEAD> <TITLE>New Document</TITLE> <script language="Javascript"> </script> </HEAD> <body> <form name="form2">
107
Le Javascript en 25 leons <center><input value="00:00:00"></center> </form> </body> </HTML> type="text"
Version 1.0 name="out2"
Exemple 21.7.htm
<HTML> <HEAD> <TITLE>New Document</TITLE> <script language="Javascript"> var sec = 0; var min = 0; var hrs = 0; var test = 1; function f() { sec++; if (sec == 60) { sec = 0; min++; } if (min == 60) { min = 0; hrs++; } h = hrs; m = min; s = sec; if (h < 10) h = "0" + h; if (m < 10) m = "0" + m; if (s < 10) s = "0" + s; if (test == 1) { parent.frame1.form1.out1.value = h + ":" + m + ":" + s; test = 2; } else if (test == 2) { parent.frame2.form2.out2.value = h + ":" + m + ":" + s; test = 1; } window.setTimeout('f();',1000); } </script> </HEAD> <frameset cols="50%,50%" onLoad="f();"> <frame src="exemple 21.7.1.htm" name="frame1"> <frame src="exemple 21.7.2.htm" name="frame2"> </frameset> </HTML>
Rsultat
21.6.Exercice
Votre exercice comporte 2 frames, avec chacune un bouton. Chaque clic sur un bouton incrmente la valeur de lautre bouton.
108
Version 1.0
Solution
109
Version 1.0
22.LES COOKIES
22.1.Prsentation
En JS, il est possible de travailler avec les cookies. Etant donn labsence de gestion dcriture/lecture de fichier, les cookies sont le seul moyen de stocker des informations permanentes sur la machine de lutilisateur. Ces dernires pourront tre rcupres plus tard et rutilises. Cela permet de compter le nombre de visites de linternaute, de crer une liste de prfrence de navigation sur le site, de conserver le login et le password afin de se connecter directement un compte Les applications des cookies sont nombreuses. Le seul risque de cette mthode est la suppression ou le refus des cookies par lutilisateur16. Le cookie en lui-mme se prsente sous la forme dune chane de caractre qui contient des informations concatnes : linformation que lon veut conserver, la date dexpiration, lauteur path -, le nom de domaine, la scurisation.
22.2.Crer un cookie
On cre un cookie avec lobjet cookie de lobjet document. Il sagit dune chane de caractre dans laquelle on indique les informations que lon veut. Syntaxe : document.cookie = "informations"
Dans les informations, il y a tout dabord la chane que lon souhaite conserver. Ensuite, on met la date dexpiration, le path, le nome de domaine, et si besoin la fait que le cookie soit protg. Seuls les deux premiers champs sont obligatoires. Syntaxe : document.cookie = "variable = contenu ; expires = date ; path = nom ; domain = domaine ; secure = true/false" ; Il semble utile de dcrire chaque champ indiqu ci-dessus. Si la chane est mal crite, le cookie ne sera pas utilisable, et deviendra par consquent inutile.
16
Cette option est disponible dans les menus de votre navigateur. Pour Internet explorer, ce la se situe dans le menu Outils | Options Internet , onglet Scurit, dans la rubrique Personnaliser le niveau. 23/06/2004 Professor Maddy 110
Version 1.0
Le champ information : il sagit de ce que vous voulez stocker dans le cookie. Il faut dfinir un nom la variable et lui affecter une valeur, un contenu. Comme on peut le voir ci-dessus, les champs sont spars par des points-virgule, il ne faut donc pas insrer des ; dans le contenu. expires : contient la date dexpiration, laquelle le cookie sera dtruit. La valeur est en secondes. Le plus simple consiste utiliser un objet Date. path : le chemin de la page qui a cr le cookie. domain : le domaine de la page qui a cr le cookie. secure : boolen qui indique si le cookie doit utiliser le protocole HTTP (false) ou le protocole scuris HTTPS (true).
Exemple 22.1 : document.cookie = "visite=1; expires=31/12/2004; path=le-vatican.com/index.php; secure=true"; Dans lexemple 9.1, il sagit dun cookie cr par lepape, qui expire le 31/12/2004, auquel on peut accder uniquement par un change scuris, et qui compte le nombre de visites.
22.3.Rcuprer un cookie
La rcupration dun cookie est plus complexe, mais elle est essentielle, car sinon le cookie est inutile. Le but est de trouver le type dinformation que lon cherche, et ensuite de lire la valeur. La matrise de la classe String est obligatoire pour ce genre dexercice. Cette partie explique pas pas la manire pour rcuprer un cookie. On commence par mettre tous les cookies dans une variable. Syntaxe : variable = document.cookie ;
Ensuite, on cherche le nom de la variable dans la chane du cookie. Ensuite, on rcupre ce qui est situ entre le signe = et le ; . Cela semble simple, mais il faut utiliser les mthode des objets String et utiliser des instructions logiques. Ci-dessous, lexemple 9.2 montre en dtail comment rcuprer un cookie.
111
Version 1.0
Exemple 22.2 :
//cration du cookie document.cookie = "visite=1;expires=31/12/2004"; //variable trouver var variable_a_trouver = "visite" ; //on rajoute le signe = variable_a_trouver = variable_a_trouver + "=" ; //on rcupre le cookie var chaine = document.cookie ; var longueur = variable_a_trouver.length ; //on rcupre la longueur trouver var resultat ; //si le cookie nest pas vide, on commence chercher. if (chaine.lenght > 0) { //on cherche la position du dbut de la variable var debut = chaine.indexOf(chaine_a_trouver,0); //si on a trouv cette position, on continue if (debut >=0) { var fin ; /* on rajoute la longueur de la variable, pour arriver au dbut du contenu */ debut = debut + longueur ; //on cherche la fin du contenu, cest--dire le premier ; fin = chaine.indexOf(";", debut) ; //si on trouve la position du point-virgule if (fin>=0) { //on rcupre la chaine situe entre le = et le ; resultat = unescape(chaine.substring(debut,fin) ; } // si il ny a pas de ;, cest que cest la fin de la chane else { /* on rcupre la chaine situe aprs le = la fin de la chane */ resultat = unescape(chaine.substring(debut,chaine.length) ; } } }
Cet exemple nest quune manire parmi dautres. On peut imaginer quantits de faons, mais celle-ci est srement la plus simple. Cela peut dailleurs constituer une exercice.
22.4.Modifier un cookie
Modifier un cookie est aussi simple que de le crer. En ralit, il suffit de le recrer avec un contenu diffrent et une date actualise.
112
Version 1.0
22.5.Supprimer un cookie
Pour supprimer un cookie, il faut tout simplement le recrer, avec la mme valeur pour viter de se compliquer les choses, et lui donner une date dexpiration passe. Sinon, il suffit dattendre sa date dexpiration, ce qui nest pas toujours satisfaisant.
113
Version 1.0
23.LA PROGRAMMATION OBJET

23.1.Prsentation
Bien que le Javascript ne soit pas un langage orient objet, il donne la possibilit de crer ses propres objets. Ce chapitre sadresse des programmeurs possdant un niveau correct17 car la programmation objet est un point assez difficile. Les programmeurs C++ seront tonns de voir que les classes JS sont trs simplifies compares celles du C++. Elles ne demandent pas une dfinition complte de la classe, mais il suffit de dclarer la fonction constructeur.
23.2.Dclaration dune classe

Contrairement au C++ - qui demande une dclaration dtaille dclarer une classe en JS se fait simplement en dclarant la fonction constructeur de classe. On dclare lintrieur les proprits laide de lobjet this. On retrouve lobjet this dcouvert prcdemment. Comme on la vu, il dsigne lobjet en cours. Syntaxe : function nom_classe ( paramtres ) { this.proprit = paramtre1 ; }
On dclare lobjet avec la syntaxe habituelle et le mot-cl new. Le nome de la classe est en gnral le type dobjet avec une majuscule. Exemple 23.1 : function Eleve (Age,Sexe,Ville) { this.age = Age ; this.sexe = Sexe ; this.ville = Ville ; } var Laurent = new Eleve(17,M,Grenoble) ;
17
Il convient de prciser que ce terme nest en aucun cas pjoratif. Il signifie simplement quil est ncessaire de bien matriser tous les chapitres prcdent avant de se lance dans la programmation objet. 23/06/2004 Professor Maddy 114
Version 1.0
23.3.Utilisation de mthodes
Il est bien entendu possible de dclarer et utiliser des mthodes. Pour cela, il faut dclarer une fonction indpendante de la classe. Ensuite, on dclare la fonction lintrieur du constructeur, en laffectant une mthode. Il faut faire attention lors de cette dclaration, car il ne faut pas mettre les parenthses des fonctions 18 ! Syntaxe : function nom_classe () { this.mthode = fonction ; }
Exemple 23.2 : function Eleve (Nom,Age) { this.age = Age ; this.nom = Nom ; this.affich = affich_infos; } function affich_infos () { document.write (this.nom + " a " + this.age + " ans."); } var Laurent = new Eleve(17, Laurent) ; Laurent.affich() ; Rsultat Il est possible de simplifier lcriture lorsquil y a beaucoup de proprits, grce lutilisation de with (objet) { }. Cela ne fonctionne qu lintrieur des mthodes, et non dans le constructeur.
18
Mme si cela semble contradictoire, ceci est important. On ne peut faire des galits de fonctions. 115
Version 1.0
Exemple 23.3 : function Eleve (Nom,Age) { age = Age ; nom = Nom ; affich = affich_infos; } function affich_infos () { with (this) { document.write (nom + " a " + age + " ans."); } } var Laurent = new Eleve(17, Laurent) ; Laurent.affich() ; Rsultat
23.4. Exercice
Dans cet exercice, le but est de demander 3 informations lutilisateur (nom, age, ville) laide dune boite de dialogue. On regroupe ces informations laide dun objet dune classe cre auparavant puis on utilise une mthode pour laffichage dans une zone de texte. Solution
116
Version 1.0
24.LES EXPRESSION REGULIERES

24.1.Prsentation
Ce chapitre sadresse des programmeurs avertis, qui voudront btir un site dynamique dun aspect assez volu. Les expressions rgulires sont assez compliques comprendre, et leur utilisation demande une connaissance sans failles de lobjet String.
24.2.Dfinition
Les expressions rgulires existent dans la plupart des langages de programmation, mais sont peu connues du fait de leur complexit. Elles permettent de raliser des traitements sur les chanes de caractres. Ces traitements sont de lordre de la recherche de caractres, de lextraction de sous-chanes beaucoup dautres traitements existent quil revient vous dimaginer et de crer. En ralit, une expression rgulire possde un motif, qui est une suite de caractres ordonns selon un ordre, un nombre dapparitions, une nonapparition Une expression rgulire est avant tout un objet RegExp. Comme tout objet, il se dclare ainsi : Syntaxe : var reg = RegExp (pattern, option);
Comme vous lavez srement remarqu, pour la premire fois, il faut fournir des paramtres au constructeur. Ces paramtres concernent lexpression rgulire que vous utilisez. Le pattern est le motif de lexpression. Loption est une chane de caractres, qui comme son nom lindique contient les options de lexpression rgulire. Nous allons voir leur constitution ci-aprs. Il existe aussi une autre faon de dclarer une expression rgulire. Elle est moins utilise et surtout moins claire. Syntaxe : var reg = /pattern/option;
Les deux notations sont absolument quivalentes mais la premire est plus explicite, donc conseille.
117
Version 1.0
24.3.Paramtres dune expression rgulire

Les exemples sont regroups dans le 24.3.3.Exemples car ils se doivent de contenir les deux paramtres.
24.3.1.Loption
La chane option peut prendre 4 valeurs. La premire est la chane vide "", qui signifie labsence doption. Les 3 autres valeurs sont dtailles ci-dessous.

"g" : la recherche est globale sur toute la chane -. "i" : ne pas tenir compte de casse majuscules/minuscules- . "gi" : les deux options runies
24.3.2.Le pattern
Cette partie est la plus dlicate. Le pattern est assez complexe et sa comprhension peut tre difficile. Il faut savoir que le pattern correspond aux caractres que vous cherchez pour une raison ou une autre dans une chane. La chane pattern est extensible linfini. Le choix de ce quelle contient vous appartient. Il sagit du motif de la chane, cest--dire des caractres que vous choisirez dinclure ou dexclure de votre recherche. Cette chane pattern contient des caractres spciaux concatns. Ces caractres spciaux concernent le motif lui-mme, le caractre rechercher, le nombre doccurrences, le groupe de caractres cherch Leur liste se trouve dans le Tab.24.1.
118
Version 1.0
Motif
Signification Dbut du pattern de la chane. Fin du pattern. Interdit tout caractre aprs. Nimporte quel caractre. Caractre a OU b. Caractre prcdent prsent 0 x fois. Caractre prcdent prsent 1 x fois. Caractre prcdent prsent 0 1 fois. Caractre prcdent prsent x fois. Caractre prcdent prsent au moins x fois. Caractre prcdent prsent au entre x et y fois. Groupe de caractres : nimporte lequel contenu entre les crochets. Nimporte quel caractre alphabtique. Aucun caractres alphabtique. Caractre \ . Tous les chiffres quivalent de [0-9] - . Aucun chiffre quivalent de [^0-9] -. Limites des mots (espace, tab, ). Tous les caractres despacements quivalent de [\v\r\n\t\f] -. Aucun caractre despacements quivalent de [^\v\r\n\t\f] -. Tous les caractres alphanumriques dont _ quivalent de [A-Za-z0-9_] -. Aucun caractre alphanumrique quivalent de [^A-Za-z0-9_] -.
^ $ . a|b * + ? {x} {x,} {x,y} [abc] [a-z] [^a-z] \\ \d \D \b \s \S \w \W
Tab.24.1 : Motifs des expressions rgulires. Les diffrents motifs ne sont pas spars. On les mets les uns la suite des autres, sans espacements. Il est prciser que lon peut trs bien mettre une variable ou un mot entre guillemets - sans mise en forme avec ^ $ - comme argument pattern.
119
Version 1.0
24.3.3.Exemples
Voici diffrents exemples de dclaration dobjet RegExp. Ces exemples ne sont pas trs complexes, ils donnent simplement une ide de la construction des motifs. Le pattern est plus dtaill que les options qui ne sont pas trs importantes. Chaque exemple est comment, pour bien comprendre le but du motif. Exemple 24.1 : var exp = new RegExp("^[A-Za-z0-9]{4,}$","i") ; Lexemple 24.1 prsente la recherche dune chane de au moins 4 caractres alphanumriques. [A-Za-z0-9] dsigne les caractres alphanumriques, et {4,} dsigne 4 fois ou plus. Les caractres sont au chois majuscules ou minuscules. Exemple 24.2 : var exp = /^[A-Za-z0-9]{4,}$/i ; Lexemple 24.2 est quivalent lexemple 24.1, mais il utilise lautre notation. Exemple 24.3 : var exp = new RegExp (^[A-Za-z0-9]+[A-Za-z0-9\.\-_]*@[AZa-z0-9\-_]+\.[A-Za-z0-9\.\-_]{1,}$,); Lexemple 24.2 prsente la vrification dune adresse e-mail. Elle doit commencer par au moins un caractre alphanumrique : [A-Za-z0-9]+ . Ensuite elle peut comporter autant de caractres alphanumriques que lon veut, plus le point, le tiret et lunderscore : [A-Za-z0-9\.\-_]*. Tout cela doit tre suivi dun @ : @. Ensuite, il peut y avoir nimporte quel nombre de caractres alphanumriques, plus le point, le tiret et lunderscore : [A-Za-z0-9\-_]+. Cela doit tre suivi dun point : \. . Ce dernier doit tre suivi dau moins deux caractres alphanumriques dont le point et le tiret : [A-Za-z0-9\.\-_]{1,} . Il ny a aucune option. Ces exemples ne traitent que de la cration de lobjet RegExp. Ce dernier est bien entendu inutile si on ne lutilise pas ensuite. Cest le sujet de la partie suivante.
120
Version 1.0
24.4.Utilisation dune expression rgulire

24.4.1.Les mthode de lobjet RegExp
Il existe trois mthodes de lobjet RegExp : test(), exec() et compile(). Elles sutilisent selon la syntaxe objet habituelle. La premire prend en paramtre la chane tester selon le motif de lexpression rgulire. Elle renvoie un boolen qui indique si la chane correspond au motif ou non. La deuxime mthode prend aussi la chane tester en paramtre. Elle renvoie un tableau des occurrences du motif tester. La dernire permet de modifier le motif de lexpression rgulire, sans en crer un nouveau. Exemple 24.3 : adresse = prompt ("Votre mail ?","mail@fai.com") ; var exp = new RegExp (^[A-Za-z0-9]+[A-Za-z0-9\.\-_]*@[AZa-z0-9\-_]+\.[A-Za-z0-9\.\-_]{1,}$,); document.write ( exp.test(adresse) ); Lexemple 24.3 propose de tester la correction de votre mail. On retrouve le motif de lexemple 24.2. La mthode test() est applique ladresse e-mail. Le reste vous est ou devrait vous tre familier.
24.4.2.Les mthode de lobjet String

Les mthodes de lobjet String vont aussi aider la manipulation des expressions rgulires. Nous introduirons ici 3 nouvelles mthodes de lobjet String19. A ces trois mthodes, nous rajouterons la plupart des mthodes String.

search() : trouver les occurrences rpondant aux critres du motif. replace () : trouver remplacer les occurrences rpondant aux critres du motif. match() : trouver les occurrences rpondant aux critres du motif.
Ces trois mthodes prennent en paramtre un objet RegExp. Voici la syntaxe correspondante ci-aprs. Syntaxe :
var reg = RegExp (pattern, option); chane.mthode(reg);
Il est noter que la mthode split() possde une syntaxe similaire. De plus, il est possible dindiquer simplement le motif, avec la notation peu utilise des slash, comme paramtre.
19
Elles nont pas t introduites prcdemment du fait de leur inutilit en dehors des expressions rgulires. 121
Version 1.0
Syntaxe :
chane.mthode(/pattern/option);
Les mthodes split() et match() renvoient chacune un tableau de toutes les occurrences trouves. Exemple 24.4 : var nom = prompt('Votre nom?\nMettez les accents','nom') ; nom = nom.replace (/[]/g,"e") ; nom = nom.replace (/[]/g,"a") ; nom = nom.replace (/[]/g,"u") ; nom = nom.replace (/[]/g,"o") ; nom = nom.replace (/[]/g,"i") ; alert(nom) ; Rsultat Lexemple 24.4 propose de supprimer les accents dune chane. On remplace tout simplement les lettres accentues par la lettre sans accent.
Ci-dessous est propos un exemple dans lequel vous entrez une suite de mots spars par des caractres de ponctuation. En cliquant sur un bouton, la liste de tous les noms est affiche. De plus, deux mthodes sont proposes. Cet exemple vous montre aussi comment intgrer le traitement au code avec une fonction.
122
Version 1.0
Exemple 24.5 :
<HTML> <HEAD> <TITLE>New Document</TITLE> <script language="Javascript"> function TraitBySplit() { var chaine = document.form1.input.value; //rcupration de la chaine var exp = new RegExp ('[.,;:/!? ]',"g"); //motif avec la ponctuation tab = chaine.split(exp); //sparation de la chaine var result = "Voici les noms :"; //affichage for (i = 0 ; i < tab.length ; i++) { result = result + "\n" + tab[i] ; } document.form1.output.value = result; } function TraitByMatch() { var chaine = document.form1.input.value;//rcupration de la chaine //motif avec les lettres var exp = new RegExp ('[A-Za-z]+',"g"); tab = chaine.match(exp); //sparation de la chaine var result = "Voici les noms :"; //affichage for (i = 0 ; i < tab.length ; i++) { result = result + "\n" + tab[i] ; } document.form1.output.value = result; } </script> </HEAD> <BODY> <center> <form name="form1"> <textarea name="input" rows=5 cols=50>Entrez une suite de noms spars indiffremment par les signes de ponctuation .,;:/!? et espace</textarea><br/> <input type="button" name="match" value="Avec match()" onClick="TraitByMatch();"> <input type="button" name="split" value="Avec split()" onClick="TraitBySplit();"><br/> <textarea name="output" rows=5 cols=50>Rsultat</textarea><br/> </form> </center> </BODY> </HTML>
Rsultat
24.6.Exercice
Faites un formulaire avec 3 lignes de texte et un bouton. Dans les lignes de texte, linternaute entre son adresse, code postal et ville. En cliquant sur le bouton, on teste leur validit. Solution
123
Version 1.0
25.FONCTIONS ET PROPRITS
25.1.Prsentation
Ce chapitre prsente un peu tardivement les fonctions intgres au langage, et ne dpendant daucun objet. On verra aussi les mthodes et proprits que lon peut associer tous les objets. Ce chapitre arrive jen conviens un peu tard, car javais omis ce sujet dans mon plan. Je le rajoute donc ici.
25.2.Les fonctions du langage

25.2.1.Escape()
Cette fonction encode les caractres spciaux dune chane, selon le code %xx, et retourne cette chane encode. Syntaxe : chaine1 = escape (chaine2) Exemple 25.1 : var chaine = "Voici des caractres spciaux !" ; document.write( escape(chaine) ) ; Rsultat
25.2.2.Unescape()
Cette fonction dcode les caractres spciaux cod par escape(), et retourne cette chane encode. Syntaxe : chaine1 = escape (chaine2) Exemple 25.2 : var chaine = "Voici des caractres spciaux !" ; var chaine2 = escape(chaine) ; document.write( unescape(chaine2) ) ;
124
Version 1.0
Rsultat
25.2.3.ParseFloat ()
Cette fonction convertit une chane passe en paramtre en nombre dcimal. Renvoie NaN si la conversion est impossible. Syntaxe : decimal = parseFloat (chaine) Exemple 25.3 : var chaine = "Voici des caractres spciaux !" ; var chaine2 = "35.7" ; document.write( parseFloat(chaine) + "<br/>" ) ; document.write( parseFloat(chaine2) ) ; Rsultat
25.2.4.ParseInt ()
Cette fonction convertit une chane passe en paramtre en nombre entier. Renvoie NaN si la conversion est impossible. Le paramtre facultatif base permet de faire une conversion en une autre base que dcimale. Syntaxe : decimal = parseInt (chaine, base) Exemple 25.4 : var chaine = "35.7" ; document.write( parseInt(chaine) + "<br/>" ) ; document.write( parseInt(chaine, 8) ) ; Rsultat
25.2.5.IsFinite ()
Cette fonction renvoie true si le nombre est fini, sinon, elle renvoie false.
125
Version 1.0
Syntaxe : booleen = isFinite (nombre) Exemple 25.5 : var chaine = "35.7" ; var chaine2 = "Math"; document.write( isFinite(chaine) + "<br/>") ; document.write( isFinite(chaine2) ) ; Rsultat
25.2.6.IsNaN ()
Cette fonction renvoie true si la chane nest pas un nombre, sinon, elle renvoie false. Syntaxe : booleen = isNaN (chaine) Exemple 25.6 : var chaine = "35.7" ; var chaine2 = "Math"; document.write( isNaN(chaine) + "<br/>") ; document.write( isNaN(chaine2) ) ; Rsultat
25.3.Mthodes et proprits des objets

Les objets de Javascript ou que vous avez crs possdent deux proprits et deux mthodes en commun. Elles permettent de manipuler ces objets et de connatre certaines de leur caractristiques.
25.3.1.Prototype
Cette proprit permet de rajouter une proprit ou une mthode un objet dj existant, que vous avez cr ou qui existe dans JS. On lutilise selon la syntaxe suivante : Syntaxe : classe.prototype.nom = valeur ;
Version 1.0
Lexemple 25.7 rajoute une proprit et une mthode lobjet Array.
127
Version 1.0
Exemple 25.7 :
var tab = new Array(5); for (i = 0; i < 5; i++) tab[i] = i+1; Array.prototype.comment = null; // on rajoute un commentaire tab.comment = "Tableau de 5 chiffres"; function FirstElement () { /* fonction retournant le premier lment */ return this[0]; } Array.prototype.firstElement = FirstElement; document.write (tab.comment + " : premier lment : " + tab.firstElement());
Rsultat
25.3.2.Constructor
Cette proprit renvoie le constructeur de lobjet. Syntaxe : variable = objet.constructor ; Exemple 25.8 :
var tab = new Array(5); var s = "string"; var d = new Date () var e = new RegExp(); document.write ("Constructeur document.write ("Constructeur document.write ("Constructeur document.write ("Constructeur
Array : " + tab.constructor + "<br/>"); String : " + s.constructor + "<br/>"); Date : " + d.constructor + "<br/>"); RegExp : " + e.constructor + "<br/>");
Rsultat
25.3.3.ValueOf()
Cette mthode renvoie tout simplement la valeur de lobjet. Syntaxe : variable = objet.valueOf ;
128
Version 1.0
Exemple 25.9 :
var tab = new Array(5); for (i = 0; i < 5; i++) tab[i] = i + 1; var s = "string"; document.write ("Valeur du Tableau : " + tab.valueOf() + "<br/>"); document.write ("Valeur de la Chane : " + s.valueOf() + "<br/>");
Rsultat
25.3.4.ToString()
Cette mthode retourne la description de lobjet. Syntaxe : variable = objet.toString ; Exemple 25.9 :
var tab = new Array(5); for (i = 0; i < 5; i++) tab[i] = i + 1; var s = "string"; document.write ("Description du Tableau : " + tab.toString() + "<br/>"); document.write ("Description de la Chane : " + s.toString() + "<br/>");
Rsultat
25.4.Exercice
Dans cet exercice, vous devez rajouter 3 mthodes la classe String. La premire renverra une chane avec la valeur et le constructeur. La seconde renverra la chane code. Et la dernire renverra le dernier caractre de la chane. Solution
129
Version 1.0
CONCLUSION
Et voil ce cours est dj termin ! Jespre quil vous a plu et quil vous a apport ce que vous souhaitiez. Jattends avec impatience vos commentaires. Nhsitez pas critiquer mon travail. Pour ceux qui ont dcouvert le Javascript, jespre que ce langage vous a conquis et que vous lutiliserez lavenir. Noubliez pas quil peut savrer utile, mme en dehors de la programmation Internet. Merci encore et bonne programmation. Pour ceux qui souhaitent me joindre, allez voir la rubrique suivante.
130
Version 1.0
AUTEUR
DESCRIPTION
Pour ceux que a intresse, voici un petit descriptif de ma personne. Je mappelle Michal, jai 17ans, je vis prs de Grenoble. Je suis en 1 re S, et je vais passer en Terminale. Jai dcouvert la programmation lan dernier grce mon professeur de ISI 20 - je le remercie, dailleurs - et depuis, je ne peux plus men passer. Je programme en HTML/Javascript bien sr, mais aussi en PHP et en C++.
COORDONNEES
Pour ceux qui souhaitent me joindre, mon adresse e-mail est banzaichico@yahoo.fr. Si certains veulent me parler par lintermdiaire de MSN Messenger, mon contact est banzaichico@hotmail.com. Voil.
20
Initiation aux Sciences de lIngnieur. 131
Version 1.0
REMERCIEMENTS
Je remercie tous mes amis qui mont aid progresser en programmation, notamment Arnaud et Dimitri. Je remercie Philippe et M.Allardin pour mavoir donn got ce passe-temps. Je remercie tous les sites que jai consults pour apprendre le Javascript, dont www.commentcamarche.com, www.toutjavascript.com, et tant dautres. Je remercie mon bon vieux Pentium II et ses 450MHz qui mon permis de raliser la plus grande partie de ce cours. Mille mercis Aiwa, pour avoir construit la chane Hi-Fi qui maccompagne. Merci aussi aux Red Hot Chili Peppers qui ont raliss les chansons qui mont accompagnes tout au long de ce cours. Merci Microsoft, pour le nombre de redmarrage suite un plantage de Windows. Merci ES-Computing pour avoir cr EditPlus2, logiciel qui ma permis de faire tous les exemples de ce cours.
132

Cours Javascript

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cours Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

Le Javascript en 25 leons -

LE JAVASCRIPT - en 25 chapitres par Professor Maddy

23/06/2004 Professor Maddy

3.LES STRUCTURES DE DONNEES

6. LES STRUCTURES DE CONTROLE

7. LES BOITES DE MESSAGE

23/06/2004 Professor Maddy

10. LES EVENEMENTS

11. LOBJET ARRAY

12.LES OBJETS DU NAVIGATEUR

23/06/2004 Professor Maddy

16.LES OBJET DU NOYAU JAVASCRIPT

21.LA PROGRAMMATION MULTI-CADRES

98 98 98 99 100 101 102 102 103 104 105

23/06/2004 Professor Maddy

23.LA PROGRAMMATION OBJET

24.LES EXPRESSION REGULIERES

23/06/2004 Professor Maddy

23/06/2004 Professor Maddy

23/06/2004 Professor Maddy

23/06/2004 Professor Maddy

<script language = "Javascript"> var mavariable = 12 ; document.write (typeof(mavariable)) ; </script>

<script src = "date.js"> </script>

23/06/2004 Professor Maddy

23/06/2004 Professor Maddy

3.LES STRUCTURES DE DONNEES

23/06/2004 Professor Maddy

3.2.2.La dclaration et laffectation

De faon explicite, avec le mot-cl var .

23/06/2004 Professor Maddy

3.2.3.Les noms rservs

Tab. 3.1 : Noms rservs

3.2.4.Manipulations sur les chanes de caractres

23/06/2004 Professor Maddy

3.2.5.Variables globales et variables locales

23/06/2004 Professor Maddy

4.1.Les oprateurs de calcul

Tab 4.1 : oprateurs de calcul

4.2.Les oprateurs de comparaison

Voir pour cela le chapitre 6.STRUCTURES DE CONTROLE 15

23/06/2004 Professor Maddy

4.3.Les oprateurs associatifs

4.4.Les oprateurs logiques

4.5.Les oprateurs d'incrmentation

Tab 4.5 : oprateurs dincrmentation

Il sagit dun OU non exclusif, pour les puristes. 16

23/06/2004 Professor Maddy

5.3.Les fonctions dans len-tte

5.4.L'appel d'une fonction

23/06/2004 Professor Maddy

5.5.Fonctions manipulant des valeurs

5.5.2.Retourner une valeur

23/06/2004 Professor Maddy

NB : Le mot-cl return est facultatif.

5.6.Variables locales et variables globales

23/06/2004 Professor Maddy

6. LES STRUCTURES DE CONTROLE

6.2.La structure squentielle

6.3.Les instructions conditionnelles

Tab. 6.1 : Expression conditionnelle ifelse Exemple 6.1 :

Algorithme SI condition ALORS Instructions1 SINON Instructions2 FINSI

Code JS (condition) ? instruction 1 : instruction 2

23/06/2004 Professor Maddy

6.4.Les instructions itratives