JavaScript

JavaScript
Des fondamentaux aux concepts avancs
EmmanuelGUTIERREZ
Rsum
Ce livre sur Javascript est destin tous ceux qui se proccupent de donner plus dinteraction leurs sites web. Il vise deux objectifs : tout dabord matriser les fondements de JavaScript afin dlaborer les scripts les plus frquemment utiliss sur le net, puis dcouvrir le nouveau potentiel de JavaScript aussi bien grce son utilisation avec les feuilles de styles en cascade (CSS), le DHTML, AJAX quavec les bibliothques telles que Prototype ou Script.aculo.us. Aprs avoir prsent la syntaxe de base, le livre prend appui sur des exemples significatifs (gestion des formulaires, du temps, des menus de navigation, gliss-dpos, autocompltion), pour les commenter et dmontrer lomniprsence de JavaScript dans une architecture Web 2.0. Le livre accompagne le lecteur tout au long dun vritable parcours allant des rudiments de JavaScript jusqu la dcouverte des concepts les plus avancs. Les exemples de script cits dans louvrage sont en tlchargement sur cette page.
L'auteur
Aprs plusieurs annes passes en tant que formateur, Emmanuel Gutierrez est aujourd'hui consultant informatique, grant dun centre de formation qu'il a cr. Ses diffrentes missions en entreprises autour de la cration de sites web s'allient son exprience pdagogique pour fournir au lecteur un ouvrage rellement oprationnel pour matriser le dveloppement en JavaScript.
Ce livre numrique a t conu et est diffus dans le respect des droits dauteur. Toutes les marques cites ont t dposes par leur diteur respectif. La loi du 11 Mars 1957 nautorisant aux termes des alinas 2 et 3 de larticle 41, dune part, que les copies ou reproductions strictement rserves lusage priv du copiste et non destines une utilisation collective, et, dautre part, que les analyses et les courtes citations dans un but dexemple et dillustration, toute reprsentation ou reproduction intgrale, ou partielle, faite sans le consentement de lauteur ou de ses ayants droit ou ayant cause, est illicite (alina 1er de larticle 40). Cette reprsentation ou reproduction, par quelque procd que ce soit, constituerait donc une contrefaon sanctionne par les articles 425 et suivants du Code Pnal. Copyright Editions ENI
ENI Editions - All rigths reserved
- 1-
HistoriqueetversionsdeJavaScript
LemoinsquelonpuissedirecestqueJavaScriptestunlangagetrscontrovers.AudbutdelInternet,lespages taientconstituesuniquementdetextesetdelienshypertextes,cequirestreignaitlusagedesscientifiquesetdes universitaires. De toutes manires, les contraintes techniques de lpoque, notamment au niveau des dbits de transfert,nepouvaientpasproposerautrechosedemieux.Cestaumilieudesannes1990quelebesoindedisposer desitesInternetplusconviviauxetproposantplusdeservicesestapparu.BrendanEich,alorsingnieurinformaticien chezNetscapeestchargdudveloppementdunnouveaunavigateurweb.Ilenprofitepourdvelopperunlangage de Script, lorigine nomm LiveScript, et qui devait tre un complment Java (ces deux langages sont souvent confondusdufaitdeleurappellationquasiidentique,bienquilsnaientquepeudechosesencommun).Lobjetdece langage de script est de rendre les pages Internet plus attractives, plus conviviales pour le visiteur, en permettant davantagedechosessanspourautantfaireappellaprogrammationctserveur.Pourcefaire,lenavigateurdoit pouvoirinterprterlecodeJavaScript.NetscapedcidedimplmenternativementLiveScriptdanslaversion2.0deson navigateur(alorsbaptisNetscapeNavigator)ds1995.Dbutealors,unepriodedegrandepopularitdeslangages descriptetMicrosoftnepouvaitquesersoudresortirsapropreversion.CefutJscriptsortien1996etintgr sonnavigateurInternetExplorerdontladernireversionestaujourdhuiJscript.Net.LesversionsdeJavaScriptsesont alors succdes, apportant pour chacune dentre elles son lot damliorations. Tout le monde a pu constater que lInternetarapidementtenvahidepagescomportantdepetitsscriptspermettant,parexemple,dafficherlheure,la date, le nom du visiteur, ou effectuant la validation du contenu de champs de formulaire. Cependant, mme si JavaScript suit les instructions donnes par lECMA (European Computer Manufacturers Association), organisme international charg de la standardisation des systmes dinformation et de communication, les diteurs de logiciels (Microsoft dun ct avec Internet Explorer et Sun de lautre avec Firefox), ont labor, depuis le dbut, des navigateurs qui implmentent diffremment JavaScript. De ce fait, certains scripts peuvent trs bien sexcuter normalementsurunnavigateuretparadoxalement,gnreruneerreursurunautre.Cestenpartiecausedecela qu la fin des annes 1990, dautres langages tels ASP ou PHP deviendront plus populaires. Mais cest surtout lutilisation outrance de popup (fentre surgissante) qui est lorigine de la baisse dintrt pour lemploi de JavaScript.LeurprolifrationanormmentnuiJavaScriptetlexasprationdesutilisateursafiniparencacherles avantages aux yeux des dveloppeurs certains allant mme jusqu le considrer comme un souslangage. Heureusement, larrive des bloqueurs de popup intgrs aux navigateurs a permis JavaScript de redorer son blason. LetableausuivantpermetdelierlaversiondeJavaScriptaveccelledunavigateur : Annedesortie VersiondeJavaScript Navigateurscompatibles InternetExplorer3.0 1995 1.0 NetscapeNavigator2.0 InternetExplorer4.0 1996 1.1 NetscapeNavigator3.0 InternetExplorer4.0 1997 1.2 NetscapeNavigator4.0 1998 1.3 NetscapeNavigator4.5 InternetExplorer6.0 1999 1.4 NetscapeNavigator6.0 2000 2005 1.5 1.6 NetscapeNavigator6.0 Firefox1.0 Firefox2.0 2006 1.7 InternetExplorer7.0 Aujourdhui, JavaScript est redevenu un langage la mode. Il est dailleurs intressant de constater que les mmes personnes,qui,ilyaquelquestemps,dcriaientcelangage,lutilisentaujourdhuitortettravers.Eneffet,larrive denouvellestechnologieswebetnotammentduweb2.0,redonneaudveloppementJavaScriptuneplacecentrale, notammentparsonutilisationconjointeavecXMLouparsonutilisationasynchrone(Ajax),dontnousreparleronsplus tard.Cecidit,ilnestpasinutiledepointerdudoigtlesavantagesetleslimitesdelutilisationdeJavaScript.
- 1-
LimitesetavantagesdeJavaScript
Comme nous lavons dj prcis, JavaScript est un langage universel qui se retrouve dans de nombreuses pages HTML, en complment de ce code. Grce JavaScript, les pages HTML sont plus riches et disposent de nombreuses fonctionnalitssupplmentaires. Savoir rdiger des scripts en JavaScript, cest permettre aux visiteurs de vos pages HTML daccder dautres fonctionnalits, dautres services et damliorer ainsi la professionnalisation dun site. Ainsi, il y a encore quelques temps, lorsquun utilisateur choisissait un identifiant pour la premire fois, il fallait cliquer sur un bouton et attendre unerponsedelapartduserveur.Et,celuici,parfois,invitaitrecommencerleprocessusdecration,lepseudotant djpris.Alorsquaujourdhui,aveclemploidelatechnologieAJAX,lecontrleseffectueenarrireplanpendantque levisiteurcompltesafiche.IlestindniablequeJavaScriptcontribuefortementlaconvivialitdunsiteInternetet amliore,parconsquent,lafidlisationdesvisiteurs. tantdonncettelargediffusion,savoirrdigerdesscriptsJavaScriptestdevenu,aujourdhui,uneconnaissancede basedetoutdveloppeurweb. Pour autant, lusage de JavaScript nest pas rserv au web, en effet plusieurs logiciels du march tels Adobe PhotoshopouAdobeIllustratorutilisentdesvariantestrsprochesdeJavaScriptpourautomatisercertainestches. Encequiconcerneladifficultdulangage,certainspourraienttrerticentslanalysedespagesHTMLcontenantdu codeJavaScript,maisfinalementavecunpeudetempsetderecherche,JavaScriptestunlangagedontlamatriseest assez facile. DautantplussivoustesdjfamilieravecdautreslangagestelsleVisualBasicoulelangageC,par exemple,mmesiuneadaptationquelquesparticularitsesttoutdemmencessaire. linverse, JavaScript ne peut pas tout faire. Comme cest un langage de script qui sexcute ct client, il lui est impossibledesinterfaceravecunebasededonnesdetypeMysqlouSQL,parexemple.Pourremplircettemission,il faut imprativement passer par de la programmation ct serveur avec des langages tels ASP ou PHP. Autre point important,JavaScriptnestpasenmesuredcrireoudeliresurledisquedurduposteclient(hormislescookiesquine sontquedepetitsfichierstexteetdontnoustraiteronslesdiffrentsaspectsauchapitreAmliorerlinteractivitavec JavaScriptetCSS).Cettedernirelimitationnenconstituepaspourautantundfaut,carainsiJavaScriptnepropage pasdinfectionsviralesfortementdangereuses. UneautreparticularitdeJavaScriptrsidedanslefaitquilnencessitepasdditeurparticuliernidecompilateur.Il esttrsfacilederdigerdesscriptsdirectementdanslecodedelapageHTMLenpassantparunsimplediteurde textedetypeWordpadouunditeurdecodeHTML.Ilexiste,cependant,desoutilsdeconceptiondontlapportnest pasngligeable.
- 1-
Outilsdeconception
LesoutilspermettantdinsrerducodeJavaScriptsontnombreux.Celavadusimplelogicielditeurdetexte,comme parexempleWordPaddeWindows,loutilspcifiqueAptanaStudio,enpassantparlesditeursdecodeHTMLtels DreamweaverouFrontPage,aveclesquelsilestpossibledinsrerdesblocsJavaScript.Lusagedeceslogicielspermet dedisposerduncertainsnombredoutilsfacilitantlcritureducode.Ilest,parexemple,fortsimplede:
q
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.
- 1-
Paramtragesetenvironnementoptimaldetest
Il faut avoir lesprit que pour dbuter en JavaScript, un minimum de connaissances en HTML est ncessaire et notamment la notion de balise permettant de se situer dans la page. Pour mmoire, nous rappellerons simplement quunepageHTMLsediviseendeuxgrandesparties :
q
la partie head (tte en franais) dans laquelle se situent les informations correspondant la description du contenu lapartiebody(corpsenfranais)ofigurelecodepermettantlaconstructiondesobjetsdanslapage(champs deformulaire,zonedetexte,image,etc.).
UnscriptJavaScriptpeutsetrouverauchoixdansluneoulautredecesdeuxparties.Cependant,parconvention,les scriptsseretrouventplusfrquemmentdanslapartieheaddelapage.Leurexcutionpeutalorstreimmdiate(au chargementdelapage)oudiffre(clicsurunbouton,parexemple).Ilfaudra,danscecas,utiliserlaprogrammation vnementielle et les fonctions pour que le code sexcute. Ces points sont traits au chapitre Fonctions et vnementsduprsentouvrage.Lapositiondesscriptsdanslapartieheadnesignifiepaspourautantquelesscripts seront indexs par les moteurs de recherche. En effet, jusqu prsent, les moteurs tels Google ou Yahoo ne proposentpasderfrencespartirdeceslmentsdecode,maisavecledveloppementdestechnologiesduweb 2.0, ils le feront un jour ou lautre.Pourlinstant,danslecasounepagecontientdeslienslintrieur dunmenu critlaidedeJavaScript,cesadressesneserontpasrfrencesparlesrobots.Ilestdoncfortementrecommand dajouterlesliensenHTMLlaidedelabalise <a href="mapagevisibleparlesmoteurs.html">.Aprsavoirdtaillla position des scripts JavaScript, il faut claircir la manire de les insrer. Nous avons dj vu que JavaScript ne ncessitaitpasdenvironnementparticulier.IlsuffitsimplementdunepageHTMLlintrieurdelaquellevousajoutez des lignes rdiges en JavaScript entre deux balises. La premire balise indique au navigateur le dbut du script JavaScriptetlasecondeenindiquelafin.Lesdeuxbalisesutilisersontlessuivantes: Audbutduscript : <script language="javascript"> etlafinduscript </script> Entrelesdeuxbalises,lenombredelignesdecodeestillimit.IlestpossibledajouterlaversiondeJavaScriptutilise etdobtenirunelignedetype : <script language="javascript 1.5"> Cependant,lesnavigateurssaccommodenttrsbiendelapremiresyntaxeet,enfonctiondeleurversion,sadaptent laversionJavaScript.Deplus,enspcifiantunedesderniresversions,vouscontraignezlesvisiteursdisposerdes derniers navigateurs, ce qui limite la porte de votre code. Si, malgr tout, vous souhaitez faire passer des informationsauxvisiteursayantunnavigateurnesupportantpasJavaScript,ilfautlefaireentrelesbalises<noscript> et</noscript>quelonplacejusteaprs. <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.
- 1-
HTMLetJavaScript
Nous avons vu prcdemment que JavaScript et HTML taient intimement lis lun lautre, le code HTML servant gnralementdeconteneuraublocdinstructionsJavaScript.AprschargementducodeHTML,lenavigateurexcute lesblocsdinstructionsJavaScriptetpermetainsidenrichirlapagedenouvellesfonctionnalits.Pourtant,ilexisteun autretypedexcutiondesscriptsJavaScript.
- 1-
LesdeuxtypesdexcutionducodeJavaScript
En effet, les blocs de script JavaScript peuvent tre directement prsents dans le code HTML de la page entre deux balises (une de dbut et une de fin), ou crits dans un fichier JavaScript au format .js, totalement dissoci du code HTML de la page. Le premier cas est dsign sous le terme de JavaScript interne par opposition au second, appel JavaScriptexterne. Aucun des deux types dexcution nest meilleur que lautre, il sagit simplement dune prfrence de mode de dveloppement.LadeuximesolutionpermettoutefoisderutiliserlecodedansdautrespagesHTMLsansquilsoit ncessairedelercrireoudefaireuncopiercoller. Concrtement,lescriptJavaScriptestrdigdansunfichierparticulierlaidedunditeurdetexte,parexemple,et doittreenregistrsansformatageauformat.js.Silditeurdetexteneproposepaspardfautcetteextension,il suffitdelajouterlorsdelasauvegardedufichier.Afindepouvoirretrouverfacilementlerledevotrescript,ilconvient delenommeravecunnomexplicite. Parlasuite,ilesttrssimpledappelerlefichierJavaScriptdanslapageHTMLenrespectantlasyntaxesuivante : <script src="fichier_javascript.js"></script> Biensr,lefichierdevratreprsentdanslemmerpertoiredevotredisquedurouduserveurquelefichierHTML appelant. Parsoucidesimplification,touslesexemplesdecetouvragesontconusenJavaScriptinterne,ainsivousretrouverez plusfacilementlensembleducode. Enplusdecesrglespurementlieslorganisationdesscripts,ilexisteuncertainnombrederglesdesyntaxe respecter.
- 1-
Lesrglesdesyntaxeducode
PourbiendbuterenJavaScriptlerespectdecesrglesestfondamental,carcelangageestpeusoupleetnautorise pasderreurscommevousleconstaterezdanslesparagraphessuivants.
1.Lacasse
UnedesprincipalesdifficultsdeJavaScriptrsidedanslefaitquecestunlangagesensiblelacasse,cestdire quil diffrencie les majuscules des minuscules. Or, cela revt son importance lors de lutilisation de variables et dobjets. ConcrtementenJavaScript,Monobjetnestpasidentiquemonobjet. Celasappliquetouslesmotscls(proprits,mthodes,fonctionsJavaScript)etlusagedoutilsdedveloppement telAptanaoulditeurdeDreamweaverpermetdefaciliterlareconnaissancedecettesyntaxecarilssonttransforms encouleursquasiinstantanment. Uneautrergledesyntaxeconcernelajoutdecommentaires.
2.Ajoutdecommentaires
Comme dans la plupart des langages de programmation, lajout de commentaires dans vos scripts JavaScript peut savrerfortutile.Eneffet,outrelefaitdepouvoirretrouverplusfacilementlesblocsdinstructionsquevousvenezde crer, les commentaires pourront vous tre dun immense secours le jour o vous devrez reprendre votre code. La lisibilitducodeest,dailleurs,undesprincipauxcritresdedterminationdunbonscriptJavaScript.Eneffet,quoi sert de dvelopper un superbe script si vous devrez prendre deux fois plus de temps pour le modifier quelques semainesplustard ? LajoutdecommentairesdansunblocdecodeJavaScriptseffectuedemaniremonoligneoumultilignes. Lescommentairescontenussuruneseuleligneserontprcdsdudoubleslash//. Lescommentairesnepouvantpastrecontenussuruneseuleligneserontprcdsde/*etdevrontseterminerpar */. Exemple : <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
ChaquelignedecodeJavaScriptseterminegnralementparunpointvirgule sauf exception de syntaxe que nous dtailleronsplustard. Un simple oubli de ce pointvirgule peut vous faire perdre un temps prcieux. La premire tape du dbogage consisteradonc,vrifiersaprsence.
4.Lindentation
Lorsque les lignes de codes commencent tre nombreuses, il peut arriver que le dveloppeur soit un peu perdu devant des sigles quil ne parvient plus relier. Il est alors utile dutiliser une rgle de prsentation des scripts qui consistedcalerversladroitedesinstructionssecorrespondant.Cestnotammentlecaslorsdetestsouboucles imbriques.
- 1-
Exemple : afficher dans plusieurs botes de dialogue, le rsultat de deux variables utilises comme compteur dans deux bouclesimbriques.
<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.
- 2-
Crationdelapagedetest
AfinderdigerplusefficacementlesscriptsdanslespagesHTML,lemieuxestdecrerunepagemodledanslaquelle vousinclurezlesbalisessignalantledbutetlafinducodeJavaScript. LecodeJavaScriptsinsrantleplussouventdanslapartieheaddelapage,voicilecodeHTMLdevotrepagemodle pourlardactiondetousvosscriptsJavaScript :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Page modele en Javascript</title> <script language="javascript"> document.write("Mettre le code ici"); </script> </head> <body> </body> </html> Les deux premires lignes dterminent le type de document et sont ncessaires pour le bon fonctionnement dinstructionsDHTML,commenousleverronsauchapitreAmliorerlinteractivitavecJavaScriptetCSS.Laquatrime ligne indique le dbut de la balise head qui nous intresse particulirement. La cinquime ligne permet lajout dune balise meta indiquant les caractres utiliss, la sixime fixe un titre la page (ici Page modele en JavaScript). Cest entreleslignes<script language="javascript">et</script>quedevrascrirelaplupartdesscriptsquevousallez rdiger.Lemplacementestreprparlalignedocument.write("Mettre le code ici"). Toutefois,ilestpossibledeplacerducodeJavaScriptnimporteodanslapage. Enregistrezcettepagemodlesousunnompermettantdeladistinguerfacilement(pagemodleparexemple).Parla suite,vouspourrez:
q
reprendrecettemmepage enmodifierlescript etenfinlenregistrersousunautrenom,laidedumenuEnregistrersousdevotrediteurdetexteouHTML.
Noubliezpasdemodifiergalementlecontenudelabalise<title>.Pourplusdescuritetnepascrasercettepage modle,vouspouvezenmodifierledroitdaccsetluiattribuerlestatutlectureseule. Exemple:pourcrerunenouvellepageHTMLcomprenantunscriptdcrituredunmessagedanslapage,ilvousfautouvrir lapagemodlepuisinsrerentrelesdeuxbalises<script language="javascript">et</script>lecodesuivant : document.write(" la page modle est r-utilisable") ; Aveccettemthode,vousvousconstituerezfacilementetrapidementunevraiebibliothquedescripts.
- 1-
CrationdunebibliothquepersonnelledescriptsJavaScript
Aufildutemps,vousserezamendvelopperdenombreuxscriptsquiserontpeuttrerutilisablesultrieurement. Pour faciliter cette rexploitation, nommez vos pages avec un nom indiquant clairement lobjet de votre script JavaScript. Attentionnepasconfondrebibliothquepersonnelledescriptsetbibliothquescommunes,nombreusessur lenet,etquienrichissentlefonctionnementclassiquedeJavaScript.Linstallationdenouvellesbibliothques JavaScriptseravoqueauchapitreAmliorerlinteractivitavecJavaScriptetCSS.
- 1-
Messagesderreuretconseilspourledbogage
LefaitquelesnavigateursinterprtentdiffremmentlesscriptsJavaScript,imposedefairedestestsavecchacundes navigateurs.Cependant,lemeilleurconseilestdetesterlesscriptsdaborddansFirefox/Mozillaquidisposedunoutil dedbogagepluspuissant,puis,unevrificationdansInternetExplorerserancessaire.Pourvousaiderunpeudans letraitementdeserreurspossibles,voiciunetypologiesommaireentroisgrandescatgories : Tout dabord, il se peut que rien ne se passe au chargement de la page. Il faut savoir que JavaScript effectue un contrleduscriptavantdafficherquoiquecesoit.Silrencontreuneerreur,lescriptsinterromptsansmmeallerplus loin.Ceserreurssontsouventduesunesyntaxeapproximativeoudesfautesdefrappes. Il est possible galement de rencontrer non pas des erreurs au chargement mais plutt lexcution. Cela signifie gnralementquelesobjets,leursproprits,leursmthodesouencorelesfonctionsnecorrespondentpasousont malutiliss. Enfin,leserreurslesplusdlicatesdtectersontdeserreurspurementlogiquesquisurviennentlorsquelestestsdu scriptnontpastsuffisammentnombreux.Ainsi,lescriptpeuttoutfaitbienfonctionnerdansuncasdefigureet dclencheruneerreuravecdautresvaleursoudautreschoix.Nhsitezpastestertousvosscriptsavecdesvaleurs diffrentesetobservezbienlesrsultatsobtenus.Parprudence,silnedisposepasdunoutilpermettantdecontrler leurtat(commeAptanaouFirebugparexemple),ledveloppeurdevraitparsemersonscriptdenombreusesbotes dedialogue.Cellescipermettrontdafficherlecontenudesvariablestoutaulongdudroulementduscript.Dunpoint devuegnral,lorsquuneerreursurvientdansledroulementdevotrescript,ilestutiledechercherdanslabarre dtatdesonnavigateurlaprsenceduneventuelleicnesignifiantquelerreuratrepre(surInternetExplorer enbasgauche,enbasdroitesurFirefox/Mozilla).Encliquantsurcelleci,ilvousserapossibledeconnatrelaligne du script contenant lerreur.Maisattention,cetteinformationnest pas forcment prcise. Lindication du numro de ligne informe simplement quune erreur a t rencontre partir de cette ligne. Il faut donc remonter quelquefois plusieurs lignes plus haut, avant de trouver le problme lorigine de larrt du script. Une nouvelle fois, toutes les astuces (colorisation du code, indentation) sont les bienvenues, car ce travail, long et fastidieux, reste la principale causedudsintressementdeJavaScript. Cesconseilsconstituentunepremireaideaudbogagemaisilsnesuffisentpaslorsquelesproblmessavrentplus dlicat.Danscecas,ilexistedesoutilspermettantdefaciliterunpeucetravail.
- 1-
LesoutilsdedbogageJavaScript
Malgr le fait quil soit possible de rdiger des scripts facilement, lutilisation de certains outils de conception peut savrerutilenotammentlorsdeltapededbogage.Eneffet,ilserapossibledutiliseralorsdespointsdarrts,de connatre la valeur des variables, autant daidesquivousserontutilesdanscettetapecrucialequest la recherche deserreurs. Nousallonsprsenterquelquesunsdecesoutils.
1.MicrosoftScriptDebugger
En utilisant Microsoft Script Debugger, vous disposez dun outil daide la syntaxe et de dbogage car lorsque le navigateur Internet Explorer rencontre une erreur dans le droulement dun script, il est possible de basculer directementdansMicrosoftScriptDebuggerauniveaudelaligneposantunproblme. IlsagitdulogicieldedbogagedeMicrosoftmaissonutilisationnestpastrsintuitiveetilnest disponible quen anglais. Vous pouvez tout de mme le tlcharger auprs du centre de tlchargement de Microsoft ladresse suivante :http://www.microsoft.com/downloads/ Vousaurez,peuttre,besoindinstallerauparavantlelogicielGenuinedeMicrosoft.
2.MicrosoftFrontPage/AdobeDreamweaver
Les diteurs de code HTML permettent, en gnral, de visualiser le code de la page et ainsi daccder la partie JavaScript. Mais ils ne disposent pas de fonctionnalits permettant dajouter des points darrts et de connatre la valeurdesvariables.Decefait,ilsconviennentmoinsaudbogagedescriptcomplexesmaisapparaissentcommeun bonpontdepassageentrelemondeHTMLetleJavaScript.
3.Venkman
Cest un complment de Firefox/Mozilla (et sutilise donc avec lui), qui permet de visualiser le code JavaScript, dajouterdespointsdarrtsetdecontrlerlavaleurdesvariables.Ilestintgrdirectementaunavigateuretpeut trelancparlemenuOutilsJavaScriptDebugger.
- 1-
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
- 2-
retrouverdesvariables,leurvaleurainsiquelesobjetssurlesquelslaprogrammationJavaScriptsappuie. Une fois votre outil slectionn et votre page modle cre, il est possible daborderlesprincipauxconceptsdela programmationorienteobjet.
- 3-
Langagedescriptetlangagedeprogrammation
Langagedescriptetlangagedeprogrammationsontsouventmisenopposition,pourtant,enlesregardantdeplus prs,ilsseressemblentsurbiendespoints. Dun ct, les langages de programmation ncessitent un diteur spcifique et un compilateur. La rdaction dun programmeestgalementconsidrecommepluscomplexe.Lesinstructionscritesparunlangagedeprogrammation sontinterprtesdirectementparleprocesseurdelamachine.Danscettecatgorie,nousretrouvonsdeslangages telsqueleCouleJava. Dunautrect,leslangagesdescript(dontfaitpartieJavaScript)permettentdenchanerunesuitedinstructionsqui sont excutes par un autre programme (ici le navigateur Internet). Aucun compilateur nest ncessaire et un seul diteur de texte suffit. Dune manire gnrale, la rdaction de scripts est considre comme plus aise que la rdactiondeprogrammes. Pour simplifier, il est possible de dire que JavaScript fait appel des programmes, comme les navigateurs (Internet Explorer, Firefox/Mozilla, etc.), pour excuter une srie dinstructions de manipulation dobjets (fentres, champs de pageInternet,etc.)afindaccompliruneapplication. LamanipulationdecesobjetsseffectueselonunetechniqueappeleProgrammationOrienteObjetouPOO.
- 1-
LesprincipesdelaProgrammationOrienteObjet
Ce type de programmation est n dans les annes 60, puis a connu un fort dveloppement partir des annes 80 notamment avec Smalltalk. Aujourdhui, de nombreuses applications sont labores partir de la programmation orienteobjetqui,commesonnomlindique,sebasesurlanotiondobjet.
1.Objets,MthodesetProprits
La Programmation Oriente Objet est un paradigme informatique cestdire une faon de voir les choses. En fait, avec la Programmation Oriente Objet et notamment avec JavaScript, tous les lments dune page web (fentre, boutons,formulaire,champsdetexte,etc.)sontconsidrscommedesobjetsquevouspouveztesteretmanipuler. Maiscesobjetsnontpastouslammeimportance.Eneffet,certainsdpendentdautres.Parexemple,unformulaire peuttrecomposdecasescocheroudechampstextequisontdonc,dpendantsduformulaire,maisleformulaire luimme, est dpendant du document dont il fait partie. Les termes notion de hirarchie sont utiliss pour caractrisercettedpendance.LediagrammesuivantreprsentelahirarchiedesobjetsJavaScriptprdfinis:
Pour atteindre un objet, il est ncessaire de suivre le chemin (un peu comme dans un disque dur), en partant de lobjet le plus important hirarchiquement pour, finalement, dsigner celui qui lest le moins. chaque changement dobjet,unpointestajout.Cetteformedesyntaxesenommesyntaxepointe.Ainsi,dansunepagecomportantun formulairenommformu,contenantluimmeunchampNom,silondsireaccdercechamp,lasyntaxesuivante serautilise : document.formu.nom ; Maiscenestpastout,enplusdatteindreunobjetprcisdansunehirarchie,lasyntaxepointedsignelaccs des mthodes ou des proprits qui permettent de manipuler ou de dcrire ces objets. Ainsi, les proprits constituent un ensemble dattributs qui permettent den modifier lapparence et les mthodes reprsentent des actionsralisablesparcetobjet.PourexpliquerplusconcrtementlaProgrammationOrienteObjet,lexempledune automobile est souvent pris. Selon cette mtaphore, lautomobile reprsente un objet qui se caractrise par un certain nombre de proprits (sa couleur bleue ou rouge, sa forme monospace ou berline). Paralllement ces proprits,cetobjetpeutraliseruncertainnombredactions(avancer,tourner,reculer,etc.)quicorrespondentce que lon appelle des mthodes. Les mthodes et les proprits ne sont pas forcment les mmes pour tous les objets.Ilarrivequeplusieursobjetsdisposentdelammepropritoudelammemthode,maiscelanestpas obligatoire.Enfait,pourbienutiliserJavaScript,ilestncessairedebienconnatrelemodledobjetetlesmthodes etpropritsdisponibles. Dun point de vue syntaxique, le point est utilis pour sparer lobjet de sa proprit ou de sa mthode. Un des principauxobjetsprdfinisdeJavaScriptestlobjetWindowquicorrespondlafentredunavigateur. Pourprendreunexempleconcret,sivousdsirezimprimerlapageInternetactive,vousutiliserezlamthodeprint() (imprimer) de lobjet window (fentre), qui est dailleurs lobjet le plus lev dans la hirarchie. Ainsi, le script JavaScriptsuivantpermettradimprimerlapageactive : <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.
- 1-
<script language="javascript"> print(); </script> 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. VersiondeJavaScript Navigateurscompatibles InternetExplorer3.0 1.0 NetscapeNavigator2.0 InternetExplorer4.0 1.1 NetscapeNavigator3.0 Ajouts/Amliorations VersiondebasedeJavaScript conformmentladirectivede lECMA. Ajoutsdenouveauxvnements. Correctiondequelquesbugs. Ajoutdelinstructionswitch.Ajout depropritsdelobjetNavigator etdenouveauxvnements. Intgrationdesexpressions rgulires. AmliorationsdelobjetDate. Correctiondequelquesbugs. Dveloppuniquementpourles serveursdeNetscape.Ajoutsdes exceptionsjetettry ... catch Ajoutdenouveauxoprateurs (instanceOf). Changementsapports LiveConnect. Modificationsapporteslobjet Array. Versionbasesurles spcificationsECMA2623e dition.Ajoutdelagestiondes exceptions. AjoutdelatechnologieE4X permettantdegrerdes documentsXML. Ajoutdesmthodesevery(),filter (),forEach(),map(),some()de lobjetArray.
InternetExplorer4.0 1.2 NetscapeNavigator4.0
1.3
NetscapeNavigator4.5
1.4
Netscapeserveur
NetscapeNavigator6.0 1.5 InternetExplorer6.0
Firefox/Mozilla1.0 1.6 InternetExplorer6.0
- 2-
Firefox/Mozilla2.0 1.7 InternetExplorer6.0
Ajoutdenouveauxmotscls yield,let,deladfinitiondes tableauxparcomprhension. Ajoutdesfermetures dexpression,desexpressions gnratrices,desmthodes reduce()etreduceright()pour lobjetArray.
1.8
Firefox/Mozilla3.0
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>
- 3-
<input type="button" name="Submit" value="Bouton" onClick="controle()"> </p> </form> </body> </html> Ici, lobjet correspondant au champ texte de formulaire est, dabord, dclar par linstruction with (document.form1.nom). Il est ensuite inutile de reprendre la syntaxe document.form1.nom, il suffit dajouter les instructions modifiant successivement la valeur de lobjet. Laffichage successif de plusieurs botes de dialogues permetdesuivrecettemodificationdevaleur. VouspourriezpenserquunedesconditionsessentiellesdelapprentissagedelaProgrammationOrienteObjetest la connaissance parfaite de lensemble du modle dobjets JavaScript. Pourtant, il est prfrable, pour dbuter, de connatrelespropritsetmthodesessentiellesdesobjetsquisontmanipulsleplussouvent.
- 4-
MthodesJavaScript
1.alert()
La mthode alert() de lobjet window permet laffichage dune bote de dialogue comprenant un message davertissement.Lemessageafficherdanslabotededialoguesetrouvantentreguillemets,ilestpossibledycrire avecdesaccents,desespacesettoutautrecaractrequevoussouhaitezvoirsafficher.Vouspouvezaussiafficher des variables la place ou en plus du message, comme nous le verrons au chapitre Utilisation des constantes, variablesetoprateurs. Lorsdelaffichagedecettebotededialogue,JavaScriptstoppesondroulementetattendquelutilisateurcliquesur leseulboutonOK. Cette mthode, mme si elle semble limite au premier abord, vous sera bien utile par la suite lorsquil sagira deffectuerundbogageduscriptetdevrifierlavaleurdesvariables. Exemple :afficherunebotededialoguedetypealertavecunsimplemessage.
<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().
- 1-
<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.
- 2-
<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 : Prompt("texte afficher", "valeur par dfaut") ; Exemple : afficher deux botes de dialogue afin de saisir le nom et le prnom du visiteur puis en ouvrir une troisime affichantlenomcomplet.
- 3-
<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.
- 4-
Typologieetutilisationdesconstantes
Lesconstantessontdeslmentsdinformations,dontlesvaleurssontindiquesexplicitementdanslecodeJavaScript. Enrglegnrale,lesvaleursdesconstantessontdterminesaudbutduscriptetsontvalablesjusqulafin.Cette affectationdelavaleurdesconstantesseffectueselonlasyntaxesuivante : Ma_constante =valeurdelaconstante Lavaleurdelaconstanteinscritedroitedusignegaleststockedanslapartiedelammoiredsignegauchedu signegaletnomme,danscetexemple,Ma_constante. LesconstantesJavaScriptpeuventtreclassesenplusieurscatgories :
1.Constantesarithmtiques
Elles correspondent un nombre (type number), constitu dune suite de chiffres. Il existe plusieurs types de constantesarithmtiquesenfonctiondeleurmodedcriture : Laconstantedcimaleestconstituedunesuitede17chiffresmaximumallantdezroneuf.Laconstantedcimale peuttrengativeetdonc,treprcdedusignemoins. Exemple : 64ou64ou64.14ou3.1415926535sontdesconstantesdcimales. Les constantes dcimales utilisent le point et non la virgule pour sparer la partie entire de la partie fractionnaire.Sivousutilisezlavirgule,lapartiefractionnairenestpaspriseencompte. La constante octaleestconstituedunesuitedechiffresallantdezrosept.Laconstanteoctaledbuteparun zroetdoittreobligatoiremententireetpositive. Exemple : 02542571estuneconstanteoctale. Laconstantehexadcimaleestconstituedunesuitedeseizecaractrescomprenantdeschiffresdcimauxdezro neufauxquelsonajoutedeslettresdeAF.Laconstantehexadcimaledoitcommencerparunzrosuividunx. Exemple : 0xF45Bestuneconstantehexadcimale.
2.Constanteschanesdecaractres
Elles correspondent une suite de caractres qui peuvent tre des lettres ou des chiffres ou une association des deux.Lachanedecaractresdoittreencadrepardesguillemetsoudesapostrophes. Exemple : "ma constante texte"ouma constante textesontdesconstanteschanesdecaractres. Unevariabletextepeuttrevide,danscecasoncritdeuxapostrophesouguillemetssuccessifssansrien lintrieur.
3.Constantesboolennes
Ellesnepeuventcorrespondrequdeuxvaleurs,trueoufalse,critessansguillemetsniapostrophesettablies,le plusgnralement,enfonctionduntestdansdesstructuresdecontrle,quenousdtailleronsauchapitreContrler lesscriptsaveclesstructuresdecontrles. Exemple : Reponse = truepermetlaffectationdelavaleurboolennetruelaconstanteReponse. Exemplegnralsurlesconstantes :dclareruncertainnombredeconstantesenfonctiondutypeetdelasyntaxe,puis afficherlesrsultatsdanslapageparlamthodedocument.write().
- 1-
<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 Cette constante correspond un nombre infini, suprieur 1.7976931348623157E+10308 ou infrieur 1.7976931348623157E+10308 .
- 2-
Cetteconstanteestrenvoyecommersultatunedivisioncomportantundiviseurgalzro. Exemple: <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.
- 3-
Typologiedesvariables
Contrairementauxconstantesdontlavaleurrestefixetoutaulongduscript,lesvariablespeuventchangerdevaleur soitparunenouvelleaffectationdirecte,soitparuncalculdanslecodeouencoreparuneaffectationparlamthode prompt(). Une variable peut, dailleurs, changer de valeur tout au long du droulement du script puisque JavaScript retientladerniredfinitiondelavariable,cestlquersidelintrtdeleurutilisation.Inversement,silavariablene doitpaschangerdevaleurduranttoutledroulementduscript,ilestpossibledelatransformerenconstantelaide du mot cl const. Autre diffrence mais cette foisci avec les autres langages de programmation, JavaScript est faiblementtypcestdirequelesvariablesnontpasbesoindecorrespondreuntype(texte,numrique,boolen) pourfonctionner.Enfait,cestlinterprteurJavaScriptquidfinitletypedevariableaumomentdesonexcution.Cela impliqueunavantageetuninconvnient.Lavantagersidedanslefaitquensepassantdeladterminationdutype, vous conomisez du code, linconvnient cest que, parfois, vous pouvez aboutir des incohrences : par exemple, additionner du texte et des nombres sans que cela gne JavaScript. Pour conclure, les types de variables correspondentceuxdesconstantes(texte,numriqueouboolen),etilestdonc,simpledelesutiliser.
- 1-
Lestapesrespecterpourunebonneutilisationdesvariables
Afin de bien manipuler les variables, il est utile den respecter les tapes de cration. En rgle gnrale, il faut commencerparseproccuperdelaportedesvariablespourensuiteeffectuerleurdclarationetleuraffectation.
1.Portedesvariables
Ilfautseposerlaquestiondesavoirsilavariabledoittredisponibletoutaulongduscript,ousielledoittrelimite lafonctiondanslaquelleelleatcre.Cestcequelonappellelaportedesvariables. Ilexistedeuxtypesdeportesdiffrentes.Lorsquunevariableestdfinielintrieurdunefonction,nousleverrons danslechapitreconsacrauxfonctions,saporteestditelocale.Danscecas,savaleurnepeutpastrercupre dansuneautrefonction,sansenfaireexplicitementrfrence.Parcontre,lorsquunevariableestdfiniedirectement danslescriptetsansapparteniraucunefonction,saporteestditeglobale.Savaleurest,alors,disponibletout moment.
2.Dclarationdevariables
La dclaration dune variable seffectue laide du mot cl var et selon la syntaxe suivante, on parle alors de dclarationexplicite : var nom_de_la_variable ; Ilestpossiblededclarerplusieursvariablessuruneseuleligne.Danscecas,ellesserontsparesparunevirgule. var mavariable1, mavariable2, mavariable3 ; Danscecasdefigure,lesvariablesnayantpasreudevaleurs,ellessontditesundefined.Aussi,ilestimportantde voircommentvouspouvezraliserlaffectationdesvariables. Mais,JavaScriptestunlangageparticulirementsoupleetilautorise,aussi,ladclarationdesvariablessansutiliserle motclvar,celasappelleunedclarationimplicite.
3.Affectationdevariables
EnJavaScript,laffectationpeutseffectuerselontroismaniresdiffrentes.Ilestpossibledelefairedirectementdans lecodeparlusagedusignegal(commepourlesconstantes,lavaleursituedroitedusignegalestaffectela variabledontlenomfiguregauchedusignegal). var mavariable = 10 ; Ilestpossibledelefaireindirectementparlintermdiaireduncalculimpliquantconstantesouvariables. var somme=mavariable1+mavariable2 ; Enfin,ilestpossiblededemanderlutilisateurunevaleurquiseraaffectelavariableparlamthodeprompt(),vue prcdemment. var reponse=prompt(" Quelle est la valeur de cette variable ? ") ; Ce type de syntaxe mme si elle respecte la lettre la bonne procdure de programmation nest pas la seule. En effet,cetypededclarationdit explicite nestpasobligatoireetilestpossibledefaireunedclarationimplicitedes variablessansutiliserlemotclvar. Lasyntaxedevientalors : mavariable = 10 ; ouencore : somme=mavariable1+mavariable2 ;
- 1-
Unefoislesvariablesaffectesdeleursvaleurs,ilestpossibledelesafficher.
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.
- 2-
<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().
- 3-
<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.
- 4-
Rglesdenommageetmotsrservs
Jusquprsent,nousavonsutilisdesnomsdevariablestrsconventionnelsetrelativementexplicites,maisaufuret mesure de votre progression, vous serez peuttre tent dutiliser des noms de variables plus personnaliss. Cependant,ilestimpratifdesuivrecertainescontraintesetderespectercertainesrgles,souspeinedevoirlescript renvoyeruneerreur. Ainsi, les noms des variables ne peuvent pas contenir despaces. En gnral, il faut utiliser lunderscore _ pour symboliserunespace. Demme,lepremiercaractredunnomdevariablenepeutpastreunpoint. Enfin,lesnomsdesvariablespeuventcontenir,indiffremment,desmajusculesoudesminusculesmaisilestimportant de bien respecter ce changement de casse, car JavaScript y est sensible. Cela signifie que Mavariable et mavariable sont,pourJavaScript,deuxvariablesdiffrentes.
1.Conseilspourlenommage
Il est prfrable de nommer les variables explicitement, cestdire pour ce quelles reprsentent plutt que de prendredesnomsdevariablestotalementabstraites.Ainsi,vouspourrezlesretrouverplusfacilementdanslecode lorsdudbogage.Ilexiste,cependant,unelistedemotsquilesttotalementinterditdutiliserlorsdeladclaration devosvariables,carrservsparJavaScript.
2.Motsrservs
Les mots rservs sont des mots correspondant gnralement des objets, proprits ou mthodes dj utiliss par JavaScript et qui ne peuvent, donc, pas recevoir de valeurs. Voici un tableau qui rcapitule ces mots interdits. Certains de ces mots sont dores et dj interdits, dautres, mme sil est encore possible de les utiliser, sont dconseillscarlesprochainesversionsdeJavaScriptnelesaccepterontplus. abstract boolean break byte case char class const continue debugger default delete do double else float for function goto if implements import in instanceoff int interface long native new null short static super swich synchronized this throw throws transient true try typeoff var void volatile
- 1-
enum export extends false finally
package private protected public return
while with
- 2-
Typologiedesoprateurs
Lesoprateurspermettentdemanipulerlesvariables,defairedestests(comparaison)entrelesvaleursdesvariables. Lesoprateursetlesvariablescomposentuneexpressionquipeut,quelquefois,ressemblerunmessagecrypt.Mais, en les tudiant, la matrise des oprateurs est somme toute relativement simple. Nous dcouvrirons au chapitre Contrler les scripts avec les structures de contrle, comment utiliser ces tests dans le droulement du script. Pour linstant,voicilalistedesdiffrentsoprateursetleursignification :
1.Arithmtiques
Les oprateurs arithmtiques permettent de raliser des calculs lmentaires entre des variables de types numriques.Lessymboles+,,*et/permettentdeffectuerlesoprationslmentairesdaddition,desoustraction, demultiplicationetdedivision.Voiciuntableauquilistelesoprateursarithmtiques : Oprateurs Nom Rle Additionnelesvaleurs situesgaucheet droitedusymbole. Soustraitlesvaleurs situesgaucheet droitedusymbole. Effectuela multiplicationentre lesvaleurssitues gaucheetdroitedu symbole. Effectueladivisionde lavaleursitue gaucheparlavaleur droitedusymbole. Extraitlavaleur entiredursultatde ladivisionentrela valeursitue gaucheetlavaleur situedroitedu symbolemodulo. Permetdincrmenter unevaleur notammentdansle casdutilisationdans uneboucle. Permetde dcrmenterune valeurnotamment danslecas dutilisationdansune boucle. Exemple Rsultat
Plus
15+10
25
Moins
1510
Produitou multipli
15*10
150
Divis
15/10
1.5
Modulo
5%3
Variable=1 2 Variable++
++
incrmentation
Variable=2 1 Variable
dcrmentation
Variable=1 Ngation Permetdobtenir loppos. variable= variable 1
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.
- 1-
Exemple :afficherlersultatdelapplicationdemodulotroissurunevariablegalecinq. <script language="javascript"> var mavariable=5; var modulo = mavariable%3; alert("Le resultat de modulo est : " + modulo); </script> Aprsavoiraffectecinqlavariable,celleciestrutilisedanslecalculduneautrevariableappelemodulo.Enfin, lersultatestaffichdansunebotededialogueparlamthodealert(). Les oprateurs dincrmentation et de dcrmentation peuvent tre positionns avant lutilisation de la variable,ilsagit de princrmentation(ouprdcrmentation),outrepositionnsaprslutilisationdela variable et il sagit alors de postincrmentation (ou postdcrmentation). Lutilisation de ces oprateurs sera dtaillelorsdeltudedesbouclesauchapitresuivant.
2.Comparaison
Cesoprateurspermettentdecomparerdesvariablesentreelles. Oprateurs Nom Rle Testesiloprande gauchedu symboleestplus petitquecelui situdroite. Renvoietruesi cestlecas. Testesiloprande gauchedu symboleestplus petitougal celuisitudroite. Renvoietruesi cestlecas. Testesilesvaleurs gaucheet droitesont identiques. Testesiloprande gauchedu symboleestplus grandquecelui situdroite. Renvoietruesi cestlecas. Testesilavaleur gauchedu symboleestplus grandeougale cellesitue droite.Renvoie truesicestlecas. Testesiloprande situgauchedu symboleest diffrentdecelui dedroite.Renvoie truesicestlecas. Exemple Rsultat
<
Infrieur
1<2
True
<=
Infrieurougal
2<=2
True
==
Egal
2==2
True
>
Suprieur
2>1
True
>=
Suprieurougal
2>=2
True
!=
Diffrent
1 !=2
True
- 2-
===
Strictementgal
Testesiloprande situgaucheest galetdumme typequecelui situdroitede loprateur. Testesiloprande situgaucheest diffrentet/oude typediffrentde celuisitudroite deloprateur.
1=== "1 "
False
!==
Strictement diffrent
"1 " !==1
True
Ne pas confondre loprateurdecomparaison==avecloprateur daffectation = , ce dernier sert affecter unevaleurdanslavariablesituegauchedusymbole. 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. Oprateurs Nom Rle Permetde concatner plusieurs conditionsenvue duntest.Renvoie truesilesdeux conditionssont runies. Vrifiequeluneou lautredes conditionsest remplie.Renvoie truesicestlecas. Vrifiequela conditiondutest nestpas Exemple Rsultat
&&
Et
5estsuprieur4 etinfrieur6
True
||
Ou
5estsuprieur4 ouinfrieur3
True
Non
5estsuprieur6
True
- 3-
respecte.Renvoie truesicestlecas. 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.
- 4 ENI Editions - All rigths reserved
Oprateurs
Nom
Rle Concatneles chanesde caractres.
Exemple
Rsultat
Plus
Bon+jour
Bonjour
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. Oprateurs Nom Rle Exemple Rsultat Mavariable nexiste plus Creune nouvelle instancede mavariable. Permetde nepas reciter mavariable.
delete
Delete
Supprimeune variable.
delete mavariable
new
New
Creune instancedun objet.
newmavariable
this
This
Permetdese rfrencer lobjetcourant.
thismavariable
Permetde signifierune seulefoisun objetpour
Permetde citerune foisma
- 5-
with
With
accderparla suite plusieursde sesproprits oumthodes.
withmavariable
variable pouren modifierles proprits.
typeof
TypeOf
Permetde connatrele typedunobjet.
typeof mavariable
Extraitle typede variablede mavariable.
void
void
Excuteune instructionmais nerenvoiepas devaleur. Permet daffecterune valeurune variableselon untestsitu gauche de ? .Sile testestvrai,la valeursitue gauchede : estrenvoye, sinoncestcelle dedroite.
void(mavariable)
Renvoie undefined.
?:
Oprateur conditionnel ternaire
(mavariable<0) ? true :false
Renvoie truesila valeurde mavariable est infrieure zro,false dans lautrecas.
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.
- 6-
<script language="javascript"> var numerique=15; var texte="ma variable"; var booleen=false; document.write("La variable numerique est de type : "+ typeof numerique +"<BR>"); document.write("La variable texte est de type : "+ typeof texte +"<BR>"); document.write("La variable booleen est de type : "+ typeof booleen +"<BR>");</script> Laffectationdetroisvariablesdetypediffrent,dbutelescript.Ensuite,loprateurtypeOfpermetdafficherletype devariabledansunebotededialogue.
7.Ordredesoprateurs
Danslecasoplusieursoprateurssontutilissdansuneexpression,ilsnesontpasforcmenttraitsdanslesens traditionneldelecturegauchedroite.Lesensdetraitementdpenddunordredfinidanslecore(c ur)deJavaScript etquicorrespondautableaucidessous: Pluslerangestlev,pluslaprioritestimportante. Numroderang Rang15 Rang14 Rang13 Rang12 Rang11 Rang10 Rang9 Rang8 Rang7 Rang6 Rang5 Rang4 Rang3 Rang2 Rang1 ()[]. !~++ */% + <<>>>>> <<=>>= ==!= & ^ | && || ?: =+==<<=>>=&=^=|= , Symbole Type Appeldefonction/membre Ngation/complment Produit/quotien Addition/soustraction Dcalage Comparaison Comparaison ETbitbit OUexclusif OUinclusif ETlogique OUlogique Conditionnelternaire Affectation 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
- 7-
obtenu. Exemple :modifierlescriptprcdentpourpermettredefaireladditionpuislamultiplication. <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.
- 8-
Lesinstructionsconditionnelles
Ces instructions permettent dorienter le droulement du script en fonction de tests. Par exemple, il est possible de contrlerlecontenudunevariableetdexcuteruneinstructionsiletestestrespect(true),oudexcuteruneautre instruction,silersultatdutestestfaux(false).Cesinstructionssontplaceslintrieurdestructuresdecontrles, quipermettentdetraitertouslescasdefigureenfonctiondelarponsedutest.
1.if
Linstruction if (si en franais) permet de distinguer gnralement deux cas de figure seulement. Pour les tests comprenant plus de situations, il est prfrable dutiliser linstruction switch que nous dtaillerons plus loin. Le test doit tre plac entre parenthses et comprend gnralement des oprateurs de comparaison et des variables ou constantes.Letestestsuividuneaccolade,lapremireligneinstructionsetrouvantsurlalignesuivante.Ilnyadonc pas de pointvirgule la fin de cette ligne, ce qui correspond une exception. Il est possible de considrer que la premire instruction correspond un test positif mais il nyapasdobligation.Lenombredelignesdinstructionest illimit,chacunedentreellesseterminantparunpointvirgule.Lagestiondupremiercasdefiguresetermineparune accoladefermantesurlalignesuivante,pourunemeilleurelisibilitducode.Lemotclelse(sinon)estajoutsurla ligne suivante sans pointvirgule pour terminer. Une autre accolade est ouverte sur la ligne suivante, elle dfinit le dbutdesinstructionsralisersilavaleurdutestestfalse.Ilestgalementpossibledajouterautantdelignesque ncessaires pour traiter ce deuxime cas de figure. Le script continue son droulement normal aprs laccolade fermante.Lasyntaxedelastructuredecontrleaveclinstructionifestdonclasuivante : if (test) { Ligne 1 dinstruction 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
- 1-
surOK(true),lescriptafficheunebotededialoguedetypealertpourleremercier.Aucontraire,silutilisateurclique surleboutonAnnuler(falsedansletest),lescriptafficheuneautrebote,quipermetderegrettercetabandon. noterlesdeuxsignesgal,ctecte,quipermettentdeffectuerunecomparaisonetnonuneaffectation. 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"); }
</script> 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 : (test) ? instruction si vrai : instruction si faux ; Mme si la syntaxe est plus concise, la relecture nest pas facilite par cette structure de contrle. Cest pour cette raisonquesonutilisationestpeufrquenteetquelleestrarementutilisedanscertainsscripts. Exemple : demander une valeur lutilisateur et la tester, pour savoir si elle est suprieure ou infrieure loprateur conditionnelternaire.
<script language="javascript"> var mavar=prompt("Quelle valeur voulez-vous prendre pour faire un test avec loprateur conditionnel ternaire ?"); (mavar<2)? alert("La variable est infrieure 2"):alert("La variable est suprieure 2"); </script> Ici,unevaleurestaffectelavariablemavaraveclamthodeprompt(),puislescriptutiliseloprateurconditionnel ternaire pour la comparer 2. Dans le cas o le test est respect, cest linstruction figurant juste aprs le point dinterrogationquiestexcute,danslecascontraire,cestlinstructionsetrouvantjusteaprsledoublepoint.
3.elseif
ENI Editions - All rigths reserved - 3-
Linstructionelseifestutiliseencomplmentdeifdanslecasolenombredesituationsestsuprieurdeux nous parlerons alors de concatnation de tests. Le dbut est identique la premire structure de contrle, par contre lorsquilfautajouterunsecondtest,ilfaututiliserlinstructionelseifsuividunouveautestentreparenthsesetde laccolade ouvrante. Ainsi, toutes les situations possibles seront traites par limination, jusqu la dernire. il faut terminerparlinstructionelsequiconcerne,alors,touteslesautressituationsquinontpasttraitesauparavant. Lasyntaxedelastructuredecontrleaveclinstructionelseifestlasuivante : if (test) { 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-
calculerlemontantdelarduction,gale5%delacommande.Danslautrecas,lemontantdelacommandeest forcment suprieur 25 000 et il nest pas ncessaire dajouter un autre test pour le savoir. Le montant de la rductionpeut,alors,trecalculetaffichdansunebotededialogue. Lorsquils sont nombreux, les if imbriqus deviennent difficiles maintenir. Il est trs facile de faire une erreur dalignementdesaccoladesetainsidepnaliserlarelecture.Danscecas,ilesttoujourspossibledutiliseruneautre structuredecontrle.Ilsagitdelinstructionswitch.
4.switch
Tout comme la structure comprenant if et else if, linstruction switch permet de grer plusieurs cas de figure. Son utilisationpeutsavrerplusfacilequuneconcatnationdeifaveclasriedaccoladesouvrantesetfermantes,dontla lecture est quelquefois dlicate. Malheureusement, lutilisation des oprateurs de comparaison infrieur, suprieur, etc.nestpasautoriseaveclinstructionswitch.Ducoup,sonutilitpeutsemblerlimite.Unestructuredecontrle avecswitchdbuteaveclemotclswitchsuividelavariabletester,placeentreparenthses.Lafindelalignene doitpascomporterdepointvirgule.lalignesuivante,ilfautouvriruneparenthse,puischaquevaleurpossiblede lavariable,ilfautindiquerlemotclcasesuividelavaleurdelavariableetdedeuxpoints.Laoulesligne(s)suivante (s) correspond(ent) aux instructions raliser pour chaque cas. Pour terminer le traitement de chaque cas, il faut utiliserlemotclbreakquipermetdequitterlastructuredecontrle.Lastructuredecontrleswitchseterminepar uneaccoladefermante. Lasyntaxedelastructuredecontrleaveclinstructionswitchestlasuivante : switch (variable de test) { case " premier cas " : instructions break ; case " deuxime cas " : instructions break ; } Exemple :afficherunerponseselonunequestionposeavectroispropositionsderponse :"Javascriptestunlangage: A.NontypB.FaiblementtypC.Typ".
<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.
- 5-
Ce script sousentend que les possibilits de rponse seront respectes (A, B ou C). Mais que se passetil si lutilisateurchoisitdesaisirunautretypederponse ?Lescriptsinterromptbrutalementsansdonnerderponse.Le mieux consiste alors, utiliser le mot cl default qui correspond tous les cas qui nont pas pu tre traits prcdemment.Cemotcldoittreajoutlafinduscriptetsuividebreakgalement.Lescriptdevientalors : <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.
- 6-
Lesinstructionsderptitions(boucles)
Les boucles permettent de raliser des blocs dinstructions plusieurs reprises, appeles instructions ditration. En Javascript,ilenexistedeuxtypes,lesbouclesavecforetlesbouclesavecwhile.
1.for
Elle ncessite lutilisation dune valeur initiale de compteur, dun test et dun facteur de progression. La valeur atteindreducompteurdoittreconnue.Lasyntaxedecetteinstructionderptitionestlasuivante : for (valeur initiale du compteur ; test de rptition ; facteur de progression){ instructions rpter } Exemple :afficherdixfoisdanslapagelersultatdunebouclecomportantunevariablepostincrmente.
<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 : for (var nomproprit in nomdelobjet) { instructions ; }
- 1-
Exemple :afficherdanslapagelalistedespropritsdelobjetdocument :
<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.
- 3-
Interrompreetquitterlesboucles
1.break
Commenouslavonsvuprcdemmentdanslastructuredecontrleavecswitch,breakpermetdequitterlesboucles de manire prmature. Linstruction break peut aussi renvoyer le droulement du script vers une tiquette (un label),cestdireunepositionidentifieparunnomsuividedeuxpoints. Linstructionbreaknepeuttreutilisequlintrieurdebouclesimbriquesavecforouswitch. Le nom de ltiquette doit suivre les mmes contraintes de nommage que les variables (pas despace, le nom de ltiquettedoittoujourscommencerparunelettre,etc.). Ltiquettedoittreplaceavantlinstructionbreaketdoittresuiviedundoublepoint. Exemple :afficherdansunebotededialoguelavaleurdescompteursietjjusqucequejsoitgaltrois.
<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++) {
- 1-
if (j==3) { continue; } alert("La valeur de j est gale : "+j); } </script> Ici,lescriptaffichelemessagedaffichagedelavariablejquisincrmentechaquepassagedelaboucle.Lorsquela variablejestgale3,linstructioncontinuesautelinstructiondaffichagedelabotededialogue.Ducoup,lavaleur 3nestpasaffiche,maislescriptcontinuesondroulementetaffichelesvaleursrestantes.
- 2-
Lagestiondesexceptions
JavaScript fournit plusieurs instructions ou structures de contrles permettant de grer les erreurs renvoyes par le navigateurlorsdelexcutiondescript.
1.Lastructuretrycatch
Cettestructurepermetdexcuterlesinstructionsplacesentrelesaccoladesetcorrespondantsaumotcltry(cest leblocdessai).Danslecasouneerreurestdtecteparlenavigateur,lesinstructionssituesentrelesaccolades correspondantaumotclcatch()sontexcutes.Lasyntaxedecettestructureestlasuivante : try { Instructions ; } catch(identificateur){ Instructions ; } Exemple :afficherunmessageindiquantlimpossibilitdeffectuerdunedivisionpourlaquelleaucunevariablecorrespondant audiviseurnestdclare.
<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 :
- 1-
<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.
- 2-
Rledesfonctions
LesfonctionsfontpartiedeslmentsfondamentauxenJavaScript,aveclesmthodesdontnousavonsdjparl.La notiondefonctionestassezprochedecelledemthode,carcesonttouteslesdeuxdesprocduresquieffectuentune tche spcifique. La diffrence rside dans le fait que, les mthodes sappliquent un objet particulier alors que les fonctions sont totalement dtaches de cette notion. Il existe deux types de fonction, celles prdfinies, donc dj intgresJavaScriptetcellesdfiniesparlutilisateur.Pourlespremires,ilsuffitdelesemployeraumomentvoulu sansdclarationpralable.Pourlessecondes,ilfautimprativementlesdclareravantdepouvoirlesappelerplusloin dans le script. Les fonctions prdfinies sont proches des mthodes attaches aux objets. Le tableau cidessous permetdidentifierquelquesfonctionsutiles : Fonctions prdfinies
Rle
escape()
RenvoieunechanedecaractresremplaantparsacodificationASCII,lachaneplaceentre lesparenthses. ExcutelecodeJavaScriptplacentrelesparenthses. Testelavaleurplaceentrelesparenthsespoursavoirsiellecorrespondounonun nombrefini.EnJavaScriptunnombreestditfinilorsquesavaleurestsuprieure 1.7976931348623157E+10308 ouinfrieure1.7976931348623157E+10308 . Testelavaleurplaceentrelesparenthsespoursavoirsiellenestpasnumrique.Renvoie truesiletestestvrai,falsedanslecascontraire. Renvoielersultatduneconversionenchiffresdelavariableplaceentrelesparenthses. Renvoielersultatduneconversionentextedelavariableplaceentrelesparenthses.
eval()
isFinite()
isNaN()
Number() String()
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. Exemple : Function MaFonction(argument1, argument2) { Instruction1 Instruction2 } Attention,lesrglesdenommagedesfonctionssuiventlesmmesrglesquecellesdesvariables,savoir :
- 1-
Lenomdoitcommencerparunelettre. Le nom peut tre compos de lettres, de chiffres et des caractres _ et & mais nutilisez pas de caractres spciaux,rservsoudespaces. Lesparenthsesplaceslafindunomdelafonctionpermettentdepasserdesarguments(variables).Mme si vous ne passez aucun argument par la fonction, la prsence des parenthses est indispensable. Ne les oubliez,donc,pas.
Lesparenthsespermettentdefairepasserdesarguments.Cesargumentscorrespondentunnometnesontpas typs.Silyenaplusieurs,ilfautlessparerparunevirgule.Silnyenapas,ilfautveillerajouterlesparenthses toutdemme,souspeinedegnreruneerreur. Attention,galementnepasoublierlaccoladefermante. RappelezvousaussiqueJavaScriptestsensiblelacasseetqueMaFonctionnarienvoiravecmafonction. Ilnyapasdelimiteconcernantlenombredefonctions,parcontreilnepeutyavoirplusde255arguments(cequiest largementsuffisant).Lesaccoladespermettentdediffrencierledbutetlafindechaquefonction. Pourterminer,ilvautmieuxquedeuxfonctionsneportentpaslemmenom.Sicesttoutdemmelecas,JavaScript prendencompteladernireoccurrenceetdlaisselesautresfonctionsdummenom. VoicilecodedunefonctionJavaScriptpermettantlaffichagedunmessage : <html> <head> <title>Fonctions</title> <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-
mthodedocument.write()permetensuite,dafficherdanslapagelersultatrenvoyparlafonction.
2.Utiliserplusieursfonctionsettransfrerdesdonnesentreelles
Unedesparticularitsdesfonctionsconcernelusagedesvariables.Eneffet,siunevariableestdclareendehors dune fonction, elle est disponible pour lensemble du script. Elles sont alors appeles des variables globales. Par contre, lorsque les variables sont dclares lintrieurdune fonction (elles sont alors dsignes sous le terme de variableslocales),ellesnesontpasaccessiblesparlesautresfonctions. Ainsi,danslecodesuivantlavariablevariable1nestpasdisponibleetlaffichagenepourradoncpasfonctionner. <html> <head> <title>Les fonctions</title> <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.
- 3-
<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
- 4-
seraretourne. Exemple : afficher, dans une bote de dialogue, le rsultat dune addition, dont le calcul est ralis dans une fonction nommetotal.
<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">
- 5-
function externe(parametre) { var variable1 = parametre; function interne() { var variable2=10; resultat=variable1+variable2; alert("Laddition des deux variables provenant de deux fonctions diffrentes est : "+resultat); } return interne; } var affiche= externe(1); affiche(); </script> Lescriptsediviseendeuxfonctionsdiffrentes.Lapremirefonctionappeleexternedisposedunparamtre(dans cetexemple,gal1)transmisparlinstructionvaraffiche=externe(1). Ce paramtre est, ensuite, transmis la variable nomme variable1. La fonction interne qui suit a pour objectif de renvoyeretdafficherlersultatdelavariable1issuedelafonctionparentenommeexterneetdelavariable2dfinie en son sein. Lensemble du traitement est enfin effectu, lors de lappel de la variable affiche, qui nest ellemme quunappellafonctionexterne(). Attentioncependant,lesclosurespeuventprovoquerdesfuitesdemmoirenfastespourledroulementdesscripts enralentissant,voireenbloquantletraitementdunavigateur.
5.Fuitesdemmoire
Unefuitedemmoirecorrespondunesurutilisationdescapacitsdelammoiredelordinateur.Enrglegnrale, elleestinvolontaireetrsultedufaitquelenavigateurnelibrepaslammoiredontilnaplusbesoin.Ceproblme estdautantpluscrucialavecleweb2.0etlutilisationdAjax.Eneffet,enutilisationclassique(cestdiresansAjax), les pages se succdent et le garbage collector de JavaScript (ramassemiettes en franais) effectue un travail de librationdelammoiredesobjets,quineserontplusutilesparlasuite.AvecAjax,lesdonnescomposantlapage, peuvent se multiplier puisquil ny a plus forcment de changement de page. Internet Explorer est nettement plus concernparceproblme,dufaitquilutilisesonpropresystmedegarbagecollector,quipeutentrerenconflitavec celui de JavaScript. En dfinitive, les closures constituent une des principales causes de gnration de fuites de mmoire.
6.LemotclThis
Cemotclpermetdidentifierlobjetsurlequelvousdsireztravailler(onparledinstancedelobjet).
- 6-
Utiliserunefonctionpourcrerunobjet
EnJavaScriptcommedanslaplupartdeslangagesorientsobjet,ilestpossibledenepasselimiterauxobjetsnatifs deJavaScriptetdecrersespropresobjets. IlexistedeuxfaonsdeconstruireunobjetenJavaScript.Ilestpossibledelefairedirectementeninitialisantunobjet ouenpassantparlintermdiairedunprototype. Lamthodeduprototypageestlapluscouranteetlaplussimpleutiliser.Pouryparvenir,ilfautsuivredeuxtapes successives. Tout dabord, il faut crer une fonction qui sert de constructeur au nouvel objet et de dclaration des diffrentes proprits.Celasappelleici,unprototypagecarilsagitbiendeconstruireunprototypedobjet. Function nomdemonobjet(proprit1, proprit2, proprit3){ This.proprit1=valeurProprit1 ; This.proprit1=valeurProprit2 ; This.proprit1=valeurProprit3 ; Vouspouvezensuiterutiliserlobjetlaidedesmotsclsvaretnew : Var monobjet=new nomdemobjet("valeur1","valeur2","valeur3") ; Exemple : afficher, dans une bote de dialogue, les informations dun objet personnel appel voiture et caractris par une marque,unmodleetuneanne.
<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.
- 1-
Lesvnements
Les vnements sappliquent aux objets prsents dans la page : les boutons, les champs ou les ascenseurs de la fentremaisaussilapageenellemme.Cestgrceauxvnementsquelapagedevientinteractive.Ilestpossible dactiveruneactionlorsquunvnementseproduit.Lasyntaxesuivrecorrespond : vnement= "actionaraliser" ; Il suffit, donc, de nommer lvnement (voir la liste cidessous), de le faire suivre du signe gal = et de rdiger lactionquidoitluicorrespondre. Objetsconcerns window window image,window window OnLoad OnUnLoad Onabort OnMove vnement SeProduit Auchargementdelobjet. Audchargementdelobjet. larrtduchargementdelobjet Audplacementdelafentre. Auredimensionnementdela fentre. Audfilementdelafentrepar lascenseur.
window
OnResize
window
OnScroll
button,checkbox,document,link, radio,reset,select,submit document,link
OnClick
Auclicsouris.
OnDbClick
Audoubleclicsouris. Aumaintiendelapressionsurle boutongauchedelasouris. Aurelchementduboutondela souris. Aupassagedelasourissurundes objets. Aumomentdudplacementdela souris. lasortiedelasourissurundes objets.
button,document,link
OnMouseDown
button,document,link
OnMouseUp
area,layer,link
OnMouseOver
aucun
OnMouseMove
layer,link
OnMouseOut
button,checkbox,fileUpload,layer, password,radio,reset,select, submit,text,textArea,window form image
OnFocus
larceptionducurseurdansun desobjets.
OnReset abort
larinitialisationdunformulaire. larrtduchargementdelimage. Aumomentdumaintienenfonc dunetoucheduclavier. Aumomentdelapressionsurune toucheduclavier.
document,image,link,textArea
Keydown
Keypress
- 1-
Keyup
Aumomentdurelchementdune toucheduclavier. Aumomentdunglissdpos danslafentre. Aumomentdunchangementdun desobjets.
window
Dragdrop
fileUpload,select,submit,text, textArea button,checkbox,fileUpload,layer, password,radio,reset,select, submit
OnChange
Onblur
Aumomentdelapertedufocus.
image,window
Onerror
Lorsquuneerreursurlobjet 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:
q
inclurelesactionsdansunefonctioncommenouslavonsvuprcdemment affecterunvnement(onClick,onChange)llmentHTML(lmentprsentdanslapartieBODY) activerlafonction(prsente,elle,danslapartieHEAD),enlaplaantentreguillemets.
Lasyntaxecorrespondalors : <ObjetHTML vnement= "mafonction()" ;/> Si la fonction nattend pas darguments, il faut, tout de mme, laisser les parenthses ouvrante et fermante. Au contraire,sicelleciattenddesarguments,ilfautlesfairefigurerentrecesparenthses. videmmentpourquecelafonctionnecorrectement,ilfautquelafonctionsoitrdigeavantsonappel. Exemple :enreprenantlexempleprcdent,associerlaffichagedunebotededialogueauclicsurunbouton.
<html> <head> <title>Les Fonctions et les vnements</title> <script language="javascript"> function MaFonction() { alert("Ceci est ma premire fonction") } </script> </head> <body> <form id="form1" name="form1" method="post" action="" >
- 2-
<p> <input type="submit" name="Submit" value="Fonctionner" onClick="MaFonction()" /> </p> </form> </body> </html> Tantquelevisiteurnecliquepassurlebouton,lafonctionnesexcuterapas. Ilestpossible,galement,dutiliserlesvnementspourpasserdesargumentsauxfonctions. Exemple :passerlavaleuraffecteunboutoncommeargumentunefonction,permettantdaffichersonnom.
<html> <head> <title>Affiche le nom du bouton</title> <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.
- 3-
UtilisationdeJavaScriptaveclesformulaires
Lutilisation de JavaScript pour les formulaires est lutilisation la plus frquente. En effet, il est indispensable de contrler la validit des champs du formulaire pour dtecter des saisies nonconformes, qui seraient lorigine derreurs,lorsdetransmissiondesinformationsunebasededonnes. Lescaslesplusgnralementrencontrssont,parexemple,lasaisieduneadresseemailnonconformeoulabsence desaisiedansunchampobligatoire. Enplusducontrledessaisieseffectues,ilestgalementpossibledeprocderdescalculsentreplusieurschamps numriquesdunformulairepourdterminer,parexemple,unsoustotalpartirdunequantitetdunprixunitaire. Le dernier exemple prsent dans ce chapitre nous permettra de parcourir lensemble de ces fonctionnalits par la ralisationdunformulairederservationdeplusieursproduits,satransmissionetsonimpression. Pourdbuter,examinonslobjetForm.
- 1-
LobjetForm
Toutecrationdeformulairencessitelajout,danslapageHTML,dunobjetdnomm Form contenantleschamps detexte,leslistesdroulantesetautrescontrlescommelesboutonsradiooulescasescocher. LobjetFormestunsousobjetdelobjetdocumentdanslahirarchiedesobjetsJavaScript.Ildisposedepropritset demthodesquipermettentdelemanipuleroudeluiaffecterdesactionsspcifiques(effacementducontenudetous leschampsduformulaire,envoiparemaildesinformationssaisies). DtaillonsquelquespropritsetmthodesutileslamanipulationdelobjetForm.
1.Proprits
action Correspondlactionquidevratreexcuteparleformulaire(gnralementilsagitdemailto :). encoding Dfinit le type de codage des donnes employer lors de lenvoi du formulaire (par exemple, text/plain permet dindiquerquelesdonnesserontenvoyessouslaformedetexte). length Correspondaunombredeformulairesdanslapage. method Correspondlamthodedenvoiduformulaire(GetouPost). name Correspondaunomduformulaire. target Dsignelafentrecibledunjeudecadresdevenantactiveaprslenvoidunformulaire.
2.Mthodes
handlEvent() Permetdecentraliserletraitementversunseulgestionnaire(mthodenonreconnueparInternetExplorer). Reset() Effacelecontenudeschampsduformulaire. Submit() Envoieleformulaire.
- 1-
Leslmentsdeformulaire
Les lments de formulaire reprsentent les champs, les cases cocher, les boutons radio ou les listes droulantes, permettantdercuprerlesinformationssaisiesouchoisies. Le placement des lments de formulaire est rendu plus facile en utilisant un tableau sans quadrillage, cela permet daligner les tiquettes de description dans une premire colonne et les champs de formulaire dans une seconde. Le tableauestluimmeintgrdansleformulaire. Pour effectuer des contrles, il est ncessaire de rdiger une fonction JavaScript placer dans la partie HEAD de la page.Cettefonctionestappeleaumomentduclicsurleboutonduformulaire,parlinstructiononClick= "controle()". Pourmmoire,voiciuntableaupermettantdefairelacorrespondanceentrelesbalisesHTMLetlesobjetsJavaScript : BaliseHTML <INPUT TYPE ="text"> <TEXTAREA> < INPUT TYPE ="checkbox"> < INPUT TYPE ="radio"> <SELECT> < INPUT TYPE ="submit"> < INPUT TYPE ="reset"> < INPUT TYPE ="password"> < INPUT TYPE ="hidden"> < INPUT TYPE ="file"> ObjetJavaScript text textarea checkbox radio select submit reset password hidden fileUpload Description Zonedesaisiemonoligne Zonedesaisiemultilignes Casecocher Boutonradio Zonedeslection Permetlenvoidesdonnes Rinitialiseleformulaire Zonedemotdepasse Champcach Zonedeslectiondefichier
JavaScriptpermetdeffectuerdescontrlessurcesobjets :
1.Manipulationdechamptext
Leschampstextpermettentderecevoirdesvaleurssaisiesparlutilisateur,maisgalementdafficher des rsultats (parexemple,ceuxobtenuslasuitedecalculs). Le champ text est monoligne, il ne suffit pas une importante chane de caractres. Dans ce dernier cas, il est souhaitabledutilisertextarea. Pouraccderlavaleurdunchamptextdeformulaire,ilfaututiliserlasyntaxepointe.Ainsi,pouraccderlavaleur saisie dans le champ1 du formulaire Form1 et la stocker dans la variable ma_variable, il faudra utiliser la syntaxe suivante :ma_variable=document.Form1.champ1.valueodocumentestfacultatif. Proprits value Description Correspondauxinformationssaisiesdanslechamp. Correspondlavaleursaffichantpardfautdansle champtexte. Mthodes select() Description Afficheenvidoinverselechamptexteosetrouve lecurseur.
defaultValue
- 1-
blur() focus()
Librelechamptexteducurseur. 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 :
- 2-
<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
- 3-
value
Valeurdellment. Correspondlavaleursaffichantpardfautdansle champtextarea.
defaultValue
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>
- 4-
</html> Lafonctionmanip_champ_textarea()faitlaconcatnationdesdeuxpremierschampsduformulaire,puiscritlavaleur dutroisimechamp,enfaisantunretourlaligneentrecesdeuxpartiesgrceNewline(\n). Ici, il sagit simplement dutiliser loprateur de concatnation + pour obtenir une nouvelle chane de caractres. La fonctionestexcuteaumomentduclicsurleboutonConcatener.
3.Contrledescasescocher
Pourlescasescocher,ilestpossibledesavoirsiellessontcochesounonet,doncdorienterledroulementdu script. Ilestpossibledefaireplusieursrponsesencochantplusieurscases,pourunemmequestion. Proprits checked Description Valeurboolennegaletruelorsquelacaseest cocheetfalselorsquellenelestpas. Valeurboolennecorrespondantlacasecoche (cestdireaveclavaleurtrue)aumomentdu chargementduformulaire(cestlavaleurpardfaut).
defaultChecked
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() {
- 5-
if((form1.marche.checked ==true) && (form1.vp.checked ==true)) alert("Cest bien de marcher de temps en temps"); else if(form1.vp.checked ==true) alert("Ce nest pas bon pour lenvironnement"); else if(form1.marche.checked ==true) alert("La marche est bonne pour la sant"); else alert("Rpondez en cochant au moins une case"); } </script> </head> <body> <form id="form1" name="form1" method="" action="" > <p> </p> <table width="643" border="0"> <tr> <td width="633">Quel mode de transport utilisez-vous pour vous rendre sur votre lieu de travail ? </td> </tr> <tr> <td><input name="marche" type="checkbox" id="marche" value="checkbox"> Marche </td> </tr> <tr> <td><input name="vp" type="checkbox" id="vp" value="checkbox"> Véhicule personnel </td> </tr> </table> <p> </p> <p> <input type="submit" name="Submit" value="Envoyer" onClick="controlecaseacocher()" /> </p> </form> </body> </html> Il est ncessaire dappliquer quatre tests diffrents pour traiter les quatre situations possibles. La validit du test permettradafficherlabotededialoguecorrespondante.
4.Contrledesboutonsradio
Lesboutonsradiodoiventporterlemmenomafindepouvoirlesidentifierenfonctiondeleurnumrodindex.Ainsi, lepremierboutonradioestidentifipar0,lesecondpar1etletroisimepar2. Lorsquunclicslectionneunbouton,touslesautressontdslectionns cequidiffrencielutilisationdesboutons radiodecelledescasescocher. Propritsessentielles checked Description Valeurboolennegaletruelorsqueleboutonest activetfalselorsquilnelestpas. Valeurboolennecorrespondantauboutonactiv (cestdireaveclavaleurtrue)aumomentdu chargementduformulaire(cestlavaleurpardfaut).
defaultChecked
- 6-
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>
- 7-
<input type="submit" name="Submit" value="Envoyer" onClick="controleboutonradio()" /> </p> </form> </body> </html> La fonction controle_bouton_radio teste les boutons radio, appels connaitre_Javascript suivis du numro dindex entrecrochets.Enfonctiondelapropritchecked,unmessagesaffichedansunebotededialogue.
5.Contrledesvaleursduneslectiondeliste
Lecontrledesvaleursdunelisteserapprochedeceluidesvaleursdescasescocher,leslmentsdelalistetant identifisgalementparunnumrodindex.LlmentchoisiestsimplementidentifiparlinstructionselectedIndex. Propritsessentielles length Description Correspondaunombredevaleursdanslaliste. Correspondunevaleurdanslaliste,identifiepar sonnumrodanslindex.Lindexcommencezro. Valeurpardfautslectionnedanslaliste.
selectedIndex
defaultSelected
Exemple : ouvrir des botes de dialogue permettant dafficherunmessagediffrent,enfonctionduneslectionfaitedans unelistedroulante.
<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="" >
- 8-
<p>Quelle tait la vitesse maximum du TGV lors de son record le 3 avril 2007 ? </p> <select name="Question" id="Question"> <option>630,1 Km/h</option> <option>477,8 Km/h</option> <option>574,8 Km/h</option> </select> <p> </p> <p> <input type="submit" name="contrler" value="contrler" onClick="controleliste()" /> </p> </form> </body> </html> Le script sexcute au moment du clic sur le boutoncontrler. La fonction controleliste teste lindice de la slection danslaliste(lepremierindicetantidentifiparlenumrozro).Enfonctiondecetteslection,lescriptafficheune botededialogue.
6.Contrledesvaleursdunelisteslectionsmultiples
Leslistesslectionsmultiplespermettentdeslectionnerplusieursvaleursdelalisteenutilisantlatouche[Alt]pour lesslectionscontigusetlatouche[Ctrl]pourlesslectionsquinelesontpas. Le script va contenir une boucle sur les lments de la liste, qui contrlera pour chacun si leur valeur a t slectionne. Propritsessentielles length Description Correspondaunombredevaleursdanslaliste. Correspondunevaleurdanslalisteidentifiepar sonnumrodanslindex.Lindexcommencezro. Valeurpardfautslectionnedanslaliste.
selectedIndex
defaultSelected
Exemple :afficherdansdesbotesdedialoguesuccessives,lesvaleursslectionnesdansunelisteslectionmultiple.
<html> <head> <title>manipulation_liste_multiple</title> <script language="javascript"> function maniplistemultiple()
- 9-
{ var ville=""; nb=form1.liste_ville.length; i=form1.liste_ville.selectedIndex; for (i = 0;i<nb;i++){ if(form1.liste_ville.options[i].selected){ ville=form1.liste_ville.options[i].value; alert(ville+" est slectionne"); } } } </script> </head> <body> <form id="form1" name="form1" method="" action="" > <table width="146" border="0"> <tr> <td width="140" height="108"><select name="liste_ville" size="5" multiple id="liste_ville"> <option value="Paris">Paris</option> <option value="Lyon">Lyon</option> <option value="Marseille">Marseille</option> <option value="Lille">Lille</option> <option value="Strasbourg">Strasbourg</option> </select> </td> </tr> <tr> <td><input type="button" name="Submit" value="Sélectionner" onClick="maniplistemultiple()"></td> </tr> </table> </form> </body> </html> Le script sexcute aprs un clic sur le boutonSlectionner. La fonction maniplistemultiple dbute en initialisant la variableville.Puis,ellecomptelenombredlmentsprsentsdanslalisteettransfredansunevariablenommei, lenumrodindicedelavaleurslectionne.Ensuite,uneboucleparcourtlensembledeslmentsdelalistepourles affichersuccessivementdansunebotededialogue.Danslecasoaucunevillenestslectionne,riennesaffiche.
7.Lenvoidefichierparformulaire
Cest un type dobjet formulaire qui permet denvoyer un fichier sur un serveur. Il se prsente sous la forme dun champ, de type texte, destin recevoir le chemin du fichier, plac sur le disque dur. Il est galement possible dutiliser le bouton Parcourir afin davoir un contrle plus visuel. Attention cet objet peut tre dangereux, car il est possibledajouternimportequeltypedefichierycomprisceuxcomportantducodemalveillant.Pourvrifierquilne sagitpasdefichierdangereux(cestdiretouslesfichiersportantuneautreextensionquegifoujpg,parexemple), ilestprfrabledassocierunefonctiondecontrle.Poureffectuercegenredecontrle,ilfautmanipulerlobjetString. Un exemple de ce genre de contrle est, donc, donn au chapitre Les principaux objets JavaScript en dtail sur les chanesdetexte.
- 10 -
Valideretenvoyerunformulaireparemail
Pour tout dveloppeur de site web, les formulaires constituent un lment essentiel de linteractivit avec les internautes.Ilspermettentderecueillirdesinformationsdansunebasededonnesousilusagedunebasenestpas envisag,detransmettrelesinformationssaisiesdansleformulaireparemailsimplement. Danscetexemple,ilsagitdeconcevoirunformulairederservationdarticlesquipourratreimprimetenvoyune adresseemaildtermine.LesinformationsneserontpasstockesdansunebasedetypeMySql,parexemple,mais serontenvoyesparemailundestinataireprdfini,quipourratraitercesdonnes,dsrception. Lacrationduformulaireneserapastraitedanscetouvrage,ilestpossibledelecrerenhtmlouparunditeur HTMLdetypeDreamweaver,parexemple. Commeprcdemment,linsertionducodeJavaScriptpermettradevrifierlaprsencedinformationsdansleschamps de formulaire et de contrler leur contenu. Le rsultat de ces contrles permettra denvoyer des messages davertissementouencoredeffectuerdescalculs.
Leformulairecomporte,enplusdeslmentsdjdtaills,quatreboutonsauxfonctionsdistinctes. LeboutonTransmettreeffectuelatransmissiondesinformationsparemail. Codedubouton : <input name="bouton_transmettre" type="submit" id="bouton_transmettre" value="Transmettre"> CeboutondetypeSubmitdclenchelenvoiduformulaire. Codeduformulaire : <form action="mailto:[email protected]" method="post" enctype="text/plain" name="Formulaire_reservation" LeboutonRinitialiserpermetdeffacerlecontenudetouslescontrlesduformulaire. <input name="bouton_reinitialiser" type="reset" id="bouton_reinitialiser" value="Réinitialiser"> LeboutonImprimerpermetlimpressionduformulaire. function Imprim() { window.print();} LeboutonValiderpermettraledclenchementdesdiffrentstraitementsinclusdanslafonctionJavaScriptdecontrle.
- 1-
Le premier traitement concerne le champ Nom. Pour ce champ, vous dsirez convertir la saisie de minuscule en majuscule.Pourcela,vousferezappellamthodetoUpperCase()quipermetdeconvertirlachanedecaractres. LesecondtraitementtestelecontenuduchampCode_Postal.Toutdabord,vouseffectuezuntestpourinterdirela possibilitdun champ vide. Ensuite, vous le testez nouveau pour nautoriserquelasaisiedun champ numrique. Dansunautrecas,commeparexemplelasaisiedelettredanscechamp,unavertissementsaffichedansunebotede dialogue.VousutiliserezIsNaN(IsNotaNumber)pourfaireletest. Letroisimetraitementpermetdetesterlavaliditduchampemailparlaprsencedunearobasedanslachanede caractres. Vous utilisez pour le faire la mthode search(@)qui renvoie dans une variable, la position de larobase dans la chane de caractres. Si cette position est ngative, cela signifie quil nexiste pas darobasedanslachane. Ladressenestdoncpasvalide.Biensr,vouspouvezprocderdautrestests,notammentpoursavoirsilextension du nom de domaine est raliste. Malgr tout, il est impossible dexclure la saisie dune adresse farfelue de type [email protected]. Le quatrime traitement de cette fonction permet dafficher le prix dun article partir de sa slection dans la liste droulante.Pourcefaire,vousutilisezlinstructionswitchquipermetdetraiterlensembledescasdeslectiondela liste.Enfonctiondecetteslection,vousaffichezleprixdanslechampPrix_unitaire_P1ouP2correspondantchacun auchoixdunpremieretdunsecondproduit. LecinquimetraitementpermetlecalculdessoustotauxP1ouP2eneffectuantleproduitdelavaleurdeschamps QuantitetPrix_unitaireP1ouP2. LesiximetraitementcalculelesoustotalHorsTaxeparadditiondeschampssous_totalP1etsous_totalP2quisont pralablementconvertisennombreparlinstructionparseInt(). Le septime traitement calcule les montants TTC par produit des soustotaux avec 1.196 et arrondi en utilisant Math.round. Le huitime traitement contrle si la case cocher Rservation est coche. Si ce nest pas le cas, une bote de dialogue,rappelantcetteobligation,saffiche. LeneuvimetraitementpermetdimprimerleformulaireparlinstructionfigurantdanslafonctionImprim().Celleciva sedclencherlorsduclicsurleboutonImprimerduformulaire. Pour terminer, vous transmettez les valeurs saisies ou calcules dans les champs du formulaire, en cliquant sur le boutonTransmettre. Ilconvientdenoterquelesinformationstransmisesserontprcdesdunomduchampdfini,lorsdelacrationdu formulaire,etdusignegal(=). Voiciunexempleducontenuduemailreu,aprstransmissionduformulaire :
LeboutonRinitialiserpermetdemettrezrotousleschampsduformulaire.
Latransmissiondunformulaireparemailpeutposercertainsproblmes.Ilestncessairedouvrirleclientde messageriepardfautetdefaireun envoyertransmettre pourterminerlenvoi.
- 2-
<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;
- 3-
sous_total_P1=parseInt(Formulaire_reservation.Sous_total_P1.value); sous_total_P2=parseInt(Formulaire_reservation.Sous_total_P2.value); Total_HT=sous_total_P1+sous_total_P2; Formulaire_reservation.Total_HT.value=Total_HT; Total_TTC=Total_HT*1.196; Total_TTC_arrondi=Math.round(Total_TTC*100)/100; Formulaire_reservation.Total_TTC.value=Total_TTC_arrondi; if (Formulaire_reservation.Reservation.checked==false) alert("Veuillez valider les conditions gnrale de rservation"); } Lamthoderound()delobjetMathesttraitedanslechapitreLesprincipauxobjetsJavaScriptendtail.
Pour valider les masques de saisie, il est galement possible dutiliser lobjet RegExp dans une expression rgulirequiseragalementtraiteauchapitreLesprincipauxobjetsJavaScriptendtail.
Leformulaireestundesobjetsimportantdelacompositiondunepage,cependantilyenadautresenJavaScriptquil convientdebiendcrire.
- 4-
Objetsetnavigateurs
Commenouslavonsvuaucoursdeschapitresprcdents,leJavaScriptestinterprtdemanirediffrenteselonles navigateurs. Au sommet de la hirarchie des objets JavaScript, il faut distinguer lobjet navigator qui correspond au navigateurutilispourlalecturedelapagedelobjetwindowreprsentantlafentre.
- 1-
LesobjetsJavaScript
JavaScriptfournituncertainnombredobjetsdfinisdanslenoyauetdonc,manipulablestoutmoment.Cesobjetsdu noyaunedpendentpasdunavigateuraveclequelilssontutilissetilsserontdtaillsenfindechapitre.
1.Lobjetnavigator
Lobjetnavigatorcorrespondaunavigateurutilisparlevisiteurdelapage.Cetteinformationpeuttreprimordiale notamment lorsque vous associez JavaScript et DHTML, linterprtation de celuici tant diffrente selon les navigateurs et leur version. Bien videmment, les informations de lobjet navigator sont en lecture seule, ce qui sembleassezlogique.DanslahirarchiedesobjetsJavaScript,lobjetnavigatorestlilobjetwindow.Vouspouvez doncyaccderaveclesdeuxsyntaxessuivantespossibles : window.navigatorousimplementparnavigator. Lespropritsdelobjetnavigatorpermettentdobtenirdesinformationsessentiellespourorienterlevisiteuretainsi, luipermettredoptimisersavisite.Ainsi,lefaitdesavoirsilescookiessontactivsoupaspermetdalerterlevisiteur, que le site ne pourra pas fonctionner correctement sil ne les active pas. De mme, la connaissance de la langue utiliseparlenavigateurpermettradorienterautomatiquementlevisiteurverslespagescorrespondantcelleci.
a.Lesproprits
Proprit appCodeName appName appVersion
Rsultat Retournelecodedunavigateur. Retournelenomdunavigateur. Retournelaversiondunavigateur. Retournetrueoufalsepourindiquersilescookies sontactivs. Retourneletypedeprocesseurdelordinateur utilis. Dterminesilenavigateurestapteexcuterdes appletsJava. Retourneuntableaudestypesmimessupportspar lenavigateur. Retournelaplateformesurlaquellelenavigateur fonctionne. Retourneuntableaudespluginsinstallssurle postedunavigateur. Retournetouteslesinformationsconcernantle navigateurclient. Retournelalangueutiliseparlenavigateur.
cookieEnabled
cpuClass
javaEnabled()
mimeTypes
platform
plugins
userAgent
userLanguage
Exemple :afficherlesinformationsdunavigateurutilisgrcelaproprituserAgent.
- 1-
<script language="JavaScript"> agent=navigator.userAgent; alert(agent); </script> Les informations affiches correspondent au type et la version du navigateur, la plateforme utilise et la versiondeCLRprsentesurlamachine.LeCLRcorrespondlamachinevirtuelleduframework.NETdeMicrosoft.
b.Lesmthodes
Les mthodes sont moins nombreuses et moins utiles. Elles permettent essentiellement de manipuler les prfrencesdunavigateur. Mthode plugins.refresh() Rsultat Rafrachitlalistedespluginsinstallssurlepostedu navigateur. Dterminelesprfrencesdunavigateur. Sauvegardelesmodificationsapportesaux prfrencesdunavigateur.
preference()
savePreferences()
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.
- 2-
EnouvrantcescriptavecMozilla,Firefox,larponsesera Netscape . 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>
- 3-
Le script sexcuteauchargementdelapageetutiliselespropritsdelobjetnavigatorpourdonnerunevaleur auxvariablesnavigateuretversion.Lavaleuraffectecorrespondunechanedetroiscaractresextraitsdeces proprits, par lemploi de la mthode substring() de lobjet String que nous dtaillerons ultrieurement dans ce chapitre. Il reste, ensuite, comparer cette chane de caractres, au dbut du nom des navigateurs (ici Mic pour Microsoft Internet Explorer, Net pour Firefox Mozilla et Ope pour Opra). Une bote de dialogue peut, alors, tre afficheenreprenantlecontenudesvariables.
2.Lobjetwindow
Lobjetwindow(fentre)estlobjetlepluslevdanslahirarchiedesobjetsJavaScript.Cestleparentdetousles objets placs lintrieur. Cet objet est souvent qualifi dimplicite, car il nest pas ncessaire de le nommer pour accderauxobjetsplacsendessous.Cettesimplicitdutilisationestattnueparlefaitque,quelquesunesdeses propritsetmthodesnesontpasinterprtescorrectementpartouslesnavigateurs.Malgrtout,cest un objet quiestsouventutilis,carcestceluiquicomporteleplusgrandnombredepropritsetdemthodes.Ilestdonctrs importantdelesdtailler.
a.Lesproprits
Proprit closed
Rsultat Retournetruesilafentre laquelleonserfreestferme. Correspondaumessage permanentaffichdanslabarre destatutssitueendessousde lafentre.
Reconnupar : InternetExplorer,Mozilla,Firefox, Opra.
defaultStatus
InternetExplorer,Mozilla,Firefox, Opra.
document
Correspondaudocumentcourant.
InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
frames
Correspondlensembledes cadresdelobjetwindow. Correspondaucontenudelobjet history. Correspondlahauteurutilisable dunefentre. Correspondlalargeurutilisable dunefentre. Correspondaunombretotalde cadresutilissdanslafentre. CorrespondlURLdelapage chargedanslafentre. Correspondlabarredadresse dunavigateur. Correspondlabarredemenudu navigateur. Correspondaunomdonnla fentre. Correspondaunomdelafentre quiacrunefentreaumoyen delamthodeOpen().
history
innerHeight
Mozilla,Firefox,Opra.
innerWidth
length
InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
location
locationbar
menubar
name
opener
- 4-
outerHeight
Correspondlahauteur extrieuredelapageenpixels. Correspondlalargeur extrieuredelapageenpixels. Correspondlaposition horizontaleenpixelsdela fentre. Correspondlapositionverticale enpixelsdelafentre. Correspondlapagecomprenant lensembledescadresdunepage decadres. Correspondlabarredoutils personnelle. Correspondauxbarresde dfilementhorizontaletvertical. Correspondlafentrecourante (window). Correspondaumessagealatoire quipeuttreaffichlorsdun vnementdanslabarrede statutssitueendessousdela fentre. Correspondlabarredoutilsdu navigateur. Correspondlafentreduplus hautniveaulintrieurdune pagedecadres. Correspondlafentrecourante (self).
outerWidth
pageXoffset
pageYoffset
parent
personalbar
scrollbars
self
status
toolbar
top
window
b.Lesmthodes
CertainesdentresellesontdjttraitesauchapitreUtilisationdesconstantes,variablesetoprateurs.Pourle reste,ilsagitdemthodesconcernantlagestiondesfentres(ouverture,fermeture,position,affichage,etc.),oula navigation des pages visites. Le tableau suivant fournit un descriptif de lensemble des mthodes de lobjet window : Mthode Rsultat Afficheunebotededialogue comportantunmessage davertissementetunboutonOK. Revientdunepageenarrire danslhistoriquedespages visites. Reconnupar
alert()
back()
blur()
Dsactivelafentrecourante.
close()
Fermelafentrecourante.
- 5-
confirm()
Afficheunebotededialogue comportantdeuxboutons :OKet Annuler. Effectueunerecherchedetexte danslapageactive.
find()
focus()
Activeunefentre.
forward()
Avancedunepageenavantdans lhistoriquedespagesvisites. Chargelapagedfiniecomme pagedaccueildanslenavigateur.
home()
moveTo()
Dplacelafentreactive.
open()
Ouvreunenouvellefentre.
print()
Imprimelapageactive.
prompt()
Afficheunebotededialogue permettantlutilisateurdesaisir unevaleur. Modifielatailledelafentre activepartirducoininfrieur droitenfonctiondunequantit depixelsindique. Modifielatailledelafentre activeendterminantlaposition ducoininfrieurdroit. Effectueuntraitementintervalle rgulier.
resizeBy()
resizeTo()
setInterval()
setTimeOut()
Dclencheuneminuterie.
scrollBy()
Dcalelecontenudunefentre enfonctiondunequantit exprimeenpixels. Dcalelecontenudunefentre endterminantlanouvelleorigine ducoinsuprieurgauche. Interromptlechargementdela pageactuelle.
scrollTo()
stop()
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
- 6-
des messages de rappel (date et heure de runion, par exemple) ou pour des informations se renouvelant rapidement. Lasyntaxedelamthodeopen()estlasuivante : f=window.open("page", "nom", "paramtre1,parametre2,parametre3") Ofestlenomdelobjetreprsentparlanouvellefentre,pageestladressedelapageafficher,nomestle nomdelanouvellefentreetparamtre1/2/3...correspondentdesparamtresoptionnels(position,taille,etc.). Les deux premiers paramtres sont obligatoires, les autres sont facultatifs. Les paramtres sont indiqus sous la formedunechanedecaractres,sanslimitedetaille.Attentioncertainsparamtres,quinesontpasinterprts parInternetExplorer.Seulslesparamtresdepositionetdetaillesontexprimsnumriquement,lesautresutilisent les valeurs (true ou false) ou (yes ou no). Le tableau suivant prcise les diffrents paramtres possibles et leur reconnaissanceparlesnavigateurs. Paramtre alwaysLowered Fonction Creunenouvellefentresous lesautres. Creunenouvellefentrepar dessustouteslesautres. Creunenouvellefentre dpendantedelapremire.En casdefermeturedelafentre parente,lafentrefillesera fermegalement. Affichelabarredoutils personnelle. Donnelefocusclavier.Permet ainsideractiverunefentrequi vientdtrecre. Permetdafficherlanouvelle fentreenpleincran. Dfinieenpixelslahauteurdela nouvellefentre.Doittre remplaceparinnerHeightsur InternetExplorer. DterminesilURLdelanouvelle fentreserastockedans lhistoriquedunavigateur. Activeoudsactivecertains raccourcisclavierpourlanouvelle page. Dterminelahauteurenpixelsde lanouvellefentre(cellecidoit tresuprieure100pixels). Dterminelalargeurenpixelsde lanouvellefentre(cellecidoit tresuprieure100pixels). Dterminelapositionenabscisse delanouvellefentre. Afficheoumasquelabarre dadresse. Reconnupar
Mozilla,Firefox,Opra..
alwaysRaised
dependent
Mozilla,Firefox,Opra..
directories
focus
fullscreen
InternetExplorer
height
hist
hotkeys
innerHeight
innerWidth
left
location
- 7-
menubar
Afficheoumasquelabarrede menussitueenhautdela fentre. Dtermineenpixelslahauteurdu cadreextrieur(cellecidoittre suprieure100pixels). Dtermineenpixelslalargeurdu cadreextrieur(cellecidoittre suprieure100pixels). Permetlamodificationdelataille delanouvellefentrepar lutilisateur. Dterminelapositionenabscisse ducoinsuprieurgauchedela nouvellefentre. Dterminelapositionen ordonnedelanouvellefentre.
outerHeight
outerWidth
resizable
screenX
screenY
scrollbars
Affichelesbarresdedfilement.
status
Afficheoumasquelabarrede statutssitueaubasdela fentre. Afficheoumasquelabarre dicnessitueaudessousdela barredemenus. Dfinitenpixelslalargeurdela fentre.
toolbar
width
Exemple :afficheretmasquerunenouvellefentrepartirduneautre.
<html> <head> <title>Objet Window</title> <script language="javascript"> fenetre=window.open("","Nouvelle","height=100,width=300,menubar=yes,
- 8-
toolbar=yes,resizable=no,scrollbar=no"); </script> </head> <body onUnload="window.fenetre.close()"> <input type="button" name="Submit" value="Nouvelle" onClick="fenetre.focus()"> <input type="button" name="Submit2" value="Masquer" onClick="fenetre.blur()"> </body> </html> Lescriptutiliselesmthodesfocus()etblur()delobjetwindowpourafficherlafentresouhaite.Ainsi,dsledbut du script, une nouvelle fentre saffiche avec les paramtres de taille et daffichage souhaits. Linstruction <body onUnload="window.fenetre.close()">permetderefermerlafentre,encasdedchargementdelapremirefentre. Ensuite,lesboutonsNouvelleetMasquerdclenchentlelancementdesdeuxfonctionspermettantlaffichageetle masquagedelafentre. Exemple :modifierlatailleetlapositiondunefentredemanirerpte. <html> <head> <head> <title>Fentre modifiant la taille et la position</title> <script language="JavaScript" type="text/javascript"> function tailleposition(){ window.innerHeight=100; window.innerWidth=200; for(i=0;i<200;i++){ h=4; z=4; self.moveBy(h, z); self.resizeBy(h, z); } } </script> </head> <body> <form name="form1" action=""> <input name="Modifier" type="button" id="Modifier" onClick=tailleposition(); value="Modifier"> </form> </body> </html> Danscescript,lespropritsdetailleetdepositionsontutilises.Lescriptdbuteparladfinitiondedpartdela fentre,aveclespropritsinnerHeightetinnerWidth.Ensuite,uneboucleestcrepermettantderedimensionner la fentre et de la faire bouger de quatre pixels supplmentaires (la fentre se dplacera donc du bord suprieur gaucheaubordinfrieurdroit,oudonnelimpressiondevibrersilafentreprenddjtoutelaplacedelcran).Une foislaboucletermine,lafentresestabilise. Exemple :proposerdinsrerlapageactiveenfavoris:
- 9-
<html> <head> <title>Ajout en favoris</title> <script language="JavaScript"> navigateur = navigator.appName.substring(0,3); version = navigator.appVersion.substring(0,1); adresse=window.location; titre=window.name; function ajoutfavoris() { rep=confirm("Voulez-vous ajouter cette page dans vos favoris ?"); if (rep==false) { return; } else { if (navigateur == "Mic" && version >= 4){ url_site=adresse; titre_site = titre; window.external.AddFavorite(url_site, titre_site); } else { alert("Utilisez le raccourci-clavier Ctrl+D pour ajouter cette page vos favoris"); } } } </script> </head> <body onLoad="ajoutfavoris()"> </center> </body> </html> Cescriptsexcuteauchargementdelapageetlepremiertraitementeffectuparlafonctionajoutfavoris()estde rcuprer le nom de la page, le nom et la version du navigateur utilis, car le traitement de mise en favoris est diffrentselonlescas.AvecInternetExplorer,cetajoutpeutseffectuerautomatiquement,maisavecFirefox/Mozilla, Firefoxilnepeuttreralisqupartirdun raccourciclavierouauchoixdelutilisateurdanslemenu,etcepour desraisonsdescurit.Ensuite,ilestdemandlutilisateursilsouhaiteounonajoutercettepage.Silneledsire pas, le script est redirig par linstruction return et lutilisateur poursuit sa visite. Dans le cas contraire, il faut distinguerlaversiondunavigateur.Cestlaraisonpourlaquelle,lescripttestelestroispremierscaractresdela variablecorrespondantaunomdunavigateuretsicellecicorrespondlachane Mic ,parexemple,ilestpossible den dduire quil sagit dInternet Explorer de Microsoft. Il est alors possible dajouter la page en favoris par linstructionwindow.external.AddFavorite. Exemple :afficherdansunenouvellefentreappeleENI,sansbarredadresse,lapagehttp://www.editionseni.fraprs avoircliqusurunboutonsitusurlapage. <html> <head> <title>Lobjet window</title> <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>
Il suffit dappeler la fonction popup directement dans le corps de la page par linstruction <body onload=popup(). Exemple : afficher la page http://www.editionseni.fr dans une nouvelle fentre appele ENI, en mode plein cran (impossibledansMozilla,FirefoxouOpra.). f=window.open("http://www.editions-eni.fr/","ENI","fullscreen=yes");
d.MthodeClose()
EllepermetdefermerlesfentresouvertesparlamthodeOpen(),enutilisantlenomemploylorsdesacration. LasyntaxedelamthodeClose()estlasuivante : Nomdelafentrefermer.Close() ; Exemple :crerunboutonpermettantdafficherlapagehttp://www.editionseni.frdansunenouvellefentreappelef,un autreboutonpermettantdefermercettemmefentreetundernierpermettantdefermerlafentreactive.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-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>
- 11 -
<input type="button" name="Submit" value="Popup" onClick="popup()" /> </p> <p> <input type="button" name="Submit2" value="Fermer fenetre f" onClick="fermerf()" /> </p> <p> <input type="button" name="Submit3" value="Fermer fenetre active" onClick="fermeractive()"> </p> </body> </html> Lescriptsedcomposeentroisfonctionsdistinctes.Lapremirepermetdafficherlanouvellefentreenchargeant la page dsire. La seconde ferme la nouvelle fentre et la troisime ferme la fentre de dmarrage (cestdire celleosesituelescript,lemploidumotclselfpermetdeladsigner). Attention !Lamthodeclose()nefonctionnepasavecMozilla/Firefox. Exemple : orienter le visiteur vers la page Internet de son navigateur (Mozilla, Firefox, Internet Explorer ou Opra) en fonctiondeceluici.
<html> <head> <title>redirection</title> <script language="JavaScript"> function redirection() { alert(navigator.appName); if (navigator.appName=="Netscape") {
- 12 -
window.location=" http://firefox.fr/"; } else if(navigator.appName=="Microsoft Internet Explorer") { window.location="http://www.microsoft.com/france/windows/ie/"; } else if(navigator.appName=="Opera") { window.location=" http://www.opera.com/"; } else { window.location=" http://www.editions-eni.fr "; } } </script> </head> <body> <body onload="redirection()"> </body> </html> Le script se base sur une srie de tests imbriqus et de rorientation laidedewindow.location,quipermetde chargerlapagedeprsentationdunavigateurutilis.Lensembledecesinstructionsconstitueunefonction,quiest excuteaumomentduchargementdelapage.Danslecasolenavigateurnefaitpaspartiedelaliste(Safari, Konqueror),lapageaffichercorrespondcelledesditionsENI. Exemple :chercherunmotsaisi,dansunchampdeformulaire,lintrieurduntexteetlemettreensurbrillancelorsquil esttrouv.
<html> <head> <title>Trouver un mot dans une page</title> <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>
ENI Editions - All rigths reserved - 13 -
<form id="form1" name="form1" method="post" action=""> <p> <input name="nom" type="text" id="texte" value="" /> </p> <p> <input type="button" value="Chercher dans le texte" onclick="chercher(form1.nom.value, false)" /> </p> </form> </body> </html> Icilamthodefind()delobjetWindowestemploye.Sasyntaxeestlasuivante : find(chanedecaractres, casse,sens) ; Le paramtre casse prend la valeur true, si la recherche doit seffectuer en distinguant les majuscules des minusculesetleparamtresensprendlavaleurtrue,silarecherchedoitseffectuerendbutantparlafindutexte. Ici,lavaleur,saisiedanslechampdeformulaire,estutilisedanslafonctioncherchercommeleparamtrecritrede la mthode find(). Si le rsultat de la mthode renvoie true, cela signifie que le mot a t trouv en fonction des optionsdeparamtrespasses.Ilfautalorsafficherlersultatderussiteoudchecdansunebotededialogue. Lamiseensurbrillanceestfaiteautomatiquementparlenavigateur. Attention !Lamthodefind()nestpassupporteparInternetExplorer.
3.Lobjetdocument
Lobjet document correspond la page HTML ellemme. Cest un objet souvent manipul en JavaScript notamment lorsquil est fait usage du DHTML. Par cet objet, il est possible daccder aux lments composant la page, pour en modifier les proprits ou le contenu. De mme, par lobjet document, vous accdez aux cookies. Les proprits et mthodesdelobjetdocumentsontnombreuses :
a.Lesproprits
Proprit alinkColor
Rsultat Correspondlacouleur daffichagedesliensactivs. Correspondaunomdutableau contenanttouteslesancresdu document. Correspondaunomdutableau contenanttouteslesapplets Java. Correspondlacouleurdefond dudocument. Correspondaustyledelobjet dsignetcontenudansle document. Correspondunechanede caractresplaceparle navigateursurleposteclient.
Reconnupar InternetExplorer,Mozilla,Firefox, Opra.
anchor
applets
bgColor
contextual
cookie
- 14 -
domain
Correspondaunomdedomaine quiafourniledocumentHTML. Correspondaunomdutableau contenanttouslesobjets incorpors. Correspondlacouleurutilise pourcriredansledocument HTML. Correspondaunomdutableau contenanttouslesformulairesdu document. Correspondaunomdutableau contenanttouteslesimagesdu document. Correspondladatededernire modificationdudocument. Correspondaunomdutableau contenanttouteslesentrespour leslayersdudocument. Correspondlacouleurdesliens despagesnonencorevisites. Correspondaunomdutableau contenanttouslesappelsdeliens dudocument. Correspondaunomdutableau contenanttouteslesrfrences etappeldeplugins. CorrespondlURLdelapage ayantpermislechargementdela pageactive. Correspondunechanede caractresreprsentantletitre delapageHTML Correspondunechanede caractresreprsentantlURLdu documentprsentdanslapage HTML. Correspondlacouleur daffichagedesliensdespages visites.
embeds
fgColor
forms
images
lastModified
layers
linkColor
links
plugins
referrer
title
URL
vlinkColor
b.Lesmthodes
Mthode
Rsultat Dterminelenomdelvnement pourlequellacaptureest autorisepourledocumentactif.
Reconnupar
captureEvents()
close()
Refermeledocumentactif.
- 15 -
getSelection()
Renvoieunechanedecaractres correspondantautexte slectionndansledocument actif. Activelegestionnairede lvnementspcifi. Activeetchargelapagede dmarrage
handleEvent()
home()
InternetExplorer
open()
Activeundocument.
releaseEvents()
Donnelenomdelvnement dontlacaptureestrestituepar ledocumentcourant. Passelvnementcapturla hirarchienormaledes vnements. Autoriselcrituredansle documentactif. Identiquewrite()maisajoutele caractrenewline(\n),cequi permetunretourlaligne.
routeEvents()
write()
writeln()
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 :
- 16 -
<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);
- 17 -
} </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
Proprit availHeight
Rsultat Correspondlahauteurde lcranutilis,enpixels. Correspondlahauteurde lcranutilis,enpixels. Correspondlaprofondeurde couleursdelcran,cestdireau nombredecouleursqueceluici estcapablederestituer. Correspondlahauteurtotale daffichagedelcran. Correspondlarsolutionde lcranennombredecouleurs, exprimesenbitsparpixel. Correspondlalargeur daffichagetotaledelcran.
Reconnupar InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
availWidth
colorDepth
height
pixelDepth
width
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
- 18 -
couleurs de "+couleurs+" bits"); alert("La surface utile de votre affichage nest que de "+alargeur+" pixels de largeur et de "+ahauteur+" pixels en hauteur"); </script> Le script utilise toutes les proprits de lobjet screen pour dfinir les variables qui seront utilises dans les messagesaffichsdanslesbotesdedialogue.Lapremirepermetdevisualiserlarsolutionintgraledelcran,la seconde ne prend pas en compte les pixels en hauteur utiliss par la barre dtat du systme dexploitation. Les variablesscreen.availHeightetscreen.heightontdoncdeuxvaleursdiffrentes.
5.Lobjetstring
Ilconvientdenepasconfondreletypedevariableetlobjetstring.Eneffet,lobjetstringestunobjetquipermetde manipuler les chanes de caractres cest pour cela quil est trs souvent utilis que ce soit pour la recherche, la concatnationoulextractiondesouschanedecaractres.Ilnestdoncpastonnantdeconstaterquelobjetstring disposedenombreusespropritsetmthodes.
a.Lesproprits
Proprit constructor
Rsultat Indiquecommentatcrun objetrfrenc. Correspondlalongueurdune chanedecaractres. Permetdajouterdesproprits unobjet.
Reconnupar InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
length
prototype
b.Lesmthodes
Mthode anchor()
Rsultat Dtermineuneancrenomme dansundocumentHTML. Augmentedunniveaulataillede lapoliceutilisedansun documentHTML. Permetdefaireclignoterletexte dansundocumentHTML. Afficheunechanedecaractres engras. Permetdaccderunseul caractredansunechane complte. Renvoielavaleurendcimaldu caractreindiquenargument. Concatneplusieurschanesde caractres. Convertitunechanede caractresencodedeprogramme JavaScript.
big()
blink()
bold()
chartAt()
charCodeAt()
concat()
eval()
- 19 -
fixed()
Afficheunechanedecaractres avecunepolicepasfixe. Modifielacouleurdelapolicede caractresdunechane. Modifielapolicedecaractres dunechane. Renvoieunechanedecaractres constituepartirde reprsentationsisolesdune suitedecaractresUnicode. Renvoielaposition,partirdela gauche,duncaractrepassen argumentdansunechanede caractres. Afficheunechanedecaractres enitalique. Renvoielaposition,partirdela droite,duncaractrepassen argumentdansunechanede caractres. Demandelechargementdune URLparlenavigateur. Rechercheuneexpression rguliredansunechanede caractres. Remplaceuneexpression rguliredansunechanede caractres. Effectueunerecherchedansune chanedecaractres. Extraitunesouschanede caractres,enfonctiondun caractreinitialetduncaractre final. Diminuedunniveaulatailledela policeutilisedansundocument HTML. Dcoupeunechanede caractresenfonctiondun sparateurpassenargument. Afficheunechanedecaractres enmodebarr. Afficheunechanedecaractres enindice. Renvoieunesouschanede caractres,enfonctiondune positionetdunelongueur passesenargument.
fontcolor()
fontsize()
fromCharCode()
indexof()
italics()
lastIndexof()
link()
match()
replace()
search()
slice()
small()
split()
strike()
sub()
substr()
- 20 -
substring()
Renvoieunesouschanede caractres,enfonctiondune positionpasseenargument. Afficheunechanedecaractres enexposant. Convertitenminusculesune chanedecaractres. Tentedeconvertirunobjeten chanedecaractres. Convertitenmajusculesune chanedecaractres.
sup()
InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
toLowerCase()
toString()
toUpperCase()
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.
- 21 -
<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>
- 22 -
</body> </html> Lescriptsediviseenplusieursfonctions.Lapremire,(convertirmaj()),permetdecalculerlalongueurdelachane saisieetdelafficher,dansunautrechampduformulaire,toutenmajuscules.Lecalculdelalongueurdelachane seffectuefacilement,grcelapropritlengthappliquelavaleurduchampdeformulaire.Cettelongueurest, ensuite, affiche dans une bote de dialogue. La mthode toUpperCase() permet ensuite la conversion vers une chane en majuscules. La seconde fonction, (convertirmin()), utilise toLowerCase pour transformer, linverse, la chane en minuscules. La troisime fonction, (convertir()), utilise le champ minuscules (cestdire celui qui correspondobligatoirementunchampcomposdeminuscules),ettransformesonpremiercaractreenmajuscule pour ajouter le reste du champ en minuscules (cestdire du second caractre identifi par 1 jusqu la fin de la chanecalculeprcdemment). Exemple:extraireunechanedecaractresduneautrechanesaisieparlutilisateurenfonctiondundbutetdunefin dextraction.Lersultatestaffichdanslapageetavecdescaractresdecouleurrouge :
<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 :
q
Lavariabletextecorrespondautextesaisiparlutilisateur. Lavariablepos1correspondlapositiondupremiercaractredelasouschaneextraire. Lavariablepos2correspondlapositionduderniercaractredelasouschaneextraire.
- 23 -
Ensuite,ilsuffitdappliquerlamthodesubstring()lachanedecaractrespourextraireunesouschanepartir de la position du premier et du dernier caractre. La chane est, ensuite, convertie en rouge et affiche dans le document. Exemple : effectuer un test sur une extension de fichier destin tre transfr. Si lextensionnestpasgifoujpg,un messagedavertissementsaffiche.
<html> <head> <title>Verification de type de fichier upload</title> <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.
- 24 -
<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
- 25 -
LobjetDateestunobjetinclusdefaonnativedansJavaScript,cestdirequevouspouvezlappelertoutmoment. Il permet de grer le calcul du temps jusqu une prcision de la milliseconde. Les dates sont reprsentes par un nombrecomprisentre100 000 000et+100 000 000aveccommerfrencele1e rjanvier1970.LobjetDatenapas de proprit. Pour manipuler lobjet Date, il faut en crer une instance dans une variable. Par contre, lobjet Date possdetroistypesdemthodepourlire,crireouconvertir.Ilexisteenplusunsystmedeminuteriepermettantde grerlesintervallesdetemps.notertoutefois,queletermedcriturenecorrespondpasaufaitdechangerlheure systme,quiesttoutfaitimpossible.
a.Lesmthodesdelecture
Mthode
Rsultat Renvoielenumrodu jourdumoisentre1 et31. Renvoielenumrodu jourdelasemaine sachantquezro correspondau dimancheetsixau samedi. Renvoieunnombre dequatrechiffres correspondant lanneencours. Renvoielheure courantesachantque zrocorrespond minuit. Renvoieunnombre enmillisecondes correspondant lheurelocale. Renvoielenombrede minutesdelheure courante. Renvoielenumrodu moiscourantsachant quezrocorrespond janvieretonze dcembre. Renvoielenombrede secondesdelheure courante. Renvoielenombrede millisecondes coulesdepuisle 1erjanvier1970. Renvoielenombrede minutessparantle lieudelexcutiondu script,dumridiende Greenwich. Renvoielenombredu jourdumoisexprim encoordonnesUTC (TempsUniversel
Reconnupar InternetExplorer, Mozilla,Firefox, Opra.
getDate()
getDay()
InternetExplorer, Mozilla,Firefox, Opra.
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
- 26 -
Coordonn). Renvoielenumrodu jourdelasemaine exprimen coordonnesUTC. Renvoieunnombre dequatrechiffres correspondant lanneencours,en coordonnesUTC. Renvoielheure couranteexprimeen coordonnesUTC. Renvoielenombrede millisecondesde lheurecourante exprimen coordonnesUTC. Renvoielenumrodu moiscourantexprim encoordonnesUTC. Renvoieunnombre dedeuxchiffrespour lesannes antrieureslan deuxmilleetde quatrepourles annespostrieures (exemple99pour 1999et2008pour 2008).
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMonth()
getYear()
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>
- 27 -
</body> </html> LapremiretapeconsistecrerunobjetDateaujourdhuipermettantdercuprerladatedujour.Ensuite,ilest possibledercuprerlejour,lemoisetlannedaujourdhui.Unepremireparticularitrsidedanslagestiondu numrodujour.Eneffetpouramliorerlaffichage,ilestprfrabledajouter0devantlesnumrosinfrieurs10. Une autre particularit se situe dans la gestion des numros des mois, car tant donn que la numrotation des mois de lanne dbute (comme toujours en JavaScript) par zro, il convient dajouter un la variable mois pour laffichagedansledocument. Les mois saffichent en nombre. Aussi, si vous souhaitez les obtenir en lettres, vous pouvez utiliser une structuredecontrleswitchpourlesdterminerenfonctiondelavariablemois.Lemmegenredinstruction peuttreutilispourdterminerlejourdelasemaineaveclamthodegetDay().
<html> <head> <title>proprits et mthodes de Date</title> <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) {
- 28 -
case 1 : nomois="janvier"; break; case 2 : nomois="fvrier"; break; case 3 : nomois="mars"; break; case 4 : nomois="avril"; break; case 5 : nomois="mai"; break; case 6 : nomois="juin"; break; case 7 : nomois="juillet"; break; case 8 : nomois="aot"; break; case 9 : nomois="septembre"; break; case 10 : nomois="octobre"; break; case 11 : nomois="novembre"; break; case 12 : nomois="dcembre"; break; } document.write("Nous sommes le "+nomjour+" "+jour+" "+nomois+" "+annee); </script> </head> <body> </body> </html> Ce script, bien quun peu lourd, permet dafficher les mois de manire littrale en amliorant ainsi la lisibilit du rsultat.
b.Lesmthodesdcriture
Mthode
Rsultat
Reconnupar InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra.
setDate()
Fixelavaleurdu jourdumois.
setFullYear()
Fixelavaleurde lanne.
setHours()
Fixelavaleurde lheure.
setMilliseconds()
Fixelavaleurdela milliseconde.
- 29 -
setMinutes()
Fixelavaleurdes minutes.
InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra.
setMonth()
Fixelavaleurdu numrodumois.
setSeconds()
Fixelavaleurdes secondes.
setTime()
Fixeladate.
setUTCDate()
Fixeladateselon UTC.
setUTCFullYear()
Fixelavaleurde lanneselonUTC.
setUTCHours()
Fixelavaleurentre 0et23delheure selonUTC. Fixelavaleurentre 0et999des millisecondesselon UTC. Fixelavaleurentre 0et59desminutes selonUTC. Fixelavaleurentre 0et11dumois selonUTC. Fixelavaleurentre 0et59des secondesselon UTC.
setUTCMilliseconds()
setUTCMinutes()
InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra.
setUTCMonth()
setUTCSeconds()
setYear()
Fixelavaleurde lanne.
c.Lesmthodesdeconversion
Mthode
Rsultat ConvertitunobjetDateen nombredemillisecondesdepuisle 1erjanvier1970. ConvertitlobjetDateenune chanedecaractresselonle formatlocal.
Reconnupar
parse()
toLocaleString()
- 30 -
toString()
ConvertitlobjetDateenune chanedecaractres. ConvertitlobjetDateenune chanedecaractresselonle formatUTC. Convertitenmillisecondesla diffrenceentreunedateetle 1erjanvier1970.
toUTCString()
UTC()
d.Lesminuteries
Ilexistequatremthodesparticuliresquipermettentdegreruneminuterie : Mthode Rsultat Dclenchelexcutiondunesrie dinstructionsenfonctiondune frquenceenmillisecondes passeenargument. Stoppelaminuterielancepar setInterval(). Retardeledclenchementdune sriedinstructionsenfonction dunedureenmillisecondes passeenargument. Stoppelaminuterielancepar setTimeout(). Reconnupar
setInterval()
clearInterval()
setTimeout()
clearTimeout()
LasyntaxedesetInterval()estlasuivante : setInterval(action, priode, arguments ventuels de laction) ;
SetIntervalestparfoismalreconnu,notammentparlesnavigateursdontlaversionestunpeuancienne.Il estprfrabledutiliserSetTimeout()lorsquevousenavezlechoix. LasyntaxedeclearInterval()estlasuivante : clearInterval(nom de la minuterie) ; LasyntaxedesetTimeout()estlesuivante : setTimeout(action,delai, arguments ventuels de laction) ; LasyntaxedeclearTimeout()estlasuivante : clearTimeout(nom de la minuterie) ; Exemple :crerunehorlogesimpleaffichantlesheures,lesminutesetlessecondesdansunchampdeformulaire:
<html> <head> <head> <title>Horloge</title> <script language="JavaScript">

