Académique Documents
Professionnel Documents
Culture Documents
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
InternetExplorer3.0
1995 1.0
NetscapeNavigator2.0
InternetExplorer4.0
1996 1.1
NetscapeNavigator3.0
InternetExplorer4.0
1997 1.2
NetscapeNavigator4.0
InternetExplorer6.0
1999 1.4
NetscapeNavigator6.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.
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.
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.
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 :
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.
<script language="javascript">
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.
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.
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 :
<script language="javascript">
//Ceci est un commentaire monoligne
</script>
<script language="javascript">
/* 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
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.
<script language="javascript">
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.
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 :
Aveccettemthode,vousvousconstituerezfacilementetrapidementunevraiebibliothquedescripts.
Attentionnepasconfondrebibliothquepersonnelledescriptsetbibliothquescommunes,nombreusessur
lenet,etquienrichissentlefonctionnementclassiquedeJavaScript.Linstallationdenouvellesbibliothques
JavaScriptseravoqueauchapitreAmliorerlinteractivitavecJavaScriptetCSS.
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.
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
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.
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 :
<script language="javascript">
window.print();
</script>
Lobjet window tant le plus lev dans la hirarchie, il nest pas ncessaire de le nommer chaque
manipulation.Lescriptpeutalorsscrireencoreplussimplement.Parlasuiteetparsoucidesimplification,
nousneferonsplusrfrencelobjetwindow.
Autreexemple,vousdsirezafficherdanslapagelaproprittitledelobjetdocument(quipermetdobtenirletitre
delapage),ilestpossibledelefaireparlescriptsuivant :
<script language="javascript">
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.
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.
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>
<script language="javascript">
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>
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.
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.
<script language="javascript">
alert("Ceci est une bote de dialogue affiche par JavaScript");
</script>
Sivoussouhaitezafficherunmessagesurdeuxlignes,vousdevezajouter\nlafindelachanedecaractresdela
premireligne.
<script language="javascript">
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().
<script language="javascript">
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.
<script language="javascript">
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 :
Exemple : afficher deux botes de dialogue afin de saisir le nom et le prnom du visiteur puis en ouvrir une troisime
affichantlenomcomplet.
<script language="javascript">
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.
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 :
Unevariabletextepeuttrevide,danscecasoncritdeuxapostrophesouguillemetssuccessifssansrien
lintrieur.
3.Constantesboolennes
Ellesnepeuventcorrespondrequdeuxvaleurs,trueoufalse,critessansguillemetsniapostrophesettablies,le
plusgnralement,enfonctionduntestdansdesstructuresdecontrle,quenousdtailleronsauchapitreContrler
lesscriptsaveclesstructuresdecontrles.
Exemple :
Reponse = truepermetlaffectationdelavaleurboolennetruelaconstanteReponse.
Exemplegnralsurlesconstantes :dclareruncertainnombredeconstantesenfonctiondutypeetdelasyntaxe,puis
afficherlesrsultatsdanslapageparlamthodedocument.write().
<script language="javascript">
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 texte2 :
"+constante_texte2+"<BR>");
document.write ("Voici ma constante texte3 :
"+constante_texte3+"<BR>");
document.write ("Voici ma constante texte4 :
"+constante_texte4+"<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
<script language="javascript">
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.
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.
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.
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 ;
4.Affichagedesvariables
Laffichagedesvariablesseffectue,gnralement,parlintermdiairedesmthodesalert()ouconfirm(),dtaillesau
chapitreInitiationlaProgrammationOrienteObjetetJavaScript.
Exemple1 :afficherdansunebotededialoguelersultatduneadditiondedeuxvariables :
<script language="javascript">
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.
<script language="javascript">
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.
<script language="javascript">
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().
<script language="javascript">
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.
<script language="javascript">
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.
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.
case if synchronized
const in throws
do native var
extends protected
false public
finally return
1.Arithmtiques
Les oprateurs arithmtiques permettent de raliser des calculs lmentaires entre des variables de types
numriques.Lessymboles+,,*et/permettentdeffectuerlesoprationslmentairesdaddition,desoustraction,
demultiplicationetdedivision.Voiciuntableauquilistelesoprateursarithmtiques :
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.
<script language="javascript">
var mavariable=5;
var modulo = mavariable%3;
alert("Le resultat de modulo est : " + modulo);
</script>
Aprsavoiraffectecinqlavariable,celleciestrutilisedanslecalculduneautrevariableappelemodulo.Enfin,
lersultatestaffichdansunebotededialogueparlamthodealert().
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
Strictement diffrentet/oude
!== "1 " !==1 True
diffrent typediffrentde
celuisitudroite
deloprateur.
Exemple :afficherlavaleurcorrespondantlarponsetrueoufalsedeJavaScriptaprsexcutionduntestdecomparaison.
<script language="javascript">
var reponse=5>12;
alert("Le rsultat du test est : " + reponse);
</script>
Lescriptselimiteuntest5>12dontlarponseestrenvoyedansunvariablenommereponse,dontlecontenu
seraaffichpourconnatrelersultatdutest.Lersultatdecetestestexprimdefaonboolenne(cestdiretrue
oufalse).
Ilestpossibledutiliserlemmescriptenmodifiantloprateurdecomparaisonpourapprhenderleurmode
defonctionnementetvisualiserlersultatrenvoy.
Parexempleavecloprateur !=(diffrent),lersultatesttrue.
<script language="javascript">
var reponse=5 !=12;
alert("Le rsultat du test est : " + reponse);
</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
Exemple 1:afficherlersultatdundoubletest(5<12et5<3)olesdeuxconditionsdoiventtrerespectes :
<script language="javascript">
var reponse=5<12 && 5<3;
alert("Le rsultat du test est : " + reponse);
</script>
Letestutiliseloprateurlogique&&pourtesterlesdeuxconditionssimultanmentetlarponsedetypeboolenest
ensuiteaffiche(icifalsevidemment).
Exemple2 :afficherlemmetestquecidessusmaisenautorisantlerespectdeseulementluneoulautredesconditions.
<script language="javascript">
var reponse=5<12 || 5<3;
alert("Le rsultat du test est : " + reponse);
</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.
<script language="javascript">
mavariable=10;
alert("voici le contenu de ma variable : "+mavariable);
mavariable=mavariable+10;
alert("voici le contenu de ma variable : "+mavariable);
mavariable+=10;
alert("voici le contenu de ma variable : "+mavariable);
</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 :
<script language="javascript">
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
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.
<script language="javascript">
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.
Laffectationdetroisvariablesdetypediffrent,dbutelescript.Ensuite,loprateurtypeOfpermetdafficherletype
devariabledansunebotededialogue.
7.Ordredesoprateurs
Danslecasoplusieursoprateurssontutilissdansuneexpression,ilsnesontpasforcmenttraitsdanslesens
traditionneldelecturegauchedroite.Lesensdetraitementdpenddunordredfinidanslecore(c ur)deJavaScript
etquicorrespondautableaucidessous:
Pluslerangestlev,pluslaprioritestimportante.
Rang12 + Addition/soustraction
Rang7 ^ OUexclusif
Rang6 | OUinclusif
Rang4 || OUlogique
Rang3 ?: Conditionnelternaire
Rang1 , Sparateur
Exemple :afficherdansunebotededialoguelecontenudeladditionde1etde2multiplipar3.
<script language="javascript">
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
<script language="javascript">
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.
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 ;
Ligne 2 dinstruction ;
}
else
{
Ligne 1 dinstruction ;
Ligne 2 dinstruction ;
}
Exemple :afficherunebotededialogueettesterlerponsepourcontinuerounonledroulementduscript.
<script language="javascript">
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
Ilestgalementpossibledutiliserloprateurternairepoureffectuerletest.Lescriptdevientalors :
<script language="javascript">
suite=confirm("Voulez-vous poursuivre ? ");
(suite==true)? alert("Jen suis heureux ") : alert("Cest dommage");
</script>
Mmesilersultatduscriptestquivalentauprcdentenutilisantcetoprateur,ilfautconvenirqueledcryptage
estplusdlicat.
Sivousdsirezeffectuerplusieurstestssurunevariable,ilestpossibledimbriquerles" if ".
Exemple :afficherdeuxbotesdedialoguessuccessivementettesterleursrponsespourcontinuerounonledroulement
duscript,enutilisantdesifimbriqus.
<script language="javascript">
avis=confirm("Aimez-vous le JavaScript ? ");
suite=confirm("Voulez-vous poursuivre ? ");
if (avis==true) {
if (suite==true) {
alert("Jen suis heureux ");
}
else {
alert("Cest dommage");
}
}
else {
alert("Cest dommage");
}
</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 !=.
<script language="javascript">
avis=confirm("Aimez-vous le JavaScript ? ");
suite=confirm("Voulez-vous poursuivre ? ");
if (suite==true && avis==true) {
alert("Jen suis heureux ");
}
else {
alert("Cest dommage");
}
</script>
Lemmescript,enutilisantloprateurou || quipermetdenevrifierquuneseuledesconditions.
<script language="javascript">
avis=confirm("Aimez-vous le JavaScript ? ");
suite=confirm("Voulez-vous poursuivre ? ");
if (suite==true || avis==true) {
alert("Jen suis heureux mais cela reste confirmer");
}
else {
alert("Cest dommage");
}
UneautrevarianteutilisantloprateurlogiqueNon != , expliquauchapitreUtilisationdesconstantes,variables
etoprateurs.
<script language="javascript">
avis=confirm("Aimez-vous le JavaScript ? ");
suite=confirm("Voulez-vous poursuivre ? ");
if (suite!=false && avis!=false) {
alert("Jen suis heureux ");
}
else {
alert("Cest dommage");
}
</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 :
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.
<script language="javascript">
</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
Lasyntaxedelastructuredecontrleaveclinstructionelseifestlasuivante :
if (test) {
Ligne 1 dinstruction ;
Ligne 2 dinstruction ;
}
else if (test) {
Ligne 1 dinstruction ;
Ligne 2 dinstruction ;}
}
else
{
Ligne 1 dinstruction ;
Ligne 2 dinstruction ;
}
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.
<script language="javascript">
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
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 :
<script language="javascript">
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.
<script language="javascript">
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("Pas tout--fait, r-essayez");
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.
1.for
Elle ncessite lutilisation dune valeur initiale de compteur, dun test et dun facteur de progression. La valeur
atteindreducompteurdoittreconnue.Lasyntaxedecetteinstructionderptitionestlasuivante :
Exemple :afficherdixfoisdanslapagelersultatdunebouclecomportantunevariablepostincrmente.
<script language="javascript">
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 :
<script language="javascript">
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.
<script language="javascript">
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.
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.
<script language="javascript">
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 :
<script language="javascript">
for (j=0;j<5;j++) {
Ici,lescriptaffichelemessagedaffichagedelavariablejquisincrmentechaquepassagedelaboucle.Lorsquela
variablejestgale3,linstructioncontinuesautelinstructiondaffichagedelabotededialogue.Ducoup,lavaleur
3nestpasaffiche,maislescriptcontinuesondroulementetaffichelesvaleursrestantes.
1.Lastructuretrycatch
Cettestructurepermetdexcuterlesinstructionsplacesentrelesaccoladesetcorrespondantsaumotcltry(cest
leblocdessai).Danslecasouneerreurestdtecteparlenavigateur,lesinstructionssituesentrelesaccolades
correspondantaumotclcatch()sontexcutes.Lasyntaxedecettestructureestlasuivante :
try {
Instructions ;
}
catch(identificateur){
Instructions ;
}
Exemple :afficherunmessageindiquantlimpossibilitdeffectuerdunedivisionpourlaquelleaucunevariablecorrespondant
audiviseurnestdclare.
<script language="javascript">
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 :
<script language="javascript">
dividende=10;
try {
resultat=dividende/diviseur;
}
catch(diviseur){
alert("Division Impossible");
}
finally{
diviseur=2;
resultat=dividende/diviseur;
alert("Le rsultat de la division est : "+resultat);
}
</script>
Danscescript,lerreurestbiendtecteetlaffichagedumessageesteffectuparlebloccorrespondantcatch.Mais
leblocdinstructionsfinallypermetdaffecterlavaleur2lavariablediviseur,cequipermettoutdemmedexcuter
lescript.
Ilestpossibledimbriquerlestryafindepermettredestentativesavecdesvaleursdiffrentesetainsidetesterun
scriptsoustoutessesformes.
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 :
<script language="javascript">
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.
Attention,lesrglesdenommagedesfonctionssuiventlesmmesrglesquecellesdesvariables,savoir :
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>
<script language="javascript">
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.
<script language="javascript">
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
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>
<script language="javascript">
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.
<script language="javascript">
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
<script language="javascript">
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).
<script language="javascript">
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.
<script language="javascript">
}
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).
Vouspouvezensuiterutiliserlobjetlaidedesmotsclsvaretnew :
Exemple : afficher, dans une bote de dialogue, les informations dun objet personnel appel voiture et caractris par une
marque,unmodleetuneanne.
<script language="javascript">
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.
vnement= "actionaraliser" ;
Il suffit, donc, de nommer lvnement (voir la liste cidessous), de le faire suivre du signe gal = et de rdiger
lactionquidoitluicorrespondre.
Auredimensionnementdela
window OnResize
fentre.
Audfilementdelafentrepar
window OnScroll
lascenseur.
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
Aumomentdumaintienenfonc
document,image,link,textArea Keydown
dunetoucheduclavier.
Aumomentdelapressionsurune
document,image,link,textArea Keypress
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 :
<script language="javascript">
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 :
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>
<script language="javascript">
function MaFonction()
{
alert("Ceci est ma premire fonction")
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="" >
Ilestpossible,galement,dutiliserlesvnementspourpasserdesargumentsauxfonctions.
Exemple :passerlavaleuraffecteunboutoncommeargumentunefonction,permettantdaffichersonnom.
<html>
<head>
<title>Affiche le nom du bouton</title>
<script language="javascript">
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.
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.
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.
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 :
JavaScriptpermetdeffectuerdescontrlessurcesobjets :
1.Manipulationdechamptext
Proprits Description
value Correspondauxinformationssaisiesdanslechamp.
defaultValue Correspondlavaleursaffichantpardfautdansle
champtexte.
Mthodes Description
select() Afficheenvidoinverselechamptexteosetrouve
lecurseur.
focus() Positionnelecurseursurlechamptexte.
Exemple1 :effacerlecontenudunchamptexteetenslectionnerunautre,encliquantdansuntroisimechamp.
<html>
<head>
<title>manipulation_champs_texte</title>
<script language="javascript">
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>
<script language="javascript">
function controlevide()
{
if(form1.nom.value ==) {
alert("ce champ est vide");
}
else {
alert("ce champ nest pas vide");
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="" action="" >
<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.
Proprits Description
defaultValue Correspondlavaleursaffichantpardfautdansle
champtextarea.
Exemple :concatnerlecontenudetroischampstextdansunchamptextarea.
<html>
<head>
<title>manipulation_champs_textearea</title>
<script language="javascript">
function manipchamptextearea()
{
form1.Total_champ.value=form1.champ1.value+form1.champ2.value
+\n+form1.champ3.value;
}
</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"></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>
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.
Proprits Description
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>
<script language="javascript">
function controlecaseacocher()
{
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>
<script language="javascript">
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>
<form id="form1" name="form1" method="" action="" >
<p> </p>
<table width="617" border="0">
<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>
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.
Propritsessentielles Description
length Correspondaunombredevaleursdanslaliste.
Correspondunevaleurdanslaliste,identifiepar
selectedIndex
sonnumrodanslindex.Lindexcommencezro.
defaultSelected Valeurpardfautslectionnedanslaliste.
<html>
<head>
<title>Controle_liste</title>
<script language="javascript">
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>
<form id="form1" name="form1" method="" action="" >
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.
Propritsessentielles Description
length Correspondaunombredevaleursdanslaliste.
Correspondunevaleurdanslalisteidentifiepar
selectedIndex
sonnumrodanslindex.Lindexcommencezro.
defaultSelected Valeurpardfautslectionnedanslaliste.
Exemple :afficherdansdesbotesdedialoguesuccessives,lesvaleursslectionnesdansunelisteslectionmultiple.
<html>
<head>
<title>manipulation_liste_multiple</title>
<script language="javascript">
function maniplistemultiple()
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.
Leformulairecomporte,enplusdeslmentsdjdtaills,quatreboutonsauxfonctionsdistinctes.
LeboutonTransmettreeffectuelatransmissiondesinformationsparemail.
Codedubouton :
CeboutondetypeSubmitdclenchelenvoiduformulaire.
Codeduformulaire :
LeboutonRinitialiserpermetdeffacerlecontenudetouslescontrlesduformulaire.
LeboutonImprimerpermetlimpressionduformulaire.
function Imprim() {
window.print();}
LeboutonValiderpermettraledclenchementdesdiffrentstraitementsinclusdanslafonctionJavaScriptdecontrle.
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":
Formulaire_reservation.Prix_unitaire_P1.value=50;
break;
case "Short":
Formulaire_reservation.Prix_unitaire_P1.value=25;
break;
case "Tee-shirt":
Formulaire_reservation.Prix_unitaire_P1.value=15;
}
switch (article2)
{
case "Jupe":
Formulaire_reservation.Prix_unitaire_P2.value=35;
break;
case "Pantalon":
Formulaire_reservation.Prix_unitaire_P2.value=50;
break;
case "Short":
Formulaire_reservation.Prix_unitaire_P2.value=25;
break;
case "Tee-shirt":
Formulaire_reservation.Prix_unitaire_P2.value=15;
}
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;
Pour valider les masques de saisie, il est galement possible dutiliser lobjet RegExp dans une expression
rgulirequiseragalementtraiteauchapitreLesprincipauxobjetsJavaScriptendtail.
Leformulaireestundesobjetsimportantdelacompositiondunepage,cependantilyenadautresenJavaScriptquil
convientdebiendcrire.
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.
<script language="JavaScript">
agent=navigator.userAgent;
alert(agent);
</script>
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.
<script language="JavaScript">
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.
Exemple :afficherletypedenavigateuretsaversionpourpermettredorienterlescriptultrieurement.
<html>
<head>
<title>Verification du navigateur</title>
<script language="JavaScript">
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>
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
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.
Correspondlabarredadresse
locationbar Mozilla,Firefox,Opra.
dunavigateur.
menubar Correspondlabarredemenudu
Mozilla,Firefox,Opra.
navigateur.
Correspondaunomdelafentre
opener InternetExplorer,Mozilla,Firefox,
quiacrunefentreaumoyen
Opra.
delamthodeOpen().
outerWidth Correspondlalargeur
Mozilla,Firefox,Opra.
extrieuredelapageenpixels.
Correspondlaposition
pageXoffset horizontaleenpixelsdela Mozilla,Firefox,Opra.
fentre.
Correspondlapositionverticale
pageYoffset Mozilla,Firefox,Opra.
enpixelsdelafentre.
Correspondlapagecomprenant
parent InternetExplorer,Mozilla,Firefox,
lensembledescadresdunepage
Opra.
decadres.
personalbar Correspondlabarredoutils
Mozilla,Firefox,Opra.
personnelle.
scrollbars Correspondauxbarresde
Mozilla,Firefox,Opra.
dfilementhorizontaletvertical.
Correspondlafentrecourante InternetExplorer,Mozilla,Firefox,
self
(window). Opra.
Correspondaumessagealatoire
quipeuttreaffichlorsdun
InternetExplorer,Mozilla,Firefox,
status vnementdanslabarrede
Opra.
statutssitueendessousdela
fentre.
Correspondlabarredoutilsdu
toolbar Mozilla,Firefox,Opra.
navigateur.
Correspondlafentreduplus
InternetExplorer,Mozilla,Firefox,
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 :
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.
find() Effectueunerecherchedetexte
Mozilla,Firefox,Opra.
danslapageactive.
focus() InternetExplorer,Mozilla,Firefox,
Activeunefentre.
Opra.
forward() Avancedunepageenavantdans
Mozilla,Firefox,Opra.
lhistoriquedespagesvisites.
Chargelapagedfiniecomme
home() Mozilla,Firefox,Opra.
pagedaccueildanslenavigateur.
InternetExplorer,Mozilla,Firefox,
moveTo() Dplacelafentreactive.
Opra.
InternetExplorer,Mozilla,Firefox,
open() Ouvreunenouvellefentre.
Opra.
InternetExplorer,Mozilla,Firefox,
print() Imprimelapageactive.
Opra.
Afficheunebotededialogue
InternetExplorer,Mozilla,Firefox,
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.
InternetExplorer,Mozilla,Firefox,
setTimeOut() Dclencheuneminuterie.
Opra.
Dcalelecontenudunefentre
scrollBy() InternetExplorer,Mozilla,Firefox,
enfonctiondunequantit
Opra.
exprimeenpixels.
Dcalelecontenudunefentre
InternetExplorer,Mozilla,Firefox,
scrollTo() endterminantlanouvelleorigine
Opra.
ducoinsuprieurgauche.
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
Lasyntaxedelamthodeopen()estlasuivante :
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.
alwaysLowered Creunenouvellefentresous
Mozilla,Firefox,Opra..
lesautres.
alwaysRaised Creunenouvellefentrepar
Mozilla,Firefox,Opra.
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
InternetExplorer,Mozilla,Firefox,
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).
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
Mozilla,Firefox,Opra.
ordonnedelanouvellefentre.
scrollbars InternetExplorer,Mozilla,Firefox,
Affichelesbarresdedfilement.
Opra.
Afficheoumasquelabarrede
InternetExplorer,Mozilla,Firefox,
status statutssitueaubasdela
Opra.
fentre.
Afficheoumasquelabarre
InternetExplorer,Mozilla,Firefox,
toolbar dicnessitueaudessousdela
Opra.
barredemenus.
Dfinitenpixelslalargeurdela InternetExplorer,Mozilla,Firefox,
width
fentre. Opra.
Exemple :afficheretmasquerunenouvellefentrepartirduneautre.
<html>
<head>
<title>Objet Window</title>
<script language="javascript">
fenetre=window.open("","Nouvelle","height=100,width=300,menubar=yes,
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:
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>
<script language="JavaScript">
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>
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>
<script language="JavaScript">
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>
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>
<script language="JavaScript">
function redirection() {
alert(navigator.appName);
if (navigator.appName=="Netscape") {
<html>
<head>
<title>Trouver un mot dans une page</title>
<script language="javascript">
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>
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
Correspondlacouleur InternetExplorer,Mozilla,Firefox,
alinkColor
daffichagedesliensactivs. Opra.
Correspondaunomdutableau
InternetExplorer,Mozilla,Firefox,
anchor contenanttouteslesancresdu
Opra.
document.
Correspondaunomdutableau
InternetExplorer,Mozilla,Firefox,
applets contenanttouteslesapplets
Opra.
Java.
Correspondlacouleurdefond InternetExplorer,Mozilla,Firefox,
bgColor
dudocument. Opra.
Correspondaustyledelobjet
contextual InternetExplorer,Mozilla,Firefox,
dsignetcontenudansle
Opra.
document.
Correspondunechanede
InternetExplorer,Mozilla,Firefox,
cookie caractresplaceparle
Opra.
navigateursurleposteclient.
Correspondaunomdutableau
embeds InternetExplorer,Mozilla,Firefox,
contenanttouslesobjets
Opra.
incorpors.
Correspondlacouleurutilise
fgColor InternetExplorer,Mozilla,Firefox,
pourcriredansledocument
Opra.
HTML.
Correspondaunomdutableau
forms contenanttouslesformulairesdu Mozilla,Firefox,Opra.
document.
Correspondaunomdutableau
images contenanttouteslesimagesdu Mozilla,Firefox,Opra.
document.
Correspondladatededernire InternetExplorer,Mozilla,Firefox,
lastModified
modificationdudocument. Opra.
Correspondaunomdutableau
InternetExplorer,Mozilla,Firefox,
layers contenanttouteslesentrespour
Opra.
leslayersdudocument.
Correspondaunomdutableau
links contenanttouslesappelsdeliens Mozilla,Firefox,Opra.
dudocument.
Correspondaunomdutableau
plugins contenanttouteslesrfrences Mozilla,Firefox,Opra.
etappeldeplugins.
CorrespondlURLdelapage
referrer InternetExplorer,Mozilla,Firefox,
ayantpermislechargementdela
Opra.
pageactive.
Correspondunechanede
InternetExplorer,Mozilla,Firefox,
title caractresreprsentantletitre
Opra.
delapageHTML
Correspondunechanede
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.
InternetExplorer,Mozilla,Firefox,
close() Refermeledocumentactif.
Opra.
Activelegestionnairede InternetExplorer,Mozilla,Firefox,
handleEvent()
lvnementspcifi. Opra.
Activeetchargelapagede
home() InternetExplorer
dmarrage
InternetExplorer,Mozilla,Firefox,
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
InternetExplorer,Mozilla,Firefox,
writeln() caractrenewline(\n),cequi
Opra.
permetunretourlaligne.
Exemple :afficherladatedederniremodificationdunepageHTMLauchargementdelapage.
<html>
<head>
<title>Derniere version</title>
<script language="javascript">
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.
Correspondlarsolutionde
pixelDepth lcranennombredecouleurs, Mozilla,Firefox,Opra.
exprimesenbitsparpixel.
Exemple : afficher une bote de dialogue dans laquelle apparat la rsolution utilise en pixels ainsi que la profondeur de
couleurs(8,16ou32bits).
<script language="javascript">
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
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.
Permetdaccderunseul
chartAt() InternetExplorer,Mozilla,Firefox,
caractredansunechane
Opra.
complte.
Convertitunechanede
eval() InternetExplorer,Mozilla,Firefox,
caractresencodedeprogramme
Opra.
JavaScript.
Modifielacouleurdelapolicede InternetExplorer,Mozilla,Firefox,
fontcolor()
caractresdunechane. Opra.
Modifielapolicedecaractres InternetExplorer,Mozilla,Firefox,
fontsize()
dunechane. Opra.
Renvoieunechanedecaractres
fromCharCode() constituepartirde InternetExplorer,Mozilla,Firefox,
reprsentationsisolesdune Opra.
suitedecaractresUnicode.
Renvoielaposition,partirdela
indexof() gauche,duncaractrepassen InternetExplorer,Mozilla,Firefox,
argumentdansunechanede Opra.
caractres.
Renvoielaposition,partirdela
droite,duncaractrepassen InternetExplorer,Mozilla,Firefox,
lastIndexof()
argumentdansunechanede Opra.
caractres.
Rechercheuneexpression
InternetExplorer,Mozilla,Firefox,
match() rguliredansunechanede
Opra.
caractres.
Remplaceuneexpression
InternetExplorer,Mozilla,Firefox,
replace() rguliredansunechanede
Opra.
caractres.
Effectueunerecherchedansune InternetExplorer,Mozilla,Firefox,
search()
chanedecaractres. Opra.
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.
Afficheunechanedecaractres InternetExplorer,Mozilla,Firefox,
sub()
enindice. Opra.
Renvoieunesouschanede
caractres,enfonctiondune InternetExplorer,Mozilla,Firefox,
substr()
positionetdunelongueur Opra.
passesenargument.
Afficheunechanedecaractres InternetExplorer,Mozilla,Firefox,
sup()
enexposant. Opra.
Convertitenminusculesune InternetExplorer,Mozilla,Firefox,
toLowerCase()
chanedecaractres. Opra.
Tentedeconvertirunobjeten InternetExplorer,Mozilla,Firefox,
toString()
chanedecaractres. Opra.
Convertitenmajusculesune InternetExplorer,Mozilla,Firefox,
toUpperCase()
chanedecaractres. Opra.
Exemple : afficher dans une page une chane de caractres selon diffrents modes daffichage (gras, italique, clignotant,
rouge,caractresbarrsetde7taillesdiffrentes) :
<script language="javascript">
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>
<script language="javascript">
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>
<form name="form1" method="post" action="">
<p> </p>
<table width="400" border="0">
<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"
size="20" maxlength="20"></td>
<td><input type="button" name="Submit2" value="Minuscules"
onClick="convertirmin()"></td>
</tr>
<tr>
<td><input name="conversion" type="text" id="conversion"
size="20" maxlength="20"></td>
<td><input type="button" name="Submit3" value="1ere Lettre"
onClick="convert()"></td>
</tr>
</table>
</form>
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 :
<script language="javascript">
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.
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>
<script language="javascript">
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>
<script language="javascript">
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>
<form name="form1" method="post" action="">
<p> </p>
<table width="400" border="0">
<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
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.
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>
<script language="javascript">
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>
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>
<script language="javascript">
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) {
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,
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.
Fixelavaleurentre InternetExplorer,
setUTCMinutes() 0et59desminutes Mozilla,Firefox,
selonUTC. Opra.
Fixelavaleurentre InternetExplorer,
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.
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 :
SetIntervalestparfoismalreconnu,notammentparlesnavigateursdontlaversionestunpeuancienne.Il
estprfrabledutiliserSetTimeout()lorsquevousenavezlechoix.
LasyntaxedeclearInterval()estlasuivante :
clearInterval(nom de la minuterie) ;
LasyntaxedesetTimeout()estlesuivante :
LasyntaxedeclearTimeout()estlasuivante :
clearTimeout(nom de la minuterie) ;
Exemple :crerunehorlogesimpleaffichantlesheures,lesminutesetlessecondesdansunchampdeformulaire:
<html>
<head>
<head>
<title>Horloge</title>
<script language="JavaScript">
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>
<script language="javascript">
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()">
<form name="form1" method="post" action="">
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"
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>
<script language="javascript">
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()">
<form name="form1" method="post" action="">
<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>
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 :
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 :
AttentionnepasoublierlesparenthsesouvrantesetfermantesaprsArray.
Puis,vousaffectezlesvaleursdansletableauparlinstructionsuivante :
Toutcommeaveclesvariables,ilestpossiblederaliserladclarationetlaffectationsimultanment.Donc,lasyntaxe
suivanteestaussivalide:
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.
<script language="javascript">
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"] ;
Le script utilise un compteur et une boucle pour afficher le contenu dun tableau dont vous connaissez le nombre
dlments.
Danslecasovousneconnaissezpaslenombredlmentsduntableau,ilestpossibledutiliserlapropritlength,
correspondantaunombredevaleursdutableau.Lescriptdevientalors :
<script language="javascript">
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"] ;
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 :
<html>
<head>
<title>Tableaux associatifs</title>
<script language="javascript">
function reponse() {
var distance=new Array();
distance[0]="23 mtres";
distance[1]="109 mtres";
distance[2]="152 mtres";
vitesse=document.form1.vitesse.selectedIndex;
document.form1.distance.value=distance[vitesse];
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="400" border="0">
<tr>
<td>Vitesse</td>
<td><select name="vitesse" id="vitesse" onChange="reponse()">
<option value="50">50 Km/h</option>
<option value="110">110 Km/h</option>
<option value="130">130 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>
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).
<script language="javascript">
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"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.
Ajoutedeslmentsenfinde InternetExplorer,Mozilla,Firefox,
push()
tableau. Opra.
Retourneouajouteunepartie InternetExplorer,Mozilla,Firefox,
slice()
duntableau. Opra.
InternetExplorer,Mozilla,Firefox,
sort() Trieleslmentsduntableau.
Opra.
Ajoute,supprimeouremplaceles InternetExplorer,Mozilla,Firefox,
splice()
lmentsduntableau. Opra.
Convertituntableauenune InternetExplorer,Mozilla,Firefox,
toString()
chanedecaractres. Opra.
Ajouteunlmentaudbutdun InternetExplorer,Mozilla,Firefox,
unshift()
tableau. Opra.
Retourneunlmentprcisdun InternetExplorer,Mozilla,Firefox,
valueOf()
tableau. Opra.
Exemple :afficherdansundocumentHTML,lecontenuduntableaucomposdesjoursdelasemainesuivichacundela
chanedecaractres puis .
<script language="javascript">
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"] ;
tableau=semainier.join(" puis ");
document.write(tableau);
</script>
Lutilisationdelamthodejoin()permetdadjoindreunechanedecaractres(ici,lemotpuis),entreleslmentsdu
tableau.Mais,cetargumentestfacultatif.Lachanedecaractrescorrespond,alors,auxseulslmentsdutableau
sparspardesvirgulesetilestpossibledelatraitercommetouteautrechanedecaractres.
Exemple :afficherenrougeleslmentsduntableauaprslesavoirconvertienchanedecaractres.
<script language="javascript">
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"] ;
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.
<script language="javascript">
var debut,fin=new Array();
var debut=["lundi", "mardi", "mercredi"] ;
var fin=["jeudi", "vendredi", "samedi", "dimanche"];
var semainier=debut.concat(fin);
document.write(semainier);
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.
<script language="javascript">
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"];
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.
<script language="javascript">
var semainier=new Array();
var endroit=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"];
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.
<script language="javascript">
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "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.
<script language="javascript">
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"];
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).
<script language="javascript">
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"];
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.
<script language="javascript">
function compare(n,m) {
if(n>m) {
return -1;
}
else {
return 1;
}
}
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"];
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 :
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).
<script language="javascript">
var semainier=new Array();
var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"];
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.
<script language="javascript">
var semainier=new Array();
var semainier=["mardi", "mercredi", "jeudi", "vendredi",
"samedi", "dimanche"];
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>
<script language="javascript">
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;
for(i=0;i<nbelements;i++) {
document.form1.ville.options[i]=new Option(villeIDF[i],villeIDF[i]); }
}
else {
villeLorraine.sort();
nbelements=villeLorraine.length;
for(i=0;i<nbelements;i++) {
document.form1.ville.options[i]=new Option(villeLorraine[i],
villeLorraine[i]);
}
}
}
</script>
</head>
<body onLoad="listeville()">
<form id="form1" name="form1" method="post" action="">
<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
Laconstructiondecetypedetableauncessiteladclarationdesdeuxtableauximbriqus.Vousdclarezdabord,
un tableau de faon classique. Puis, vous ralisez laffectation des valeurs en fonction de leur position (colonne,
ligne)dansletableau.
Lasyntaxepeutsersumerainsipouruntableaude3ligneset3colonnes :
Exemple : afficher, dans une page HTML, les rflexions enregistres du mercredi et du vendredi, toutes ces rflexions
ayanttenregistrespralablement,pourchaquejourdelasemaine,dansuntableaudeuxdimensions.
<script language="javascript">
var semainier=new Array(5);
semainier[0]=new Array(2);
semainier[1]=new Array(2);
semainier[2]=new Array(2);
semainier[3]=new Array(2);
semainier[4]=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.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Tableau multidimensionnel</title>
<script language="javascript">
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>
Lafonctionaffiche()sexcuteaumomentduclicsurlebouton.Ilfauttenircomptedesvaleursslectionnesdans
lesdeuxlistesdroulantes,pouridentifierlescoordonnesdelavaleurafficher.Lesdeuxvariablesnommoiset
nomproduit sont, donc, affectes, ds le dbut du script, avec les valeurs des listes droulantes. Ensuite, il est
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
InternetExplorer,Mozilla,Firefox,
border figurantventuellementautourde
Opra.
limage.
Indiquesilimagecontenuedans
lapageestdfinitivement InternetExplorer,Mozilla,Firefox,
complete
charge.Renvoietruesicestle Opra.
cas.
Indiquelatailledelimageen
fileSize Mozilla,Firefox,Opra.
octets.
Correspondlespaceenpixels
hspace InternetExplorer,Mozilla,Firefox,
entreuneimageetleslments
Opra.
situsdroiteetgauche.
Correspondaustatutdaperu InternetExplorer,Mozilla,Firefox,
lowsrc
duneimage. Opra.
Correspondladressesource
(URL)dufichierdelimage.Cette
InternetExplorer,Mozilla,Firefox,
src propritmodifiablepermetde
Opra.
nombreuxeffets,basssurles
images.
Correspondautitredelimage.
Toutcommelapropritalt,elle
Correspondlespaceenpixels
vspace InternetExplorer,Mozilla,Firefox,
entreuneimageetleslments
Opra.
situsenhautetenbas.
Indiquelalargeurdelimageen InternetExplorer,Mozilla,Firefox,
width
pixels. Opra.
Exemple :Rolloveravecdeuximages :
<head>
<title>Objet Image -rollover</title>
<script language="javascript">
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>
<script language="javascript">
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
a.Laproprit
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>
<script language="javascript">
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
<html>
<head>
<title>Page2</title>
<script language="javascript">
function retour(){
window.history.back();
}
function avance() {
window.history.forward();
</script>
</head>
<body>
<div align="center">
<p><strong>PAGE 2 </strong></p>
<table width="100%" border="0">
<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>
<title>Page3</title>
<script language="javascript">
function compte(){
var nombre=window.history.length;
alert(nombre);
}
function reculer() {
<body>
<div align="center">
<p><strong>PAGE 3 </strong></p>
<p> </p>
<form name="form1" method="post" action="">
<table width="100%" border="0">
<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,
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.
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>
<script language="javascript">
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>
CetobjetcorrespondauxliensventuelsdfinisdansundocumentHTML.Ilestpossibledecompter,lire,modifierles
liensprsentsdanslapage.Cetobjetdisposedeneufproprits.
Lesproprits
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
Mozilla,Firefox,Opra.
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>
<script language="javascript">
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);
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 :
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].
Caractreoutil Fonction
Permetdegrouperdescaractresformantalorsun
()
sousmotif.
c.Lescaractresderptition
Cescaractrespermettentdetesterlenombredoccurrencesduncaractre.
Caractreoutil Fonction
Lecaractrepeutapparatreunnombreindfinide
*
fois.
+ Lecaractredoitapparatreaumoinsunefois.
? Lecaractredoitapparatrezroouunefois.
Lecaractredoitapparatrelenombredefois
{x}
quivalentx.
Lecaractredoitapparatreaumoinsxfoisetau
{x,z}
pluszfois.
x|z Lecaractrepeuttrexouz.
d.Lescaractresdepositionnement
Caractreoutil Fonction
Prciseledbutdelexpressiondanslachanede
^
caractres.
Prciselafindelexpressiondanslachanede
$
caractres.
\b Prciseledbutdemot.
\B Prciselafindemot.
(x) Trouvelachaneetretientsaposition.
X( ?=y) Trouvelachaneuniquementsixestsuividey.
X( ?!y) Trouvelachaneuniquementsixnestpassuividey.
e.Lecaractredechoix
Ilpermetdefaireunchoixdanslexpressionrgulireentreplusieurssousmotifs.
Caractreoutil Fonction
f.Lescaractresspciaux
Caractreoutil Fonction
. Correspondtoutcaractre.
\ Indiquequelecaractresuivantnestpasspcial.
\f Correspondunsautdepage.
\n Correspondunsautdeligne.
\r Correspondunretourchariot.
\t Correspondunetabulation.
g.Lesproprits
Indiquelindicepartirduquella
lastIndex recherchesuivantedoit Mozilla,Firefox,Opra.
seffectuer.
Indiquesilarecherchedoit
global sarrterlapremireoccurrence Mozilla,Firefox,Opra.
trouve.= g
Indiquesilacassedoittre
ignoreCase Mozilla,Firefox,Opra.
ignore.= i .
h.Lesmthodes
Trouvedeslmentsplacsentre
split() dessparateursdunechanede Mozilla,Firefox,Opra.
caractres.
Renvoieunedclarationdobjet
toSource() Mozilla,Firefox,Opra.
reprsentantlobjetspcifi.
Renvoieunechanedecaractres
toString() Mozilla,Firefox,Opra.
correspondantlobjetconcern.
"[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.
<script language="javascript">
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).
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}
<script language="javascript">
var telephone=new RegExp("[0]{1}[1-4]{1}[.][0-9]{2}[.][0-9]{2}[.][0-
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 :
<script language="javascript">
var telephone=new RegExp("[0]{1}[1-4]{1}[.][0-9]{2}[.][0-9]{2}[.][0-
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>
l.Utilisationdelamthodesearch()
Lamthodesearch()sappliqueauxexpressionsrgulires,commeellesappliqueauxvariablestextes.
Exemple :contrlerlaprsencedunearobasedansunchampdeformulaireetafficherunmessagedavertissementoude
conformitenfonctiondursultat.
<html>
<head>
<title>Objet RegExp - Mthode search</title>
<script language="javascript">
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>
<form name="form1" method="post" action="">
<p> </p>
<table width="400" border="0">
<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.
chaneinspecter.replace(chaneremplacer,chanederemplacement) ;
<script language="javascript">
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.
InternetExplorer,Mozilla,Firefox,
LOG2E Renvoielelogarithmede2.
Opra.
InternetExplorer,Mozilla,Firefox,
LOG10E Renvoielelogarithmede10.
Opra.
RenvoielavaleurdePisoit InternetExplorer,Mozilla,Firefox,
PI
approximativement3.14159. Opra.
Exemple :afficherlersultatducalculdunecirconfrenceduncerclepartirdesondiamtre.
b.Lesmthodes
Calculelangledontlargument InternetExplorer,Mozilla,Firefox,
atan()
reprsentelatangente. Opra.
Renvoieunnombre
InternetExplorer,Mozilla,Firefox,
ceil() correspondantlentiersuprieur
Opra.
dunevaleurpasseenargument.
Renvoieunnombre
InternetExplorer,Mozilla,Firefox,
floor() correspondantlentierinfrieur
Opra.
dunevaleurpasseenargument.
Renvoielenombreleplusgrand
InternetExplorer,Mozilla,Firefox,
max() danslasrie,passeen
Opra.
arguments.
Renvoielenombrelepluspetit
min() InternetExplorer,Mozilla,Firefox,
danslasrie,passeen
Opra.
arguments.
Calculelersultatdunnombre
InternetExplorer,Mozilla,Firefox,
pow() levunepuissance,passeen
Opra.
argument.
Exemple :creruneapplicationenJavaScriptpermettantdeffectuerdestiragesdelaloterienationale(cestdireavec6
chiffresdistinctsde149etunnumrocomplmentaire).Attention,unnumronepeutapparatrequuneseulefois.
<html>
<head>
<title>Objets Array et Math</title>
<script language="JavaScript">
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>
<form name="form1" method="post" action="">
<table width="64%" border="1" align="center">
<tr>
<td><div align="center">Boule 1 </div></td>
<td><div align="center">Boule 2 </div></td>
<td><div align="center">Boule 3 </div></td>
<td><div align="center">Boule 4 </div></td>
<td><div align="center">Boule 5 </div></td>
<td><div align="center">Boule 6 </div></td>
</tr>
<tr>
<td><div align="center">
<input name="boule1" type="text" id="1" size="5"
maxlength="5">
</div></td>
<td><div align="center">
<input name="boule2" type="text" id="2" size="5"
maxlength="5">
</div></td>
<td><div align="center">
<input name="boule3" type="text" id="3" size="5"
maxlength="5">
</div></td>
<td><div align="center">
<input name="boule4" type="text" id="4" size="5"
maxlength="5">
</div></td>
<td><div align="center">
<input name="boule5" type="text" id="5" size="5"
maxlength="5">
</div></td>
<td><div align="center">
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
a.Laproprit
Enfait,lobjetframeesttrsprochedelobjetWindowettouteslespropritsetmthodesdontnousavonsdj
parlespourcedernier,sappliquentgalementlobjetframe.Avecframe,ilestpossibledaccderunefentre
particuliredujeudecadresetdeuxmthodessontalorspossibles.
Lapremireconsisteutiliserlesnumrosdindicedechaquelmentdujeudecadres.Ainsilepremierindice(le
zrocommetoujours)correspondaucadredfinilepremier,leuncorrespondausecond
Lasecondemthode(etsansdoutelameilleure)consisteidentifierlescadresparlenom,quileuratattribu
aveclattributname.
Soitlejeudecadressuivant :
LecodeHTMLcorrespondantest :
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.
<script language="javascript">
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.
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>
<script language="javascript">
function souris(event){
var posX = event.clientX;
var posY = event.clientY;
window.status="Coordonnes de la souris : x="+posX+"y="+posY;
}
Lescriptsexcutelorsdunmouvementdelasouris.Lobjetevent,associauxmthodesclientXetclientY,permet
dedterminerlesvariablesposXetposYpuisdecomplterlabarredestatut.
AttentioncescriptnefonctionnequesousInternetExplorer.
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
4.Applicationdescookies
Ltape fondamentale consiste crer un cookie sur le poste du visiteur. Cette cration ncessite la prsence dun
certainnombredinformationsobligatoires.
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.
<script language="javascript">
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.
Toutdabord,ilestncessairedecreretdaffecterlesvariablesnameetvalueparunevaleurdetypetexte.
Ensuite,ilsuffitdutiliserlamthodecookie()delobjetdocumentetderenseignerlesparamtresdecration.
Leformatdeladatedexpirationest,ici,exprimenGMT.
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.
Commeindiquprcdemment,cesinformationsfacultativespeuventsajouterfacilementauxmentionsobligatoires,
enlessparantparunpointvirgule.Donc,lasyntaxecompltedecrationduncookie(scuris)estlasuivante :
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 :
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 :
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>
<script type="text/javascript" language="JavaScript">
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
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.
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.
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.
<script language="javascript">
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.
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.
<script language="javascript">
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.
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 :
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 :
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">
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.
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.
Correspondlespaceintrieurentrellmentetla
paddingbottom
bordureinfrieure.
Correspondlespaceintrieurentrellmentetla
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.
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.
1.Appliquerlesfeuillesdestylegrceauxvnements
Le JavaScript permet de contrler lapplication des rgles CSS dfinies. Il suffit dajouter un comportement pour
excuterunefonctionappliquantlestyleCSSdsir.
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.
</head>
<body>
<table width="50%" border="1">
<tr>
<td class="Aucun style CSS" onMouseOver="allumecellule(this)"
onMouseOut="eteincellule(this)"><div align="center">A</div></td>
<td class="Aucun style CSS" onMouseOver="allumecellule(this)"
onMouseOut="eteincellule(this)"><div align="center">B</div></td>
<td class="Aucun style CSS" onMouseOver="allumecellule(this)"
onMouseOut="eteincellule(this)"><div align="center">C</div></td>
</tr>
<tr>
<td class="Aucun style CSS" onMouseOver="allumecellule(this)"
onMouseOut="eteincellule(this)"><div align="center">1</div></td>
<td class="Aucun style CSS" onMouseOver="allumecellule(this)"
onMouseOut="eteincellule(this)"><div align="center">2</div></td>
<td class="Aucun style CSS" onMouseOver="allumecellule(this)"
onMouseOut="eteincellule(this)"><div align="center">3</div></td>
</tr>
<tr>
<td class="Aucun style CSS" onMouseOver="allumecellule(this)"
onMouseOut="eteincellule(this)"><div align="center">4</div></td>
<td class="Aucun style CSS" onMouseOver="allumecellule(this)"
onMouseOut="eteincellule(this)"><div align="center">5</div></td>
<td class="Aucun style CSS" onMouseOver="allumecellule(this)"
onMouseOut="eteincellule(this)"><div align="center">6</div></td>
</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
Ilestpossibledemodifierlgrementcescriptpourmieuxvisualiserleslignespluttquelescellules.Dansce
cas,cestlabalise<tr>,quicorrespondlalignecompltedutableau,quiestlorigineduchangementde
miseenformelaplacedelabalise<td>,correspondantlacellule.
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.
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>
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
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.
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.
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
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.
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().
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.
<script language="javascript">
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
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 :
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>
<script language="javascript">
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;
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.
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 :
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 :
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>
<script language="javascript">
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);
</script>
<style type="text/css">
.Style1 {
left:800;
top:200;
color: #FF0000;
font-weight: bold;
}
</style>
</head>
<body>
<div class="Style1" id="element1">
<div align="center">Texte</div>
</div>
<div align="center">
<table width="72%" border="0">
<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>
<td width="5%"><input type="button" name="Submit13"
value="Souligner" onClick="souligne()"></td>
<td width="5%"><input type="button" name="Submit14"
value="Deplacer" onClick="deplacer()"></td>
<td width="5%"><input type="button" name="Submit"
value="Bouger" onClick="bouger()"></td>
<td width="7%"><input type="button" name="Submit2"
value="Disparaitre" onClick="disparaitre()"></td>
<td width="7%"><input type="button" name="Submit3"
value="Apparaitre" onClick="apparaitre()"></td>
<td width="6%"><input type="button" name="Submit4"
value="Enrouler" onClick="enroule()"></td>
<td width="7%"><input type="submit" name="Submit5"
value="Derouler" onClick="deroule()"></td>
<td width="6%"><input type="button" name="Submit6"
value="Fuir" onClick="fuit()"></td>
<td width="10%"><input type="button" name="Submit7"
value="Reduire" onClick="reduit()"></td>
<td width="11%"><input type="button" name="Submit8"
value="Grossir" onClick="grossis()"></td>
<td width="8%"><input type="button" name="Submit9"
value="Battre" onClick="battre()"></td>
<td width="9%"><input type="button" name="Submit10"
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 :
Lesoptionsdisponiblessontlessuivantes :
Nomdeloption Fonction
Limiteledplacementdelobjetdanslesens
constraint: "horizontal" "vertical"
horizontalouvertical.
Indiquelafonctionventuelleexcuterenfin
endeffect:function()
deffet.
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 :
Lesoptionsdisponiblessontlessuivantes :
Nomdeloption Fonction
Indiqueleslmentsautorissparlacible.Cestla
accept: "nom de la (les) classe
classequicorrespondlobjetouauxobjetsaccept
(s)" [classe1,classe2]
(s).
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 language="javascript" src="prototype.js" >
</script>
<script language="javascript" src="scriptaculous.js">
</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>
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>";
?>
Lescriptdufichierhtml :
<html>
<head>
<title>Autocompletion avec scriptaculous</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-
8859-15">
<script language="javascript" src="prototype.js" >
</script>
<script language="javascript" src="scriptaculous.js">
</script>
<style type="text/css">
.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>
<script language="javascript">
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:
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 !