javascript des fondamentaux aux concepts avances

JavaScriptDes fondamentaux aux concepts avancs

EmmanuelGUTIERREZ

RsumCe 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'auteurAprs 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-

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

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

OutilsdeconceptionLesoutilspermettantdinsrerducodeJavaScriptsontnombreux.Celavadusimplelogicielditeurdetexte,comme parexempleWordPaddeWindows,loutilspcifiqueAptanaStudio,enpassantparlesditeursdecodeHTMLtels DreamweaverouFrontPage,aveclesquelsilestpossibledinsrerdesblocsJavaScript.Lusagedeceslogicielspermet dedisposerduncertainsnombredoutilsfacilitantlcritureducode.Ilest,parexemple,fortsimplede:q

vrifierunesyntaxeparlacolorationautomatiqueducode disposerdelautocompltion(propositiondesmthodesoupropritsdisponiblesdelobjet) connatrelavaleurdunevariablelorsdelexcutiondunscript.

q

q

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-

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

q

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 .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 : etlafinduscript Entrelesdeuxbalises,lenombredelignesdecodeestillimit.IlestpossibledajouterlaversiondeJavaScriptutilise etdobtenirunelignedetype : Cependant,lesnavigateurssaccommodenttrsbiendelapremiresyntaxeet,enfonctiondeleurversion,sadaptent laversionJavaScript.Deplus,enspcifiantunedesderniresversions,vouscontraignezlesvisiteursdisposerdes derniers navigateurs, ce qui limite la porte de votre code. Si, malgr tout, vous souhaitez faire passer des informationsauxvisiteursayantunnavigateurnesupportantpasJavaScript,ilfautlefaireentrelesbalises etquelonplacejusteaprs. document.write ("bonjour"); votre navigateur ne peut pas lire le code JavaScript Danscetexemple,lenavigateurafficheraBonjoursilestcompatibleouletextefigurantentrelesbaliseset silnelestpas. Unefoislesdeuxbalisesinsresetlecodecrit,ilsuffitdenregistrervospagesavecunnomdiffrentparlemenu FichierEnregistrersous.Ainsi,vouspouvezconstituerprogressivementunebibliothquedepagesHTMLcontenant desscriptsJavaScriptremployerlorsdutilisationsbienspcifiques. Endautrestermes,ilvousfaut,pourdbuter,unepageHTMLrudimentairequivousserviradematricepourtoutesles autrespagescontenantlesscripts.


- 1-

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


- 1-

LesdeuxtypesdexcutionducodeJavaScriptEn 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 : Biensr,lefichierdevratreprsentdanslemmerpertoiredevotredisquedurouduserveurquelefichierHTML appelant. Parsoucidesimplification,touslesexemplesdecetouvragesontconusenJavaScriptinterne,ainsivousretrouverez plusfacilementlensembleducode. Enplusdecesrglespurementlieslorganisationdesscripts,ilexisteuncertainnombrederglesdesyntaxe respecter.


- 1-

LesrglesdesyntaxeducodePourbiendbuterenJavaScriptlerespectdecesrglesestfondamental,carcelangageestpeusoupleetnautorise pasderreurscommevousleconstaterezdanslesparagraphessuivants.

1.LacasseUnedesprincipalesdifficultsdeJavaScriptrsidedanslefaitquecestunlangagesensiblelacasse,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.AjoutdecommentairesComme dans la plupart des langages de programmation, lajout de commentaires dans vos scripts JavaScript peut savrerfortutile.Eneffet,outrelefaitdepouvoirretrouverplusfacilementlesblocsdinstructionsquevousvenezde crer, les commentaires pourront vous tre dun immense secours le jour o vous devrez reprendre votre code. La lisibilitducodeest,dailleurs,undesprincipauxcritresdedterminationdunbonscriptJavaScript.Eneffet,quoi sert de dvelopper un superbe script si vous devrez prendre deux fois plus de temps pour le modifier quelques semainesplustard ? LajoutdecommentairesdansunblocdecodeJavaScriptseffectuedemaniremonoligneoumultilignes. Lescommentairescontenussuruneseuleligneserontprcdsdudoubleslash//. Lescommentairesnepouvantpastrecontenussuruneseuleligneserontprcdsde/*etdevrontseterminerpar */. Exemple : //Ceci est un commentaire monoligne /* Ceci est un commentaire Sur plusieurs lignes */

Avec certains diteurs HTML ou outil de conception, les commentaires apparaissent avec une couleur diffrentedecelleducode.

3.LepointvirguleChaquelignedecodeJavaScriptseterminegnralementparunpointvirgule 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.LindentationLorsque 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.

