8/13/2019 JavaScript_essential.pdf
1/280
Christian Wenz LE GUIDE DE SURVIE
JavaScriptLESSENTIEL DU CODE ET DES COMMANDES
8/13/2019 JavaScript_essential.pdf
2/280
JavaScript
Christian Wenz
8/13/2019 JavaScript_essential.pdf
3/280
CampusPress a apport le plus grand soin la ralisation de ce livre afin de vous
fournir une information complte et fiable. Cependant, CampusPress nassume de
responsabilits, ni pour son utilisation, ni pour les contrefaons de brevets ouatteintes aux droits de tierces personnes qui pourraient rsulter de cette utilisation.
Les exemples ou les programmes prsents dans cet ouvrage sont fournis pour illus-
trer les descriptions thoriques. Ils ne sont en aucun cas destins une utilisation
commerciale ou professionnelle.
CampusPress ne pourra en aucun cas tre tenu pour responsable des prjudices ou
dommages de quelque nature que ce soit pouvant rsulter de lutilisation deces exemples ou programmes.
Tous les noms de produits ou autres marques cits dans ce livre sont des marques
dposes par leurs propritaires respectifs.
All rights reserved. No part of this book may be reproduced or transmitted in any
form or by any means, electronic or mechanical, including photocopying,recording or by any information storage retrieval system, without permission from
Pearson Education, Inc.
Aucune reprsentation ou reproduction, mme partielle, autre que celles prvues
larticle L. 122-5 2 et 3 a) du code de la proprit intellectuelle ne peut tre
faite sans lautorisation expresse de Pearson Education France ou, le cas chant,
sans le respect des modalits prvues larticle L. 122-10 dudit code.
Publi par CampusPress
47 bis, rue des Vinaigriers
75010 PARISTl : 01 72 74 90 00
Ralisation PAO : La B
Auteur : Christian Wenz
CampusPress est une marque
de Pearson Education France
Tous droits rservs
Titre original :JavaScriptPhrasebook
Traduit de lamricain par :
Nathalie Le Guillou de Penanros
ISBN original : 0-672-32880-1
Copyright 2007 by Sams Publishing
www.samspublishing.com
Tous droits rservs
Sams Publishing
800 East 96th,
Indianapolis, Indiana 46240 USA
ISBN : 978-2-7440-4003-0
Copyright 2009
8/13/2019 JavaScript_essential.pdf
4/280
Table des matires
Introduction 1
1 Les bases de JavaScript 5
Comprhension de JavaScript (et de son histoire) 5
Etablissement d'un systme de test 7
Configuration de navigateurs Web 10Inclusion du code JavaScript 11
Utilisation de fichier(s) JavaScript externe(s) 12
Chargement dynamique de fichiers JavaScript 13
Pseudo-URL dans JavaScript 14
Excution de JavaScript avecdes gestionnaires d'vnements 16
Navigateurs sans JavaScript 17
2 Expressions communes 21
Dtection du type de navigateur 22
Vrification des capacits
du navigateur 25Empcher la mise en cache 26
Redirection du navigateur 26
Rechargement de la page 27
Cration d'un nombre alatoire 28
8/13/2019 JavaScript_essential.pdf
5/280
8/13/2019 JavaScript_essential.pdf
6/280
VTable des matires
5 DOM et DHTML 69
DOM 69
DHTML 71
Accs des lments spcifiques 72
Accs aux balises 73
Dtermination des informations de nud 75
Suppression d'lments 77
Ajout d'lments 78
Cration d'lments de texte 81
Travail avec les attributs 82
Clonage d'lments 83
Remplacement d'lments 85
Cration d'une liste puces partirde donnes JavaScript 86
Cration d'un tableau partir de donnes JavaScript 87
Modifications de fragments HTML 89
Positionnement des lments 90
Dplacement d'lments 92
Cration d'une navigation toujours apparente 94
Cration d'une publicit contextuelle en Flash 96
6 Programmation oriente objet et vnements 99
Cration d'une classe 100
Accs aux membres des classes 100
Hritage de classes 103Extension d'objets JavaScript intgrs 106
Raction aux vnements JavaScript 107
Evnements de clavier 110
Envoi d'un formulaire avec la touche Entre 111
Evnements de souris 113
8/13/2019 JavaScript_essential.pdf
7/280
VI JavaScript
7 Les cookies 117
Les cookies 118
Paramtrage des cookies 120
Lecture des cookies 121
Etablissement d'une date d'expiration 124
Autres options de cookies 125
Suppression de cookies 126
Vrification de la prise en charge des cookies 127
Enregistrement de plusieurs informationsdans un cookie 129
8 Les formulaires 131
Formulaires HTML avec JavaScript 132Accs aux champs de texte 133
Accs aux cases cocher 135
Accs des boutons radio 136
Accs des listes de slection 137
Accs une liste choix multiple 139
Dsactivation des lments de formulaire 142Envoi d'un formulaire 145
Empcher l'envoi 145
Eviter les envois rpts de formulaires 146
Donner le focus un champ 149
Slection de texte dans un champ 149
Vider les champs de texte en cas de clic 152Validation des champs de texte 153
Validation de cases cocher 155
Validation de boutons radio 155
Validation des listes de slection 157
8/13/2019 JavaScript_essential.pdf
8/280
VIITable des matires
Validation automatique d'un formulaire 159
Implmentation de la navigation avec une listede slection 163
Implmentation d'une navigation hirarchiqueavec une liste de slection 164
Dslection d'un ensemble de boutons radio 167
Cration de listes de slection de date prremplies 167
Cration de listes de slection de date de validation 169
9 Fentres et cadres 173
Options de fentres 174
Ouverture d'une fentre modale 177
Dtermination de la taille de l'cran 179
Dtermination de la taille de la fentre 180
Redimensionnement d'une fentre 182
Repositionnement d'une fentre 183
Ouverture d'une fentre contextuelle centre 184
Ouverture d'une fentre en plein cran 186
Ouverture d'une nouvelle fentre dans un coin de l'cran 186
Cration d'une carte de site 188
Fermeture d'une fentre 189
Vrification de la prsence d'un systmede blocage des fentres contextuelles 190
Vrification de la prsence d'un systmede blocage des fentres 191
Modification du contenu de deux cadresen mme temps 194
Utilisation des cadres intgrs 197
8/13/2019 JavaScript_essential.pdf
9/280
VIII JavaScript
10 Services Web 199
Cration d'un service Web avec PHP 202
Cration d'un service Web avec ASP.NET 204
Appel d'un service Web partir d'Internet Explorer 205
Appel d'un service Web partir d'unnavigateur Mozilla 208
Appel d'un service Web ASP.NET partir
d'un navigateur Mozilla 211
11 AJAX et sujets annexes 213
Initialisation d'une application AJAX 215
Envoi d'une requte GET 217
Envoi d'une requte POST 219
Envoi d'une requte synchrone 220
Rception de donnes multiples du serveur 222
Interruption d'une requte HTTP 224
Rcupration d'en-ttes HTTP 225
Rception de XML en provenance du serveur 226
Utilisation de JSON pour la (d)srialisationde donnes 231
Cration d'un cran d'attente 232
Rsolution du problme de signet 235
Rsolution du problme du bouton Prcdent 236
XSLT 238
Utilisation d'une bibliothque XML 241
Utilisation du service Web Yahoo! 244
8/13/2019 JavaScript_essential.pdf
10/280
IXTable des matires
12 Mdias intgrs 249
Accs aux mdias intgrs 249
Vrification des modules complmentaires dynamiques 250
Gestion des versions rcentes d'Internet Explorer 252
Accs au contenu multimdia 254
Accs au contenu Java 255
Accs au contenu Flash 257
Index 259
8/13/2019 JavaScript_essential.pdf
11/280
A propos de l'auteurChristian Wenz est un orateur professionnel, auteur,
formateur et consultant, spcialis dans les technologies
du Web. Il a rdig ou a particip l'criture de plus de
quarante ouvrages. Il collabore rgulirement des maga-
zines d'informatique rputs et participe des confrences
dans le monde entier. Christian Wenz a contribu l'la-
boration de plusieurs paquetages PHP dans le dpt
PEAR et assure par ailleurs la maintenance d'un module
Perl CPAN. Il a obtenu un diplme d'informatique
l'universit technique de Munich, en Allemagne, o il vit
et travaille actuellement. C'est galement le premier pro-
fessionnel europen avoir obtenu la certification Zend et
le principal fondateur du Consortium sur la scurit PHP.
8/13/2019 JavaScript_essential.pdf
12/280
Introduction
En 1999, j'ai crit un livre sur JavaScript. Au tout dbut,
il s'est trs bien vendu, puis les ventes ont commenc
diminuer. Elles se sont pourtant suffisamment stabilises
pour parvenir la septime dition cet automne, mme si
un lger dclin se faisait toujours sentir.
Tout a considrablement chang la fin de l'anne der-
nire : les ventes ont soudain remont, tout comme celles
des autres titres du mme segment. Cette volution tient
en partie AJAX. La technologie en elle-mme n'est pasnouvelle mais le terme l'est. En fvrier 2005, Jesse James
Garrett tablit l'acronyme ; depuis lors, le monde du Web
semble comme pris de folie. Et mme s'il est possible
d'expliquer AJAX en deux minutes, il faut une bonne
connaissance des divers aspects de JavaScript pour le com-
prendre. Cela explique la demande croissante d'informa-
tions pousses sur JavaScript et a aussi men l'criture de
ce Guide de survie JavaScript.
Lorsque nous avons cr la srie d'ouvrages en 2005, nous
c'est--dire Damon Jordan, Mark Taber et moi-mme,
nous voulions crer une sorte de version adapte des lexi-
ques de langue : ici, les phrases et les expressions commu-
nes sont traduites dans une langue trangre, le JavaScript.Mais la diffrence des lexiques ordinaires, cet ouvrage
propose galement des explications sur le code. Sans cela,
vous risqueriez fort de vous trouver dans des situations
embarrassantes, quelle que soit la langue.
8/13/2019 JavaScript_essential.pdf
13/280
2 Introduction
Cet ouvrage n'est pas une introduction JavaScript. Les
fonctions lmentaires y sont traites mais nous avons
tent de mettre l'accent sur des informations de niveau
intermdiaire avanc. L'ide est que, notamment si vos
connaissances de JavaScript sont un peu rouilles, vous
puissiez trouver les principaux problmes et leurs solu-
tions dans cet ouvrage. Il vous servira donc de rfrence
pour surmonter rapidement les problmes que vous ren-
contrez lors du dveloppement. N'hsitez pas le parcou-rir pour dcouvrir des fonctions JavaScript auxquelles vous
n'auriez peut-tre pas pens auparavant.
Ce livre n'est pas non plus un livre de recettes prsentant
des solutions interminables et inflexibles des problmes
sans importance. Notre objectif tait de limiter autant que
possible les extraits de code pour une approche pratique.
Cela vous permet d'adapter la technique prsente vos
propres applications et un scnario spcifique. Pour y
parvenir, nous ne prsentons que les lments de code
essentiels l'exemple. Le code est gnralement constitu
d'lments et de quelques autres balises HTML
pour lier le tout. Une application Web moderne doit au
moins tre compatible avec le XHTML, mais ce n'est pasl'objet de notre ouvrage.
Nous avons pris grand soin ce que le code fonctionne
sur autant de navigateurs que possible. Et mme si Inter-
net Explorer et diverses moutures de Mozilla (y compris
Firefox) dominent le march, Opera, Safari et Konqueror
y ont aussi leur place. Ainsi, mme si l'accent est mis sur
les deux premiers types de navigateurs, nous prciserons
les incompatibilits ou les problmes existant avec des
navigateurs moins importants. Et en ce qui concerne les
parts de march, seuls les navigateurs toujours actuels
seront traits ; ainsi, nous ne ferons jamais mention des
versions 4 de Netscape ou d'Internet Explorer.
8/13/2019 JavaScript_essential.pdf
14/280
3Introduction
Les squences de code de ce titre ainsi que les mises jour se
trouvent sur le site http://JavaScript.phrasebook.org/.
Un nom est associ la plupart des listings, pour que vous
puissiez rapidement retrouver les fichiers correspondant
chaque extrait. Si vous souhaitez nous faire part de vos
commentaires ou si vous rencontrez une erreur, fai-
tes-nous le savoir ! Si une expression que vous souhaitiez
trouver n'est pas mentionne, n'hsitez pas nous contac-
ter. Dites-nous si vous pensez des lments qui pour-raient apparatre dans les prochaines ditions de cet
ouvrage, mais vous pouvez galement nous faire part de
celles qui vous semblent superflues. La liste des expres-
sions potentielles tait bien plus longue que ce que nous
avons conserv, nous avons donc d passer par une phase
pnible qui a consist sacrifier du contenu ; nous esp-
rons que le rsultat vous satisfera.
Christian Wenz
8/13/2019 JavaScript_essential.pdf
15/280
8/13/2019 JavaScript_essential.pdf
16/280
1Les bases de
JavaScript
Ce chapitre traite de certaines bases concernant JavaScript.Il ne s'intresse pas explicitement la syntaxe du langage,
un aspect abord dans suffisamment de didacticiels et
d'ouvrages et qui n'entre pas dans l'objectif de cet ouvrage.
Toutefois, nous expliquerons en dtail des aspects essen-
tiels comme l'insertion de code JavaScript dans une page.
Nous ferons galement un peu d'histoire et relaterons les
faits de guerre des navigateurs pour vous prparer au cha-
pitre suivant.
Comprhension de JavaScript(et de son histoire)JavaScript est un langage de script ct client, ce qui signi-
fie qu'il s'excute ct client, dans un navigateur Web.
JavaScript peut aussi tre employ ct serveur et en
dehors d'un navigateur, mais ce n'est pas l'objet de cet
ouvrage. Si le navigateur est compatible, JavaScript donne
8/13/2019 JavaScript_essential.pdf
17/280
6 CHAPITRE 1 Les bases de JavaScript
accs la page en cours et permet au script de dterminer
les proprits du client, de rediriger l'utilisateur vers une
autre page, d'accder aux cookies, etc.
JavaScript nat en septembre 1995, paralllement la sor-
tie de la version 2.0 du navigateur Netscape, la premire
tre dote du langage de script. A cette poque, le langage
s'appelle Mocha puis, sa sortie, LiveScript ; Netscape
conclut ensuite un accord marketing avec Sun (le crateur
de Java) et dcide de renommer le langage en dcembrede cette anne, il devient JavaScript.
Le concept connat immdiatement du succs : Microsoft
en intgre une prise en charge dans Internet Explorer ver-
sions 3 et suivantes (au milieu de l'anne 1996). Pour des
raisons lgales, une mouture de Microsoft du langage est
alors appele JScript. JScript tait plus ou moins compati-ble avec JavaScript mais a commenc inclure des fonc-
tions supplmentaires, spcifiques Internet Explorer (ce
qui, quelques exceptions prs, ne s'est jamais vrita-
blement install).
En 1997, est publie la norme ECMAScript (ECMA-262) ;
JavaScript en est donc la premire implmentation. La
norme ne prcise que le langage et non les fonctions des
htes environnants (par exemple, comment accder la
fentre courante du navigateur ou en ouvrir une nou-
velle). ECMAScript devient norme ISO en 1998.
Aux alentours de 1997 ou 1998, la guerre des naviga-
teurs entre Netscape et Microsoft atteint son apoge, les
deux fournisseurs ajoutant une nouvelle fonctionnalitincompatible la version 5 de leurs navigateurs. Le reste
n'est qu'histoire : Netscape abandonne l'ide de publier
une version 5 du navigateur et dcide de tout recom-
mencer avec Netscape 6 ; Internet Explorer peut ainsi
augmenter ses parts de march, passant plus de 90 %.
8/13/2019 JavaScript_essential.pdf
18/280
7Etablissement d'un systme de test
Il a d'ailleurs fallu plusieurs annes au projet Mozilla,
alors en cours de cration, pour revenir la vie. A noter
que le navigateur Firefox est fond sur Mozilla et com-
mence alors gagner des parts de march sur Microsoft.
Du point de vue de JavaScript, peu de choses ont volu
au cours de ces dernires annes. Firefox 1.5, sorti fin
2005, prend en charge la nouvelle version JavaScript 1.6,
mais les modifications sont assez limites et Internet
Explorer est loin de les prendre en charge. Mais avecInternet Explorer 7 et Firefox 2.0 bientt paratre (et
dj disponibles en version test), l'poque est intressante
pour les dveloppeurs Web.
D'autres navigateurs prennent en charge JavaScript. Les
diffrences sont subtiles mais peuvent parfois tre trs
embarrassantes lors du dveloppement avec une applica-tion Web indiffrente aux navigateurs. Parmi les naviga-
teurs qui acceptent actuellement JavaScript, on trouve :
b Internet Explorer ;
b Mozilla et ses drivs (Firefox, Epiphany, Camino,
Galeon, etc.) ;
b Opera ;
b Konqueror ;
b Safari.
Etablissement d'un systme de testNous venons de le mentionner, plusieurs navigateurs
acceptent JavaScript. Il faut gnralement assurer une
prise en charge pour la plupart d'entre eux. Ainsi, par
exemple, le site Web http://marketshare.hitslink.co/
report.apsx?qprid=3montre qu'en mars 2006, Internet
8/13/2019 JavaScript_essential.pdf
19/280
8 CHAPITRE 1 Les bases de JavaScript
Explorer et Firefox ensemble comptaient pour prs de
95 % de la part de march des navigateurs, suivis par Safari
(un peu plus de 3 %). Les navigateurs Netscape dtenaient
environ 1 % et Opera 0,5 %, peu prs la mme chose que
tous les autres navigateurs runis (y compris Konqueror).
Quelle est donc la meilleure stratgie pour tester un site
Web sur un maximum de systmes, avec le moins d'efforts
possible ?
En fait, tout dpend du public auquel s'adresse votre site
Web. Si vous ciblez principalement des utilisateurs de
Mac, vous devrez procder un test important sur le
navigateur Safari, puisqu'il est livr par dfaut avec les ver-
sions rcentes de Mac OS X.
Quel que soit le type de site Web utilis, Internet Explo-
rer bnficie toujours d'une trs forte part de march,mme sur des sites Web plutt centrs sur l'open source.
Pour le test, il vous faut donc Internet Explorer et un
systme Windows (ou au moins un lment du style
Virtual PC ou VMware, avec une machine virtuelle Win-
dows). Tous les navigateurs Mozilla partagent la mme
base de code pour le rendu et pour JavaScript, peu
importe donc la plate-forme que vous utilisez (mme s'il
existe des diffrences minimes). Vous pourriez, par exem-
ple, utiliser Firefox sur la machine Windows sur laquelle
rside galement votre installation Internet Explorer.
Opera s'excute aussi sous Windows (et quelques autres
systmes, notamment Linux et Mac), la part de Windows
comprend donc un navigateur de plus.
Les deux seuls grands navigateurs restants sont Safari
et Konqueror, ce dernier tant le navigateur par dfaut
pour l'utilisation du gestionnaire de fentres KDE.
8/13/2019 JavaScript_essential.pdf
20/280
9Etablissement d'un systme de test
Par chance, tous deux partagent plus ou moins la mme
base de code : Safari utilise le moteur KHTML, au cur
du rendu de Konqueror. Deux options sont alors possibles :
b tablir une bote Linux (ou une machine virtuelle
Linux) avec KDE et Konqueror ;
b tablir un systme Mac (ou acheter un Mac Intel avec
BootCamp pour avoir un double dmarrage sous
Windows et OS X).
Vous devriez ainsi obtenir un bon systme pour commen-
cer le test. Plus le site Web grandit, plus grand sera le
nombre des systmes cible que vous devrez prendre en
charge ; partir d'un certain point, vous n'aurez pas
d'autre choix que d'installer et de tester tous les naviga-
teurs que vous souhaitez utiliser.
En ce qui concerne Internet Explorer, la version 6 est la
principale, la version 5.x a presque disparu et les ver-
sions 4 et antrieures n'existent plus depuis longtemps. Le
test sous IE 6 convient donc la plupart du temps. Disposer
de versions diffrentes est bien entendu assez souhaitable
mais ncessite gnralement un systme Windows pour
chacun d'entre eux, Windows ne pouvant tre installqu'une fois sur un systme.
Une solution a t dcouverte par accident, pour l'installa-
tion parallle de plusieurs versions d'IE. Vous en trouverez
la description originale l'adresse http://labs.insert-title
.com/labs/Multiple-IEs-in-Windows_article795.aspx
et de plus amples informations l'adresse http://www
.positioniserything.net/articles/multiIE.html.
Enfin, testez votre site Web lorsque JavaScript est activ et
dsactiv dans les navigateurs.
8/13/2019 JavaScript_essential.pdf
21/280
10 CHAPITRE 1 Les bases de JavaScript
Configuration de navigateurs
WebPar dfaut, la plupart des navigateurs Web activs pour
JavaScript prennent en charge ce langage. D'ailleurs, la
toute premire version de Netscape accepter JavaScript
ne disposait mme pas d'une fonction pour le dsactiver !
Il est toutefois possible de le dsactiver, vous devez donctrouver comment simuler cette situation (et comment
demander aux utilisateurs de l'activer). Cela dpend non
seulement des navigateurs utiliss mais parfois aussi de la
version du navigateur. Dans le navigateur Firefox 1.5,
JavaScript peut tre activ dans le menu Outils, Options,
Contenu, Activer JavaScript. Sous Internet Explorer 6,
vous devez creuser un peu plus. Cliquez sur Outils,Options Internet, Scurit, zone Internet, Personnaliser le
niveau, Script, Active Scripting, Activer.
Astuce
Internet Explorer versions 6.0 et 7.0 (sous Windows XP, 2003
et Vista uniquement) possde une fonction de scurit quiempche l'excution de JavaScript sur les pages locales (voir laFigure 1.1). Cela est en fait assez utile mais peut se rvlerennuyeux lorsque vous testez une application. Il existe deuxcontournements : utilisez un serveur Web local pour testervotre application ou dsactivez simplement le messaged'erreur en choisissant Outils, Options Internet, Avanc,
Scurit, Autoriser le contenu actif s'excuter dans lesfichiers de la zone Ordinateur local.
8/13/2019 JavaScript_essential.pdf
22/280
11Inclusion du code JavaScript
Inclusion du code JavaScript
Le code JavaScript peut se prsenter de deux manires :
intgr dans une page HTML ou intgr dans un fichier
externe. La manire la plus frquente de l'inclure consiste utiliser les lments . Vous pouvez le placer
n'importe o, il est alors excut aprs que cette partie de
la page HTML a t charge et analyse. Le code qui pr-
cde (ficher script.htmldans l'archive tlcharger) ouvre
une fentre modale et affiche un texte plutt simple.
L'attribut type prvoit le type MIME pour JavaScript.Prcdemment, on utilisait language="JavaScript"; tou-
tefois, puisque ce n'tait pas standardis, il vaut mieux uti-
liser typeet le type MIME la place. Dans cet ouvrage,
nous suivons la mthode adopte par de nombreux sites
Web de nos jours : on utilise la fois typeet language.
Figure 1.1 : Message d'erreur assez ennuyeux avec JavaScriptsur les pages locales.
window.alert("Welcome to JavaScript!");
8/13/2019 JavaScript_essential.pdf
23/280
12 CHAPITRE 1 Les bases de JavaScript
De mme, par le pass, il tait possible de cibler un script
sur un numro de version spcifique de JavaScript,
comme ceci :
window.alert("Only with JavaScript 1.6 !");
Ce n'est quasiment plus usit. L'implmentation de cette
fonction gnre un certain nombre de bogues dans les
navigateurs, et il existe de meilleures manires de tester lescapacits JavaScript d'un navigateur.
Info
Dans certains anciens didacticiels, vous trouverez des conseilspour utiliser les commentaires HTML prsents de la faon sui-
vante :
Cela servait auparavant grer les navigateurs qui ne savaientrien de JavaScript. Or, mme ceux qui n'acceptent pas Java-Script connaissent l'lment et savent l'ignorer (lui et
son contenu). Ces commentaires HTML ne sont donc plusncessaires.
Utilisation de fichier(s)JavaScript externe(s)
Il est trs pratique d'utiliser un fichier JavaScript externe
(ou plusieurs), notamment lorsque vous rutilisez du
code JavaScript dans votre site Web. Il ne contient que le
8/13/2019 JavaScript_essential.pdf
24/280
13Chargement dynamique de fichiers JavaScript
code JavaScript et pas d'lments . Un lment
est toutefois utilis pour le charger, comme on
le voit dans le listing prcdent (fichier scriptsrc.html).
L'attribut src contient l'URL du script externe ; les
URL absolues (et donc les serveurs distants) sont ga-
lement possibles.
Attention
Sachez que le code du fichier externe n'est disponible qu'aprsle chargement complet du fichier externe. Ainsi, notammentlorsque vous appelez cette fonctionnalit du fichier externe partir de la page locale, n'oubliez pas que le fichier externerisque de ne pas tre encore disponible.
Chargement dynamiquede fichiers JavaScript
Il est parfois ncessaire de charger du code JavaScript lademande, alors mme qu'un site s'excute. Par exemple,
selon ce que saisit l'utilisateur, il faudra peut-tre charger
un fichier JavaScript externe.
Une manire consiste utiliser document.write() pour
ajouter dynamiquement un nouvel lment la
page, mais cela ne fonctionne pas avec certains navigateurs
et n'est donc pas recommand. Une bien meilleure solution
consiste utiliser DOM (voir Chapitre 5). Vous crez
d'abord un nouvel lment et dfinissez les attri-
buts appropris. Vous ajoutez ensuite cet lment au DOM
de la page. Le code est gnralement plac dans la section
. Le listing suivant montre l'ensemble du code ;
var s = document.createElement("script");
8/13/2019 JavaScript_essential.pdf
25/280
14 CHAPITRE 1 Les bases de JavaScript
notez qu'il y a un lment pour faire fonctionner
le code. La Figure 1.2 montre le rsultat de ce code.
Ajout dynamique d'un script (scriptdynamic.html)
Pseudo-URL dans JavaScript
Une autre manire d'appeler du code JavaScript consiste
utiliser une pseudo-URL. Lorsqu'une URL qui com-
mence par JavaScript:est charge, le code qui se trouve
derrire est excut, comme on le voit dans le code pr-cdent (fichier url.html).
Il existe plusieurs manires d'utiliser cette URL, sous la
forme d'une image, d'un lien ou d'une CSS (Cascading
Style Sheets, feuilles de style en cascade) mais on utilise
gnralement un lien. Sachez toutefois que ce lien fonc-
JavaScript
var s = document.createElement("script");
s.setAttribute("type", "text/JavaScript");
s.setAttribute("language", "JavaScript");
s.setAttribute("src", "script.js");
document.getElementsByTagName("head")[0].appendChild(s);
click here for a surprise
8/13/2019 JavaScript_essential.pdf
26/280
15Pseudo-URL dans JavaScript
tionne uniquement avec un navigateur compatible Java-
Script et sur lequel il est activ.
Attention
Lorsque le code suivant le prfixe d'URL JavaScript:renvoiequelque chose, le rsultat est affich l'cran, ce qui n'estgnralement pas souhaitable. Vous pouvez utiliser la fonctionspciale de JavaScript void()pour l'viter :
JavaScript:void(code_qui_renvoie_quelquechose());
Figure 1.2 : La fentre modale provient du fichierexterne qui a t charg de manire dynamique.
8/13/2019 JavaScript_essential.pdf
27/280
16 CHAPITRE 1 Les bases de JavaScript
Excution de JavaScript avec
des gestionnaires d'vnements
La troisime manire d'excuter du code JavaScript (les
deux premires tant les lments et les
pseudo-URL JavaScript:) se fait par l'intermdiaire d'un
gestionnaire d'vnements. La plupart des lments
HTML acceptent quelques vnements ; par exemple, la
balise accepte l'lment de chargement. En utili-
sant le prfixe on, vous pouvez joindre le code cet v-
nement (vous trouverez plus d'options au Chapitre 6,
"Programmation oriente objet et vnements"). Ainsi, le
code suivant excute la fonction showText()aprs que ledocument a t totalement charg (par rapport au mar-
quage HTML de la page, et non des images ou d'autres
donnes externes).
Utilisation d'un gestionnaire d'vnements JavaScript (event.html)
JavaScript
function showText() {
window.alert("Welcome to JavaScript!");
}
8/13/2019 JavaScript_essential.pdf
28/280
17Navigateurs sans JavaScript
Attention
Une erreur commune consiste croire que le prfixe URL Java-Script:peut tre utilis avec les gestionnaires d'vnements,de la manire suivante :
Mais c'est une lgende : en effet, pourrait-il en tre autrementsi le code JavaScript ne pouvait avoir la valeur d'un attribut degestionnaire d'vnements ? Omettez donc JavaScript: et
fournissez simplement le code excuter lorsque l'vnementassoci est dclench.
Navigateurs sans JavaScript
Selon des tudes rcentes, jusqu' 10 % des utilisateurs ont
dsactiv JavaScript dans leurs navigateurs, du fait des
rglements des entreprises, de la crainte des vulnrabilits
de scurit et pour d'autres raisons. Vous devez donc vous
assurer que votre site Web puisse tre utilis galement
sans JavaScript.
Pour y parvenir, vous pouvez utiliser l'lment .
Les navigateurs dans lesquels JavaScript est activ ignorent
cet lment et son contenu, tandis que ceux dans lesquelsil est dsactiv en affichent le contenu. Le code qui pr-
cde (fichier noscript.html) gnre le rsultat prsent la
Figure 1.3 lorsqu'on utilise un navigateur sans JavaScript
(comme le navigateur texte Lynx) ; la Figure 1.4 montre
un navigateur qui prend en charge le langage de script.
document.write("Welcome to JavaScript!"); Welcome to plain HTML!
8/13/2019 JavaScript_essential.pdf
29/280
18 CHAPITRE 1 Les bases de JavaScript
Figure 1.3 : Le code prcdent dans un navigateursans JavaScript.
Figure 1.4 : Le code prcdent dans un navigateuravec JavaScript.
8/13/2019 JavaScript_essential.pdf
30/280
19Navigateurs sans JavaScript
Lorsque JavaScript est utilis avec des liens, l'extrait sui-
vant ne fonctionne pas comme prvu :
click here
A premire vue, tout est correct : les utilisateurs possdant
JavaScript obtiennent la fentre modale, ceux qui ne l'ont
pas cliquent sur un lien menant vers une tiquette de texte
vide ; rien d'inattendu ne survient.Toutefois, cela prsente un petit inconvnient : lorsque
l'utilisateur a cliqu sur le lien JavaScript, un navigateur
activ pour JavaScript affiche la fentre, mais suit tout de
mme le lien. Gnralement, cela n'a aucun effet, mais le
navigateur passe en haut de la page car l'tiquette de texte
n'a pas t trouve.
Pour viter cela, vrifiez simplement que le code du ges-
tionnaire d'vnements renvoie false. Cela annule tous
les autres effets que l'vnement actuel peut avoir ; ici, le
lien ne sera pas suivi :
Eviter que les navigateurs activs pour JavaScript suivent le lien (link.html)
click here
8/13/2019 JavaScript_essential.pdf
31/280
8/13/2019 JavaScript_essential.pdf
32/280
2Expressions
communes
Certaines tches JavaScript rcurrentes doivent tre ra-
lises quasiment chaque jour. Elles sont la base de nom-
breuses applications JavaScript mais n'entrent dans aucune
catgorie particulire. Nous prsentons donc au cours de
ce chapitre une suite de problmes frquents, avec leurs
solutions.
8/13/2019 JavaScript_essential.pdf
33/280
22 CHAPITRE 2 Expressions communes
Dtection du type de navigateur
Mme si les implmentations de navigateurs par Java-
Script sont, de nos jours, assez compatibles les unes avec
les autres (en particulier si on se souvient de l'poque de la
guerre des navigateurs, la fin des annes 1990), la dtec-
tion du type de navigateur constitue une partie essentiellede la bote outils du dveloppeur JavaScript.
L'objet JavaScript navigatorpropose des informations sur
le navigateur. Sa proprit userAgent, qui contient la
chane d'identification complte du navigateur, est trs
utile mais parfois difficile analyser. Elle est aussi envoye
dans l'en-tte User-AgentHTTP de chaque requte.Pour dterminer simplement le type d'un navigateur, il
suffit d'employer la proprit appName, comme le montre
le code prcdent. Le Tableau 2.1 contient les valeurs
appNamedes navigateurs les plus importants.
Tableau 2.1 : Valeurs appNamepour divers navigateurs
Navigateur appName
Internet Explorer Microsoft Internet Explorer
Navigateurs Mozilla Netscape
Konqueror (KDE) Konqueror
Apple Safari Netscape
Navigateur Opera Opera
window.alert(navigator.appName);
8/13/2019 JavaScript_essential.pdf
34/280
23Dtection du type de navigateur
Vous le voyez, le navigateur Safari renvoie un nom incor-
rect. Pour contrebalancer cet effet, vous pouvez rechercher
navigator.userAgentpour certains types de navigateurs.Et puisque le navigateur Opera risque d'tre mal identifi
(bien qu'il stocke "Opera"dans navigator.userAgent), il
convient de le vrifier en premier.
Dtermination du type de navigateur (browser.html)
Avec quelques efforts de plus, ce script peut tre prolong
pour distinguer les drivs de Mozilla (Firefox, Epiphany,
Galeon, Camino, SeaMonkey, etc.).
var uA = navigator.userAgent;
var browserType = "unknown";
if (uA.indexOf("Opera") > -1) {
browserType = "Opera";
} else if (uA.indexOf("Safari") > -1) {
browserType = "Safari";
} else if (uA.indexOf("Konqueror") > -1) {
browserType = "Konqueror";
} else if (uA.indexOf("Gecko") > -1) {
browserType = "Mozilla";
} else if (uA.indexOf("MSIE") > -1) {
browserType = "Internet Explorer";
}
window.alert(browserType);
8/13/2019 JavaScript_essential.pdf
35/280
24 CHAPITRE 2 Expressions communes
Dtection du numro de version du navigateur
Pour dterminer le numro de version du navigateur, il existeplusieurs manires. La plupart du temps, vous devez recher-
cher navigator.userAgent, ce qui peut ressembler ceci :
Vous le voyez, selon le type du navigateur, le numro de ver-
sion est enfoui ailleurs dans la valeur de navigator.userAgent.
Vous aurez alors la tche fastidieuse de traiter tous les naviga-
teurs et de vous tenir au courant des nouvelles mthodes. Il
existe toutefois quelques ressources Web pour implmenter
une dtection des navigateurs et qui sont assez bien faites.Vous trouverez de la documentation et des codes sur ces
sites Web :
http://www.webreference.com/tools/browser/
JavaScript.html ;
http://www.gemal.dk/browserspy/basic.html.
Mozilla/5.0 (Windows; U; Windows NT 5.1; en;
rv:1.8.0.3) Gecko/20060426 Firefox 1.5.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
rv:1.4) Gecko/20030619 Netscape/7.1 (ax)Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;
SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322;
.NET CLR 2.0.50727)
Mozilla/5.0 (compatible; Konqueror/3.4; FreeBSD)
KHTML/3.4.2 (like Gecko)
Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en)
AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.3
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)
AppleWebKit/312.8 (KHTML, like Gecko)
Safari/312.6
Opera/9.00 (Windows NT 5.1; U; en)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1 en)
Opera 9.00
8/13/2019 JavaScript_essential.pdf
36/280
25Vrification des capacits du navigateur
Vrification des capacits
du navigateur
Vous le voyez dans l'exemple prcdent, se fier aux
numros de version des navigateurs n'est pas seulement
difficile, c'est galement gager les possibilits d'volution.Il vaut mieux vrifier spcifiquement la prise en charge
des objets spciaux.
Par exemple, pour utiliser DOM (voir Chapitre 5,
"DOM et DHTML"), vous pourrez tenter d'utiliser le
code prcdent. Si la mthode getElementById() est
implmente, document.getElementById (sans parenth-ses) renvoie une rfrence la fonction. Si elle est utilise
dans une condition, elle renvoie true. Le code associ est
alors excut.
Autre exemple : Internet Explorer accepte les objets Acti-
veX pour certaines applications, par exemple la prise en
charge du XML. Toutefois, seules les versions Windows
de IE connaissent ActiveX. La vrification systmatique
pour Internet Explorer gnre donc des problmes pour
les utilisateurs de Mac. Ds lors, si vous vrifiez spcifi-
quement la prise en charge d'ActiveX, vous viterez ces
problmes :
if (window.ActiveXObject) {
// ...
}
if (document.getElementById) { // ...
8/13/2019 JavaScript_essential.pdf
37/280
26 CHAPITRE 2 Expressions communes
Empcher la mise en cache
Grce aux en-ttes ct serveur, il est possible d'viter la
mise en cache d'images de type "contenu dynamique"
ainsi que de pages HTML. Mais, la mthode n'est pas
infaillible, puisque certains navigateurs ou serveurs proxypeuvent ignorer ces paramtres. Pour y remdier, ajoutez
un paramtre de chane de requte insignifiant l'URL,
comme dans l'extrait suivant : Math.random()renvoie un
nombre alatoire compris entre 0 et 1, par exemple
0,1296601696732852. L'annexer une image ne modifie
gnralement pas les donnes envoyes du serveur, mais la
requte est totalement nouvelle pour le navigateur. L'image(ou les autres donnes) n'est donc pas mise en cache.
Redirection du navigateur
La proprit location.hrefpermet un accs en lecture et
en criture l'URL de la page en cours. Consquence,
rgler location.hrefsur une autre valeur redirige le navi-
gateur, qui charge alors la nouvelle page, comme le mon-
tre le code prcdent.
La page prcdente arrive ensuite dans l'historique dunavigateur. Si vous souhaitez remplacer l'ancienne page
dans l'historique (pour que le bouton Prcdent ne fonc-
tionne pas comme l'on s'y attendrait ici), utilisez la
mthode location.replace() :
location.replace("newPage.html");
document.write("");
location.href = "newPage.html";
8/13/2019 JavaScript_essential.pdf
38/280
27Rechargement de la page
Astuce
Cela peut galement tre ralis avec du HTML :
L'emplacement X dsigne le nombre de secondes patienteravant que la nouvelle page ne soit charge ; Y indique la nou-velle URL.
Rechargement de la page
La mthode reload()de l'objet locationrecharge la page
en cours, l'quivalent de location.href = location.href.
Si vous apportez le paramtre true, la mise en cache estdsactive et le navigateur procde un rechargement
"dur" partir du serveur. Toutefois, ce n'est pas non plus
infaillible puisqu'il peut exister un serveur proxy, plac
entre deux, qui peut disposer d'une copie en cache de la
page demande. Vous pourriez donc utiliser la technique
dcrite dans ce chapitre et qui consiste empcher la mise
en cache :
location.search = "?" + Math.random();
L'expression modifie la chane de requte (loca-
tion.search) de la page en cours, en rechargeant efficace-
ment le reload()de l'URL.
location.reload();
8/13/2019 JavaScript_essential.pdf
39/280
28 CHAPITRE 2 Expressions communes
Cration d'un nombre alatoire
La mthode random()de l'objet Mathcalcule un nombre
pseudo-alatoire entre 0 et 1 (non compris). On prfre
gnralement un nombre alatoire compris entre 1 et 10
par exemple. Avec un petit calcul mathmatique, l'op-ration est possible. Pour l'exemple, multipliez le rsultat
de Math.random()par 10, ce qui gnre bien un nombre
entre 0 et 10 (exclus). Si vous arrondissez ensuite cette
valeur, vous obtenez un nombre entier compris
entre 0 et 9 (inclus). Ajoutez 1 et vous obtenez un nom-
bre compris entre 1 et 10.
Le code qui prcde gnralise cette option et cre un
nombre compris entre minet max.
Informations de date et d'heure
L'objet Datede JavaScript permet d'accder la date du
jour et peut aussi effectuer certains calculs de date (en
utilisant la valeur "epoch", c'est--dire le nombre de mil-
lisecondes depuis le 1erjanvier 1970). Le Tableau 2.2
contient les mthodes les plus importantes de la classeDate. Le code qui prcde cre une date au format
mois/jour/anne.
var rand = min + Math.floor((max min + 1) *Math.random());
var d = new Date();var mdy = (d.getMonth()+1) + "/" + d.getDate() +
8/13/2019 JavaScript_essential.pdf
40/280
29Informations de date et d'heure
Tableau 2.2 : quelques proprits de Date
Mthode Description
getDate() Jour du mois
getFullYear() Anne quatre chiffres
getHours() Heures
getMinutes() Minutes
getMonth() Mois moins 1 (!)
getSeconds() Secondes
getTime() Valeur "epoch" (date de dbut demesure du temps sur un systmed'exploitation)
toString() Reprsentation en chane
toUTCString() Reprsentation en chane UTC
8/13/2019 JavaScript_essential.pdf
41/280
30 CHAPITRE 2 Expressions communes
Comprendre les expressions rgulires
Les expressions rgulires sont, pour le dire simplement,des motifs qui peuvent tre mis en correspondance avec
des chanes. Un motif dans une expression rgulire con-
tient une chane sur laquelle peut porter une recherche
dans une chane plus importante. Mais cela peut aussi tre
ralis (plus rapidement) en utilisant indexOf(). L'avantage
des expressions rgulires rside dans le fait que certaines
fonctions spciales, comme les caractres de remplace-ment, sont disponibles. Le Tableau 2.3 prsente quelques
caractres spciaux, accompagns de leurs significations.
Tableau 2.3 : Caractres spciaux dans les expressionsrgulires
Caractrespcial
Description Exemple
^ Dbut de la chane ^adsigne une chanequi commence par a
$ Fin de la chane a$dsigne une chanequi se termine par a
? 0 ou 1 fois (fait rf-rence au caractre ou l'expression prcdent)
ab?signifie aou ab
* 0 fois ou plus (fait rf-rence au caractre ou l'expression prcdent)
ab*signifie aou abou abbou
+ 1 ou plusieurs fois (faitrfrence au caractreou l'expression prcdent)
ab+signifie abou abbou abbbou
8/13/2019 JavaScript_essential.pdf
42/280
31Comprendre les expressions rgulires
D'autres caractres spciaux et expressions sont disponibles,
notamment le caractre qui fait rfrence un chiffre (\d).
[] Caractres alternatifs PHP[45]signifie PHP4ou PHP5
-(utilisentrecrochets)
Une suite de valeurs ECMAScript [3-5] signifieECMAScript 3ou ECMAS-cript 4ou ECMAScript 5
^(utilisentrecrochets)
Correspond tout saufaux caractres suivants
[^A-C]dsigne Dou Eou Fou
| Motifs alternatifs ECMAScript 3|ECMAScript4dsigne ECMAScript 3ou ECMAScript 4, toutcomme ECMAScript (3|4)
(...) Dfinit un sous-motif (a)(b)signifie ab, maisavec deux sous-motifs(aet b)
. N'importe quelcaractre
.signifie a, b, c, 0, 1, 2, $,^,
{min,
max}
Nombre minimal etmaximal d'occurrences ;si min ou max est omis,cela signifie 0 ou infinite
a {1, 3}signifie a, aaou aaa. a{,3}signifieune chane vide, a, aaou aaa.a{1,}signifie a,aa, aaa,
\ Echappement ducaractre suivant
\. dsigne .
Tableau 2.3 : Caractres spciaux dans les expressions
rgulires (suite)Caractrespcial
Description Exemple
8/13/2019 JavaScript_essential.pdf
43/280
32 CHAPITRE 2 Expressions communes
Recherche avec des expressions
rgulires
La dfinition d'une expression rgulire dans JavaScript
peut s'effectuer de deux manires :
b
var zip = new RegEx("\\d{5}");bvar zip = /\d{5}/;
Il n'y a pas de diffrence fonctionnelle entre les deux ;
vous devez simplement prendre en compte l'chappement
du caractre. La mthode test() de l'expression vrifie
ensuite si une chane contient l'expression rgulire :
var found = zip.test("Indianapolis, IN 46240"); //vrai
Pour obtenir la correspondance relle, utilisez la fonction
exec(). La mthode renvoie un tableau. Son premier l-
ment est la correspondance entire et les lments suivants
sont toutes les sous-correspondances (si on utilise des
parenthses dans l'expression rgulire).
var matches = zip.exec("Indianapolis, IN 46240");// ["46240"]
Astuce
La mthode match() renvoie toutes les correspondances ;exec()ne renvoie que l'expression courante, gnralement la
premire. Toutefois, si vous appelezexec()
plusieurs fois,toutes les correspondances sont renvoyes.
zip.test("Indianapolis, IN 46240");
8/13/2019 JavaScript_essential.pdf
44/280
33Remplacement du texte
Remplacement du texte
La mthode replace(), que prend en charge chaque chane
JavaScript, peut remplacer du texte. Elle recherche une
expression rgulire et remplace la chane trouve par une
autre chane. Dans cette chane de remplacement, il estpossible de procder une rfrence de retour sur les sous-
correspondances. $0 pointe vers la premire correspon-
dance, $1rfrence la premire sous-correspondance (sans
parenthses), $2 la deuxime sous-correspondance, etc.
Le code qui prcde recherche la ville, l'Etat des
Etats-Unis et le code postal, puis les ragence. Le rsultatest "46240 Indianapolis, IN".
Navigation dans l'historiqued'un navigateur
L'historique du navigateur est reprsent par l'objet his-
tory(une proprit de l'objet window) et contient une liste
de pages Web visites pralablement (et, si possible aprs)
la page en cours. Et mme s'il est techniquement possible
de dplacer quelques lments d'historique, les contraintes
var address = /(\w+), ([A-Z]{2}) (\d{5})/;var sams = "Indianapolis, IN 46240";var result = sams.replace(address, "$3 $1, $2");
window.history.back();window.history.forward();
8/13/2019 JavaScript_essential.pdf
45/280
34 CHAPITRE 2 Expressions communes
de scurit ne laissent qu'une manire pratique de proc-
der : reculer d'une page et avancer d'une page. Les deux
mthodes suivantes l'implmentent :
bback() passe la page prcdente de l'historique
(comme le fait le bouton Prcdent).
bforward() passe la page suivante de l'historique
(comme le fait le bouton Suivant).
Affichage de la date demodification de la page
Ds qu'un serveur Web envoie une ressource au client, ilenvoie galement la date laquelle le document a t
modifi pour la dernire fois. Gnralement, le serveur
Web extrait ces informations du systme de fichiers, mais
cet en-tte peut aussi tre modifi ou tout simplement ne
pas tre envoy. De toutes les faons, vous pouvez utiliser
ces informations, par exemple comme c'est indiqu dans
le code prcdent. Vous pouvez donc disposer d'une date
de modification plus ou moins raliste sur votre page.
Rcupration des paramtres GET
Habituellement, les informations GET sont values ct
serveur mais JavaScript a galement accs ces informa-
tions viasa proprit location.search. Toutefois, les don-
nes qui s'y trouvent rsident dans des paires nom-valeur.
document.write(document.lastModified);
var ls = location.search.substring(1);var namevalue = ls.split("&");
8/13/2019 JavaScript_essential.pdf
46/280
35Rcupration des paramtres GET
Le code suivant dcode ces donnes en utilisant la
mthode split()de JavaScript. Le tableau associatif qui
en rsulte est ensuite prsent, simplement pour montrer
qu'il fonctionne comme on s'y attend ; reportez-vous la
Figure 2.1 pour connatre le rsultat.
Analyse de la chane de requte (querystring.html)
var getdata = [];
if (location.search.length > 1) {
var ls = location.search.substring(1);
var namevalue = ls.split("&");
for (var i=0; i
8/13/2019 JavaScript_essential.pdf
47/280
36 CHAPITRE 2 Expressions communes
Demande de confirmation
l'utilisateur
JavaScript propose une prise en charge limite des fentres
modales. La mthode window.alert()est assez communemais il existe d'autres options. Avec window.confirm(),
l'utilisateur se voit prsenter une fentre de type
Oui/Non. S'il clique sur Oui, window.confirm()renvoie
true, et falsedans le cas contraire. Le code qui prcde
(fichier confirm.html) l'utilise comme valeur de retour
pour un lien. Ainsi, si l'utilisateur clique sur Non, le navi-
gateur ne suit pas le lien.
Attention
Sachez que cette bote de dialogue est traduite par les naviga-teurs, vous devez donc viter d'inscrire un texte du style "Cli-quez sur Oui pour..." car les personnes disposant d'un systme
tranger risquent de ne pas voir s'afficher de bouton Oui.
Demande de donnes utilisateur
La mthode window.prompt() permet aux utilisateurs de
saisir du texte dans un champ de texte d'une seule ligne
(voir Figure 2.2). Ces informations correspondent la
valeur de retour de l'appel de mthode et peuvent ensuite
tre utilises dans le script.
Click here
var name = window.prompt("Enter your name!", "");
8/13/2019 JavaScript_essential.pdf
48/280
37Demande de donnes utilisateur
Demande de donnes utilisateur (prompt.html)
Info
Sachez que si l'utilisateur clique sur le bouton Annuler ouappuie sur la touche d'chappement, window.prompt()renvoienull. Le code qui prcde vrifie que, si l'utilisateur clique surle bouton OK, les donnes saisies sont affiches.
var name =
window.prompt("Enter your name!", "");
if (name != null) {
window.alert("Hello, " + name + "!");
}
Figure 2.2 : La bote de saisie gnre par window.prompt().
8/13/2019 JavaScript_essential.pdf
49/280
8/13/2019 JavaScript_essential.pdf
50/280
3Images et
animations
Aux dbuts du Web, l'un des premiers effets obtenus avec
JavaScript concernait la manipulation d'images, avec, par
exemple, les images sensibles : l'utilisateur dplace le
pointeur de la souris sur une image qui change alors
d'apparence.
Netscape a introduit l'accs JavaScript pour les images
dans son navigateur version 3. A l'poque, InternetExplorer 3 pour Windows en tait sa version bta, il
tait donc trop tard pour y intgrer cette fonctionnalit.
En revanche, Internet Explorer 3 pour Macintosh, sorti
aprs la version Windows, a pu bnficier de l'accs aux
images JavaScript. Internet Explorer pour Windows a
attendu la version 4 pour pouvoir accder son tour aux
images.
Cela permet d'obtenir non seulement de jolis effets gra-
phiques, mais aussi des applications plus sophistiques,
comme les diaporamas.
8/13/2019 JavaScript_essential.pdf
51/280
8/13/2019 JavaScript_essential.pdf
52/280
41Cration de boutons sensibles
galement utiliser une fonction JavaScript personnalise
gnrique. Le code suivant cre une fonction qui attend
le nom de l'image et son URL dans une fonction, puis
l'appelle en utilisant onmouserover/onmouseout:
Un bouton de survol (hover.html)
La Figure 3.1 montre deux boutons : le pointeur de la
souris se trouve sur celui de droite.
Attention
Les anciens navigateurs (y compris Netscape 4.x) ne prennentpas en charge onmouseover/onmouseout pour des lmentsautres que les liens. Dans ce cas, vous devez intgrer l'imagedans un lien HTML et utiliser onmouserover/onmouseoutdans la
balise :
function changeImage(name, url) {
if (document.images[name]) {
document.images[name].src = url;
}
}
8/13/2019 JavaScript_essential.pdf
53/280
42 CHAPITRE 3 Images et animations
Figure 3.1 : Les boutons changent d'aspect lorsque lepointeur passe dessus.
8/13/2019 JavaScript_essential.pdf
54/280
43Prchargement d'images
Prchargement d'images
Mme si l'effet de survol du curseur, mentionn la sec-
tion prcdente, est facile mettre en place et joli regar-
der, il prsente un inconvnient structurel. Lorsque le
pointeur passe sur une image, le graphique de remplace-
ment est charg partir du serveur, ce qui peut tre assez
long et gner les utilisateurs.
Il est donc souhaitable de prcharger ces images une fois
que la page elle-mme a t charge. Avec JavaScript,
vous pouvez demander au navigateur de le faire. Elles sont
alors places dans son cache ( moins que la mise en cache
ne soit dsactive dans le navigateur ou que le serveurWeb n'envoie des en-ttes HTTP interdisant la mise en
cache locale) et charges instantanment lorsque l'effet de
survol est dclench.
Pour parvenir cet effet, vous devez instancier l'objet
Imagede JavaScript et rgler sa proprit src.
L'opration charge l'image en arrire-plan, sans mmel'afficher. Il faut alors simplement vrifier que le prchar-
gement est excut lorsque la page HTML a t totale-
ment charge, comme le montre le listing suivant :
Prchargement d'images (preload.html)
var i = new Image();
i.src = "";
function preloadImage(url) {
var i = new Image();
i.src = url;
}
8/13/2019 JavaScript_essential.pdf
55/280
44 CHAPITRE 3 Images et animations
Si plusieurs images doivent tre prcharges simultanment
(par exemple si les lments de navigation emploient un
effet de survol), vous pouvez utiliser une fonction plus
gnrique acceptant un tableau avec des images :
Prchargement de plusieurs images (preload-array.html)
Astuce
Grce au HTML standard, vous pouvez prcharger des imagessans avoir les afficher :
Toutefois, lorsque ces images ne servent que pour les effetsJavaScript, ne les prchargez qu'en utilisant JavaScript, fautede quoi les utilisateurs sans JavaScript prchargeront gale-ment les fichiers, sans obtenir les effets visuels.
function preloadImages(urls) {
var img = new Array();
for (var i=0; i
8/13/2019 JavaScript_essential.pdf
56/280
45Animation des graphiques
Animation des graphiques
Le format de fichier GIF, initialement produit par Com-
puserve, est le seul accepter l'animation et tre accept
par la plupart des grands navigateurs. Il prsente cepen-
dant des limites importantes, notamment sa palette de
couleurs 8 bits qui n'autorise que 256 couleurs. A noter
qu'une norme PNG-24 est en cours de cration mais ne
possde malheureusement pas de capacits d'animation.
Dans ce cas, le mieux faire consiste utiliser JavaScript. La
modification d'un graphique est possible comme cela a t
montr au cours des sections prcdentes, le seul ingrdient
manquant est setInterval() ou setTimeout(). Le codesuivant parcourt un tableau d'images et passe l'image sui-
vante au bout de 500 millisecondes (une demi-seconde) :
Animation par les images (animate.html)
document.images["animation"].src = urls[pos];
window.setTimeout("animate(" + (pos + 1) + ");", 500);
var urls;
function animate(pos) { pos %= urls.length;
document.images["animation"].src = urls[pos];
window.setTimeout("animate(" + (pos + 1) + ");", 500);
}
window.onload = function() {
urls = new Array(
"0.png", "1.png", "2.png", "3.png","4.png", "5.png", "6.png");
animate(0);
}
8/13/2019 JavaScript_essential.pdf
57/280
46 CHAPITRE 3 Images et animations
La fonction animate()prend un paramtre : la position de
l'image suivante afficher. La liste des images parcourir
est enregistre dans une variable globale, puisque setTi-
meout()ne peut pas utiliser les variables locales qui ne sont
pas disponibles pour tous.
Avec pos %= urls.length, le pointeur ciblant la liste d'ima-
ges est paramtr au dbut, aprs que la dernire image a
t affiche, ce qui permet de gnrer une boucle infinie.
Si l'animation doit s'arrter aprs la dernire image, rem-placez cette ligne par le code suivant :
if (pos == urls.length) {
return false;
}
Etirement des graphiques
Il n'est parfois mme pas ncessaire de crer plusieurs gra-
phiques pour construire une animation. Ainsi, le simple
fait d'tirer une image peut crer un effet saisissant. Cen'est gnralement pas trs bien peru sur le Web, puisque
seuls les formats de fichiers bitmap sont pris en charge (
l'exception de Flash ou de SVG, qui n'est pas disponible
dans les navigateurs, dans leur configuration par dfaut).
L'tirement d'un graphique exige donc du navigateur qu'il
calcule des informations d'image supplmentaires, gnra-
lement en copiant des pixels.
Dans le cas d'une barre de progression, un simple graphi-
que peut suffire. Dans un exemple simple, vous utiliserez
une image de 1 1 pixel. S'il est utilis dans la page
HTML avec une largeur de 20 pixels et une hauteur
de 10 pixels, vous obtenez une image de 20 10 pixels.
document.images["bar"].width += 5;
8/13/2019 JavaScript_essential.pdf
58/280
47Etirement des graphiques
En animant la largeur de l'image avec JavaScript, vous avez
l'impression que la barre de progression est en mouvement.
La largeur et la hauteur d'une image sont accessibles par
JavaScript grce aux proprits width et height, qui
peuvent tre lues et crites. Le code suivant dplace
la barre de progression l'aide d'un simple graphique
de 1 1 pixel, black.gif.
Une barre de progression anime (progress.html)
La Figure 3.2 prsente l'exemple en application : l'image
1 1 a t tire dynamiquement par JavaScript. La fonc-
tion progress()est appele toutes les 500 millisecondes,grce l'appel setInterval(). Une fois que la barre de
progression a atteint sa longueur maximale (dans cet
exemple, environ 200 pixels), l'animation est arrte avec
clearInterval().
function progress() {
if (document.images["bar"].width < 200) {
document.images["bar"].width += 5;
document.images["bar"].height = 5;
} else {
clearInterval(ID); }
}
var ID;
window.onload = function() {
ID = setInterval("progress();", 500);
}
8/13/2019 JavaScript_essential.pdf
59/280
48 CHAPITRE 3 Images et animations
Attention
Si vous ne rglez pas explicitement la hauteur de l'image de labarre de progression, le fait d'tirer sa largeur tirera gale-ment sa hauteur, ce qui gche l'effet souhait.
Visualisation de l'tatde chargement de la pageavec une barre de progression
Savoir si la page a t ou non compltement charge ne
peut pas tre dtermin avec du JavaScript uniquement,
mais il est possible d'en faire une estimation assez juste.
Figure 3.2 : Le graphique est anim pour ressembler une barre de progression.
if (document.images[i].complete) { loaded++;
}
8/13/2019 JavaScript_essential.pdf
60/280
49Visualisation du chargement de la page avec une barre de progression
Visualisation du chargement de la page avec une barre de progression
La proprit complete d'une image fournit une valeur
boolenne indiquant si l'image s'est totalement charge.
De mme, une image accepte l'vnement load, de sorte
que onloadpuisse tre utilis pour dclencher l'excution
du code une fois l'image charge.
Le code suivant parcourt toutes les images de la page et
compte combien d'entre elles ont t totalement charges.
Cela gnre une estimation en pourcentage de la part de
la page totalement charge (bien entendu, sans inclure lesapplets et les mdias intgrs, ni les tailles des fichiers
image).
La marque de progression du chargement (loadprogress.html)
function showprogress() {
if (document.images.length == 0) {
return false;
}
var loaded = 0;
for (var i=0; i
8/13/2019 JavaScript_essential.pdf
61/280
50 CHAPITRE 3 Images et animations
Pour rellement reproduire cet effet, vous devez intgrer
dans votre page les images qui prennent du temps char-
ger, soit parce qu'elles sont trs volumineuses, soit parce
que le serveur subit une charge lourde. Les tlcharge-
ments de code pour ce livre comprennent le script PHP
gfx.phpqui repose sur l'extension GD de PHP et cre une
image colore alatoirement, avec un dlai allant jusqu'
quinze secondes. La Figure 3.3 montre le rsultat lorsque
deux des trois graphiques ont t chargs.
Info
D'autres vnements intressants signaler pour les imagessont abort(lorsque le chargement de l'image est interrompupar l'utilisateur) et error(lorsqu'il y a une erreur lors du char-gement des images, par exemple quand le fichier n'existe pas).Ils peuvent tre utiliss avec les gestionnaires d'vnementsonabortet onerror.
Figure 3.3 : Le troisime graphique continue se charger.
8/13/2019 JavaScript_essential.pdf
62/280
51Utilisation des images ractives
Utilisation des images ractives
JavaScript peut aussi tre utilis dans des images ractives
ct client, mais dans quelques cas seulement :
Chaque lien dans l'image ractive peut tre un lien
JavaScript:, ce qui permet au navigateur d'appeler
JavaScript lorsque l'utilisateur clique sur une zone sensi-
ble de l'image.
Des vnements comme mouseover, mouseout et load
sont galement disponibles dans les images ractives
pour les formes dfinies dans les lments .
L'image ractive peut tre dfinie viaJavaScript, en uti-
lisant la proprit useMap. Toutefois, il existe gnrale-
ment une seule image ractive convenant pour une
seule image donne.
8/13/2019 JavaScript_essential.pdf
63/280
8/13/2019 JavaScript_essential.pdf
64/280
4CSS
Aux premiers temps du World Wide Web, le contenu
tait roi et la mise en page plutt dlaisse. Le Web a
ensuite dvelopp un certain ct commercial, amenantles dveloppeurs abuser du HTML. Ce langage de mar-
quage s'est alors transform en un outil de conception ina-
dapt. Grce aux CSS (feuilles de style en cascade), la
situation s'est un peu amliore : une page HTML a ainsi
pu recevoir un style et le HTML redevenir un langage de
marquage qui dfinit le contenu et la structure d'une
page, et non plus son aspect.
Grce JavaScript, les effets des CSS peuvent tre appli-
qus la vole. La plupart des sections de ce chapitre sont
trs gnriques, permettant d'appliquer ces techniques
n'importe quel objectif de conception. Certaines
rsolvent des problmes plus spcifiques.
8/13/2019 JavaScript_essential.pdf
65/280
54 CHAPITRE 4 CSS
Accs aux styles CSS
JavaScript peut dfinir n'importe quelle commande CSS
et utilise "presque" comme proprit le nom de la com-
mande CSS. Un problme demeure toutefois : certains
caractres, comme le tiret, ne sont pas autoriss dans une
proprit JavaScript. Mais de nombreuses commandesCSS (font-weightpar exemple) contiennent des tirets. Le
langage JavaScript utilise alors une syntaxe de type majus-
culeDeuximeMot : l'exception du premier, chaque
mot commence par une lettre majuscule. Ainsi, la com-
mande CSS font-weight peut tre dfinie l'aide de la
proprit fontWeight.
Toutes les commandes CSS sont accessibles l'aide de la
proprit de style de chaque lment HTML de style de
la page. Il existe deux manires communes pour accder
ces lments :
b utiliser les gestionnaires d'vnements sous la forme
d'attributs HTML et envoyer une rfrence l'lment
actuel comme paramtre :
;b utiliser document.getElementById().
Le listing suivant montre la seconde mthode. L'lment
est slectionn l'aide de document.getElementById();,
puis la commande CSS font-weightest paramtre :
document.getElementById("para").style.fontWeight ="strong";
function makeBold() {
document.getElementById("para").style.fontWeight ="bold";
window.setTimeout("makeLighter();", 1000);
8/13/2019 JavaScript_essential.pdf
66/280
55Accs aux styles CSS
Modification d'une commande CSS (style.html)
Astuce
La console JavaScript, avec le navigateur Mozilla, affiche uneerreur lorsqu'une valeur inadquate est applique au stylechoisi, comme le montre la Figure 4.1. Cela est extrmementcommode pour le dbogage.
}
function makeLighter() {
document.getElementById("para").style.fontWeight =
"lighter";
window.setTimeout("makeBold();", 1000);
}
window.onload = makeBold;
CSS and JavaScript
Figure 4.1 : Les navigateurs Mozilla (ici, Firefox)refusent les valeurs CSS inadquates.
8/13/2019 JavaScript_essential.pdf
67/280
56 CHAPITRE 4 CSS
Accs aux classes CSS
La manire la plus usite d'appliquer du CSS une page
HTML consiste utiliser les classes. Avec JavaScript, la
classe de chaque lment est accessible avec la proprit
className. Le code suivant implmente l'expression pr-
cdente avec la mthode par classe :
Modification de la classe CSS (classname.html)
Le code qui prcde modifie la classe pour le texte cha-
que seconde.
document.getElementById("para").className = "strong";
function makeBold() {
document.getElementById("para").className ="strong";
window.setTimeout("makeLighter();", 1000);
}
function makeLighter() {
document.getElementById("para").className ="weak";
window.setTimeout("makeBold();", 1000);
}
window.onload = makeBold;
.strong { font-weight: bold; }
.weak { font-weight: lighter; }
CSS and JavaScript
8/13/2019 JavaScript_essential.pdf
68/280
57Accs aux feuilles de style individuelles
Accs aux feuilles de style
individuelles
Lorsqu'une page se compose de plusieurs feuilles de style
(lment avec un style intgr ou une feuille de
style externe), vous pouvez utiliser JavaScript pour bascu-
ler entre elles, les activer et les dsactiver, ainsi que les
combiner.
La proprit styleSheets de l'objet document contient
toutes les feuilles de style de la page, dans l'ordre dans
lequel elles sont charges ou dans lequel elles apparaissent
sur cette page.
La proprit la plus importante de chaque feuille de style
s'intitule disabled. Si elle est rgle sur true, elle devient
invisible et n'affecte plus la mise en page.
Vous pouvez accder une feuille de style spcifique de
deux faons :
b en utilisant l'identifiant de la feuille de style comme
indice pour le tableau styleSheets ;
b en utilisant le numro de la feuille de style (qui
commence par 0) comme indice pour le tableau
styleSheets.
La premire manire ne fonctionne pas correctement avec
les navigateurs Mozilla, utilisez donc l'indice numrique,
comme le montre le code suivant :
document.styleSheets[0].disabled = true;
function makeBold() {
document.styleSheets[0].disabled = false;
8/13/2019 JavaScript_essential.pdf
69/280
58 CHAPITRE 4 CSS
Modification de la feuille de style (stylesheets.html)
Accs aux rgles de CSS
individuelles
Les rgles individuelles d'une feuille de style sont ga-
lement accessibles par la voie de la programmation,
mais les navigateurs Web diffrent les uns des autres.
Internet Explorer accepte la proprit rules, tandis que
tous les autres navigateurs utilisent la proprit cssRules.
La seule exception revient au navigateur Opera, qui
n'accepte ni l'une ni l'autre.
document.styleSheets[1].disabled = true;
window.setTimeout("makeLighter();", 1000);
}
function makeLighter() {
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = false;
window.setTimeout("makeBold();", 1000);
}
window.onload = makeBold;
p { font-weight: bold; }
p { font-weight: lighter; }
CSS and JavaScript
document.styleSheets[0].rules[0].style.color =
randomColor();document.styleSheets[0].cssRules[0].style.color =randomColor();
8/13/2019 JavaScript_essential.pdf
70/280
59Accs aux rgles de CSS individuelles
Sachez que vous pouvez accder aux rgles puis, par
exemple, les modifier. Chaque rgle se comporte comme
un lment HTML gnrique : vous utilisez la proprit
stylepour accder tous les styles, puis pour les modifier
ou en ajouter.
Pour l'exemple suivant, une fonction d'aide gnre une
couleur alatoire au format RVB :
function randomColor() {
var chars = "0123456789abcdef";
var color = "#";
for (var i=0; i
8/13/2019 JavaScript_essential.pdf
71/280
60 CHAPITRE 4 CSS
Accs aux rgles CSS (rules.html)
} else if (document.styleSheets[0].cssRules) {
document.styleSheets[0].cssRules[0].style.color =
randomColor();
document.styleSheets[0].cssRules[1].style.color =
randomColor();
}
window.setTimeout("makeLighter();", 1000);
}
function makeLighter() {
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = false;
if (document.styleSheets[0].rules) {
document.styleSheets[1].rules[0].style.color =
randomColor();
document.styleSheets[1].rules[1].style.color =
randomColor();
} else if (document.styleSheets[0].cssRules) { document.styleSheets[1].cssRules[0].style.color =
randomColor();
document.styleSheets[1].cssRules[1].style.color =
randomColor();
}
window.setTimeout("makeBold();", 1000);
}
window.onload = makeBold;
p { font-weight: bold; }
span { font-style: italic; }
p { font-weight: lighter; }
span { font-style: normal; }
CSS and JavaScript
8/13/2019 JavaScript_essential.pdf
72/280
61Laisser disparatre le contenu d'un site Web
La Figure 4.2 montre le rsultat : mme si l'ouvrage est
imprim en gris, vous constaterez diffrentes couleurs (ou
plutt niveaux de gris) dans le paragraphe et dans l'l-
ment qui s'y trouve.
Laisser disparatre le contenu
d'un site Web
Un effet JavaScript assez commun sur le Web, et qui uti-
lise les CSS, consiste laisser les lments d'une page
apparatre ou disparatre la demande. Certaines pages
affichent un cran d'attente sur une page qui se charge
lentement. Une fois la page charge, l'cran d'attente dis-
parat. Un autre exemple consiste fournir plusieurs
onglets, un seul affich la fois, et passer de l'un l'autre
en utilisant JavaScript, sans qu'il soit besoin d'adresser au
serveur de longues requtes.
Figure 4.2 : Les couleurs du texte sont appliquesde manire alatoire aux rgles CSS individuelles.
document.getElementById(show).style.display = "block";
document.getElementById(hide).style.display = "none";
8/13/2019 JavaScript_essential.pdf
73/280
62 CHAPITRE 4 CSS
Il existe plusieurs manires de procder avec JavaScript.
Vous pouvez utiliser DOM (vous trouverez certaines
expressions pour faire apparatre ou disparatre des l-
ments DOM au Chapitre 5, "DOM et DHTML"). Deux
possibilits sont prsentes dans l'expression.
On trouve d'abord la commande CSS visibility, que
vous pouvez rgler sur visibleou hiddenpour faire appa-
ratre ou disparatre l'lment associ, ce qui se traduit en
une proprit JavaScript visibility. En voici le code :
Rglage de la visibilit d'un lment (visibility.html)
Toutefois, comme vous le verrez, le positionnement absolu
entrane des diffrences subtiles selon les navigateurs.
function showHide(show, hide) {
document.getElementById(show).style.visibility =
"visible";
document.getElementById(hide).style.visibility =
"hidden";
}
Tab 1
Tab 2
8/13/2019 JavaScript_essential.pdf
74/280
63Laisser disparatre le contenu d'un site Web
Il vaut mieux utiliser une mise en page par blocs et dfinir
la proprit displayde l'lment sur blockou none:
Rglage du mode d'affichage d'un lment (display.html)
La Figure 4.3 montre le rsultat : cliquer sur le second
bouton fait apparatre le second onglet.
function showHide(show, hide) {
document.getElementById(show).style.display = "block";
document.getElementById(hide).style.display = "none";
}
Tab 1
Tab 2
Figure 4.3 : Cliquer sur un bouton affiche l'onglet associ.
8/13/2019 JavaScript_essential.pdf
75/280
64 CHAPITRE 4 CSS
Application de JavaScript
aux slecteurs CSS
En 1999, le W3C proposait des "extensions comportemen-
tales aux CSS" (http://w3.org/TR/1999/WD-becss
-19990804), une mthode consistant lier du code Java-
Script des comportements CSS. L'ide de base tait d'vi-
ter l'utilisation des attributs HTML bien connus de type
onxxx. Aprs 1999, ce domaine n'avait pas beaucoup pro-
gress, mais Ben Nolan russit proposer un contourne-
ment (ou plutt un piratage) pour permettre un concept
analogue. Pour cela, il faut employer la bibliothque Java-
Script (http://www.bennolan.com/behaviour/ )sous la forme du fichier behaviour.js. Cette collection de
code permet de fournir des rgles contenant du code JavaS-
cript sous la forme de slecteurs CSS.
Pour que cela fonctionne, il faut d'abord un fichier Java-
Script externe qui dfinisse les rgles CSS. Pour l'essentiel,
vous crez un objet avec des slecteurs CSS sous forme de
cls, puis les fonctions de gestion d'vnements JavaScript
sous forme de valeurs. Ensuite, vous appelez la mthode
Behaviour.register()pour signaler ces rgles la biblio-
thque de comportements :
Behaviour.register(cssrules);
var cssrules = {
"p.para" : function(e){
e.onmouseover = function(){
this.style.fontWeight = "bold";
}
e.onmouseout = function(){
this.style.fontWeight = "normal";
}
8/13/2019 JavaScript_essential.pdf
76/280
65Application de JavaScript aux slecteurs CSS
Rgles CSS/JavaScript (rules.js)
Il reste charger la bibliothque JavaScript et le prcdent
fichier JavaScript de rgles. Le code JavaScript est ensuite
excut lorsque les vnements associs (dans l'exemple :
mouseoveret mouseout) sont dclenchs.
Utilisation de la bibliothque de comportements JavaScript (behaviour.html)
La Figure 4.4 montre le rsultat : lorsque le pointeur de lasouris passe sur l'lment , deux gestionnaires d'v-
nements sont appels.
},
"#term" : function(e){
e.onmouseover = function(){
this.style.fontStyle = "oblique";
},
e.onmouseout = function(){
this.style.fontStyle = "normal";
}
}
};
Behaviour.register(cssrules);
CSS and
JavaScript
8/13/2019 JavaScript_essential.pdf
77/280
66 CHAPITRE 4 CSS
Info
Le principal avantage de cette mthode rside dans le fait quele code JavaScript se trouve dans des fichiers externes et qu'iln'encombre pas le marquage HTML de la page. Du point de vuede l'architecture, l'ide est assez brillante et fonctionne danstous les navigateurs.
Modification ducurseur de la souris
Tous les systmes d'exploitation sont livrs avec un cer-
tain jeu de curseurs de souris et CSS en accepte un
sous-ensemble. L'apparence est un peu diffrente selon les
systmes d'exploitation, mais la mise en page gnrale est
assez similaire.
Figure 4.4 : Le code JavaScript est excut.
document.getElementById("button").style.cursor = "help";
8/13/2019 JavaScript_essential.pdf
78/280
67Modification du curseur de la souris
La commande CSS en question est cursor, et elle est ga-
lement disponible partir de JavaScript, comme le montre
le code suivant :
Modification du curseur (cursor.html)
Vous voyez le rsultat la Figure 4.5 : le curseur de la
souris comprend maintenant un point d'interrogationpour prciser que le bouton permet d'obtenir de l'aide.
Attention
Chaque curseur de souris ralise un objectif. Rflchissez doncbien avant de modifier l'apparence d'un curseur, vous ne devezpas irriter vos utilisateurs !
window.onload = function() {
document.getElementById("helpButton").style.cursor
= "help";
};
Figure 4.5 : Le curseur de la souris est modifi.
8/13/2019 JavaScript_essential.pdf
79/280
68 CHAPITRE 4 CSS
Styles de curseur CSS
Voici les valeurs autorises pour la proprit cursor deJavaScript/CSS :
auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
s-resize
se-resize
sw-resize
test
w-resize
wait
8/13/2019 JavaScript_essential.pdf
80/280
5DOM et DHTML
Ce chapitre traite de deux techniques JavaScript vague-
ment lies : DOM et DHTML. Ces deux aspects de
JavaScript existent depuis de nombreuses annes, mais cen'est que depuis la chute des parts de march de Nets-
cape 4.x, passant en dessous de celle de Mozilla il y a
quelques annes, qu'il a t possible de les utiliser con-
jointement. A l'origine, pourtant, ils n'avaient pas
grand-chose en commun. Ce chapitre traite de DOM,
puisque de nombreuses expressions de cet ouvrage peu-
vent tre plus ou moins classes sous la catgorie
"DHTML".
DOMDOM (Document Object Model, modle objet de docu-
ment) est assez explicite : il propose un modle d'objet
(et, avec lui, une API, une interface de programmation
d'applications) pour un document. Dans le contexte du
Web, on fait videmment rfrence un document
HTML.
8/13/2019 JavaScript_essential.pdf
81/280
8/13/2019 JavaScript_essential.pdf
82/280
8/13/2019 JavaScript_essential.pdf
83/280
72 CHAPITRE 5 DOM et DHTML
Accs des lments spcifiques
Lorsque vous travaillez avec DOM, la meilleure manire
d'accder par la suite un lment sur la page consiste lui
donner un identifiant unique, ou ID. La mthode DOM
document.getElementById() accde ensuite l'lment
donn et vous permet de poursuivre : modifier les l-ments, ajouter des sous-lments ou encore naviguer dans
l'arborescence DOM.
Dans l'exemple suivant, on accde l'lment
. Selon
le type du navigateur, la reprsentation en chane de la
classe d'lment est diffrente. Tandis qu'Internet Explo-
rer produit simplement [object], les navigateurs Mozillasont plus verbeux et donnent plus d'informations :
[object HTMLParagraphElement].
Accs un lment par son identifiant (getelementbyid.html)
Attention
DOM n'est accessible que lorsque l'ensemble du document at charg. C'est la raison pour laquelle son code d'accs n'estexcut qu'aprs que l'vnement load a t dclench.
document.getElementById("para")
window.onload = function() {
window.alert(document.getElementById("para"));}
JavaScript Phrasebook
8/13/2019 JavaScript_essential.pdf
84/280
73Accs aux balises
Accs aux balises
Une autre manire d'accder aux lments de la page en
cours consiste passer par leurs noms de balise. Ds que
vous devez travailler sur un jeu d'lments reprsent par
des balises HTML identiques (par exemple, tous les l-
ments de liste ou tous les paragraphes, tout ce qui n'est pasreprsent par une autre proprit de l'objet document
JavaScript), la mthode document.getElementsByTagName()
peut tre utilise. Vous apportez le nom de la balise et
vous obtenez un tableau de tous les lments, que vous
pouvez ensuite traiter.
Le code suivant accde simplement tous les lments
et les compte :
Accs aux lments par nom de balise (getelementsbytagname.html)
La sortie du code prcdent est [object HTMLCollection]
(2 elements) ; Internet Explorer une fois de plus donne
moins d'informations, en produisant seulement[object]
(2 elements).
document.getElementsByTagName("p")
window.onload = function() {
window.alert(
document.getElementsByTagName("p") +
" (" + document.getElementsByTagName("p").length
+ " elements)");
}
JavaScript Phrasebook
Sams Publishing
8/13/2019 JavaScript_essential.pdf
85/280
74 CHAPITRE 5 DOM et DHTML
Navigation dans l'arborescence DOM
Une fois l'intrieur de DOM, vous pouvez naviguerdans la structure, monter et descendre ou aller droite
et gauche. Voici une liste des proprits les plus
importantes que possde chaque nud DOM :
firstChild : premier nud enfant ;
lastChild : dernier nud enfant ;
childNodes : tous les nuds enfant (sous forme de
tableau) ;
parentNode : nud parent ;
nextSibling : nud suivant au mme niveau (
droite) ;
previousSibling : nud prcdent au mmeniveau ( gauche).
De mme, nodeName renvoie le nom de la balise du
nud (ou #textpour les nuds de texte) tandis que
nodeValuerenvoie la valeur d'un nud (fonction utile
avec les nuds de texte).
8/13/2019 JavaScript_essential.pdf
86/280
75Dtermination des informations de nud
Dtermination des informations
de nud
Nous l'avons indiqu la section prcdente, il est possi-
ble de rassembler des informations sur un nud, ce qui est
extrmement utile lorsqu'on travaille avec des donnes
DOM arbitraires.
nodeName donne des informations sur le nom du nud
(nom de balise ou #textpour les nuds de texte), mais
nodeValuene sert que pour les nuds de texte et renvoie
le texte rel du nud. La troisime catgorie d'informa-
tions provient de la proprit nodeType, qui donne des
informations sur le type du nud. Le Tableau 5.1 contientune liste de toutes les valeurs possibles de nodeType.
Tableau 5.1 : Types de nuds
Type de nud Description
1 Balise
2 Attribut
3 Texte (espaces compris)
8 Commentaire HTML
9 Document
10 DTD
11 Fragment
s += nodeName + ": " + nodeValue + " (" + nodeType + ")\n";
8/13/2019 JavaScript_essential.pdf
87/280
76 CHAPITRE 5 DOM et DHTML
Le code suivant analyse ensuite une simple structure
DOM et produit des informations concernant tous les
nuds enfant. La Figure 5.2 prsente le rsultat dans le
navigateur.
Rcupration des informations de nud (nodeinfo.html)
window.onload = function() {
var s = "";
with (document.getElementById("para")) { for (var i=0; i
8/13/2019 JavaScript_essential.pdf
88/280
77Suppression d'lments
Suppression d'lments
La mthode removeChild() que possde chaque nud
peut servir liminer un nud de l'arborescence DOM.
Sachez que vous devez appeler cette mthode partir de
l'lment parent du nud effacer et fournir le nud en
paramtre. L'exemple suivant prsente une liste et sup-prime le dernier lment chaque fois que l'utilisateur cli-
que sur le bouton ; reportez-vous la Figure 5.3 pour
voir le rsultat dans le navigateur.
Suppression de nuds (remove.html)
list.removeChild(list.lastChild);
function removeItem() { var list = document.getElementById("list");
if (list.childNodes.length > 0) {
list.removeChild(list.lastChild);
}
}
Item
Item
Item
Item
8/13/2019 JavaScript_essential.pdf
89/280
78 CHAPITRE 5 DOM et DHTML
Astuce
Lorsque vous n'avez qu'un accs direct au nud supprimer(curNodedans le code suivant), cette mthode fonctionne :
curNode.parentNode.removeChild(curNode);
Si vous appelez ce code dans une fonction gestionnaire pour lenud, vous pouvez remplacer curNodepar this.
Ajout d'lments
Les nouveaux nuds DOM sont crs l'aide de la
mthode document.createElement(). Elle gnre un nouvel
lment, en utilisant le nom de balise fourni en paramtre.
Figure 5.3 : Le dernier nud est supprim.
list.appendChild(newNode);
8/13/2019 JavaScript_essential.pdf
90/280
79Ajout d'lments
Cet lment peut ensuite tre insr dans l'arborescence
DOM. La mthode (node) utilise le plus souvent est
appendChild(). Elle ajoute un nouvel enfant la fin de la
liste.
Le code suivant ajoute un nouvel lment de liste vide
() la fin de la liste ds que l'utilisateur clique sur le
bouton :
Ajout de nuds (add.html)
L'inconvnient de cette approche rside dans le fait que
le nouvel lment est toujours ajout la fin de la liste
des enfants. Pour y remdier, utilisez la mthode insert-
Before() qui permet d'insrer un nouveau nud avant
tout autre nud (pour l'insrer n'importe o, sauf la fin
de la liste). Comme pour les paramtres, vous donnez
d'abord le nouveau nud, puis le nouvel lment de
mme niveau.Le code suivant insre un nouvel lmentau dbut
de la liste chaque fois que l'utilisateur clique sur le bouton
(voir Figure 5.4).
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
list.appendChild(newNode);
}
Item