JavaScript_essential.pdf

8/13/2019 JavaScript_essential.pdf

1/280

Christian Wenz LE GUIDE DE SURVIE

JavaScriptLESSENTIEL DU CODE ET DES COMMANDES


2/280

JavaScript

Christian Wenz


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


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


5/280


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


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


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


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


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.


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.


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.


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


15/280


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


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


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


19/280


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.


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.


21/280


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.


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!");


23/280


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


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");


25/280


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


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.


27/280


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!");

}


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!


29/280


Figure 1.3 : Le code prcdent dans un navigateursans JavaScript.

Figure 1.4 : Le code prcdent dans un navigateuravec JavaScript.


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


31/280


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.


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);


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);


35/280


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


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) { // ...


37/280


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";


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();


39/280


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() +


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


41/280


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


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


43/280


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");


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();


45/280


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("&");


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


47/280


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!", "");


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


49/280


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.


51/280


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;

}

}


53/280

42 CHAPITRE 3 Images et animations

Figure 3.1 : Les boutons changent d'aspect lorsque lepointeur passe dessus.


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;

}


55/280


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


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);

}


57/280


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;


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;


ID = setInterval("progress();", 500);

}


59/280


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++;

}


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


61/280


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.


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.


63/280


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.


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);


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.


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";


document.getElementById("para").className ="strong";


}


document.getElementById("para").className ="weak";


}


.strong { font-weight: bold; }

.weak { font-weight: lighter; }

CSS and JavaScript


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;


document.styleSheets[0].disabled = false;


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.



}





}


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();


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


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();


randomColor();

}


}




if (document.styleSheets[0].rules) {


randomColor();


randomColor();

} else if (document.styleSheets[0].cssRules) { document.styleSheets[1].cssRules[0].style.color =

randomColor();


randomColor();

}


}


p { font-weight: bold; }

span { font-style: italic; }

p { font-weight: lighter; }

span { font-style: normal; }

CSS and JavaScript


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";


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


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.


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";

}


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


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";


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 !


document.getElementById("helpButton").style.cursor

= "help";

};

Figure 4.5 : Le curseur de la souris est modifi.


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


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.


81/280


82/280


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.alert(document.getElementById("para"));}

JavaScript Phrasebook


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

document.getElementsByTagName("p") +

" (" + document.getElementsByTagName("p").length

+ " elements)");

}

JavaScript Phrasebook

Sams Publishing


85/280


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


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";


87/280


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)


var s = "";

with (document.getElementById("para")) { for (var i=0; i


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


89/280


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);


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

JavaScript_essential.pdf

Documents

Transcript of JavaScript_essential.pdf