var i,j=0; for (i=0;i12; alert("Le rsultat du test est : " + reponse); Lescriptselimiteuntest5>12dontlarponseestrenvoyedansunvariablenommereponse,dontlecontenu seraaffichpourconnatrelersultatdutest.Lersultatdecetestestexprimdefaonboolenne(cestdiretrue oufalse). Ilestpossibledutiliserlemmescriptenmodifiantloprateurdecomparaisonpourapprhenderleurmode defonctionnementetvisualiserlersultatrenvoy. Parexempleavecloprateur !=(diffrent),lersultatesttrue. var reponse=5 !=12; alert("Le rsultat du test est : " + reponse);

3.LogiquesIlssontaussiappelslesoprateursboolens.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 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.ModifierlapositiondeslmentsparJavaScriptEnplusdelavisibilit,ilestpossibledemodifierlapositiondeslmentslaidedelapropritposition.Laposition peuttredfiniesoitdemanireabsolue(enpixelsparrapportaucoinsuprieurgauchedelobjet),soitdemanire ENI Editions - All rigths reserved - 5-

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

Mon premier style CSS 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&&posx150&&posy500&&posx155&&posy330&&posx225&&posy Modifier la taille 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; } .calque1 { position:absolute;left:300px;top:100px;color:#FF0000; padding:10px;border:1px solid #000;background-color:#FFFF99; } Calque1 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.ModifierlasuperpositiondeslmentsparJavaScriptIlest,galement,possibledetravailleraveclasuperpositiondlments.Lasuperpositionestgreparlaproprit zindex.Enaffectantunevaleurzindex,ilestpossibledemodifierlordredesuperpositiondelobjet. Exemple :crerunmenudenavigationencombinantlespropritsdevisibilit,depositionetdesuperposition.

- 8-


Menu navigation CSS 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; } .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} Menu1 Sous-menu 1 Sous-menu 2 Sous-menu 3 Sous-sous-menu 1 Sous-sous-menu 2 Sous-sous-menu 3 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.LedraganddropLedraganddrop(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.

Gliss-dpos 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; ENI Editions - All rigths reserved - 11 -

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; .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 } Region
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 -


AjaxetJavaScriptToutdabord,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.

q

q

q

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.LobjetXmlHttpRequestCet objet est identique pour tous les navigateurs rcents, mme si sa dclaration est diffrente entre Internet Exploreretlesautresnavigateurs.CetobjetestrelativementancienpuisquilatdveloppparMicrosoftds1998 etimplmentdanslaversion5dInternetExplorer.Lesautresnavigateursont,progressivement,prisencomptecet objet.Ilestdonc,importantdeconnatrelacompatibilitdunavigateur. Exemple :crerunscriptdevrificationdecompatibilitdunavigateuretafficherlersultatdansunebotededialogue.

if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); alert("Votre navigateur est compatible pour AJAX"); } else if(window.ActiveXObject){ xhr=new ActiveXObject("Microsoft.XMLHTTP"); alert("Votre navigateur est compatible pour AJAX"); } else {alert("Votre navigateur nest pas compatible avec AJAX"); } 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.LesattributsdeXmlHttpRequestAttributs 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 : 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 : Exemple de script AJAX 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; } 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-


LesbibliothquesJavaScriptDepuisledbutdecetouvrage,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.LabibliothquePrototypeLa bibliothque Prototype est une bibliothque permettant de simplifier la rdaction de scripts JavaScript. Les fonctionnalits proposes sont une sorte dextension aux mthodes JavaScript. Cette bibliothque fournit de nombreuxraccourcisdecodesintressantsetpermet,galement,desimplifierletraitementdesrequtesAJAX. Cettebibliothqueestdisponibleentlchargementladressesuivante :http://www.prototypejs.org/download Cette bibliothque est constitue dun seul fichier quil est ncessaire dappeler, lors de chaque usage, par la ligne suivante : IlseraittroplongdedonnerunedescriptiondtailledelabibliothquePrototype.Eneffet,ellesertdebaseune autre bibliothque script.aculo.us, fournissant de nombreuses fonctionnalits intressantes (notamment au niveau graphique)etquenousdtailleronsdansleparagraphesuivant.

2.Labibliothquescript.aculo.usCettebibliothqueestdisponibleentlchargementgratuitladressesuivante :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 :


- 1-

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 : Lesfichiersjsdoiventtreplacssurleserveur,bienentendu.Grcecettemiseen uvre,ilestpossibledaccder denouvellesmthodesetdenouveauxmotscls. Afindesimplifierlaprsentation,lesscriptssuivantsfontappellabibliothqueentire.

3.Leseffetsvisuelsavecscript.aculo.usPluttquedelisterleseffetsvisuels,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.

Test effets avec scriptaculos 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);- 2 ENI Editions - All rigths reserved

} 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); } .Style1 { left:800; top:200; color: #FF0000; font-weight: bold; } Texte Effets visuels de script.aculo.us 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.usLa 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-

.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} Objet 1 Objet 2 Cible

- 6-


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)}}); 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.usScript.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.

q

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 :


- 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. Lescriptdufichierhtml : Autocompletion avec scriptaculous .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} Saisissez un identifiant : new Ajax.Autocompleter("identifiant","identifiant_propositions", "requetesimple.php",{paramName:identifiant,minChars:1}); 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).

q

q

Le paramtre renvoy ce fichier correspond au nom figurant aprs paramName avec un nombre minimal de caractres(dfiniiciparminChars:1). Exemple 2 : crer un script proposant une liste de prnoms, correspondant la saisie effectue dans un champ de formulaire.LefichierPhPsertdesupportlarequteSQLpermettantlextractiondesvaleurscorrespondantlachanede caractres,saisiedanslefichierautocompletion.html.Celuiciresteidentique,mispartlurldufichierquiprendlavaleur requetecomplexe.phplaplacederequetesimple.php. Lescriptdufichierrequetecomplexe.phpestlesuivant: Lespremireslignesdufichierpermettentlaconnexionlabasededonnes.Ilestimportantensuitededfinirdans quel jeu de caractres le script doit fonctionner (ici, avec le jeu dont le code est 885915 pour interprter les caractresaccentus).Lescriptpermet,ensuite,decalculerlenombredersultatsrenvoyeretdeconstruirelaliste des valeurs, grce la balise . 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 avances

Documents