JavaScript Des Fondamentaux Aux Concepts Avance (Bibliotheques Prototype Et Script - Aculo.us) PDF

JavaScript
Des fondamentaux aux concepts avancs
EmmanuelGUTIERREZ
Rsum
Ce livre sur Javascript est destin tous ceux qui se proccupent de donner plus dinteraction leurs sites web. Il vise deux objectifs : tout
dabord matriser les fondements de JavaScript afin dlaborer les scripts les plus frquemment utiliss sur le net, puis dcouvrir le nouveau
potentiel de JavaScript aussi bien grce son utilisation avec les feuilles de styles en cascade (CSS), le DHTML, AJAX quavec les bibliothques
telles que Prototype ou Script.aculo.us.
Aprs avoir prsent la syntaxe de base, le livre prend appui sur des exemples significatifs (gestion des formulaires, du temps, des menus de
navigation, gliss-dpos, autocompltion), pour les commenter et dmontrer lomniprsence de JavaScript dans une architecture Web 2.0.
Le livre accompagne le lecteur tout au long dun vritable parcours allant des rudiments de JavaScript jusqu la dcouverte des concepts les plus
avancs.
Les exemples de script cits dans louvrage sont en tlchargement sur cette page.
L'auteur
Aprs plusieurs annes passes en tant que formateur, Emmanuel Gutierrez est aujourd'hui consultant informatique, grant dun centre de
formation qu'il a cr. Ses diffrentes missions en entreprises autour de la cration de sites web s'allient son exprience pdagogique pour
fournir au lecteur un ouvrage rellement oprationnel pour matriser le dveloppement en JavaScript.
Ce livre numrique a t conu et est diffus dans le respect des droits dauteur. Toutes les marques cites ont t dposes par leur diteur respectif. La loi du 11 Mars
1957 nautorisant aux termes des alinas 2 et 3 de larticle 41, dune part, que les copies ou reproductions strictement rserves lusage priv du copiste et non destines
une utilisation collective, et, dautre part, que les analyses et les courtes citations dans un but dexemple et dillustration, toute reprsentation ou reproduction intgrale,
ou partielle, faite sans le consentement de lauteur ou de ses ayants droit ou ayant cause, est illicite (alina 1er de larticle 40). Cette reprsentation ou reproduction, par
quelque procd que ce soit, constituerait donc une contrefaon sanctionne par les articles 425 et suivants du Code Pnal. Copyright Editions ENI
ENI Editions - All rigths reserved - 1-

HistoriqueetversionsdeJavaScript
LemoinsquelonpuissedirecestqueJavaScriptestunlangagetrscontrovers.AudbutdelInternet,lespages
taientconstituesuniquementdetextesetdelienshypertextes,cequirestreignaitlusagedesscientifiquesetdes
universitaires. De toutes manires, les contraintes techniques de lpoque, notamment au niveau des dbits de
transfert,nepouvaientpasproposerautrechosedemieux.Cestaumilieudesannes1990quelebesoindedisposer
desitesInternetplusconviviauxetproposantplusdeservicesestapparu.BrendanEich,alorsingnieurinformaticien
chezNetscapeestchargdudveloppementdunnouveaunavigateurweb.Ilenprofitepourdvelopperunlangage
de Script, lorigine nomm LiveScript, et qui devait tre un complment Java (ces deux langages sont souvent
confondusdufaitdeleurappellationquasiidentique,bienquilsnaientquepeudechosesencommun).Lobjetdece
langage de script est de rendre les pages Internet plus attractives, plus conviviales pour le visiteur, en permettant
davantagedechosessanspourautantfaireappellaprogrammationctserveur.Pourcefaire,lenavigateurdoit
pouvoirinterprterlecodeJavaScript.NetscapedcidedimplmenternativementLiveScriptdanslaversion2.0deson
navigateur(alorsbaptisNetscapeNavigator)ds1995.Dbutealors,unepriodedegrandepopularitdeslangages
descriptetMicrosoftnepouvaitquesersoudresortirsapropreversion.CefutJscriptsortien1996etintgr
sonnavigateurInternetExplorerdontladernireversionestaujourdhuiJscript.Net.LesversionsdeJavaScriptsesont
alors succdes, apportant pour chacune dentre elles son lot damliorations. Tout le monde a pu constater que
lInternetarapidementtenvahidepagescomportantdepetitsscriptspermettant,parexemple,dafficherlheure,la
date, le nom du visiteur, ou effectuant la validation du contenu de champs de formulaire. Cependant, mme si
JavaScript suit les instructions donnes par lECMA (European Computer Manufacturers Association), organisme
international charg de la standardisation des systmes dinformation et de communication, les diteurs de logiciels
(Microsoft dun ct avec Internet Explorer et Sun de lautre avec Firefox), ont labor, depuis le dbut, des
navigateurs qui implmentent diffremment JavaScript. De ce fait, certains scripts peuvent trs bien sexcuter
normalementsurunnavigateuretparadoxalement,gnreruneerreursurunautre.Cestenpartiecausedecela
qu la fin des annes 1990, dautres langages tels ASP ou PHP deviendront plus populaires. Mais cest surtout
lutilisation outrance de popup (fentre surgissante) qui est lorigine de la baisse dintrt pour lemploi de
JavaScript.LeurprolifrationanormmentnuiJavaScriptetlexasprationdesutilisateursafiniparencacherles
avantages aux yeux des dveloppeurs certains allant mme jusqu le considrer comme un souslangage.
Heureusement, larrive des bloqueurs de popup intgrs aux navigateurs a permis JavaScript de redorer son
blason.
LetableausuivantpermetdelierlaversiondeJavaScriptaveccelledunavigateur :
Annedesortie VersiondeJavaScript Navigateurscompatibles
InternetExplorer3.0
1995 1.0
NetscapeNavigator2.0
InternetExplorer4.0
1996 1.1
InternetExplorer4.0
1997 1.2
1998 1.3 NetscapeNavigator4.5
InternetExplorer6.0
1999 1.4
2000 1.5 NetscapeNavigator6.0
2005 1.6 Firefox1.0
Firefox2.0
2006 1.7
InternetExplorer7.0
Aujourdhui, JavaScript est redevenu un langage la mode. Il est dailleurs intressant de constater que les mmes
personnes,qui,ilyaquelquestemps,dcriaientcelangage,lutilisentaujourdhuitortettravers.Eneffet,larrive
denouvellestechnologieswebetnotammentduweb2.0,redonneaudveloppementJavaScriptuneplacecentrale,
notammentparsonutilisationconjointeavecXMLouparsonutilisationasynchrone(Ajax),dontnousreparleronsplus
tard.Cecidit,ilnestpasinutiledepointerdudoigtlesavantagesetleslimitesdelutilisationdeJavaScript.

LimitesetavantagesdeJavaScript
Comme nous lavons dj prcis, JavaScript est un langage universel qui se retrouve dans de nombreuses pages
HTML, en complment de ce code. Grce JavaScript, les pages HTML sont plus riches et disposent de nombreuses
fonctionnalitssupplmentaires.
Savoir rdiger des scripts en JavaScript, cest permettre aux visiteurs de vos pages HTML daccder dautres
fonctionnalits, dautres services et damliorer ainsi la professionnalisation dun site. Ainsi, il y a encore quelques
temps, lorsquun utilisateur choisissait un identifiant pour la premire fois, il fallait cliquer sur un bouton et attendre
unerponsedelapartduserveur.Et,celuici,parfois,invitaitrecommencerleprocessusdecration,lepseudotant
djpris.Alorsquaujourdhui,aveclemploidelatechnologieAJAX,lecontrleseffectueenarrireplanpendantque
levisiteurcompltesafiche.IlestindniablequeJavaScriptcontribuefortementlaconvivialitdunsiteInternetet
amliore,parconsquent,lafidlisationdesvisiteurs.
tantdonncettelargediffusion,savoirrdigerdesscriptsJavaScriptestdevenu,aujourdhui,uneconnaissancede
basedetoutdveloppeurweb.
Pour autant, lusage de JavaScript nest pas rserv au web, en effet plusieurs logiciels du march tels Adobe
PhotoshopouAdobeIllustratorutilisentdesvariantestrsprochesdeJavaScriptpourautomatisercertainestches.
Encequiconcerneladifficultdulangage,certainspourraienttrerticentslanalysedespagesHTMLcontenantdu
codeJavaScript,maisfinalementavecunpeudetempsetderecherche,JavaScriptestunlangagedontlamatriseest
assez facile. DautantplussivoustesdjfamilieravecdautreslangagestelsleVisualBasicoulelangageC,par
exemple,mmesiuneadaptationquelquesparticularitsesttoutdemmencessaire.
linverse, JavaScript ne peut pas tout faire. Comme cest un langage de script qui sexcute ct client, il lui est
impossibledesinterfaceravecunebasededonnesdetypeMysqlouSQL,parexemple.Pourremplircettemission,il
faut imprativement passer par de la programmation ct serveur avec des langages tels ASP ou PHP. Autre point
important,JavaScriptnestpasenmesuredcrireoudeliresurledisquedurduposteclient(hormislescookiesquine
sontquedepetitsfichierstexteetdontnoustraiteronslesdiffrentsaspectsauchapitreAmliorerlinteractivitavec
JavaScriptetCSS).Cettedernirelimitationnenconstituepaspourautantundfaut,carainsiJavaScriptnepropage
pasdinfectionsviralesfortementdangereuses.
UneautreparticularitdeJavaScriptrsidedanslefaitquilnencessitepasdditeurparticuliernidecompilateur.Il
esttrsfacilederdigerdesscriptsdirectementdanslecodedelapageHTMLenpassantparunsimplediteurde
textedetypeWordpadouunditeurdecodeHTML.Ilexiste,cependant,desoutilsdeconceptiondontlapportnest
pasngligeable.

Outilsdeconception
LesoutilspermettantdinsrerducodeJavaScriptsontnombreux.Celavadusimplelogicielditeurdetexte,comme
parexempleWordPaddeWindows,loutilspcifiqueAptanaStudio,enpassantparlesditeursdecodeHTMLtels
DreamweaverouFrontPage,aveclesquelsilestpossibledinsrerdesblocsJavaScript.Lusagedeceslogicielspermet
dedisposerduncertainsnombredoutilsfacilitantlcritureducode.Ilest,parexemple,fortsimplede:
vrifierunesyntaxeparlacolorationautomatiqueducode
disposerdelautocompltion(propositiondesmthodesoupropritsdisponiblesdelobjet)
connatrelavaleurdunevariablelorsdelexcutiondunscript.
Pour cela, vous pouvez opter pour un logiciel tel Aptana que vous pouvez tlcharger ladresse
http://www.aptana.com.MalheureusementcetIDE(environnementdedveloppement)estenanglais,cequipeuttre
dcourageant.Ilsavreracependantutilepourledbogageaummetitrequedautresoutilsdontnousreparlerons
auxchapitressuivants.
Votreoutildeconceptionslectionn,ilconvientdeconstruireunenvironnementdedveloppementetdetestsafinde
perdreleminimumdetempslorsdelarecherchedeserreurs,quisurviendrontinvitablement.

Paramtragesetenvironnementoptimaldetest
Il faut avoir lesprit que pour dbuter en JavaScript, un minimum de connaissances en HTML est ncessaire et
notamment la notion de balise permettant de se situer dans la page. Pour mmoire, nous rappellerons simplement
quunepageHTMLsediviseendeuxgrandesparties :
la partie head (tte en franais) dans laquelle se situent les informations correspondant la description du
contenu
lapartiebody(corpsenfranais)ofigurelecodepermettantlaconstructiondesobjetsdanslapage(champs
deformulaire,zonedetexte,image,etc.).
UnscriptJavaScriptpeutsetrouverauchoixdansluneoulautredecesdeuxparties.Cependant,parconvention,les
scriptsseretrouventplusfrquemmentdanslapartieheaddelapage.Leurexcutionpeutalorstreimmdiate(au
chargementdelapage)oudiffre(clicsurunbouton,parexemple).Ilfaudra,danscecas,utiliserlaprogrammation
vnementielle et les fonctions pour que le code sexcute. Ces points sont traits au chapitre Fonctions et
vnementsduprsentouvrage.Lapositiondesscriptsdanslapartieheadnesignifiepaspourautantquelesscripts
seront indexs par les moteurs de recherche. En effet, jusqu prsent, les moteurs tels Google ou Yahoo ne
proposentpasderfrencespartirdeceslmentsdecode,maisavecledveloppementdestechnologiesduweb
2.0, ils le feront un jour ou lautre.Pourlinstant,danslecasounepagecontientdeslienslintrieur dunmenu
critlaidedeJavaScript,cesadressesneserontpasrfrencesparlesrobots.Ilestdoncfortementrecommand
dajouterlesliensenHTMLlaidedelabalise <a href="mapagevisibleparlesmoteurs.html">.Aprsavoirdtaillla
position des scripts JavaScript, il faut claircir la manire de les insrer. Nous avons dj vu que JavaScript ne
ncessitaitpasdenvironnementparticulier.IlsuffitsimplementdunepageHTMLlintrieurdelaquellevousajoutez
des lignes rdiges en JavaScript entre deux balises. La premire balise indique au navigateur le dbut du script
JavaScriptetlasecondeenindiquelafin.Lesdeuxbalisesutilisersontlessuivantes:
Audbutduscript :
<script language="javascript">
etlafinduscript
</script>
Entrelesdeuxbalises,lenombredelignesdecodeestillimit.IlestpossibledajouterlaversiondeJavaScriptutilise
etdobtenirunelignedetype :
<script language="javascript 1.5">
Cependant,lesnavigateurssaccommodenttrsbiendelapremiresyntaxeet,enfonctiondeleurversion,sadaptent
laversionJavaScript.Deplus,enspcifiantunedesderniresversions,vouscontraignezlesvisiteursdisposerdes
derniers navigateurs, ce qui limite la porte de votre code. Si, malgr tout, vous souhaitez faire passer des
informationsauxvisiteursayantunnavigateurnesupportantpasJavaScript,ilfautlefaireentrelesbalises<noscript>
et</noscript>quelonplacejusteaprs.
document.write ("bonjour");
</script>
<noscript> votre navigateur ne peut pas lire le code JavaScript</noscript>
Danscetexemple,lenavigateurafficheraBonjoursilestcompatibleouletextefigurantentrelesbalises<noscript>et
</noscript>silnelestpas.
Unefoislesdeuxbalisesinsresetlecodecrit,ilsuffitdenregistrervospagesavecunnomdiffrentparlemenu
FichierEnregistrersous.Ainsi,vouspouvezconstituerprogressivementunebibliothquedepagesHTMLcontenant
desscriptsJavaScriptremployerlorsdutilisationsbienspcifiques.
Endautrestermes,ilvousfaut,pourdbuter,unepageHTMLrudimentairequivousserviradematricepourtoutesles
autrespagescontenantlesscripts.

HTMLetJavaScript
Nous avons vu prcdemment que JavaScript et HTML taient intimement lis lun lautre, le code HTML servant
gnralementdeconteneuraublocdinstructionsJavaScript.AprschargementducodeHTML,lenavigateurexcute
lesblocsdinstructionsJavaScriptetpermetainsidenrichirlapagedenouvellesfonctionnalits.Pourtant,ilexisteun
autretypedexcutiondesscriptsJavaScript.

LesdeuxtypesdexcutionducodeJavaScript
En effet, les blocs de script JavaScript peuvent tre directement prsents dans le code HTML de la page entre deux
balises (une de dbut et une de fin), ou crits dans un fichier JavaScript au format .js, totalement dissoci du code
HTML de la page. Le premier cas est dsign sous le terme de JavaScript interne par opposition au second, appel
JavaScriptexterne.
Aucun des deux types dexcution nest meilleur que lautre, il sagit simplement dune prfrence de mode de
dveloppement.LadeuximesolutionpermettoutefoisderutiliserlecodedansdautrespagesHTMLsansquilsoit
ncessairedelercrireoudefaireuncopiercoller.
Concrtement,lescriptJavaScriptestrdigdansunfichierparticulierlaidedunditeurdetexte,parexemple,et
doittreenregistrsansformatageauformat.js.Silditeurdetexteneproposepaspardfautcetteextension,il
suffitdelajouterlorsdelasauvegardedufichier.Afindepouvoirretrouverfacilementlerledevotrescript,ilconvient
delenommeravecunnomexplicite.
Parlasuite,ilesttrssimpledappelerlefichierJavaScriptdanslapageHTMLenrespectantlasyntaxesuivante :
<script src="fichier_javascript.js"></script>
Biensr,lefichierdevratreprsentdanslemmerpertoiredevotredisquedurouduserveurquelefichierHTML
appelant.
Parsoucidesimplification,touslesexemplesdecetouvragesontconusenJavaScriptinterne,ainsivousretrouverez
plusfacilementlensembleducode.
Enplusdecesrglespurementlieslorganisationdesscripts,ilexisteuncertainnombrederglesdesyntaxe
respecter.

Lesrglesdesyntaxeducode
PourbiendbuterenJavaScriptlerespectdecesrglesestfondamental,carcelangageestpeusoupleetnautorise
pasderreurscommevousleconstaterezdanslesparagraphessuivants.
1.Lacasse
UnedesprincipalesdifficultsdeJavaScriptrsidedanslefaitquecestunlangagesensiblelacasse,cestdire
quil diffrencie les majuscules des minuscules. Or, cela revt son importance lors de lutilisation de variables et
dobjets.
ConcrtementenJavaScript,Monobjetnestpasidentiquemonobjet.
Celasappliquetouslesmotscls(proprits,mthodes,fonctionsJavaScript)etlusagedoutilsdedveloppement
telAptanaoulditeurdeDreamweaverpermetdefaciliterlareconnaissancedecettesyntaxecarilssonttransforms
encouleursquasiinstantanment.
Uneautrergledesyntaxeconcernelajoutdecommentaires.
2.Ajoutdecommentaires
Comme dans la plupart des langages de programmation, lajout de commentaires dans vos scripts JavaScript peut
savrerfortutile.Eneffet,outrelefaitdepouvoirretrouverplusfacilementlesblocsdinstructionsquevousvenezde
crer, les commentaires pourront vous tre dun immense secours le jour o vous devrez reprendre votre code. La
lisibilitducodeest,dailleurs,undesprincipauxcritresdedterminationdunbonscriptJavaScript.Eneffet,quoi
sert de dvelopper un superbe script si vous devrez prendre deux fois plus de temps pour le modifier quelques
semainesplustard ?
LajoutdecommentairesdansunblocdecodeJavaScriptseffectuedemaniremonoligneoumultilignes.
Lescommentairescontenussuruneseuleligneserontprcdsdudoubleslash//.
Lescommentairesnepouvantpastrecontenussuruneseuleligneserontprcdsde/*etdevrontseterminerpar
*/.
Exemple :
//Ceci est un commentaire monoligne
</script>
/* Ceci est un commentaire
Sur plusieurs lignes */
</script>
Avec certains diteurs HTML ou outil de conception, les commentaires apparaissent avec une couleur
diffrentedecelleducode.
3.Lepointvirgule
ChaquelignedecodeJavaScriptseterminegnralementparunpointvirgule sauf exception de syntaxe que nous

dtailleronsplustard.
Un simple oubli de ce pointvirgule peut vous faire perdre un temps prcieux. La premire tape du dbogage
consisteradonc,vrifiersaprsence.
4.Lindentation
Lorsque les lignes de codes commencent tre nombreuses, il peut arriver que le dveloppeur soit un peu perdu
devant des sigles quil ne parvient plus relier. Il est alors utile dutiliser une rgle de prsentation des scripts qui
consistedcalerversladroitedesinstructionssecorrespondant.Cestnotammentlecaslorsdetestsouboucles
imbriques.

Exemple : afficher dans plusieurs botes de dialogue, le rsultat de deux variables utilises comme compteur dans deux
bouclesimbriques.
var i,j=0;
for (i=0;i<2;i++) {
alert("voici la valeur de mon premier compteur i: "+i);
for (j=0;j<2;j++) {
alert("voici la valeur de mon deuxime compteur j: "+j);
}
}</script>
Iciledcalagedesaccoladesparindentationpermetderetrouverlimbricationdelabouclejdanslabouclei.
LacrationdesbouclesimbriquesseradtailledanslechapitreContrlerlesscriptsaveclesstructuresde
contrles.
LaconnaissancedeceslmentsvavouspermettremaintenantderdigerlapremirepageenJavaScript,quivous
serviragalementdepagederfrence.
- 2- ENI Editions - All rigths reserved

Crationdelapagedetest
AfinderdigerplusefficacementlesscriptsdanslespagesHTML,lemieuxestdecrerunepagemodledanslaquelle
vousinclurezlesbalisessignalantledbutetlafinducodeJavaScript.
LecodeJavaScriptsinsrantleplussouventdanslapartieheaddelapage,voicilecodeHTMLdevotrepagemodle
pourlardactiondetousvosscriptsJavaScript :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page modele en Javascript</title>
document.write("Mettre le code ici");
</script>
</head>
<body>
</body>
</html>
Les deux premires lignes dterminent le type de document et sont ncessaires pour le bon fonctionnement
dinstructionsDHTML,commenousleverronsauchapitreAmliorerlinteractivitavecJavaScriptetCSS.Laquatrime
ligne indique le dbut de la balise head qui nous intresse particulirement. La cinquime ligne permet lajout dune
balise meta indiquant les caractres utiliss, la sixime fixe un titre la page (ici Page modele en JavaScript). Cest
entreleslignes<script language="javascript">et</script>quedevrascrirelaplupartdesscriptsquevousallez
rdiger.Lemplacementestreprparlalignedocument.write("Mettre le code ici").
Toutefois,ilestpossibledeplacerducodeJavaScriptnimporteodanslapage.
Enregistrezcettepagemodlesousunnompermettantdeladistinguerfacilement(pagemodleparexemple).Parla
suite,vouspourrez:
reprendrecettemmepage
enmodifierlescript
etenfinlenregistrersousunautrenom,laidedumenuEnregistrersousdevotrediteurdetexteouHTML.
Noubliezpasdemodifiergalementlecontenudelabalise<title>.Pourplusdescuritetnepascrasercettepage
modle,vouspouvezenmodifierledroitdaccsetluiattribuerlestatutlectureseule.
Exemple:pourcrerunenouvellepageHTMLcomprenantunscriptdcrituredunmessagedanslapage,ilvousfautouvrir
lapagemodlepuisinsrerentrelesdeuxbalises<script language="javascript">et</script>lecodesuivant :
document.write(" la page modle est r-utilisable") ;
Aveccettemthode,vousvousconstituerezfacilementetrapidementunevraiebibliothquedescripts.

CrationdunebibliothquepersonnelledescriptsJavaScript
Aufildutemps,vousserezamendvelopperdenombreuxscriptsquiserontpeuttrerutilisablesultrieurement.
Pour faciliter cette rexploitation, nommez vos pages avec un nom indiquant clairement lobjet de votre script
JavaScript.
Attentionnepasconfondrebibliothquepersonnelledescriptsetbibliothquescommunes,nombreusessur
lenet,etquienrichissentlefonctionnementclassiquedeJavaScript.Linstallationdenouvellesbibliothques
JavaScriptseravoqueauchapitreAmliorerlinteractivitavecJavaScriptetCSS.

Messagesderreuretconseilspourledbogage
LefaitquelesnavigateursinterprtentdiffremmentlesscriptsJavaScript,imposedefairedestestsavecchacundes
navigateurs.Cependant,lemeilleurconseilestdetesterlesscriptsdaborddansFirefox/Mozillaquidisposedunoutil
dedbogagepluspuissant,puis,unevrificationdansInternetExplorerserancessaire.Pourvousaiderunpeudans
letraitementdeserreurspossibles,voiciunetypologiesommaireentroisgrandescatgories :
Tout dabord, il se peut que rien ne se passe au chargement de la page. Il faut savoir que JavaScript effectue un
contrleduscriptavantdafficherquoiquecesoit.Silrencontreuneerreur,lescriptsinterromptsansmmeallerplus
loin.Ceserreurssontsouventduesunesyntaxeapproximativeoudesfautesdefrappes.
Il est possible galement de rencontrer non pas des erreurs au chargement mais plutt lexcution. Cela signifie
gnralementquelesobjets,leursproprits,leursmthodesouencorelesfonctionsnecorrespondentpasousont
malutiliss.
Enfin,leserreurslesplusdlicatesdtectersontdeserreurspurementlogiquesquisurviennentlorsquelestestsdu
scriptnontpastsuffisammentnombreux.Ainsi,lescriptpeuttoutfaitbienfonctionnerdansuncasdefigureet
dclencheruneerreuravecdautresvaleursoudautreschoix.Nhsitezpastestertousvosscriptsavecdesvaleurs
diffrentesetobservezbienlesrsultatsobtenus.Parprudence,silnedisposepasdunoutilpermettantdecontrler
leurtat(commeAptanaouFirebugparexemple),ledveloppeurdevraitparsemersonscriptdenombreusesbotes
dedialogue.Cellescipermettrontdafficherlecontenudesvariablestoutaulongdudroulementduscript.Dunpoint
devuegnral,lorsquuneerreursurvientdansledroulementdevotrescript,ilestutiledechercherdanslabarre
dtatdesonnavigateurlaprsenceduneventuelleicnesignifiantquelerreuratrepre(surInternetExplorer
enbasgauche,enbasdroitesurFirefox/Mozilla).Encliquantsurcelleci,ilvousserapossibledeconnatrelaligne
du script contenant lerreur.Maisattention,cetteinformationnest pas forcment prcise. Lindication du numro de
ligne informe simplement quune erreur a t rencontre partir de cette ligne. Il faut donc remonter quelquefois
plusieurs lignes plus haut, avant de trouver le problme lorigine de larrt du script. Une nouvelle fois, toutes les
astuces (colorisation du code, indentation) sont les bienvenues, car ce travail, long et fastidieux, reste la principale
causedudsintressementdeJavaScript.
Cesconseilsconstituentunepremireaideaudbogagemaisilsnesuffisentpaslorsquelesproblmessavrentplus
dlicat.Danscecas,ilexistedesoutilspermettantdefaciliterunpeucetravail.

LesoutilsdedbogageJavaScript
Malgr le fait quil soit possible de rdiger des scripts facilement, lutilisation de certains outils de conception peut
savrerutilenotammentlorsdeltapededbogage.Eneffet,ilserapossibledutiliseralorsdespointsdarrts,de
connatre la valeur des variables, autant daidesquivousserontutilesdanscettetapecrucialequest la recherche
deserreurs.
Nousallonsprsenterquelquesunsdecesoutils.
1.MicrosoftScriptDebugger
En utilisant Microsoft Script Debugger, vous disposez dun outil daide la syntaxe et de dbogage car lorsque le
navigateur Internet Explorer rencontre une erreur dans le droulement dun script, il est possible de basculer
directementdansMicrosoftScriptDebuggerauniveaudelaligneposantunproblme.
IlsagitdulogicieldedbogagedeMicrosoftmaissonutilisationnestpastrsintuitiveetilnest disponible quen
anglais. Vous pouvez tout de mme le tlcharger auprs du centre de tlchargement de Microsoft ladresse
suivante :http://www.microsoft.com/downloads/
Vousaurez,peuttre,besoindinstallerauparavantlelogicielGenuinedeMicrosoft.
2.MicrosoftFrontPage/AdobeDreamweaver
Les diteurs de code HTML permettent, en gnral, de visualiser le code de la page et ainsi daccder la partie
JavaScript. Mais ils ne disposent pas de fonctionnalits permettant dajouter des points darrts et de connatre la
valeurdesvariables.Decefait,ilsconviennentmoinsaudbogagedescriptcomplexesmaisapparaissentcommeun
bonpontdepassageentrelemondeHTMLetleJavaScript.
3.Venkman
Cest un complment de Firefox/Mozilla (et sutilise donc avec lui), qui permet de visualiser le code JavaScript,
dajouterdespointsdarrtsetdecontrlerlavaleurdesvariables.Ilestintgrdirectementaunavigateuretpeut
trelancparlemenuOutilsJavaScriptDebugger.

4.Firebug
Voici un autre complment de Firefox/Mozilla permettant les mmes fonctionnalits que Venkman mais dont
lapproche est peuttre plus intuitive. Cest cet outil que je vous conseille dinstaller. Vous pourrez le trouver
facilementenletlchargeantladressesuivante :
https://addons.Firefox/Mozilla.org/fr/Firefox/Firefox/Mozilla/addon/1843
Unefoislefichiertlcharg,ilrestelinstallerenouvrantlefichierparlemenuFichierOuvrirunfichierpuis
redmarrerFirefox/Firefox/Mozilla.
FirebugseraalorsdisponibleparlemenuOutilsFirebug.
Il est facile de constater que les outils sont plus nombreux avec Firefox/Mozilla. Qui plus est, les extensions sont
nombreuses,gratuitesettlchargeablesladresse :https://addons.Firefox/Mozilla.org/fr/firefox/
Cest pour cela que Firefox/Mozilla reste le navigateur sur lequel il est plus facile deffectuer un dbogage, de

retrouverdesvariables,leurvaleurainsiquelesobjetssurlesquelslaprogrammationJavaScriptsappuie.
Une fois votre outil slectionn et votre page modle cre, il est possible daborderlesprincipauxconceptsdela
programmationorienteobjet.

Langagedescriptetlangagedeprogrammation
Langagedescriptetlangagedeprogrammationsontsouventmisenopposition,pourtant,enlesregardantdeplus
prs,ilsseressemblentsurbiendespoints.
Dun ct, les langages de programmation ncessitent un diteur spcifique et un compilateur. La rdaction dun
programmeestgalementconsidrecommepluscomplexe.Lesinstructionscritesparunlangagedeprogrammation
sontinterprtesdirectementparleprocesseurdelamachine.Danscettecatgorie,nousretrouvonsdeslangages
telsqueleCouleJava.
Dunautrect,leslangagesdescript(dontfaitpartieJavaScript)permettentdenchanerunesuitedinstructionsqui
sont excutes par un autre programme (ici le navigateur Internet). Aucun compilateur nest ncessaire et un seul
diteur de texte suffit. Dune manire gnrale, la rdaction de scripts est considre comme plus aise que la
rdactiondeprogrammes.
Pour simplifier, il est possible de dire que JavaScript fait appel des programmes, comme les navigateurs (Internet
Explorer, Firefox/Mozilla, etc.), pour excuter une srie dinstructions de manipulation dobjets (fentres, champs de
pageInternet,etc.)afindaccompliruneapplication.
LamanipulationdecesobjetsseffectueselonunetechniqueappeleProgrammationOrienteObjetouPOO.

LesprincipesdelaProgrammationOrienteObjet
Ce type de programmation est n dans les annes 60, puis a connu un fort dveloppement partir des annes 80
notamment avec Smalltalk. Aujourdhui, de nombreuses applications sont labores partir de la programmation
orienteobjetqui,commesonnomlindique,sebasesurlanotiondobjet.
1.Objets,MthodesetProprits
La Programmation Oriente Objet est un paradigme informatique cestdire une faon de voir les choses. En fait,
avec la Programmation Oriente Objet et notamment avec JavaScript, tous les lments dune page web (fentre,
boutons,formulaire,champsdetexte,etc.)sontconsidrscommedesobjetsquevouspouveztesteretmanipuler.
Maiscesobjetsnontpastouslammeimportance.Eneffet,certainsdpendentdautres.Parexemple,unformulaire
peuttrecomposdecasescocheroudechampstextequisontdonc,dpendantsduformulaire,maisleformulaire
luimme, est dpendant du document dont il fait partie. Les termes notion de hirarchie sont utiliss pour
caractrisercettedpendance.LediagrammesuivantreprsentelahirarchiedesobjetsJavaScriptprdfinis:
Pour atteindre un objet, il est ncessaire de suivre le chemin (un peu comme dans un disque dur), en partant de
lobjet le plus important hirarchiquement pour, finalement, dsigner celui qui lest le moins. chaque changement
dobjet,unpointestajout.Cetteformedesyntaxesenommesyntaxepointe.Ainsi,dansunepagecomportantun
formulairenommformu,contenantluimmeunchampNom,silondsireaccdercechamp,lasyntaxesuivante
serautilise :
document.formu.nom ;
Maiscenestpastout,enplusdatteindreunobjetprcisdansunehirarchie,lasyntaxepointedsignelaccs
des mthodes ou des proprits qui permettent de manipuler ou de dcrire ces objets. Ainsi, les proprits
constituent un ensemble dattributs qui permettent den modifier lapparence et les mthodes reprsentent des
actionsralisablesparcetobjet.PourexpliquerplusconcrtementlaProgrammationOrienteObjet,lexempledune
automobile est souvent pris. Selon cette mtaphore, lautomobile reprsente un objet qui se caractrise par un
certain nombre de proprits (sa couleur bleue ou rouge, sa forme monospace ou berline). Paralllement ces
proprits,cetobjetpeutraliseruncertainnombredactions(avancer,tourner,reculer,etc.)quicorrespondentce
que lon appelle des mthodes. Les mthodes et les proprits ne sont pas forcment les mmes pour tous les
objets.Ilarrivequeplusieursobjetsdisposentdelammepropritoudelammemthode,maiscelanestpas
obligatoire.Enfait,pourbienutiliserJavaScript,ilestncessairedebienconnatrelemodledobjetetlesmthodes
etpropritsdisponibles.
Dun point de vue syntaxique, le point est utilis pour sparer lobjet de sa proprit ou de sa mthode. Un des
principauxobjetsprdfinisdeJavaScriptestlobjetWindowquicorrespondlafentredunavigateur.
Pourprendreunexempleconcret,sivousdsirezimprimerlapageInternetactive,vousutiliserezlamthodeprint()
(imprimer) de lobjet window (fentre), qui est dailleurs lobjet le plus lev dans la hirarchie. Ainsi, le script
JavaScriptsuivantpermettradimprimerlapageactive :
window.print();
</script>
Lobjet window tant le plus lev dans la hirarchie, il nest pas ncessaire de le nommer chaque
manipulation.Lescriptpeutalorsscrireencoreplussimplement.Parlasuiteetparsoucidesimplification,
nousneferonsplusrfrencelobjetwindow.

print();
</script>
Autreexemple,vousdsirezafficherdanslapagelaproprittitledelobjetdocument(quipermetdobtenirletitre
delapage),ilestpossibledelefaireparlescriptsuivant :
document.write(document.title);
</script>
Ici,lamthodewrite()permetdafficher,dansledocument,lavaleurcorrespondantlaproprittitledelapage.
En JavaScript, il existe deux types dobjets, dun ct les objets prdfinis qui se retrouvent dans la hirarchie
dobjets dont nous avons dj parl et dun autre ct, les objets crs par le dveloppeur luimme, lors de la
crationdunefonction,commenousleverronsdanslechapitreFonctionsetvnements.Pourcequiestdesobjets
prdfinis,chaquenouvelleversiondeJavaScriptenrichitlemodleenpermettantdaccderdenouveauxobjets
ou en ajoutant de nouvelles mthodes et proprits. Cet aspect plutt positif entrane invitablement une autre
consquence,moinsrjouissante.Eneffet,lesvisiteursnutilisantpasladernireversiondunavigateur,nepourront
pas disposer des nouveaux objets, proprits ou mthodes. Le script renverra immanquablement un message
derreur. chaque proprit ou mthode, correspondra alors une version de chaque navigateur !!! Un vritable
cassette premire vue, mais avec lexplosion dInternet (et la facilit des mises jour), la grande majorit des
internautes dispose aujourdhui dune version rcente et adapte. Au moment de la rdaction de cet ouvrage les
versions7.0dInternetExploreret2.0deFirefox/Firefox/Mozillasupportentlaversion1.5deJavaScript.
VersiondeJavaScript Navigateurscompatibles Ajouts/Amliorations
InternetExplorer3.0 VersiondebasedeJavaScript
1.0 conformmentladirectivede
NetscapeNavigator2.0 lECMA.
InternetExplorer4.0 Ajoutsdenouveauxvnements.
1.1
NetscapeNavigator3.0 Correctiondequelquesbugs.
Ajoutdelinstructionswitch.Ajout
InternetExplorer4.0 depropritsdelobjetNavigator
1.2 etdenouveauxvnements.
NetscapeNavigator4.0 Intgrationdesexpressions
rgulires.
AmliorationsdelobjetDate.
1.3 NetscapeNavigator4.5
Correctiondequelquesbugs.
Dveloppuniquementpourles
serveursdeNetscape.Ajoutsdes
exceptionsjetettry ... catch
Ajoutdenouveauxoprateurs
1.4 Netscapeserveur (instanceOf).
Changementsapports
LiveConnect.
Modificationsapporteslobjet
Array.
Versionbasesurles
NetscapeNavigator6.0 spcificationsECMA2623e
1.5
InternetExplorer6.0 dition.Ajoutdelagestiondes
exceptions.
AjoutdelatechnologieE4X
permettantdegrerdes
Firefox/Mozilla1.0 documentsXML.
1.6
InternetExplorer6.0 Ajoutdesmthodesevery(),filter
(),forEach(),map(),some()de
lobjetArray.

Firefox/Mozilla2.0 Ajoutdenouveauxmotscls
1.7 yield,let,deladfinitiondes
InternetExplorer6.0 tableauxparcomprhension.
Ajoutdesfermetures
dexpression,desexpressions
1.8 Firefox/Mozilla3.0 gnratrices,desmthodes
reduce()etreduceright()pour
lobjetArray.
PourutiliseruneversionspcifiquedeJavaScript(parexemplelaversion1.7),ilestplusprudentdeleprciserlors
deladclarationdelabalisescriptparlinstruction :<scriptlanguage="javascript1.7">
Lavraiedifficultrsideplusdansletypedunavigateur,carcertainesmthodesoupropritspeuventnepastre
supportesparcertainsnavigateursetacceptespardautres.Uncoupdoeiljetsurletableaudesmthodeset
propritspermetdvitertoutepertedetemps.CestdonclobjetquirestellmentdebasedulangageJavaScript,
etsivousavezbesoindefaireappelplusieursmthodesoupropritspourunobjet,pluttquedeciterplusieurs
foislemmeobjet,vouspouvezutiliserlemotclwithdanslinstruction.
Ilsuffitdedbuterlinstructionparlemotclwith,demettreentreparenthseslobjetpuisdutiliserlesproprits
oumthodesbasessurcetobjetenlesincluantentredesaccolades.Toutcequisetrouveentrecesaccoladesse
rapportelobjetcit.Lasyntaxeestdonc,lasuivante :
with(nomdelobjet) {
Instructions de manipulation des proprits ou mthodes ;
}
Exemple :afficherlecontenudunchampdeformulaireavantetaprsmodificationdelavaleurdelavariable.
<html>
<head>
<title>Utilisation de With</title>
function controle() {
with (document.form1.nom) {
value="premiere valeur";
alert(value);
value="nouvelle valeur";
alert(value);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<p>
<input name="nom" type="text" id="nom">
</p>
<p>

<input type="button" name="Submit" value="Bouton" onClick="controle()">
</p>
</form>
</body>
</html>
Ici, lobjet correspondant au champ texte de formulaire est, dabord, dclar par linstruction with
(document.form1.nom). Il est ensuite inutile de reprendre la syntaxe document.form1.nom, il suffit dajouter les
instructions modifiant successivement la valeur de lobjet. Laffichage successif de plusieurs botes de dialogues
permetdesuivrecettemodificationdevaleur.
VouspourriezpenserquunedesconditionsessentiellesdelapprentissagedelaProgrammationOrienteObjetest
la connaissance parfaite de lensemble du modle dobjets JavaScript. Pourtant, il est prfrable, pour dbuter, de
connatrelespropritsetmthodesessentiellesdesobjetsquisontmanipulsleplussouvent.

MthodesJavaScript
1.alert()
La mthode alert() de lobjet window permet laffichage dune bote de dialogue comprenant un message
davertissement.Lemessageafficherdanslabotededialoguesetrouvantentreguillemets,ilestpossibledycrire
avecdesaccents,desespacesettoutautrecaractrequevoussouhaitezvoirsafficher.Vouspouvezaussiafficher
des variables la place ou en plus du message, comme nous le verrons au chapitre Utilisation des constantes,
variablesetoprateurs.
Lorsdelaffichagedecettebotededialogue,JavaScriptstoppesondroulementetattendquelutilisateurcliquesur
leseulboutonOK.
Cette mthode, mme si elle semble limite au premier abord, vous sera bien utile par la suite lorsquil sagira
deffectuerundbogageduscriptetdevrifierlavaleurdesvariables.
Exemple :afficherunebotededialoguedetypealertavecunsimplemessage.
alert("Ceci est une bote de dialogue affiche par JavaScript");
</script>
Sivoussouhaitezafficherunmessagesurdeuxlignes,vousdevezajouter\nlafindelachanedecaractresdela
premireligne.
alert("Ceci est une bote de dialogue affiche \n sur 2 lignes");
</script>
Mais lemploi de la mthode alert() reste limit, car lutilisateur na pas de possibilit pour entrer des donnes et
rpondreainsiaumessagequiestapparu.Pourcela,ilfaututiliserdautresmthodesfourniesparJavaScript.
2.confirm()
Lamthodeconfirm()delobjetwindowafficheunebotededialogueavecunmessagesuividesdeuxboutonsOKet
Annuler.
Exemple :afficherunebotededialogueauchargementdelapageavecdeuxboutonsderponseparlamthodeConfirm().

confirm("ok = 0, Annuler = 1");
</script>
Lagrandediffrenceaveclamthodealert()cestquenfonctiondelarponse,cestdireduclicsurOKouAnnuler,
vouspouvezrenvoyerunevaleur(truepourOKetFalsepourAnnuler)versunevariable.Ilsuffitdefaireprcderla
mthode confirm() par la dclaration de la variable rponse. Lutilisation des variables est dtaille au chapitre
Utilisationdesconstantes,variablesetoprateursmaisvouspouveztoutdemmemodifierlescriptprcdent :
Exemple :afficherunebotededialogueavecdeuxboutonsOKetAnnuler,puisrenvoyerlavaleurdelaquestionposedans
uneautrebotededialogue.

var reponse=window.confirm("ok = true, Annuler = false");
alert("la valeur de la variable rponse est : "+reponse);
</script>
Pourdbuter,ilfautdclarerunevariableappele,ici,reponseetluiaffecterunevaleurquicorrespondauchoixde
lutilisateur (cestdire la valeur 0 ou1). Ensuite, il suffit dafficher la rponse laide de la mthode alert() en
prenantsoindemettreentreguillemetslemessagefaireapparatre,dajouterloprateurdeconcatnation+ainsi
quelavariable.Vouspouvezainsiconstruireunevritablephrasecommerponse.
Mmesilamthodeconfirm()permetundbutdinteraction,larponsenepeutcorrespondrequdeuxvaleursau
plus.Danslecasdunerponseouverte,ilfautpasserparunetroisimemthode.
3.prompt()
Lamthodeprompt()permet,enplus,dafficherunmessagepoursaisirunevaleurdansunchamp,appelinvite.Il
estdoncpossibledesaisirunerponseouverte,contrairementauxdeuxprcdentesmthodes.Labotededialogue
dispose de deux boutons, le bouton OK permet daffecter la valeur saisie dans linvite, une variable, le bouton
AnnulerentranelaffectationdelavaleurNulllavariable.Ilestaussipossibledafficherunevaleurpardfautdans
lechampservantrecevoirlarponse,etsielleneconvientpaslutilisateur,celuicipourrasaisirpardessus.
Lasyntaxedelamthodeprompt()estlasuivante :
Prompt("texte afficher", "valeur par dfaut") ;
Exemple : afficher deux botes de dialogue afin de saisir le nom et le prnom du visiteur puis en ouvrir une troisime
affichantlenomcomplet.

nom=prompt("Quel est votre nom ?", "Saisir votre nom ici");
prenom=prompt("Quel est votre prenom ?", "Saisir votre prenom ici");
alert("Votre nom complet est : \r"+nom+"\r "+prenom);
</script>
Dansunpremiertemps,lutilisationdelamthodeprompt()permetdedemanderlenometleprnomauvisiteur.Les
valeurssaisiessontautomatiquementaffectesdeuxvariablesnometprenom.Ensuite,ilestfaciledeconstruirele
messageaffichparlamthodealert().Cemessageseraladditiondunechanedetexte(placeentreguillemets),et
devariablesquisafficherontsurdeuxlignesgrcelusagede\r.
Attention, le symbole \r nest pas pris en charge par Firefox/Mozilla. Dans ce contexte, les rponses
saffichentsurlammeligne.
Lutilisationdecesmthodesdelobjetwindowestlieauxvariables,dontilfautconnatrelefonctionnement.

Typologieetutilisationdesconstantes
Lesconstantessontdeslmentsdinformations,dontlesvaleurssontindiquesexplicitementdanslecodeJavaScript.
Enrglegnrale,lesvaleursdesconstantessontdterminesaudbutduscriptetsontvalablesjusqulafin.Cette
affectationdelavaleurdesconstantesseffectueselonlasyntaxesuivante :
Ma_constante =valeurdelaconstante
Lavaleurdelaconstanteinscritedroitedusignegaleststockedanslapartiedelammoiredsignegauchedu
signegaletnomme,danscetexemple,Ma_constante.
LesconstantesJavaScriptpeuventtreclassesenplusieurscatgories :
1.Constantesarithmtiques
Elles correspondent un nombre (type number), constitu dune suite de chiffres. Il existe plusieurs types de
constantesarithmtiquesenfonctiondeleurmodedcriture :
Laconstantedcimaleestconstituedunesuitede17chiffresmaximumallantdezroneuf.Laconstantedcimale
peuttrengativeetdonc,treprcdedusignemoins.
Exemple :
64ou64ou64.14ou3.1415926535sontdesconstantesdcimales.
Les constantes dcimales utilisent le point et non la virgule pour sparer la partie entire de la partie
fractionnaire.Sivousutilisezlavirgule,lapartiefractionnairenestpaspriseencompte.
La constante octaleestconstituedunesuitedechiffresallantdezrosept.Laconstanteoctaledbuteparun
zroetdoittreobligatoiremententireetpositive.
Exemple :
02542571estuneconstanteoctale.
Laconstantehexadcimaleestconstituedunesuitedeseizecaractrescomprenantdeschiffresdcimauxdezro
neufauxquelsonajoutedeslettresdeAF.Laconstantehexadcimaledoitcommencerparunzrosuividunx.
Exemple :
0xF45Bestuneconstantehexadcimale.
2.Constanteschanesdecaractres
Elles correspondent une suite de caractres qui peuvent tre des lettres ou des chiffres ou une association des
deux.Lachanedecaractresdoittreencadrepardesguillemetsoudesapostrophes.
Exemple :
"ma constante texte"ouma constante textesontdesconstanteschanesdecaractres.
Unevariabletextepeuttrevide,danscecasoncritdeuxapostrophesouguillemetssuccessifssansrien
lintrieur.
3.Constantesboolennes
Ellesnepeuventcorrespondrequdeuxvaleurs,trueoufalse,critessansguillemetsniapostrophesettablies,le
plusgnralement,enfonctionduntestdansdesstructuresdecontrle,quenousdtailleronsauchapitreContrler
lesscriptsaveclesstructuresdecontrles.
Exemple :
Reponse = truepermetlaffectationdelavaleurboolennetruelaconstanteReponse.
Exemplegnralsurlesconstantes :dclareruncertainnombredeconstantesenfonctiondutypeetdelasyntaxe,puis
afficherlesrsultatsdanslapageparlamthodedocument.write().

constante_numerique=1.45226;
constante_texte1="ma constante texte";
constante_texte2=ma constante texte;
constante_texte3="1.45226";
constante_texte4="Je suis d\accord";
constante_chaine_vide=""
constante_infinie=7.6E+333*6.7E+333;
constante_nombre="ceci nest pas un nombre";
constante_indefinie= undefined;
document.write ("Voici ma constante numrique :
"+constante_numerique+"<BR>");
document.write ("Voici ma constante texte1 :
"+constante_texte1+"<BR>");
document.write ("Voici ma constante chane vide :
"+constante_chaine_vide+"<BR>");
document.write ("Voici ma constante infinie :
"+constante_infinie+"<BR>");
document.write ("Ma constante est-elle un nombre :
"+isNaN(constante_nombre)+"<BR>");
document.write ("Voici la constante_indefinie :
"+constante_indefinie);
</script>
Ilsuffitsimplement,ici,deffectuerdesdclarationsetdesaffectationsdeconstantespuisdenafficherlesvaleurspar
lintermdiaire de la mthode document.write(). Celleci permet dcrire directement dans la page et lutilisation de
<BR>permetdefaireunretourlaligneafindeclarifierlaffichage.Ilfautnoter,toutdemme,lutilisationdumotcl
undefinedcorrespondantuneconstanteJavaScript.
4.Autresconstantes
Enplusdesconstantesdfiniesparlutilisateur,lECMAadfiniquelquesconstantes :
Infinity
Cette constante correspond un nombre infini, suprieur 1.7976931348623157E+10308 ou infrieur

1.7976931348623157E+10308 .

Cetteconstanteestrenvoyecommersultatunedivisioncomportantundiviseurgalzro.
Exemple:
a=5; b=0;
resultat=a/b;
alert(resultat);
</script>
NaNouisNaN
Cette constante qui signifie (Not a Number) permet de vrifier si la variable est bien un nombre. Il faut utiliser la
syntaxesuivanteavecisNaN :
isNaN(variable ou constante) ;
IsNaNrenvoietruesilavaleurtestenestpasunnombreetfalsesicelaenestun.
Undefined
Cette constante prend la valeur true dans deux types de situations. Le premier correspond au cas o une variable
nestpasdclare,lesecondcorrespondaucasounevariableestbiendclaremaisnapasdevaleuraffecte.
Maisundefinedcorrespondgalementuntypedevariable.Ilestfrquentdelutiliseraveclemotcltypeofdansun
testpourconnatreltatdelavariable.
Mmesileurutilitnepeuttreremiseencause,lesconstantessontbeaucoupmoinsemployesquelesvariables,
dontlamanipulationestsystmatique.

Typologiedesvariables
Contrairementauxconstantesdontlavaleurrestefixetoutaulongduscript,lesvariablespeuventchangerdevaleur
soitparunenouvelleaffectationdirecte,soitparuncalculdanslecodeouencoreparuneaffectationparlamthode
prompt(). Une variable peut, dailleurs, changer de valeur tout au long du droulement du script puisque JavaScript
retientladerniredfinitiondelavariable,cestlquersidelintrtdeleurutilisation.Inversement,silavariablene
doitpaschangerdevaleurduranttoutledroulementduscript,ilestpossibledelatransformerenconstantelaide
du mot cl const. Autre diffrence mais cette foisci avec les autres langages de programmation, JavaScript est
faiblementtypcestdirequelesvariablesnontpasbesoindecorrespondreuntype(texte,numrique,boolen)
pourfonctionner.Enfait,cestlinterprteurJavaScriptquidfinitletypedevariableaumomentdesonexcution.Cela
impliqueunavantageetuninconvnient.Lavantagersidedanslefaitquensepassantdeladterminationdutype,
vous conomisez du code, linconvnient cest que, parfois, vous pouvez aboutir des incohrences : par exemple,
additionner du texte et des nombres sans que cela gne JavaScript. Pour conclure, les types de variables
correspondentceuxdesconstantes(texte,numriqueouboolen),etilestdonc,simpledelesutiliser.

Lestapesrespecterpourunebonneutilisationdesvariables
Afin de bien manipuler les variables, il est utile den respecter les tapes de cration. En rgle gnrale, il faut
commencerparseproccuperdelaportedesvariablespourensuiteeffectuerleurdclarationetleuraffectation.
1.Portedesvariables
Ilfautseposerlaquestiondesavoirsilavariabledoittredisponibletoutaulongduscript,ousielledoittrelimite
lafonctiondanslaquelleelleatcre.Cestcequelonappellelaportedesvariables.
Ilexistedeuxtypesdeportesdiffrentes.Lorsquunevariableestdfinielintrieurdunefonction,nousleverrons
danslechapitreconsacrauxfonctions,saporteestditelocale.Danscecas,savaleurnepeutpastrercupre
dansuneautrefonction,sansenfaireexplicitementrfrence.Parcontre,lorsquunevariableestdfiniedirectement
danslescriptetsansapparteniraucunefonction,saporteestditeglobale.Savaleurest,alors,disponibletout
moment.
2.Dclarationdevariables
La dclaration dune variable seffectue laide du mot cl var et selon la syntaxe suivante, on parle alors de
dclarationexplicite :
var nom_de_la_variable ;
Ilestpossiblededclarerplusieursvariablessuruneseuleligne.Danscecas,ellesserontsparesparunevirgule.
var mavariable1, mavariable2, mavariable3 ;
Danscecasdefigure,lesvariablesnayantpasreudevaleurs,ellessontditesundefined.Aussi,ilestimportantde
voircommentvouspouvezraliserlaffectationdesvariables.
Mais,JavaScriptestunlangageparticulirementsoupleetilautorise,aussi,ladclarationdesvariablessansutiliserle
motclvar,celasappelleunedclarationimplicite.
3.Affectationdevariables
EnJavaScript,laffectationpeutseffectuerselontroismaniresdiffrentes.Ilestpossibledelefairedirectementdans
lecodeparlusagedusignegal(commepourlesconstantes,lavaleursituedroitedusignegalestaffectela
variabledontlenomfiguregauchedusignegal).
var mavariable = 10 ;
Ilestpossibledelefaireindirectementparlintermdiaireduncalculimpliquantconstantesouvariables.
var somme=mavariable1+mavariable2 ;
Enfin,ilestpossiblededemanderlutilisateurunevaleurquiseraaffectelavariableparlamthodeprompt(),vue
prcdemment.
var reponse=prompt(" Quelle est la valeur de cette variable ? ") ;
Ce type de syntaxe mme si elle respecte la lettre la bonne procdure de programmation nest pas la seule. En
effet,cetypededclarationdit explicite nestpasobligatoireetilestpossibledefaireunedclarationimplicitedes
variablessansutiliserlemotclvar.
Lasyntaxedevientalors :
mavariable = 10 ;
ouencore :
somme=mavariable1+mavariable2 ;

Unefoislesvariablesaffectesdeleursvaleurs,ilestpossibledelesafficher.
4.Affichagedesvariables
Laffichagedesvariablesseffectue,gnralement,parlintermdiairedesmthodesalert()ouconfirm(),dtaillesau
chapitreInitiationlaProgrammationOrienteObjetetJavaScript.
Exemple1 :afficherdansunebotededialoguelersultatduneadditiondedeuxvariables :
var somme, nombre1=10;nombre2=5;
somme=nombre1+nombre2;
alert("le rsultat de laddition est : "+somme);
</script>
Toutdabord,lapremireinstructionpermetdedclarertroisvariables(deuxpourchacundesnombresetunepourle
rsultat) pour permettre la ralisation du calcul. videmment, il est possible dajouter autant de variables que lon
dsireparuncalculpluscomplexe.Linstructionsuivantepermetdeffectuerlecalcul.Ensuite,lersultatdelopration
estaffichaprsunechanedetextedeprsentation.
Le symbole + est, dans ce cas, un oprateur de concatnation de chanes et non pas un oprateur
arithmtique,commecestlecasdanslaligneprcdente.
Exemple2 :afficherlersultatdunemultiplicationdanslapageentreunevariablegaleneufetuneautrevariable,dont
lavaleurserasaisiedansunebotededialogueparlutilisateur.
var nombre1=9;
var nombre2=prompt("Quel nombre voulez-vous multiplier 9 ?");
var produit=nombre1*nombre2;
document.write("le rsultat de la multiplication est : "+produit);
</script>
Dansunpremiertemps,ilfautaffecterlavariablenombre1aveclavaleur9.Puis,ilfautdemanderlutilisateurde
saisir une valeur qui est affecte la variable nombre2. Tant que lutilisateur nariensaisi,lavariablenombre2est
undefined.Ensuite,lescripteffectueleproduitdesdeuxvariables.Enfin,lersultatestaffich.
Exemple3 :afficherlersultatduncalculdecotduntrajetpourunvhiculeenfonctiondelaconsommationmoyenne.
Lutilisateur doit renseigner plusieurs botes de dialogue afin dobtenir la marque, la consommation moyenne pour cent
kilomtres,lecotdulitredecarburantutilisetlenombredekilomtreseffectus.

var marque=prompt("Quelle est la marque de votre vhicule ?",
" saisissez ici la marque de votre vhicule");
var consommation=prompt("Quelle est la consommation en litres de
votre vhicule pour 100 kilomtres ?", "saisissez ici la
consommation en litres de votre vhicule");
var prix_litre=prompt("Quel est le prix en euros du litre de votre
carburant ?", "saisissez ici le prix du litre de carburant");
var nb_kilometres=prompt("Quel est le nombre de kilomtres de votre
parcours ?", "saisissez ici le nombre de kilometres de votre parcours");
var cout_total=nb_kilometres/100*consommation*prix_litre;
alert("Le cout total dun parcours de " + nb_kilometres +
" kilomtres effectu avec un vhicule de marque " + marque + "
consommant " + consommation + " litres pour 100 kilomtres en moyenne,
avec un prix au litre du carburant de " + prix_litre + " euros
est de " + cout_total + " euros");
</script>
Ilsagittoutdaborddedemanderlutilisateurderenseignertouteslesvariablesncessairesparlintermdiairede
la mthode prompt(). Les variables marque, consommation, prix_litre et nb_kilomtres sont ainsi affectes. Avec
toutes ces informations, il faut calculer le cot total du trajet en divisant le nombre de kilomtres par 100 et en
multipliantlersultat,parlaconsommationmoyenneetleprixaulitre.Pourterminer,ilestplusagrabledafficherle
rsultatfinaldansunebotedetypealert()enalternantlesaffichagesentrelesvariablesetleschanesdecaractres.
5.Transfertdevaleursentrevariablesetconversiondetype
Pourdonnerlavaleurdunevariableuneautre,ilsuffitdutiliserlesignegalpourtransfrerlavaleurdelavariable
droitedusignegaldanscellesituegauchedusignegal.
var mavariable2=mavariable1 ;
Ilestpossibledeconvertirunevariableduntypeunautre(gnralementdetexteversdunumrique)grceaux
mthodesparseInt()(conversiondetexteversunnombreentier)etparseFloat()(conversiondetexteversunnombre
dcimal).Lasyntaxeestlasuivante :
var variablenumerique=parseInt(variabletexte) ;
var variablenumerique=parseFloat(variabletexte) ;
Exemple :afficherlavaleurdunevariableavantetaprsconversionparlamthodeparseInt().

var nombre=15;
var nombreentexte="10";
var nombreenchiffre=parseInt(nombreentexte);
somme=nombre+nombreentexte;
alert("Voici le rsultat avant conversion : "+somme);
somme=nombre+nombreenchiffre;
alert("Voici le rsultat aprs conversion : "+somme);
</script>
Commedhabitude,lesvariablessontdclaresetaffectesdsledbutduscript.Lavariablenombrecorrespondau
nombre 15, tandis que la variable nombreentexte est affecte de la chane de caractres 10. Il nest, donc, pas
possibledeffectueruncalculaveccesdeuxvariables.Lavariablenombreenchiffredclareensuite,correspondla
conversion en chiffre de la variable nombreentexte. Pour tre certain de la russite de la conversion, il est possible
daffichertoutdabordlersultatdelasommeavantconversioncorrespondantnombre+nombreentexte(lersultat
correspond la concatnation des deux chanes de caractres : 1510), puis dafficher le rsultat aprs conversion
nombre+nombreenchiffre(lersultatestde25,prouvantquelaconversionsestbiendroule).
Danslecasolaconversionnepeutseffectuer,lavaleurNaN(isNotaNumber,cequisignifienestpasunnombre)sera
renvoye.
linverse, il est possible de convertir une variable numrique en texte par lintermdiaire de la mthode toString()
dontlasyntaxeestlasuivante :
Var variabletexte=variablenumerique.toString() ;
Exemple :afficherlersultatdelaconversiondenombreentextedunevariable.
var nombreenchiffre=15;
var nombreentexte=nombreenchiffre.toString();
total = 10+nombreentexte;
alert("Le total est :" + total);
</script>
Le dbut correspond laffectation du chiffre 15 la variable nombreenchiffre. Ensuite, il faut appliquer la mthode
toString()lavariablepourlaconvertirentextedansnombreentexte.Aprsconversion,ladditionentrelavariable
numriqueetlavariableconvertierenvoieuneconcatnationdevariablestextes,dmontrantainsiquelaconversion
sestbiendroule.

Rglesdenommageetmotsrservs
Jusquprsent,nousavonsutilisdesnomsdevariablestrsconventionnelsetrelativementexplicites,maisaufuret
mesure de votre progression, vous serez peuttre tent dutiliser des noms de variables plus personnaliss.
Cependant,ilestimpratifdesuivrecertainescontraintesetderespectercertainesrgles,souspeinedevoirlescript
renvoyeruneerreur.
Ainsi, les noms des variables ne peuvent pas contenir despaces. En gnral, il faut utiliser lunderscore _ pour
symboliserunespace.
Demme,lepremiercaractredunnomdevariablenepeutpastreunpoint.
Enfin,lesnomsdesvariablespeuventcontenir,indiffremment,desmajusculesoudesminusculesmaisilestimportant
de bien respecter ce changement de casse, car JavaScript y est sensible. Cela signifie que Mavariable et mavariable
sont,pourJavaScript,deuxvariablesdiffrentes.
1.Conseilspourlenommage
Il est prfrable de nommer les variables explicitement, cestdire pour ce quelles reprsentent plutt que de
prendredesnomsdevariablestotalementabstraites.Ainsi,vouspourrezlesretrouverplusfacilementdanslecode
lorsdudbogage.Ilexiste,cependant,unelistedemotsquilesttotalementinterditdutiliserlorsdeladclaration
devosvariables,carrservsparJavaScript.
2.Motsrservs
Les mots rservs sont des mots correspondant gnralement des objets, proprits ou mthodes dj utiliss
par JavaScript et qui ne peuvent, donc, pas recevoir de valeurs. Voici un tableau qui rcapitule ces mots interdits.
Certains de ces mots sont dores et dj interdits, dautres, mme sil est encore possible de les utiliser, sont
dconseillscarlesprochainesversionsdeJavaScriptnelesaccepterontplus.
abstract float short
boolean for static
break function super
byte goto swich
case if synchronized
char implements this
class import throw
const in throws
continue instanceoff transient
debugger int true
default interface try
delete long typeoff
do native var
double new void
else null volatile

enum package while
export private with
extends protected
false public
finally return

Typologiedesoprateurs
Lesoprateurspermettentdemanipulerlesvariables,defairedestests(comparaison)entrelesvaleursdesvariables.
Lesoprateursetlesvariablescomposentuneexpressionquipeut,quelquefois,ressemblerunmessagecrypt.Mais,
en les tudiant, la matrise des oprateurs est somme toute relativement simple. Nous dcouvrirons au chapitre
Contrler les scripts avec les structures de contrle, comment utiliser ces tests dans le droulement du script. Pour
linstant,voicilalistedesdiffrentsoprateursetleursignification :
1.Arithmtiques
Les oprateurs arithmtiques permettent de raliser des calculs lmentaires entre des variables de types
numriques.Lessymboles+,,*et/permettentdeffectuerlesoprationslmentairesdaddition,desoustraction,
demultiplicationetdedivision.Voiciuntableauquilistelesoprateursarithmtiques :
Oprateurs Nom Rle Exemple Rsultat
Additionnelesvaleurs
+ Plus situesgaucheet 15+10 25
droitedusymbole.
Soustraitlesvaleurs
Moins situesgaucheet 1510 5
droitedusymbole.
Effectuela
multiplicationentre
Produitou
* lesvaleurssitues 15*10 150
multipli
gaucheetdroitedu
symbole.
Effectueladivisionde
lavaleursitue
/ Divis 15/10 1.5
gaucheparlavaleur
droitedusymbole.
Extraitlavaleur
entiredursultatde
ladivisionentrela
% Modulo valeursitue 5%3 1
gaucheetlavaleur
situedroitedu
symbolemodulo.
Permetdincrmenter
unevaleur Variable=1
++ incrmentation notammentdansle 2
casdutilisationdans Variable++
uneboucle.
Permetde
dcrmenterune
valeurnotamment Variable=2
dcrmentation 1
danslecas Variable
dutilisationdansune
boucle.
Variable=1
Permetdobtenir
Ngation variable= 1
loppos.
variable
Petiteprcisionpourlesymbolemodulo % ,quipermetdercuprerlerestedeladivisiondeloprande
de gauche par celui de droite. En affectant le symbole modulo une variable, vous obtenez le reste de la
divisiondelavariableparlechiffresitudroitedusymbole.Envoicilasyntaxe :modulo=dividende%diviseur.

Exemple :afficherlersultatdelapplicationdemodulotroissurunevariablegalecinq.
var mavariable=5;
var modulo = mavariable%3;
alert("Le resultat de modulo est : " + modulo);
</script>
Aprsavoiraffectecinqlavariable,celleciestrutilisedanslecalculduneautrevariableappelemodulo.Enfin,
lersultatestaffichdansunebotededialogueparlamthodealert().
Les oprateurs dincrmentation et de dcrmentation peuvent tre positionns avant lutilisation de la

variable,ilsagit de princrmentation(ouprdcrmentation),outrepositionnsaprslutilisationdela
variable et il sagit alors de postincrmentation (ou postdcrmentation). Lutilisation de ces oprateurs sera
dtaillelorsdeltudedesbouclesauchapitresuivant.
2.Comparaison
Cesoprateurspermettentdecomparerdesvariablesentreelles.
Testesiloprande
gauchedu
symboleestplus
< Infrieur petitquecelui 1<2 True
situdroite.
Renvoietruesi
cestlecas.
Testesiloprande
gauchedu
symboleestplus
<= Infrieurougal petitougal 2<=2 True
celuisitudroite.
Renvoietruesi
cestlecas.
Testesilesvaleurs
gaucheet
== Egal 2==2 True
droitesont
identiques.
Testesiloprande
gauchedu
symboleestplus
> Suprieur grandquecelui 2>1 True
situdroite.
Renvoietruesi
cestlecas.
Testesilavaleur
gauchedu
symboleestplus
>= Suprieurougal grandeougale 2>=2 True
cellesitue
droite.Renvoie
truesicestlecas.
Testesiloprande
situgauchedu
symboleest
!= Diffrent 1 !=2 True
diffrentdecelui
dedroite.Renvoie
truesicestlecas.

Testesiloprande
situgaucheest
galetdumme
=== Strictementgal 1=== "1 " False
typequecelui
situdroitede
loprateur.
Testesiloprande
situgaucheest
Strictement diffrentet/oude
!== "1 " !==1 True
diffrent typediffrentde
celuisitudroite
deloprateur.
Ne pas confondre loprateurdecomparaison==avecloprateur daffectation = , ce dernier sert affecter

unevaleurdanslavariablesituegauchedusymbole.
Exemple :afficherlavaleurcorrespondantlarponsetrueoufalsedeJavaScriptaprsexcutionduntestdecomparaison.
var reponse=5>12;
alert("Le rsultat du test est : " + reponse);
</script>
Lescriptselimiteuntest5>12dontlarponseestrenvoyedansunvariablenommereponse,dontlecontenu
seraaffichpourconnatrelersultatdutest.Lersultatdecetestestexprimdefaonboolenne(cestdiretrue
oufalse).
Ilestpossibledutiliserlemmescriptenmodifiantloprateurdecomparaisonpourapprhenderleurmode
defonctionnementetvisualiserlersultatrenvoy.
Parexempleavecloprateur !=(diffrent),lersultatesttrue.
var reponse=5 !=12;
</script>
3.Logiques
Ilssontaussiappelslesoprateursboolens.Utilissavecplusieurstests,ilsrenvoientunevaleurtrueoufalseen
fonctiondurespectdelaoudesconditions.Lesoprateurs&&et||sontditsbinaires,alorsqueloprateur!estdit
unaire.
Permetde
concatner
plusieurs
conditionsenvue 5estsuprieur4
&& Et True
duntest.Renvoie etinfrieur6
truesilesdeux
conditionssont
runies.
Vrifiequeluneou
lautredes
5estsuprieur4
|| Ou conditionsest True
ouinfrieur3
remplie.Renvoie
truesicestlecas.
Vrifiequela
conditiondutest
! Non nestpas 5estsuprieur6 True

respecte.Renvoie
truesicestlecas.
Exemple 1:afficherlersultatdundoubletest(5<12et5<3)olesdeuxconditionsdoiventtrerespectes :
var reponse=5<12 && 5<3;
</script>
Letestutiliseloprateurlogique&&pourtesterlesdeuxconditionssimultanmentetlarponsedetypeboolenest
ensuiteaffiche(icifalsevidemment).
Exemple2 :afficherlemmetestquecidessusmaisenautorisantlerespectdeseulementluneoulautredesconditions.
var reponse=5<12 || 5<3;
</script>
La mme structure que prcdemment, seul loprateur change et permet alors de ne respecter quune seule
conditionpourrenvoyertrue.Cesticilecas(5estbieninfrieur12maispasinfrieur3)etcestpourtantlavaleur
truequiestrenvoye.
4.Associatifs
Ilsagitdeloprateurdaffectationgal,quipermetdedonnerunevaleurunevariable(cequiestdroitedusigne
galestaffectcequiestgauche).Cetoprateurpeutgalementtrecombinaveclesoprateursdecalculpour
raliserdescalculsaumomentdelaffectation.Lasyntaxeestalorslasuivante :
mavariable+=10 ;
Cette instruction permet dajouter dix, directement, au contenu de mavariable. Elle remplace astucieusement
linstruction :
mavariable=mavariable+10 ;
Exemple : modifier le contenu dune variable gale 10 en y ajoutant 10 et en utilisant deux techniques : dabord en
passantparloprateurarithmtique,puisenutilisantloprateurassociatif.
mavariable=10;
alert("voici le contenu de ma variable : "+mavariable);
mavariable=mavariable+10;
mavariable+=10;
</script>
Lutilisationdesdeuxmthodessimultanmentdmontrebienlegainobtenuparlutilisationdeloprateurassociatif.
5.Concatnation
Il existe un seul oprateur de concatnation, cest le symbole plus + qui permet de souder des chanes de
caractresentreelles.Cestgrcecetoprateurquilestpossibledeconstruireunechanecomposedevariables
etduntexte,saisidanslecodeduscript.

Concatneles
+ Plus chanesde Bon+jour Bonjour
caractres.
Loprateurdeconcatnationsedistingue,ici,deloprateurarithmtiquealorsquelesymbole + estle
mme.Ilestdoncimportantdelesdiffrencierloral,enutilisantlestermesoprateursdeconcatnationou
arithmtique.
Exemple :afficheruneconcatnationdedeuxvariablescorrespondantaunometauprnomdelutilisateurenlessparant
dunespace :
var prenom=prompt("Quel est votre prnom ? :", "veuillez saisir
votre prnom ici");
var nom=prompt("Quel est votre nom ? :", "veuillez saisir votre nom ici");
var nomcomplet=prenom+" "+nom;
alert("Votre nom complet est : "+nomcomplet);
</script>
</head>
Toutdabord,ilsagitdedemanderlutilisateursonprnometsonnomparlintermdiairedelamthodeprompt().Il
fautensuiteeffectuerlaconcatnationdesdeuxchanesdansunenouvellevariablecorrespondantaunomcomplet,
tout en veillant ajouter un espace entre les deux. Pour ce faire, il suffit dutiliser " " pour le symboliser. Pour
terminer,lersultatestaffichdansunebotededialogueparlamthodealert().
Enplusdecesoprateursclassiques,ilexisteuncertainnombredoprateursspciaux.
6.Lesoprateursspciaux
Ce sont des oprateurs nappartenant aucune des catgories prcdemment cites et dont lusage est un peu
particulier.
Mavariable
Supprimeune delete
delete Delete nexiste
variable. mavariable
plus
Creune
Creune
nouvelle
new New instancedun newmavariable
instancede
objet.
mavariable.
Permetde
Permetdese
nepas
this This rfrencer thismavariable
reciter
lobjetcourant.
mavariable.
Permetde
signifierune Permetde
seulefoisun citerune
objetpour foisma

with With accderparla withmavariable variable
suite pouren
plusieursde modifierles
sesproprits proprits.
oumthodes.
Extraitle
Permetde
typeof typede
typeof TypeOf connatrele
mavariable variablede
typedunobjet.
mavariable.
Excuteune
instructionmais Renvoie
void void void(mavariable)
nerenvoiepas undefined.
devaleur.
Permet
daffecterune
valeurune Renvoie
variableselon truesila
untestsitu valeurde
Oprateur gauche mavariable
(mavariable<0) ?
?: conditionnel de ? .Sile est
true :false
ternaire testestvrai,la infrieure
valeursitue zro,false
gauchede : dans
estrenvoye, lautrecas.
sinoncestcelle
dedroite.
LecasdeloprateurconditionnelternaireseradtaillauchapitreContrlerlesscriptsaveclesstructuresde
contrles.
Exemple :afficherlecontenudunevariableavantetaprssuppression.
mavariable="ma variable nest pas vide";
alert("La valeur de ma variable est : " + mavariable);
delete mavariable;
alert("La valeur de ma variable est : " + mavariable);
</script>
Lescriptdbuteparlaffichagedelavariableparlamthodealert()pourvrifiersoncontenu.Puis,loprateurspcial
deleteestutilispoursupprimercettevariable.Laderniretapeconsistedemanderlaffichagedelavariablequi,
commeellenexisteplus,neseffectuerapasetprovoquerauneerreur.
Le fonctionnement de loprateur delete oblige ne pas utiliser la dclaration explicite des variables par le
motclvar.
Exemple :afficherdanslapageletypedesvariablesutilisesdanslescript.

var numerique=15;
var texte="ma variable";
var booleen=false;
document.write("La variable numerique est de type : "+
typeof numerique +"<BR>");
document.write("La variable texte est de type : "+
typeof texte +"<BR>");
document.write("La variable booleen est de type : "+
typeof booleen +"<BR>");</script>
Laffectationdetroisvariablesdetypediffrent,dbutelescript.Ensuite,loprateurtypeOfpermetdafficherletype
devariabledansunebotededialogue.
7.Ordredesoprateurs
Danslecasoplusieursoprateurssontutilissdansuneexpression,ilsnesontpasforcmenttraitsdanslesens
traditionneldelecturegauchedroite.Lesensdetraitementdpenddunordredfinidanslecore(c ur)deJavaScript
etquicorrespondautableaucidessous:
Pluslerangestlev,pluslaprioritestimportante.
Numroderang Symbole Type
Rang15 ()[]. Appeldefonction/membre
Rang14 !~++ Ngation/complment
Rang13 */% Produit/quotien
Rang12 + Addition/soustraction
Rang11 <<>>>>> Dcalage
Rang10 <<=>>= Comparaison
Rang9 ==!= Comparaison
Rang8 & ETbitbit
Rang7 ^ OUexclusif
Rang6 | OUinclusif
Rang5 && ETlogique
Rang4 || OUlogique
Rang3 ?: Conditionnelternaire
Rang2 =+==<<=>>=&=^=|= Affectation
Rang1 , Sparateur
Exemple :afficherdansunebotededialoguelecontenudeladditionde1etde2multiplipar3.
resultat=1+2*3;
alert("Le rsultat du calcul est : "+resultat);
</script>
La rgle de priorit des oprateurs oblige faire dabord la multiplication de 2 par 3, puis dajouter 1 au rsultat

obtenu.
Exemple :modifierlescriptprcdentpourpermettredefaireladditionpuislamultiplication.
resultat=(1+2)*3;
alert("Le rsultat du calcul est : "+resultat);
</script>
Il suffit simplement dajouter des parenthses lexpression 1+2 pour permettre de changer la priorit des
oprateurs.
Incontestablement, les variables sont essentielles dans le droulement dun script et celuici peut voir son
droulement modifi en fonction de leur valeurs. Ce sont les structures de contrle qui permettent deffectuer des
testsetdesincrmentationsdevariables.

Lesinstructionsconditionnelles
Ces instructions permettent dorienter le droulement du script en fonction de tests. Par exemple, il est possible de
contrlerlecontenudunevariableetdexcuteruneinstructionsiletestestrespect(true),oudexcuteruneautre
instruction,silersultatdutestestfaux(false).Cesinstructionssontplaceslintrieurdestructuresdecontrles,
quipermettentdetraitertouslescasdefigureenfonctiondelarponsedutest.
1.if
Linstruction if (si en franais) permet de distinguer gnralement deux cas de figure seulement. Pour les tests
comprenant plus de situations, il est prfrable dutiliser linstruction switch que nous dtaillerons plus loin. Le test
doit tre plac entre parenthses et comprend gnralement des oprateurs de comparaison et des variables ou
constantes.Letestestsuividuneaccolade,lapremireligneinstructionsetrouvantsurlalignesuivante.Ilnyadonc
pas de pointvirgule la fin de cette ligne, ce qui correspond une exception. Il est possible de considrer que la
premire instruction correspond un test positif mais il nyapasdobligation.Lenombredelignesdinstructionest
illimit,chacunedentreellesseterminantparunpointvirgule.Lagestiondupremiercasdefiguresetermineparune
accoladefermantesurlalignesuivante,pourunemeilleurelisibilitducode.Lemotclelse(sinon)estajoutsurla
ligne suivante sans pointvirgule pour terminer. Une autre accolade est ouverte sur la ligne suivante, elle dfinit le
dbutdesinstructionsralisersilavaleurdutestestfalse.Ilestgalementpossibledajouterautantdelignesque
ncessaires pour traiter ce deuxime cas de figure. Le script continue son droulement normal aprs laccolade
fermante.Lasyntaxedelastructuredecontrleaveclinstructionifestdonclasuivante :
if (test) {
Ligne 1 dinstruction ;
}
else
{
}
Exemple :afficherunebotededialogueettesterlerponsepourcontinuerounonledroulementduscript.
suite=confirm("Voulez-vous poursuivre ? ");
if (suite==true) {
alert("Jen suis heureux ");
}
else {
alert("Cest dommage");
}
</script>
Le script dbute par laffichage dune bote de dialogue demandant lutilisateur sil souhaite ou pas continuer le
droulementduscript.Cettebotededialoguercuprelarponsedelutilisateurdansunevariable,appelesuite,
parlintermdiairedelamthodeconfirm().Lavaleurrenvoyecorrespondsoittrue,soitfalse.Silutilisateurclique

surOK(true),lescriptafficheunebotededialoguedetypealertpourleremercier.Aucontraire,silutilisateurclique
surleboutonAnnuler(falsedansletest),lescriptafficheuneautrebote,quipermetderegrettercetabandon.

noterlesdeuxsignesgal,ctecte,quipermettentdeffectuerunecomparaisonetnonuneaffectation.
Ilestgalementpossibledutiliserloprateurternairepoureffectuerletest.Lescriptdevientalors :
(suite==true)? alert("Jen suis heureux ") : alert("Cest dommage");
</script>
Mmesilersultatduscriptestquivalentauprcdentenutilisantcetoprateur,ilfautconvenirqueledcryptage
estplusdlicat.
Sivousdsirezeffectuerplusieurstestssurunevariable,ilestpossibledimbriquerles" if ".
Exemple :afficherdeuxbotesdedialoguessuccessivementettesterleursrponsespourcontinuerounonledroulement
duscript,enutilisantdesifimbriqus.
avis=confirm("Aimez-vous le JavaScript ? ");
if (avis==true) {
if (suite==true) {
}
else {
}
}
else {
}
</script>
Nous reprenons le mme test que prcdemment, mais en ajoutant unequestion pour savoir si lutilisateur aime le
JavaScript et en affectant la valeur de cette rponse la variable avis. Si cest le cas, lutilisateur reoit un
remerciement uniquement sil a rpondu favorablement aux deux questions. Dans le cas contraire sil a rpondu en
cliquantsurannulerpourluneoulautredesquestions,lescriptaffichelasecondebotededialogue.
Vous voyez ici lutilit de lindentation de script, afin de clarifier la prsentation et donc de retrouver facilement les
instructionsconcernantlapremireetlasecondecondition.Mais,vousimaginezfacilementladifficultdelecturedun
scriptimbriquantcinqousixif.Cettetechnique,bienquecorrecte,estdoncdconseillerfortement.Eneffet,ilest
possibledeluiprfrerlusagedesoprateurslogiquesEt && etOU || .
Exemple :afficherdeuxbotesdedialoguessuccessivementettesterleursrponsespourcontinuerounonledroulement
duscript,laidedesoprateurs&&,||et !=.
if (suite==true && avis==true) {
}
else {
}
</script>
Lemmescript,enutilisantloprateurou || quipermetdenevrifierquuneseuledesconditions.
if (suite==true || avis==true) {
alert("Jen suis heureux mais cela reste confirmer");
}
else {
}

</script>
UneautrevarianteutilisantloprateurlogiqueNon != , expliquauchapitreUtilisationdesconstantes,variables
etoprateurs.
if (suite!=false && avis!=false) {
}
else {
}
</script>
Lutilisation de la structure de contrle avec if est largement rpandue, mais il existe une autre syntaxe laide de
loprateurconditionnelternaire.
2.Loprateurconditionnelternaire
Pour effectuer des tests, il est galement possible dutiliser loprateur conditionnel ternaire. Sa syntaxe est la
suivante :
(test) ? instruction si vrai : instruction si faux ;
Mme si la syntaxe est plus concise, la relecture nest pas facilite par cette structure de contrle. Cest pour cette
raisonquesonutilisationestpeufrquenteetquelleestrarementutilisedanscertainsscripts.
Exemple : demander une valeur lutilisateur et la tester, pour savoir si elle est suprieure ou infrieure loprateur
conditionnelternaire.
var mavar=prompt("Quelle valeur voulez-vous prendre pour faire un test

avec loprateur conditionnel ternaire ?");
(mavar<2)? alert("La variable est infrieure 2"):alert("La variable
est suprieure 2");
</script>
Ici,unevaleurestaffectelavariablemavaraveclamthodeprompt(),puislescriptutiliseloprateurconditionnel
ternaire pour la comparer 2. Dans le cas o le test est respect, cest linstruction figurant juste aprs le point
dinterrogationquiestexcute,danslecascontraire,cestlinstructionsetrouvantjusteaprsledoublepoint.
3.elseif

Linstructionelseifestutiliseencomplmentdeifdanslecasolenombredesituationsestsuprieurdeux nous
parlerons alors de concatnation de tests. Le dbut est identique la premire structure de contrle, par contre
lorsquilfautajouterunsecondtest,ilfaututiliserlinstructionelseifsuividunouveautestentreparenthsesetde
laccolade ouvrante. Ainsi, toutes les situations possibles seront traites par limination, jusqu la dernire. il faut
terminerparlinstructionelsequiconcerne,alors,touteslesautressituationsquinontpasttraitesauparavant.
Lasyntaxedelastructuredecontrleaveclinstructionelseifestlasuivante :
if (test) {
}
else if (test) {
Ligne 2 dinstruction ;}
}
else
{
}
Exemple : afficher la valeur dune rduction obtenue par calcul, en fonction du montant de la commande saisie dans une
botededialogue.Larductionseragalezrosilemontantdelacommandenatteintpas10 000euros.Elleseragale
5 % de la commande si celleci est comprise entre 10 000 et 25 000 euros et elle sera gale 10 % audessus de ce
montant.
commande= prompt("Quel est le montant de la vente :", "Saisissez
ici le montant de la commande");
if (commande<10000) {
alert("Le montant de la vente est insuffisant pour prtendre
une rduction");
}
else if(commande<25000) {
reduction=commande*0.05;
}
else {
reduction=commande*0.1;
}
alert("Le montant de la rduction pour une commande de : " + commande
+ " euros est de : " + reduction + " euros");
</script>
Aprsavoiraffectlavariablecommande,ilestpossibledeffectuerdestestssurcelleciensuivantunordrelogique
(ordrecroissantoudcroissant).Ici,lalogiquedestestssuivraunelogiquecroissante.Pourdbuter,ilfautcomparer
le montant de la commande 10 000. Si le test est ngatif, cela signifie que le montant de la commande nestpas
assezlevpourobtenirunerduction.Laffichagedunebotededialoguepermetdeleprciser.Lesecondcasdece
premier test permet de dire que le montant de la commande est bien suprieur 10 000 mais estil suprieur
25 000 ?Pourlesavoir,ilfautrajouterunnouveautestaprselseif.Silacommandeestinfrieure25000,ilfaut

calculerlemontantdelarduction,gale5%delacommande.Danslautrecas,lemontantdelacommandeest
forcment suprieur 25 000 et il nest pas ncessaire dajouter un autre test pour le savoir. Le montant de la
rductionpeut,alors,trecalculetaffichdansunebotededialogue.
Lorsquils sont nombreux, les if imbriqus deviennent difficiles maintenir. Il est trs facile de faire une erreur
dalignementdesaccoladesetainsidepnaliserlarelecture.Danscecas,ilesttoujourspossibledutiliseruneautre
structuredecontrle.Ilsagitdelinstructionswitch.
4.switch
Tout comme la structure comprenant if et else if, linstruction switch permet de grer plusieurs cas de figure. Son
utilisationpeutsavrerplusfacilequuneconcatnationdeifaveclasriedaccoladesouvrantesetfermantes,dontla
lecture est quelquefois dlicate. Malheureusement, lutilisation des oprateurs de comparaison infrieur, suprieur,
etc.nestpasautoriseaveclinstructionswitch.Ducoup,sonutilitpeutsemblerlimite.Unestructuredecontrle
avecswitchdbuteaveclemotclswitchsuividelavariabletester,placeentreparenthses.Lafindelalignene
doitpascomporterdepointvirgule.lalignesuivante,ilfautouvriruneparenthse,puischaquevaleurpossiblede
lavariable,ilfautindiquerlemotclcasesuividelavaleurdelavariableetdedeuxpoints.Laoulesligne(s)suivante
(s) correspond(ent) aux instructions raliser pour chaque cas. Pour terminer le traitement de chaque cas, il faut
utiliserlemotclbreakquipermetdequitterlastructuredecontrle.Lastructuredecontrleswitchseterminepar
uneaccoladefermante.
Lasyntaxedelastructuredecontrleaveclinstructionswitchestlasuivante :
switch (variable de test)

{
case " premier cas " :
instructions
break ;
case " deuxime cas " :
instructions
break ;
}
Exemple :afficherunerponseselonunequestionposeavectroispropositionsderponse :"Javascriptestunlangage:

A.NontypB.FaiblementtypC.Typ".
reponse=prompt("Javascript est un langage : A.Non typ B.Faiblement
typ C.Typ", "Saisissez ici la lettre correspondant votre rponse");
switch (reponse)
{
case "A":
alert("Pas tout--fait, r-essayez");
break;
case "B":
alert("Bravo ! Cest exact");
break;
case "C":
alert("Cela nest pas exact, r-essayez");
break;
}
</script>
Toutdabord,ilfautaffecterlavariablereponseaveclarponsedelutilisateur.Ensuite,ilfautdbuterlastructurede
contrleensebasantsurlavariablereponse.chaquecas,ilfautindiquerlaffichagedunerponsediffrente.
Il faut bien vrifier la prsence de break car ce genre doubli ntant pas signal par le navigateur, vous
risquezdeperdrebeaucoupdetempsavantdetrouverlerreur.

Ce script sousentend que les possibilits de rponse seront respectes (A, B ou C). Mais que se passetil si
lutilisateurchoisitdesaisirunautretypederponse ?Lescriptsinterromptbrutalementsansdonnerderponse.Le
mieux consiste alors, utiliser le mot cl default qui correspond tous les cas qui nont pas pu tre traits
prcdemment.Cemotcldoittreajoutlafinduscriptetsuividebreakgalement.Lescriptdevientalors :
reponse=prompt("Javascript est un langage : A.non typ B.Faiblement
typ C.Typ", "Saisissez ici la lettre correspondant votre rponse");
switch (reponse)
{
case "A":
break;
case "B":
alert("Bravo ! Cest exact");
break;
case "C":
break;
default:
alert("Votre rponse ne correspond pas aux propositions");
break;
}
</script>
Ainsi dans le cas o lutilisateur ne saisirait pas une des propositions (A, B ou C), cest la bote de dialogue situe
aprsdefault :quisaffiche.
Danslecasounmmetestdoitsappliquerplusieurslments,ilestpossibledintgrerletestdansunestructure
derptitions.

Lesinstructionsderptitions(boucles)
Les boucles permettent de raliser des blocs dinstructions plusieurs reprises, appeles instructions ditration. En
Javascript,ilenexistedeuxtypes,lesbouclesavecforetlesbouclesavecwhile.
1.for
Elle ncessite lutilisation dune valeur initiale de compteur, dun test et dun facteur de progression. La valeur
atteindreducompteurdoittreconnue.Lasyntaxedecetteinstructionderptitionestlasuivante :
for (valeur initiale du compteur ; test de rptition ; facteur de

progression){
instructions rpter
}
Exemple :afficherdixfoisdanslapagelersultatdunebouclecomportantunevariablepostincrmente.
for (compteur=0; compteur<10;compteur++) {
document.write("la valeur du compteur est de : " +
compteur+"<BR>");}
</script>
Toutdabord,ilfautparamtrerlastructuredeboucleendterminantlavaleurdedbutducompteur,lavaleurdefin
et loprateur dincrmentation. Il suffit, ensuite, dinsrer dans la boucle, laffichage de la bote de dialogue, dans
laquelle figure une chane de caractres ainsi que le compteur luimme. Sa visualisation permet de suivre
lincrmentationducompteurchaquepassage.Icilaffichageseproduira10foiscarlecompteurdmarrezromais
eststopp9carlaconditioncompteur<10lempchedallerjusqu10.
Ilestpossibledobtenirlemmersultat(10affichages)enmodifiantlavaleurdinitialisationdelavariableet
la valeur limite atteindre dans le test (par exemple, choisir 1 pour linitialisation et compteur<11 pour la
valeurtest).
2.forin
Cetypedeboucleestdestinmanipulerunobjetetsutiliseaveclasyntaxesuivante :
for (var nomproprit in nomdelobjet) {

instructions ;
}

Exemple :afficherdanslapagelalistedespropritsdelobjetdocument :
document.write("Voici les proprits de lobjet document : "+"<BR>");
for (var propriete in document) {
document.write(propriete+"<BR>");
}
</script>
Certaines proprits restent masques par JavaScript et ne pourront par consquent tre listes par ce
script.Leretourchariot"\r"nefonctionnepasavecFirefox.
3.while/dowhile
Les boucles avec while permettent dexcuter un bloc dinstructions tant quune condition est vraie. Avec while, les
instructionsfigurantentrelesaccoladesouvrantesetfermantesserontexcutestantqueletestestvrifi.Lorsque
lersultatdutestprendlavaleurfalse,labouclesinterromptetledroulementduscriptsepoursuit.Lasyntaxedela
structuredecontrleaveclinstructionwhileestlasuivante :
while (test) {
instructions rpter
}
dowhilepermetgalementlarptitiondinstructionsceciprsqueletestsuitleblocdinstructionsaulieudele
prcder:
do {
instructions rpter
}
while (test);
Exemple : afficher une bote de dialogue demandant la saisie dun nombre dont la valeur doit tre positive. Tant quune
valeurngativeounulleestsaisie,labotededialoguecontinuesafficher.

reponse=-1;
while (reponse<0) {
reponse=prompt("Saisissez une valeur positive", "Saisissez ici
votre valeur");
}
alert(" Merci davoir saisi une valeur positive ") ;
</script>
Laparticularitdecescriptrsidedanslefaitquelavariablerponseservantdetestdoittreinfrieurezroavant
depassersurlinstructionwhile,ainsilabotesaffichedslechargementdelapage.Cestlaraisonpourlaquellele
script affecte 1 la variable reponse, ds le dbut. Lors du premier passage sur linstruction while, le test est
respectetdonc,labotededialoguesaffiche.Parlasuitelavaleurdereponsedevratresuprieure0poursortir
delastructuredecontrle.Silavaleur1nestpasaffectelavariablereponse,celleciseraitnull,doncquivalent
zro,etnerespecteraitpasletest.Labotededialoguenesafficheraitdoncpas.

Interrompreetquitterlesboucles
1.break
Commenouslavonsvuprcdemmentdanslastructuredecontrleavecswitch,breakpermetdequitterlesboucles
de manire prmature. Linstruction break peut aussi renvoyer le droulement du script vers une tiquette (un
label),cestdireunepositionidentifieparunnomsuividedeuxpoints.
Linstructionbreaknepeuttreutilisequlintrieurdebouclesimbriquesavecforouswitch.
Le nom de ltiquette doit suivre les mmes contraintes de nommage que les variables (pas despace, le nom de
ltiquettedoittoujourscommencerparunelettre,etc.).
Ltiquettedoittreplaceavantlinstructionbreaketdoittresuiviedundoublepoint.
Exemple :afficherdansunebotededialoguelavaleurdescompteursietjjusqucequejsoitgaltrois.
boucle:
for (i=0;i<10;i++) {
alert("La valeur de i est gale : "+i);
for (j=0;j<10;j++) {
alert("La valeur de j est gale : "+j);
if (j==3) {
break boucle;
}
}
}
</script>
Ici,lapremireboucleindiquelavaleurdei,puislasecondecelledej.Celuiciapparatplusieursfoisavantquele
testnesoitvrifi.cemoment,linstructionbreakbouclerenvoielescriptltiquetteboucle,doncendehorsdela
bouclecorrespondantjeti.Ensuite,lescriptreprendsoncoursaprslafindelaplusgrandeboucle(icicellequi
correspondi).
Ilexistegalementuneinstructionqui,contrairementlinstructionbreak,permetdepoursuivreledroulementdun
script.
2.continue
Linstruction continue permet de ne pas prendre en compte certaines valeurs qui seraient fausses dans le test,
assurantainsilapoursuitedelaboucle.
Exemple :afficherlavaleurducompteurdunebouclede04sauflavaleur3 :
for (j=0;j<5;j++) {

if (j==3) {
continue;
}
alert("La valeur de j est gale : "+j);
}
</script>
Ici,lescriptaffichelemessagedaffichagedelavariablejquisincrmentechaquepassagedelaboucle.Lorsquela
variablejestgale3,linstructioncontinuesautelinstructiondaffichagedelabotededialogue.Ducoup,lavaleur
3nestpasaffiche,maislescriptcontinuesondroulementetaffichelesvaleursrestantes.

Lagestiondesexceptions
JavaScript fournit plusieurs instructions ou structures de contrles permettant de grer les erreurs renvoyes par le
navigateurlorsdelexcutiondescript.
1.Lastructuretrycatch
Cettestructurepermetdexcuterlesinstructionsplacesentrelesaccoladesetcorrespondantsaumotcltry(cest
leblocdessai).Danslecasouneerreurestdtecteparlenavigateur,lesinstructionssituesentrelesaccolades
correspondantaumotclcatch()sontexcutes.Lasyntaxedecettestructureestlasuivante :
try {
Instructions ;
}
catch(identificateur){
Instructions ;
}
Exemple :afficherunmessageindiquantlimpossibilitdeffectuerdunedivisionpourlaquelleaucunevariablecorrespondant
audiviseurnestdclare.
dividende=10;
try {
resultat=dividende/diviseur;
}
catch(exception){
alert("Division Impossible");
}
</script>
Danscescript,lersultatdeloprationdividende/diviseurgnreuneerreurcarilsagitdunedivisionparundiviseur
indfini (division par zro). Le bloc dinstruction try permet de capturer cette erreur et dorienter le droulement du
scriptversleblocdinstructionscatch,permettantlaffichagedelabotededialogue.
2.Lastructuretryfinally
Ilestpossibledajouterunblocfinaldanslecasoaucuneexceptionnestdtecte.Danscecas,ilfautinclureles
instructionseffectuerdansunblocdlimitparlemotclfinally.
try {
Instructions ;
}
catch(identificateur){
Instructions ;
}
finally {
Instructions ;
}
Lescriptdevientalors :

dividende=10;
try {
}
catch(diviseur){
alert("Division Impossible");
}
finally{
diviseur=2;
alert("Le rsultat de la division est : "+resultat);
}
</script>
Danscescript,lerreurestbiendtecteetlaffichagedumessageesteffectuparlebloccorrespondantcatch.Mais
leblocdinstructionsfinallypermetdaffecterlavaleur2lavariablediviseur,cequipermettoutdemmedexcuter
lescript.
Ilestpossibledimbriquerlestryafindepermettredestentativesavecdesvaleursdiffrentesetainsidetesterun
scriptsoustoutessesformes.

Rledesfonctions
LesfonctionsfontpartiedeslmentsfondamentauxenJavaScript,aveclesmthodesdontnousavonsdjparl.La
notiondefonctionestassezprochedecelledemthode,carcesonttouteslesdeuxdesprocduresquieffectuentune
tche spcifique. La diffrence rside dans le fait que, les mthodes sappliquent un objet particulier alors que les
fonctions sont totalement dtaches de cette notion. Il existe deux types de fonction, celles prdfinies, donc dj
intgresJavaScriptetcellesdfiniesparlutilisateur.Pourlespremires,ilsuffitdelesemployeraumomentvoulu
sansdclarationpralable.Pourlessecondes,ilfautimprativementlesdclareravantdepouvoirlesappelerplusloin
dans le script. Les fonctions prdfinies sont proches des mthodes attaches aux objets. Le tableau cidessous
permetdidentifierquelquesfonctionsutiles :
Fonctions
Rle
prdfinies
RenvoieunechanedecaractresremplaantparsacodificationASCII,lachaneplaceentre
escape()
lesparenthses.
eval() ExcutelecodeJavaScriptplacentrelesparenthses.
Testelavaleurplaceentrelesparenthsespoursavoirsiellecorrespondounonun
isFinite() nombrefini.EnJavaScriptunnombreestditfinilorsquesavaleurestsuprieure
1.7976931348623157E+10308 ouinfrieure1.7976931348623157E+10308 .
Testelavaleurplaceentrelesparenthsespoursavoirsiellenestpasnumrique.Renvoie
isNaN()
truesiletestestvrai,falsedanslecascontraire.
Number() Renvoielersultatduneconversionenchiffresdelavariableplaceentrelesparenthses.
String() Renvoielersultatduneconversionentextedelavariableplaceentrelesparenthses.
Exemple :afficherlersultatduneconversionenchiffresdunevariabletexte :
resultat=Number("4")+3 ;
alert("Voici le total avec resultat en texte converti en chiffres :
"+resultat);
</script>
Depuis le dbut de cet ouvrage, les scripts sont insrs dans la page web et excuts lors de son chargement en
mmoire. Mme si cela suffit amplement vrifier pour linstant leur fonctionnement, cela ne laisse que peu de
souplessedansleurutilisationsibienquelesscriptssexcutentnormalementaumomentduchargementdelapage.
Avec les fonctions, il est possible dexcuter le script un moment prcis, correspondant un vnement bien
dtermin, comme un clic sur un bouton par exemple. Le navigateur lira bien la fonction, mais ne lexcutera quau
moment du clic sur le bouton. Cest ce que lon appelle la programmation vnementielle. Il est ais de comprendre
alorspourquoileconceptdefonctionestlabasedelaprogrammationobjetenJavaScriptetquilprsenteainsideux
avantages :
1.Leregroupementdinstructionsdansdesblocsnomms,lidentiquedessousprogrammesoudesmodules.
2.Lexcutiondecesblocsdinstructions,desmomentsprcis,parlaprogrammationvnementielle.
1.Ladclarationdesfonctions
Pourdclarerunefonction,ilfaututiliserlemotclFunctionsuividunomquevoussouhaitezluiattribuerpuisdune
srie de parenthses, une ouvrante et lautre fermante, dune accolade ouvrante { qui indique le dbut du bloc
dinstructionsetenfinduneaccoladefermante}dlimitantlafindelafonction.
Exemple : Function MaFonction(argument1, argument2) {

Instruction1
Instruction2
}
Attention,lesrglesdenommagedesfonctionssuiventlesmmesrglesquecellesdesvariables,savoir :

Lenomdoitcommencerparunelettre.
Le nom peut tre compos de lettres, de chiffres et des caractres _ et & mais nutilisez pas de caractres
spciaux,rservsoudespaces.
Lesparenthsesplaceslafindunomdelafonctionpermettentdepasserdesarguments(variables).Mme
si vous ne passez aucun argument par la fonction, la prsence des parenthses est indispensable. Ne les
oubliez,donc,pas.
Lesparenthsespermettentdefairepasserdesarguments.Cesargumentscorrespondentunnometnesontpas
typs.Silyenaplusieurs,ilfautlessparerparunevirgule.Silnyenapas,ilfautveillerajouterlesparenthses
toutdemme,souspeinedegnreruneerreur.
Attention,galementnepasoublierlaccoladefermante.
RappelezvousaussiqueJavaScriptestsensiblelacasseetqueMaFonctionnarienvoiravecmafonction.
Ilnyapasdelimiteconcernantlenombredefonctions,parcontreilnepeutyavoirplusde255arguments(cequiest
largementsuffisant).Lesaccoladespermettentdediffrencierledbutetlafindechaquefonction.
Pourterminer,ilvautmieuxquedeuxfonctionsneportentpaslemmenom.Sicesttoutdemmelecas,JavaScript
prendencompteladernireoccurrenceetdlaisselesautresfonctionsdummenom.
VoicilecodedunefonctionJavaScriptpermettantlaffichagedunmessage :
<html>
<head>
<title>Fonctions</title>
function MaFonction()
{
alert("Ceci est ma premire fonction")
}
</script>
</head>
Maisunetellefonctionnepeutfonctionnerconvenablementquesielleestappelelorsdunvnementparticulier.Il
fautdoncassociercettefonctionunvnementdclencheur.
Une fois la fonction dclare et cr, il est possible de lutiliser en lappelant et en lui fournissant les arguments
ncessaires.
Exemple :crerunefonctionpermettantdecalculerletauxdalcoolmiemoyendunhommede80kgayantbudeuxverres
devin.
function tauxalcool(poids,alcool) {
coeff=0.7;
resultat=alcool/poids*coeff;
return resultat;
}
poids=80;
alcool=2*10;
document.write("Le taux dalcoolmie pour un homme de 80 Kg buvant
deux verres de vin est de : "+tauxalcool(poids,alcool)+"approximativement");
</script>
Ici,lafonctioncalculelersultatenfonctiondesargumentsquiserontpasss,(icilepoidsetlaquantitdalcoolen
grammes). Le rsultat sera renvoy grce linstruction return, qui dlimite la fin de la fonction. La suite du script
fournit les valeurs servant dlments au calcul et appelle la fonction en lui passant la valeur des arguments. La

mthodedocument.write()permetensuite,dafficherdanslapagelersultatrenvoyparlafonction.
2.Utiliserplusieursfonctionsettransfrerdesdonnesentreelles
Unedesparticularitsdesfonctionsconcernelusagedesvariables.Eneffet,siunevariableestdclareendehors
dune fonction, elle est disponible pour lensemble du script. Elles sont alors appeles des variables globales. Par
contre, lorsque les variables sont dclares lintrieurdune fonction (elles sont alors dsignes sous le terme de
variableslocales),ellesnesontpasaccessiblesparlesautresfonctions.
Ainsi,danslecodesuivantlavariablevariable1nestpasdisponibleetlaffichagenepourradoncpasfonctionner.
<html>
<head>
<title>Les fonctions</title>
function premierefonction() {
var variable1="Voici ma premire variable";
}
function afficher() {
alert(variable1);
}</script>
</head>
<body>
<input type="button" name="Submit" value="Afficher"
onClick="afficher()">
</body>
</html>
Pourtant,ilestpossibledetransfrerdesvaleursentredeuxfonctionsdemanirerelativementsimple.
Ilsuffitdappelerlasecondefonctionpartirdelapremire,enidentifiantlavariablequitransiteentrelesdeux.
Exemple :transfrerdesvariablesderponsedunefonctionlautre :
Noussouhaiterions,parexemple,crerunepremirefonctiondestineafficherunebotededialogueetrecueillir
larponsedelutilisateursuiteunclicsurlunoulautredesboutonsdelabote.
Cetterponseseraensuitetransfreuneautrefonction,quiaurapourrledafficheruneautrebotededialogue
prcisantquelasecondefonctionestactiveetaffichantlersultatissudelapremirefonction.

function pose_question()
{
var reponse =confirm("Voulez-vous continuer ?");
test_reponse(reponse)
}
function test_reponse(reponse)
{
alert("Nous sommes dans la fonction test_reponse");
alert("La rponse saisie dans la fonction pose_question est : "+
reponse);
}
</script>
Ainsi, lexpression test_reponse(reponse) permet le passage de donnes dune fonction lautre par lappel de la
secondefonction(test_reponse)cellecienrcuprantlavaleurdelarponsedonneenargument.
Ensuite, lexpression de dclaration function test_reponse(reponse) permet la fonction test_reponse de recevoir
commeargumentlavariablereponsequiluiservirapourlaffichagedesbotesdedialogue.
3.Linstructionreturn
Cetteinstructionpermetderetournerlersultatdunefonction.Silafonctionnarienrenvoyer,lavaleurundefined

seraretourne.
Exemple : afficher, dans une bote de dialogue, le rsultat dune addition, dont le calcul est ralis dans une fonction
nommetotal.
function total(chiffre1,chiffre2) {
addition=chiffre1+chiffre2;
return addition;
}
var chiffre1=10;
var chiffre2=20;
alert("Le rsultat de laddition de la fonction total est :
"+total(chiffre1,chiffre2));
</script>
Unefonctionpeutgalementtreaffecteunevariable.Ilsuffitpourceladedclarerlavariableetdeluiaffecterla
fonctionparlesignegal.
Exemple : crer une variable nomme total correspondant une fonction contenant deux paramtres (chiffre1 et chiffre2
respectivementgal10et20).
var total = function(chiffre1,chiffre2) {
addition=chiffre1+chiffre2;
return addition;
}
alert(" Le rsultat de laddition de la fonction total est : "+ total(10,20));
</script>
4.Lesclosures
Une des particularits de JavaScript rside dans le fait que ce langage supporte les closures. Cet anglicisme
(traduisibleenfranaisparfermeture)signifiequunefonctionApeutcomporteruneautrefonctionBqui,ellemme,
faitrfrencelafonctionA.
Exemple :afficherlersultatduneadditionprenantlavaleurdedeuxvariables,issuesdefonctionsdiffrentes.

function externe(parametre) {
var variable1 = parametre;
function interne() {
var variable2=10;
resultat=variable1+variable2;
alert("Laddition des deux variables provenant de deux fonctions
diffrentes est : "+resultat);
}
return interne;
}
var affiche= externe(1);
affiche();
</script>
Lescriptsediviseendeuxfonctionsdiffrentes.Lapremirefonctionappeleexternedisposedunparamtre(dans
cetexemple,gal1)transmisparlinstructionvaraffiche=externe(1).
Ce paramtre est, ensuite, transmis la variable nomme variable1. La fonction interne qui suit a pour objectif de
renvoyeretdafficherlersultatdelavariable1issuedelafonctionparentenommeexterneetdelavariable2dfinie
en son sein. Lensemble du traitement est enfin effectu, lors de lappel de la variable affiche, qui nest ellemme
quunappellafonctionexterne().
Attentioncependant,lesclosurespeuventprovoquerdesfuitesdemmoirenfastespourledroulementdesscripts
enralentissant,voireenbloquantletraitementdunavigateur.
5.Fuitesdemmoire
Unefuitedemmoirecorrespondunesurutilisationdescapacitsdelammoiredelordinateur.Enrglegnrale,
elleestinvolontaireetrsultedufaitquelenavigateurnelibrepaslammoiredontilnaplusbesoin.Ceproblme
estdautantpluscrucialavecleweb2.0etlutilisationdAjax.Eneffet,enutilisationclassique(cestdiresansAjax),
les pages se succdent et le garbage collector de JavaScript (ramassemiettes en franais) effectue un travail de
librationdelammoiredesobjets,quineserontplusutilesparlasuite.AvecAjax,lesdonnescomposantlapage,
peuvent se multiplier puisquil ny a plus forcment de changement de page. Internet Explorer est nettement plus
concernparceproblme,dufaitquilutilisesonpropresystmedegarbagecollector,quipeutentrerenconflitavec
celui de JavaScript. En dfinitive, les closures constituent une des principales causes de gnration de fuites de
mmoire.
6.LemotclThis
Cemotclpermetdidentifierlobjetsurlequelvousdsireztravailler(onparledinstancedelobjet).

Utiliserunefonctionpourcrerunobjet
EnJavaScriptcommedanslaplupartdeslangagesorientsobjet,ilestpossibledenepasselimiterauxobjetsnatifs
deJavaScriptetdecrersespropresobjets.
IlexistedeuxfaonsdeconstruireunobjetenJavaScript.Ilestpossibledelefairedirectementeninitialisantunobjet
ouenpassantparlintermdiairedunprototype.
Lamthodeduprototypageestlapluscouranteetlaplussimpleutiliser.Pouryparvenir,ilfautsuivredeuxtapes
successives.
Tout dabord, il faut crer une fonction qui sert de constructeur au nouvel objet et de dclaration des diffrentes
proprits.Celasappelleici,unprototypagecarilsagitbiendeconstruireunprototypedobjet.
Function nomdemonobjet(proprit1, proprit2, proprit3){

This.proprit1=valeurProprit1 ;
Vouspouvezensuiterutiliserlobjetlaidedesmotsclsvaretnew :
Var monobjet=new nomdemobjet("valeur1","valeur2","valeur3") ;
Exemple : afficher, dans une bote de dialogue, les informations dun objet personnel appel voiture et caractris par une
marque,unmodleetuneanne.
function voiture(propMarque, propModele, propAnnee) {
this.marque=propMarque;
this.modele=propModele;
this.annee=propAnnee;
}
var mavoiture=new voiture("Peugeot","307","2007");
alert("Voici les caractristiques de mon objet voiture :" + "\r
la marque : " + mavoiture.marque + "\r le modle : " + mavoiture.modele
+ "\r lanne : " + mavoiture.annee);
</script>
Ici, lobjet voiture dispose de trois proprits, (propMarque, propModele et propAnnee), correspondant "Peugeot"
"307" "2007". Il est alors possible de crer une instance de lobjet avec ces valeurs. Ensuite, il ne reste plus qu
afficherlemessagedansunebotededialogueenajoutantlespropritsdelobjet,lendroitdsir.
Pourrappel,lutilisationde\rnefonctionnepasavecFirefox/Mozilla,parconsquent,lesinformationsapparaissentsur
uneseuleligne.
Les fonctions et la programmation vnementielle sont largement employes, notamment avec les formulaires qui
correspondentdespagescontenantdeschampscomplterparlutilisateur.

Lesvnements
Les vnements sappliquent aux objets prsents dans la page : les boutons, les champs ou les ascenseurs de la
fentremaisaussilapageenellemme.Cestgrceauxvnementsquelapagedevientinteractive.Ilestpossible
dactiveruneactionlorsquunvnementseproduit.Lasyntaxesuivrecorrespond :
vnement= "actionaraliser" ;
Il suffit, donc, de nommer lvnement (voir la liste cidessous), de le faire suivre du signe gal = et de rdiger
lactionquidoitluicorrespondre.
Objetsconcerns vnement SeProduit
window OnLoad Auchargementdelobjet.
window OnUnLoad Audchargementdelobjet.
image,window Onabort larrtduchargementdelobjet
window OnMove Audplacementdelafentre.
Auredimensionnementdela
window OnResize
fentre.
Audfilementdelafentrepar
window OnScroll
lascenseur.
button,checkbox,document,link, OnClick Auclicsouris.

radio,reset,select,submit
document,link OnDbClick Audoubleclicsouris.
Aumaintiendelapressionsurle
button,document,link OnMouseDown
boutongauchedelasouris.
Aurelchementduboutondela
button,document,link OnMouseUp
souris.
Aupassagedelasourissurundes
area,layer,link OnMouseOver
objets.
Aumomentdudplacementdela
aucun OnMouseMove
souris.
lasortiedelasourissurundes
layer,link OnMouseOut
objets.
button,checkbox,fileUpload,layer,
larceptionducurseurdansun
password,radio,reset,select, OnFocus
desobjets.
submit,text,textArea,window
form OnReset larinitialisationdunformulaire.
image abort larrtduchargementdelimage.
Aumomentdumaintienenfonc
document,image,link,textArea Keydown
dunetoucheduclavier.
Aumomentdelapressionsurune
document,image,link,textArea Keypress
toucheduclavier.

Aumomentdurelchementdune
document,image,link,textArea Keyup
toucheduclavier.
Aumomentdunglissdpos
window Dragdrop
danslafentre.
fileUpload,select,submit,text, Aumomentdunchangementdun
OnChange
textArea desobjets.
button,checkbox,fileUpload,layer,
password,radio,reset,select, Onblur Aumomentdelapertedufocus.
submit
Lorsquuneerreursurlobjet
image,window Onerror
survient.
Exemple :afficherunebotededialogue,aumomentduchargementdelapage :
window.document.OnLoad=alert("Cette fentre saffiche au moment
du chargement de la page");
</script>
Maisgnralement,ledclenchementdelactionestconditionnparunvnementcorrespondantunlmentHTML
delapagecommeunboutonouunchampdeformulaire.AfindaffecteruneactioncetlmentHTML,ilfaut:
inclurelesactionsdansunefonctioncommenouslavonsvuprcdemment
affecterunvnement(onClick,onChange)llmentHTML(lmentprsentdanslapartieBODY)
activerlafonction(prsente,elle,danslapartieHEAD),enlaplaantentreguillemets.
Lasyntaxecorrespondalors :
<ObjetHTML vnement= "mafonction()" ;/>
Si la fonction nattend pas darguments, il faut, tout de mme, laisser les parenthses ouvrante et fermante. Au
contraire,sicelleciattenddesarguments,ilfautlesfairefigurerentrecesparenthses.
videmmentpourquecelafonctionnecorrectement,ilfautquelafonctionsoitrdigeavantsonappel.
Exemple :enreprenantlexempleprcdent,associerlaffichagedunebotededialogueauclicsurunbouton.
<html>
<head>
<title>Les Fonctions et les vnements</title>
function MaFonction()
{
alert("Ceci est ma premire fonction")
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="" >

<p>
<input type="submit" name="Submit" value="Fonctionner"
onClick="MaFonction()" />
</p>
</form>
</body>
</html>

Tantquelevisiteurnecliquepassurlebouton,lafonctionnesexcuterapas.
Ilestpossible,galement,dutiliserlesvnementspourpasserdesargumentsauxfonctions.
Exemple :passerlavaleuraffecteunboutoncommeargumentunefonction,permettantdaffichersonnom.
<html>
<head>
<title>Affiche le nom du bouton</title>
function affiche(nombouton) {
alert("Vous avez cliqu sur le bouton : "+nombouton);
}
</script>
</head>
<body>
<input type="button" name="Bouton" value="Nom"
onclick="affiche(this.value)" />
</body>
</html>
Ici, le bouton nomm Bouton dispose dune valeur gale la chane de caractres Nom , qui est renvoye la
fonctionaffichecomportantunargumentnommnombouton.Lafonctionaffiche()peut,alors,afficherdansunebote
dedialoguelavaleurrenvoyeparlebouton.
Lutilisationdesvnementsest,donc,directementlieauxfonctions.

UtilisationdeJavaScriptaveclesformulaires
Lutilisation de JavaScript pour les formulaires est lutilisation la plus frquente. En effet, il est indispensable de
contrler la validit des champs du formulaire pour dtecter des saisies nonconformes, qui seraient lorigine
derreurs,lorsdetransmissiondesinformationsunebasededonnes.
Lescaslesplusgnralementrencontrssont,parexemple,lasaisieduneadresseemailnonconformeoulabsence
desaisiedansunchampobligatoire.
Enplusducontrledessaisieseffectues,ilestgalementpossibledeprocderdescalculsentreplusieurschamps
numriquesdunformulairepourdterminer,parexemple,unsoustotalpartirdunequantitetdunprixunitaire.
Le dernier exemple prsent dans ce chapitre nous permettra de parcourir lensemble de ces fonctionnalits par la
ralisationdunformulairederservationdeplusieursproduits,satransmissionetsonimpression.
Pourdbuter,examinonslobjetForm.

LobjetForm
Toutecrationdeformulairencessitelajout,danslapageHTML,dunobjetdnomm Form contenantleschamps
detexte,leslistesdroulantesetautrescontrlescommelesboutonsradiooulescasescocher.
LobjetFormestunsousobjetdelobjetdocumentdanslahirarchiedesobjetsJavaScript.Ildisposedepropritset
demthodesquipermettentdelemanipuleroudeluiaffecterdesactionsspcifiques(effacementducontenudetous
leschampsduformulaire,envoiparemaildesinformationssaisies).
DtaillonsquelquespropritsetmthodesutileslamanipulationdelobjetForm.
1.Proprits
action
Correspondlactionquidevratreexcuteparleformulaire(gnralementilsagitdemailto :).
encoding
Dfinit le type de codage des donnes employer lors de lenvoi du formulaire (par exemple, text/plain permet
dindiquerquelesdonnesserontenvoyessouslaformedetexte).
length
Correspondaunombredeformulairesdanslapage.
method
Correspondlamthodedenvoiduformulaire(GetouPost).
name
Correspondaunomduformulaire.
target
Dsignelafentrecibledunjeudecadresdevenantactiveaprslenvoidunformulaire.
2.Mthodes
handlEvent()
Permetdecentraliserletraitementversunseulgestionnaire(mthodenonreconnueparInternetExplorer).
Reset()
Effacelecontenudeschampsduformulaire.
Submit()
Envoieleformulaire.

Leslmentsdeformulaire
Les lments de formulaire reprsentent les champs, les cases cocher, les boutons radio ou les listes droulantes,
permettantdercuprerlesinformationssaisiesouchoisies.
Le placement des lments de formulaire est rendu plus facile en utilisant un tableau sans quadrillage, cela permet
daligner les tiquettes de description dans une premire colonne et les champs de formulaire dans une seconde. Le
tableauestluimmeintgrdansleformulaire.
Pour effectuer des contrles, il est ncessaire de rdiger une fonction JavaScript placer dans la partie HEAD de la
page.Cettefonctionestappeleaumomentduclicsurleboutonduformulaire,parlinstructiononClick= "controle()".
Pourmmoire,voiciuntableaupermettantdefairelacorrespondanceentrelesbalisesHTMLetlesobjetsJavaScript :
BaliseHTML ObjetJavaScript Description
<INPUT TYPE ="text"> text Zonedesaisiemonoligne
<TEXTAREA> textarea Zonedesaisiemultilignes
< INPUT TYPE ="checkbox"> checkbox Casecocher
< INPUT TYPE ="radio"> radio Boutonradio
<SELECT> select Zonedeslection
< INPUT TYPE ="submit"> submit Permetlenvoidesdonnes
< INPUT TYPE ="reset"> reset Rinitialiseleformulaire
< INPUT TYPE ="password"> password Zonedemotdepasse
< INPUT TYPE ="hidden"> hidden Champcach
< INPUT TYPE ="file"> fileUpload Zonedeslectiondefichier
JavaScriptpermetdeffectuerdescontrlessurcesobjets :
1.Manipulationdechamptext
Leschampstextpermettentderecevoirdesvaleurssaisiesparlutilisateur,maisgalementdafficher des rsultats

(parexemple,ceuxobtenuslasuitedecalculs).
Le champ text est monoligne, il ne suffit pas une importante chane de caractres. Dans ce dernier cas, il est
souhaitabledutilisertextarea.
Pouraccderlavaleurdunchamptextdeformulaire,ilfaututiliserlasyntaxepointe.Ainsi,pouraccderlavaleur
saisie dans le champ1 du formulaire Form1 et la stocker dans la variable ma_variable, il faudra utiliser la syntaxe
suivante :ma_variable=document.Form1.champ1.valueodocumentestfacultatif.
Proprits Description
value Correspondauxinformationssaisiesdanslechamp.
defaultValue Correspondlavaleursaffichantpardfautdansle
champtexte.
Mthodes Description
select() Afficheenvidoinverselechamptexteosetrouve
lecurseur.

blur() Librelechamptexteducurseur.
focus() Positionnelecurseursurlechamptexte.
Exemple1 :effacerlecontenudunchamptexteetenslectionnerunautre,encliquantdansuntroisimechamp.
<html>
<head>
<title>manipulation_champs_texte</title>
function manipchamptexte()
{
form1.champ1.value=;
form1.champ2.select();
}
</script>
</head>
<body>
<form id="form1" name="form1" method="" action="" >
<table width="400" border="0">
<tr>
<td>champ1</td>
<td><input name="champ1" type="text" id="champ1" value=
"A Effacer"></td>
</tr>
<tr>
<td>champ2</td>
<td><input type="text" id="champ2" value="A mettre en
surbrillance"></td>
</tr>
<tr>
<td>champ3</td>
<td><input name="champ3" type="text" id="champ3"
onFocus="manipchamptexte()" value="Cliquer Ici"></td>
</tr>
</table>
</form>
</body>
</html>
Dansunformulairecomportanttroischampstextes,encliquantsurlechamp3,vouseffacezlecontenuduchamp1et
vousmettezensurbrillancelecontenuduchamp2.
Lvnementdclencheurdelafonctionmanip_champ_texte()esticileclicsurlechamp3,identifiparonFocus.
Exemple2 :contrlersiunchampTextestvideparunefonctionlanceaprsunclicsurbouton,puisafficherunmessage
davertissementdansunebotededialogue :

<html>
<head>
<title>Controle champ text</title>
function controlevide()
{
if(form1.nom.value ==) {
alert("ce champ est vide");
}
else {
alert("ce champ nest pas vide");
}
}
</script>
</head>
<body>
<p> </p>
<p>
<input name="nom" type="text" id="nom">
</p>
<p>
<input type="submit" name="Submit" value="Envoyer"
onClick="controlevide()" />
</p>
</form>
</body>
</html>
La fonction controlevide dbute par un test de la valeur if(form1.nom.value ==) dun champ de type text pour
savoir sil est vide. Si cest le cas, une bote de dialogue rappelant que la saisie est obligatoire saffiche, sinon une
autrebotededialoguesafficheconfirmantlasaisie.
Linstructionif(form1.nom.value ==)permetdetesterlavaleurduchampdetexteetdesavoirsiilestvide.Dans
cecas,labotededialogueindiquantcettatsaffiche,sinonuneautreboteconfirmequelechampnestpasvide.
2.Manipulationdechamptextarea
Leschampsdetypetextareasontidentiquesauxchampsdetypetext,maisilssontutilissdanslecasolachane
decaractressaisieesttroplonguepourunchamptext.

value Valeurdellment.
defaultValue Correspondlavaleursaffichantpardfautdansle
champtextarea.
Exemple :concatnerlecontenudetroischampstextdansunchamptextarea.
<html>
<head>
<title>manipulation_champs_textearea</title>
function manipchamptextearea()
{
form1.Total_champ.value=form1.champ1.value+form1.champ2.value
+\n+form1.champ3.value;
}
</script>
</head>
<body>
<tr>
<td>champ1</td>
<td><input name="champ1" type="text" id="champ1"></td>
</tr>
<tr>
<td>champ2</td>
<td><input type="text" id="champ2"></td>
</tr>
<tr>
<td>champ3</td>
<td><input name="champ3" type="text" id="champ3"></td>
</tr>
<tr>
<td>Total champ </td>
<td><textarea name="Total_champ" cols="15" rows="2"
id="Total_champ"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="button" name=" Concatener "
value="Concatener" onClick="manipchamptextearea()"></td>
</tr>
</table>
</form>
</body>

</html>
Lafonctionmanip_champ_textarea()faitlaconcatnationdesdeuxpremierschampsduformulaire,puiscritlavaleur
dutroisimechamp,enfaisantunretourlaligneentrecesdeuxpartiesgrceNewline(\n).
Ici, il sagit simplement dutiliser loprateur de concatnation + pour obtenir une nouvelle chane de caractres. La
fonctionestexcuteaumomentduclicsurleboutonConcatener.
3.Contrledescasescocher
Pourlescasescocher,ilestpossibledesavoirsiellessontcochesounonet,doncdorienterledroulementdu
script.
Ilestpossibledefaireplusieursrponsesencochantplusieurscases,pourunemmequestion.
Valeurboolennegaletruelorsquelacaseest
checked
cocheetfalselorsquellenelestpas.
Valeurboolennecorrespondantlacasecoche
defaultChecked (cestdireaveclavaleurtrue)aumomentdu
chargementduformulaire(cestlavaleurpardfaut).
Exemple:testerlesrponses,sousformedecasescocherpossibles,unequestionetafficherunebotededialogue.
Danscetexempleilyaquatrepossibilitsderponse :
Aucunedescasesnestcoche.
Lapremirecaseestcoche.
Lasecondecaseestcoche.
Lesdeuxcasessontcoches.
Pourcederniercas,ilfaudraassocierlesdeuxvaleurssimultanmentdansletestparle etlogique (&&).
<html>
<head>
<title>Controle_case_a_cocher</title>
function controlecaseacocher()
{

if((form1.marche.checked ==true) && (form1.vp.checked ==true))
alert("Cest bien de marcher de temps en temps");
else if(form1.vp.checked ==true)
alert("Ce nest pas bon pour lenvironnement");
else if(form1.marche.checked ==true)
alert("La marche est bonne pour la sant");
else alert("Rpondez en cochant au moins une case");
}
</script>
</head>
<body>
<p> </p>
<tr>
<td width="633">Quel mode de transport utilisez-vous pour vous
rendre sur votre lieu de travail ? </td>
</tr>
<tr>
<td><input name="marche" type="checkbox" id="marche" value="checkbox">
Marche </td>
</tr>
<tr>
<td><input name="vp" type="checkbox" id="vp" value="checkbox">
Véhicule personnel </td>
</tr>
</table>
<p> </p>
<p>
onClick="controlecaseacocher()" />
</p>
</form>
</body>
</html>
Il est ncessaire dappliquer quatre tests diffrents pour traiter les quatre situations possibles. La validit du test
permettradafficherlabotededialoguecorrespondante.
4.Contrledesboutonsradio
Lesboutonsradiodoiventporterlemmenomafindepouvoirlesidentifierenfonctiondeleurnumrodindex.Ainsi,
lepremierboutonradioestidentifipar0,lesecondpar1etletroisimepar2.
Lorsquunclicslectionneunbouton,touslesautressontdslectionns cequidiffrencielutilisationdesboutons
radiodecelledescasescocher.
Propritsessentielles Description
checked Valeurboolennegaletruelorsqueleboutonest
activetfalselorsquilnelestpas.
Valeurboolennecorrespondantauboutonactiv
defaultChecked (cestdireaveclavaleurtrue)aumomentdu
chargementduformulaire(cestlavaleurpardfaut).

Exemple :testerlesrponsesunequestionsousformedetroisboutonsradio.
<html>
<head>
<title>Controle_bouton_radio</title>
function controleboutonradio()
{
if(form1.connaitre_Javascript[0].checked) {
alert("Cest trs bien");
}
if (form1.connaitre_Javascript[1].checked) {
alert("Vous pouvez encore progresser");
}
if (form1.connaitre_Javascript[2].checked) {
alert("Nous nen sommes quau dbut");
}
}
</script>
</head>
<body>
<p> </p>
<tr>
<td width="326">Connaissez-vous bien le Javascript ? </td>
<td width="281"><p>
<label>
<input type="radio" name="connaitre_Javascript" value="Oui">
Oui</label>
<br>
<label>
<input type="radio" name="connaitre_Javascript" value="Un peu">
Un peu</label>
<br>
<label>
<input type="radio" name="connaitre_Javascript" value=
"Pas du tout">
Pas du tout</label>
</p></td>
</tr>
</table>
<p> </p>
<p>

onClick="controleboutonradio()" />
</p>
</form>
</body>
</html>
La fonction controle_bouton_radio teste les boutons radio, appels connaitre_Javascript suivis du numro dindex
entrecrochets.Enfonctiondelapropritchecked,unmessagesaffichedansunebotededialogue.
5.Contrledesvaleursduneslectiondeliste
Lecontrledesvaleursdunelisteserapprochedeceluidesvaleursdescasescocher,leslmentsdelalistetant
identifisgalementparunnumrodindex.LlmentchoisiestsimplementidentifiparlinstructionselectedIndex.
length Correspondaunombredevaleursdanslaliste.
Correspondunevaleurdanslaliste,identifiepar
selectedIndex
sonnumrodanslindex.Lindexcommencezro.
defaultSelected Valeurpardfautslectionnedanslaliste.
Exemple : ouvrir des botes de dialogue permettant dafficherunmessagediffrent,enfonctionduneslectionfaitedans

unelistedroulante.
<html>
<head>
<title>Controle_liste</title>
function controleliste()
{
if(form1.Question.selectedIndex ==0)
alert("Cest moins");
else if(form1.Question.selectedIndex==1)
alert("Cest plus");
else {
alert("Cest la bonne vitesse");
}
}
</script>
</head>
<body>

<p>Quelle tait la vitesse maximum du TGV lors de son record
le 3 avril 2007 ? </p>
<select name="Question" id="Question">
<option>630,1 Km/h</option>
</select>
<p> </p>
<p>
<input type="submit" name="contrler" value="contrler"
onClick="controleliste()" />
</p>
</form>
</body>
</html>
Le script sexcute au moment du clic sur le boutoncontrler. La fonction controleliste teste lindice de la slection
danslaliste(lepremierindicetantidentifiparlenumrozro).Enfonctiondecetteslection,lescriptafficheune
botededialogue.
6.Contrledesvaleursdunelisteslectionsmultiples
Leslistesslectionsmultiplespermettentdeslectionnerplusieursvaleursdelalisteenutilisantlatouche[Alt]pour
lesslectionscontigusetlatouche[Ctrl]pourlesslectionsquinelesontpas.
Le script va contenir une boucle sur les lments de la liste, qui contrlera pour chacun si leur valeur a t
slectionne.
length Correspondaunombredevaleursdanslaliste.
Correspondunevaleurdanslalisteidentifiepar
selectedIndex
sonnumrodanslindex.Lindexcommencezro.
defaultSelected Valeurpardfautslectionnedanslaliste.
Exemple :afficherdansdesbotesdedialoguesuccessives,lesvaleursslectionnesdansunelisteslectionmultiple.
<html>
<head>
<title>manipulation_liste_multiple</title>
function maniplistemultiple()

{
var ville="";
nb=form1.liste_ville.length;
i=form1.liste_ville.selectedIndex;
for (i = 0;i<nb;i++){
if(form1.liste_ville.options[i].selected){
ville=form1.liste_ville.options[i].value;
alert(ville+" est slectionne");
}
}
}
</script>
</head>
<body>
<tr>
<td width="140" height="108"><select name="liste_ville"
size="5" multiple id="liste_ville">
<option value="Paris">Paris</option>
<option value="Lyon">Lyon</option>
<option value="Marseille">Marseille</option>
<option value="Lille">Lille</option>
<option value="Strasbourg">Strasbourg</option>
</select> </td>
</tr>
<tr>
<td><input type="button" name="Submit" value="Sélectionner"
onClick="maniplistemultiple()"></td>
</tr>
</table>
</form>
</body>
</html>
Le script sexcute aprs un clic sur le boutonSlectionner. La fonction maniplistemultiple dbute en initialisant la
variableville.Puis,ellecomptelenombredlmentsprsentsdanslalisteettransfredansunevariablenommei,
lenumrodindicedelavaleurslectionne.Ensuite,uneboucleparcourtlensembledeslmentsdelalistepourles
affichersuccessivementdansunebotededialogue.Danslecasoaucunevillenestslectionne,riennesaffiche.
7.Lenvoidefichierparformulaire
Cest un type dobjet formulaire qui permet denvoyer un fichier sur un serveur. Il se prsente sous la forme dun
champ, de type texte, destin recevoir le chemin du fichier, plac sur le disque dur. Il est galement possible
dutiliser le bouton Parcourir afin davoir un contrle plus visuel. Attention cet objet peut tre dangereux, car il est
possibledajouternimportequeltypedefichierycomprisceuxcomportantducodemalveillant.Pourvrifierquilne
sagitpasdefichierdangereux(cestdiretouslesfichiersportantuneautreextensionquegifoujpg,parexemple),
ilestprfrabledassocierunefonctiondecontrle.Poureffectuercegenredecontrle,ilfautmanipulerlobjetString.
Un exemple de ce genre de contrle est, donc, donn au chapitre Les principaux objets JavaScript en dtail sur les
chanesdetexte.
- 10 - ENI Editions - All rigths reserved

Valideretenvoyerunformulaireparemail
Pour tout dveloppeur de site web, les formulaires constituent un lment essentiel de linteractivit avec les
internautes.Ilspermettentderecueillirdesinformationsdansunebasededonnesousilusagedunebasenestpas
envisag,detransmettrelesinformationssaisiesdansleformulaireparemailsimplement.
Danscetexemple,ilsagitdeconcevoirunformulairederservationdarticlesquipourratreimprimetenvoyune
adresseemaildtermine.LesinformationsneserontpasstockesdansunebasedetypeMySql,parexemple,mais
serontenvoyesparemailundestinataireprdfini,quipourratraitercesdonnes,dsrception.
Lacrationduformulaireneserapastraitedanscetouvrage,ilestpossibledelecrerenhtmlouparunditeur
HTMLdetypeDreamweaver,parexemple.
Commeprcdemment,linsertionducodeJavaScriptpermettradevrifierlaprsencedinformationsdansleschamps
de formulaire et de contrler leur contenu. Le rsultat de ces contrles permettra denvoyer des messages
davertissementouencoredeffectuerdescalculs.
Leformulairecomporte,enplusdeslmentsdjdtaills,quatreboutonsauxfonctionsdistinctes.
LeboutonTransmettreeffectuelatransmissiondesinformationsparemail.
Codedubouton :
<input name="bouton_transmettre" type="submit"

id="bouton_transmettre" value="Transmettre">
CeboutondetypeSubmitdclenchelenvoiduformulaire.
Codeduformulaire :
<form action="mailto:monmail@monserveur.com" method="post"

enctype="text/plain" name="Formulaire_reservation"
LeboutonRinitialiserpermetdeffacerlecontenudetouslescontrlesduformulaire.
<input name="bouton_reinitialiser" type="reset"

id="bouton_reinitialiser" value="Réinitialiser">
LeboutonImprimerpermetlimpressionduformulaire.
function Imprim() {
window.print();}
LeboutonValiderpermettraledclenchementdesdiffrentstraitementsinclusdanslafonctionJavaScriptdecontrle.

Le premier traitement concerne le champ Nom. Pour ce champ, vous dsirez convertir la saisie de minuscule en
majuscule.Pourcela,vousferezappellamthodetoUpperCase()quipermetdeconvertirlachanedecaractres.
LesecondtraitementtestelecontenuduchampCode_Postal.Toutdabord,vouseffectuezuntestpourinterdirela
possibilitdun champ vide. Ensuite, vous le testez nouveau pour nautoriserquelasaisiedun champ numrique.
Dansunautrecas,commeparexemplelasaisiedelettredanscechamp,unavertissementsaffichedansunebotede
dialogue.VousutiliserezIsNaN(IsNotaNumber)pourfaireletest.
Letroisimetraitementpermetdetesterlavaliditduchampemailparlaprsencedunearobasedanslachanede
caractres. Vous utilisez pour le faire la mthode search(@)qui renvoie dans une variable, la position de larobase
dans la chane de caractres. Si cette position est ngative, cela signifie quil nexiste pas darobasedanslachane.
Ladressenestdoncpasvalide.Biensr,vouspouvezprocderdautrestests,notammentpoursavoirsilextension
du nom de domaine est raliste. Malgr tout, il est impossible dexclure la saisie dune adresse farfelue de type
inconnu@sansserveur.com.
Le quatrime traitement de cette fonction permet dafficher le prix dun article partir de sa slection dans la liste
droulante.Pourcefaire,vousutilisezlinstructionswitchquipermetdetraiterlensembledescasdeslectiondela
liste.Enfonctiondecetteslection,vousaffichezleprixdanslechampPrix_unitaire_P1ouP2correspondantchacun
auchoixdunpremieretdunsecondproduit.
LecinquimetraitementpermetlecalculdessoustotauxP1ouP2eneffectuantleproduitdelavaleurdeschamps
QuantitetPrix_unitaireP1ouP2.
LesiximetraitementcalculelesoustotalHorsTaxeparadditiondeschampssous_totalP1etsous_totalP2quisont
pralablementconvertisennombreparlinstructionparseInt().
Le septime traitement calcule les montants TTC par produit des soustotaux avec 1.196 et arrondi en utilisant
Math.round.
Le huitime traitement contrle si la case cocher Rservation est coche. Si ce nest pas le cas, une bote de
dialogue,rappelantcetteobligation,saffiche.
LeneuvimetraitementpermetdimprimerleformulaireparlinstructionfigurantdanslafonctionImprim().Celleciva
sedclencherlorsduclicsurleboutonImprimerduformulaire.
Pour terminer, vous transmettez les valeurs saisies ou calcules dans les champs du formulaire, en cliquant sur le
boutonTransmettre.
Ilconvientdenoterquelesinformationstransmisesserontprcdesdunomduchampdfini,lorsdelacrationdu
formulaire,etdusignegal(=).
Voiciunexempleducontenuduemailreu,aprstransmissionduformulaire :

LeboutonRinitialiserpermetdemettrezrotousleschampsduformulaire.
Latransmissiondunformulaireparemailpeutposercertainsproblmes.Ilestncessairedouvrirleclientde
messageriepardfautetdefaireun envoyertransmettre pourterminerlenvoi.

<script language="JavaScript">
function control()
{
nom_minuscule=Formulaire_reservation.Nom.value;
nom_majuscule=nom_minuscule.toUpperCase();
Formulaire_reservation.Nom.value=nom_majuscule;
if(Formulaire_reservation.CP.value==) {
Formulaire_reservation.CP.style.backgroundColor = "FFCC00";
alert("La saisie de ce champ est obligatoire");
}
code=Formulaire_reservation.CP.value;
if(isNaN(code)) {
alert("Veuillez entrer un Code Postal valide");
Formulaire_reservation.CP.style.backgroundColor = "FFCC00";
Formulaire_reservation.CP.value=;
}
test_mail=Formulaire_reservation.email.value;
resultat = test_mail.search(@);
if (resultat<0) {
alert("e-mail non valide");
Formulaire_reservation.email.style.backgroundColor = "FFCC00";
Formulaire_reservation.email.value=
}
var article1 = Formulaire_reservation.Designation_P1.value;
var article2 = Formulaire_reservation.Designation_P2.value;
switch (article1)
{
case "Jupe":
Formulaire_reservation.Prix_unitaire_P1.value=35;
break;
case "Pantalon":
break;
case "Short":
break;
case "Tee-shirt":
}
switch (article2)
{
case "Jupe":
break;
case "Pantalon":
break;
case "Short":
break;
case "Tee-shirt":
}
Formulaire_reservation.Sous_total_P1.value=Formulaire_reservation.
Quantite_P1.value*Formulaire_reservation.Prix_unitaire_P1.value;
Formulaire_reservation.Sous_total_P2.value=Formulaire_reservation.
Quantite_P2.value*Formulaire_reservation.Prix_unitaire_P2.value;

sous_total_P1=parseInt(Formulaire_reservation.Sous_total_P1.value);
sous_total_P2=parseInt(Formulaire_reservation.Sous_total_P2.value);
Total_HT=sous_total_P1+sous_total_P2;
Formulaire_reservation.Total_HT.value=Total_HT;
Total_TTC=Total_HT*1.196;
Total_TTC_arrondi=Math.round(Total_TTC*100)/100;
Formulaire_reservation.Total_TTC.value=Total_TTC_arrondi;
if (Formulaire_reservation.Reservation.checked==false)
alert("Veuillez valider les conditions gnrale de rservation");
}

Lamthoderound()delobjetMathesttraitedanslechapitreLesprincipauxobjetsJavaScriptendtail.
Pour valider les masques de saisie, il est galement possible dutiliser lobjet RegExp dans une expression
rgulirequiseragalementtraiteauchapitreLesprincipauxobjetsJavaScriptendtail.
Leformulaireestundesobjetsimportantdelacompositiondunepage,cependantilyenadautresenJavaScriptquil
convientdebiendcrire.

Objetsetnavigateurs
Commenouslavonsvuaucoursdeschapitresprcdents,leJavaScriptestinterprtdemanirediffrenteselonles
navigateurs. Au sommet de la hirarchie des objets JavaScript, il faut distinguer lobjet navigator qui correspond au
navigateurutilispourlalecturedelapagedelobjetwindowreprsentantlafentre.

LesobjetsJavaScript
JavaScriptfournituncertainnombredobjetsdfinisdanslenoyauetdonc,manipulablestoutmoment.Cesobjetsdu
noyaunedpendentpasdunavigateuraveclequelilssontutilissetilsserontdtaillsenfindechapitre.
1.Lobjetnavigator
Lobjetnavigatorcorrespondaunavigateurutilisparlevisiteurdelapage.Cetteinformationpeuttreprimordiale
notamment lorsque vous associez JavaScript et DHTML, linterprtation de celuici tant diffrente selon les
navigateurs et leur version. Bien videmment, les informations de lobjet navigator sont en lecture seule, ce qui
sembleassezlogique.DanslahirarchiedesobjetsJavaScript,lobjetnavigatorestlilobjetwindow.Vouspouvez
doncyaccderaveclesdeuxsyntaxessuivantespossibles :
window.navigatorousimplementparnavigator.
Lespropritsdelobjetnavigatorpermettentdobtenirdesinformationsessentiellespourorienterlevisiteuretainsi,
luipermettredoptimisersavisite.Ainsi,lefaitdesavoirsilescookiessontactivsoupaspermetdalerterlevisiteur,
que le site ne pourra pas fonctionner correctement sil ne les active pas. De mme, la connaissance de la langue
utiliseparlenavigateurpermettradorienterautomatiquementlevisiteurverslespagescorrespondantcelleci.
a.Lesproprits
Proprit Rsultat
appCodeName Retournelecodedunavigateur.
appName Retournelenomdunavigateur.
appVersion Retournelaversiondunavigateur.
Retournetrueoufalsepourindiquersilescookies
cookieEnabled
sontactivs.
cpuClass Retourneletypedeprocesseurdelordinateur
utilis.
javaEnabled() Dterminesilenavigateurestapteexcuterdes
appletsJava.
mimeTypes Retourneuntableaudestypesmimessupportspar
lenavigateur.
platform Retournelaplateformesurlaquellelenavigateur
fonctionne.
plugins Retourneuntableaudespluginsinstallssurle
postedunavigateur.
userAgent Retournetouteslesinformationsconcernantle
navigateurclient.
userLanguage Retournelalangueutiliseparlenavigateur.
Exemple :afficherlesinformationsdunavigateurutilisgrcelaproprituserAgent.

agent=navigator.userAgent;
alert(agent);
</script>
Les informations affiches correspondent au type et la version du navigateur, la plateforme utilise et la

versiondeCLRprsentesurlamachine.LeCLRcorrespondlamachinevirtuelleduframework.NETdeMicrosoft.
b.Lesmthodes
Les mthodes sont moins nombreuses et moins utiles. Elles permettent essentiellement de manipuler les
prfrencesdunavigateur.
Mthode Rsultat
Rafrachitlalistedespluginsinstallssurlepostedu
plugins.refresh()
navigateur.
preference() Dterminelesprfrencesdunavigateur.
Sauvegardelesmodificationsapportesaux
savePreferences()
prfrencesdunavigateur.
Exemple : afficher le nom du navigateur, sa version, le nom du type de plateforme actuellement utilis ainsi que la
prsenceetlactivationdescookies,dansunebotededialogue.
navigateur=navigator.appName;
version=navigator.appVersion;
plateforme=navigator.platform;
cookie=navigator.cookieEnabled();
if (cookie==true){
alert("Vous utilisez actuellement " +navigateur+ " "+version+ "\r
comme navigateur Internet, sur une plate-forme de type :
" +plateforme+ " avec les cookies activs" );
}
else
{
alert("Vous utilisez actuellement " +navigateur+ " "+version+ "\r
comme navigateur Internet, sur une plate-forme de type :
" +plateforme+ " Attention ! les cookies ne sont pas activs" );
}
</script>
Le script dbute par laffectation de plusieurs variables par les proprits et mthodes de lobjet navigator et
notammentdecookieEnabled(),quisertdevaleurdecomparaisondutest.EntestantcookieEnabled(),lescriptest
orientverslunoulautredesmessages.


EnouvrantcescriptavecMozilla,Firefox,larponsesera Netscape .
Exemple :afficherletypedenavigateuretsaversionpourpermettredorienterlescriptultrieurement.
<html>
<head>
<title>Verification du navigateur</title>
function verifnavigateur() {
navigateur = navigator.appName.substring(0,3);
version = navigator.appVersion.substring(0,1);
if (navigateur == "Mic"){
alert("Vous utilisez actuellement la version " +version+" dInternet
Explorer");
}
else if(navigateur=="Net") {
alert("Vous utilisez actuellement la version " +version+" de Firefox ");
}
else if(navigateur=="Ope") {
alert("Vous utilisez actuellement la version " +version+" dOpra ");
}
}
</script>
</head>
<body onLoad="verifnavigateur()">
</center>
</body>
</html>

Le script sexcuteauchargementdelapageetutiliselespropritsdelobjetnavigatorpourdonnerunevaleur
auxvariablesnavigateuretversion.Lavaleuraffectecorrespondunechanedetroiscaractresextraitsdeces
proprits, par lemploi de la mthode substring() de lobjet String que nous dtaillerons ultrieurement dans ce
chapitre. Il reste, ensuite, comparer cette chane de caractres, au dbut du nom des navigateurs (ici Mic pour
Microsoft Internet Explorer, Net pour Firefox Mozilla et Ope pour Opra). Une bote de dialogue peut, alors, tre
afficheenreprenantlecontenudesvariables.
2.Lobjetwindow
Lobjetwindow(fentre)estlobjetlepluslevdanslahirarchiedesobjetsJavaScript.Cestleparentdetousles
objets placs lintrieur. Cet objet est souvent qualifi dimplicite, car il nest pas ncessaire de le nommer pour
accderauxobjetsplacsendessous.Cettesimplicitdutilisationestattnueparlefaitque,quelquesunesdeses
propritsetmthodesnesontpasinterprtescorrectementpartouslesnavigateurs.Malgrtout,cest un objet
quiestsouventutilis,carcestceluiquicomporteleplusgrandnombredepropritsetdemthodes.Ilestdonctrs
importantdelesdtailler.
a.Lesproprits
Proprit Rsultat Reconnupar :
Retournetruesilafentre InternetExplorer,Mozilla,Firefox,
closed
laquelleonserfreestferme. Opra.
Correspondaumessage
defaultStatus permanentaffichdanslabarre InternetExplorer,Mozilla,Firefox,
destatutssitueendessousde Opra.
lafentre.
InternetExplorer,Mozilla,Firefox,
document Correspondaudocumentcourant.
Opra.
Correspondlensembledes InternetExplorer,Mozilla,Firefox,
frames
cadresdelobjetwindow. Opra.
Correspondaucontenudelobjet InternetExplorer,Mozilla,Firefox,
history
history. Opra.
Correspondlahauteurutilisable
innerHeight Mozilla,Firefox,Opra.
dunefentre.
Correspondlalargeurutilisable
innerWidth Mozilla,Firefox,Opra.
dunefentre.
Correspondaunombretotalde InternetExplorer,Mozilla,Firefox,
length
cadresutilissdanslafentre. Opra.
location CorrespondlURLdelapage InternetExplorer,Mozilla,Firefox,

chargedanslafentre. Opra.
Correspondlabarredadresse
locationbar Mozilla,Firefox,Opra.
dunavigateur.
menubar Correspondlabarredemenudu
Mozilla,Firefox,Opra.
navigateur.
name Correspondaunomdonnla InternetExplorer,Mozilla,Firefox,

fentre. Opra.
Correspondaunomdelafentre
opener InternetExplorer,Mozilla,Firefox,
quiacrunefentreaumoyen
Opra.
delamthodeOpen().

outerHeight Correspondlahauteur
extrieuredelapageenpixels.
outerWidth Correspondlalargeur
extrieuredelapageenpixels.
Correspondlaposition
pageXoffset horizontaleenpixelsdela Mozilla,Firefox,Opra.
fentre.
Correspondlapositionverticale
pageYoffset Mozilla,Firefox,Opra.
enpixelsdelafentre.
Correspondlapagecomprenant
parent InternetExplorer,Mozilla,Firefox,
lensembledescadresdunepage
Opra.
decadres.
personalbar Correspondlabarredoutils
personnelle.
scrollbars Correspondauxbarresde
dfilementhorizontaletvertical.
Correspondlafentrecourante InternetExplorer,Mozilla,Firefox,
self
(window). Opra.
Correspondaumessagealatoire
quipeuttreaffichlorsdun
status vnementdanslabarrede
Opra.
statutssitueendessousdela
fentre.
Correspondlabarredoutilsdu
toolbar Mozilla,Firefox,Opra.
navigateur.
Correspondlafentreduplus
top hautniveaulintrieurdune
Opra.
pagedecadres.
Correspondlafentrecourante InternetExplorer,Mozilla,Firefox,
window
(self). Opra.
b.Lesmthodes
CertainesdentresellesontdjttraitesauchapitreUtilisationdesconstantes,variablesetoprateurs.Pourle
reste,ilsagitdemthodesconcernantlagestiondesfentres(ouverture,fermeture,position,affichage,etc.),oula
navigation des pages visites. Le tableau suivant fournit un descriptif de lensemble des mthodes de lobjet
window :
Mthode Rsultat Reconnupar
Afficheunebotededialogue
alert() InternetExplorer,Mozilla,Firefox,
comportantunmessage
Opra.
davertissementetunboutonOK.
Revientdunepageenarrire
back() danslhistoriquedespages Mozilla,Firefox,Opra.
visites.
blur() InternetExplorer,Mozilla,Firefox,
Dsactivelafentrecourante.
Opra.
close() InternetExplorer,Mozilla,Firefox,
Fermelafentrecourante.
Opra.

confirm() InternetExplorer,Mozilla,Firefox,
comportantdeuxboutons :OKet
Opra.
Annuler.
find() Effectueunerecherchedetexte
danslapageactive.
focus() InternetExplorer,Mozilla,Firefox,
Activeunefentre.
Opra.
forward() Avancedunepageenavantdans
lhistoriquedespagesvisites.
Chargelapagedfiniecomme
home() Mozilla,Firefox,Opra.
pagedaccueildanslenavigateur.
moveTo() Dplacelafentreactive.
Opra.
open() Ouvreunenouvellefentre.
Opra.
print() Imprimelapageactive.
Opra.
prompt() permettantlutilisateurdesaisir
Opra.
unevaleur.
Modifielatailledelafentre
activepartirducoininfrieur InternetExplorer,Mozilla,Firefox,
resizeBy()
droitenfonctiondunequantit Opra.
depixelsindique.
Modifielatailledelafentre
resizeTo() InternetExplorer,Mozilla,Firefox,
activeendterminantlaposition
Opra.
ducoininfrieurdroit.
Effectueuntraitementintervalle InternetExplorer,Mozilla,Firefox,
setInterval()
rgulier. Opra.
setTimeOut() Dclencheuneminuterie.
Opra.
Dcalelecontenudunefentre
scrollBy() InternetExplorer,Mozilla,Firefox,
enfonctiondunequantit
Opra.
exprimeenpixels.
Dcalelecontenudunefentre
scrollTo() endterminantlanouvelleorigine
Opra.
ducoinsuprieurgauche.
stop() Interromptlechargementdela InternetExplorer,Mozilla,Firefox,

pageactuelle. Opra.
Unedesmthodesdelobjetwindowdoittredtaillecarelleestfrquemmentemploye.
c.Mthodeopen()
Cette mthode est souvent employe pour crer ce que lon appelle des popup, cestdire des fentres qui
souvrentautomatiquementpendantquevousconsultezunepage.Quelquefoisutiles,quelquefoisembarrassantes,
ces fentres surgissantes peuvent tre bloques par un anti popup, qui est dailleurs inclus dans les dernires
versionsdesnavigateurs.Cest pour cette raison quil ne faut jamais inclure un contenu important pour votre site
(commeunformulairedinscription,parexemple),dansunpopup.Lemieuxconsisterserverlusagedespopup

des messages de rappel (date et heure de runion, par exemple) ou pour des informations se renouvelant
rapidement.
Lasyntaxedelamthodeopen()estlasuivante :
f=window.open("page", "nom", "paramtre1,parametre2,parametre3")
Ofestlenomdelobjetreprsentparlanouvellefentre,pageestladressedelapageafficher,nomestle
nomdelanouvellefentreetparamtre1/2/3...correspondentdesparamtresoptionnels(position,taille,etc.).
Les deux premiers paramtres sont obligatoires, les autres sont facultatifs. Les paramtres sont indiqus sous la
formedunechanedecaractres,sanslimitedetaille.Attentioncertainsparamtres,quinesontpasinterprts
parInternetExplorer.Seulslesparamtresdepositionetdetaillesontexprimsnumriquement,lesautresutilisent
les valeurs (true ou false) ou (yes ou no). Le tableau suivant prcise les diffrents paramtres possibles et leur
reconnaissanceparlesnavigateurs.
Paramtre Fonction Reconnupar
alwaysLowered Creunenouvellefentresous
Mozilla,Firefox,Opra..
lesautres.
alwaysRaised Creunenouvellefentrepar
dessustouteslesautres.
Creunenouvellefentre
dpendantedelapremire.En
dependent casdefermeturedelafentre Mozilla,Firefox,Opra..
parente,lafentrefillesera
fermegalement.
Affichelabarredoutils InternetExplorer,Mozilla,Firefox,
directories
personnelle. Opra.
Donnelefocusclavier.Permet
focus InternetExplorer,Mozilla,Firefox,
ainsideractiverunefentrequi
Opra.
vientdtrecre.
Permetdafficherlanouvelle
fullscreen InternetExplorer
fentreenpleincran.
Dfinieenpixelslahauteurdela
nouvellefentre.Doittre InternetExplorer,Mozilla,Firefox,
height
remplaceparinnerHeightsur Opra.
InternetExplorer.
DterminesilURLdelanouvelle
hist fentreserastockedans
Opra.
lhistoriquedunavigateur.
Activeoudsactivecertains
hotkeys raccourcisclavierpourlanouvelle Mozilla,Firefox,Opra.
page.
Dterminelahauteurenpixelsde
innerHeight lanouvellefentre(cellecidoit Mozilla,Firefox,Opra.
tresuprieure100pixels).
Dterminelalargeurenpixelsde
innerWidth lanouvellefentre(cellecidoit Mozilla,Firefox,Opra.
tresuprieure100pixels).
left Dterminelapositionenabscisse InternetExplorer,Mozilla,Firefox,

delanouvellefentre. Opra.
location Afficheoumasquelabarre InternetExplorer,Mozilla,Firefox,

dadresse. Opra.

Afficheoumasquelabarrede
menubar InternetExplorer,Mozilla,Firefox,
menussitueenhautdela
Opra.
fentre.
Dtermineenpixelslahauteurdu
outerHeight cadreextrieur(cellecidoittre Mozilla,Firefox,Opra.
suprieure100pixels).
Dtermineenpixelslalargeurdu
outerWidth cadreextrieur(cellecidoittre Mozilla,Firefox,Opra.
suprieure100pixels).
Permetlamodificationdelataille
resizable InternetExplorer,Mozilla,Firefox,
delanouvellefentrepar
Opra.
lutilisateur.
Dterminelapositionenabscisse
screenX ducoinsuprieurgauchedela Mozilla,Firefox,Opra.
nouvellefentre.
screenY Dterminelapositionen
ordonnedelanouvellefentre.
scrollbars InternetExplorer,Mozilla,Firefox,
Affichelesbarresdedfilement.
Opra.
Afficheoumasquelabarrede
status statutssitueaubasdela
Opra.
fentre.
Afficheoumasquelabarre
toolbar dicnessitueaudessousdela
Opra.
barredemenus.
Dfinitenpixelslalargeurdela InternetExplorer,Mozilla,Firefox,
width
fentre. Opra.
Exemple :afficheretmasquerunenouvellefentrepartirduneautre.
<html>
<head>
<title>Objet Window</title>
fenetre=window.open("","Nouvelle","height=100,width=300,menubar=yes,

toolbar=yes,resizable=no,scrollbar=no");
</script>
</head>
<body onUnload="window.fenetre.close()">
<input type="button" name="Submit" value="Nouvelle"
onClick="fenetre.focus()">
<input type="button" name="Submit2" value="Masquer"
onClick="fenetre.blur()">
</body>
</html>
Lescriptutiliselesmthodesfocus()etblur()delobjetwindowpourafficherlafentresouhaite.Ainsi,dsledbut
du script, une nouvelle fentre saffiche avec les paramtres de taille et daffichage souhaits. Linstruction <body
onUnload="window.fenetre.close()">permetderefermerlafentre,encasdedchargementdelapremirefentre.
Ensuite,lesboutonsNouvelleetMasquerdclenchentlelancementdesdeuxfonctionspermettantlaffichageetle
masquagedelafentre.
Exemple :modifierlatailleetlapositiondunefentredemanirerpte.
<html>
<head>
<head>
<title>Fentre modifiant la taille et la position</title>
<script language="JavaScript" type="text/javascript">
function tailleposition(){
window.innerHeight=100;
window.innerWidth=200;
for(i=0;i<200;i++){
h=4;
z=4;
self.moveBy(h, z);
self.resizeBy(h, z);
}
}
</script>
</head>
<body>
<form name="form1" action="">
<input name="Modifier" type="button" id="Modifier"
onClick=tailleposition(); value="Modifier">
</form>
</body>
</html>
Danscescript,lespropritsdetailleetdepositionsontutilises.Lescriptdbuteparladfinitiondedpartdela
fentre,aveclespropritsinnerHeightetinnerWidth.Ensuite,uneboucleestcrepermettantderedimensionner
la fentre et de la faire bouger de quatre pixels supplmentaires (la fentre se dplacera donc du bord suprieur
gaucheaubordinfrieurdroit,oudonnelimpressiondevibrersilafentreprenddjtoutelaplacedelcran).Une
foislaboucletermine,lafentresestabilise.
Exemple :proposerdinsrerlapageactiveenfavoris:

<html>
<head>
<title>Ajout en favoris</title>
navigateur = navigator.appName.substring(0,3);
version = navigator.appVersion.substring(0,1);
adresse=window.location;
titre=window.name;
function ajoutfavoris() {
rep=confirm("Voulez-vous ajouter cette page dans vos favoris ?");
if (rep==false) {
return;
}
else {
if (navigateur == "Mic" && version >= 4){
url_site=adresse;
titre_site = titre;
window.external.AddFavorite(url_site, titre_site);
}
else {
alert("Utilisez le raccourci-clavier Ctrl+D pour ajouter cette page
vos favoris");
}
}
}
</script>
</head>
<body onLoad="ajoutfavoris()">
</center>
</body>
</html>
Cescriptsexcuteauchargementdelapageetlepremiertraitementeffectuparlafonctionajoutfavoris()estde
rcuprer le nom de la page, le nom et la version du navigateur utilis, car le traitement de mise en favoris est
diffrentselonlescas.AvecInternetExplorer,cetajoutpeutseffectuerautomatiquement,maisavecFirefox/Mozilla,
Firefoxilnepeuttreralisqupartirdun raccourciclavierouauchoixdelutilisateurdanslemenu,etcepour
desraisonsdescurit.Ensuite,ilestdemandlutilisateursilsouhaiteounonajoutercettepage.Silneledsire
pas, le script est redirig par linstruction return et lutilisateur poursuit sa visite. Dans le cas contraire, il faut
distinguerlaversiondunavigateur.Cestlaraisonpourlaquelle,lescripttestelestroispremierscaractresdela
variablecorrespondantaunomdunavigateuretsicellecicorrespondlachane Mic ,parexemple,ilestpossible
den dduire quil sagit dInternet Explorer de Microsoft. Il est alors possible dajouter la page en favoris par
linstructionwindow.external.AddFavorite.
Exemple :afficherdansunenouvellefentreappeleENI,sansbarredadresse,lapagehttp://www.editionseni.fraprs
avoircliqusurunboutonsitusurlapage.
<html>
<head>
<title>Lobjet window</title>
function popup() {
f=window.open("http://www.editions-eni.fr/","ENI","location=no");
}
</script>
</head>
<body>
<input type="submit" name="Submit" value="Popup" onclick="popup()" />
</body>
</html>
Pour tester ce script, il vous faut dsactiver les bloqueurs de popup de votre navigateur. Pour rappel,
certainsparamtresnesontpasreconnusparInternetExplorer.
Exemple : afficher la page http://www.editionseni.fr dans une nouvelle fentre appele ENI, sans barre dadresse,
simplementparchargementdelapage.
<body>
<body onload=popup();
</body>

Il suffit dappeler la fonction popup directement dans le corps de la page par linstruction <body
onload=popup().
Exemple : afficher la page http://www.editionseni.fr dans une nouvelle fentre appele ENI, en mode plein cran
(impossibledansMozilla,FirefoxouOpra.).
f=window.open("http://www.editions-eni.fr/","ENI","fullscreen=yes");
d.MthodeClose()
EllepermetdefermerlesfentresouvertesparlamthodeOpen(),enutilisantlenomemploylorsdesacration.
LasyntaxedelamthodeClose()estlasuivante :
Nomdelafentrefermer.Close() ;
Exemple :crerunboutonpermettantdafficherlapagehttp://www.editionseni.frdansunenouvellefentreappelef,un
autreboutonpermettantdefermercettemmefentreetundernierpermettantdefermerlafentreactive.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Lobjet window - Mthode Close</title>
function popup() {
f=window.open("http://www.editions-eni.fr/","ENI", width=200,
height=200,"location=no");
}
function fermerf() {
f.close();
}
function fermeractive(){
self.close();
}
</script>
</head>
<body>
<p>
ENI Editions - All rigths reserved - 11 -

<input type="button" name="Submit" value="Popup" onClick="popup()" />
</p>
<p>
<input type="button" name="Submit2" value="Fermer fenetre f"
onClick="fermerf()" />
</p>
<p>
<input type="button" name="Submit3" value="Fermer fenetre active"
onClick="fermeractive()">
</p>
</body>
</html>
Lescriptsedcomposeentroisfonctionsdistinctes.Lapremirepermetdafficherlanouvellefentreenchargeant
la page dsire. La seconde ferme la nouvelle fentre et la troisime ferme la fentre de dmarrage (cestdire
celleosesituelescript,lemploidumotclselfpermetdeladsigner).

Attention !Lamthodeclose()nefonctionnepasavecMozilla/Firefox.
Exemple : orienter le visiteur vers la page Internet de son navigateur (Mozilla, Firefox, Internet Explorer ou Opra) en
fonctiondeceluici.
<html>
<head>
<title>redirection</title>
function redirection() {
alert(navigator.appName);
if (navigator.appName=="Netscape") {

window.location=" http://firefox.fr/";
}
else if(navigator.appName=="Microsoft Internet Explorer") {
window.location="http://www.microsoft.com/france/windows/ie/";
}
else if(navigator.appName=="Opera") {
window.location=" http://www.opera.com/";
}
else {
window.location=" http://www.editions-eni.fr ";
}
}
</script>
</head>
<body>
<body onload="redirection()">
</body>
</html>
Le script se base sur une srie de tests imbriqus et de rorientation laidedewindow.location,quipermetde

chargerlapagedeprsentationdunavigateurutilis.Lensembledecesinstructionsconstitueunefonction,quiest
excuteaumomentduchargementdelapage.Danslecasolenavigateurnefaitpaspartiedelaliste(Safari,
Konqueror),lapageaffichercorrespondcelledesditionsENI.
Exemple :chercherunmotsaisi,dansunchampdeformulaire,lintrieurduntexteetlemettreensurbrillancelorsquil
esttrouv.
<html>
<head>
<title>Trouver un mot dans une page</title>
var texte="programmation javascript code objets proprits mthodes";
document.write(texte);
function chercher(critere) {
var trouve=find(critere,false,false);
if(trouve==true) {
alert("Le mot "+critere+" a t trouv dans le texte.");
}
else {
alert("Le mot "+critere+"na pas t trouv dans le texte");
}
}
</script>
</head>
<body>

<form id="form1" name="form1" method="post" action="">
<p>
<input name="nom" type="text" id="texte" value="" />
</p>
<p>
<input type="button" value="Chercher dans le texte"
onclick="chercher(form1.nom.value, false)" />
</p>
</form>
</body>
</html>
Icilamthodefind()delobjetWindowestemploye.Sasyntaxeestlasuivante :
find(chanedecaractres, casse,sens) ;
Le paramtre casse prend la valeur true, si la recherche doit seffectuer en distinguant les majuscules des
minusculesetleparamtresensprendlavaleurtrue,silarecherchedoitseffectuerendbutantparlafindutexte.
Ici,lavaleur,saisiedanslechampdeformulaire,estutilisedanslafonctioncherchercommeleparamtrecritrede
la mthode find(). Si le rsultat de la mthode renvoie true, cela signifie que le mot a t trouv en fonction des
optionsdeparamtrespasses.Ilfautalorsafficherlersultatderussiteoudchecdansunebotededialogue.

Lamiseensurbrillanceestfaiteautomatiquementparlenavigateur.

Attention !Lamthodefind()nestpassupporteparInternetExplorer.
3.Lobjetdocument
Lobjet document correspond la page HTML ellemme. Cest un objet souvent manipul en JavaScript notamment
lorsquil est fait usage du DHTML. Par cet objet, il est possible daccder aux lments composant la page, pour en
modifier les proprits ou le contenu. De mme, par lobjet document, vous accdez aux cookies. Les proprits et
mthodesdelobjetdocumentsontnombreuses :
a.Lesproprits
Proprit Rsultat Reconnupar
Correspondlacouleur InternetExplorer,Mozilla,Firefox,
alinkColor
daffichagedesliensactivs. Opra.
Correspondaunomdutableau
anchor contenanttouteslesancresdu
Opra.
document.
applets contenanttouteslesapplets
Opra.
Java.
Correspondlacouleurdefond InternetExplorer,Mozilla,Firefox,
bgColor
dudocument. Opra.
Correspondaustyledelobjet
contextual InternetExplorer,Mozilla,Firefox,
dsignetcontenudansle
Opra.
document.
Correspondunechanede
cookie caractresplaceparle
Opra.
navigateursurleposteclient.

domain Correspondaunomdedomaine
quiafourniledocumentHTML.
embeds InternetExplorer,Mozilla,Firefox,
contenanttouslesobjets
Opra.
incorpors.
Correspondlacouleurutilise
fgColor InternetExplorer,Mozilla,Firefox,
pourcriredansledocument
Opra.
HTML.
forms contenanttouslesformulairesdu Mozilla,Firefox,Opra.
document.
images contenanttouteslesimagesdu Mozilla,Firefox,Opra.
document.
Correspondladatededernire InternetExplorer,Mozilla,Firefox,
lastModified
modificationdudocument. Opra.
layers contenanttouteslesentrespour
Opra.
leslayersdudocument.
linkColor Correspondlacouleurdesliens InternetExplorer,Mozilla,Firefox,

despagesnonencorevisites. Opra.
links contenanttouslesappelsdeliens Mozilla,Firefox,Opra.
dudocument.
plugins contenanttouteslesrfrences Mozilla,Firefox,Opra.
etappeldeplugins.
CorrespondlURLdelapage
referrer InternetExplorer,Mozilla,Firefox,
ayantpermislechargementdela
Opra.
pageactive.
title caractresreprsentantletitre
Opra.
delapageHTML
URL caractresreprsentantlURLdu InternetExplorer,Mozilla,Firefox,
documentprsentdanslapage Opra.
HTML.
Correspondlacouleur
vlinkColor InternetExplorer,Mozilla,Firefox,
daffichagedesliensdespages
Opra.
visites.
b.Lesmthodes
Dterminelenomdelvnement
captureEvents() pourlequellacaptureest Mozilla,Firefox,Opra.
autorisepourledocumentactif.
close() Refermeledocumentactif.
Opra.

Renvoieunechanedecaractres
getSelection() correspondantautexte InternetExplorer,Mozilla,Firefox,
slectionndansledocument Opra.
actif.
Activelegestionnairede InternetExplorer,Mozilla,Firefox,
handleEvent()
lvnementspcifi. Opra.
Activeetchargelapagede
home() InternetExplorer
dmarrage
open() Activeundocument.
Opra.
Donnelenomdelvnement
releaseEvents() dontlacaptureestrestituepar Mozilla,Firefox,Opra.
ledocumentcourant.
Passelvnementcapturla
routeEvents() hirarchienormaledes Mozilla,Firefox,Opra.
vnements.
Autoriselcrituredansle InternetExplorer,Mozilla,Firefox,
write()
documentactif. Opra.
Identiquewrite()maisajoutele
writeln() caractrenewline(\n),cequi
Opra.
permetunretourlaligne.
Exemple :afficherladatedederniremodificationdunepageHTMLauchargementdelapage.
<html>
<head>
<title>Derniere version</title>
function dernieremodif() {
datemaj=document.lastModified;
var datemodif = new Date(datemaj);
var mois=datemodif.getMonth()+1;
var jour=datemodif.getDay();
var annee=datemodif.getFullYear();
var heure=datemodif.getHours();
var minute=datemodif.getMinutes();
var secondes=datemodif.getSeconds();
document.write("Page modifie le : "+jour+"/"+mois+"/"+annee+"
"+heure+ " h "+minute+" mins "+secondes+" secondes");
}
</script>
</head>
<body onload="dernieremodif()">
</body>
</html>
Le script sexcuteauchargementdelapage.Lafonctiondernieremodif()permetdextraireladatedeladernire
modificationdelapageetdelaconvertir,car,sinon,lersultatestrenvoyauformatanglais.Aprsextractionde
cettedatedederniremodification,ilfautcrerunevariabledetypedateappeledatemodif.Ensuite,ilestpossible
dextraire, lanne, le mois, le jour ainsi que lheure, les minutes et les secondes de la dernire sauvegarde. Il ne
resteplusqulaborerlachanealternanttexteetvariablespourafficherlarponsedansledocument.
Exemple :proposerdajouterlesitedesditionsENIenpagededmarrage :

<html>
<head>
<title>Page en favoris</title>
</head>
<body>
<a href="#" onclick="this.style.behavior=url(#default#homepage );
this.setHomePage(http://www.editions-eni.fr);"
title="Mettre le site editions-eni en favoris">Mettre le site
editions-eni en favoris</a>
</body>
</html>
Le script sexcute au moment o lutilisateur clique sur le lien figurant dans la page. Le script JavaScript indique
alorsaunavigateurdemodifierlapagededmarrage,enprenantcommestyleunechanedetypeurl.Vousnoterez
iciquelescriptJavaScriptestdirectementinsrdanslecodeHTML.
Attention,cescriptnefonctionnequavecInternetExploreretconditionqueleniveaudescuritsoitau
minimum.Ilsepeuttoutdemmequelautorisationsoitrefuseparlenavigateur.
Exemple :bloquerleclicdroitsourispourinformerlevisiteurquelacopiedimageestinterdite :
<html>
<head>
<title>Clic droit interdit</title>
<script language="JavaScript" type="text/javascript">
function copieinterdite(){
alert("Merci de ne pas copier cette image");
return(false);

}
</script>
</head>
<body onContextMenu = copieinterdite();>
<img src="velo.jpg" width="280" height="215">
</body>
</html>
Le script se base sur un vnement de lobjet document (document.onContextMenu). Ainsi, ds quun visiteur
effectueunclicdroitsuruneimage,unebotededialoguedavertissementsaffiche.
Ce script ne prtend pas rsoudre intgralement le problme de la copie dimage, cest simplement un exemple
vocationpdagogique.Ilestimpossibledebloquertouteslespossibilitsdecopie(partirdelatoucheprintscreen,
ouenenregistrantlapageouencoreenmaintenantlatouche[Alt]enfoncelorsdelacopie...).
4.Lobjetscreen
Ilcorrespondlcranutilisparlevisiteur.Ilnepossdepasdemthodeetasixproprits.
a.Lesproprits
Correspondlahauteurde InternetExplorer,Mozilla,Firefox,
availHeight
lcranutilis,enpixels. Opra.
Correspondlahauteurde InternetExplorer,Mozilla,Firefox,
availWidth
lcranutilis,enpixels. Opra.
Correspondlaprofondeurde
couleursdelcran,cestdireau InternetExplorer,Mozilla,Firefox,
colorDepth
nombredecouleursqueceluici Opra.
estcapablederestituer.
height Correspondlahauteurtotale InternetExplorer,Mozilla,Firefox,

daffichagedelcran. Opra.
Correspondlarsolutionde
pixelDepth lcranennombredecouleurs, Mozilla,Firefox,Opra.
exprimesenbitsparpixel.
width Correspondlalargeur InternetExplorer,Mozilla,Firefox,

daffichagetotaledelcran. Opra.
Exemple : afficher une bote de dialogue dans laquelle apparat la rsolution utilise en pixels ainsi que la profondeur de
couleurs(8,16ou32bits).
var alargeur=screen.availWidth;
var ahauteur=screen.availHeight;
var largeur =screen.width;
var hauteur=screen.height;
var couleurs=screen.colorDepth;
alert("La rsolution de votre cran est de : "+largeur+" pixels de
largeur et de "+hauteur+" pixels en hauteur avec une palette de

couleurs de "+couleurs+" bits");
alert("La surface utile de votre affichage nest que de "+alargeur+"
pixels de largeur et de "+ahauteur+" pixels en hauteur");
</script>
Le script utilise toutes les proprits de lobjet screen pour dfinir les variables qui seront utilises dans les
messagesaffichsdanslesbotesdedialogue.Lapremirepermetdevisualiserlarsolutionintgraledelcran,la
seconde ne prend pas en compte les pixels en hauteur utiliss par la barre dtat du systme dexploitation. Les
variablesscreen.availHeightetscreen.heightontdoncdeuxvaleursdiffrentes.
5.Lobjetstring
Ilconvientdenepasconfondreletypedevariableetlobjetstring.Eneffet,lobjetstringestunobjetquipermetde
manipuler les chanes de caractres cest pour cela quil est trs souvent utilis que ce soit pour la recherche, la
concatnationoulextractiondesouschanedecaractres.Ilnestdoncpastonnantdeconstaterquelobjetstring
disposedenombreusespropritsetmthodes.
a.Lesproprits
Indiquecommentatcrun InternetExplorer,Mozilla,Firefox,
constructor
objetrfrenc. Opra.
Correspondlalongueurdune InternetExplorer,Mozilla,Firefox,
length
chanedecaractres. Opra.
Permetdajouterdesproprits InternetExplorer,Mozilla,Firefox,
prototype
unobjet. Opra.
b.Lesmthodes
Dtermineuneancrenomme InternetExplorer,Mozilla,Firefox,
anchor()
dansundocumentHTML. Opra.
Augmentedunniveaulataillede
big() InternetExplorer,Mozilla,Firefox,
lapoliceutilisedansun
Opra.
documentHTML.
Permetdefaireclignoterletexte InternetExplorer,Mozilla,Firefox,
blink()
dansundocumentHTML. Opra.
bold() Afficheunechanedecaractres InternetExplorer,Mozilla,Firefox,

engras. Opra.
Permetdaccderunseul
chartAt() InternetExplorer,Mozilla,Firefox,
caractredansunechane
Opra.
complte.
charCodeAt() Renvoielavaleurendcimaldu InternetExplorer,Mozilla,Firefox,

caractreindiquenargument. Opra.
concat() Concatneplusieurschanesde InternetExplorer,Mozilla,Firefox,

caractres. Opra.
Convertitunechanede
eval() InternetExplorer,Mozilla,Firefox,
caractresencodedeprogramme
Opra.
JavaScript.

Afficheunechanedecaractres InternetExplorer,Mozilla,Firefox,
fixed()
avecunepolicepasfixe. Opra.
Modifielacouleurdelapolicede InternetExplorer,Mozilla,Firefox,
fontcolor()
caractresdunechane. Opra.
Modifielapolicedecaractres InternetExplorer,Mozilla,Firefox,
fontsize()
dunechane. Opra.
fromCharCode() constituepartirde InternetExplorer,Mozilla,Firefox,
reprsentationsisolesdune Opra.
suitedecaractresUnicode.
Renvoielaposition,partirdela
indexof() gauche,duncaractrepassen InternetExplorer,Mozilla,Firefox,
argumentdansunechanede Opra.
caractres.
italics() Afficheunechanedecaractres InternetExplorer,Mozilla,Firefox,

enitalique. Opra.
Renvoielaposition,partirdela
droite,duncaractrepassen InternetExplorer,Mozilla,Firefox,
lastIndexof()
argumentdansunechanede Opra.
caractres.
link() Demandelechargementdune InternetExplorer,Mozilla,Firefox,

URLparlenavigateur. Opra.
Rechercheuneexpression
match() rguliredansunechanede
Opra.
caractres.
Remplaceuneexpression
replace() rguliredansunechanede
Opra.
caractres.
Effectueunerecherchedansune InternetExplorer,Mozilla,Firefox,
search()
Extraitunesouschanede
caractres,enfonctiondun InternetExplorer,Mozilla,Firefox,
slice()
caractreinitialetduncaractre Opra.
final.
Diminuedunniveaulatailledela
small() InternetExplorer,Mozilla,Firefox,
policeutilisedansundocument
Opra.
HTML.
Dcoupeunechanede
split() InternetExplorer,Mozilla,Firefox,
caractresenfonctiondun
Opra.
sparateurpassenargument.
strike() Afficheunechanedecaractres InternetExplorer,Mozilla,Firefox,

enmodebarr. Opra.
sub()
enindice. Opra.
Renvoieunesouschanede
caractres,enfonctiondune InternetExplorer,Mozilla,Firefox,
substr()
positionetdunelongueur Opra.
passesenargument.

Renvoieunesouschanede
substring() caractres,enfonctiondune
Opra.
positionpasseenargument.
sup()
enexposant. Opra.
Convertitenminusculesune InternetExplorer,Mozilla,Firefox,
toLowerCase()
Tentedeconvertirunobjeten InternetExplorer,Mozilla,Firefox,
toString()
Convertitenmajusculesune InternetExplorer,Mozilla,Firefox,
toUpperCase()
Exemple : afficher dans une page une chane de caractres selon diffrents modes daffichage (gras, italique, clignotant,
rouge,caractresbarrsetde7taillesdiffrentes) :
var texte=prompt("Saisissez une chane de caractres :","Saisissez
ici votre chane de caractres");
document.write("Voici la chane de caractres en gras :<br>");
document.write(texte.bold());
document.write("Voici la chane de caractres en italique : <br>");
document.write(texte.italics());
document.write("Voici la chane de caractres en caractres
clignotants :" <br>);
document.write(texte.blink());
document.write("Voici la chane de caractres en rouge : <br>");
document.write(texte.fontcolor("red"));
document.write("Voici la chane de caractres barre : <br>");
document.write(texte.strike());
document.write("Voici la chane de caractres en diffrentes tailles :");
for (i=0;i<7;i++) {
document.write(texte.fontsize(i));
}
</script>
Ici, la plupart des mthodes lies HTML de lobjet String sont passes en revue. Ces mthodes doivent tre
utilisesavecparcimonie,carellesnerespectentpaslestandardduW3C.Ilvautmieuxleurprfrerunemiseen
forme laide des CSS (Cascade Sheet Style ou feuilles de style en cascade). Nanmoins, le script prsente les
fonctionnalits disponibles et il dbute par une srie daffichage utilisant diffrentes proprits de texte, puis se
poursuitavecunebouclepermettantdafficherletexteavecunetailledeplusenplusgrande,chaquepassagede
1 7 correspondant aux tailles HTML dfinies par le W3C (World Wide Web Consortium : organisme de
standardisationdestechnologiesdelInternet).
Exemple : afficher la longueur dune chane de caractres saisie dans un champ et convertir en majuscules puis en
minusculeslecontenudecechampparunclicsurunbouton.Lammechanedecaractresseraensuiteconvertieavec
unemajusculepourdbuteretleresteenminuscules.

<html>
<head>
<title>Conversion de champ en majuscules</title>
function convertirmaj() {
longueur=document.form1.texte.value.length;
alert("La chane de caractres convertir est longue de :
"+longueur+" caractres");docment.form1.majuscules.value=
document.form1.texte.value.toUpperCase();
}
function convertirmin() {
document.form1.minuscules.value=
document.form1.majuscules.value.toLowerCase();
}
function convert() {
document.form1.conversion.value=
document.form1.minuscules.value.charAt(0).toUpperCase()+
document.form1.minuscules.value.substring(1,longueur);
}
</script>
</head>
<body>
<p> </p>
<tr>
<td width="125"><input name="texte" type="text" id="texte"
value="Saisir un texte ici" size="20" maxlength="20"></td>
<td width="265"> </td>
</tr>
<tr>
<td><input name="majuscules" type="text" id="majuscules"
size="20" maxlength="20"></td>
<td><input type="button" name="Submit" value="MAJUSCULES"
onClick="convertirmaj()"></td>
</tr>
<tr>
<td><input name="minuscules" type="text" id="minuscules"
<td><input type="button" name="Submit2" value="Minuscules"
onClick="convertirmin()"></td>
</tr>
<tr>
<td><input name="conversion" type="text" id="conversion"
<td><input type="button" name="Submit3" value="1ere Lettre"
onClick="convert()"></td>
</tr>
</table>
</form>

</body>
</html>
Lescriptsediviseenplusieursfonctions.Lapremire,(convertirmaj()),permetdecalculerlalongueurdelachane
saisieetdelafficher,dansunautrechampduformulaire,toutenmajuscules.Lecalculdelalongueurdelachane
seffectuefacilement,grcelapropritlengthappliquelavaleurduchampdeformulaire.Cettelongueurest,
ensuite, affiche dans une bote de dialogue. La mthode toUpperCase() permet ensuite la conversion vers une
chane en majuscules. La seconde fonction, (convertirmin()), utilise toLowerCase pour transformer, linverse, la
chane en minuscules. La troisime fonction, (convertir()), utilise le champ minuscules (cestdire celui qui
correspondobligatoirementunchampcomposdeminuscules),ettransformesonpremiercaractreenmajuscule
pour ajouter le reste du champ en minuscules (cestdire du second caractre identifi par 1 jusqu la fin de la
chanecalculeprcdemment).
Exemple:extraireunechanedecaractresduneautrechanesaisieparlutilisateurenfonctiondundbutetdunefin
dextraction.Lersultatestaffichdanslapageetavecdescaractresdecouleurrouge :
var texte=prompt("Quel est le texte de dpart ?", "Saisissez votre
texte ici");
var pos1=prompt("A partir de quelle position ?", " Saisissez le numro
du caractre de dpart");
var pos2=prompt("Jusqu quelle position ?", "Saisissez le numro du
caractre de fin");
var extrait=texte.substring(pos1,pos2);
document.write("Voici la chaine extraite :
"+extrait.fontcolor("red"));
</script>
Lescriptaffectetroisvariablespourdbuter :
Lavariabletextecorrespondautextesaisiparlutilisateur.
Lavariablepos1correspondlapositiondupremiercaractredelasouschaneextraire.
Lavariablepos2correspondlapositionduderniercaractredelasouschaneextraire.

Ensuite,ilsuffitdappliquerlamthodesubstring()lachanedecaractrespourextraireunesouschanepartir
de la position du premier et du dernier caractre. La chane est, ensuite, convertie en rouge et affiche dans le
document.
Exemple : effectuer un test sur une extension de fichier destin tre transfr. Si lextensionnestpasgifoujpg,un
messagedavertissementsaffiche.
<html>
<head>
<title>Verification de type de fichier upload</title>
function controler() {
var name=document.form1.fileup.value;
var longueur=name.length;
ext=longueur-3;
extension=name.substr(ext,3)
if(extension=="gif"||extension=="jpg") {
alert("OK");
}
else {
alert("Dsol ! Ce type de fichier ne peut pas tre transfr");
}
}
</script>
</head>
<body>
<form name="form1" id="form1">
Fichier envoyer:
<input type="file" name="fileup">
<input type="button" value="Envoyer"
onClick="controler ()">
<br>
</form>
</body>
</html>
Ici, le script sexcute, lutilisateur clique sur le bouton Envoyer, aprs avoir choisi le fichier partir du bouton
Parcourir. ce moment, le script rcupre le nom du fichier slectionn et le stocke dans une variable appele
name.Ensuite,ilcalculelalongueurdelachanedecaractrescorrespondantauchemindufichier.tantdonnque
lextensioncomportetroiscaractres,vousendduisezquelachaneextraireparlamthodesubstr()dbuteau
nombredecaractresmoins3.Lachanedecaractresextraiteest,ensuite,testepoursavoirsiellecorrespond
luneoulautredesextensionsautorises.cemoment,ilestpossibledafficherlunoulautredesmessagesdans
unebotededialogue.
Exemple:testerlavaleurdunchampdeformulairepoursavoirsilcontientunearobaseetunpoint.

<html>
<head>
<title>Test de la prsence dune arobase</title>
function mail() {
if (document.form1.adresse.value.indexOf("@")<0 ||
document.form1.adresse.value.indexOf(".")<0) {
alert("adresse mail invalide, vrifier la prsence de larobase
et du point");
}
else {
alert("adresse mail valide, elle contient une arobase et un point");
}
}
</script>
</head>
<body>
<p> </p>
<tr>
<td width="125"><input name="adresse" type="text" id="adresse"
value="Saisir une adresse mail ici" size="30" maxlength="30"></td>
<td width="265"><input type="button" name="Submit"
value="Test" onclick="mail()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
Ce script peut tre utilis pour contrler dans un formulaire dinscription si le champ email a bien t complt.
Malgrtout,ilnepermetpasunevrificationtotalepuisquelaprsencedunearobaseetdunpointnesuffitpas
validerdunefaoncertaineuneadresseemail.CescriptutiliselamthodeIndexOf()delobjetstringquipermetde
connatrelapositionduncaractredansunechane.Sasyntaxeestlasuivante :
chanedecaractres.indexOf(recherche,dbut) ;
Ochanedecaractresreprsentelachanedanslaquelleeffectuerlarecherche,recherchecorrespondlachane
rechercher et dbut la position du caractre partir duquel il faut commencer la recherche. Largument dbut
indiquelecaractrededbutdelarecherche.Silestomis,larecherchecommenceaudbutdelachane.
Sicettepositionestinfrieurezro(tantdonnequelapositiondupremiercaractrecorrespondzro),cest
que le caractre nest pas prsent dans le champ. Un message davertissement est alors renvoy. Dautres
mthodes peuvent tre employes pour vrifier ce type de champ comme les expressions rgulires, qui sont
expliquesunpeuplusloin.
6.Date

LobjetDateestunobjetinclusdefaonnativedansJavaScript,cestdirequevouspouvezlappelertoutmoment.
Il permet de grer le calcul du temps jusqu une prcision de la milliseconde. Les dates sont reprsentes par un
nombrecomprisentre100 000 000et+100 000 000aveccommerfrencele1e rjanvier1970.LobjetDatenapas
de proprit. Pour manipuler lobjet Date, il faut en crer une instance dans une variable. Par contre, lobjet Date
possdetroistypesdemthodepourlire,crireouconvertir.Ilexisteenplusunsystmedeminuteriepermettantde
grerlesintervallesdetemps.notertoutefois,queletermedcriturenecorrespondpasaufaitdechangerlheure
systme,quiesttoutfaitimpossible.
a.Lesmthodesdelecture
Renvoielenumrodu InternetExplorer,
getDate() jourdumoisentre1 Mozilla,Firefox,
et31. Opra.
Renvoielenumrodu
jourdelasemaine
InternetExplorer,
getDay() sachantquezro
Mozilla,Firefox,
correspondau
Opra.
dimancheetsixau
samedi.
Renvoieunnombre
InternetExplorer,
getFullYear() dequatrechiffres
Mozilla,Firefox,
correspondant
Opra.
lanneencours.
Renvoielheure
InternetExplorer,
courantesachantque
getHours() Mozilla,Firefox,
zrocorrespond
Opra.
minuit.
Renvoieunnombre
InternetExplorer,
enmillisecondes
getMilliseconds() Mozilla,Firefox,
correspondant
Opra.
lheurelocale.
Renvoielenombrede InternetExplorer,
getMinutes() minutesdelheure Mozilla,Firefox,
courante. Opra.
Renvoielenumrodu
moiscourantsachant InternetExplorer,
getMonth() quezrocorrespond Mozilla,Firefox,
janvieretonze Opra.
dcembre.
Renvoielenombrede InternetExplorer,
getSeconds() secondesdelheure Mozilla,Firefox,
courante. Opra.
Renvoielenombrede
InternetExplorer,
millisecondes
getTime() Mozilla,Firefox,
coulesdepuisle
Opra.
1erjanvier1970.
Renvoielenombrede
minutessparantle InternetExplorer,
getTimezoneOffset() lieudelexcutiondu Mozilla,Firefox,
script,dumridiende Opra.
Greenwich.
Renvoielenombredu
jourdumoisexprim InternetExplorer,
getUTCDate() encoordonnesUTC Mozilla,Firefox,
(TempsUniversel Opra.

Coordonn).
Renvoielenumrodu
InternetExplorer,
getUTCDay() jourdelasemaine
Mozilla,Firefox,
exprimen
Opra.
coordonnesUTC.
Renvoieunnombre
dequatrechiffres InternetExplorer,
getUTCFullYear() correspondant Mozilla,Firefox,
lanneencours,en Opra.
coordonnesUTC.
Renvoielheure InternetExplorer,
getUTCHours() couranteexprimeen Mozilla,Firefox,
coordonnesUTC. Opra.
Renvoielenombrede
millisecondesde InternetExplorer,
getUTCMilliseconds() lheurecourante Mozilla,Firefox,
exprimen Opra.
coordonnesUTC.
Renvoielenumrodu InternetExplorer,
getUTCMonth() moiscourantexprim Mozilla,Firefox,
encoordonnesUTC. Opra.
Renvoieunnombre
dedeuxchiffrespour
lesannes
antrieureslan
InternetExplorer,
getYear() deuxmilleetde
Mozilla,Firefox,
quatrepourles
Opra.
annespostrieures
(exemple99pour
1999et2008pour
2008).
Exemple :afficherladatecourantedansundocumentHTML.
<html>
<head>
<title> proprits et mthodes de Date </title>
aujourdhui=new Date;
jour=aujourdhui.getDate();
if (jour<10) {
jour=0+jour;
}
alert("numro de mois : "+aujourdhui.getMonth());
mois=aujourdhui.getMonth()+1;
annee=aujourdhui.getFullYear();
document.write("Nous sommes le "+jour+"/"+mois+"/"+annee);
</script>
</head>
<body>

</body>
</html>
LapremiretapeconsistecrerunobjetDateaujourdhuipermettantdercuprerladatedujour.Ensuite,ilest
possibledercuprerlejour,lemoisetlannedaujourdhui.Unepremireparticularitrsidedanslagestiondu
numrodujour.Eneffetpouramliorerlaffichage,ilestprfrabledajouter0devantlesnumrosinfrieurs10.
Une autre particularit se situe dans la gestion des numros des mois, car tant donn que la numrotation des
mois de lanne dbute (comme toujours en JavaScript) par zro, il convient dajouter un la variable mois pour
laffichagedansledocument.
Les mois saffichent en nombre. Aussi, si vous souhaitez les obtenir en lettres, vous pouvez utiliser une
structuredecontrleswitchpourlesdterminerenfonctiondelavariablemois.Lemmegenredinstruction
peuttreutilispourdterminerlejourdelasemaineaveclamthodegetDay().
<html>
<head>
<title>proprits et mthodes de Date</title>
aujourdhui=new Date;
alert(aujourdhui);
nombrejour=aujourdhui.getDay();
if (nombrejour<10) {
nombrejour="0"+nombrejour ;
}
alert("Le nombre du jour est : "+nombrejour);
jour=aujourdhui.getDate();
alert("numro de mois : "+aujourdhui.getMonth());
mois=aujourdhui.getMonth()+1;
alert("numro de mois aprs ajout : "+mois);
annee=aujourdhui.getFullYear();
alert(annee);
switch (nombrejour) {
case 1 :
nomjour="lundi";
break;
case 2 :
nomjour="mardi";
break;
case 3 :
nomjour="mercredi";
break;
case 4 :
nomjour="jeudi";
break;
case 5 :
nomjour="vendredi";
break;
case 6 :
nomjour="samedi";
break;
case 7 :
nomjour="dimanche";
break;
}
alert(nomjour);
switch (mois) {

case 1 :
nomois="janvier";
break;
case 2 :
nomois="fvrier";
break;
case 3 :
nomois="mars";
break;
case 4 :
nomois="avril";
break;
case 5 :
nomois="mai";
break;
case 6 :
nomois="juin";
break;
case 7 :
nomois="juillet";
break;
case 8 :
nomois="aot";
break;
case 9 :
nomois="septembre";
break;
case 10 :
nomois="octobre";
break;
case 11 :
nomois="novembre";
break;
case 12 :
nomois="dcembre";
break;
}
document.write("Nous sommes le "+nomjour+" "+jour+" "+nomois+"
"+annee);
</script>
</head>
<body>
</body>
</html>
Ce script, bien quun peu lourd, permet dafficher les mois de manire littrale en amliorant ainsi la lisibilit du
rsultat.
b.Lesmthodesdcriture
InternetExplorer,
setDate() Fixelavaleurdu
Mozilla,Firefox,
jourdumois.
Opra.
InternetExplorer,
setFullYear() Fixelavaleurde
Mozilla,Firefox,
lanne.
Opra.
InternetExplorer,
setHours() Fixelavaleurde
Mozilla,Firefox,
lheure.
Opra.
InternetExplorer,
Fixelavaleurdela
setMilliseconds() Mozilla,Firefox,
milliseconde.
Opra.

InternetExplorer,
setMinutes() Fixelavaleurdes
Mozilla,Firefox,
minutes.
Opra.
InternetExplorer,
Fixelavaleurdu
setMonth() Mozilla,Firefox,
numrodumois.
Opra.
InternetExplorer,
setSeconds() Fixelavaleurdes
Mozilla,Firefox,
secondes.
Opra.
InternetExplorer,
setTime() Fixeladate. Mozilla,Firefox,
Opra.
InternetExplorer,
setUTCDate() Fixeladateselon
Mozilla,Firefox,
UTC.
Opra.
InternetExplorer,
Fixelavaleurde
setUTCFullYear() Mozilla,Firefox,
lanneselonUTC.
Opra.
Fixelavaleurentre InternetExplorer,
setUTCHours() 0et23delheure Mozilla,Firefox,
selonUTC. Opra.
Fixelavaleurentre
InternetExplorer,
0et999des
setUTCMilliseconds() Mozilla,Firefox,
millisecondesselon
Opra.
UTC.
setUTCMinutes() 0et59desminutes Mozilla,Firefox,
selonUTC. Opra.
setUTCMonth() 0et11dumois Mozilla,Firefox,
selonUTC. Opra.
Fixelavaleurentre
InternetExplorer,
0et59des
setUTCSeconds() Mozilla,Firefox,
secondesselon
Opra.
UTC.
InternetExplorer,
setYear() Fixelavaleurde
Mozilla,Firefox,
lanne.
Opra.
c.Lesmthodesdeconversion
ConvertitunobjetDateen
parse() InternetExplorer,Mozilla,Firefox,
nombredemillisecondesdepuisle
Opra.
1erjanvier1970.
ConvertitlobjetDateenune
toLocaleString() chanedecaractresselonle Mozilla,Firefox,Opra.
formatlocal.

toString() ConvertitlobjetDateenune InternetExplorer,Mozilla,Firefox,
ConvertitlobjetDateenune
toUTCString() InternetExplorer,Mozilla,Firefox,
chanedecaractresselonle
Opra.
formatUTC.
Convertitenmillisecondesla
UTC() InternetExplorer,Mozilla,Firefox,
diffrenceentreunedateetle
Opra.
1erjanvier1970.
d.Lesminuteries
Ilexistequatremthodesparticuliresquipermettentdegreruneminuterie :
Dclenchelexcutiondunesrie
setInterval() dinstructionsenfonctiondune InternetExplorer,Mozilla,Firefox,
frquenceenmillisecondes Opra.
passeenargument.
Stoppelaminuterielancepar InternetExplorer,Mozilla,Firefox,
clearInterval()
setInterval(). Opra.
Retardeledclenchementdune
sriedinstructionsenfonction InternetExplorer,Mozilla,Firefox,
setTimeout()
dunedureenmillisecondes Opra.
passeenargument.
Stoppelaminuterielancepar InternetExplorer,Mozilla,Firefox,
clearTimeout()
setTimeout(). Opra.
LasyntaxedesetInterval()estlasuivante :
setInterval(action, priode, arguments ventuels de laction) ;
SetIntervalestparfoismalreconnu,notammentparlesnavigateursdontlaversionestunpeuancienne.Il
estprfrabledutiliserSetTimeout()lorsquevousenavezlechoix.
LasyntaxedeclearInterval()estlasuivante :
clearInterval(nom de la minuterie) ;
LasyntaxedesetTimeout()estlesuivante :
setTimeout(action,delai, arguments ventuels de laction) ;
LasyntaxedeclearTimeout()estlasuivante :
clearTimeout(nom de la minuterie) ;
Exemple :crerunehorlogesimpleaffichantlesheures,lesminutesetlessecondesdansunchampdeformulaire:
<html>
<head>
<head>
<title>Horloge</title>

function Horloge() {
maintenant=new Date();
heures=maintenant.getHours();
minutes=maintenant.getMinutes();
secondes=maintenant.getSeconds();
if(heures<10) {
heures="0"+heures;
}
if(minutes<10) {
minutes="0"+minutes;
}
if(secondes<10) {
secondes="0"+secondes;
}
document.form1.Pendule.value=heures+":"+minutes+":"+secondes;
setTimeout("Horloge()", 1000);
}
</script>
</head>
<body onLoad="Horloge()">
Il est exactement :
<input name="Pendule" type="text" id="Pendule" size="12">
</form>
</body>
</html>
Pour russir manipuler lobjet Date, il faut crer une nouvelle instance de cet objet. Puis, il est possible den
extrairelesheures,lesminutesetlessecondes.Ensuite,ilfauttraiterlaffichagepourlesvaleursinfrieures10et
leur ajouter un zro devant si ncessaire, pour obtenir 01 la place de 1, par exemple. Ensuite, il est possible
dafficher le contenu du champ de formulaire et de demander le rechargement de la fonction Horloge au bout de
1000millisecondes(soituneseconde).Ainsi,lhorlogesemodifieratouteslessecondes.
Exemple : afficher la dure de la visite dune page en secondes, lors dun clic sur un bouton permettant larrt du
compteur.
<html>
<head>
<title>Les minuteries</title>
var minute(s)=0,seconde(s)=0;
function chrono() {
document.form1.minute(s).value=minute(s);
document.form1.seconde(s).value=seconde(s);
seconde(s)++;
if(seconde(s)==60) {
minute(s)=minute(s)+1;
seconde(s)=0;
}
compteur=setTimeout(chrono(),1000);
}
function stopper() {
clearInterval(seconde(s));
}
</script>
</head>
<body onLoad="chrono()">
Vous êtes sur cette page depuis
<input name="minute(s)" type="text" id="minute(s)" size="5"
maxlength="5">
minute(s) et
<input name="seconde(s)" type="text" id="seconde(s)" size="5"

maxlength="5">
seconde(s).
</form>
<p>
<input type="button" name="Submit" value="Stopper"
onclick="stopper()">
</p>
<p> </p>
</body>
</html>
Cescriptsexcuteauchargementdelapage.Lesvariables,seconde(s)etminute(s),sontinitialises,dsledbut,
afin de toujours partir avec des valeurs gales 0. Ensuite, il est ncessaire dcrireleurvaleurdansleschamps
correspondants, avant de dbuter lincrmentation des compteurs. La variable nomme seconde(s) est
incrmente puis teste pour savoir si elle est gale 60. Dans ce cas, il faut incrmenter la variable, nomme
minute(s), puisque cela reprsente une nouvelle minute. Par la mme occasion, il convient de rinitialiser les
secondes0.Laminuteriecompteurpermet,ensuite,derecommencerletraitementtouteslessecondes.Lebouton
Stopperlancelexcutiondelafonctiondummenomquipermetdinterromprelaminuterie.
Exemple :rorienterunutilisateursurlapagehttp://www.editionseni.frauboutdedixsecondesdevisitesurunepage.
Lutilisateurdisposeduncompteurtotalisantlenombredesecondesdelavisiteetduncompteurreboursgrenantles
derniressecondesavantlaredirection.Enfin,unboutonpermetdestopperlecompteur.
<html>
<head>
<title>Les minuteries</title>
var i=0;
function chrono() {
i++;
document.form1.chrono.value=i;
document.form1.rebours.value=10-i;
if (i==10) {
window.location="http://www.editions-eni.fr";
}
else {
}
compteur=setTimeout(chrono(),1000);
}
function stopper() {
clearTimeout(compteur);
}
</script>
</head>
<body>
<body onLoad="chrono()">
<label for="textfield"></label>
<p><input name="chrono" type="text" id="chrono" size="3"
maxlength="3">
seconde(s) depuis le chargement de la page</p>
<p>
<label for="textfield"></label>
Il vous reste
<input name="rebours" type="text" id="rebours" size="3">
seconde(s) avant dêtre redirigé vers la page
http://www.editions-eni.fr</p>
<p> </p>

<p>
<label for="Submit"></label>
<input type="button" name="Submit" value="Stopper" id="Submit"
onClick="stopper()">
</p>
</form>
</body>
</html>
Ce script sexcute au chargement de la page. La fonction chrono va permettre dincrmenter une variable (i) et
donc, simultanment, de dcrmenter un compteur rebours (document.form1.rebours.value= 10i). Le test sur (i)
permet de savoir si les dix secondes ont t atteintes sachant que la fonction chrono se renouvelle toutes les
secondesgrcelemploideSetTimeOut.Siletestestvrifi,laredirectionseffectueimmdiatementaprs,grce
la proprit location de lobjetwindowetcorrespondlURL passe en argument. La fonction stopper() sexcute
aprsunclicsurleboutonStopperetpermetdarrterlecompteur.
7.LobjetArray
Lorsquil sagit de manipuler une grande quantit dinformations, le recours aux seules variables nest parfois pas
suffisant.Lusagedetableauxafindestockercesinformationsest,alors,dungrandsecours.LestableauxJavaScript
nont rien voir avec les tableaux HTML, leur rle nest pas de prsenter linformation mais de la stocker et de la
mettre disposition pour la manipuler (ajouter, supprimer, trier, etc.). Un tableau ne peut pas recevoir plus de 256
valeurs,maislesvaleursstockesdansceluicipeuventtredetypediffrent(texte,numrique,etc.).LobjetArray
reprsente donc lui seul, une variable lintrieur de laquelle sont stockes des informations identifies par un
numrodindicedbutantparzro(commebiensouventenJavaScript).
Lobjet Array est un objet natif (cestdire appartenant au core) de JavaScript, qui dispose de dix mthodes. Pour
utiliseruntableau,ilconvienttoutdaborddeledclarer.Ilexisteplusieurssyntaxespourladclarationduntableau.
Ilest,parexemple,possiblededclareruntableauetlenombredlmentsquilcontientparlinstructionsuivante :
var tableau=new Array(5) ;
Mais lindication du nombre dlments du tableau nest pas obligatoire, en effet, JavaScript gre les tableaux de
manire dynamique et sadapte donc, au nombre dlments qui lui est fourni. Ainsi, la syntaxe suivante convient
galement :
var tableau =new Array() ;

AttentionnepasoublierlesparenthsesouvrantesetfermantesaprsArray.
Puis,vousaffectezlesvaleursdansletableauparlinstructionsuivante :
var tableau= ["valeur1", "valeur2", "valeur3", "valeur4"] ;
Toutcommeaveclesvariables,ilestpossiblederaliserladclarationetlaffectationsimultanment.Donc,lasyntaxe
suivanteestaussivalide:
var tableau=new Array["lundi", "mardi", "mercredi", "jeudi", "vendredi",

"samedi", "dimanche"] ;
Laccsauxvaleursstockesdansletableausefaitparleurnumrodindice :
Ainsi,document.write(tableau[4]) ;afficheravendredi
videmment, le numro dindice peut provenir dun compteur dune boucle, ce qui permet de passer en revue
lensembledeslmentsdutableau.
Exemple :afficherdansundocumentHTMLlesjoursdelasemaine,passsenvaleurduntableau.
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",

for (i=0;i<7;i++) {
document.write(semainier[i]+" ");
}
</script>
Le script utilise un compteur et une boucle pour afficher le contenu dun tableau dont vous connaissez le nombre
dlments.
Danslecasovousneconnaissezpaslenombredlmentsduntableau,ilestpossibledutiliserlapropritlength,
correspondantaunombredevaleursdutableau.Lescriptdevientalors :
var longueur=semainier.length;
for (i=0;i<longueur;i++) {
document.write(semainier[i]+" ");
}
</script>
Une autre possibilit daffectation consiste utiliser une autre forme de lobjet Array, les tableaux associatifs, qui
permettentdassocierunevaleuruneautre.Leprincipeconsisterattacherunindicedutableauunevaleur.Le
rattachementseffectue,aprsladclarationdutableau,parlasyntaxesuivante :
Nomtableau[valeur1]= valeur2;
Exemple :afficherdansunchampdeformulaireunedistancedefreinage,enfonctiondunevitessechoisiedansuneliste
droulanteetselonlamatricesuivante :
50Km/h 110Km/h 130Km/h
23mtres 109mtres 152mtres
<html>
<head>
<title>Tableaux associatifs</title>
function reponse() {
var distance=new Array();
distance[0]="23 mtres";
vitesse=document.form1.vitesse.selectedIndex;
document.form1.distance.value=distance[vitesse];
}
</script>
</head>
<body>
<tr>
<td>Vitesse</td>
<td><select name="vitesse" id="vitesse" onChange="reponse()">
<option value="50">50 Km/h</option>
</select> </td>
</tr>
<tr>
<td>Distance de freinage </td>
<td><input name="distance" type="text" id="distance" size="10"
maxlength="10"></td>

</tr>
</table>
</form>
</body>
</html>
Leschampsdeformulairesontinitialissauchargementdelapage.
Le script sexcute au moment du changement de valeur dans la liste droulante. Il dbute par llaboration du
tableauassociatifcomprenanttroislments.Ensuite,ilfautdterminerlechoixeffectuparlutilisateurenstockant
dansunevariable(icivitesse),lenumrodindicedecechoix.Enfonctiondecenumro,ilestfacilederetournerla
valeurcorrespondantedanslechampdistanceduformulaire.
a.Lesproprits
Destroisproprits,seullengthesttrssouventrencontrdanslesscripts.Ilpermetainsidedterminerlenombre
ditrationsduneboucle,correspondantaunombredlmentsdutableau.
Indiquecommentatcrun InternetExplorer,Mozilla,Firefox,
constructor
objetrfrenc. Opra.
Correspondaunombre InternetExplorer,Mozilla,Firefox,
length
dlmentsdutableau. Opra.
Permetdajouterdesproprits InternetExplorer,Mozilla,Firefox,
prototype
personnaliseslobjet. Opra.
Exemple :afficherlenombredlmentsduntableaucomportantlesjoursdelasemaine(semainier).
"samedi", "dimanche"];
longueur=semainier.length;
alert("La semaine est compose de "+longueur+" jours");
</script>
Aprsladfinitiondeslmentsdutableau,lecalculdunombredlmentslecomposantestfacileparlaproprit
length.
b.Lesmthodes
LesmthodesapplicableslobjetArraysonttrsutilesetdisposentdunesyntaxerelativementsimpleretenir :
nomdutableau.mthode(arguments) ;
concat() InternetExplorer,Mozilla,Firefox,
Concatnedeuxtableauxenun.
Opra.
Creunechanedecaractres InternetExplorer,Mozilla,Firefox,
join()
partirdeslmentsdutableau. Opra.
pop() Supprimeledernierlmentdun InternetExplorer,Mozilla,Firefox,

tableau. Opra.
Ajoutedeslmentsenfinde InternetExplorer,Mozilla,Firefox,
push()
tableau. Opra.
reverse() Inverselordredeslmentsdun InternetExplorer,Mozilla,Firefox,

tableau. Opra.

Supprimelepremierlmentdun InternetExplorer,Mozilla,Firefox,
shift()
tableau. Opra.
Retourneouajouteunepartie InternetExplorer,Mozilla,Firefox,
slice()
duntableau. Opra.
sort() Trieleslmentsduntableau.
Opra.
Ajoute,supprimeouremplaceles InternetExplorer,Mozilla,Firefox,
splice()
lmentsduntableau. Opra.
Convertituntableauenune InternetExplorer,Mozilla,Firefox,
toString()
Ajouteunlmentaudbutdun InternetExplorer,Mozilla,Firefox,
unshift()
tableau. Opra.
Retourneunlmentprcisdun InternetExplorer,Mozilla,Firefox,
valueOf()
tableau. Opra.
Exemple :afficherdansundocumentHTML,lecontenuduntableaucomposdesjoursdelasemainesuivichacundela
chanedecaractres puis .
tableau=semainier.join(" puis ");
document.write(tableau);
</script>
Lutilisationdelamthodejoin()permetdadjoindreunechanedecaractres(ici,lemotpuis),entreleslmentsdu
tableau.Mais,cetargumentestfacultatif.Lachanedecaractrescorrespond,alors,auxseulslmentsdutableau
sparspardesvirgulesetilestpossibledelatraitercommetouteautrechanedecaractres.
Exemple :afficherenrougeleslmentsduntableauaprslesavoirconvertienchanedecaractres.
tableau=semainier.join(" ");
document.write(tableau.fontcolor("red"));
</script>
Exemple : afficher le contenu dune concatnation de deux tableaux, le premier correspondant aux premiers jours de la
semaine,lesecondauxderniers.
var debut,fin=new Array();
var debut=["lundi", "mardi", "mercredi"] ;
var fin=["jeudi", "vendredi", "samedi", "dimanche"];
var semainier=debut.concat(fin);
document.write(semainier);

</script>
Lesdeuxtableaux,comprenantdesvaleursdiffrentes,sontfacilementconcatnslaidedecettemthode.
Les mthodes qui suivent se fondent sur le principe de la structure de pile. Cestdire que, pour ajouter ou
supprimerdeslmentsdansuntableau,vousnepouvezlefairequeparlehautouparlebas.Autrementdit,les
lmentspeuventtreextraitssoitdanslordredanslequelilsonttplacs,soitdanslordreinverse.
Exemple :afficher,danslapageHTML,lensembledesjoursdelasemainepuissansledimancheetenfinsanslesamedi.
document.write("Voici la semaine complte : "+semainier+"<br>");
semainier.pop();
document.write("Voici la semaine sans dimanche : "+semainier+"<br>");
semainier.pop();
document.write("Puis sans samedi : "+semainier+"<br>");
</script>
Ilfautfaireusageici,delamthodepop()dontlasyntaxedutilisationestlasuivante :
nomdutableau.pop() ;
Lusage successif de la mthode pop() supprime les lments du tableau les uns aprs les autres, en partant du
dernierlment.
Exemple :afficher,danslapageHTML,lesjoursdelasemainedanslordrepuisdanslordreinverse.
var endroit=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
document.write("Voici les jours de la semaine dans lordre :
"+endroit+"<br>");
var envers=endroit.reverse();
document.write("Voici les jours de la semaine dans le dsordre :
"+envers+"<br>");
</script>
Lamthodereverse()inverselordonnancementdesvaleursduntableau.
Exemple : afficher, dans une page HTML, lensemble des jours de la semaine en partant du lundi, puis en partant du
dimanche.
document.write("Voici la semaine en dbutant par lundi "+semainier+"<br>");
semainier.reverse();
document.write("Voici la semaine inverse : "+semainier+"<br>");
</script>
Exemple :afficher,dansunepageHTML,lensembledesjoursdelasemainepuissanslelundietenfinsanslemardi.

document.write("Voici la semaine complte "+semainier+"<br>");
semainier.shift();
document.write("Voici la semaine sans lundi : "+semainier+"<br>");
semainier.shift();
document.write("Puis sans mardi : "+semainier+"<br>");
</script>
Lamthodeshift()fonctionnelidentiquedelamthodepop()maisdanslautresens(cestdireensupprimantle
premierlmentdutableau).
Exemple :afficher,dansunepageHTML,uniquementlesjoursdunesemainedetravail(dulundiauvendredi).
travail=semainier.slice(0,5);
document.write("La semaine de travail comprend les jours suivant :
"+travail);
</script>
Lamthodeslice()utilisedeuxarguments,placsentreparenthses.Lasyntaxeestdonclasuivante :
nouveautableau=tableau.slice(n,m) ;
Oncorrespondlindiceinfrieurdeslmentsextraireetmlindicesuprieur.Simnestpasrenseign,tous
leslmentsdutableausontalorsextraitsetsimestgaln,aucundeslmentsdutableaunestextrait.
Exemple :afficher,dansunepageHTML,lesjoursdelasemainetrisparordrealphabtique.
function compare(n,m) {
if(n>m) {
return -1;
}
else {
return 1;
}
}
croissant=semainier.sort();
document.write("Les jours de la semaine tris par ordre alphabtique :
"+croissant+"<br>");
decroissant=semainier.sort(compare);
document.write("Les jours de la semaine tris en ordre inverse :
"+decroissant+"<br>");
</script>
La mthode sort() dispose dune fonction de comparaison permettant dobtenir un ordre de tri croissant ou
dcroissant.Lasyntaxedutilisationestlasuivante :

nouveautableau=tableau.sort(fonctiondecomparaison) ;
Sicettefonctionnestpasutilise,cestlordrealphabtiquequiestappliqu.Cestlecasdansnotreexemple,pour
tablirlavariablenommecroissant.Parcontre,pourutiliserlordredcroissant,ilfautpasserparuneautrefonction
renvoyantunrsultatpartirduntest.Ici,nntantpassuprieurm,cestlavaleur1quiestretourneetqui
permetdedonnerlordredetrilamthodesort().
Lamthodesort()sapplique,pardfaut,surdeslmentsdetypealphanumrique.Pourobteniruntridlments
numriques,ilfautpasseruneautrefonctioncommefonctiondecomparaison.
Exemple : afficher, dans un document HTML, tout dabord les deux premiers jours dune semaine de travail (lundi et
mardi),etsurunelignesuivantelesdeuxderniersjours(jeudietvendredi).
tranche1=semainier.splice(0,2);
tranche2=semainier.splice(1,2);
document.write("Les deux premiers jours de la semaine de travail :
"+tranche1+"<br>");
document.write("Les deux derniers jours de la semaine de travail :
"+tranche2);
</script>
Lamthodesplice()utiliseplusieursargumentsafindextraireleslmentsduntableau.Sasyntaxeestlasuivante :
nouveautableau=tableau.splice(i,j) ;
Oicorrespondlindicedupremierlmentconcernparlapplicationdelamthodeetjcorrespondaunombre
dlmentsextraire.
Lasuppressiondesdeuxpremierslmentsdutableauraffectelesnumrosindices(Mercredireprendlindicezro
aprslapremiresuppression(tranche1)).
Lamthodeunshift()permetdinsrerunlmentmanquantenpremirepositionduntableau.
Exemple :afficherdansunebotededialoguelesjoursdelasemainesanslelundi,puisuneautreaveclensembledes
jours.
var semainier=["mardi", "mercredi", "jeudi", "vendredi",
document.write("Voici la semaine sans le lundi :
"+semainier+"<br>");
semainier.unshift("Lundi");
document.write("Voici la semaine complte : "+semainier);
</script>
Cettemthodenedisposedaucunargumentetsasyntaxeestlasuivante :
nouveautableau=tableau.unshift() ;
Exemple :crerunelistedroulantecomprenantquelquesvillesdetroisrgionsfranaisespartirdelaslectiondune
rgion dans une autre liste (Alsace : Strasbourg, Mulhouse, Colmar IledeFrance : Paris, Evry, Cergy, Versailles
Lorraine :Metz,Nancy,Verdun).Justeaprslechoixdelargion,lalistedesvillesdevratrepropose.

<html>
<head>
<title>Objet Array - Une liste partir dune autre</title>
function listeville() {
var villeAlsace = new Array();
var villeIDF=new Array();
var villeLorraine=new Array();
villeAlsace=["Strasbourg","Mulhouse","Colmar"];
villeIDF=["Paris","Evry","Cergy","Versailles"];
villeLorraine=["Metz","Nancy","Verdun"];
if(document.form1.Region.value=="Alsace") {
villeAlsace.sort();
nbelements=villeAlsace.length;
for(i=0;i<nbelements;i++) {
document.form1.ville.options[i]=
new Option(villeAlsace[i],villeAlsace[i]); }
}
else if(document.form1.Region.value=="Ile-de-France") {
villeIDF.sort();
nbelements=villeIDF.length;
document.form1.ville.options[i]=new Option(villeIDF[i],villeIDF[i]); }
}
else {
villeLorraine.sort();
nbelements=villeLorraine.length;
document.form1.ville.options[i]=new Option(villeLorraine[i],
villeLorraine[i]);
}
}
}
</script>
</head>
<body onLoad="listeville()">
<select name="Region" id="Region" onChange="listeville()">
<option value="Alsace">Alsace</option>
<option value="Ile-de-France">Ile-de-France</option>
<option value="Lorraine">Lorraine</option>
</select>
<select name="ville" id="ville">
</select>
<input type="button" name="Submit" value="Bouton"
onClick="listeville()"/>
</form>
</body>
</html>
Lescriptsexcuteaumomentdunchoixdanslalistedesrgions.Cestdonc,lvnementOnchangequipermetde
lancerlescript.Lapremiretapeestdecreretdalimenterlestroistableauxcorrespondantauxvillesdesrgions.
Ensuite,vientletestpermettantdedterminerlargionchoisiedanslapremirelistedroulante.Pourcela,ilfaut
comparerlavaleurchoisiedanslalisteavecchacundesnomsdesrgions.Unefoislargionchoisiedtermine,un
tri du tableau semble appropri pour prsenter une liste trie des lments. tant donn que la liste pourra
comporter dautres valeurs par la suite, il est plus sr de calculer le nombre dlments de la liste (variable
nbelements). Il faut ensuite faire une boucle pour affecter les valeurs du tableau aux lments composant la
nouvelleliste.Cetteboucleapourlimitelenombretotaldlmentsprsenter.Ilestalorspossible,daffecterde
nouvellesvaleursauxlmentsdelaliste,grcelinstructionnewOption.
c.Lestableauxmultidimensionnels

Lorsque les donnes stocker sont nombreuses, il est possible dutiliser les tableaux plusieurs entres, aussi
appelsmultidimensionnels.
Laconstructiondecetypedetableauncessiteladclarationdesdeuxtableauximbriqus.Vousdclarezdabord,
un tableau de faon classique. Puis, vous ralisez laffectation des valeurs en fonction de leur position (colonne,
ligne)dansletableau.
Lasyntaxepeutsersumerainsipouruntableaude3ligneset3colonnes :
var tableau=new Array(nombre de valeurs du tableau) ;

var tableau[0]=new Array(nombre de valeurs du tableau) ;
var tableau[1]=new Array(nombre de valeurs du tableau) ;
tableau[0][0]= "valeur1" ;
Exemple : afficher, dans une page HTML, les rflexions enregistres du mercredi et du vendredi, toutes ces rflexions
ayanttenregistrespralablement,pourchaquejourdelasemaine,dansuntableaudeuxdimensions.
var semainier=new Array(5);
semainier[0]=new Array(2);
semainier[0][0]="lundi";
semainier[0][1]="Au boulot";
semainier[1][0]="mardi";
semainier[1][1]="Ca va fort";
semainier[2][0]="mercredi";
semainier[2][1]="Jour des enfants";
semainier[3][0]="jeudi";
semainier[3][1]="Encore un effort";
semainier[4][0]="vendredi";
semainier[4][1]="Cest le week-end";
alert("Voici le mot du mercredi : "+semainier[2][1]);
alert("Voici le mot du vendredi : "+semainier[4][1]);
</script>
Exemple :afficher,dansunebotededialogue,lavaleurstockedansuntableaudeuxdimensions.
Janvier Fvrier Mars
ProduitA 10000 10500 12500
ProduitB 10000 9500 8500
ProduitC 11000 7500 8500

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Tableau multidimensionnel</title>
function affiche() {
nomproduit=document.form1.Produit.value;
nommois=document.form1.mois.value;
var ca=new Array(3);ca[0]=new Array(2);ca[1]=new Array(2);
ca[2]=new Array(2);
ca[0][0]=10000;ca[0][1]=10500;ca[0][2]=12500;ca[1][0]=11000;ca[1][1]=
9500;ca[1][2]=8500;ca[2][0]=8000;ca[2][1]=7500;ca[2][2]=8500;
resultat=ca[nomproduit][nommois];
alert("Le chiffre daffaires est de "+resultat+" euros.");
}
</script>
</head>
<body>

<label for="select"></label>
<p> </p>
<label for="select"></label>
<tr>
<td><label for="select">Produit</label></td>
<td><select name="Produit" id="Produit">
<option value="0">Produit A</option>
<option value="1">Produit B</option>
<option value="2">Produit C</option>
</select></td>
</tr>
<tr>
<td>Mois</td>
<td><label for="select"></label>
<select name="mois" id="mois">
<option value="0">janvier</option>
<option value="1">Février</option>
<option value="2">mars</option>
</select> </td>
</tr>
<tr>
<td colspan="2"><input type="button" name="Submit"
value="Afficher" onClick="affiche()" /></td>
</tr>
</table>
<p> </p>
</form>
</body>
</html>
Lafonctionaffiche()sexcuteaumomentduclicsurlebouton.Ilfauttenircomptedesvaleursslectionnesdans
lesdeuxlistesdroulantes,pouridentifierlescoordonnesdelavaleurafficher.Lesdeuxvariablesnommoiset
nomproduit sont, donc, affectes, ds le dbut du script, avec les valeurs des listes droulantes. Ensuite, il est

possiblededclarerlestableauximbriqusetdyaffecterlesvaleurs.Lextractiondelavaleurseffectueenfonction
desvariablesprcdentes.Laffichagedelavaleurextraiteterminelescript.
8.image
LobjetimagesetrouvesouslobjetdocumentdanslemodledobjetJavaScript.IlcorrespondlabaliseHTML<img>.
Cetobjetestessentielpouramliorerlaprsentationdespagesweb.Lobjetimageestsouventutilispourcrerdes
rollover (permutation dimage au passage de la souris) ou un album photo avec vignettes. Avec cet objet, vous
pouvezaccdertouteslesimagesprsentesdanslapageHTML.Lobjetimagedisposededixpropritsetdune
mthode.
a.Lesproprits
Correspondautexteafficher
danslecasolenavigateurne
prendraitpasenchargeles
imagesouencore,silapageest
consulteparunpublicdficient
alt InternetExplorer,Mozilla,Firefox,
visuel,quipdunappareillage
Opra.
ayantcapacitlirecette
proprit.Letextesaffichedans
uneinfobullelorsquelasouris
restepositionnedessusdurant
quelquessecondes.
Indiquelatailledelabordure
border figurantventuellementautourde
Opra.
limage.
Indiquesilimagecontenuedans
lapageestdfinitivement InternetExplorer,Mozilla,Firefox,
complete
charge.Renvoietruesicestle Opra.
cas.
Indiquelatailledelimageen
fileSize Mozilla,Firefox,Opra.
octets.
height Indiquelahauteurdelimageen InternetExplorer,Mozilla,Firefox,

pixels. Opra.
Correspondlespaceenpixels
hspace InternetExplorer,Mozilla,Firefox,
entreuneimageetleslments
Opra.
situsdroiteetgauche.
length Correspondaunombredimages InternetExplorer,Mozilla,Firefox,

situesdanslapage. Opra.
Correspondaustatutdaperu InternetExplorer,Mozilla,Firefox,
lowsrc
duneimage. Opra.
name Correspondaunomdelimagesil InternetExplorer,Mozilla,Firefox,

existe. Opra.
Correspondladressesource
(URL)dufichierdelimage.Cette
src propritmodifiablepermetde
Opra.
nombreuxeffets,basssurles
images.
Correspondautitredelimage.
Toutcommelapropritalt,elle

estintressantepourles
title InternetExplorer,Mozilla,Firefox,
personnesdisposantdun
Opra.
appareillagedelecture,mais
aussipourlerfrencementdes
pages.
Correspondlespaceenpixels
vspace InternetExplorer,Mozilla,Firefox,
entreuneimageetleslments
Opra.
situsenhautetenbas.
Indiquelalargeurdelimageen InternetExplorer,Mozilla,Firefox,
width
pixels. Opra.
Exemple :Rolloveravecdeuximages :
<head>
<title>Objet Image -rollover</title>
Image1 = new Image(280,210);
Image1.src = "velo1.jpg";
Image2 = new Image(285,210);
Image2.src = "velo2.jpg";
function changeimage(numero,objet) {
document.images[numero].src = objet.src;
}
</script>
</head>
<body>
<img src="velo.jpg" width="285" height="210" onMouseOver=
"changeimage(0,Image2)" onMouseOut="changeimage(0,Image1)">
</body>
</html>
La premire tape consiste crer les objets images, qui seront ncessaires. Lobjet image se construit avec
linstructionImage=newImage.
Ici,limagedisposedepropritsdelargeuretdehauteurdfiniesentreparenthsesetsparespardesvirgules.
Limagemodifiercorrespondbienlindice0,puisquenJavaScript(commetoujours)lepremiernumrodindiceest
0etnon1.noterquelapagenecomporteaucuneautreimage.Cestbiencetteimagequiprendracommesource
lobjetimage1oulobjetimage2,enfonctiondelapositiondelasouris.
La seconde tape consiste crer la fonction qui permet deffectuer le changement dimage (ici function
changeimage). Il suffit de faire correspondre la source lobjet image, pass la fonction dans linstruction
vnementielle onMouseOver et onMouseOut. Concrtement, lors du passage sur limage (onMouseOver), la fonction
changeimage est excute et reoit comme paramtres lindice 0 (correspondant limage modifier), et lobjet
(image1ouimage2).Ainsi,lorsdelinstruction :
document.images[numero].src = objet.src;cestlimage1oulimage2quiestcharge.
Exemple :crerunebannirequipermutedeuximages,touteslestroissecondes.

<html>
<head>
<title>Images banniere</title>
var limite=40;
var compteur=38;
function baniere() {
compteur++;
if (compteur>=limite) {
compteur=38;
}
document.images["velo"].src=compteur+".jpg";
return compteur;
}
function permute() {
var id=setInterval("baniere()",3000);
}
</script>
</head>
<body onLoad="permute()">
<img src="velo1.jpg" name="velo" width="285" height="210">
</body>
</html>
Dans un premier temps, la fonction permute est excute au chargement de la page. Cette fonction de minuterie
dclenchelexcutiondelafonctionbaniere,auboutde3secondes.Celleciincrmente,toutdabord,unevariable
compteur,quiestensuitetestepoursavoirsielleestsuprieureougalelavaleurdelavariableglobalelimite
(qui a pour valeur, dans notre exemple, 40). Si cestlecas,lavariableprendobligatoirementlavaleur38grce
linstruction:
if (compteur>=limite) {
compteur=38;
}
Limage au format jpg ayant ce numro apparatra alors. Pour terminer, linstruction return permet de sortir de la
fonctionetderenvoyerlavaleurdelavariablecompteur,pouruneventuelleincrmentation.Lafonctionpermute
recommenceauboutdetroissecondesetainsidesuite.
9.history

Lobjethistoryestunsousobjetdelobjetwindow.Ilcorrespondlhistoriqueconservdanslenavigateur.Ildispose
dunepropritetdetroismthodes.
a.Laproprit
length Correspondaunombredepages InternetExplorer,Mozilla,Firefox,

visitespourlafentreactive. Opra.
b.Lesmthodes
Chargeladernirepagevisite, InternetExplorer,Mozilla,Firefox,
back()
prsentedanslhistorique. Opra.
Chargelapagesuivantevisite, InternetExplorer,Mozilla,Firefox,
forward()
prsentedanslhistorique. Opra.
Sedplacedanslhistoriquedes
pagesvisites,suivantunnombre InternetExplorer,Mozilla,Firefox,
go()
depagespasscomme Opra.
paramtre.
Exemple :crertroispagespermettantdenaviguerentreellesetdalimenterainsilhistoriquedenavigation(ajouterdes
liens pour passer de la premire la seconde puis la troisime). Sur la premire, permettre laffichage dune bote de
dialogue contenant ladresse de la page. Sur la seconde, ajouter deux boutons permettant davancer ou de reculer dans
lhistorique.Surladernire,ajouterunboutonpermettantdeconnatrelenombredeliensmmorissdanslhistoriqueet
unchamppermettantdesaisirunnombredeliensderetourenarrire.
Scriptdelapremirepage :
<html>
<head>
<title>Page1</title>
function adresse(){
adresse=location.href;
alert(adresse);
}
</script>
</head>
<body>
<div align="center">
<p><strong>PAGE 1 </strong></p>
<table width="100%" border="0">
<tr>
<td width="50%"><a href="page1.html"></a></td>
<td width="50%"><div align="right"><a href="page2.html">Page 2
</a></div></td>
</tr>
</table>
<p> </p>
<p align="right"> </p>
<p>
<input type="submit" name="Submit" value="Adresse" onClick="adresse()">
</p>
</div>
</body>
</html>
Surcettepage,ilnyaquuneseulefonctionquipermetdercuprerlURLdelapageactive.Ilfaututiliserlelien

pourpasserlapagesuivante.
Scriptdelasecondepage :
<html>
<head>
function retour(){
window.history.back();
}
function avance() {
window.history.forward();
</script>
</head>
<body>
<tr>
<td width="50%" height="29"><a href="page1.html">Page 1
</a></td>
<td width="50%"><div align="right"><a href="page3.html">Page 3
</a></div></td>
</tr>
</table>
<p> </p>
<p align="center"> </p>
<p> </p>
<p>
<input type="submit" name="Submit4" value="Reculer dans lhistorique"
onClick="retour()">
<input type="submit" name="Submit" value="Avancer dans lhistorique"
onclick="avance()" />
</p>
</div>
</body>
</html>
Sur cette seconde page, figurent les deux scripts permettant de naviguer dans lhistorique en avanant ou en
reculant.
Scriptdelatroisimepage :
<html>
<head>
function compte(){
var nombre=window.history.length;
alert(nombre);
}
function reculer() {

var nbrecul="-"+document.form1.recul.value;
convertnbrecul=parseInt(nbrecul);
window.history.go(convertnbrecul);
}
</script>
</head>
<body>
<p> </p>
<tr>
<td width="50%"><a href="page2.html">Page 2 </a></td>
<td width="50%"><div align="right">
<input type="button" name="Submit" value="Reculer"
onClick="reculer()">
de
<input name="recul" type="text" id="recul" size="5"
maxlength="5">
liens dans lhistorique </div></td>
</tr>
</table>
</form>
<p align="right"> </p>
<p>
<input type="submit" name="Submit3" value="Compte Historique"
onClick="compte()">
</p>
</div>
</body>
</html>
Cette troisime page permet dafficher le nombre de liens mmoriss dans lhistorique et deffectuer un retour en
arriredanslhistorique,suivantunnombredtapessaisidanslechamprecul.tantdonnquilsagitdunretour
en arrire dans lhistorique, le chiffre doit tre prcd du signe moins. Pour cela, il faut crer une chane de
caractrescomprenantcesigneetlavaleurduchamp.Quantlamthodego(),elledoitrecevoircommeparamtre
unchiffre.CestlaraisonpourlaquellelamthodeparseInt()estutilisepouraffecterlavariableconvertnbrecul.
Pour tester ces diffrents scripts, il est prfrable de vider lhistorique du navigateur. Il est possible que
lexcutionduscriptnedonneaucunrsultatsileniveaudescuritdunavigateurestlev.
10.location
CetobjetcorrespondlURLcourante.IlestpossibledinterrogerlURLactuellementchargeoudelamodifier,cequi
estnettementplusintressant.Silyaunemodification,lenavigateurchargelapageenfonctiondelanouvelleURL.
Lobjetlocationdisposedehuitpropritsetdedeuxmthodes.
a.Lesproprits
Correspondlachanedecaractres InternetExplorer,
hash reprsentantlancrenommelintrieur Mozilla,Firefox,
dunepage. Opra.
Correspondlachanedecaractres
InternetExplorer,
host reprsentantlapartiedelURL,enpartant
Mozilla,Firefox,
dehttpjusquaunumrodeport,mais
Opra.
sansceuxci.
Correspondlachanedecaractres InternetExplorer,
hostname reprsentantlapartiedelURL,enpartant Mozilla,Firefox,

dehttpjusquaunumrodeportinclus. Opra.
InternetExplorer,
href CorrespondlURLentire. Mozilla,Firefox,
Opra.
InternetExplorer,
Correspondlapartiesuivantlenom
pathname Mozilla,Firefox,
dhte.
Opra.
Correspondaunumroventueldeport InternetExplorer,
port delURLencours(ex : Mozilla,Firefox,
http//www/serveur.com/page.html :8550). Opra.
Correspondauprotocoleutilis(ex :file InternetExplorer,

protocol pourlesfichierslocauxethttppourceux Mozilla,Firefox,
situssurunserveurweb). Opra.
Correspondlachanederecherche
InternetExplorer,
partirdupointdinterrogation,lorsdune
search Mozilla,Firefox,
requteparlintermdiairedunbouton
Opra.
Submit.
b.Lesmthodes
Correspondauboutonactualiser
reload() InternetExplorer,Mozilla,Firefox,
dunavigateur,rechargelapage
Opra.
actuelle.
RemplacelURLdelapage
actuelleparuneautredecefait InternetExplorer,
replace()
lURLactuellenestpasstocke Mozilla,Firefox,Opra.
danslhistorique.
Exemple : afficher le nom dhte du serveur, le chemin, le protocole utilis ainsi que lURL actuelle dans une bote de
dialogue.Ensuite,chargerlapagedontlURLest :http://www.editionseni.fr
<html>
<head>
<title>Objet Location</title>
document.write("Voici le nom dhte du serveur de la page actuelle :
"+window.location.hostname+"<br>");
document.write("Voici le chemin de la page actuelle :
"+window.location.pathname+"<br>");
document.write("Voici le protocole utilis pour la page actuelle :
"+window.location.protocol+"<br>");
document.write("Voici lURL de la page actuelle :
"+window.location.href+"<br>");
window.location.href="http://www.editions-eni.fr";
}
</script>
</head>
<body onLoad="changeURL()">
</body>
</html>

11.link
CetobjetcorrespondauxliensventuelsdfinisdansundocumentHTML.Ilestpossibledecompter,lire,modifierles
liensprsentsdanslapage.Cetobjetdisposedeneufproprits.
Lesproprits
name Correspondaunomdonnun InternetExplorer,Mozilla,Firefox,

liendanslapage. Opra.
length Correspondaunombredeliens InternetExplorer,Mozilla,Firefox,

prsentsdanslapage. Opra.
Correspondlafentrecibledun InternetExplorer,Mozilla,Firefox,
target
lien(_self,_blank,etc.). Opra.
Correspondautextedunlien
text Mozilla,Firefox,Opra.
prsentdanslapage.
Correspondlaposition
x horizontaledunlienprsentdans Mozilla,Firefox,Opra.
lapage.
y Correspondlapositionverticale
dunlienprsentdanslapage.
Exemple : afficher, dans des botes de dialogues, le nombre de liens, le texte et la cible des liens comportant les liens
suivants :http://www.editionseni.frethttp://www.monserveur.comouvertsavecunecibledetype_blankpourlepremier
etdetype_selfpourlesecond,letoutauchargementdelapage.
<html>
<head>
<title>Objet Link</title>
function exemplelinks() {
alert("Il y a : "+document.links.length+" liens sur cette page");
for (i=0;i<document.links.length;i++) {
alert("Voici le texte du lien n "+(i+1)+" prsent dans la page :
"+document.links[i].text);
alert("Voici la cible du lien n "+(i+1)+" prsent dans la page :
"+document.links[i].target);

}
}
</script>
</head>
<body onLoad="exemplelinks()">
<a href="http://www.editions-eni.fr/" target="_blank">Eni</a><br>
<a href="http://www.form-high-tech.com/" target="_self">Form-High-Tech
</a><br>
</body>
</html>

Autresobjetsutiles
1.regexp
Cetobjetpermetdemanipulerlesexpressionsrgulires.Lesexpressionsrguliressontprsentesdanslaplupart
deslangagesdeprogrammation(dailleurs,lasyntaxedesexpressionsrguliresenJavaScriptestprochedecelledu
Perl). Elles permettent deffectuer de nombreux traitements sur les chanes de caractres, du plus simple au plus
labor.Avecelles,ilestpossibledechercher,remplacer,dcouperdeschanesdecaractres.Lesmatriserconstitue
donc,unrelatoutmmesileurapprochepeutsemblerfastidieuseaupremierabord.Ilconvient,toutefois,denoter
quelesexpressionsrgulirespeuventposerproblmeaveccertainsnavigateurs,telInternetExplorerouSafaripar
exemple. Cette limitation ne remet pas en cause la puissance et la relle efficacit de cellesci. Leur principe de
fonctionnement consiste rdiger un masque (pattern en anglais) quil est possible dappliquer une chane de
caractres pour la filtrer ou la grer. Pour utiliser les expressions rgulires, il faut dabord crer un objet de type
RegExp,lasyntaxesuivreestlasuivante :
var monexpression=new RegExp(motif, option) ;
Omotifreprsentelemasquederechercheetoptioncorresponduncommutateur.Ilpeutprendrequatrevaleurs
diffrentes,enfonctiondecequelondsire(parexemple,prendreencomptelacassedescaractres).Letableau
suivant,listelesoptionsdisponibles :
Caractredoption Fonction
Aucuneoptiondfinie.
g Forceunerechercheglobale.
i Netientpascomptedelacassedescaractres.
gi Associelesoptionsietg.
Uneautremthodedecrationpeutgalementtreemploye,ensuivantlasyntaxe :
Var monexpression=/motif/option ;
Pourrdigerlemasquedelexpressionrgulire,mispartlescaractresclassiques,ledveloppeurdisposedune
sriedecaractres outils ,quilestpossibledeclasserencatgoriesenfonctiondeleurrle.
a.Lescaractresdensemble
Ilspermettentdedfinirunecollectiondecaractresquidevra,selonlescas,apparatreounon.
Caractreoutil Fonction
Correspondunensembledecaractres(icixyz),
[xyz]
placentrelescrochets.
Correspondunensembledecaractresen
[xz]
minusculesentrexetz.
Correspondunensembledecaractresen
[XZ]
majusculesentreXetZ.
Correspondunensembledecaractresentre0et
[09]
9.
[^xz] Interditlescaractressuivants^(icixetz).
\d Correspondunchiffre.quivalent[09].
\D Interditleschiffresde09.quivalent[^09].

b.Lescaractresdegroupement
Permetdegrouperdescaractresformantalorsun
()
sousmotif.
c.Lescaractresderptition
Cescaractrespermettentdetesterlenombredoccurrencesduncaractre.
Lecaractrepeutapparatreunnombreindfinide
*
fois.
+ Lecaractredoitapparatreaumoinsunefois.
? Lecaractredoitapparatrezroouunefois.
Lecaractredoitapparatrelenombredefois
{x}
quivalentx.
Lecaractredoitapparatreaumoinsxfoisetau
{x,z}
pluszfois.
x|z Lecaractrepeuttrexouz.
d.Lescaractresdepositionnement
Prciseledbutdelexpressiondanslachanede
^
caractres.
Prciselafindelexpressiondanslachanede
$
caractres.
\b Prciseledbutdemot.
\B Prciselafindemot.
(x) Trouvelachaneetretientsaposition.
X( ?=y) Trouvelachaneuniquementsixestsuividey.
X( ?!y) Trouvelachaneuniquementsixnestpassuividey.
e.Lecaractredechoix
Ilpermetdefaireunchoixdanslexpressionrgulireentreplusieurssousmotifs.

x|z Lecaractrepeuttrexouz.
f.Lescaractresspciaux
. Correspondtoutcaractre.
\ Indiquequelecaractresuivantnestpasspcial.
\f Correspondunsautdepage.
\n Correspondunsautdeligne.
\r Correspondunretourchariot.
\t Correspondunetabulation.
g.Lesproprits
Indiquelindicepartirduquella
lastIndex recherchesuivantedoit Mozilla,Firefox,Opra.
seffectuer.
source Correspondautextedumasque. Mozilla,Firefox,Opra.
Indiquesilarecherchedoit
global sarrterlapremireoccurrence Mozilla,Firefox,Opra.
trouve.= g
Indiquesilacassedoittre
ignoreCase Mozilla,Firefox,Opra.
ignore.= i .
h.Lesmthodes
test() Retourneunevaleurboolennesi InternetExplorer,Mozilla,Firefox,

letestestvrifiounon. Opra.
exec() Retournelapremireoccurrence InternetExplorer,Mozilla,Firefox,

trouvedanslachane. Opra.
match() Trouvelesoccurrencesdune InternetExplorer,Mozilla,Firefox,

souschanedecaractres. Opra.
Trouvedeslmentsplacsentre
split() dessparateursdunechanede Mozilla,Firefox,Opra.
caractres.
Renvoieunedclarationdobjet
toSource() Mozilla,Firefox,Opra.
reprsentantlobjetspcifi.
toString() Mozilla,Firefox,Opra.
correspondantlobjetconcern.

Cettemthode,bienutile,permetdesavoirsiunechanedecaractrescorrespondbienaumasquedelexpression
rgulire.Ellerenvoietruesicestlecasetfalsedanslecascontraire.
Lesmotifsseconstruisentenutilisantlescaractresoutilsvusprcdemment,enfonctiondursultatobtenir.Un
motifserdigedelagaucheversladroitecommedansunephraseclassique.Mmesicelasemblepremirevue
obscur,unexempledesyntaxeduneexpressionrgulirepourraittre :
"[0-9]{2}[-][a-z]{3}[-][0-9]{4}","gi"
Cetteexpressionrgulirepermetdecontrlerlavaliditdunechanedecaractresreprsentantunedate
auformat01jan2008.
Pourutiliserparlasuiteunmotif,ilestncessairedeconstruireunevariablelaidedelobjetRegExpetdutiliser
lesmthodessouhaites.
i.Utilisationdelamthodetest()
Cettemthodepermetdesavoirsiunechanedecaractrescorrespondaumotif.Ellerenvoietruesicestlecaset
falsedanslecascontraire.
Par exemple, pour tester si une valeur saisie dans une bote de dialogue correspond la nouvelle norme
europenne de plaque minralogique, qui sera compose dune srie de caractres forms de trois blocs spars
pardestirets(deuxlettres,tiret,troischiffresmaximum,tiret,puisdeuxlettres),ilconvientdepasserpartroislignes
dinstructionscorrespondantstroistapes:
DclarationdelavariablecorrespondantaumotiflaborpartirdelobjetRegExp.
Rcuprationdelavariablesaisiedansunebotededialogue.
Applicationdelamthodetest()pourvrifierlavaliditdelasaisie.
Lasyntaxedumasqueseraalorslasuivante :
[A-Z]{2}[-][1-9]{1,3}[-][A-Z]{2}
[A-Z]{2}corresponddeuxlettresobligatoires.
[-]correspondautiretentrelepremieretlesecondblocdecaractres.
[1-9]{1,3}indiquequilfautentre1et3chiffrescomprischacunentre1et9.
[-]correspondautiretentrelesecondetletroisimeblocdecaractres.
[A-Z]{2}correspondladerniresriedelettres.
var plaque=new RegExp("[A-Z]{2}[-][1-9]{1,3}[-][A-Z]{2}","g");
var saisieplaque=prompt("Saisissez un numro de plaque minralogique
europenne sous la forme 2 lettres-3 chiffres maximum-2 lettres : ");
alert(plaque.test(saisieplaque));
</script>
Larponsesafficheraenindiquantlavaleurtrueoufalse,siletestdelexpressionrgulireestrespectou
non.
Exemple :afficherunmessageindiquantsiouiounon,lavaleursaisiedansunebotededialoguerespectebienlemasque
duneexpressionrgulire,correspondantunnumrodetlphonefranais(cinqsriesdedeuxchiffressparspardes
points).

var telephone=new RegExp("[0]{1}[1-4]{1}[.][0-9]{2}[.][0-9]{2}[.][0-
9]{2}[.][0-9]{2}","g");
var saisienumero=prompt("Saisissez un numro de tlphone franais
sous la forme 00.00.00.00.00 : ");
alert(telephone.test(saisienumero));
</script>

Petiteparticularitici,olepremierchiffrenepeuttrequunzro,maisdoittresaisitoutdemme.
j.Utilisationdelamthodeexec()
Elleretournelapremireoccurrence(etseulementcellela)trouve,correspondantaumotifdelexpressionrgulire
dansunelistededonnes.Lasyntaxeestlasuivante :
variableexpressionrgulire.exec(listededonnes) ;
Exemple : afficher le premier numro de tlphone prsent dun agenda, respectant le masque[0]{1}[1-4]{1}[.][0-9]
{2}[.][0-9]{2}[.][0-9]{2}[.][0-9]{2}
9]{2}[.][0-9]{2}","g");
var agenda=new Array ("03.44.12.230","01.000.01.01.01","01.12.13.14.15");
var resultat = telephone.exec(agenda);
alert("Le numro de tlphone correspondant au masque est le suivant :
"+resultat);
</script>
k.Utilisationdelamthodematch()
Ellepermetdetrouvertouteslesoccurrencescorrespondantaumotifduneexpressionrguliredansunevariable
detypeString.Lasyntaxeestlasuivante :
Variabletexte.match(variableexpressionrgulire) ;
Exemple :afficherdansunebotededialoguelesnumrosdetlphonecorrespondantsaumotifdjutilisauparavant :
9]{2}[.][0-9]{2}","g");
var agenda= ("03.44.12.230 01.000.01.01.01 01.12.13.14.15
01.12.13.14.16");
var resultat = agenda.match(telephone);
var nbelements=resultat.length;
message=nbelements+" numros trouvs correspondants au masque :";
for (i=0;i<nbelements;i++) {
var reponse=resultat[i];
message=message+"\r"+reponse;
}
alert(message);
</script>


Attention"\r "nefonctionnepasavecFirefox.
l.Utilisationdelamthodesearch()
Lamthodesearch()sappliqueauxexpressionsrgulires,commeellesappliqueauxvariablestextes.
Exemple :contrlerlaprsencedunearobasedansunchampdeformulaireetafficherunmessagedavertissementoude
conformitenfonctiondursultat.
<html>
<head>
<title>Objet RegExp - Mthode search</title>
function controlemail() {
var email=document.form1.monmail.value;
var resultat=email.search("@");
if (resultat!=false) {
alert("Le champ e-mail ne comporte pas darobase. Veuillez respecter
la syntaxe");
}
else {
alert("Merci, votre adresse mail comporte une arobase");
}
}
</script>
</head>
<body>
<p> </p>
<tr>
<td>E-mail</td>
<td><input name="monmail" type="text" id="monmail"
value="Veuillez saisir votre e-mail personnel ici"></td>
</tr>
</table>
<p>
<input type="button" name="Submit" value="Controler"
onClick="controlemail()">
</p>
</form>
</body>
</html>
m.Utilisationdelamthodereplace()
Cettemthodepermetdetrouveretderemplacerunevaleurparuneautre,selonunmotifdfinidanslexpression
rgulire.

Lasyntaxedelamthodereplace()estlasuivante :
chaneinspecter.replace(chaneremplacer,chanederemplacement) ;
Exemple : afficher, dans la page, lagendamodifiparremplacementdescaractresslashetdoublepoint,parunsimple

pointcommecaractrededlimitation.
var telephone=new RegExp("[/:]","g");
var agenda= ("03/44/12/23 01/00/01/01/01 01:12:13:14:15");
var resultat=agenda.replace(telephone,".");
document.write(resultat);
</script>
Enfait,lesexpressionsrgulires,mmesiellesdemandentunpeudepratique,sontutilisesdansbeaucoupde
scriptsconcernantlavalidation,larechercheoulamodificationdechanesdecaractres.
2.Math
Cetobjetpermetdeffectuerdescalculscomplexes.Ildisposeduncertainnombredepropritsetdemthodes.
a.Lesproprits
RenvoielaconstantedEulerdont InternetExplorer,Mozilla,Firefox,
E
lavaleurestprochede2,718. Opra.
Renvoielelogarithmenaturelde InternetExplorer,Mozilla,Firefox,
LN2
2. Opra.
Renvoielelogarithmenaturelde InternetExplorer,Mozilla,Firefox,
LN10
10. Opra.
LOG2E Renvoielelogarithmede2.
Opra.
LOG10E Renvoielelogarithmede10.
Opra.
RenvoielavaleurdePisoit InternetExplorer,Mozilla,Firefox,
PI
approximativement3.14159. Opra.
Exemple :afficherlersultatducalculdunecirconfrenceduncerclepartirdesondiamtre.

var diametre=prompt("Quel est le diametre du cercle ? :");
var circonference=diametre*Math.PI;
alert("Voici la circonfrence du cercle :"+circonference);
</script>
b.Lesmthodes
abs() Extraitlavaleurpositiveabsolue InternetExplorer,Mozilla,Firefox,

dunnombrepassenargument. Opra.
acos() Calculelangledontlargument InternetExplorer,Mozilla,Firefox,

reprsentelecosinus. Opra.
asin() Calculelangledontlargument InternetExplorer,Mozilla,Firefox,

reprsentelesinus. Opra.
Calculelangledontlargument InternetExplorer,Mozilla,Firefox,
atan()
reprsentelatangente. Opra.
Renvoieunnombre
ceil() correspondantlentiersuprieur
Opra.
dunevaleurpasseenargument.
Renvoieunnombre
floor() correspondantlentierinfrieur
Opra.
dunevaleurpasseenargument.
log() Calculelelogarithmenprien InternetExplorer,Mozilla,Firefox,

dunnombrepassenargument. Opra.
Renvoielenombreleplusgrand
max() danslasrie,passeen
Opra.
arguments.
Renvoielenombrelepluspetit
min() InternetExplorer,Mozilla,Firefox,
danslasrie,passeen
Opra.
arguments.
Calculelersultatdunnombre
pow() levunepuissance,passeen
Opra.
argument.
random() Renvoieunnombrealatoire InternetExplorer,Mozilla,Firefox,

comprisentre0et1. Opra.
round() Arronditunnombrelentierle InternetExplorer,Mozilla,Firefox,

plusproche. Opra.
sqrt() Calculelaracinecarredun InternetExplorer,Mozilla,Firefox,

nombre,passenargument. Opra.
sin() Calculelesinusdunnombre, InternetExplorer,Mozilla,Firefox,

passenargument. Opra.
tan() Calculelatangentedunangle, InternetExplorer,Mozilla,Firefox,

passenargument. Opra.
Exemple :creruneapplicationenJavaScriptpermettantdeffectuerdestiragesdelaloterienationale(cestdireavec6
chiffresdistinctsde149etunnumrocomplmentaire).Attention,unnumronepeutapparatrequuneseulefois.

<html>
<head>
<title>Objets Array et Math</title>
function tirage6numeros() {
var tirage=new Array(12);
var tiragetrie=new Array(12);
var bontirage=new Array();
for(i=1;i<12;i++) {
boule=Math.ceil(Math.random()*49);
tirage[i]=boule;
}
tiragetrie=tirage.sort(function(n,m){return n-m});
for(i=1;i<12;i++) {
if( tiragetrie[i]!=tiragetrie[i+1]) {
bontirage[i]=tiragetrie[i];
}
}
bontiragetrie=bontirage.sort(function(n,m){return n-m});
for(i=1;i<7;i++) {
nomchamp="boule"+i;
instruction="document.form1."+nomchamp+".value=bontiragetrie[i]";
eval(instruction);
}
}
function fcomplementaire(){
numcomp=Math.ceil(Math.random()*49);
document.form1.complementaire.value=numcomp;
}
</script>
</head>
<body>
</center>
<table width="64%" border="1" align="center">
<tr>
<td><div align="center">Boule 1 </div></td>
</tr>
<tr>
<td><div align="center">
<input name="boule1" type="text" id="1" size="5"
maxlength="5">
</div></td>
maxlength="5">
</div></td>
maxlength="5">
</div></td>
maxlength="5">
</div></td>
maxlength="5">
</div></td>

maxlength="5">
</div></td>
</tr>
<tr>
<td colspan="6"><div align="center">
<input type="button" name="Submit" value="Tirage 6
numéros" onClick="tirage6numeros()">
</div></td>
</tr>
</table>
<p> </p>
<table width="13%" border="1" align="center">
<tr>
<td><div align="center">Numéro complémentaire
</div></td>
</tr>
<tr>
<input name="complementaire" type="text" id="complementaire"
size="5" maxlength="5">
</div></td>
</tr>
<tr>
<input type="button" name="Submit2" value="Tirage
complementaire" onClick="fcomplementaire()">
</div></td>
</tr>
</table>
<p> </p>
<p> </p>
</form>
</body>
</html>
Danscescript,letiragedessixpremiersnumrosetdunumrocomplmentairesontdissocis.Cescriptprsente
plusieursdifficults.Lapremireconsisteobtenirsixnumrosdanslalimitefixe(149).Lasecondeconstituele
c ur de la fonction puisquil est impossible de retrouver deux fois le mme chiffre dans le mme tirage. Cest la
fonctiontirage6numerosquilanceletraitementdutiragedessixpremiersnumros,demaniresimultane.Ainsi,il
nest pas ncessaire de cliquer six fois sur un bouton. Pour traiter ce tirage, il est ncessaire de passer par
lintermdiaire de tableaux. En effet, lusage des diffrentes mthodes de traitement (tri, suppression), impose la
cration de plusieurs tableaux. Ce sont donc, les tableaux tirage, tiragetrie et bontirage qui stockent les donnes
durantcesdiffrentestapes.Lesdeuxpremiersdisposentdunnombredlmentsdtermins(12),puisquilfaut
effectuerplusdetiragesquilyadenumrossortir(tenircomptedessuppressionsdedoublon).Danslexemple,le
nombredetiragesdenumrosestfix12,cequisemblesuffisantcarilestraredobtenir6doublons.Aufinal,seul
sixnumrossontaffichs,lesautres(silyena)nesontpasaffichs.Pourcomplterlepremiertableau,lutilisation
delamthoderandomdelobjetMathestintressante.Rappelonsquecettemthoderenvoieunnombreentre0et
1.Ainsi,pourobtenirunnombrecomprisentre1et49,ilsuffitdelemultiplierpar49.Seulsubsisteleproblmedun
rsultatgalzro,ilserarglparlemploidelamthodeceilpermettantdextrairelentiersuprieur.Ainsi,mme
si le rsultat donn par la mthode random() est quivalent 0.7365456, par exemple, cest bien un qui est
retourn. La suite du script permet dalimenter le tableau tiragetrie, comprenant les numros tris. Lenjeu rside
danslefait,quilfautobteniruntableauquinecomportepasdedoublons.Aprsletri,lesdoublonssontctecte
dansletableau,cequifaciliteleursuppression.Lamthodesort()est,ici,employeconjointementavecunefonction
de comparaison place entre parenthses, qui permet de renvoyer des lments numriques tris. Sans cette
fonctiondecomparaison,leslmentsseraienttrisdanslordrelexicographique.Unefoisleslmentstris,ilsuffit
de les comparer un un puis de les transfrer dans le tableau nomm bontirage. Ce dernier tableau peut alors
comprendre des lments avec une valeur undefined. En triant le tableau, ces lments sont placs la fin et
napparatrontdoncpas.Ilresteafficherleslmentsdutableaudansleschampsduformulaire.Pouryparvenir,il
estpossibledutiliserdeuxmthodes.LapremireconsisteemployerunemthodeutilisantleDOM.Cellecisera
dtaille au chapitre Amliorer linteractivit avec JavaScript et CSS. La seconde consiste faire une boucle et
dutiliser le compteur i pour complter linstruction nomchamp= "boule"+i. Cette expression est ensuite traite par
lintermdiaire de la mthode eval(). Ainsi, la variable texte nomchamp est constitue de la chane de caractres
boule laquelle il suffit dajouter le numro du compteur i. Il faut ensuite construire une instruction alternant
chane de caractres et la variable nomchamp afin quelle soit excute par le mot cl eval(). La seconde fonction
permetdetraiterlenumrocomplmentaireparlammemthode.
3.frame
Lobjet frame correspond aux cadres (frames) prsents dans une page HTML. Lobjet frame dispose duneproprit

essentielle.
a.Laproprit
length Correspondaunombredeframes InternetExplorer,Mozilla,Firefox,

prsentsdanslapage. Opra.
Enfait,lobjetframeesttrsprochedelobjetWindowettouteslespropritsetmthodesdontnousavonsdj
parlespourcedernier,sappliquentgalementlobjetframe.Avecframe,ilestpossibledaccderunefentre
particuliredujeudecadresetdeuxmthodessontalorspossibles.
Lapremireconsisteutiliserlesnumrosdindicedechaquelmentdujeudecadres.Ainsilepremierindice(le
zrocommetoujours)correspondaucadredfinilepremier,leuncorrespondausecond
Lasecondemthode(etsansdoutelameilleure)consisteidentifierlescadresparlenom,quileuratattribu
aveclattributname.
Soitlejeudecadressuivant :
LecodeHTMLcorrespondantest :
<frameset rows="80,*" cols="*" frameborder="yes" border="1" frame-

spacing="0">
<frame src="top.html" name="topFrame" scrolling="No" nore-
size="noresize" id="topFrame" title="Haut" />
<frameset cols="80,*" frameborder="yes" border="1"
framespacing="0">
<frame src="lef.html" name="leftFrame" scrolling="No" nore-
size="noresize" id="leftFrame" title="Gauche" />
<frame src="principal.html" name="mainFrame" id="mainFrame"
title="Principal" />
</frameset>
</frameset>
Ainsi,lescadrestopFrame,leftFrameetmainFramepeuventrecevoirparJavaScriptlecontenudunepageHTML.
Exemple : afficher le nombre et le nom des cadres composant le jeu de cadres dcrit cidessus, puis charger une autre
pagedanslecadreleft.Lescriptseraplacdanslapagednommeprincipal.

alert("Cette page comporte "+parent.frames.length+" cadres
dans le jeu de cadres");
for(var i=0; i < parent.frames.length; i++) {
alert(parent.frames[i].name);
parent.leftFrame.location.href = "autrepage.html";
}
</script>
Ce script doit tre plac dans une des pages du jeu de cadres, do le recours au prfixe parent pour
dsignerlejeudecadrescomplet.
4.Event
Il sagit dun objet particulier qui permet de surveiller les vnements pouvant, lors de la consultation de la page,
survenirsoitparlebiaisdelasouris,soitparceluiduclavier.Legrosinconvnientdelutilisationdecetobjetestquil
nestpasreconnudelammemanirepartouslesnavigateurs.Dailleurs,certainespropritsnexistent pas sous
InternetExplorer.
a.Lesproprits
Contrlesides
altKey, touchesontt
enfoncesaumme
ctrlKey, InternetExplorer
instantquune
shiftKey
pressionsurlatouche
[Alt],[Ctrl]ou[Shift].
Retournelabscisse
clientX, oulordonnede
InternetExplorer
clientY lvnementpar
rapportaudocument.
Retournelecodede
keyCode latouchequivient InternetExplorer
dtreenfonce.
Contrlesiles
height, dimensionsen Mozilla,Firefox,
width hauteurdelafentre Opra.

onttmodifies.
Contrlesilaposition
layerX, horizontaleou Mozilla,Firefox,
layerY verticaledelasouris Opra.
achang.
Reprsentela
offsetX, positionhorizontale
InternetExplorer
offsetY ouverticaledela
souris
Reprsentela
positionhorizontale
pageX, ouverticaledela Mozilla,Firefox,
pageY sourisdanslafentre Opra.
correspondantau
documentHTML.
Reprsentela
positionhorizontale
screenX, Mozilla,Firefox,
ouverticaledela
screenY Opra.
sourisdanslafentre
dunavigateur.
Retournelatoucheou
Mozilla,Firefox,
which leboutonlorigine
Opra.
delvnement.
Retournelenomde
Mozilla,Firefox,
type lvnementquivient
Opra.
deseproduire.
Correspondaux
coordonnesdela
positiondelasouris
x, y oulanouvelle InternetExplorer
positiondelafentre
encasde
redimensionnement.
Exemple :afficherlescoordonnesdelasourisdanslabarredesstatus :
<html>
<head>
<title>coordonnes de la souris</title>
function souris(event){
var posX = event.clientX;
var posY = event.clientY;
window.status="Coordonnes de la souris : x="+posX+"y="+posY;
}

</script>
</head>
<body onmousemove="souris(event);">
</body>
</html>
Lescriptsexcutelorsdunmouvementdelasouris.Lobjetevent,associauxmthodesclientXetclientY,permet
dedterminerlesvariablesposXetposYpuisdecomplterlabarredestatut.

AttentioncescriptnefonctionnequesousInternetExplorer.

JavaScriptetlescookies
Contrairementcequelonpourraitpenser,cettepartiedelouvragenestpasdestinevoustransmettrequelques
informations de cuisine ou des recettes. Les cookies (dont la traduction pourrait tre tmoins) sont, simplement, de
petits fichiers qui sont laisss sur le disque dur du visiteur, par le navigateur. La taille de ces fichiers est trs limite
(infrieure5Ko)maisstockentdiffrentesinformationsconcernantlevisiteurcomme,parexemple,sonidentifiant(sil
ledsire),oulobjetdesesprcdentesvisitessurlesite.Lescookiessont,parfois,malperusparlesvisiteursetces
dernierssont,alors,tentsdelesinterdireenparamtrantleurnavigateur.Ilestvraiqueleurusagepermetdesuivre
quasimentlatracelesvisiteurslorsquilssontutilissdesfinsmalveillantes.linverse,lescookiesnesontpasdes
virusetnenfavorisentpasnonplusladiffusion.JavaScriptpermetdegrerfacilementcescookies.
1.Principeetutilisationdescookies
Les cookies sont de petits fichiers au format txt (et contiennent donc du texte) stocks, diffremment selon le
navigateur employ, sur le disque dur. Avec Internet Explorer, les cookies sont stocks dans le rpertoire
c:\Documents and Settings\utilisateur\Cookies sous la forme de plusieurs fichiers dont le nom peut permettre den
deviner la provenance. Vous serez certainement surpris et effray du nombre de fichiers ainsi stocks sur votre
ordinateur, votre insu. Avec Firefox/Mozilla, les cookies sont stocks dans un fichier unique (cookies.txt), et avec
avecOpera,ilssont,enplusdecela,crypts.
Concrtement, le principe de fonctionnement des cookies est trs simple. Lors de la premire visite dun visiteur, le
navigateurcritdansunfichierparticulierdesinformations,quilluiserapossibledelirelorsdelaprochaineconnexion
duvisiteur.Lesutilisationspossiblessonttrsvariesetvontdelanavigationavancejusqulagestiondescaddies
decommandeenligne,enpassantparlescompteursdevisite.Parexemple,ilestainsitrsfaciledestockerlenom,
le prnom ou la langue de prfrence du visiteur, afin de personnaliser son interface lorsquil se connectera de
nouveau et de lui proposer des pages dans sa langue prfre. Les cookies peuvent tre modifis et contenir des
valeursmodifiablesultrieurement,etunefoislutilitdescookiespasse,ilestpossibledelessupprimer.
Afin de tester convenablement les scripts comprenant des cookies, il convient de rgler le niveau de scurit du
navigateur.Eneffet,commeindiquprcdemment,mmesiunscriptestcorrect,lenavigateurnepourrapascrire
avecunrglagesurunniveaulevdescurit.Ilest,donc,importantdeffectuerunparamtragedesnavigateurs.
2.Paramtragedesnavigateurs
Lorsquelescookiessontemployspourfaciliterlauthentification,ilspeuventstockerdesinformationsconfidentielles
(identifiant,motdepasse,etc.).Cetaspectpourraitparatrefortinquitant.Eneffet,rienninterditdepenserquun
utilisateur malveillant puisse rcuprer des informations provenant dautres domaines. Heureusement, il est
impossibledelireuncookienappartenantpasaudomainedelapageayantdposceluici.Ainsi,lauteurduscriptne
peutlirequelescookiesquiladpossetnonpas,ceuxlaissspardautres.Detoutemanire,silescookiesnesont
pasapprcisparlesvisiteurs,cesdernierspourronttoujourslesdsactiverdansleurnavigateur.
Tous les navigateurs sont capables deffacer les cookies prsent sur lordinateur. Avec Firefox/Mozilla, la commande
EffacermestracesdumenuOutilspermetdeviderlecontenudescookies.AvecInternetExplorer,ilfautcliquersur
leboutonEffacerlescookiesaccessibleparleMenuOutils/OptionsInternet.Pourinterdirelcrituredescookiessur
lordinateuravecFirefox/Mozilla,ilsuffitdeserendredanslemenuOutilspuisdechoisirOptionsetenfindedcocher
lacaseAccepterlescookiesdelongletVieprive.
AvecInternetExplorer,ilfautfaireglisserverslehaut,lecurseurdelongletConfidentialitdelabotededialogue
OptionsInternet,visibleparlemenuOutils.linverse,pourlesprochainsexemples,ilestimportantdaccepterles
cookies.
3.Limitesdutilisationdescookies
Lesexemplesprcdentsdutilisationmontrentclairementlintrt,maisaussileslimitesdelutilisation des cookies.

InutiledesprerpouvoircreruncompteurdevisitesavecJavaScriptetlescookies,leseulmoyendyparvenirestde
passer par un langage de programmation ct serveur, tel ASP ou PHP. Certains sites ncessitent lutilisation des
cookies pour fonctionner correctement et les avantages de lutilisation de ceuxci, mme sils sont intressants,
notamment,pourlapersonnalisationdelinterfacedessites,sontsouventdcris,dautantplusquedesproblmes
descuritontsrieusementlimitleurpopularit.
4.Applicationdescookies
Ltape fondamentale consiste crer un cookie sur le poste du visiteur. Cette cration ncessite la prsence dun
certainnombredinformationsobligatoires.

5.Lesinformationsobligatoirespourlacrationduncookie
Laccsauxcookiesseffectueparlapropritcookiedelobjetdocument.Ilexistedeuxtypesdefonctionnementdes
cookies,luntemporaire(danslecaso,ilnestpasncessairedestockerdesinformationspourunusageultrieur),
et lautre permanent (lorsque les cookies restent prsents aprs la connexion). Pour un usage temporaire, il suffit
dindiquer le nom du cookie crer et les informations y stocker. Par contre, pour un usage permanent, il est
ncessaire dindiquer un nom, une date dexpiration (dure de vie), une valeur et un nom de domaine, pour le
reconnatreparmitouslesautres.Deplus,latailledescookiesnedoitpastresuprieure5Ko,ilestimpossible
den stocker plus de vingt par domaine et le nombre total de cookies, stocks sur lordinateur, ne doit pas tre
suprieur 300. Les informations sont stockes sous la forme dune chane de caractres sans espace. Cet aspect
reprsentelaprincipaledifficultdelagestiondescookies.Pouruneutilisationtemporaire,lasyntaxepermettantla
crationduncookieestlasuivante :
document.cookie="nomducookie=valeurducookie" ;
Exemple :creruncookietemporairepuislafficherdansunebotededialogue.
document.cookie="moncookie=mon_nom";
alert(document.cookie);
</script>
Cet exemple dmontre la facilit de cration des cookies temporaires. Par contre, lintrt dutilisation des cookies
temporaires reste limit, puisque les informations ne peuvent tre stockes pour un usage ultrieur. En effet, en
fermantlafentredunavigateurlecookieestautomatiquementsupprim.Sivousdsirezconserverdesinformations,
ilvousfaututiliserlescookiespermanents.
6.Lescookiespermanents
Ilnefautpasselaissertromperparletermedepermanent,carlescookiespermanentsontgalementunedurede
vielimite.Celleciestfixeparledveloppeuretellepeuttretrsbrve,ouinversementtrslongue.Eneffet,pour
creruncookiepermanent,ilestncessairedajouteruneinformationsupplmentairepermettantdindiquerladure
devieducookie.Enfait,celacorrespondsadatedexpirationquelonrenseigneaveclasyntaxesuivante :
expires=datedexpiration
odatedexpirationpeuttreunedateabsolue(parexemplele31dcembre2099),ouunedaterelativeparrapport
ladatedecration(parexemple100joursaprsladatedecrationducookie).
document.cookie="nomducookie= valeurducookie ;
expires=datedexpiration ;
Exemple :creruncookiepermanentavecunedatedexpirationcorrespondantau31dcembre2099.
<script type="text/javascript" language="JavaScript">

var name="moncookie";
var value="mavaleur";
document.cookie = name + "=" + value + ";expires="+"Sat,31-Dec-2099
00:00:01 GMT";
</script>
Toutdabord,ilestncessairedecreretdaffecterlesvariablesnameetvalueparunevaleurdetypetexte.
Ensuite,ilsuffitdutiliserlamthodecookie()delobjetdocumentetderenseignerlesparamtresdecration.
Leformatdeladatedexpirationest,ici,exprimenGMT.

Exemple :creruncookiepermanentdontlexpirationinterviendratrentesecondesplustard.

date_expiration=new Date();
var expiration=30000;
date_expiration.setTime(date_expiration.getTime() + (expiration));
document.cookie =moncookie="mavaleur";expires=date_expiration;
alert("Le cookie arrivera expiration ce moment :
"+date_expiration);
</script>
Lapremiretapevise,ici,crerunobjetdetypedate()appeldate_expiration.Ensuite,ilfautcrerunevariable
expiration correspondant au temps en millisecondes (ici 30000 millisecondes = 30 secondes) qui sera ajout au
momentprsentparlinstructiondate_expiration.setTime(date_expiration.getTime() + (expiration));
Ensuite,ilsuffitdecrerlecookieparlamthodeprcdente,enajoutantleparamtreexpirescorrespondantla
datedexpiration.Ilest,alors,faciledafficher,dansunebotededialogue,lemomentprvudelexpirationducookie.
Ladatedexpirationest,donc,uneinformationtrsimportantepourlacrationoulasuppressionduncookie,comme
nous le verrons plus tard. Mais dautres informations peuvent aussi tre dclares lors de la cration dun cookie,
commeledomaine,lechemindestockageducookieouencorelattributdescurit.Ilsuffitsimplementdelesajouter
lasuiteenlessparantpardespointsvirgules.Maiscesinformations,linversedename,valueetexpires,sont
optionnelles.
7.Ajouterdesinformationsoptionnellesaucookie
Lesinformationsoptionnellespermettentdemieuxidentifierlecookie.Ellessontaunombredetrois.
a.Ledomainedevalidit
Lefaitdajouterundomainedevaliditpermetdidentifierlescookies,cequiestutilenotammentlorsdelarelecture.
Sicetteoptionnestpasspcifie,lenavigateurprendralenomdedomainedelapagecontenantlescript,cequi
gnralement est suffisant. Une fois le domaine spcifi, il est normalement impossible de modifier le contenu du
cookiepartirdunepagenappartenantpasaudomaine.Lenombredecookiesautorisspardomaineestlimit
vingt.AvecInternetExplorer,lenombredecookiespardomaineestaffichentrecrochets(informationsvisiblesdans
lerpertoiredegestiondescookies).Lasyntaxe,permettantdespcifierundomaine,estlasuivante :
domain=nomdudomaine ;
b.Lechemindaccs
Le chemin daccs permet dindiquer, pour quelle partie de lURL, le cookie est valable. Il est possible de lire les
cookieslaisssparlespagesdessurrpertoiresetnonceuxlaisssparlespagesdessousrpertoires.
Lasyntaxecorrespondanteest :
path=chemin ;
c.Lattributdescurit
Lattributdescuritcorrespondautypedeconnexion(httpsetnonhttp).Sivousactivezcetteoption,lecookiene
seratransmisquesilaconnexionestscurise(cestdireenutilisantleprotocolehttps).
Pour activer la scurisation, il suffit simplement de faire figurer la mention secure dans les paramtres du cookie,
sansparamtrageparticulier.

Attention si vous activez loption secure, le script ne sexcutera pas, si vous faites un essai avec le
protocolehttp.
Commeindiquprcdemment,cesinformationsfacultativespeuventsajouterfacilementauxmentionsobligatoires,
enlessparantparunpointvirgule.Donc,lasyntaxecompltedecrationduncookie(scuris)estlasuivante :
document.cookie = "name=value; expires=dateexpiration; path=chemin;

domain=nomdudomaine; secure";
8.Lectureduncookie
Lamthodedelectureduncookieestrelativementsimple,ilsuffitdemanipulerlachanedecaractresprsentedans
lecookie,identifiparsonnom.Lamthodedemanipulationpeutcorrespondreuneexpressionrgulire.
Exemple : crer deux pages, lunepermettantdcrire un cookie comportant lheure et la date de visite de la page, lautre
permettant de lire le cookie et dafficher une bote de dialogue avec la date et lheure de dernire visite, inscrits dans le
cookie.
Scriptdelapagedcritureducookie :

var nom="moncookie";
var madate=new Date();
var heure=madate.getHours();
var minute=madate.getMinutes();
var seconde=madate.getSeconds();
var jour=madate.getDay()+1;
var mois=madate.getMonth()+1;
var annee=madate.getFullYear();
var datecomplete=jour+"/"+mois+"/"+annee+"
"+heure+":"+minute+":"+seconde;
var value= datecomplete ;
document.cookie = nom + "=" + value + ";expires="+"Sat,31-Dec-2099
00:00:01 GMT;domain=mondomaine.com";
if (document.cookie.length>0) {
alert("il y a un cookie de dpos");
}
Afin de pouvoir crire lheure et la date de la visite, il est ncessaire de crer toutes les variables pour y stocker
lensembledeslmentsdinformationdutemps(anne,mois,jour,heure,minute,seconde).Ilestgalementutilede
crer une variable, appele datecomplete, qui concatne lensemble des informations provenant des variables de
temps.Ltapesuivantepermetdecreretdeparamtrerlecookiecomposdunom,desavaleurcorrespondant
datecomplete,deladatedexpirationetdudomaineconcern.Enfin,entestantdocument.cookievouspouvezsavoir
silecookieabientdposetsisalongueurestsuprieurezro.Laffichagedunebotededialogueconfirme,
alors,ledptducookie.
Scriptdelapagedelectureetdaffichageducookie :

var debut = document.cookie.indexOf("moncookie" );
if( debut == -1 ) {
alert("il ny a pas de cookie");
}
else {
var fin=document.cookie.length;
alert(document.cookie.substring(debut,fin));
}
</script>
Lapremiretapeconsistetesterlaprsenceducookiequinousintresse.Enloccurrence,ici,lecookieintressant
senommemoncookie.Celasobtienteneffectuantunerecherchedelapositiondunomducookiedanslachanede
caractresducookie.Lersultatestaffectunevariablenommedebut.Cettepositionpermettra,parlasuite,de
retrouverlesinformationsdsiresdanslachane.Siletestestgal1,celasignifiequelecookienexistepas(cest
larponsedelamthodeindexOf()lorsquelarecherchenapasabouti).Unebotededialoguepermetdelindiquer.
Danslautrecas,lecookieabientretrouvetilsagit prsent denlirelecontenu.Pourcela,ilfautcalculerla
longueurdelachanedecaractrescorrespondantaucookieetlastockerdansunevariablenommefin.Ensuite,ilne
reste plus qu demander laffichage du cookie en slectionnant le dbut et la fin de la chane de caractres
composantlecookie.
9.Misejourduncookie
Lamisejourseffectuesimplementparlalecturepuislaffectationdunenouvellevaleuraucookie.Leseulproblme
rsidedanslefaitquelensembledesinformationsstockesestdansunechanedecaractres,cequinefacilitepas
lapplicationdoprationsarithmtiques,commepourfaireuncompteurdevisitesdepages,parexemple.
Exemple :afficheruncompteurreprsentantlenombredefoisquunvisiteurconsultelammepage.
<html>
<head>
<title>Modifier un cookie</title>
var fin=document.cookie.length;
if (fin>0) {
alert("Mon cookie est dj prsent");
var valeurcookie=document.cookie.substring(10,fin);
var cookienum=parseInt(valeurcookie);
cookienum=cookienum+1;
alert("Cest votre "+cookienum+" me visite sur cette page");
document.cookie="moncookie="+cookienum+ ";expires="+"Sat,31-Dec-2099
00:00:01 GMT;domain=www.mondomaine.com;path=/";
}
else {
alert("Mon cookie nest pas prsent et cest votre premire visite
sur cette page");
var nom="moncookie";
var value=1;
document.cookie = nom + "=" + value + ";expires="+"Sat,31-Dec-2099

00:00:01 GMT;domain=mondomaine.com;path=/";
var debut = document.cookie.indexOf("moncookie" );
}
</script>
</head>
<body>
</body>
</html>
Attention ! Ce compteur nest pas un vrai compteur de visites. Il faut le distinguer du compteur de visites
prenant en compte toutes les visites de tous les visiteurs. Pour ce genre de compteur, il faut utiliser des
langagesavecprogrammation,ctserveur(lecompteurtantstocksurleserveur,ilpeutprendreencompteles
visites provenant de visiteurs diffrents). Ici, par contre, le compteur ne sintresse quaux visites du visiteur
connectsurlapagepuisquilprendlesinformationsstockessurlordinateur,parlintermdiairedescookies.
Commepourlalecture,ilfautdabordtesterlaprsenceducookie.Ici,ilsuffitdecalculerlenombredecaractresdu
cookieetdevrifierquecenombreestsuprieurzro.Sicestlecas,vousaffichezunebotededialogueinformant
delaprsenceducookie.Letravailsuivantconsistedfinirledbutetlafindelachanedecaractresextrairedu
cookie.Lecookiedbutantparunechanede9caractresmoncookie(correspondantaunom),linformationquinous
intresse (cestdire le compteur) est situe partir du dixime caractre. Vous affectez, alors, le rsultat de la
recherchedanslachanedecaractresunevariable(valeurcookie).Ensuite,ilfauteffectueruneconversiondela
variable,carcelleciestenformattexte,orcommeellevatreutilisedansuneincrmentation,ilfautlaconvertiren
numrique, grce la mthode parseInt(). La variable cookienum peut, alors, tre incrmente. Ensuite, il suffit
dafficher le rsultat dans une bote de dialogue et de rcrire le cookie avec la nouvelle valeur. Dans le cas o il
nexistepasdecookieprsent,ilfautlecreretluiaffecterlavaleur1(puisquecestlapremirevisite).
10.Suppressionduncookie
Poursupprimeruncookie,ilsuffitdelerappelerenluiraffectantunedatedexpirationantrieureladatedujour.
Unefoislenavigateurferm,lecookieserasupprim.
Exemple :supprimerlecookiemoncookieetafficherunebotededialoguepourinformerlevisiteurdelasuppression.

if (document.cookie.length>0) {
alert("Mon cookie est dj prsent");
document.cookie="moncookie=mavaleur;expires=Thu,01-Jan-1980 00:00:01
GMT;domain=www.mondomaine.com;path=/";
alert("Le cookie moncookie a t supprim");
}
else {
alert("Le cookie moncookie nest pas prsent");
}
</script>
Commedhabitude,ilfauttesterlaprsenceducookieparlintermdiairededocument.cookie.length.Silersultatest
suprieurzro,cestquelecookieestprsent.Vousaffichezalors,unebotededialogue.Ensuite,ilsuffitdecrer
uncookieportantlemmenommaisavecunedatedexpirationdpasse(ici,lepremierjanvier1980).Celasuffit
supprimer le cookie indsirable. Si le cookie nest pas prsent, vous affichez simplement une bote de dialogue
informantlevisiteur.

JavaScriptetCSS
HTML,JavaScriptetCSSpeuventinteragirdansllaborationdunepageweb.Eneffet,lelangageHTMLnepermetpas
uncontrleapprofondideslmentscomposantunepage.Ainsi,lespagescritesuniquementavecHTMLprsentent
peudoriginalit.Denombreusespagesutilisent,denosjours,desprocdstechniquesdiffrentsetvaris,permettant
dajouter des animations, des sons, voire de petites vidos. Les fichiers danimations au format flash en sont un
exemple.LeDHTML(DynamicHyperTextMarkupLanguage)estunealternativeFlash.IlcombineHTML,CSS,lemodle
dobjet DOM (Document Object Model) et JavaScript pour donner aux pages web un aspect graphique amlior et un
dbut dinteractivit (linteractivit totale ne pouvant se concevoir quavec des langages de type serveur tel PhP ou
Asp). Le DHTML nest donc pas un langage de programmation part entire mais une combinaison de ces trois
techniques. Dans cette combinaison, JavaScript tient une place centrale. En effet, avec JavaScript, il est possible de
manipuler le DOM et ses objets. Malheureusement le DOM na pas t implment de la mme manire par tous les
diteursdesnavigateurs.Aussi,ilestparfoisncessairederdiger,aupralable,unscriptdedtectiondenavigateurs
etdcrire, par la suite, autant de scripts quilyadeversionsdenavigateurs !!!Cesdiffrencesimpliquentdoncune
bonneconnaissanceduDOMetdesesmthodesdaccsauxobjetspourrdigerdesscriptsDHTML.
1.LeDOM(DocumentObjectModel)
LeDOMest,enfait,unedescriptionhirarchiquedeslmentscomposantsunepageweb.Cest,donc,grcecette
structurehirarchisequeleslangagesdeprogrammation(dontleJavaScript),peuventaccderauxobjetsprsents
dans la page. Avec le DOM, le programmeur dispose dun accs total la page, lui permettant den modifier
lapparence mais aussi le contenu. Le DOM est une API (Application Programming Interface pour interface de
programmation),totalementindpendantedelaplateformeetdulangagequilamanipule.CestleW3C(WorldWide
Web Consortium) qui a dfini les diffrentes versions du modle DOM depuis 1998. Il est possible de trouver une
descriptioncomplteduDOM,directementsurlesiteInternetduW3C,ladressesuivante :http://www.w3.org/DOM/
enversionanglaise.
La premire version, baptise DOM1, est sortie en 1998 et a dfini la reprsentation dun document html ou xml
(eXtensible Markup Language), sous la forme dun arbre. La notion de n ud a t retenue pour donner cette
reprsentationhirarchiquedelapageweb.Lasecondeversion,baptiseDOM2,estsortieenmars2000etaajout
quelques fonctions permettant didentifier les lments dune page. la date de rdaction de cet ouvrage (en mai
2008),leW3Ctravaillelasortiedelaversion3duDOM.
UnedescritiquesformulesausujetdumodleDOMestquilluiestncessairedechargerenmmoire,lensemble
desobjetsdunepagewebpourpouvoirfonctionner,cequipeutrendreletempsdetraitementexcessivementlong.
Le DOM est une API fonde sur les arbres alors quil existe une autre mthode, baptise SAX, et qui permet de
remdiercetpineuxproblme,carfondesurlesvnements.Pournotrepart,nousnouslimiteronsquelques
techniquesdebasefondessurleDOMetJavaScriptpourinteragirdanslapageweb.
2.NotionsessentiellesduDOM
Avec le DOM, le programmeur dispose dobjets, de proprits et de mthodes lui permettant de manipuler tous les
composantsdelapage,toutcommeavecJavaScript.Cependant,avecleJavaScript,ilnestpaspossibledemanipuler
certainsobjets(lecontenudescellulesduntableau,parexemple),alorsquencombinantJavaScriptetDOMtoutest
faisable(oupresque).UnedesnotionsessentiellesduDOMestcelleden ud,quicorrespondunlmentspcifi
danslecodeHTMLdunepageweb.Ilexistetroistypesden ud :lesn udslments,lesn udsattributsetles
n udstexte.Lesn udssont,euxmmes,hirarchiss.
AfindemieuxidentifierlastructureDOMcomposantunepageHTML,ilestpossibledutiliserloutilDOMinspectorinclus
dans la version 2.0.0.14 de Firefox/Mozilla. Cet outil permet de reprsenter visuellement les lments du DOM
composantlapage.Pouryaccder,ilfautpasserparlemenuOutils,puischoisirInspecteurDOMouencoreutiliserle
raccourciclavier [Ctrl] [Shift] I. Pour Internet Explorer, il existe galement un certain nombre doutils parmi lesquels
nouspouvonsciterDebugBardisponiblegratuitement(sousrserveduneutilisationpersonnelle),entlchargement,
ladresse :http://www.debugbar.com/
Aprslinstallation,loutilestdisponiblesouslaformedunebarredoutilsactiverparlemenuAffichageetloption
Barredoutils/Debugbar.
Commeindiquprcdemment,lesderniresversionsdesnavigateurssontcompatiblesavecleDOM.Cependant,sile
visiteurnedisposepasduneversionrcente,illuiseradifficiledaccderauxfonctionnalitsquionttdveloppes.
Ilestdoncprfrable,deffectuer,toutdemme,untestdecompatibilit.Parlasuite,ilserapossiblesoitdafficherun
message davertissement, soit dorienter le script vers une partie prenant en charge les particularits de son
navigateur. Pour y parvenir, il suffit de contrler si celuicisupportebienlaccs aux objets par lintermdiaire de la
mthodegetElementBy()delobjetdocument.Lasyntaxeutiliserestdonclasuivante :
document.getElementById ;
Exemple :dterminersilenavigateurutilisestcompatibleavecleDOM.

if (document.getElementById) {
alert("Votre navigateur est compatible");
}
else {
alert("Dommage ! Votre navigateur nest pas compatible")
}
</script>
En rgle gnrale, ce script permet de dterminer les versions de navigateur suprieures la version 4 dInternet
Explorer et Netscape. Il existe, cependant, dautres paramtres quil est possible dutiliser pour affiner la dtection.
Ainsi,enutilisantlasyntaxedocument.all&&getElementById,ilestpossibledesavoirsilenavigateurestuneversion5
ouplusdInternetExplorer.Delammemanire,poursavoirsilaversiondeNetscapeestaumoinsgalelaversion
6,ilfaututiliserdocument.all&&!getElementById.
Dun point de vue syntaxique, vous utilisez les mthodes du DOM lintrieur du script JavaScript pour accder aux
lments.
3.LesmthodesDOM pouraccderauxlments
AvecleDOM,ilexistedesmthodesquipermettentdaccderdirectementauxlmentsdunepage,sanspasserpar
lamthodedesyntaxepointeclassiquewindow.document.form
Quatresmthodesprincipalespermettentunemanipulationdeslmentscomposantunepage :
Mthodes Rsultat
getElementById() Slectionneunlmentenfonctiondesonidentifiant.
Slectionneunouplusieurslmentsenfonctiondun
getElementsByName()
nompassenargument.
Slectionneunouplusieurslmentsenfonctiondun
getElementsByTagName()
nomdebalisepassenargument.
innerHTML() Permetdelireoudassignerunevaleurunlment.
LapremiremthodegetElementById()ncessitelutilisationdelavaleurdelabaliseidpourretrouverllmentdans
lapage.Sasyntaxeestlasuivante :
document.getElementById(element a manipuler)
Exemple :accderlavaleurcontenuedansunlment,parlintermdiairedesmthodesproposesparleDOM.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/css">
<title>Acces au DOM</title>
function acces(){
document.getElementById(element1).innerHTML="Texte modifi par
DHTML";
}
</script>
</head>
<body>
<div id="element1">Texte de llment 1 </div>
alert(document.getElementById(element1).innerHTML);
</script>
<input type="button" name="Submit" value="Modifier"
onClick="acces()">
</body>
</html>
LescriptsexcuteaumomentduclicsurleboutonModifier.Auparavant,unscript,placdanslecorpsdelapage,
accde la valeur de llment identifi par lid element1 pour en afficher sa valeur. La fonction access permet
daccder llment pour en modifier sa valeur, toujours par lintermdiaire de la mthode innerHTML(). Ceci
dmontrebienlapossibilitdelectureetdcrituredecettemthode.
Exemple :afficherlenombredeslmentsainsiqueleurnomprsentsdansunepage.
var nombre=document.all.length;
alert("le nombre dlments prsents dans le code de cette page est
de :"+nombre);
for (i=0; i<nombre;i++) {
nomelement=document.all(i).tagName;
afficheelement="Le nom de llment "+i+" est "+nomelement;
alert(afficheelement);
}
</script>
LescriptcommenceparcompterlenombredlmentsduDOM,quicomposentlapage,puislaffichedansunebotede
dialogue.Ensuite,lescriptpasseenrevuelensembledeslmentsidentifisparleurnumrodindiceetrcupreleur
nomenutilisantlattributtagName.
Le fait de pouvoir accder aux lments de la page par lintermdiaire du DOM ouvre de nouvelles possibilits,
notammentparlassociationdeJavaScriptetdesfeuillesdestylesencascadesquipermettentdamliorerlamiseen
formedespagesWeb.
4.MiseenformedepagewebgrceJavaScriptetCSS
QuelquesnotionsdebasessontindispensablesunebonneutilisationdesCSS.

5.PremiresnotionsdeCSS
LutilisationdesCSS(CascadingStyleSheets)oufeuillesdestyleencascadeestunconceptquiconsistedfinirdes
proprits de mise en forme et de les appliquer ensuite tout ou partie dun document. Le procd prsente de
nombreuxavantagesetpermetdobteniruneprsentationhomogne,facilementmodifiableultrieurement.Unefois
les feuilles de styles dfinies et appliques aux pages dun site, il est trs facile den modifier lapparence
uniformment. En effet, la modification dun style sera automatiquement rpercute sur lensemble des pages
lutilisant. Les feuilles de styles sont aujourdhui compatibles avec toutes les dernires versions des navigateurs
(version4dInternetExploreretNetscapeNavigator,version5dOpra).
AfindedfinirexactementcettecompatibilitaveclesstandardsdfinisparleW3C,ilestimportantdajouteraucode
HTML de chaque page, une ligne dinstructions, appele DTD(Document Type Definition),quiclarifielesmodalitsde
priseenchargedesCSS.Sansentrertropdansledtail,ilsuffitdesavoirquilenexistetroistypes,duplusstrictau
pluslarge.
LedocTypelepluscommunetquifaciliteralapprentissageestlesuivant :

En plus de cette dfinition de docType, il est souhaitable dajouter une balise Meta indiquant le type de CSS au
navigateuret/ouauxmoteursderecherche.
Tout comme le JavaScript, le code CSS, dfinissant les caractristiques du style, peut sintgrerdirectementdansla
pageHTMLentrelesbalises<HEAD>et</HEAD>oudansunfichiertexteexterne,enregistrauformatCSS.Nousne
traiterons pas ici de linsertion de fichier CSS, car pour une meilleure lisibilit, il est prfrable de disposer de
lensembleducodedanslammepage.Ainsi,pourinsrerlecodeCSS,ilestncessaire(toutcommepourJavaScript),
delinclurelintrieurdesbalises<stylecss>et</style>.
Lapplication de styles CSS se fait par lintermdiaire de rgles, composes dun slecteur de balise et dune
dclaration.Leslecteurdebalisescorrespondlabaliselaquellelestyledevratreappliqu.Ladclaration,quant
elle,comprenddespropritsauxquellessontassociesdesvaleurs.LacompositiondunergleCSSseprsente
doncainsi :
slecteur {Proprit : valeur}
OslecteurcorrespondunebaliseHTML,Propritunepropritdelabaliseetvaleurunevaleuraffectela
proprit.
En somme, il faut dfinir sur quoi vous voulez appliquer le style et de quoi se compose le style. Pour prendre un
exempleconcret,dfinissonsunstylequipermettedcrireaveclapoliceTahomaengrasetenrouge.Ilestprvuque
cestylesappliqueuntextecomprisdanslabaliseh1(Entte1).
EnpartantducodesuivantdelapageHTML :

<html>
<head>
<title>Mon premier style CSS</title>
</head>
<body>
<h1>Texte en Tahoma, rouge et gras</h1>
</body>
</html>

Ilfautajouterladfinitiondustyleetsonapplicationdanslecodedelapage,quidevient :

<html>
<head>
<style css>
h1{font-family: Tahoma;font-style: bold;color: red}
</style>
</head>
<body>
<h1>Texte en Tahoma, rouge et gras</h1>
</body>
</html>
Ilnestpasutiledajouterducodeauniveaudesbalisesh1,lesimplefaitdindiquerlabalisedansladfinitiondela
rgle,permetdappliquerautomatiquementlestyleCSS.
LecodeCSSpeutsetrouvernimporteodanslapage,etmmeendessousdelabaliseh1,enfindepartie
body.

Ilestpossibledappliquerlemmestyleplusieurslments,ilsuffitdelessparerparunevirgule.
Une notion fondamentale de CSS rside dans le fait que les styles peuvent se cumuler (do leur nom). Ainsi, en
reprenantlexempleprcdentetencrantunenouvellerglepermettantdemettreletexteenitaliquebtisurle
slecteurh1,letexteprendtouslesformatagesdcrits.
<style css>
h1{font-family: Tahoma;font-style: bold;color: red}
h1{font-style:italic}
</style>
Lensemble des rgles de style CSS peut tre inclus lintrieur dune classe qui sera appele au moment de
lutilisation de la balise HTML. Il suffit dajouter un point, avant de dfinir lensemble des proprits du style en
accolades.
Pourappliquerlestylelabalise,ilfaututiliserlinstruction :
<h1 class="changerstyle">

<html>
<head>
</script>
<style css>
changerstyle {
font-family: Tahoma;font-style: bold;color: red; font:italic;
}
</style>
</head>
<body>
<h1 class="changerstyle">Texte avec balise h1</h1>
</body>
</html>

Dans ce script, la premire tape consiste dclarer la classe changerstyle et dfinir les valeurs des proprits.
Ensuite,ilsuffitdappelerlaclassechangerstylelintrieurdelabalisesurlaquelleelleseraapplique.
Lalistedespropritsdisponiblesestimportante,cequidmontreltenduedespossibilitsoffertesparlutilisation
desCSS.
Propritsdespolices
Proprit Rle
Correspondunouplusieursnom(s)depolicesoude
famillesdepolices.Siplusieurspolicessontdfinies,
fontfamily
lapremiretrouvesurlesystmedelutilisateur
serautilise.
fontstyle Correspondaustyledcriture.
fontweight Correspondlagraisse(paisseur)delapolice.
fontsize Correspondlatailledelapolice.
fontvariant Correspondunevariante(petitesmajuscules).
font Raccourcipermettantdemettretouteslesproprits.
Propritsdesparagraphes
Proprit Rle
color Correspondlacouleurdutexte.
lineheight Correspondlinterligne.
textalign Correspondlalignementdutexte.
textindent Correspondlindentation(retraitdutexte).
textdecoration Correspondunedcorationdutexte.
Correspondlombragetexte,respectivement
textshadow dcalagedroite,enbas,rayondeleffetdeflouet
couleur.
texttransform Correspondlacassedutexte.
whitespace Correspondunecsure.
wordspacing Correspondlespacementdesmots.
Correspondlalongueurdunlmentdetexteou
width
duneimage.

Correspondlahauteurdunlmentdetexteou
height
duneimage.
Propritsdescouleursetarrireplan
Proprit Rle
backgroundcolor Correspondlacouleurdarrireplan.
backgroundimage Correspondlimagedarrireplan.
backgroundrepeat Correspondlafaonderpterlarrireplan.
Indiquesilimagerestefixeaveclesdplacementsde
backgroundattachment
lcran.
Correspondlapositiondelimageparrapportau
backgroundposition
coinsuprieurgauche.
background Raccourcipourlespropritsdarrireplan.
Propritsdesmarges
Proprit Rle
margintop Correspondlavaleurdelamargesuprieure.
marginright Correspondlavaleurdelamargededroite.
marginbottom Correspondlavaleurdelamargeinfrieure.
marginleft Correspondlavaleurdelamargedegauche.
margin Correspondlavaleurdelamargedegauche.
Propritsdesbordures
Proprit Rle
Correspondlpaisseurdelabordure[suprieure,
border[topleftbottomright]width
degauche,infrieureoudedroite].
Correspondlacouleurdelabordure[suprieure,de
border[topleftbottomright]color
gauche,infrieureoudedroite].
Correspondaustyledelabordure[suprieure,de
border[topleftbottomright]style
gauche,infrieureoudedroite].
bordercollapse Correspondlafusiondebordures.
border Raccourcigloballespropritsdebordure.
Propritsdesespacesintrieurs
Proprit Rle
Correspondlespaceintrieurentrellmentetla
paddingtop
borduresuprieure.

paddingright
borduredroite.
paddingbottom
bordureinfrieure.
paddingleft
borduregauche.
Raccourciverslensembledespropritsdespace
padding
intrieur.
Propritsdestableaux
Proprit Rle
Correspondlafusiondesborduresdescellules
bordercollapse
(collapse)ounon(separate).
borderspacing Correspondlespacementdescellules.
Correspondaupositionnementdelalgendedu
captionside
tableau.
Correspondlaffichage(show)ouaumasquage
emptycells
(collapse)descellulesvides.
tablelayout Dfinitunelargeurfixeouvariable.
Propritpoursourdsetmalentendants,indiquantle
speakheaders comportementlorsdelalecturedescellulesdentte
duntableau.
Propritsdeslistes
Proprit Rle
liststyletype Correspondautypedepucesetdenumrotation.
liststyleimage Permetdepersonnaliserlespucesavecuneimage.
liststyleposition Correspondauretraitdespuces.
liststyle Raccourciverslespropritsdeliste.
Propritsdemiseenpage
Proprit Rle
@page Dfinitlamiseenpagedelimpression.
size Correspondauformatdelimpression.
margintop Correspondlamargesuprieure.
marginright Correspondlamargededroite.
marginbottom Correspondlamargeinfrieure.
marginleft Correspondlamargedegauche.

marks Traitsdecoupeetrepresdemontage.
pagebreakbefore Forcelesautdepageavantunlment.
pagebreakafter Forcelesautdepageaprsunlment.
viteleslignesorphelinesenfindepage.Dfinitle
orphans nombredeligne(s)minimapartirduquelunrenvoi
enpagesuivanteesteffectu.
viteleslignesveuvesendbutdepage.Dfinitle
widows nombredeligne(s)minimapartirduquelunrenvoi
enpageprcdenteesteffectu.
Lensemble de ces proprits dmontre bien le vaste champ dapplication des CSS. Lutilisation conjointe avec
JavaScriptpermetdecontrlerlesdiffrentesmisesenforme,enfonctiondesituationsoudeconditionsparticulires.

InteractionJavaScript/CSS
prsentquelesrglesCSSetlapropritclassNameonttabordes,ilseraitintressantdepouvoirlesassocier
JavaScriptpouramliorerlaffichagedecertainslmentsdunepage.Pourcela,ilsagitdecommanderlapplicationdes
feuillesdestylespardesvnements.
1.Appliquerlesfeuillesdestylegrceauxvnements
Le JavaScript permet de contrler lapplication des rgles CSS dfinies. Il suffit dajouter un comportement pour
excuterunefonctionappliquantlestyleCSSdsir.
Exemple :appliquerunstyleCSSsuruntexteaumomentdupassagedelasourissurceluici(lexemple reprend le code

prcdent).

<html>
<head>
function changer(h1) {
h1.className="changerstyle";
}
</script>
<style css>
.changerstyle {
font-family: Tahoma;font-style: bold;color: red; font:italic;
}
</style>
</head>
<body>
<h1 class="Aucun style CSS" onMouseOver="changer(this)">Texte avec
balise h1</h1>
<p class="changerstyle"> </p>
</body>
</html
Au passage de la souris, la fonction changer sexcute et prend lobjet this (ici la balise h1), comme argument. La
fonctionchangerindique,ensuite,dappliquerlestyleCSSnommchangerstyle.
2.UtiliserlesstructuresdecontrlespourpiloterlapplicationdesstylesCSS
Il est galement possible dutiliser les structures de contrle fournies par JavaScript pour laborer des scripts plus
complexes, permettant des effets trs utiles. Par exemple, lusage des styles CSS peut simplifier la recherche
dinformationsdansuntableauosetrouveunegrandequantitdinformations(mmesipourlexemple,ilsagitdun
tableausimplifi).
Exemple :modifierlarrireplandescellulesdutableaupourquildeviennerougeavecletexteblancetgras,aupassagede
lasouris.


<html>
<head>
<title>Javascript et CSS</title>
<style css>
.cellulesurbrillance {
color:#FFFFFF; font-weight:bold;
background-color:#CC0000;
}
</style>
function allumecellule(cell) {
if (cell.className="Aucun style CSS") {
cell.className="cellulesurbrillance";
}
}
function eteincellule(cell) {
if(cell.className="cellulesurbrillance") {
cell.className="Aucun style CSS";
}
}
</script>
</head>
<body>
<tr>
<td class="Aucun style CSS" onMouseOver="allumecellule(this)"
onMouseOut="eteincellule(this)"><div align="center">A</div></td>
onMouseOut="eteincellule(this)"><div align="center">B</div></td>
onMouseOut="eteincellule(this)"><div align="center">C</div></td>
</tr>
<tr>
onMouseOut="eteincellule(this)"><div align="center">1</div></td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Lapremiretapeconsistedfinirlaclasseetsesrgles :color:#FFFFFFetfont-weight:boldpourletexteblancet
graset background-color:#CC0000pourlefonddelacellule.Ensuite,vousretrouvezlescriptJavaScriptdcoupen
deux fonctions, une pour allumer la cellule (allumecellule) lors du passage de la souris, lautre pour lteindre
lorsquelasourislaquitte(eteincellule).Lapremirefonctiontestesilaclasseestgale AucunstyleCSS ,quiest
lestylepardfaut.Sicestlecas,elleappliquelestylecellulesurbrillance.Lasecondefonctionfaitlemmetravailmais
avec une logique inverse, cestdire en testant si le style est cellulesurbrillance et dans ce cas, appliquer le style
AucunstyleCSS .Ensuite,ilfautappliquer,pourchaquecelluledutableau,deuxcomportements,unpremierpour
dclencherlapremirefonction,unsecondpourdclencherladeuxime.Ainsi,enbalayantletableau,lacellule,en

dessousdelaquellelasourisestpositionne,estfacilementreprable.
Ilestpossibledemodifierlgrementcescriptpourmieuxvisualiserleslignespluttquelescellules.Dansce
cas,cestlabalise<tr>,quicorrespondlalignecompltedutableau,quiestlorigineduchangementde
miseenformelaplacedelabalise<td>,correspondantlacellule.
<tr class="Aucun style CSS" onMouseOver="allumecellule(this)"

onMouseOut="eteincellule(this)">
3.Modifierlaffichage/masquagedeslmentsparJavaScript
Il est possible, galement, daccder aux proprits de style par JavaScript. Cela permet notamment dafficher, de
masquerdesblocsdetextesinclusdansdesbalisesdetype<div>.
Pourrappel,cetypedebalisepermetdeconstituerdesblocsdetexteetsapparentelabalise<span>.
Cest la propritdisplayquipermetdafficher ou de masquer les blocs. Il suffit de lui attribuer la valeur nonepour
cacheroublockpourafficher.
Il est possible dutiliser une autre proprit la place de display, il sagit de la proprit visibiliy pouvant avoir
commevaleur,visibleouhidden(cach).Danscecas,lersultatestlgrementdiffrentpuisquelaplaceoccupe
parleblocdetextenestpaslibre.
Cetexempleestsurtoututilesurdestableauxcomprenantsdenombreuseslignesetdanslesquelslaplacedisponible
nestpassuffisante.Ici,parsoucidesimplification,lenombredelignesestrduitquatre.
Exemple :afficher/masquerdesinformationsdansuntableau,aupassagedelasourissurunecellule.Lemessagepourra
treenrougeouenvertselonlessituations.

<html>
<head>
<title>Javascript et CSS</title>
function efface(element) {
var tabelements=new Array();
tabelements=["1306","2206","2506","3006"];
for (i=0;i<tabelements.length;i++) {
document.getElementById(tabelements[i]).style.display=none;
}
}
function afficher(nom) {
document.getElementById(nom).style.display=block;
}
function masquer(nom) {
document.getElementById(nom).style.display=none;
}
</script>
<style type="text/css">
.Stylerouge {
color: #FF0000;
font-weight: bold;
}
.Stylevert {
color: #006600;
font-weight: bold;
}

</style>
</head>
<body onLoad="efface()">
<p> </p>
<tr>
<td ><span class="Style3">Date</span></td>
<td ><span class="Style3">Formation</span></td>
<td ><span class="Style3">Lieu</span></td>
</tr>
<tr>
<td onMouseOver="afficher(1306)" onMouseOut="masquer(1306)">
13 et 14 juin
<div class="Stylevert" id="1306">Places disponibles</div></td>
<td onClick="masquer()">JavaScript</td>
<td onClick="masquer()">Metz</td>
</tr>
<tr>
<td onMouseOver="afficher(2206)" onMouseOut="masquer(2206)">22,
23 et 24 juin
<div class="Stylerouge" id="2206">Plus de places
disponibles</div></td>
<td onClick="masquer()">HTML</td>
<td onClick="masquer()">Nancy</td>
</tr>
<tr>
25 et 26 juin
<div class="Stylerouge" id="2506">Plus de places
disponibles</div></td>
<td onClick="masquer()">JavaScript</td>
<td onClick="masquer()">Paris</td>
</tr>
<tr>
29 et 30 juin
<div class="Stylevert" id="3006">Places disponibles
</div></td>
<td onClick="masquer()">HTML</td>
<td onClick="masquer()">Strasbourg</td>
</tr>
</table>
</body>
</html>
Lescriptportesurquatrecellulesdun tableau et dbute par la constitution duntableaupermettantdidentifierles

balises<div>enfonctiondeleurid.Celapermet,justeaprs,deffectuerunebouclepourtrecertainquetousles
blocssontmasqus.Lecalculdunombredlmentsdutableaupermetdedterminerlenombreditrations.Suivent,
ensuite, les deux fonctions permettant laffichage et le masquage, suivant le paramtre transmis au moment de
lvnement(onMouseOveretonMouseOut).Ainsi,aupassagedelasouris,lvnementactivelafonctionafficher()et
luitransmetlIddublocmanipuler.Inversement,enquittantletexte,lafonctionmasquer()effectuelemasquagedu
blocconcern.LesdeuxstylesCSSsontdfinisetappliqusauxbalises<div>.
Voiciunautreexempledutilisationunpeupluscomplexepermettantdegrerlapplicationdelavisibilit.
Exemple : prvenir lutilisateur, lors dune saisie dun champ de formulaire, du nombre de caractres disponibles dans le
champ.Lechampluimmedoitprendreuneprsentationdiffrente(fondjaune)pourprvenirdelimminencedelalimite.
<html>
<head>
<title>Avertissement limite champ de formulaire</title>

function control(chaine) {
var longueur=0;
longueur=chaine.length;
limite=10-longueur;
var message="Attention ! il ne vous reste plus que "+limite+"
caractres disponibles";
if (limite<5 && limite>0) {
document.getElementById(alerte).style.visibility="visible";
document.getElementById(texte).className="fin";
document.getElementById(alerte).innerHTML=message;
}
else {
document.getElementById(alerte).style.visibility="hidden";
}
}
</script>
.normal{
position:absolute;
left:64px;
top:83px;
height:25px;
width:329px;
visibility:hidden;
background-color:#FFFFCC;
border:1px solid double;
color: #FF0000;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold
}
.fin{
background-color:#FFFFCC;
color: #FF0000;
font-size:12px;
font-weight:bold}
</style>
</head>
<body>
<div id="alerte" class="normal"></div>
<p>
<input name=texte type=text id="texte";" size=15 maxlength="15"
onKeyUp="control(this.value)">
</p>
</form>
</body>
</html>
Lexcutiondecescriptdpenddunombredecaractressaisisdanslechampnommtexte.Lafonctionsexcute,
donc, chaque relchement de pression sur une touche. Le contenu du champ texte est, alors, renvoy dans la
fonction contrle() comme argument. Il faut, ensuite, initialiser la variable longueur pour quelle prenne la nouvelle
valeur de la longueur de la chane. Il est possible, ensuite, de calculer cette longueur par la proprit length de la
chanedecaractres.tantdonnquelalimitedesaisieduchampestfixe10caractres,ilestfacilededterminer
par soustraction le nombre de caractres possibles restants. Juste aprs, le script construit une variable nomme
messagequiseraaffichedanslecalque,unpeuplustard,parlamthodeinnerHTMLetquiestcomposededeux
chanesdecaractres,sparesparlavariablelimite.Cestcelleciquipermet,parlasuite,desavoirsilenombrede
caractres inclus dans le champ est compris entre 5 et 0. Si cest le cas, il faut afficher le calque en modifiant sa
visibilitpuisque,pardfaut,elleestfixeenhiddenparlintermdiairedunstyleCSS.Parlammeoccasion,ilest
possible de changer le style CSS du champ de formulaire pour tre sr dattirerl il de lutilisateur, en modifiant la
couleurdufondpourlamettreenjaune.Enfin,ilfautmettrejourlecontenuducalqueparlemessageindiquantla
finconseilledelasaisie.Unefoislaconditiondpasse,lemessageseffacepourlaisserlechampenrouge.
4.ModifierlapositiondeslmentsparJavaScript
Enplusdelavisibilit,ilestpossibledemodifierlapositiondeslmentslaidedelapropritposition.Laposition
peuttredfiniesoitdemanireabsolue(enpixelsparrapportaucoinsuprieurgauchedelobjet),soitdemanire

relative(parrapportlobjetloriginedelaction).Pourleprciser,ilconvientdajouterlapropritposition :relative
ouposition :absolute.Danstouslescas,lespropritsleftettoppermettentdeparamtrercetteposition.
Exemple :crerunecarteinteractivepermettantdafficher des infobullesaveclenomdelargionfranaiseaprsunclic

sur celleci. Par souci de simplification du code, le test prendra en charge seulement trois rgions (lAlsace, la Lorraine et
lIledeFrance).

<html>
<head>
function efface() {
document.getElementById("Alsace").style.visibility=hidden;
document.getElementById("Lorraine").style.visibility=hidden;
document.getElementById("IDF").style.visibility=hidden;
}
function coordonnees(event) {
var posx=event.clientX;
var posy=event.clientY;
if(posx>565&&posx<620&&posy>150&&posy<320) {
var posy=posy+25;

var posx=posx+25;
document.getElementById("Alsace").style.visibility=visible;
document.getElementById("Alsace").style.top=posy+"px";
document.getElementById("Alsace").style.left=posx+"px";
}
else if(posx>500&&posx<570&&posy>155&&posy<270){
var posy=posy+25;
var posx=posx+25;
document.getElementById("Lorraine").style.visibility=visible;
document.getElementById("Lorraine").style.top=posy+"px";
document.getElementById("Lorraine").style.left=posx+"px";
}
else if(posx>330&&posx<415&&posy>225&&posy<280){
var posy=posy+25;
var posx=posx+25;
document.getElementById("IDF").style.visibility=visible;
document.getElementById("IDF").style.top=posy+"px";
document.getElementById("IDF").style.left=posx+"px";
}
}
</script>
<style css>
.reponse{position:relative;background-color:#FFFF99;font-
weight:bold;width:100px;height:auto
}
</style>
</head>
<body>
<div class=reponse id="Alsace">Alsace</div>
<div class=reponse id="Lorraine">Lorraine</div>
<div class=reponse id="IDF">Ile-de-France</div>
<p><img src="../france_regions.jpg" width="740" height="680"
OnLoad="efface()" onClick="coordonnees(event)"></p>
</body>
</html>
Le script masque dabord les calques ventuellement visibles au chargement de limage par lintermdiaire de la
fonction efface(). Les autres fonctions sexcutent au moment du clic sur une portion de limage correspondant la
rgion.Pourdterminerlazoneenpixels(partirducoinsuprieurgauche),ilfaut,dabord,rcuprerlapositiondu
curseuraumomentduclic,puiseffectuerunesriedetestspoursavoirsilecurseursetrouvedanslazonedfinie.
Pour dfinir la position du curseur, il est possible dutiliser event.clientX et event.clientY. La dfinition de la zone
correspondant la rgion est faite de manire arbitraire, cestdire que le dessin des rgions est rduit un
rectangle. videmment, pour ceux qui le dsirent, cette zone peut tre affine. Il sagit, ensuite, de redfinir les
coordonnesdelabalisequivacomporterlenomdelargion,enyappliquantundcalagedepositiondemanire
relative.LesparamtresdaffichagedelabulletantdfinisdanslefichierCSS.
5.ModifierlatailledeslmentsparJavaScript
Il est possible, galement, daccder aux proprits de taille. Pour cela, il faut utiliser les proprits de largeur
(style.width)etdehauteur(style.height):
Exemple :effectuerunchangementdetailleduncalqueaprsavoirdemandlutilisateur,lesnouveauxparamtres.

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<html>
<head>
<title>Modifier la taille</title>
function changecalque(){
alert("Ce calque doit changer de taille");
var dimX=document.getElementById("calque1").offsetWidth;
var dimY=document.getElementById("calque1").offsetHeight;
alert("Les dimensions du calque sont : "+ dimX +" pixels en largeur
et "+dimY+" pixels en hauteur");
newdimX=prompt("Quelle est la nouvelle taille en largeur :",
"Saisissez ici la nouvelle taille");
newdimY=prompt("Quelle est la nouvelle taille en hauteur :",
"Saisissez ici la nouvelle taille");
newdimY=newdimY+"px";
newdimX=newdimX+"px";
document.getElementById("calque1").style.height=newdimY;
document.getElementById("calque1").style.width=newdimX;
}
</script>
.calque1 {
position:absolute;left:300px;top:100px;color:#FF0000;
padding:10px;border:1px solid #000;background-color:#FFFF99;
}
</style>
</head>
<body>
<div class="calque1" id="calque1"
onClick="changecalque()">Calque1</div>
</body>
</html>
Ce script sexcute au moment du clic sur le calque. La fonction changecalque() affiche tout dabord une bote de
dialoguepuisaffecteauxvariablesdimXetdimYlesvaleursenpixelsdelatailleducalque.Lescriptafficheensuiteces
valeurs dans une bote de dialogue. Ensuite, il est demand lutilisateur de saisir les nouvelles valeurs afin de
changerlesdimensionsducalque.CesvaleurssontstockesdanslesvariablesnexdimXnewdimYauxquellesilfaut
ajouter"px"pourobtenirunenouvellechanecorrespondantparexemple100px.Enfin,ilestpossibledemodifierles
dimensionsducalqueenutilisantlamthodegetElementById.
6.ModifierlasuperpositiondeslmentsparJavaScript
Ilest,galement,possibledetravailleraveclasuperpositiondlments.Lasuperpositionestgreparlaproprit
zindex.Enaffectantunevaleurzindex,ilestpossibledemodifierlordredesuperpositiondelobjet.
Exemple :crerunmenudenavigationencombinantlespropritsdevisibilit,depositionetdesuperposition.


<html>
<head>
<title>Menu navigation CSS</title>
function efface(numcalque) {
document.getElementById(numcalque).style.visibility=hidden;
document.getElementById(triangless1).style.visibility=hidden;
}
function affiche(calque) {
document.getElementById(calque).style.visibility=visible;
}
function masque(calque) {
document.getElementById(calque).style.visibility=hidden;
}
function affichetriangle(triangle) {
document.getElementById(triangle).style.visibility=visible;
document.getElementById(triangle).style.zIndex=2;
}
function recultriangle(triangle) {
document.getElementById(triangle).style.zIndex=0;
}
function effacetriangle(triangle) {
document.getElementById(triangle).style.visibility=hidden;
}
</script>
.calque1{
visibility:hidden;
padding:2px;
position:absolute;
background:#993399;
border:#000000:solid;
left:0px;
top:21px;
height:137px;
width:150px;
color:#FFFFFF;
background-color: #993399;
}
.menu1{
position:absolute;
padding:2px;
background:#993399;
left:0px;
top:0px;

height:20px;
width:100px;
color:#FFFFFF}
.triangless1{
visibility:hidden;
padding:1px;
position:absolute;
padding:0px;
left:136px;
top:40px}
.calque2{
visibility:hidden;
padding:2px;
position:absolute;
background:#993399;
left:150px;
top:40px;
height:141px;
width:150px;
color:#FFFFFF}
.zonefface{
position:absolute;
background:#FFFFFF;
left:742px;
top:161px;
height:250px;
width:350px;
color:#FFFFFF}
</style>
</head>
<body>
<div class="menu1" id="Menu1" style="z-index:1"
onMouseOver="affiche(calque1)">Menu1</div>
<div class="calque1" id="calque1" style="z-index:1"
onMouseOver="affiche(calque1)">
<div id="txtsous-menu1"
onMouseOver="affichetriangle(triangless1);affiche(ss1)"
onMouseOut="effacetriangle(triangless1); masque(ss1)">
<p>Sous-menu 1</p>
</div>
<div id="txtsous-menu2">
<p>Sous-menu 2</p>
</div>
<div id="txtsous-menu3">
<p>Sous-menu 3</p>
</div>
</div>
<div class="calque2" id="ss1" style="z-index:1">

<p>Sous-sous-menu 1</p>
<p>Sous-sous-menu 2</p>
<p> Sous-sous-menu 3</p>
</div>
<div class="zonefface" id="zonefface" style="z-index:0"
onMouseOver="masque(calque1); masque(ss1)"></div>
<img src="triangle_mauve.jpg" width="15" height="19"
class="triangless1" id="triangless1" >
<img src="triangle_mauve.jpg" width="15" height="19"
class="triangless1" id="triangless2" >
</body>
</html>
Le script se divise en plusieurs fonctions qui permettent dafficher ou de masquer certains composants du menu
(menu,sousmenusettriangledindication).Cescriptsebasesurlaffichageoulemasquagedlments,enfonction
dusurvolsurunautrelment.Leprincipederapprochement/reculest,aussi,employ,notammentpourletriangle
qui change dindice de superposition, pour apparatre pardessus les lments de menu. La premire fonction
effacecalque()apourrledeffacerlescalquesetletriangledindicationparlintermdiairedelapropritdevisibilit.
Lesautresfonctionspermettent,leurtour,dafficheroudemasquerdeslmentsdemenu,transmisenparamtre

au moment du survol. Ainsi, lorsque le premier texte du sousmenu est survol, le triangle redevient visible et son
indicezindexprendlavaleur2,cequiluipermetdepasseraudessusdesmenusetsousmenus.linverse,lorsque
lasourisquittelesurvoldupremiertextedusousmenu,letriangleprendunevaleurdezindexgalezroetpasse
doncendessousdumenu.Ilestvidentquilauraittpossibledemasquerletriangleparlapropritdevisibilit,
cependantcescriptestunbonexempledumlangedespropritsdevisibilitetdesuperposition.
7.Ledraganddrop
Ledraganddrop(glissdposenfranais)permetdesaisirunobjet(gnralementuncalque),encliquantdessus
et de le dplacer, en maintenant enfonc le bouton gauche de la souris. Une fois la position dsire, il suffit de
relcherlebouton.IlnexistepasdefonctionprdfiniededraganddropdansJavaScript.Pouryarriver,ilsagitde
trouveruneastucepermettantderaliserledplacement.
Exemple : raliser un script permettant de faire un glissdpos dun calque, correspondant ltiquette dune rgion
franaisesurunecartedefrance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Gliss-dpos</title>
var positionX=0, positionY=0;
var dimX=0, dimeY=0;
var mavar=1;
var nouvellepositionX=0, nouvellepositionY=0;
function depart(calque) {
dimX=positionX-document.getElementById(calque).offsetLeft;

dimY=positionY-document.getElementById(calque).offsetTop;
mavar=0;
}
function deplacement(page) {
if (document.all) {
positionX=event.clientX;
positionY=event.clientY;
}
else {
positionX=page.pageX;
positionY=page.pageY;
}
if(mavar!=1){
var nouvellepositionX=positionX-dimX;
var nouvellepositionY=positionY-dimY;
document.getElementById(calque1).style.left=
nouvellepositionX+"px";
document.getElementById(calque1).style.top=
nouvellepositionY+"px";
}
}
function arret(calque) {
calqueDragDrop="";
mavar=1;
}
document.onmousemove=deplacement;
document.onmouseup=arret;
</script>
.calque {position:absolute;left:400px;top:100px;
cursor:move;width:75px;height:35px;font-size:10pt;
font-weight:bold;font-family:arial;border:1px solid #999
}
</style>
<body style="height:100%">
<div id="calque1" class="calque" style="top:25px; left:931px;
z-index:0; color:#009; background-color:#D5D5FF;"
onMouseDown="depart(calque1)">Region</div>
<p><br />
<img src="france_regions.jpg" width="740" height="680">
</p>
</body>
</html>
Lescriptdbuteauchargementdelapageetinitialisezrolensembledesvariablesquisontutilises.Lafonction
depart() sexcute au moment du clic, ce qui permet de rcuprer les coordonnes de la souris par rapport au coin
suprieur gauche du calque et de les stocker dans deux variables dimX et dimY. Par la mme occasion, la variable
mavarprendlavaleurde0indiquant,ainsi,quelecalqueestslectionn.
Aumomentdudplacementdelasouris,lafonctiondeplacement()testeletypedenavigateuretpermetdercuprer
dedeuxmaniresdiffrenteslescoordonnesdelasouris,suivantletypedeceluici.AvecInternetExplorer,ilsagit
delamthodeevent.clientX()etevent.clientY()alorsquavecMozilla/Firefox,ilsagitdelamthodepageX(),pageY().
En fonction de la position de la souris et si la variable mavar est diffrente de zro (ce qui est normalement le cas
puisquelutilisateuracliqusurlecalque),ilsagitdecalculerlanouvellepositioncorrespondante.Pourcefaire,ilfaut
prendrelapositiondelasourisetysoustraireledcalageduclicdanslecalque(variabledimXetdimY).Lersultat
est ensuite raffect au calque en passant par les mthodes document.getElementById(calque1).style.top() et
document.getElementById(calque1).style.left().

AjaxetJavaScript
Toutdabord,ilconvientdesignaler,quecettepartiedelouvrageneprtendpasdonnerlensembledesconnaissances
enAJAXetainsi,permettrededvelopperlintgralitdunsiteaveccettetechnologie.Ilsagitsimplementdendfinir
les contours et den connatre les principes de fonctionnement. Mais AJAX, en dfinitive, a correspond quoi ? Tout
commeleDHTML,lAJAX(AsynchronousJavaScriptAndXML)estunmlangedediffrentestechniques.AvecAJAX,ilest
possibledeffectuerdesrechargementsdedonnes,enprovenanceduserveur,toutenrestantsurlammepage.En
fait,unvisiteurpeutcontinuersaisirdeschampsdeformulairealorsquuncontrleesteffectuenarrireplanpour
vrifier une saisie prcdente avec les donnes prsentes sur un serveur. Ce type de fonctionnement, appel
asynchrone,nestpasleseul,carlatechnologieAJAXpermetgalementdexcuterdesrequtesenmodesynchrone
(danscecas,larequteestexcutesansquilsoitncessairederechargerlapageoudenchargeruneautre,maisla
saisie simultane est impossible, ce qui rduit son utilisation). En fait, les pages crites avec de lAJAX cumulent
plusieurstechnologies:
Le code HTML qui reste au c ur de la page web, aid par les feuilles de style CSS pour toute la partie de
prsentationdesdonnes.
Le DOM pour laccs aux lments de la page, notamment par les mthodes getElementById ou
getElementByName.
Le code de programmation ct serveur, de type PHP ou ASP, qui permet de rcuprer des informations du
serveurcommelobjetXmlHttpRequestquipermetdecontrlerlinterrogationdesdonnesduserveur.
Les donnes en retour se prsentent sous la forme dun simple fichier texte ou JavaScript ou encore XML et
doiventtretraitesparJavaScriptpourapparatreconvenablementsurlapage.
Comme vous le voyez, JavaScript se situe au c ur de ces diffrentes technologies et joue, un peu, le rle dun chef
dorchestre grant lensemble des traitements. Par opposition cette multitude de technologies, lAjax se fonde
essentiellementautourdunseuletmmeobjet,nommXmlHttpRequest.
1.LobjetXmlHttpRequest
Cet objet est identique pour tous les navigateurs rcents, mme si sa dclaration est diffrente entre Internet
Exploreretlesautresnavigateurs.CetobjetestrelativementancienpuisquilatdveloppparMicrosoftds1998
etimplmentdanslaversion5dInternetExplorer.Lesautresnavigateursont,progressivement,prisencomptecet
objet.Ilestdonc,importantdeconnatrelacompatibilitdunavigateur.
Exemple :crerunscriptdevrificationdecompatibilitdunavigateuretafficherlersultatdansunebotededialogue.
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
alert("Votre navigateur est compatible pour AJAX");
}
else if(window.ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
alert("Votre navigateur est compatible pour AJAX");
}
else {alert("Votre navigateur nest pas compatible avec AJAX");
}
</script>
Ilsagit,ici,detenterdecrerunenouvelleinstancedabordpourFirefox/Mozilla/Mozilla,puis,demanirediffrente,
pourInternetExplorer(puisquebassuruncomposantActiveX),silapremirenestpasconcluante.
Une fois la compatibilit dtermine, il reste manipuler XmlHttpRequest, afin dexcuter les interrogations de

donnes.XmlHttpRequestdisposedeplusieursmthodesetattributsceteffet.
2.LesattributsdeXmlHttpRequest
Attributs Rsultat
Affecteunefonctionchaquechangementdtat
onreadystatechange dansletraitementdelarequteenmode
asynchrone.
Correspondltatdelobjet,toutaulongdu
traitementdelarequte.Ellecomportequatre
readyState valeurs :0pournoninitialise(Uninitialized),1pour
ouvert(Open),2pourenvoye(Sent),3pourencours
derception(Receiving)et4pourprt(Loaded).
Indiquequelarponsedevratrerenvoyesous
responseText
formetexte.
Indiquequelarponsedevratrerenvoyesous
responseXML
formeXML.
status Correspondaucodedustatutdeserveur(404pour
pagenontrouveet200pourOK).
statusText Correspondaumessageaccompagnantlecode
statut.
Mthode Rsultat
Abandonnelarequteetrinitialiselobjet
abort
XmlHttpRequest.
getAllResponseHeaders() Correspondauxentteshttpdelarponse.
Correspondlavaleurdelentteindiqueen
getResponseHeader()
paramtre.
Permetlaconnexionavecleserveurenpassantles
open() paramtresdemthode(GET,POST),dURLetdetype
(synchroneouasynchrone).
send() Transmetunerequteauserveurselonlesmthodes
GETouPOST.
setRequestHeader() Affecteunevaleuruneenttequiserarenvoye
lorsdelarequte.
Lensembledecesattributsetmthodespermetdemettreen uvredesscriptscritsenJavaScript,pouraccder
des donnes prsentes sur le serveur, sans quil soit ncessaire de recharger la page. Cest l toute la puissance
dAjaxouvrantlavoiedecequelonappelle,communmentaujourdhui,leweb2.0.Afindebienobserverlesrsultats
desscriptssuivants,ilestimportantdetravaillerdansunenvironnementadquat.Ilest,parexemple,ncessairede
mettresurserveurlesfichierscomportantlesdonnesrcuprer.
Exemple :contrlerlasaisiedunchamppseudopourrenvoyerunmessagedavertissement,siceluiciadjtprispar
unautreutilisateur.

Lefichierphp :
<?php require_once(../../Connections/connex1.php); ?>

<?php
mysql_select_db($database_connex1, $connex1);
$query_Recordset1 = ("SELECT Utilisateurs.Identifiant FROM Utilisateurs
WHERE Utilisateurs.Identifiant = ".$_GET["Identifiant"]."");
$Recordset1 = mysql_query($query_Recordset1, $connex1) or
die(mysql_error());
$row_Recordset1 = mysql_fetch_row($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);
//echo $Recordset1;
if ($row_Recordset1>0) {
echo djapris;
}
?>
Le script PhP utilise le paramtre (Identifiant), renvoy par le fichier html, pour extraire les donnes grce la
requte.Danslecasolarequtetrouvedeslmentsrpondantsauxcritres(cestdiresi$row_Recordset1>0),
cela signifie quilexistedjunidentifiantidentique.Danscecas,lescriptrenvoielachanedecaractresdjapris
commerponse.
LefichieravecscriptJavaScript :
<html>
<head>
<title>Exemple de script AJAX</title>
var retour = "";
function verif(Identifiant){
if (Identifiant.length >= 4) {
freponse(Identifiant);
}
}
function freponse(Identifiant) {
retour = connectURL(control.php?Identifiant==+Identifiant);
if(retour=="djapris"); {
document.getElementById(reponse).innerHTML = Cet Identifiant n\est
pas disponible.;
}
document.getElementById(reponse).innerHTML = Cet Identifiant est
disponible.;
}
function connectURL(url)
{
if (window.XMLHttpRequest)
objXHR = new XMLHttpRequest();
else
{
if (window.ActiveXObject)
objXHR = new ActiveXObject("Microsoft.XMLHTTP");
alert(objXHR);
}
objXHR.open("GET",url,false);
objXHR.send(null);
if (objXHR.readyState == 4)
return objXHR.responseText;

else
return false;
}
</script>
</head>
<body>
<form>
<div id="reponse"></div>
<input type="text" name="Identifiant" onKeyUp="verif(this.value);" />
</form>
</body>
</html>
Dans ce script, cest la fonction verif() qui lance le traitement chaque relchement dune touche du clavier. Le
contrle de lidentifiant seffectue seulement, si 4 caractres, au moins, ont t saisis. Dans ce cas, la fonction
freponse() prend le relais. Elle dfinit une variable nomme retour correspondant au rsultat retourn par le fichier
PhP,parlintermdiairedelafonctionconnectURL()dontladressedufichieretlecritredinterrogationsontpasssen
paramtres. La fonction connectURL() commence par tester le navigateur pour savoir sil accepte lobjet
XmlHttpRequestetconstruitlobjetobjXHR.Ilfaut,ensuite,testerlestatutdelaconnexionpoursavoirsilestpossible
denvoyer une requte (objXHR.readyState = = 4). Si cest le cas, la fonction connectURL() retourne la rponse sous
forme texte. Une fois la rponse retourne, la fonction freponse traite la valeur. En fonction du rsultat du test, un
messageestenvoyaucalqueparlintermdiairedelinstructioninnerHTML.
LapuissancedAJAXestainsidmontreetdepuisquelquesmois,lenombredepagescontenantducodeAJAXcrot
de manire exponentielle. En fait, comme un effet de mode, dvelopper en AJAX est devenu un must. Et comme
toujoursendetelcasdefigure,ilestpossiblederetrouverAJAXmmedansdespagesquinennontpasforcment
besoin.tantdonnquelerecoursAJAXmultiplielesrequtesauserveurdedonnes,ilconvienttoutdemmede
limitersonutilisationdescasbienprcis.
Ce script dmontre galement que JavaScript est loin dtre un sous langage. Combins avec des technologies
rcentes,lesscriptsrdigsenJavaScriptpeuventtretrslaborsetcomplexesmaintenir.Ilexiste,cependant,
unealternativepermettantdesimplifierlardactiondetelsscripts.CestlerecoursauxbibliothquesJavaScriptqui
permet,enoutre,dedcouvrirdenouvellesutilisations.

LesbibliothquesJavaScript
Depuisledbutdecetouvrage,lesprincipesdeJavaScriptonttmisenapplicationpourpermettredajouterplusde
fonctionnalits aux pages HTML. Malgr tout, un tel dveloppement ncessite un investissement en temps important,
quipeuttresourcededcouragement.Heureusement,ilexistedenombreuxframework(bibliothques)JavaScripten
tlchargement gratuit qui permettent non seulement un gain de temps considrable, mais offrent, aussi, de
nombreuses possibilits supplmentaires. Il ne sagit pas ici de toutes les passer en revue, mais simplement den
montrer leur installation et leur principe de fonctionnement. Nous nous attarderons, plus particulirement, sur la
bibliothque script.aculo.us qui permet de nombreux effets visuels et permet dajouter facilement beaucoup de
fonctionnalits(autocompltion,draganddrop...).Maistoutdabord,ilfautdcrirelabibliothquePrototype,labase
dautresframeworksetquiest,donc,indispensable.
1.LabibliothquePrototype
La bibliothque Prototype est une bibliothque permettant de simplifier la rdaction de scripts JavaScript. Les
fonctionnalits proposes sont une sorte dextension aux mthodes JavaScript. Cette bibliothque fournit de
nombreuxraccourcisdecodesintressantsetpermet,galement,desimplifierletraitementdesrequtesAJAX.
Cettebibliothqueestdisponibleentlchargementladressesuivante :http://www.prototypejs.org/download
Cette bibliothque est constitue dun seul fichier quil est ncessaire dappeler, lors de chaque usage, par la ligne
suivante :
<script language="javascript" src="chemindufichier/prototype.js">
IlseraittroplongdedonnerunedescriptiondtailledelabibliothquePrototype.Eneffet,ellesertdebaseune
autre bibliothque script.aculo.us, fournissant de nombreuses fonctionnalits intressantes (notamment au niveau
graphique)etquenousdtailleronsdansleparagraphesuivant.
2.Labibliothquescript.aculo.us
Cettebibliothqueestdisponibleentlchargementgratuitladressesuivante :http://script.aculo.us/downloads
La bibliothque est constitue de plusieurs fichiers classs dans trois rpertoires. Le rpertoire lib contient la
bibliothquePrototype,ncessairelutilisationdesscriptsdescript.aculo.us.Lerpertoiretestcontientdeuxpages
permettantdevisualiseretdetesterlesfonctionnalitsdescript.aculo.us.Ainsi,lapagerun_unit_testsvouspermet
de vrifier que les scripts sexcutent bien sur le navigateur de test, il sagit de laisser le test se drouler et de
contrlerlemessagederetourpourtresrquelensemblefonctionnecorrectement.Enfin,lerpertoiresrccomprend
huitfichiersJavaScriptcorrespondantaufichierdebasescriptaculous.jsainsiqueseptmodulescorrespondantdes
fonctionnalitsprcises :
Fichier Fonctionnalits
effects.js Effetsspciaux.
builder.js ManipulationdesobjetsHTMLviaDOM.
dragdrop.js Effetsdeglisserdposer.
sliders.js Effetsdeglisser.
sound.js Utilisationdessons.
control.js Autocompltion.
unitest.js Testdeseffets.
Afindedisposerdesfonctionnalitsdescriptaculo.us,ilfautsoitchangerlefichiercorrespondantleffetdsir,soit
changerlefichierscriptaculos.jsaprslefichierprototype.js.Lesdeuxlignessuivantesdoivent,donc,figurerdansles
pages :
<script language="javascript" src="prototype.js" >

</script>

<script language="javascript" src="scriptaculous.js">
</script>
Le fichier scriptaculous.js fait ensuite appel aux diffrents fichiers (effects.js, sliders.js), en fonction des besoins du
scriptdelapage.Celasignifiequetouslesfichierssontchargs,avantmmelemoindretraitement.Cetaspectpeut
paratrecontraignantpourlesutilisateursnedisposantpasdundbitsuffisant(mmesiceladevientdeplusenplus
rare). Afin dallger le temps de tlchargement, il est possible de faire appel au seul fichier concern. Il est, par
exemple,inutiledechargerlefichierdragdropsivotrepagenecomportequedeseffetsdanimation.Danscecas,il
fautfaireappelauseulfichierconcern,parlasyntaxesuivante :
<script language="javascript"
src="chemindufichier/scriptaculous.js?load=effects"></script>
Lesfichiersjsdoiventtreplacssurleserveur,bienentendu.Grcecettemiseen uvre,ilestpossibledaccder
denouvellesmthodesetdenouveauxmotscls.
Afindesimplifierlaprsentation,lesscriptssuivantsfontappellabibliothqueentire.
3.Leseffetsvisuelsavecscript.aculo.us
Pluttquedelisterleseffetsvisuels,lemieuxestpeuttredlaborerunscriptpermettantdelesappliquer.
Pourutiliserceseffets,ilsuffitderespecterlasyntaxesuivante :
New Effect.nomdeleffet("nomelement",options)
Onomdeleffetcorrespondleffetutiliserparmilalistedeseffetsdisponibles,nomelementcorrespondllment
sur lequel appliquer leffet (gnralement un calque) et options correspond au paramtrage de leffet (position,
dimension,etc.).
Exemple :crerunepagepermettantdappliquerlesdiffrentseffetssurunblocdetexte.
<html>
<head>
<title>Test effets avec scriptaculos</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="/scriptaculous.js"></script>
var el="element1";
function souligne() {
new Effect.Highlight(el);
}
function deplacer() {
new Effect.MoveBy(el,100,100);
}
function echelle() {
new Effect.Scale(el,150);
}
function bouger(){
new Effect.Shake(el);
}
function disparaitre() {
new Effect.Fade(el);
}
function apparaitre() {
new Effect.Appear(el);
}
function deroule() {
new Effect.BlindDown(el);
}
function enroule() {
new Effect.BlindUp(el);
}
function fuit() {
new Effect.DropOut(el);

}
function reduit() {
new Effect.Fold(el);
}
function grossis() {
new Effect.Grow(el);
}
function battre() {
new Effect.Pulsate(el);
}
function nuage() {
new Effect.Puff(el);
}
function rebouger() {
new Effect.Shrink(el);
}
function retour() {
new Effect.Squish(el);
}
function interrupt() {
new Effect.SwichOff(el);
}
</script>
.Style1 {
left:800;
top:200;
color: #FF0000;
font-weight: bold;
}
</style>
</head>
<body>
<div class="Style1" id="element1">
<div align="center">Texte</div>
</div>
<tr>
<td colspan="15"><div align="center">Effets visuels de
script.aculo.us </div></td>
</tr>
<tr>
<td width="5%"><input type="button" name="Submit15"
value="Echelle" onClick="echelle()"></td>
value="Souligner" onClick="souligne()"></td>
value="Deplacer" onClick="deplacer()"></td>
<td width="5%"><input type="button" name="Submit"
value="Bouger" onClick="bouger()"></td>
value="Disparaitre" onClick="disparaitre()"></td>
value="Apparaitre" onClick="apparaitre()"></td>
value="Enrouler" onClick="enroule()"></td>
<td width="7%"><input type="submit" name="Submit5"
value="Derouler" onClick="deroule()"></td>
value="Fuir" onClick="fuit()"></td>
value="Reduire" onClick="reduit()"></td>
value="Grossir" onClick="grossis()"></td>
value="Battre" onClick="battre()"></td>

value="Nuage" onClick="nuage()"></td>
value="Rebouger" onClick="rebouger()"></td>
value="Retour" onClick="retour()"></td>
</tr>
</table>
</p>
</div>
</body>
</html>
Cescriptsexcuteauchargementdelapage.Aprsavoircharglesdeuxfichiersncessairesauxfonctionnalitsde
la bibliothque scriptaculo.us, le script dfinit une variable permettant dconomiser la saisie pour les manipulations
suivantes. Lensemble des effets appliqus lobjet peut tre lanc par un clic sur un bouton, o figure le nom de
leffet.
La bibliothque script.aculo.us, en plus de ces effets visuels assez impressionnants, permet de matriser facilement
destechniquesJavaScriptvolues.Lapremiredentreellesadjtdtailleprcdemment,maisilconvientde
comparerlacomplexitdecescriptaveclasimplicitdutilisationofferteparscript.aculo.us.
4.Ledraganddropavecscript.aculo.us
La cration de draganddrop avec script.aculo.us est dune facilit dconcertante, dautant plus que les options
permettent de nombreuses dalternatives. La mthode utiliser doit suivre deux tapes. Dans un premier temps, il
sagitdindiquerquelssontleslmentsquipeuventtredplacs,puisdansunsecondtemps,quelssontceuxqui
sontdsignspourlesrecevoir.
Lasyntaxesuivre,lorsdeladsignationdesobjetsdplacer,estlasuivante :
new Draggable("id de lobjet dplacer", {options}) ;
Lesoptionsdisponiblessontlessuivantes :
Nomdeloption Fonction
Limiteledplacementdelobjetdanslesens
constraint: "horizontal" "vertical"
horizontalouvertical.
Indiquelafonctionventuelleexcuterenfin
endeffect:function()
deffet.
ghosting: "true" "false" Creetdplaceunclonedellment.
handle: "true" "false" Indiquesiunepoignededplacementdoittre

utilise.
revert: "true" "false" Indiquesillmentdoitrevenirsapositioninitiale

aprsavoirrelchlasouris.
reverteffect: Indiquelafonctionventuelleexcuterlorsdu
retourdellmentavecrevert.
snap:[x,y] Indiqueunegrilleenpixelsselonlaquellellmentse
dplace.
starteffect: Indiquelafonctionventuelleexcuteraudbutde
leffet.
zindex:(1) Indiquelindicedepositionnementdellmentselon
laxez.
Unefoisleslmentsdplacerdfinis,ilfautencoreindiquerquilesrecevront.Sillmentattenduestbiendpos
dans lobjet cible, il est alors possible dexcuter un effet visuel ou dafficher une bote de dialogue. La syntaxe,
permettantdedfinirunobjetcible,estlasuivante :

droppables.add("id de lobjet dplacer", {options}) ;
Lesoptionsdisponiblessontlessuivantes :
Nomdeloption Fonction
Indiqueleslmentsautorissparlacible.Cestla
accept: "nom de la (les) classe
classequicorrespondlobjetouauxobjetsaccept
(s)" [classe1,classe2]
(s).
containment: "element" [element1,lment2] Indiquelacibleetleslmentsaccepts.
hoverclass: Permetdemodifierlaclassedelaciblelorsquun
lmentpassepardessus.
Unefonctionpeuttreexcutesilacibleest
overlap: "horizontal " "vertical" couverteplusde50%delasurfacedansladirection
spcifie.
Excutelafonction,lorsquellmentspcifi
onHover:fonction(element,cible, pourcentage) recouvrelacibleavecunpourcentagede
recouvrement,passenparamtre.
OnDrop:fonction(element,cible) Excutelafonctionlorsquellmentestlchsurla
cible.
Exemple :creruneffetdraganddroppermettantdedplacerdeuxcalquesdansunecible.Silobjetcorrespondlabonne
rponse,unebotededialoguesafficheetuneffetestappliqulacible.

<html>
<head>
</script>
</script>
</head>
<body>
<style type=text/css>
.objet1 {background-color:#993399;height:100px;width:100px;
z-index:1}
.objet2{background-color:#336666;height:100px;width:100px;
z-index:1}
.cible {border-right:#000000 2px solid; border-top: #000000 2px
solid; border-left:#000000 2px solid;height:200px;width:200px;
left:200px;top:200px;border-bottom:#000000 2px solid}
</style>
<div class=objet1 id=objet1>Objet 1</div>
<div class=objet2 id=objet2>Objet 2</div>
<div class=cible id=cible>Cible</div>

new Draggable("objet1");
new Draggable("objet2",{revert:true});
Droppables.add("cible", {
accept: "objet1",
onDrop: function() { new Effect.Highlight("cible"); alert("Avec
scriptaculos, le glisser-dpos cest facile");
new Effect.MoveBy("cible",100,100)}});
</script>
</body>
</html>
Ce script sexcute au chargement de la page. Tout comme prcdemment, les deux fichiers de la bibliothque
script.aculo.ussontappelsdsledbut.Ensuite,lesstylesCSSdechaqueobjet(objet1,objet2etcible)sontdfinis
et le script permet de dplacer les objets grce linstruction new Draggable. Ici, loption revert :true indique que
lobjet concern devra reprendre sa position initiale aprs le dplacement. Le script indique, ensuite, lobjet devant
recevoirlesautresobjetsparlutilisationdelamthodeDroppables.add,quidfinitlesvnementslorsquelobjetest
acceptdanslacible.LvnementonDroppermetdemodifierlapparencedelacible,dafficherunmessagedansune
botededialogueetdemodifierlapositiondelacible,afinderecommencer.
Lavantage de lutilisation de script.aculo.us est incontestable, notamment dans le traitement des effets visuels et
graphiques,maiscelanestpasleseuldomainedanslequelcettebibliothquepeuttredungrandsecours.Eneffet,
lamiseenplacedelatechnologieAJAXestparticulirementsimplifie.
5.Lautocompltionavecscript.aculo.us
Script.aculos.us met disposition un objet puissant, permettant de grer facilement lautocompltion (multiples
propositionslorsdunesaisie),parlintermdiairedelatechnologieAJAX.IlsagitdelobjetnewAjax.autocompleter,
dontlasyntaxeestlasuivante :
new Ajax.Autocompleter("champsuggestions","affichage","url");
Ochampsuggestionscorrespondauchampdunformulairerecevantlessuggestions,affichagellmentdevantles
affichereturlaufichier(gnralementenphp)permettantdextraireetdecomposerlalistedessuggestions.
Lessuggestionspeuventtrerenvoyespar:
unsimplefichiercritenphpcomprenantuntableau,
unebasededonnes(MySQLavecPhP)interrogeparunerequte.
Lepremiertypedutilisation,mmesilestmoinssouple,estplusfacile.
Exemple 1 : crer un script qui propose une liste de prnoms, correspondant la saisie effectue dans un champ de
formulaire.LefichierPhPcomprendlesvaleursretourner,souslaformeduntableau.
Lescriptdufichierrequetesimple.php :
<?php
header(Content-type: text/html; charset=iso-8859-1);
$identifiants = array(Alain,Andr,ric,Frdric,
Isabelle,Nathalie,Nestor,);
echo "<ul>\n";
foreach ($identifiants as $identifiant){
if (stripos($identifiant, $_POST[identifiant]) === 0){
echo " <li>$identifiant</li>\n";
}
}
echo "</ul>";
?>

Lapremireligneduscriptpermetdindiquerquevoustravaillezpartirdujeudecaractre88591,permettantde
renvoyer les caractres accentus. Ensuite, le script gnre un tableau dans lequel les prnoms sont saisis. Puis,
chaque valeur du tableau est compare la variable renvoye par la page. Lorsque des lments peuvent tre
renvoys,ilscomposentunelistegrcelutilisationdelabalise<li>.
Lescriptdufichierhtml :
<html>
<head>
<title>Autocompletion avec scriptaculous</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-
8859-15">
</script>
</script>
.propositions {position:absolute;background-color:#CCFFFF;border:1px
solid#330066;margin:0px;padding:0px;}
.propositions ul {list-style-type:none;margin:0px;
padding:0px;overflow:auto}
.propositions ul li.selected {background-color:#6699FF;
color:#FFFFFF;font-weight:bold}
.propositions ul li {list-style-type:none;display:block;margin:0px;
padding:2px;cursor:pointer}
</style>
<form action="" method="get" name="form1" id="form1">Saisissez un
identifiant :<input name="identifiant" type="text" id="identifiant"
size="20" maxlength="20" />
<div id="identifiant_propositions" class="propositions"></div>
</form>
new Ajax.Autocompleter("identifiant","identifiant_propositions",
"requetesimple.php",{paramName:identifiant,minChars:1});
</script>
</body>
</html>
Le script dbute par lappel des bibliothques prototype et script.aculo.us, ncessaires lutilisation de lobjet new
Ajax.Autocompleter.Ensuite,ilestncessairededfinirplusieursstylesCSSpermettantdeprsenterconvenablement
la liste des suggestions. Aprs la dfinition du champ de formulaire, le script JavaScript utilise lobjet new
Ajax.Autocompleterenluiindiquant:
pourquelchamplautocompltiondoittrelance(icilechampidentifiant),
commentlessuggestionsdevronttreprsentes(icilecalqueidentifiantpropositions),
partirdequelfichierlesdonnesserontrenvoyes(icilefichierrequetesimple.php).
Le paramtre renvoy ce fichier correspond au nom figurant aprs paramName avec un nombre minimal de
caractres(dfiniiciparminChars:1).
Exemple 2 : crer un script proposant une liste de prnoms, correspondant la saisie effectue dans un champ de
formulaire.LefichierPhPsertdesupportlarequteSQLpermettantlextractiondesvaleurscorrespondantlachanede
caractres,saisiedanslefichierautocompletion.html.Celuiciresteidentique,mispartlurldufichierquiprendlavaleur
requetecomplexe.phplaplacederequetesimple.php.
Lescriptdufichierrequetecomplexe.phpestlesuivant:
<?php require_once(../../Connections/connex1.php); ?>

<?php
header(Content-type: text/html; charset=iso-8859-15);
mysql_select_db($database_connex1, $connex1);
$query_Recordset1 = "SELECT Ref_Utilisateur, Identifiant FROM
Utilisateurs WHERE Identifiant LIKE ".$_POST[identifiant]."%";
$Recordset1 = mysql_query($query_Recordset1, $connex1) or
die(mysql_error());
$result = mysql_query($sql);
echo "<ul id=\"mylist\">\n";
while($data = mysql_fetch_assoc($Recordset1)) {

echo "<li id=\"item_" . $data[Ref_Utilisateur] . "\">" .
$data[Identifiant] .
"</li>\n";
}
echo "</ul>";
?>
<?php
mysql_free_result($Recordset1);
?>
Lespremireslignesdufichierpermettentlaconnexionlabasededonnes.Ilestimportantensuitededfinirdans
quel jeu de caractres le script doit fonctionner (ici, avec le jeu dont le code est 885915 pour interprter les
caractresaccentus).Lescriptpermet,ensuite,decalculerlenombredersultatsrenvoyeretdeconstruirelaliste
des valeurs, grce la balise <li>. Ici, la table MySql comprend les mmes valeurs que le tableau en PhP
prcdemmentcr,lersultatdoitdonctreidentique.Lavantage dunetellesolutionreposesurlefaitquilnest
plusobligatoiredechanger,ajouterousupprimerlesvaleursproposesdanslecodedirectement,cequisimplifiela
maintenancedecettefonctionnalit.
OutrelesbibliothquesPrototypeetScript.aculo.us,ilexistebeaucoupdautresbibliothquesavecdesfonctionnalits
tout aussi intressantes. Il est possible ainsi de citer la bibliothque Dojo (disponible ladresse
http://dojotoolkit.org/downloads) contenant de nombreux outils graphiques comme la reprsentation en
arborescence.Bref,unvastechampdedcouvertesetdedveloppementenperspective !

JavaScript Des Fondamentaux Aux Concepts Avance (Bibliotheques Prototype Et Script - Aculo.us) PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

JavaScript Des Fondamentaux Aux Concepts Avance (Bibliotheques Prototype Et Script - Aculo.us) PDF

Загружено:

Авторское право:

Доступные форматы

JavaScript

Des fondamentaux aux concepts avancs

ENI Editions - All rigths reserved - 1-

Annedesortie VersiondeJavaScript Navigateurscompatibles

1998 1.3 NetscapeNavigator4.5

2000 1.5 NetscapeNavigator6.0

2005 1.6 Firefox1.0

ENI Editions - All rigths reserved - 1-

ENI Editions - All rigths reserved - 1-

ENI Editions - All rigths reserved - 1-

<script language="javascript 1.5">

ENI Editions - All rigths reserved - 1-

ENI Editions - All rigths reserved - 1-

ENI Editions - All rigths reserved - 1-

ChaquelignedecodeJavaScriptseterminegnralementparunpointvirgule sauf exception de syntaxe que nous

ENI Editions - All rigths reserved - 1-

- 2- ENI Editions - All rigths reserved

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

document.write(" la page modle est r-utilisable") ;

ENI Editions - All rigths reserved - 1-

ENI Editions - All rigths reserved - 1-

ENI Editions - All rigths reserved - 1-

ENI Editions - All rigths reserved - 1-

- 2- ENI Editions - All rigths reserved

ENI Editions - All rigths reserved - 3-

ENI Editions - All rigths reserved - 1-

ENI Editions - All rigths reserved - 1-

VersiondeJavaScript Navigateurscompatibles Ajouts/Amliorations

- 2- ENI Editions - All rigths reserved

ENI Editions - All rigths reserved - 3-

- 4- ENI Editions - All rigths reserved

ENI Editions - All rigths reserved - 1-

- 2- ENI Editions - All rigths reserved

Prompt("texte afficher", "valeur par dfaut") ;

ENI Editions - All rigths reserved - 3-

- 4- ENI Editions - All rigths reserved

"ma constante texte"ouma constante textesontdesconstanteschanesdecaractres.

ENI Editions - All rigths reserved - 1-

Cette constante correspond un nombre infini, suprieur 1.7976931348623157E+10308 ou infrieur

- 2- ENI Editions - All rigths reserved

ENI Editions - All rigths reserved - 3-

ENI Editions - All rigths reserved - 1-

var mavariable1, mavariable2, mavariable3 ;

var reponse=prompt(" Quelle est la valeur de cette variable ? ") ;

ENI Editions - All rigths reserved - 1-

- 2- ENI Editions - All rigths reserved

ENI Editions - All rigths reserved - 3-

- 4- ENI Editions - All rigths reserved

abstract float short

boolean for static

break function super

byte goto swich

char implements this

class import throw

continue instanceoff transient

debugger int true

default interface try

delete long typeoff

double new void

else null volatile

ENI Editions - All rigths reserved - 1-

export private with

- 2- ENI Editions - All rigths reserved