function Horloge() { maintenant=new Date(); heures=maintenant.getHours(); minutes=maintenant.getMinutes(); secondes=maintenant.getSeconds(); if(heures<10) { heures="0"+heures; } if(minutes<10) { minutes="0"+minutes; } if(secondes<10) { secondes="0"+secondes; } document.form1.Pendule.value=heures+":"+minutes+":"+secondes; setTimeout("Horloge()", 1000); } </script> </head> <body onLoad="Horloge()"> <form name="form1" method="post" action=""> Il est exactement : <input name="Pendule" type="text" id="Pendule" size="12"> </form> </body> </html> Pour russir manipuler lobjet Date, il faut crer une nouvelle instance de cet objet. Puis, il est possible den extrairelesheures,lesminutesetlessecondes.Ensuite,ilfauttraiterlaffichagepourlesvaleursinfrieures10et leur ajouter un zro devant si ncessaire, pour obtenir 01 la place de 1, par exemple. Ensuite, il est possible dafficher le contenu du champ de formulaire et de demander le rechargement de la fonction Horloge au bout de 1000millisecondes(soituneseconde).Ainsi,lhorlogesemodifieratouteslessecondes. Exemple : afficher la dure de la visite dune page en secondes, lors dun clic sur un bouton permettant larrt du compteur.
<html> <head> <title>Les minuteries</title> <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"
- 32 -
maxlength="5"> seconde(s). </form> <p> <input type="button" name="Submit" value="Stopper" onclick="stopper()"> </p> <p> </p> </body> </html> Cescriptsexcuteauchargementdelapage.Lesvariables,seconde(s)etminute(s),sontinitialises,dsledbut, afin de toujours partir avec des valeurs gales 0. Ensuite, il est ncessaire dcrireleurvaleurdansleschamps correspondants, avant de dbuter lincrmentation des compteurs. La variable nomme seconde(s) est incrmente puis teste pour savoir si elle est gale 60. Dans ce cas, il faut incrmenter la variable, nomme minute(s), puisque cela reprsente une nouvelle minute. Par la mme occasion, il convient de rinitialiser les secondes0.Laminuteriecompteurpermet,ensuite,derecommencerletraitementtouteslessecondes.Lebouton Stopperlancelexcutiondelafonctiondummenomquipermetdinterromprelaminuterie. Exemple :rorienterunutilisateursurlapagehttp://www.editionseni.frauboutdedixsecondesdevisitesurunepage. Lutilisateurdisposeduncompteurtotalisantlenombredesecondesdelavisiteetduncompteurreboursgrenantles derniressecondesavantlaredirection.Enfin,unboutonpermetdestopperlecompteur.
<html> <head> <title>Les minuteries</title> <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>
- 33 -
<p> <label for="Submit"></label> <input type="button" name="Submit" value="Stopper" id="Submit" onClick="stopper()"> </p> </form> </body> </html> Ce script sexcute au chargement de la page. La fonction chrono va permettre dincrmenter une variable (i) et donc, simultanment, de dcrmenter un compteur rebours (document.form1.rebours.value= 10i). Le test sur (i) permet de savoir si les dix secondes ont t atteintes sachant que la fonction chrono se renouvelle toutes les secondesgrcelemploideSetTimeOut.Siletestestvrifi,laredirectionseffectueimmdiatementaprs,grce la proprit location de lobjetwindowetcorrespondlURL passe en argument. La fonction stopper() sexcute aprsunclicsurleboutonStopperetpermetdarrterlecompteur.
7.LobjetArray
Lorsquil sagit de manipuler une grande quantit dinformations, le recours aux seules variables nest parfois pas suffisant.Lusagedetableauxafindestockercesinformationsest,alors,dungrandsecours.LestableauxJavaScript nont rien voir avec les tableaux HTML, leur rle nest pas de prsenter linformation mais de la stocker et de la mettre disposition pour la manipuler (ajouter, supprimer, trier, etc.). Un tableau ne peut pas recevoir plus de 256 valeurs,maislesvaleursstockesdansceluicipeuventtredetypediffrent(texte,numrique,etc.).LobjetArray reprsente donc lui seul, une variable lintrieur de laquelle sont stockes des informations identifies par un numrodindicedbutantparzro(commebiensouventenJavaScript). Lobjet Array est un objet natif (cestdire appartenant au core) de JavaScript, qui dispose de dix mthodes. Pour utiliseruntableau,ilconvienttoutdaborddeledclarer.Ilexisteplusieurssyntaxespourladclarationduntableau. Ilest,parexemple,possiblededclareruntableauetlenombredlmentsquilcontientparlinstructionsuivante : var tableau=new Array(5) ; Mais lindication du nombre dlments du tableau nest pas obligatoire, en effet, JavaScript gre les tableaux de manire dynamique et sadapte donc, au nombre dlments qui lui est fourni. Ainsi, la syntaxe suivante convient galement : var tableau =new Array() ; AttentionnepasoublierlesparenthsesouvrantesetfermantesaprsArray. Puis,vousaffectezlesvaleursdansletableauparlinstructionsuivante : var tableau= ["valeur1", "valeur2", "valeur3", "valeur4"] ; Toutcommeaveclesvariables,ilestpossiblederaliserladclarationetlaffectationsimultanment.Donc,lasyntaxe suivanteestaussivalide: var tableau=new Array["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"] ; Laccsauxvaleursstockesdansletableausefaitparleurnumrodindice : Ainsi,document.write(tableau[4]) ;afficheravendredi videmment, le numro dindice peut provenir dun compteur dune boucle, ce qui permet de passer en revue lensembledeslmentsdutableau. Exemple :afficherdansundocumentHTMLlesjoursdelasemaine,passsenvaleurduntableau.
<script language="javascript"> var semainier=new Array(); var semainier=["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"] ;
- 34 -
for (i=0;i<7;i++) { document.write(semainier[i]+" "); } </script> Le script utilise un compteur et une boucle pour afficher le contenu dun tableau dont vous connaissez le nombre dlments. Danslecasovousneconnaissezpaslenombredlmentsduntableau,ilestpossibledutiliserlapropritlength, correspondantaunombredevaleursdutableau.Lescriptdevientalors : <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 : 50Km/h 23mtres 110Km/h 109mtres 130Km/h 152mtres
<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>
- 35 -
</tr> </table> </form> </body> </html> Leschampsdeformulairesontinitialissauchargementdelapage. Le script sexcute au moment du changement de valeur dans la liste droulante. Il dbute par llaboration du tableauassociatifcomprenanttroislments.Ensuite,ilfautdterminerlechoixeffectuparlutilisateurenstockant dansunevariable(icivitesse),lenumrodindicedecechoix.Enfonctiondecenumro,ilestfacilederetournerla valeurcorrespondantedanslechampdistanceduformulaire.
a.Lesproprits
Destroisproprits,seullengthesttrssouventrencontrdanslesscripts.Ilpermetainsidedterminerlenombre ditrationsduneboucle,correspondantaunombredlmentsdutableau. Proprit constructor Rsultat Indiquecommentatcrun objetrfrenc. Correspondaunombre dlmentsdutableau. Permetdajouterdesproprits personnaliseslobjet. Reconnupar InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
length
prototype
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) ;
Mthode concat()
Rsultat
Reconnupar InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
Concatnedeuxtableauxenun.
join()
Creunechanedecaractres partirdeslmentsdutableau. Supprimeledernierlmentdun tableau. Ajoutedeslmentsenfinde tableau. Inverselordredeslmentsdun tableau.
pop()
push()
reverse()
- 36 -
shift()
Supprimelepremierlmentdun tableau. Retourneouajouteunepartie duntableau.
InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
slice()
sort()
Trieleslmentsduntableau.
splice()
Ajoute,supprimeouremplaceles lmentsduntableau. Convertituntableauenune chanedecaractres. Ajouteunlmentaudbutdun tableau. Retourneunlmentprcisdun tableau.
toString()
unshift()
valueOf()
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);
- 37 -
</script> Lesdeuxtableaux,comprenantdesvaleursdiffrentes,sontfacilementconcatnslaidedecettemthode. Les mthodes qui suivent se fondent sur le principe de la structure de pile. Cestdire que, pour ajouter ou supprimerdeslmentsdansuntableau,vousnepouvezlefairequeparlehautouparlebas.Autrementdit,les lmentspeuventtreextraitssoitdanslordredanslequelilsonttplacs,soitdanslordreinverse. Exemple :afficher,danslapageHTML,lensembledesjoursdelasemainepuissansledimancheetenfinsanslesamedi.
<script language="javascript"> var semainier=new Array(); var semainier=["lundi", "mardi", "samedi", "dimanche"]; document.write("Voici la semaine semainier.pop(); document.write("Voici la semaine semainier.pop(); document.write("Puis sans samedi </script>
"mercredi", "jeudi", "vendredi", complte : "+semainier+"<br>"); sans dimanche : "+semainier+"<br>"); : "+semainier+"<br>");
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.
- 38 -
<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 :
- 39 -
nouveautableau=tableau.sort(fonctiondecomparaison) ; Sicettefonctionnestpasutilise,cestlordrealphabtiquequiestappliqu.Cestlecasdansnotreexemple,pour tablirlavariablenommecroissant.Parcontre,pourutiliserlordredcroissant,ilfautpasserparuneautrefonction renvoyantunrsultatpartirduntest.Ici,nntantpassuprieurm,cestlavaleur1quiestretourneetqui permetdedonnerlordredetrilamthodesort(). Lamthodesort()sapplique,pardfaut,surdeslmentsdetypealphanumrique.Pourobteniruntridlments numriques,ilfautpasseruneautrefonctioncommefonctiondecomparaison. Exemple : afficher, dans un document HTML, tout dabord les deux premiers jours dune semaine de travail (lundi et mardi),etsurunelignesuivantelesdeuxderniersjours(jeudietvendredi).
<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.
- 40 -
<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
Lorsque les donnes stocker sont nombreuses, il est possible dutiliser les tableaux plusieurs entres, aussi appelsmultidimensionnels. Laconstructiondecetypedetableauncessiteladclarationdesdeuxtableauximbriqus.Vousdclarezdabord, un tableau de faon classique. Puis, vous ralisez laffectation des valeurs en fonction de leur position (colonne, ligne)dansletableau. Lasyntaxepeutsersumerainsipouruntableaude3ligneset3colonnes : var tableau=new Array(nombre de valeurs du tableau) ; var tableau[0]=new Array(nombre de valeurs du tableau) ; var tableau[1]=new Array(nombre de valeurs du tableau) ; tableau[0][0]= "valeur1" ; tableau[0][1]= "valeur2" ; tableau[0][2]= "valeur3" ; tableau[1][0]= "valeur1" ; tableau[1][1]= "valeur2" ; tableau[1][2]= "valeur3" ; 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. Janvier ProduitA ProduitB ProduitC 10000 10000 11000 Fvrier 10500 9500 7500 Mars 12500 8500 8500
- 42 -
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-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> <form id="form1" name="form1" method="post" action=""> <label for="select"></label> <p> </p> <label for="select"></label> <table width="400" border="0"> <tr> <td><label for="select">Produit</label></td> <td><select name="Produit" id="Produit"> <option value="0">Produit A</option> <option value="1">Produit B</option> <option value="2">Produit C</option> </select></td> </tr> <tr> <td>Mois</td> <td><label for="select"></label> <select name="mois" id="mois"> <option value="0">janvier</option> <option value="1">Février</option> <option value="2">mars</option> </select> </td> </tr> <tr> <td colspan="2"><input type="button" name="Submit" value="Afficher" onClick="affiche()" /></td> </tr> </table> <p> </p> </form> </body> </html> Lafonctionaffiche()sexcuteaumomentduclicsurlebouton.Ilfauttenircomptedesvaleursslectionnesdans lesdeuxlistesdroulantes,pouridentifierlescoordonnesdelavaleurafficher.Lesdeuxvariablesnommoiset nomproduit sont, donc, affectes, ds le dbut du script, avec les valeurs des listes droulantes. Ensuite, il est
possiblededclarerlestableauximbriqusetdyaffecterlesvaleurs.Lextractiondelavaleurseffectueenfonction desvariablesprcdentes.Laffichagedelavaleurextraiteterminelescript.
8.image
LobjetimagesetrouvesouslobjetdocumentdanslemodledobjetJavaScript.IlcorrespondlabaliseHTML<img>. Cetobjetestessentielpouramliorerlaprsentationdespagesweb.Lobjetimageestsouventutilispourcrerdes rollover (permutation dimage au passage de la souris) ou un album photo avec vignettes. Avec cet objet, vous pouvezaccdertouteslesimagesprsentesdanslapageHTML.Lobjetimagedisposededixpropritsetdune mthode.
a.Lesproprits
Proprit
Rsultat Correspondautexteafficher danslecasolenavigateurne prendraitpasenchargeles imagesouencore,silapageest consulteparunpublicdficient visuel,quipdunappareillage ayantcapacitlirecette proprit.Letextesaffichedans uneinfobullelorsquelasouris restepositionnedessusdurant quelquessecondes. Indiquelatailledelabordure figurantventuellementautourde limage. Indiquesilimagecontenuedans lapageestdfinitivement charge.Renvoietruesicestle cas. Indiquelatailledelimageen octets. Indiquelahauteurdelimageen pixels. Correspondlespaceenpixels entreuneimageetleslments situsdroiteetgauche. Correspondaunombredimages situesdanslapage. Correspondaustatutdaperu duneimage. Correspondaunomdelimagesil existe. Correspondladressesource (URL)dufichierdelimage.Cette propritmodifiablepermetde nombreuxeffets,basssurles images. Correspondautitredelimage. Toutcommelapropritalt,elle
Reconnupar
alt
border
complete
fileSize
height
hspace
length
lowsrc
name
src
- 44 -
title
estintressantepourles personnesdisposantdun appareillagedelecture,mais aussipourlerfrencementdes pages. Correspondlespaceenpixels entreuneimageetleslments situsenhautetenbas. Indiquelalargeurdelimageen pixels.
vspace
width
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.
- 45 -
<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
- 46 -
Lobjethistoryestunsousobjetdelobjetwindow.Ilcorrespondlhistoriqueconservdanslenavigateur.Ildispose dunepropritetdetroismthodes.
a.Laproprit
Proprit length
Rsultat Correspondaunombredepages visitespourlafentreactive.
b.Lesmthodes
Mthode back()
Rsultat Chargeladernirepagevisite, prsentedanslhistorique. Chargelapagesuivantevisite, prsentedanslhistorique. Sedplacedanslhistoriquedes pagesvisites,suivantunnombre depagespasscomme paramtre.
Reconnupar InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
forward()
go()
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
- 47 -
pourpasserlapagesuivante. Scriptdelasecondepage : <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() {
- 48 -
var nbrecul="-"+document.form1.recul.value; convertnbrecul=parseInt(nbrecul); window.history.go(convertnbrecul); } </script> </head> <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
Proprit
Rsultat Correspondlachanedecaractres reprsentantlancrenommelintrieur dunepage. Correspondlachanedecaractres reprsentantlapartiedelURL,enpartant dehttpjusquaunumrodeport,mais sansceuxci. Correspondlachanedecaractres reprsentantlapartiedelURL,enpartant
Reconnupar InternetExplorer, Mozilla,Firefox, Opra.
hash
host
hostname
InternetExplorer, Mozilla,Firefox,
- 49 -
dehttpjusquaunumrodeportinclus.
Opra. InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra. InternetExplorer, Mozilla,Firefox, Opra.
href
CorrespondlURLentire.
pathname
Correspondlapartiesuivantlenom dhte.
port
Correspondaunumroventueldeport delURLencours(ex : http//www/serveur.com/page.html :8550). Correspondauprotocoleutilis(ex :file pourlesfichierslocauxethttppourceux situssurunserveurweb). Correspondlachanederecherche partirdupointdinterrogation,lorsdune requteparlintermdiairedunbouton Submit.
protocol
search
b.Lesmthodes
Mthode
Rsultat Correspondauboutonactualiser dunavigateur,rechargelapage actuelle. RemplacelURLdelapage actuelleparuneautredecefait lURLactuellenestpasstocke danslhistorique.
Reconnupar
reload()
replace()
InternetExplorer, Mozilla,Firefox,Opra.
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>
- 50 -
11.link
CetobjetcorrespondauxliensventuelsdfinisdansundocumentHTML.Ilestpossibledecompter,lire,modifierles liensprsentsdanslapage.Cetobjetdisposedeneufproprits. Lesproprits Proprit name Rsultat Correspondaunomdonnun liendanslapage. Correspondaunombredeliens prsentsdanslapage. Correspondlafentrecibledun lien(_self,_blank,etc.). Correspondautextedunlien prsentdanslapage. Correspondlaposition horizontaledunlienprsentdans lapage. Correspondlapositionverticale dunlienprsentdanslapage. Reconnupar InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
length
target
text
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);
- 51 -
} } </script> </head> <body onLoad="exemplelinks()"> <a href="http://www.editions-eni.fr/" target="_blank">Eni</a><br> <a href="http://www.form-high-tech.com/" target="_self">Form-High-Tech </a><br> </body> </html>
- 52 -
Autresobjetsutiles
1.regexp
Cetobjetpermetdemanipulerlesexpressionsrgulires.Lesexpressionsrguliressontprsentesdanslaplupart deslangagesdeprogrammation(dailleurs,lasyntaxedesexpressionsrguliresenJavaScriptestprochedecelledu Perl). Elles permettent deffectuer de nombreux traitements sur les chanes de caractres, du plus simple au plus labor.Avecelles,ilestpossibledechercher,remplacer,dcouperdeschanesdecaractres.Lesmatriserconstitue donc,unrelatoutmmesileurapprochepeutsemblerfastidieuseaupremierabord.Ilconvient,toutefois,denoter quelesexpressionsrgulirespeuventposerproblmeaveccertainsnavigateurs,telInternetExplorerouSafaripar exemple. Cette limitation ne remet pas en cause la puissance et la relle efficacit de cellesci. Leur principe de fonctionnement consiste rdiger un masque (pattern en anglais) quil est possible dappliquer une chane de caractres pour la filtrer ou la grer. Pour utiliser les expressions rgulires, il faut dabord crer un objet de type RegExp,lasyntaxesuivreestlasuivante : var monexpression=new RegExp(motif, option) ; Omotifreprsentelemasquederechercheetoptioncorresponduncommutateur.Ilpeutprendrequatrevaleurs diffrentes,enfonctiondecequelondsire(parexemple,prendreencomptelacassedescaractres).Letableau suivant,listelesoptionsdisponibles : Caractredoption g i gi Fonction Aucuneoptiondfinie. Forceunerechercheglobale. Netientpascomptedelacassedescaractres. Associelesoptionsietg.
Uneautremthodedecrationpeutgalementtreemploye,ensuivantlasyntaxe : Var monexpression=/motif/option ; Pourrdigerlemasquedelexpressionrgulire,mispartlescaractresclassiques,ledveloppeurdisposedune sriedecaractres outils ,quilestpossibledeclasserencatgoriesenfonctiondeleurrle.
a.Lescaractresdensemble
Ilspermettentdedfinirunecollectiondecaractresquidevra,selonlescas,apparatreounon. Caractreoutil Fonction Correspondunensembledecaractres(icixyz), placentrelescrochets. Correspondunensembledecaractresen minusculesentrexetz. Correspondunensembledecaractresen majusculesentreXetZ. Correspondunensembledecaractresentre0et 9. Interditlescaractressuivants^(icixetz). Correspondunchiffre.quivalent[09]. Interditleschiffresde09.quivalent[^09].
[xyz]
[xz]
[XZ]
[09]
[^xz] \d \D
b.Lescaractresdegroupement
Caractreoutil
Fonction Permetdegrouperdescaractresformantalorsun sousmotif.
()
c.Lescaractresderptition
Cescaractrespermettentdetesterlenombredoccurrencesduncaractre. Caractreoutil Fonction Lecaractrepeutapparatreunnombreindfinide fois. Lecaractredoitapparatreaumoinsunefois. Lecaractredoitapparatrezroouunefois. Lecaractredoitapparatrelenombredefois quivalentx. Lecaractredoitapparatreaumoinsxfoisetau pluszfois. Lecaractrepeuttrexouz.
+ ?
{x}
{x,z}
x|z
d.Lescaractresdepositionnement
Caractreoutil
Fonction Prciseledbutdelexpressiondanslachanede caractres. Prciselafindelexpressiondanslachanede caractres. Prciseledbutdemot. Prciselafindemot. Trouvelachaneetretientsaposition. Trouvelachaneuniquementsixestsuividey. Trouvelachaneuniquementsixnestpassuividey.
\b \B (x) X( ?=y) X( ?!y)
e.Lecaractredechoix
Ilpermetdefaireunchoixdanslexpressionrgulireentreplusieurssousmotifs. Caractreoutil Fonction
- 2-
x|z
Lecaractrepeuttrexouz.
f.Lescaractresspciaux
Caractreoutil . \ \f \n \r \t
Fonction Correspondtoutcaractre. Indiquequelecaractresuivantnestpasspcial. Correspondunsautdepage. Correspondunsautdeligne. Correspondunretourchariot. Correspondunetabulation.
g.Lesproprits
Proprit
Rsultat Indiquelindicepartirduquella recherchesuivantedoit seffectuer. Correspondautextedumasque. Indiquesilarecherchedoit sarrterlapremireoccurrence trouve.= g Indiquesilacassedoittre ignore.= i .
Reconnupar
lastIndex
source
global
ignoreCase
h.Lesmthodes
Mthode test()
Rsultat Retourneunevaleurboolennesi letestestvrifiounon. Retournelapremireoccurrence trouvedanslachane. Trouvelesoccurrencesdune souschanedecaractres. Trouvedeslmentsplacsentre dessparateursdunechanede caractres. Renvoieunedclarationdobjet reprsentantlobjetspcifi. Renvoieunechanedecaractres correspondantlobjetconcern.
Reconnupar InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
exec()
match()
split()
toSource()
toString()
- 3-
Cettemthode,bienutile,permetdesavoirsiunechanedecaractrescorrespondbienaumasquedelexpression rgulire.Ellerenvoietruesicestlecasetfalsedanslecascontraire. Lesmotifsseconstruisentenutilisantlescaractresoutilsvusprcdemment,enfonctiondursultatobtenir.Un motifserdigedelagaucheversladroitecommedansunephraseclassique.Mmesicelasemblepremirevue obscur,unexempledesyntaxeduneexpressionrgulirepourraittre : "[0-9]{2}[-][a-z]{3}[-][0-9]{4}","gi"
Cetteexpressionrgulirepermetdecontrlerlavaliditdunechanedecaractresreprsentantunedate auformat01jan2008. Pourutiliserparlasuiteunmotif,ilestncessairedeconstruireunevariablelaidedelobjetRegExpetdutiliser lesmthodessouhaites.
i.Utilisationdelamthodetest()
Cettemthodepermetdesavoirsiunechanedecaractrescorrespondaumotif.Ellerenvoietruesicestlecaset falsedanslecascontraire. Par exemple, pour tester si une valeur saisie dans une bote de dialogue correspond la nouvelle norme europenne de plaque minralogique, qui sera compose dune srie de caractres forms de trois blocs spars pardestirets(deuxlettres,tiret,troischiffresmaximum,tiret,puisdeuxlettres),ilconvientdepasserpartroislignes dinstructionscorrespondantstroistapes: DclarationdelavariablecorrespondantaumotiflaborpartirdelobjetRegExp. Rcuprationdelavariablesaisiedansunebotededialogue. Applicationdelamthodetest()pourvrifierlavaliditdelasaisie. Lasyntaxedumasqueseraalorslasuivante : [A-Z]{2}[-][1-9]{1,3}[-][A-Z]{2} [A-Z]{2}corresponddeuxlettresobligatoires. [-]correspondautiretentrelepremieretlesecondblocdecaractres. [1-9]{1,3}indiquequilfautentre1et3chiffrescomprischacunentre1et9. [-]correspondautiretentrelesecondetletroisimeblocdecaractres. [A-Z]{2}correspondladerniresriedelettres.
<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).
- 4-
<script language="javascript"> var telephone=new RegExp("[0]{1}[1-4]{1}[.][0-9]{2}[.][0-9]{2}[.][09]{2}[.][0-9]{2}","g"); var saisienumero=prompt("Saisissez un numro de tlphone franais sous la forme 00.00.00.00.00 : "); alert(telephone.test(saisienumero)); </script> Petiteparticularitici,olepremierchiffrenepeuttrequunzro,maisdoittresaisitoutdemme.
j.Utilisationdelamthodeexec()
Elleretournelapremireoccurrence(etseulementcellela)trouve,correspondantaumotifdelexpressionrgulire dansunelistededonnes.Lasyntaxeestlasuivante : variableexpressionrgulire.exec(listededonnes) ; Exemple : afficher le premier numro de tlphone prsent dun agenda, respectant le masque[0]{1}[1-4]{1}[.][0-9] {2}[.][0-9]{2}[.][0-9]{2}[.][0-9]{2} <script language="javascript"> var telephone=new RegExp("[0]{1}[1-4]{1}[.][0-9]{2}[.][0-9]{2}[.][09]{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}[.][09]{2}[.][0-9]{2}","g"); var agenda= ("03.44.12.230 01.000.01.01.01 01.12.13.14.15 01.12.13.14.16"); var resultat = agenda.match(telephone); var nbelements=resultat.length; message=nbelements+" numros trouvs correspondants au masque :"; for (i=0;i<nbelements;i++) { var reponse=resultat[i]; message=message+"\r"+reponse; } alert(message); </script>
Attention"\r "nefonctionnepasavecFirefox.
l.Utilisationdelamthodesearch()
Lamthodesearch()sappliqueauxexpressionsrgulires,commeellesappliqueauxvariablestextes. Exemple :contrlerlaprsencedunearobasedansunchampdeformulaireetafficherunmessagedavertissementoude conformitenfonctiondursultat.
<html> <head> <title>Objet RegExp - Mthode search</title> <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.
- 6-
Lasyntaxedelamthodereplace()estlasuivante : chaneinspecter.replace(chaneremplacer,chanederemplacement) ; Exemple : afficher, dans la page, lagendamodifiparremplacementdescaractresslashetdoublepoint,parunsimple pointcommecaractrededlimitation. <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
Proprit E
Rsultat RenvoielaconstantedEulerdont lavaleurestprochede2,718. Renvoielelogarithmenaturelde 2. Renvoielelogarithmenaturelde 10.
Reconnupar InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
LN2
LN10
LOG2E
Renvoielelogarithmede2.
LOG10E
Renvoielelogarithmede10.
PI
RenvoielavaleurdePisoit approximativement3.14159.
Exemple :afficherlersultatducalculdunecirconfrenceduncerclepartirdesondiamtre.
<script language="javascript"> var diametre=prompt("Quel est le diametre du cercle ? :"); var circonference=diametre*Math.PI; alert("Voici la circonfrence du cercle :"+circonference); </script>
b.Lesmthodes
Mthode abs()
Rsultat Extraitlavaleurpositiveabsolue dunnombrepassenargument. Calculelangledontlargument reprsentelecosinus. Calculelangledontlargument reprsentelesinus. Calculelangledontlargument reprsentelatangente. Renvoieunnombre correspondantlentiersuprieur dunevaleurpasseenargument. Renvoieunnombre correspondantlentierinfrieur dunevaleurpasseenargument. Calculelelogarithmenprien dunnombrepassenargument. Renvoielenombreleplusgrand danslasrie,passeen arguments. Renvoielenombrelepluspetit danslasrie,passeen arguments. Calculelersultatdunnombre levunepuissance,passeen argument. Renvoieunnombrealatoire comprisentre0et1. Arronditunnombrelentierle plusproche. Calculelaracinecarredun nombre,passenargument. Calculelesinusdunnombre, passenargument. Calculelatangentedunangle, passenargument.
Reconnupar InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
acos()
asin()
atan()
ceil()
floor()
log()
max()
min()
pow()
random()
InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra. InternetExplorer,Mozilla,Firefox, Opra.
round()
sqrt()
sin()
tan()
Exemple :creruneapplicationenJavaScriptpermettantdeffectuerdestiragesdelaloterienationale(cestdireavec6 chiffresdistinctsde149etunnumrocomplmentaire).Attention,unnumronepeutapparatrequuneseulefois.
- 8-
<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">
- 9-
<input name="boule6" type="text" id="6" size="5" maxlength="5"> </div></td> </tr> <tr> <td colspan="6"><div align="center"> <input type="button" name="Submit" value="Tirage 6 numéros" onClick="tirage6numeros()"> </div></td> </tr> </table> <p> </p> <table width="13%" border="1" align="center"> <tr> <td><div align="center">Numéro complémentaire </div></td> </tr> <tr> <td><div align="center"> <input name="complementaire" type="text" id="complementaire" size="5" maxlength="5"> </div></td> </tr> <tr> <td><div align="center"> <input type="button" name="Submit2" value="Tirage complementaire" onClick="fcomplementaire()"> </div></td> </tr> </table> <p> </p> <p> </p> </form> </body> </html> Danscescript,letiragedessixpremiersnumrosetdunumrocomplmentairesontdissocis.Cescriptprsente plusieursdifficults.Lapremireconsisteobtenirsixnumrosdanslalimitefixe(149).Lasecondeconstituele c ur de la fonction puisquil est impossible de retrouver deux fois le mme chiffre dans le mme tirage. Cest la fonctiontirage6numerosquilanceletraitementdutiragedessixpremiersnumros,demaniresimultane.Ainsi,il nest pas ncessaire de cliquer six fois sur un bouton. Pour traiter ce tirage, il est ncessaire de passer par lintermdiaire de tableaux. En effet, lusage des diffrentes mthodes de traitement (tri, suppression), impose la cration de plusieurs tableaux. Ce sont donc, les tableaux tirage, tiragetrie et bontirage qui stockent les donnes durantcesdiffrentestapes.Lesdeuxpremiersdisposentdunnombredlmentsdtermins(12),puisquilfaut effectuerplusdetiragesquilyadenumrossortir(tenircomptedessuppressionsdedoublon).Danslexemple,le nombredetiragesdenumrosestfix12,cequisemblesuffisantcarilestraredobtenir6doublons.Aufinal,seul sixnumrossontaffichs,lesautres(silyena)nesontpasaffichs.Pourcomplterlepremiertableau,lutilisation delamthoderandomdelobjetMathestintressante.Rappelonsquecettemthoderenvoieunnombreentre0et 1.Ainsi,pourobtenirunnombrecomprisentre1et49,ilsuffitdelemultiplierpar49.Seulsubsisteleproblmedun rsultatgalzro,ilserarglparlemploidelamthodeceilpermettantdextrairelentiersuprieur.Ainsi,mme si le rsultat donn par la mthode random() est quivalent 0.7365456, par exemple, cest bien un qui est retourn. La suite du script permet dalimenter le tableau tiragetrie, comprenant les numros tris. Lenjeu rside danslefait,quilfautobteniruntableauquinecomportepasdedoublons.Aprsletri,lesdoublonssontctecte dansletableau,cequifaciliteleursuppression.Lamthodesort()est,ici,employeconjointementavecunefonction de comparaison place entre parenthses, qui permet de renvoyer des lments numriques tris. Sans cette fonctiondecomparaison,leslmentsseraienttrisdanslordrelexicographique.Unefoisleslmentstris,ilsuffit de les comparer un un puis de les transfrer dans le tableau nomm bontirage. Ce dernier tableau peut alors comprendre des lments avec une valeur undefined. En triant le tableau, ces lments sont placs la fin et napparatrontdoncpas.Ilresteafficherleslmentsdutableaudansleschampsduformulaire.Pouryparvenir,il estpossibledutiliserdeuxmthodes.LapremireconsisteemployerunemthodeutilisantleDOM.Cellecisera dtaille au chapitre Amliorer linteractivit avec JavaScript et CSS. La seconde consiste faire une boucle et dutiliser le compteur i pour complter linstruction nomchamp= "boule"+i. Cette expression est ensuite traite par lintermdiaire de la mthode eval(). Ainsi, la variable texte nomchamp est constitue de la chane de caractres boule laquelle il suffit dajouter le numro du compteur i. Il faut ensuite construire une instruction alternant chane de caractres et la variable nomchamp afin quelle soit excute par le mot cl eval(). La seconde fonction permetdetraiterlenumrocomplmentaireparlammemthode.
3.frame
Lobjet frame correspond aux cadres (frames) prsents dans une page HTML. Lobjet frame dispose duneproprit
essentielle.
a.Laproprit
Proprit length
Rsultat Correspondaunombredeframes prsentsdanslapage.
Enfait,lobjetframeesttrsprochedelobjetWindowettouteslespropritsetmthodesdontnousavonsdj parlespourcedernier,sappliquentgalementlobjetframe.Avecframe,ilestpossibledaccderunefentre particuliredujeudecadresetdeuxmthodessontalorspossibles. Lapremireconsisteutiliserlesnumrosdindicedechaquelmentdujeudecadres.Ainsilepremierindice(le zrocommetoujours)correspondaucadredfinilepremier,leuncorrespondausecond Lasecondemthode(etsansdoutelameilleure)consisteidentifierlescadresparlenom,quileuratattribu aveclattributname. Soitlejeudecadressuivant :
LecodeHTMLcorrespondantest : <frameset rows="80,*" cols="*" frameborder="yes" border="1" framespacing="0"> <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="Haut" /> <frameset cols="80,*" frameborder="yes" border="1" framespacing="0"> <frame src="lef.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="Gauche" /> <frame src="principal.html" name="mainFrame" id="mainFrame" title="Principal" /> </frameset> </frameset> Ainsi,lescadrestopFrame,leftFrameetmainFramepeuventrecevoirparJavaScriptlecontenudunepageHTML. Exemple : afficher le nombre et le nom des cadres composant le jeu de cadres dcrit cidessus, puis charger une autre pagedanslecadreleft.Lescriptseraplacdanslapagednommeprincipal.
- 11 -
<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
Proprit
Rsultat Contrlesides touchesontt enfoncesaumme instantquune pressionsurlatouche [Alt],[Ctrl]ou[Shift]. Retournelabscisse oulordonnede lvnementpar rapportaudocument. Retournelecodede latouchequivient dtreenfonce. Contrlesiles dimensionsen hauteurdelafentre
Reconnupar
altKey, ctrlKey, shiftKey
InternetExplorer
clientX, clientY
InternetExplorer
keyCode
InternetExplorer
height, width
Mozilla,Firefox, Opra.
- 12 -
onttmodifies. Contrlesilaposition horizontaleou verticaledelasouris achang. Reprsentela positionhorizontale ouverticaledela souris Reprsentela positionhorizontale ouverticaledela sourisdanslafentre correspondantau documentHTML. Reprsentela positionhorizontale ouverticaledela sourisdanslafentre dunavigateur. Retournelatoucheou leboutonlorigine delvnement. Retournelenomde lvnementquivient deseproduire. Correspondaux coordonnesdela positiondelasouris oulanouvelle positiondelafentre encasde redimensionnement.
layerX, layerY
offsetX, offsetY
InternetExplorer
pageX, pageY
screenX, screenY
which
type
x, y
InternetExplorer
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; }
</script> </head> <body onmousemove="souris(event);"> </body> </html> Lescriptsexcutelorsdunmouvementdelasouris.Lobjetevent,associauxmthodesclientXetclientY,permet dedterminerlesvariablesposXetposYpuisdecomplterlabarredestatut. AttentioncescriptnefonctionnequesousInternetExplorer.
- 14 -
JavaScriptetlescookies
Contrairementcequelonpourraitpenser,cettepartiedelouvragenestpasdestinevoustransmettrequelques informations de cuisine ou des recettes. Les cookies (dont la traduction pourrait tre tmoins) sont, simplement, de petits fichiers qui sont laisss sur le disque dur du visiteur, par le navigateur. La taille de ces fichiers est trs limite (infrieure5Ko)maisstockentdiffrentesinformationsconcernantlevisiteurcomme,parexemple,sonidentifiant(sil ledsire),oulobjetdesesprcdentesvisitessurlesite.Lescookiessont,parfois,malperusparlesvisiteursetces dernierssont,alors,tentsdelesinterdireenparamtrantleurnavigateur.Ilestvraiqueleurusagepermetdesuivre quasimentlatracelesvisiteurslorsquilssontutilissdesfinsmalveillantes.linverse,lescookiesnesontpasdes virusetnenfavorisentpasnonplusladiffusion.JavaScriptpermetdegrerfacilementcescookies.
1.Principeetutilisationdescookies
Les cookies sont de petits fichiers au format txt (et contiennent donc du texte) stocks, diffremment selon le navigateur employ, sur le disque dur. Avec Internet Explorer, les cookies sont stocks dans le rpertoire c:\Documents and Settings\utilisateur\Cookies sous la forme de plusieurs fichiers dont le nom peut permettre den deviner la provenance. Vous serez certainement surpris et effray du nombre de fichiers ainsi stocks sur votre ordinateur, votre insu. Avec Firefox/Mozilla, les cookies sont stocks dans un fichier unique (cookies.txt), et avec avecOpera,ilssont,enplusdecela,crypts. Concrtement, le principe de fonctionnement des cookies est trs simple. Lors de la premire visite dun visiteur, le navigateurcritdansunfichierparticulierdesinformations,quilluiserapossibledelirelorsdelaprochaineconnexion duvisiteur.Lesutilisationspossiblessonttrsvariesetvontdelanavigationavancejusqulagestiondescaddies decommandeenligne,enpassantparlescompteursdevisite.Parexemple,ilestainsitrsfaciledestockerlenom, le prnom ou la langue de prfrence du visiteur, afin de personnaliser son interface lorsquil se connectera de nouveau et de lui proposer des pages dans sa langue prfre. Les cookies peuvent tre modifis et contenir des valeursmodifiablesultrieurement,etunefoislutilitdescookiespasse,ilestpossibledelessupprimer. Afin de tester convenablement les scripts comprenant des cookies, il convient de rgler le niveau de scurit du navigateur.Eneffet,commeindiquprcdemment,mmesiunscriptestcorrect,lenavigateurnepourrapascrire avecunrglagesurunniveaulevdescurit.Ilest,donc,importantdeffectuerunparamtragedesnavigateurs.
2.Paramtragedesnavigateurs
Lorsquelescookiessontemployspourfaciliterlauthentification,ilspeuventstockerdesinformationsconfidentielles (identifiant,motdepasse,etc.).Cetaspectpourraitparatrefortinquitant.Eneffet,rienninterditdepenserquun utilisateur malveillant puisse rcuprer des informations provenant dautres domaines. Heureusement, il est impossibledelireuncookienappartenantpasaudomainedelapageayantdposceluici.Ainsi,lauteurduscriptne peutlirequelescookiesquiladpossetnonpas,ceuxlaissspardautres.Detoutemanire,silescookiesnesont pasapprcisparlesvisiteurs,cesdernierspourronttoujourslesdsactiverdansleurnavigateur. Tous les navigateurs sont capables deffacer les cookies prsent sur lordinateur. Avec Firefox/Mozilla, la commande EffacermestracesdumenuOutilspermetdeviderlecontenudescookies.AvecInternetExplorer,ilfautcliquersur leboutonEffacerlescookiesaccessibleparleMenuOutils/OptionsInternet.Pourinterdirelcrituredescookiessur lordinateuravecFirefox/Mozilla,ilsuffitdeserendredanslemenuOutilspuisdechoisirOptionsetenfindedcocher lacaseAccepterlescookiesdelongletVieprive. AvecInternetExplorer,ilfautfaireglisserverslehaut,lecurseurdelongletConfidentialitdelabotededialogue OptionsInternet,visibleparlemenuOutils.linverse,pourlesprochainsexemples,ilestimportantdaccepterles cookies.
3.Limitesdutilisationdescookies
Lesexemplesprcdentsdutilisationmontrentclairementlintrt,maisaussileslimitesdelutilisation des cookies. InutiledesprerpouvoircreruncompteurdevisitesavecJavaScriptetlescookies,leseulmoyendyparvenirestde passer par un langage de programmation ct serveur, tel ASP ou PHP. Certains sites ncessitent lutilisation des cookies pour fonctionner correctement et les avantages de lutilisation de ceuxci, mme sils sont intressants, notamment,pourlapersonnalisationdelinterfacedessites,sontsouventdcris,dautantplusquedesproblmes descuritontsrieusementlimitleurpopularit.
4.Applicationdescookies
Ltape fondamentale consiste crer un cookie sur le poste du visiteur. Cette cration ncessite la prsence dun certainnombredinformationsobligatoires.
5.Lesinformationsobligatoirespourlacrationduncookie
Laccsauxcookiesseffectueparlapropritcookiedelobjetdocument.Ilexistedeuxtypesdefonctionnementdes cookies,luntemporaire(danslecaso,ilnestpasncessairedestockerdesinformationspourunusageultrieur), et lautre permanent (lorsque les cookies restent prsents aprs la connexion). Pour un usage temporaire, il suffit dindiquer le nom du cookie crer et les informations y stocker. Par contre, pour un usage permanent, il est ncessaire dindiquer un nom, une date dexpiration (dure de vie), une valeur et un nom de domaine, pour le reconnatreparmitouslesautres.Deplus,latailledescookiesnedoitpastresuprieure5Ko,ilestimpossible den stocker plus de vingt par domaine et le nombre total de cookies, stocks sur lordinateur, ne doit pas tre suprieur 300. Les informations sont stockes sous la forme dune chane de caractres sans espace. Cet aspect reprsentelaprincipaledifficultdelagestiondescookies.Pouruneutilisationtemporaire,lasyntaxepermettantla crationduncookieestlasuivante : document.cookie="nomducookie=valeurducookie" ; Exemple :creruncookietemporairepuislafficherdansunebotededialogue.
<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. <script type="text/javascript" language="JavaScript"> var name="moncookie"; var value="mavaleur"; document.cookie = name + "=" + value + ";expires="+"Sat,31-Dec-2099 00:00:01 GMT"; </script>
Toutdabord,ilestncessairedecreretdaffecterlesvariablesnameetvalueparunevaleurdetypetexte. Ensuite,ilsuffitdutiliserlamthodecookie()delobjetdocumentetderenseignerlesparamtresdecration. Leformatdeladatedexpirationest,ici,exprimenGMT.
- 2-
Exemple :creruncookiepermanentdontlexpirationinterviendratrentesecondesplustard.
<script type="text/javascript" language="JavaScript"> date_expiration=new Date(); var expiration=30000; date_expiration.setTime(date_expiration.getTime() + (expiration)); document.cookie =moncookie="mavaleur";expires=date_expiration; alert("Le cookie arrivera expiration ce moment : "+date_expiration); </script> Lapremiretapevise,ici,crerunobjetdetypedate()appeldate_expiration.Ensuite,ilfautcrerunevariable expiration correspondant au temps en millisecondes (ici 30000 millisecondes = 30 secondes) qui sera ajout au momentprsentparlinstructiondate_expiration.setTime(date_expiration.getTime() + (expiration)); Ensuite,ilsuffitdecrerlecookieparlamthodeprcdente,enajoutantleparamtreexpirescorrespondantla datedexpiration.Ilest,alors,faciledafficher,dansunebotededialogue,lemomentprvudelexpirationducookie. Ladatedexpirationest,donc,uneinformationtrsimportantepourlacrationoulasuppressionduncookie,comme nous le verrons plus tard. Mais dautres informations peuvent aussi tre dclares lors de la cration dun cookie, commeledomaine,lechemindestockageducookieouencorelattributdescurit.Ilsuffitsimplementdelesajouter lasuiteenlessparantpardespointsvirgules.Maiscesinformations,linversedename,valueetexpires,sont optionnelles.
7.Ajouterdesinformationsoptionnellesaucookie
Lesinformationsoptionnellespermettentdemieuxidentifierlecookie.Ellessontaunombredetrois.
a.Ledomainedevalidit
Lefaitdajouterundomainedevaliditpermetdidentifierlescookies,cequiestutilenotammentlorsdelarelecture. Sicetteoptionnestpasspcifie,lenavigateurprendralenomdedomainedelapagecontenantlescript,cequi gnralement est suffisant. Une fois le domaine spcifi, il est normalement impossible de modifier le contenu du cookiepartirdunepagenappartenantpasaudomaine.Lenombredecookiesautorisspardomaineestlimit vingt.AvecInternetExplorer,lenombredecookiespardomaineestaffichentrecrochets(informationsvisiblesdans lerpertoiredegestiondescookies).Lasyntaxe,permettantdespcifierundomaine,estlasuivante : domain=nomdudomaine ;
b.Lechemindaccs
Le chemin daccs permet dindiquer, pour quelle partie de lURL, le cookie est valable. Il est possible de lire les cookieslaisssparlespagesdessurrpertoiresetnonceuxlaisssparlespagesdessousrpertoires. Lasyntaxecorrespondanteest : path=chemin ;
c.Lattributdescurit
Lattributdescuritcorrespondautypedeconnexion(httpsetnonhttp).Sivousactivezcetteoption,lecookiene seratransmisquesilaconnexionestscurise(cestdireenutilisantleprotocolehttps). Pour activer la scurisation, il suffit simplement de faire figurer la mention secure dans les paramtres du cookie, sansparamtrageparticulier.
- 3-
Attention si vous activez loption secure, le script ne sexcutera pas, si vous faites un essai avec le protocolehttp. Commeindiquprcdemment,cesinformationsfacultativespeuventsajouterfacilementauxmentionsobligatoires, enlessparantparunpointvirgule.Donc,lasyntaxecompltedecrationduncookie(scuris)estlasuivante : document.cookie = "name=value; expires=dateexpiration; path=chemin; domain=nomdudomaine; secure";
8.Lectureduncookie
Lamthodedelectureduncookieestrelativementsimple,ilsuffitdemanipulerlachanedecaractresprsentedans lecookie,identifiparsonnom.Lamthodedemanipulationpeutcorrespondreuneexpressionrgulire. Exemple : crer deux pages, lunepermettantdcrire un cookie comportant lheure et la date de visite de la page, lautre permettant de lire le cookie et dafficher une bote de dialogue avec la date et lheure de dernire visite, inscrits dans le cookie. Scriptdelapagedcritureducookie :
<script type="text/javascript" language="JavaScript"> var nom="moncookie"; var madate=new Date(); var heure=madate.getHours(); var minute=madate.getMinutes(); var seconde=madate.getSeconds(); var jour=madate.getDay()+1; var mois=madate.getMonth()+1; var annee=madate.getFullYear(); var datecomplete=jour+"/"+mois+"/"+annee+" "+heure+":"+minute+":"+seconde; var value= datecomplete ; document.cookie = nom + "=" + value + ";expires="+"Sat,31-Dec-2099 00:00:01 GMT;domain=mondomaine.com"; if (document.cookie.length>0) { alert("il y a un cookie de dpos"); } Afin de pouvoir crire lheure et la date de la visite, il est ncessaire de crer toutes les variables pour y stocker lensembledeslmentsdinformationdutemps(anne,mois,jour,heure,minute,seconde).Ilestgalementutilede crer une variable, appele datecomplete, qui concatne lensemble des informations provenant des variables de temps.Ltapesuivantepermetdecreretdeparamtrerlecookiecomposdunom,desavaleurcorrespondant datecomplete,deladatedexpirationetdudomaineconcern.Enfin,entestantdocument.cookievouspouvezsavoir silecookieabientdposetsisalongueurestsuprieurezro.Laffichagedunebotededialogueconfirme, alors,ledptducookie. Scriptdelapagedelectureetdaffichageducookie :
- 4-
<script language="javascript"> var debut = document.cookie.indexOf("moncookie" ); if( debut == -1 ) { alert("il ny a pas de cookie"); } else { var fin=document.cookie.length; alert(document.cookie.substring(debut,fin)); } </script> Lapremiretapeconsistetesterlaprsenceducookiequinousintresse.Enloccurrence,ici,lecookieintressant senommemoncookie.Celasobtienteneffectuantunerecherchedelapositiondunomducookiedanslachanede caractresducookie.Lersultatestaffectunevariablenommedebut.Cettepositionpermettra,parlasuite,de retrouverlesinformationsdsiresdanslachane.Siletestestgal1,celasignifiequelecookienexistepas(cest larponsedelamthodeindexOf()lorsquelarecherchenapasabouti).Unebotededialoguepermetdelindiquer. Danslautrecas,lecookieabientretrouvetilsagit prsent denlirelecontenu.Pourcela,ilfautcalculerla longueurdelachanedecaractrescorrespondantaucookieetlastockerdansunevariablenommefin.Ensuite,ilne reste plus qu demander laffichage du cookie en slectionnant le dbut et la fin de la chane de caractres composantlecookie.
9.Misejourduncookie
Lamisejourseffectuesimplementparlalecturepuislaffectationdunenouvellevaleuraucookie.Leseulproblme rsidedanslefaitquelensembledesinformationsstockesestdansunechanedecaractres,cequinefacilitepas lapplicationdoprationsarithmtiques,commepourfaireuncompteurdevisitesdepages,parexemple. Exemple :afficheruncompteurreprsentantlenombredefoisquunvisiteurconsultelammepage.
<html> <head> <title>Modifier un cookie</title> <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
00:00:01 GMT;domain=mondomaine.com;path=/"; var debut = document.cookie.indexOf("moncookie" ); } </script> </head> <body> </body> </html>
Attention ! Ce compteur nest pas un vrai compteur de visites. Il faut le distinguer du compteur de visites prenant en compte toutes les visites de tous les visiteurs. Pour ce genre de compteur, il faut utiliser des langagesavecprogrammation,ctserveur(lecompteurtantstocksurleserveur,ilpeutprendreencompteles visites provenant de visiteurs diffrents). Ici, par contre, le compteur ne sintresse quaux visites du visiteur connectsurlapagepuisquilprendlesinformationsstockessurlordinateur,parlintermdiairedescookies. Commepourlalecture,ilfautdabordtesterlaprsenceducookie.Ici,ilsuffitdecalculerlenombredecaractresdu cookieetdevrifierquecenombreestsuprieurzro.Sicestlecas,vousaffichezunebotededialogueinformant delaprsenceducookie.Letravailsuivantconsistedfinirledbutetlafindelachanedecaractresextrairedu cookie.Lecookiedbutantparunechanede9caractresmoncookie(correspondantaunom),linformationquinous intresse (cestdire le compteur) est situe partir du dixime caractre. Vous affectez, alors, le rsultat de la recherchedanslachanedecaractresunevariable(valeurcookie).Ensuite,ilfauteffectueruneconversiondela variable,carcelleciestenformattexte,orcommeellevatreutilisedansuneincrmentation,ilfautlaconvertiren numrique, grce la mthode parseInt(). La variable cookienum peut, alors, tre incrmente. Ensuite, il suffit dafficher le rsultat dans une bote de dialogue et de rcrire le cookie avec la nouvelle valeur. Dans le cas o il nexistepasdecookieprsent,ilfautlecreretluiaffecterlavaleur1(puisquecestlapremirevisite).
10.Suppressionduncookie
Poursupprimeruncookie,ilsuffitdelerappelerenluiraffectantunedatedexpirationantrieureladatedujour. Unefoislenavigateurferm,lecookieserasupprim. Exemple :supprimerlecookiemoncookieetafficherunebotededialoguepourinformerlevisiteurdelasuppression.
<script type="text/javascript" language="JavaScript"> if (document.cookie.length>0) { alert("Mon cookie est dj prsent"); document.cookie="moncookie=mavaleur;expires=Thu,01-Jan-1980 00:00:01 GMT;domain=www.mondomaine.com;path=/"; alert("Le cookie moncookie a t supprim"); } else { alert("Le cookie moncookie nest pas prsent"); } </script> Commedhabitude,ilfauttesterlaprsenceducookieparlintermdiairededocument.cookie.length.Silersultatest suprieurzro,cestquelecookieestprsent.Vousaffichezalors,unebotededialogue.Ensuite,ilsuffitdecrer uncookieportantlemmenommaisavecunedatedexpirationdpasse(ici,lepremierjanvier1980).Celasuffit supprimer le cookie indsirable. Si le cookie nest pas prsent, vous affichez simplement une bote de dialogue informantlevisiteur.
- 6-
JavaScriptetCSS
HTML,JavaScriptetCSSpeuventinteragirdansllaborationdunepageweb.Eneffet,lelangageHTMLnepermetpas uncontrleapprofondideslmentscomposantunepage.Ainsi,lespagescritesuniquementavecHTMLprsentent peudoriginalit.Denombreusespagesutilisent,denosjours,desprocdstechniquesdiffrentsetvaris,permettant dajouter des animations, des sons, voire de petites vidos. Les fichiers danimations au format flash en sont un exemple.LeDHTML(DynamicHyperTextMarkupLanguage)estunealternativeFlash.IlcombineHTML,CSS,lemodle dobjet DOM (Document Object Model) et JavaScript pour donner aux pages web un aspect graphique amlior et un dbut dinteractivit (linteractivit totale ne pouvant se concevoir quavec des langages de type serveur tel PhP ou Asp). Le DHTML nest donc pas un langage de programmation part entire mais une combinaison de ces trois techniques. Dans cette combinaison, JavaScript tient une place centrale. En effet, avec JavaScript, il est possible de manipuler le DOM et ses objets. Malheureusement le DOM na pas t implment de la mme manire par tous les diteursdesnavigateurs.Aussi,ilestparfoisncessairederdiger,aupralable,unscriptdedtectiondenavigateurs etdcrire, par la suite, autant de scripts quilyadeversionsdenavigateurs !!!Cesdiffrencesimpliquentdoncune bonneconnaissanceduDOMetdesesmthodesdaccsauxobjetspourrdigerdesscriptsDHTML.
1.LeDOM(DocumentObjectModel)
LeDOMest,enfait,unedescriptionhirarchiquedeslmentscomposantsunepageweb.Cest,donc,grcecette structurehirarchisequeleslangagesdeprogrammation(dontleJavaScript),peuventaccderauxobjetsprsents dans la page. Avec le DOM, le programmeur dispose dun accs total la page, lui permettant den modifier lapparence mais aussi le contenu. Le DOM est une API (Application Programming Interface pour interface de programmation),totalementindpendantedelaplateformeetdulangagequilamanipule.CestleW3C(WorldWide Web Consortium) qui a dfini les diffrentes versions du modle DOM depuis 1998. Il est possible de trouver une descriptioncomplteduDOM,directementsurlesiteInternetduW3C,ladressesuivante :http://www.w3.org/DOM/ enversionanglaise. La premire version, baptise DOM1, est sortie en 1998 et a dfini la reprsentation dun document html ou xml (eXtensible Markup Language), sous la forme dun arbre. La notion de n ud a t retenue pour donner cette reprsentationhirarchiquedelapageweb.Lasecondeversion,baptiseDOM2,estsortieenmars2000etaajout quelques fonctions permettant didentifier les lments dune page. la date de rdaction de cet ouvrage (en mai 2008),leW3Ctravaillelasortiedelaversion3duDOM. UnedescritiquesformulesausujetdumodleDOMestquilluiestncessairedechargerenmmoire,lensemble desobjetsdunepagewebpourpouvoirfonctionner,cequipeutrendreletempsdetraitementexcessivementlong. Le DOM est une API fonde sur les arbres alors quil existe une autre mthode, baptise SAX, et qui permet de remdiercetpineuxproblme,carfondesurlesvnements.Pournotrepart,nousnouslimiteronsquelques techniquesdebasefondessurleDOMetJavaScriptpourinteragirdanslapageweb.
2.NotionsessentiellesduDOM
Avec le DOM, le programmeur dispose dobjets, de proprits et de mthodes lui permettant de manipuler tous les composantsdelapage,toutcommeavecJavaScript.Cependant,avecleJavaScript,ilnestpaspossibledemanipuler certainsobjets(lecontenudescellulesduntableau,parexemple),alorsquencombinantJavaScriptetDOMtoutest faisable(oupresque).UnedesnotionsessentiellesduDOMestcelleden ud,quicorrespondunlmentspcifi danslecodeHTMLdunepageweb.Ilexistetroistypesden ud :lesn udslments,lesn udsattributsetles n udstexte.Lesn udssont,euxmmes,hirarchiss. AfindemieuxidentifierlastructureDOMcomposantunepageHTML,ilestpossibledutiliserloutilDOMinspectorinclus dans la version 2.0.0.14 de Firefox/Mozilla. Cet outil permet de reprsenter visuellement les lments du DOM composantlapage.Pouryaccder,ilfautpasserparlemenuOutils,puischoisirInspecteurDOMouencoreutiliserle raccourciclavier [Ctrl] [Shift] I. Pour Internet Explorer, il existe galement un certain nombre doutils parmi lesquels nouspouvonsciterDebugBardisponiblegratuitement(sousrserveduneutilisationpersonnelle),entlchargement, ladresse :http://www.debugbar.com/ Aprslinstallation,loutilestdisponiblesouslaformedunebarredoutilsactiverparlemenuAffichageetloption Barredoutils/Debugbar. Commeindiquprcdemment,lesderniresversionsdesnavigateurssontcompatiblesavecleDOM.Cependant,sile visiteurnedisposepasduneversionrcente,illuiseradifficiledaccderauxfonctionnalitsquionttdveloppes. Ilestdoncprfrable,deffectuer,toutdemme,untestdecompatibilit.Parlasuite,ilserapossiblesoitdafficherun message davertissement, soit dorienter le script vers une partie prenant en charge les particularits de son navigateur. Pour y parvenir, il suffit de contrler si celuicisupportebienlaccs aux objets par lintermdiaire de la mthodegetElementBy()delobjetdocument.Lasyntaxeutiliserestdonclasuivante : document.getElementById ; Exemple :dterminersilenavigateurutilisestcompatibleavecleDOM.
- 1-
<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 getElementById() Rsultat Slectionneunlmentenfonctiondesonidentifiant. Slectionneunouplusieurslmentsenfonctiondun nompassenargument. Slectionneunouplusieurslmentsenfonctiondun nomdebalisepassenargument. Permetdelireoudassignerunevaleurunlment.
getElementsByName()
getElementsByTagName()
innerHTML()
LapremiremthodegetElementById()ncessitelutilisationdelavaleurdelabaliseidpourretrouverllmentdans lapage.Sasyntaxeestlasuivante : document.getElementById(element a manipuler) Exemple :accderlavaleurcontenuedansunlment,parlintermdiairedesmthodesproposesparleDOM.
- 2-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Acces au DOM</title> <script language="javascript"> function acces(){ document.getElementById(element1).innerHTML="Texte modifi par DHTML"; } </script> </head> <body> <div id="element1">Texte de llment 1 </div> <script language="javascript"> alert(document.getElementById(element1).innerHTML); </script> <input type="button" name="Submit" value="Modifier" onClick="acces()"> </body> </html> LescriptsexcuteaumomentduclicsurleboutonModifier.Auparavant,unscript,placdanslecorpsdelapage, accde la valeur de llment identifi par lid element1 pour en afficher sa valeur. La fonction access permet daccder llment pour en modifier sa valeur, toujours par lintermdiaire de la mthode innerHTML(). Ceci dmontrebienlapossibilitdelectureetdcrituredecettemthode. Exemple :afficherlenombredeslmentsainsiqueleurnomprsentsdansunepage.
<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.
- 3-
5.PremiresnotionsdeCSS
LutilisationdesCSS(CascadingStyleSheets)oufeuillesdestyleencascadeestunconceptquiconsistedfinirdes proprits de mise en forme et de les appliquer ensuite tout ou partie dun document. Le procd prsente de nombreuxavantagesetpermetdobteniruneprsentationhomogne,facilementmodifiableultrieurement.Unefois les feuilles de styles dfinies et appliques aux pages dun site, il est trs facile den modifier lapparence uniformment. En effet, la modification dun style sera automatiquement rpercute sur lensemble des pages lutilisant. Les feuilles de styles sont aujourdhui compatibles avec toutes les dernires versions des navigateurs (version4dInternetExploreretNetscapeNavigator,version5dOpra). AfindedfinirexactementcettecompatibilitaveclesstandardsdfinisparleW3C,ilestimportantdajouteraucode HTML de chaque page, une ligne dinstructions, appele DTD(Document Type Definition),quiclarifielesmodalitsde priseenchargedesCSS.Sansentrertropdansledtail,ilsuffitdesavoirquilenexistetroistypes,duplusstrictau pluslarge. LedocTypelepluscommunetquifaciliteralapprentissageestlesuivant : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> En plus de cette dfinition de docType, il est souhaitable dajouter une balise Meta indiquant le type de CSS au navigateuret/ouauxmoteursderecherche. <meta http-equiv="Content-Type" content="text/css"> Tout comme le JavaScript, le code CSS, dfinissant les caractristiques du style, peut sintgrerdirectementdansla pageHTMLentrelesbalises<HEAD>et</HEAD>oudansunfichiertexteexterne,enregistrauformatCSS.Nousne traiterons pas ici de linsertion de fichier CSS, car pour une meilleure lisibilit, il est prfrable de disposer de lensembleducodedanslammepage.Ainsi,pourinsrerlecodeCSS,ilestncessaire(toutcommepourJavaScript), delinclurelintrieurdesbalises<stylecss>et</style>. Lapplication de styles CSS se fait par lintermdiaire de rgles, composes dun slecteur de balise et dune dclaration.Leslecteurdebalisescorrespondlabaliselaquellelestyledevratreappliqu.Ladclaration,quant elle,comprenddespropritsauxquellessontassociesdesvaleurs.LacompositiondunergleCSSseprsente doncainsi : slecteur {Proprit : valeur} OslecteurcorrespondunebaliseHTML,Propritunepropritdelabaliseetvaleurunevaleuraffectela proprit. En somme, il faut dfinir sur quoi vous voulez appliquer le style et de quoi se compose le style. Pour prendre un exempleconcret,dfinissonsunstylequipermettedcrireaveclapoliceTahomaengrasetenrouge.Ilestprvuque cestylesappliqueuntextecomprisdanslabaliseh1(Entte1). EnpartantducodesuivantdelapageHTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Mon premier style CSS</title> </head> <body> <h1>Texte en Tahoma, rouge et gras</h1> </body> </html>
- 4-
Ilfautajouterladfinitiondustyleetsonapplicationdanslecodedelapage,quidevient : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Mon premier style CSS</title> <style css> h1{font-family: Tahoma;font-style: bold;color: red} </style> </head> <body> <h1>Texte en Tahoma, rouge et gras</h1> </body> </html> Ilnestpasutiledajouterducodeauniveaudesbalisesh1,lesimplefaitdindiquerlabalisedansladfinitiondela rgle,permetdappliquerautomatiquementlestyleCSS. LecodeCSSpeutsetrouvernimporteodanslapage,etmmeendessousdelabaliseh1,enfindepartie body. Ilestpossibledappliquerlemmestyleplusieurslments,ilsuffitdelessparerparunevirgule.
Une notion fondamentale de CSS rside dans le fait que les styles peuvent se cumuler (do leur nom). Ainsi, en reprenantlexempleprcdentetencrantunenouvellerglepermettantdemettreletexteenitaliquebtisurle slecteurh1,letexteprendtouslesformatagesdcrits. <style css> h1{font-family: Tahoma;font-style: bold;color: red} h1{font-style:italic} </style> Lensemble des rgles de style CSS peut tre inclus lintrieur dune classe qui sera appele au moment de lutilisation de la balise HTML. Il suffit dajouter un point, avant de dfinir lensemble des proprits du style en accolades. Pourappliquerlestylelabalise,ilfaututiliserlinstruction : <h1 class="changerstyle"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Mon premier style CSS</title> </script> <style css> changerstyle { font-family: Tahoma;font-style: bold;color: red; font:italic; } </style> </head> <body> <h1 class="changerstyle">Texte avec balise h1</h1> </body> </html>
- 5-
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, lapremiretrouvesurlesystmedelutilisateur serautilise. Correspondaustyledcriture. Correspondlagraisse(paisseur)delapolice. Correspondlatailledelapolice. Correspondunevariante(petitesmajuscules). Raccourcipermettantdemettretouteslesproprits.
fontfamily
fontstyle fontweight fontsize fontvariant font
Propritsdesparagraphes Proprit color lineheight textalign textindent textdecoration Rle Correspondlacouleurdutexte. Correspondlinterligne. Correspondlalignementdutexte. Correspondlindentation(retraitdutexte). Correspondunedcorationdutexte. Correspondlombragetexte,respectivement dcalagedroite,enbas,rayondeleffetdeflouet couleur. Correspondlacassedutexte. Correspondunecsure. Correspondlespacementdesmots. Correspondlalongueurdunlmentdetexteou duneimage.
textshadow
texttransform whitespace wordspacing
width
- 6-
height
Correspondlahauteurdunlmentdetexteou duneimage.
Propritsdescouleursetarrireplan Proprit backgroundcolor backgroundimage backgroundrepeat Rle Correspondlacouleurdarrireplan. Correspondlimagedarrireplan. Correspondlafaonderpterlarrireplan. Indiquesilimagerestefixeaveclesdplacementsde lcran. Correspondlapositiondelimageparrapportau coinsuprieurgauche. Raccourcipourlespropritsdarrireplan.
backgroundattachment
backgroundposition
background
Propritsdesmarges Proprit margintop marginright marginbottom marginleft margin Rle Correspondlavaleurdelamargesuprieure. Correspondlavaleurdelamargededroite. Correspondlavaleurdelamargeinfrieure. Correspondlavaleurdelamargedegauche. Correspondlavaleurdelamargedegauche.
Propritsdesbordures Proprit Rle Correspondlpaisseurdelabordure[suprieure, degauche,infrieureoudedroite]. Correspondlacouleurdelabordure[suprieure,de gauche,infrieureoudedroite]. Correspondaustyledelabordure[suprieure,de gauche,infrieureoudedroite]. Correspondlafusiondebordures. Raccourcigloballespropritsdebordure.
border[topleftbottomright]width
border[topleftbottomright]color
border[topleftbottomright]style
bordercollapse border
Propritsdesespacesintrieurs Proprit Rle Correspondlespaceintrieurentrellmentetla borduresuprieure.
paddingtop
- 7-
paddingright
Correspondlespaceintrieurentrellmentetla borduredroite. Correspondlespaceintrieurentrellmentetla bordureinfrieure. Correspondlespaceintrieurentrellmentetla borduregauche. Raccourciverslensembledespropritsdespace intrieur.
paddingbottom
paddingleft
padding
Propritsdestableaux Proprit Rle Correspondlafusiondesborduresdescellules (collapse)ounon(separate). Correspondlespacementdescellules. Correspondaupositionnementdelalgendedu tableau. Correspondlaffichage(show)ouaumasquage (collapse)descellulesvides. Dfinitunelargeurfixeouvariable. Propritpoursourdsetmalentendants,indiquantle comportementlorsdelalecturedescellulesdentte duntableau.
bordercollapse
borderspacing
captionside
emptycells
tablelayout
speakheaders
Propritsdeslistes Proprit liststyletype liststyleimage liststyleposition liststyle Rle Correspondautypedepucesetdenumrotation. Permetdepersonnaliserlespucesavecuneimage. Correspondauretraitdespuces. Raccourciverslespropritsdeliste.
Propritsdemiseenpage Proprit @page size margintop marginright marginbottom marginleft

- 8-
Rle Dfinitlamiseenpagedelimpression. Correspondauformatdelimpression. Correspondlamargesuprieure. Correspondlamargededroite. Correspondlamargeinfrieure. Correspondlamargedegauche.

marks pagebreakbefore pagebreakafter
Traitsdecoupeetrepresdemontage. Forcelesautdepageavantunlment. Forcelesautdepageaprsunlment. viteleslignesorphelinesenfindepage.Dfinitle nombredeligne(s)minimapartirduquelunrenvoi enpagesuivanteesteffectu. viteleslignesveuvesendbutdepage.Dfinitle nombredeligne(s)minimapartirduquelunrenvoi enpageprcdenteesteffectu.
orphans
widows
Lensemble de ces proprits dmontre bien le vaste champ dapplication des CSS. Lutilisation conjointe avec JavaScriptpermetdecontrlerlesdiffrentesmisesenforme,enfonctiondesituationsoudeconditionsparticulires.
- 9-
InteractionJavaScript/CSS
prsentquelesrglesCSSetlapropritclassNameonttabordes,ilseraitintressantdepouvoirlesassocier JavaScriptpouramliorerlaffichagedecertainslmentsdunepage.Pourcela,ilsagitdecommanderlapplicationdes feuillesdestylespardesvnements.
1.Appliquerlesfeuillesdestylegrceauxvnements
Le JavaScript permet de contrler lapplication des rgles CSS dfinies. Il suffit dajouter un comportement pour excuterunefonctionappliquantlestyleCSSdsir. Exemple :appliquerunstyleCSSsuruntexteaumomentdupassagedelasourissurceluici(lexemple reprend le code prcdent).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Mon premier style CSS</title> <script language="javascript"> function changer(h1) { h1.className="changerstyle"; } </script> <style css> .changerstyle { font-family: Tahoma;font-style: bold;color: red; font:italic; } </style> </head> <body> <h1 class="Aucun style CSS" onMouseOver="changer(this)">Texte avec balise h1</h1> <p class="changerstyle"> </p> </body> </html Au passage de la souris, la fonction changer sexcute et prend lobjet this (ici la balise h1), comme argument. La fonctionchangerindique,ensuite,dappliquerlestyleCSSnommchangerstyle.
2.UtiliserlesstructuresdecontrlespourpiloterlapplicationdesstylesCSS
Il est galement possible dutiliser les structures de contrle fournies par JavaScript pour laborer des scripts plus complexes, permettant des effets trs utiles. Par exemple, lusage des styles CSS peut simplifier la recherche dinformationsdansuntableauosetrouveunegrandequantitdinformations(mmesipourlexemple,ilsagitdun tableausimplifi). Exemple :modifierlarrireplandescellulesdutableaupourquildeviennerougeavecletexteblancetgras,aupassagede lasouris.
- 1-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Javascript et CSS</title> <style css> .cellulesurbrillance { color:#FFFFFF; font-weight:bold; background-color:#CC0000; } </style> <script language="javascript"> function allumecellule(cell) { if (cell.className="Aucun style CSS") { cell.className="cellulesurbrillance"; } } function eteincellule(cell) { if(cell.className="cellulesurbrillance") { cell.className="Aucun style CSS"; } } </script> </head> <body> <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
- 2-
dessousdelaquellelasourisestpositionne,estfacilementreprable. Ilestpossibledemodifierlgrementcescriptpourmieuxvisualiserleslignespluttquelescellules.Dansce cas,cestlabalise<tr>,quicorrespondlalignecompltedutableau,quiestlorigineduchangementde miseenformelaplacedelabalise<td>,correspondantlacellule.
<tr class="Aucun style CSS" onMouseOver="allumecellule(this)" onMouseOut="eteincellule(this)">
3.Modifierlaffichage/masquagedeslmentsparJavaScript
Il est possible, galement, daccder aux proprits de style par JavaScript. Cela permet notamment dafficher, de masquerdesblocsdetextesinclusdansdesbalisesdetype<div>. Pourrappel,cetypedebalisepermetdeconstituerdesblocsdetexteetsapparentelabalise<span>. Cest la propritdisplayquipermetdafficher ou de masquer les blocs. Il suffit de lui attribuer la valeur nonepour cacheroublockpourafficher. Il est possible dutiliser une autre proprit la place de display, il sagit de la proprit visibiliy pouvant avoir commevaleur,visibleouhidden(cach).Danscecas,lersultatestlgrementdiffrentpuisquelaplaceoccupe parleblocdetextenestpaslibre. Cetexempleestsurtoututilesurdestableauxcomprenantsdenombreuseslignesetdanslesquelslaplacedisponible nestpassuffisante.Ici,parsoucidesimplification,lenombredelignesestrduitquatre. Exemple :afficher/masquerdesinformationsdansuntableau,aupassagedelasourissurunecellule.Lemessagepourra treenrougeouenvertselonlessituations.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Javascript et CSS</title> <script language="javascript"> function efface(element) { var tabelements=new Array(); tabelements=["1306","2206","2506","3006"]; for (i=0;i<tabelements.length;i++) { document.getElementById(tabelements[i]).style.display=none; } } function afficher(nom) { document.getElementById(nom).style.display=block; } function masquer(nom) { document.getElementById(nom).style.display=none; } </script> <style type="text/css"> .Stylerouge { color: #FF0000; font-weight: bold; } .Stylevert { color: #006600; font-weight: bold; }
- 3-
</style> </head> <body onLoad="efface()"> <p> </p> <table width="50%" border="1"> <tr> <td ><span class="Style3">Date</span></td> <td ><span class="Style3">Formation</span></td> <td ><span class="Style3">Lieu</span></td> </tr> <tr> <td onMouseOver="afficher(1306)" onMouseOut="masquer(1306)"> 13 et 14 juin <div class="Stylevert" id="1306">Places disponibles</div></td> <td onClick="masquer()">JavaScript</td> <td onClick="masquer()">Metz</td> </tr> <tr> <td onMouseOver="afficher(2206)" onMouseOut="masquer(2206)">22, 23 et 24 juin <div class="Stylerouge" id="2206">Plus de places disponibles</div></td> <td onClick="masquer()">HTML</td> <td onClick="masquer()">Nancy</td> </tr> <tr> <td onMouseOver="afficher(2506)" onMouseOut="masquer(2506)"> 25 et 26 juin <div class="Stylerouge" id="2506">Plus de places disponibles</div></td> <td onClick="masquer()">JavaScript</td> <td onClick="masquer()">Paris</td> </tr> <tr> <td onMouseOver="afficher(3006)" onMouseOut="masquer(3006)"> 29 et 30 juin <div class="Stylevert" id="3006">Places disponibles </div></td> <td onClick="masquer()">HTML</td> <td onClick="masquer()">Strasbourg</td> </tr> </table> </body> </html> Lescriptportesurquatrecellulesdun tableau et dbute par la constitution duntableaupermettantdidentifierles balises<div>enfonctiondeleurid.Celapermet,justeaprs,deffectuerunebouclepourtrecertainquetousles blocssontmasqus.Lecalculdunombredlmentsdutableaupermetdedterminerlenombreditrations.Suivent, ensuite, les deux fonctions permettant laffichage et le masquage, suivant le paramtre transmis au moment de lvnement(onMouseOveretonMouseOut).Ainsi,aupassagedelasouris,lvnementactivelafonctionafficher()et luitransmetlIddublocmanipuler.Inversement,enquittantletexte,lafonctionmasquer()effectuelemasquagedu blocconcern.LesdeuxstylesCSSsontdfinisetappliqusauxbalises<div>. Voiciunautreexempledutilisationunpeupluscomplexepermettantdegrerlapplicationdelavisibilit. Exemple : prvenir lutilisateur, lors dune saisie dun champ de formulaire, du nombre de caractres disponibles dans le champ.Lechampluimmedoitprendreuneprsentationdiffrente(fondjaune)pourprvenirdelimminencedelalimite.
<html> <head> <title>Avertissement limite champ de formulaire</title>
- 4-
<script language="javascript"> function control(chaine) { var longueur=0; longueur=chaine.length; limite=10-longueur; var message="Attention ! il ne vous reste plus que "+limite+" caractres disponibles"; if (limite<5 && limite>0) { document.getElementById(alerte).style.visibility="visible"; document.getElementById(texte).className="fin"; document.getElementById(alerte).innerHTML=message; } else { document.getElementById(alerte).style.visibility="hidden"; } } </script> <style type="text/css"> .normal{ position:absolute; left:64px; top:83px; height:25px; width:329px; visibility:hidden; background-color:#FFFFCC; border:1px solid double; color: #FF0000; padding:2px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold } .fin{ background-color:#FFFFCC; color: #FF0000; font-size:12px; font-weight:bold} </style> </head> <body> <div id="alerte" class="normal"></div> <form name="form1" method="post" action=""> <p> <input name=texte type=text id="texte";" size=15 maxlength="15" onKeyUp="control(this.value)"> </p> </form> </body> </html> Lexcutiondecescriptdpenddunombredecaractressaisisdanslechampnommtexte.Lafonctionsexcute, donc, chaque relchement de pression sur une touche. Le contenu du champ texte est, alors, renvoy dans la fonction contrle() comme argument. Il faut, ensuite, initialiser la variable longueur pour quelle prenne la nouvelle valeur de la longueur de la chane. Il est possible, ensuite, de calculer cette longueur par la proprit length de la chanedecaractres.tantdonnquelalimitedesaisieduchampestfixe10caractres,ilestfacilededterminer par soustraction le nombre de caractres possibles restants. Juste aprs, le script construit une variable nomme messagequiseraaffichedanslecalque,unpeuplustard,parlamthodeinnerHTMLetquiestcomposededeux chanesdecaractres,sparesparlavariablelimite.Cestcelleciquipermet,parlasuite,desavoirsilenombrede caractres inclus dans le champ est compris entre 5 et 0. Si cest le cas, il faut afficher le calque en modifiant sa visibilitpuisque,pardfaut,elleestfixeenhiddenparlintermdiairedunstyleCSS.Parlammeoccasion,ilest possible de changer le style CSS du champ de formulaire pour tre sr dattirerl il de lutilisateur, en modifiant la couleurdufondpourlamettreenjaune.Enfin,ilfautmettrejourlecontenuducalqueparlemessageindiquantla finconseilledelasaisie.Unefoislaconditiondpasse,lemessageseffacepourlaisserlechampenrouge.
4.ModifierlapositiondeslmentsparJavaScript
Enplusdelavisibilit,ilestpossibledemodifierlapositiondeslmentslaidedelapropritposition.Laposition peuttredfiniesoitdemanireabsolue(enpixelsparrapportaucoinsuprieurgauchedelobjet),soitdemanire
relative(parrapportlobjetloriginedelaction).Pourleprciser,ilconvientdajouterlapropritposition :relative ouposition :absolute.Danstouslescas,lespropritsleftettoppermettentdeparamtrercetteposition. Exemple :crerunecarteinteractivepermettantdafficher des infobullesaveclenomdelargionfranaiseaprsunclic sur celleci. Par souci de simplification du code, le test prendra en charge seulement trois rgions (lAlsace, la Lorraine et lIledeFrance).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Mon premier style CSS</title> <script language="javascript"> function efface() { document.getElementById("Alsace").style.visibility=hidden; document.getElementById("Lorraine").style.visibility=hidden; document.getElementById("IDF").style.visibility=hidden; } function coordonnees(event) { var posx=event.clientX; var posy=event.clientY; if(posx>565&&posx<620&&posy>150&&posy<320) { var posy=posy+25;
- 6-
var posx=posx+25; document.getElementById("Alsace").style.visibility=visible; document.getElementById("Alsace").style.top=posy+"px"; document.getElementById("Alsace").style.left=posx+"px"; } else if(posx>500&&posx<570&&posy>155&&posy<270){ var posy=posy+25; var posx=posx+25; document.getElementById("Lorraine").style.visibility=visible; document.getElementById("Lorraine").style.top=posy+"px"; document.getElementById("Lorraine").style.left=posx+"px"; } else if(posx>330&&posx<415&&posy>225&&posy<280){ var posy=posy+25; var posx=posx+25; document.getElementById("IDF").style.visibility=visible; document.getElementById("IDF").style.top=posy+"px"; document.getElementById("IDF").style.left=posx+"px"; } } </script> <style css> .reponse{position:relative;background-color:#FFFF99;fontweight:bold;width:100px;height:auto } </style> </head> <body> <div class=reponse id="Alsace">Alsace</div> <div class=reponse id="Lorraine">Lorraine</div> <div class=reponse id="IDF">Ile-de-France</div> <p><img src="../france_regions.jpg" width="740" height="680" OnLoad="efface()" onClick="coordonnees(event)"></p> </body> </html> Le script masque dabord les calques ventuellement visibles au chargement de limage par lintermdiaire de la fonction efface(). Les autres fonctions sexcutent au moment du clic sur une portion de limage correspondant la rgion.Pourdterminerlazoneenpixels(partirducoinsuprieurgauche),ilfaut,dabord,rcuprerlapositiondu curseuraumomentduclic,puiseffectuerunesriedetestspoursavoirsilecurseursetrouvedanslazonedfinie. Pour dfinir la position du curseur, il est possible dutiliser event.clientX et event.clientY. La dfinition de la zone correspondant la rgion est faite de manire arbitraire, cestdire que le dessin des rgions est rduit un rectangle. videmment, pour ceux qui le dsirent, cette zone peut tre affine. Il sagit, ensuite, de redfinir les coordonnesdelabalisequivacomporterlenomdelargion,enyappliquantundcalagedepositiondemanire relative.LesparamtresdaffichagedelabulletantdfinisdanslefichierCSS.
5.ModifierlatailledeslmentsparJavaScript
Il est possible, galement, daccder aux proprits de taille. Pour cela, il faut utiliser les proprits de largeur (style.width)etdehauteur(style.height): Exemple :effectuerunchangementdetailleduncalqueaprsavoirdemandlutilisateur,lesnouveauxparamtres.
- 7-
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Modifier la taille</title> <script language="javascript"> function changecalque(){ alert("Ce calque doit changer de taille"); var dimX=document.getElementById("calque1").offsetWidth; var dimY=document.getElementById("calque1").offsetHeight; alert("Les dimensions du calque sont : "+ dimX +" pixels en largeur et "+dimY+" pixels en hauteur"); newdimX=prompt("Quelle est la nouvelle taille en largeur :", "Saisissez ici la nouvelle taille"); newdimY=prompt("Quelle est la nouvelle taille en hauteur :", "Saisissez ici la nouvelle taille"); newdimY=newdimY+"px"; newdimX=newdimX+"px"; document.getElementById("calque1").style.height=newdimY; document.getElementById("calque1").style.width=newdimX; } </script> <style type="text/css"> .calque1 { position:absolute;left:300px;top:100px;color:#FF0000; padding:10px;border:1px solid #000;background-color:#FFFF99; } </style> </head> <body> <div class="calque1" id="calque1" onClick="changecalque()">Calque1</div> </body> </html> Ce script sexcute au moment du clic sur le calque. La fonction changecalque() affiche tout dabord une bote de dialoguepuisaffecteauxvariablesdimXetdimYlesvaleursenpixelsdelatailleducalque.Lescriptafficheensuiteces valeurs dans une bote de dialogue. Ensuite, il est demand lutilisateur de saisir les nouvelles valeurs afin de changerlesdimensionsducalque.CesvaleurssontstockesdanslesvariablesnexdimXnewdimYauxquellesilfaut ajouter"px"pourobtenirunenouvellechanecorrespondantparexemple100px.Enfin,ilestpossibledemodifierles dimensionsducalqueenutilisantlamthodegetElementById.
6.ModifierlasuperpositiondeslmentsparJavaScript
Ilest,galement,possibledetravailleraveclasuperpositiondlments.Lasuperpositionestgreparlaproprit zindex.Enaffectantunevaleurzindex,ilestpossibledemodifierlordredesuperpositiondelobjet. Exemple :crerunmenudenavigationencombinantlespropritsdevisibilit,depositionetdesuperposition.
- 8-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/css"> <title>Menu navigation CSS</title> <script language="javascript"> function efface(numcalque) { document.getElementById(numcalque).style.visibility=hidden; document.getElementById(triangless1).style.visibility=hidden; } function affiche(calque) { document.getElementById(calque).style.visibility=visible; } function masque(calque) { document.getElementById(calque).style.visibility=hidden; } function affichetriangle(triangle) { document.getElementById(triangle).style.visibility=visible; document.getElementById(triangle).style.zIndex=2; } function recultriangle(triangle) { document.getElementById(triangle).style.zIndex=0; } function effacetriangle(triangle) { document.getElementById(triangle).style.visibility=hidden; } </script> <style type="text/css"> .calque1{ visibility:hidden; padding:2px; position:absolute; background:#993399; border:#000000:solid; left:0px; top:21px; height:137px; width:150px; color:#FFFFFF; background-color: #993399; } .menu1{ position:absolute; padding:2px; background:#993399; border:#000000:solid; left:0px; top:0px;
- 9-
height:20px; width:100px; color:#FFFFFF} .triangless1{ visibility:hidden; padding:1px; position:absolute; padding:0px; left:136px; top:40px} .calque2{ visibility:hidden; padding:2px; position:absolute; background:#993399; border:#000000:solid; left:150px; top:40px; height:141px; width:150px; color:#FFFFFF} .zonefface{ position:absolute; background:#FFFFFF; border:#000000:solid; left:742px; top:161px; height:250px; width:350px; color:#FFFFFF} </style> </head> <body> <div class="menu1" id="Menu1" style="z-index:1" onMouseOver="affiche(calque1)">Menu1</div> <div class="calque1" id="calque1" style="z-index:1" onMouseOver="affiche(calque1)"> <div id="txtsous-menu1" onMouseOver="affichetriangle(triangless1);affiche(ss1)" onMouseOut="effacetriangle(triangless1); masque(ss1)"> <p>Sous-menu 1</p> </div> <div id="txtsous-menu2"> <p>Sous-menu 2</p> </div> <div id="txtsous-menu3"> <p>Sous-menu 3</p> </div> </div> <div class="calque2" id="ss1" style="z-index:1"> <p>Sous-sous-menu 1</p> <p>Sous-sous-menu 2</p> <p> Sous-sous-menu 3</p> </div> <div class="zonefface" id="zonefface" style="z-index:0" onMouseOver="masque(calque1); masque(ss1)"></div> <img src="triangle_mauve.jpg" width="15" height="19" class="triangless1" id="triangless1" > <img src="triangle_mauve.jpg" width="15" height="19" class="triangless1" id="triangless2" > </body> </html> Le script se divise en plusieurs fonctions qui permettent dafficher ou de masquer certains composants du menu (menu,sousmenusettriangledindication).Cescriptsebasesurlaffichageoulemasquagedlments,enfonction dusurvolsurunautrelment.Leprincipederapprochement/reculest,aussi,employ,notammentpourletriangle qui change dindice de superposition, pour apparatre pardessus les lments de menu. La premire fonction effacecalque()apourrledeffacerlescalquesetletriangledindicationparlintermdiairedelapropritdevisibilit. Lesautresfonctionspermettent,leurtour,dafficheroudemasquerdeslmentsdemenu,transmisenparamtre
- 10 -
au moment du survol. Ainsi, lorsque le premier texte du sousmenu est survol, le triangle redevient visible et son indicezindexprendlavaleur2,cequiluipermetdepasseraudessusdesmenusetsousmenus.linverse,lorsque lasourisquittelesurvoldupremiertextedusousmenu,letriangleprendunevaleurdezindexgalezroetpasse doncendessousdumenu.Ilestvidentquilauraittpossibledemasquerletriangleparlapropritdevisibilit, cependantcescriptestunbonexempledumlangedespropritsdevisibilitetdesuperposition.
7.Ledraganddrop
Ledraganddrop(glissdposenfranais)permetdesaisirunobjet(gnralementuncalque),encliquantdessus et de le dplacer, en maintenant enfonc le bouton gauche de la souris. Une fois la position dsire, il suffit de relcherlebouton.IlnexistepasdefonctionprdfiniededraganddropdansJavaScript.Pouryarriver,ilsagitde trouveruneastucepermettantderaliserledplacement. Exemple : raliser un script permettant de faire un glissdpos dun calque, correspondant ltiquette dune rgion franaisesurunecartedefrance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>Gliss-dpos</title> <script language="javascript"> var positionX=0, positionY=0; var dimX=0, dimeY=0; var mavar=1; var nouvellepositionX=0, nouvellepositionY=0; function depart(calque) { dimX=positionX-document.getElementById(calque).offsetLeft;
dimY=positionY-document.getElementById(calque).offsetTop; mavar=0; } function deplacement(page) { if (document.all) { positionX=event.clientX; positionY=event.clientY; } else { positionX=page.pageX; positionY=page.pageY; } if(mavar!=1){ var nouvellepositionX=positionX-dimX; var nouvellepositionY=positionY-dimY; document.getElementById(calque1).style.left= nouvellepositionX+"px"; document.getElementById(calque1).style.top= nouvellepositionY+"px"; } } function arret(calque) { calqueDragDrop=""; mavar=1; } document.onmousemove=deplacement; document.onmouseup=arret; </script> <style type="text/css"> .calque {position:absolute;left:400px;top:100px; cursor:move;width:75px;height:35px;font-size:10pt; font-weight:bold;font-family:arial;border:1px solid #999 } </style> <body style="height:100%"> <div id="calque1" class="calque" style="top:25px; left:931px; z-index:0; color:#009; background-color:#D5D5FF;" onMouseDown="depart(calque1)">Region</div> <p><br /> <img src="france_regions.jpg" width="740" height="680"> </p> </body> </html> Lescriptdbuteauchargementdelapageetinitialisezrolensembledesvariablesquisontutilises.Lafonction depart() sexcute au moment du clic, ce qui permet de rcuprer les coordonnes de la souris par rapport au coin suprieur gauche du calque et de les stocker dans deux variables dimX et dimY. Par la mme occasion, la variable mavarprendlavaleurde0indiquant,ainsi,quelecalqueestslectionn. Aumomentdudplacementdelasouris,lafonctiondeplacement()testeletypedenavigateuretpermetdercuprer dedeuxmaniresdiffrenteslescoordonnesdelasouris,suivantletypedeceluici.AvecInternetExplorer,ilsagit delamthodeevent.clientX()etevent.clientY()alorsquavecMozilla/Firefox,ilsagitdelamthodepageX(),pageY(). En fonction de la position de la souris et si la variable mavar est diffrente de zro (ce qui est normalement le cas puisquelutilisateuracliqusurlecalque),ilsagitdecalculerlanouvellepositioncorrespondante.Pourcefaire,ilfaut prendrelapositiondelasourisetysoustraireledcalageduclicdanslecalque(variabledimXetdimY).Lersultat est ensuite raffect au calque en passant par les mthodes document.getElementById(calque1).style.top() et document.getElementById(calque1).style.left().
- 12 -
AjaxetJavaScript
Toutdabord,ilconvientdesignaler,quecettepartiedelouvrageneprtendpasdonnerlensembledesconnaissances enAJAXetainsi,permettrededvelopperlintgralitdunsiteaveccettetechnologie.Ilsagitsimplementdendfinir les contours et den connatre les principes de fonctionnement. Mais AJAX, en dfinitive, a correspond quoi ? Tout commeleDHTML,lAJAX(AsynchronousJavaScriptAndXML)estunmlangedediffrentestechniques.AvecAJAX,ilest possibledeffectuerdesrechargementsdedonnes,enprovenanceduserveur,toutenrestantsurlammepage.En fait,unvisiteurpeutcontinuersaisirdeschampsdeformulairealorsquuncontrleesteffectuenarrireplanpour vrifier une saisie prcdente avec les donnes prsentes sur un serveur. Ce type de fonctionnement, appel asynchrone,nestpasleseul,carlatechnologieAJAXpermetgalementdexcuterdesrequtesenmodesynchrone (danscecas,larequteestexcutesansquilsoitncessairederechargerlapageoudenchargeruneautre,maisla saisie simultane est impossible, ce qui rduit son utilisation). En fait, les pages crites avec de lAJAX cumulent plusieurstechnologies:
q
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
- 1-
donnes.XmlHttpRequestdisposedeplusieursmthodesetattributsceteffet.
2.LesattributsdeXmlHttpRequest
Attributs Rsultat Affecteunefonctionchaquechangementdtat dansletraitementdelarequteenmode asynchrone. Correspondltatdelobjet,toutaulongdu traitementdelarequte.Ellecomportequatre valeurs :0pournoninitialise(Uninitialized),1pour ouvert(Open),2pourenvoye(Sent),3pourencours derception(Receiving)et4pourprt(Loaded). Indiquequelarponsedevratrerenvoyesous formetexte. Indiquequelarponsedevratrerenvoyesous formeXML. Correspondaucodedustatutdeserveur(404pour pagenontrouveet200pourOK). Correspondaumessageaccompagnantlecode statut.
onreadystatechange
readyState
responseText
responseXML
status
statusText
Mthode abort
Rsultat Abandonnelarequteetrinitialiselobjet XmlHttpRequest. Correspondauxentteshttpdelarponse. Correspondlavaleurdelentteindiqueen paramtre. Permetlaconnexionavecleserveurenpassantles paramtresdemthode(GET,POST),dURLetdetype (synchroneouasynchrone). Transmetunerequteauserveurselonlesmthodes GETouPOST. Affecteunevaleuruneenttequiserarenvoye lorsdelarequte.
getAllResponseHeaders()
getResponseHeader()
open()
send()
setRequestHeader()
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.
- 2-
Lefichierphp : <?php require_once(../../Connections/connex1.php); ?> <?php mysql_select_db($database_connex1, $connex1); $query_Recordset1 = ("SELECT Utilisateurs.Identifiant FROM Utilisateurs WHERE Utilisateurs.Identifiant = ".$_GET["Identifiant"].""); $Recordset1 = mysql_query($query_Recordset1, $connex1) or die(mysql_error()); $row_Recordset1 = mysql_fetch_row($Recordset1); $totalRows_Recordset1 = mysql_num_rows($Recordset1); //echo $Recordset1; if ($row_Recordset1>0) { echo djapris; } ?> Le script PhP utilise le paramtre (Identifiant), renvoy par le fichier html, pour extraire les donnes grce la requte.Danslecasolarequtetrouvedeslmentsrpondantsauxcritres(cestdiresi$row_Recordset1>0), cela signifie quilexistedjunidentifiantidentique.Danscecas,lescriptrenvoielachanedecaractresdjapris commerponse. LefichieravecscriptJavaScript : <html> <head> <title>Exemple de script AJAX</title> <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;
- 3-
else return false; } </script> </head> <body> <form> <div id="reponse"></div> <input type="text" name="Identifiant" onKeyUp="verif(this.value);" /> </form> </body> </html> Dans ce script, cest la fonction verif() qui lance le traitement chaque relchement dune touche du clavier. Le contrle de lidentifiant seffectue seulement, si 4 caractres, au moins, ont t saisis. Dans ce cas, la fonction freponse() prend le relais. Elle dfinit une variable nomme retour correspondant au rsultat retourn par le fichier PhP,parlintermdiairedelafonctionconnectURL()dontladressedufichieretlecritredinterrogationsontpasssen paramtres. La fonction connectURL() commence par tester le navigateur pour savoir sil accepte lobjet XmlHttpRequestetconstruitlobjetobjXHR.Ilfaut,ensuite,testerlestatutdelaconnexionpoursavoirsilestpossible denvoyer une requte (objXHR.readyState = = 4). Si cest le cas, la fonction connectURL() retourne la rponse sous forme texte. Une fois la rponse retourne, la fonction freponse traite la valeur. En fonction du rsultat du test, un messageestenvoyaucalqueparlintermdiairedelinstructioninnerHTML. LapuissancedAJAXestainsidmontreetdepuisquelquesmois,lenombredepagescontenantducodeAJAXcrot de manire exponentielle. En fait, comme un effet de mode, dvelopper en AJAX est devenu un must. Et comme toujoursendetelcasdefigure,ilestpossiblederetrouverAJAXmmedansdespagesquinennontpasforcment besoin.tantdonnquelerecoursAJAXmultiplielesrequtesauserveurdedonnes,ilconvienttoutdemmede limitersonutilisationdescasbienprcis. Ce script dmontre galement que JavaScript est loin dtre un sous langage. Combins avec des technologies rcentes,lesscriptsrdigsenJavaScriptpeuventtretrslaborsetcomplexesmaintenir.Ilexiste,cependant, unealternativepermettantdesimplifierlardactiondetelsscripts.CestlerecoursauxbibliothquesJavaScriptqui permet,enoutre,dedcouvrirdenouvellesutilisations.
- 4-
LesbibliothquesJavaScript
Depuisledbutdecetouvrage,lesprincipesdeJavaScriptonttmisenapplicationpourpermettredajouterplusde fonctionnalits aux pages HTML. Malgr tout, un tel dveloppement ncessite un investissement en temps important, quipeuttresourcededcouragement.Heureusement,ilexistedenombreuxframework(bibliothques)JavaScripten tlchargement gratuit qui permettent non seulement un gain de temps considrable, mais offrent, aussi, de nombreuses possibilits supplmentaires. Il ne sagit pas ici de toutes les passer en revue, mais simplement den montrer leur installation et leur principe de fonctionnement. Nous nous attarderons, plus particulirement, sur la bibliothque script.aculo.us qui permet de nombreux effets visuels et permet dajouter facilement beaucoup de fonctionnalits(autocompltion,draganddrop...).Maistoutdabord,ilfautdcrirelabibliothquePrototype,labase dautresframeworksetquiest,donc,indispensable.
1.LabibliothquePrototype
La bibliothque Prototype est une bibliothque permettant de simplifier la rdaction de scripts JavaScript. Les fonctionnalits proposes sont une sorte dextension aux mthodes JavaScript. Cette bibliothque fournit de nombreuxraccourcisdecodesintressantsetpermet,galement,desimplifierletraitementdesrequtesAJAX. Cettebibliothqueestdisponibleentlchargementladressesuivante :http://www.prototypejs.org/download Cette bibliothque est constitue dun seul fichier quil est ncessaire dappeler, lors de chaque usage, par la ligne suivante : <script language="javascript" src="chemindufichier/prototype.js"> IlseraittroplongdedonnerunedescriptiondtailledelabibliothquePrototype.Eneffet,ellesertdebaseune autre bibliothque script.aculo.us, fournissant de nombreuses fonctionnalits intressantes (notamment au niveau graphique)etquenousdtailleronsdansleparagraphesuivant.
2.Labibliothquescript.aculo.us
Cettebibliothqueestdisponibleentlchargementgratuitladressesuivante :http://script.aculo.us/downloads La bibliothque est constitue de plusieurs fichiers classs dans trois rpertoires. Le rpertoire lib contient la bibliothquePrototype,ncessairelutilisationdesscriptsdescript.aculo.us.Lerpertoiretestcontientdeuxpages permettantdevisualiseretdetesterlesfonctionnalitsdescript.aculo.us.Ainsi,lapagerun_unit_testsvouspermet de vrifier que les scripts sexcutent bien sur le navigateur de test, il sagit de laisser le test se drouler et de contrlerlemessagederetourpourtresrquelensemblefonctionnecorrectement.Enfin,lerpertoiresrccomprend huitfichiersJavaScriptcorrespondantaufichierdebasescriptaculous.jsainsiqueseptmodulescorrespondantdes fonctionnalitsprcises : Fichier effects.js builder.js dragdrop.js sliders.js sound.js control.js unitest.js Fonctionnalits Effetsspciaux. ManipulationdesobjetsHTMLviaDOM. Effetsdeglisserdposer. Effetsdeglisser. Utilisationdessons. Autocompltion. Testdeseffets.
Afindedisposerdesfonctionnalitsdescriptaculo.us,ilfautsoitchangerlefichiercorrespondantleffetdsir,soit changerlefichierscriptaculos.jsaprslefichierprototype.js.Lesdeuxlignessuivantesdoivent,donc,figurerdansles pages : <script language="javascript" src="prototype.js" > </script>
- 1-
<script language="javascript" src="scriptaculous.js"> </script> Le fichier scriptaculous.js fait ensuite appel aux diffrents fichiers (effects.js, sliders.js), en fonction des besoins du scriptdelapage.Celasignifiequetouslesfichierssontchargs,avantmmelemoindretraitement.Cetaspectpeut paratrecontraignantpourlesutilisateursnedisposantpasdundbitsuffisant(mmesiceladevientdeplusenplus rare). Afin dallger le temps de tlchargement, il est possible de faire appel au seul fichier concern. Il est, par exemple,inutiledechargerlefichierdragdropsivotrepagenecomportequedeseffetsdanimation.Danscecas,il fautfaireappelauseulfichierconcern,parlasyntaxesuivante : <script language="javascript" src="chemindufichier/scriptaculous.js?load=effects"></script> Lesfichiersjsdoiventtreplacssurleserveur,bienentendu.Grcecettemiseen uvre,ilestpossibledaccder denouvellesmthodesetdenouveauxmotscls. Afindesimplifierlaprsentation,lesscriptssuivantsfontappellabibliothqueentire.
3.Leseffetsvisuelsavecscript.aculo.us
Pluttquedelisterleseffetsvisuels,lemieuxestpeuttredlaborerunscriptpermettantdelesappliquer. Pourutiliserceseffets,ilsuffitderespecterlasyntaxesuivante : New Effect.nomdeleffet("nomelement",options) Onomdeleffetcorrespondleffetutiliserparmilalistedeseffetsdisponibles,nomelementcorrespondllment sur lequel appliquer leffet (gnralement un calque) et options correspond au paramtrage de leffet (position, dimension,etc.). Exemple :crerunepagepermettantdappliquerlesdiffrentseffetssurunblocdetexte.
<html> <head> <title>Test effets avec scriptaculos</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="/scriptaculous.js"></script> <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);
} function reduit() { new Effect.Fold(el); } function grossis() { new Effect.Grow(el); } function battre() { new Effect.Pulsate(el); } function nuage() { new Effect.Puff(el); } function rebouger() { new Effect.Shrink(el); } function retour() { new Effect.Squish(el); } function interrupt() { new Effect.SwichOff(el); } </script> <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"
- 3-
value="Nuage" onClick="nuage()"></td> <td width="6%"><input type="button" name="Submit11" value="Rebouger" onClick="rebouger()"></td> <td width="18%"><input type="button" name="Submit12" value="Retour" onClick="retour()"></td> </tr> </table> </p> </div> </body> </html> Cescriptsexcuteauchargementdelapage.Aprsavoircharglesdeuxfichiersncessairesauxfonctionnalitsde la bibliothque scriptaculo.us, le script dfinit une variable permettant dconomiser la saisie pour les manipulations suivantes. Lensemble des effets appliqus lobjet peut tre lanc par un clic sur un bouton, o figure le nom de leffet. La bibliothque script.aculo.us, en plus de ces effets visuels assez impressionnants, permet de matriser facilement destechniquesJavaScriptvolues.Lapremiredentreellesadjtdtailleprcdemment,maisilconvientde comparerlacomplexitdecescriptaveclasimplicitdutilisationofferteparscript.aculo.us.
4.Ledraganddropavecscript.aculo.us
La cration de draganddrop avec script.aculo.us est dune facilit dconcertante, dautant plus que les options permettent de nombreuses dalternatives. La mthode utiliser doit suivre deux tapes. Dans un premier temps, il sagitdindiquerquelssontleslmentsquipeuventtredplacs,puisdansunsecondtemps,quelssontceuxqui sontdsignspourlesrecevoir. Lasyntaxesuivre,lorsdeladsignationdesobjetsdplacer,estlasuivante : new Draggable("id de lobjet dplacer", {options}) ; Lesoptionsdisponiblessontlessuivantes : Nomdeloption Fonction Limiteledplacementdelobjetdanslesens horizontalouvertical. Indiquelafonctionventuelleexcuterenfin deffet. Creetdplaceunclonedellment. Indiquesiunepoignededplacementdoittre utilise. Indiquesillmentdoitrevenirsapositioninitiale aprsavoirrelchlasouris. Indiquelafonctionventuelleexcuterlorsdu retourdellmentavecrevert. Indiqueunegrilleenpixelsselonlaquellellmentse dplace. Indiquelafonctionventuelleexcuteraudbutde leffet. Indiquelindicedepositionnementdellmentselon laxez.
constraint: "horizontal" "vertical"
endeffect:function()
ghosting: "true" "false"
handle: "true" "false"
revert: "true" "false"
reverteffect:
snap:[x,y]
starteffect:
zindex:(1)
Unefoisleslmentsdplacerdfinis,ilfautencoreindiquerquilesrecevront.Sillmentattenduestbiendpos dans lobjet cible, il est alors possible dexcuter un effet visuel ou dafficher une bote de dialogue. La syntaxe, permettantdedfinirunobjetcible,estlasuivante :
- 4-
droppables.add("id de lobjet dplacer", {options}) ; Lesoptionsdisponiblessontlessuivantes : Nomdeloption Fonction Indiqueleslmentsautorissparlacible.Cestla classequicorrespondlobjetouauxobjetsaccept (s). Indiquelacibleetleslmentsaccepts. Permetdemodifierlaclassedelaciblelorsquun lmentpassepardessus. Unefonctionpeuttreexcutesilacibleest couverteplusde50%delasurfacedansladirection spcifie. Excutelafonction,lorsquellmentspcifi recouvrelacibleavecunpourcentagede recouvrement,passenparamtre. Excutelafonctionlorsquellmentestlchsurla cible.
accept: "nom de la (les) classe (s)" [classe1,classe2]
containment: "element" [element1,lment2]
hoverclass:
overlap: "horizontal " "vertical"
onHover:fonction(element,cible, pourcentage)
OnDrop:fonction(element,cible)
Exemple :creruneffetdraganddroppermettantdedplacerdeuxcalquesdansunecible.Silobjetcorrespondlabonne rponse,unebotededialoguesafficheetuneffetestappliqulacible.
- 5-
<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>
- 6-
<script language="javascript"> new Draggable("objet1"); new Draggable("objet2",{revert:true}); Droppables.add("cible", { accept: "objet1", onDrop: function() { new Effect.Highlight("cible"); alert("Avec scriptaculos, le glisser-dpos cest facile"); new Effect.MoveBy("cible",100,100)}}); </script> </body> </html> Ce script sexcute au chargement de la page. Tout comme prcdemment, les deux fichiers de la bibliothque script.aculo.ussontappelsdsledbut.Ensuite,lesstylesCSSdechaqueobjet(objet1,objet2etcible)sontdfinis et le script permet de dplacer les objets grce linstruction new Draggable. Ici, loption revert :true indique que lobjet concern devra reprendre sa position initiale aprs le dplacement. Le script indique, ensuite, lobjet devant recevoirlesautresobjetsparlutilisationdelamthodeDroppables.add,quidfinitlesvnementslorsquelobjetest acceptdanslacible.LvnementonDroppermetdemodifierlapparencedelacible,dafficherunmessagedansune botededialogueetdemodifierlapositiondelacible,afinderecommencer. Lavantage de lutilisation de script.aculo.us est incontestable, notamment dans le traitement des effets visuels et graphiques,maiscelanestpasleseuldomainedanslequelcettebibliothquepeuttredungrandsecours.Eneffet, lamiseenplacedelatechnologieAJAXestparticulirementsimplifie.
5.Lautocompltionavecscript.aculo.us
Script.aculos.us met disposition un objet puissant, permettant de grer facilement lautocompltion (multiples propositionslorsdunesaisie),parlintermdiairedelatechnologieAJAX.IlsagitdelobjetnewAjax.autocompleter, dontlasyntaxeestlasuivante : new Ajax.Autocompleter("champsuggestions","affichage","url"); Ochampsuggestionscorrespondauchampdunformulairerecevantlessuggestions,affichagellmentdevantles affichereturlaufichier(gnralementenphp)permettantdextraireetdecomposerlalistedessuggestions. Lessuggestionspeuventtrerenvoyespar:
q
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>"; ?>
- 7-
Lapremireligneduscriptpermetdindiquerquevoustravaillezpartirdujeudecaractre88591,permettantde renvoyer les caractres accentus. Ensuite, le script gnre un tableau dans lequel les prnoms sont saisis. Puis, chaque valeur du tableau est compare la variable renvoye par la page. Lorsque des lments peuvent tre renvoys,ilscomposentunelistegrcelutilisationdelabalise<li>. Lescriptdufichierhtml : <html> <head> <title>Autocompletion avec scriptaculous</title> <meta http-equiv="content-type" content="text/html; charset=ISO8859-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:
q
pourquelchamplautocompltiondoittrelance(icilechampidentifiant), commentlessuggestionsdevronttreprsentes(icilecalqueidentifiantpropositions), partirdequelfichierlesdonnesserontrenvoyes(icilefichierrequetesimple.php).
Le paramtre renvoy ce fichier correspond au nom figurant aprs paramName avec un nombre minimal de caractres(dfiniiciparminChars:1). Exemple 2 : crer un script proposant une liste de prnoms, correspondant la saisie effectue dans un champ de formulaire.LefichierPhPsertdesupportlarequteSQLpermettantlextractiondesvaleurscorrespondantlachanede caractres,saisiedanslefichierautocompletion.html.Celuiciresteidentique,mispartlurldufichierquiprendlavaleur requetecomplexe.phplaplacederequetesimple.php. Lescriptdufichierrequetecomplexe.phpestlesuivant: <?php require_once(../../Connections/connex1.php); ?> <?php header(Content-type: text/html; charset=iso-8859-15); mysql_select_db($database_connex1, $connex1); $query_Recordset1 = "SELECT Ref_Utilisateur, Identifiant FROM Utilisateurs WHERE Identifiant LIKE ".$_POST[identifiant]."%"; $Recordset1 = mysql_query($query_Recordset1, $connex1) or die(mysql_error()); $result = mysql_query($sql); echo "<ul id=\"mylist\">\n"; while($data = mysql_fetch_assoc($Recordset1)) {
echo "<li id=\"item_" . $data[Ref_Utilisateur] . "\">" . $data[Identifiant] . "</li>\n"; } echo "</ul>"; ?> <?php mysql_free_result($Recordset1); ?> Lespremireslignesdufichierpermettentlaconnexionlabasededonnes.Ilestimportantensuitededfinirdans quel jeu de caractres le script doit fonctionner (ici, avec le jeu dont le code est 885915 pour interprter les caractresaccentus).Lescriptpermet,ensuite,decalculerlenombredersultatsrenvoyeretdeconstruirelaliste des valeurs, grce la balise <li>. Ici, la table MySql comprend les mmes valeurs que le tableau en PhP prcdemmentcr,lersultatdoitdonctreidentique.Lavantage dunetellesolutionreposesurlefaitquilnest plusobligatoiredechanger,ajouterousupprimerlesvaleursproposesdanslecodedirectement,cequisimplifiela maintenancedecettefonctionnalit. OutrelesbibliothquesPrototypeetScript.aculo.us,ilexistebeaucoupdautresbibliothquesavecdesfonctionnalits tout aussi intressantes. Il est possible ainsi de citer la bibliothque Dojo (disponible ladresse http://dojotoolkit.org/downloads) contenant de nombreux outils graphiques comme la reprsentation en arborescence.Bref,unvastechampdedcouvertesetdedveloppementenperspective !
- 9-

JavaScript - Des Fondamentaux Aux Concepts Avancés-By Jawhara-Soft

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript - Des Fondamentaux Aux Concepts Avancés-By Jawhara-Soft

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

JavaScript - Des Fondamentaux Aux Concepts Avancés-By Jawhara-Soft

Transféré par

Droits d'auteur :

Formats disponibles

Des fondamentaux aux concepts avancs

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

vrifierunesyntaxeparlacolorationautomatiqueducode disposerdelautocompltion(propositiondesmthodesoupropritsdisponiblesdelobjet) connatrelavaleurdunevariablelorsdelexcutiondunscript.

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

reprendrecettemmepage enmodifierlescript etenfinlenregistrersousunautrenom,laidedumenuEnregistrersousdevotrediteurdetexteouHTML.

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

InternetExplorer4.0 1.2 NetscapeNavigator4.0

NetscapeNavigator6.0 1.5 InternetExplorer6.0

Firefox/Mozilla1.0 1.6 InternetExplorer6.0

ENI Editions - All rigths reserved

Firefox/Mozilla2.0 1.7 InternetExplorer6.0

Ajoutdenouveauxmotscls yield,let,deladfinitiondes tableauxparcomprhension. Ajoutdesfermetures dexpression,desexpressions gnratrices,desmthodes reduce()etreduceright()pour lobjetArray.

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

enum export extends false finally

package private protected public return

ENI Editions - All rigths reserved

Variable=1 Ngation Permetdobtenir loppos. variable= variable 1

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

1=== "1 "

"1 " !==1

ENI Editions - All rigths reserved

respecte.Renvoie truesicestlecas. Exemple 1:afficherlersultatdundoubletest(5<12et5<3)olesdeuxconditionsdoiventtrerespectes :

Rle Concatneles chanesde caractres.

Creune instancedun objet.

Permetdese rfrencer lobjetcourant.

Permetde signifierune seulefoisun objetpour

Permetde citerune foisma

ENI Editions - All rigths reserved

accderparla suite plusieursde sesproprits oumthodes.