Ajax Développez Pour Le Web 2.0

AJAX
Dveloppez pour le web 2.0
LucVANLANCKER
Rsum
Ce livre sadresse des lecteurs avertis qui souhaitent dcouvrir ce qui se cache derrire le terme trs mdiatis dAJAX et ce quapporte cette nouvelle mthode de conception de sites Web. Il sera galement trs utile aux dveloppeurs professionnels pour leur donner une perception globale dAJAX avant quils nabordent les kits de dveloppement (framework) utiliss dans leur environnement de travail habituel. Il suppose des connaissances pralables en XHTML et CSS. Son objectif est dexpliquer de faon simple et nanmoins prcise, les divers composants dAJAX et de montrer comment leur utilisation conjointe peut aboutir des applications Web novatrices. Aprs une prsentation gnrale dAJAX, lauteur dtaille JavaScript (notions fondamentales, fonctions et mthodes, conditions et boucles, gestionnaire dvnements, formulaires, manipulation des chanes de caractres, tableaux...), le XML (prsentation, syntaxe ...), les XSL, le DOM (prsentation, les nuds, laccs aux objets, aux attributs...), lobjet XMLHttpRequest (prsentation, proprits et mthodes...). Les deux derniers chapitres proposent la mise en application des composants tudis dans les chapitres prcdents pour raliser de lAJAX ainsi que des exemples de dveloppements. Cet ouvrage est crit dans un style concis et prcis avec de nombreux exemples significatifs et illustrations pour donner au lecteur une vision juste des possibilits dAJAX. Les exemples de code utiliss dans louvrage sont en tlchargement sur le site de lditeur.
L'auteur
Depuis les dbuts dInternet, Luc Van Lancker, enthousiasm par lide de communication universelle que vhicule ce concept, sinvestit compltement dans ce domaine. Aprs le HTML, le XHTML, les CSS, il tait naturel qu'il se passionne aujourd'hui pour l'AJAX. Formateur expriment et grand pdagogue, il a su transmettre au lecteur toute sa passion pour cette nouvelle technologie.
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-
Principeetdfinition
Le terme Ajax est apparu pour la premire fois le 18 fvrier 2005, dans un essai de James Garret intitul "Ajax : une nouvelleapprochepourlesapplicationsWeb". AJAX est un acronyme dAsynchonous JavaScript And XML (JavaScript et XML asynchrone) qui dsigne une approche innovantedanslaconceptiondepagesWebdontlobjectifestdoptimiserleurinteractivitetleurconfortdutilisation. AJAX nestpasunetechnologienouvelle,cest un terme synthtique qui dsigne lutilisation conjointe dans les pages Webdediffrentestechnologies.AinsiAJAXincorpore:
q
leXhtmletlesfeuillesdestyleCSS leJavaScript leDocumentObjectModel(DOM) lobjetXMLHttpRequest leXMLetleXSL.
LeXhtmletlesfeuillesdestyleCSSprennentenchargelaprsentationdespagesdefaonstandardise. LeJavaScript,quimarqueainsisongrandretourdansluniversdelapublicationsurleweb,estomniprsentdansles applicationsAJAX. LesobjetsdudocumentsontprisenchargeselonleDocumentObjectModel(leDOM)duconsortiumW3C. LobjetXMLHttpRequestpermetdelancerdesrequtesdelapageWebversleserveurpouryrcuprerdesfichiers. Sonfonctionnementpermetdeffectuercesrequtesdefaonasynchrone,soitenarrireplandelapageetdefaon compltementtransparentepourlutilisateur. Les fichiers rcuprs sont au format XML, les apports de ce format dans le domaine de lchangedesdonnesnest plusprsenter. Ilsagitdoncdetechniques,duJavaScriptauXMLenpassantparleDOMetlobjetXMLHttpRequestquisontprouves, standardises et matrises. Ce qui est assez prometteur quant la compatibilit dAJAX avec les navigateurs actuellementutilisssurleWeb. Mais cest dans lutilisation conjointe de ces diffrentes technologies que rside loriginalit du fonctionnement dAJAX quenousappelleronsparlasuite,lemodleAJAX.
- 1-
CemodleAJAXsedcomposecommesuit:
q
LapageWebsaffiche,commelaccoutum,danslenavigateur,appelaussileclient. La moindre interaction de lutilisateur, par exemple lencodage dun formulaire ou le cliquer/dplacer dun lment,estpriseenchargeparlagestiondesvnementsdeJavaScript. LecodeJavaScriptdelapageinitieunerequteXMLHttpRequestversunfichierXMLsitusurleserveur. LefichierXMLrclam,estrenvoyverslenavigateurdelutilisateur. Il est alors pris en charge par le DOM, et toujours par le JavaScript, pour tre trait et affich de faon dynamiquedanslapageinitiale.
Toutecetteprocduresestdrouledefaontransparentepourlutilisateur,sansncessiterlerechargementfastidieux delapage. LemodleAJAXpermetainsidesortirduschmatraditionneldelaconceptiondepagesWebquinecessitaitquechaque nouvelleinformationrclameunenouvellepage.
- 2-
Avec AJAX, une nouvelle information peut tre rcupre dans un petit fichier situ sur le serveur. Ce fragment dinformationpeutalorstreprisenchargeetaffichdansunezonedelapageetcomplterainsilapageinitiale. Envitantlactualisationdelapageetlapertedetempsquecelaentrane,lesapplicationsgagnentainsienfluidit.En outre lergonomie sen trouve amliore car lutilisateur peut rester concentr sur la lecture de la page ou la tche accomplie.
Le schma traditionnel de la relation clientserveur, mis en place ds les origines du Web par la caractristique hypertextedespagesWeb,estainsimisenquestion.Selonceluici,laplupartdesinteractionsdelutilisateurcommele clic sur un lien ou lenvoi dun formulaire, dclenchent une requte HTTP vers le serveur Web. Ce dernier, aprs le traitementventueldesdonnes,retourneunenouvellepageHtmlouXhtmlauclient. La session de lutilisateur est alors une succession de requtes HTTP et de rponses du serveur. Cet allerretour incessantduclientversleserveuraffichechaquefoisunenouvellepagedanslenavigateur. AvecleschmaAJAX,lapageWebinitialecomprendunepartimportantedecodeAJAXquipermet,soitdeprendreen chargeunesriedoprationscommelavalidationdeformulaires,soitdinitierdesrequtesXMLHTTPRequestpourtoutes informations complmentaires ncessaires. Les donnes ainsi retournes viennent sincorporer de faon asynchrone danslapageinitialeenapportantunefacilitdutilisationetuneractivitinconnuescejoursurlatoile. Leschmatraditionnel
- 3-
LeschmaAJAX
LapuissanceduconceptAJAXesttellequelonpeutenvisagerdesapplicationsWebquiserapprochentdesapplications logicielles,appelesaussiapplicationsdebureau.Cequimodifiecompltementlarichessedelinterfaceetlapotentialit desservicesdespagesWeb. Maislenjeu dAJAXvaplusloinquecesconsidrationstechniques.Sonfonctionnementractifpermetdereconsidrer totalementlergonomie des sites Web. Alors que pendant prs dunedcennie,laralisationdesitesplaisantsl il tait dactualit, prsent la conception de sites plaisants tre utiliss est envisageable. Lutilisateur devient ainsi llmentcentraldesproccupationsdesdveloppeurs. La dfinition dAJAX nest cependant pas prendre la lettre. Lapproche AJAX est dans la pratique plus souple. Soulignonsparexemple,quelobjetXMLHttpRequestpermetdercuprer,nonseulementdesfichiersXML,maisausside simplesfichiersdetexte(ausensinformatiqueduterme).Cettecaractristiquelargitconsidrablementlechampdes possibilitsoffertesauxdveloppeurs. Le concept AJAX est mis en avant et soutenu par Google. De nombreuses applications signes Google en reprennent lapproche.OnsongeainsiGoogleMapsetGoogleSuggestquenousallonsaborderaupointsuivant.Ilmetgalement ladispositiondesconcepteursunkitdedveloppement(enopensource).LefaitquunefigureemblmatiqueduWeb commeGooglesinvestisseainsidanslesapplicationsAJAX,nepeutquesusciterourenforcerlintrtdesdveloppeurs desitesWeb.
- 4-
ExemplessurleWeb
1.GoogleMaps
GoogleMapsestunserviceenligne(gratuit)decartesgographiques,calculditinrairesetdevuessatellites. Cesitepermet,partirdelchelleduncontinentoudunpays,dezoomerparundoubleclicouparlutilisationdela roulettedelasouris,jusqulchelledunerue.Onpeutaussibasculerdunsimpleclic,delacarteclassiqueavecle nomdesrues,desquartiersetdesvillesdesimagessatellitesdelammelocalisation. Ilpeuttreconsult,danssaversionfranaise,ladressehttp://maps.google.fr/.
EnquoilesiteGoogleMapsreprendillapprocheAJAX? Il faut dabord savoir quune carte est divise en petits carrs. Pour les cartes classiques, ces petits morceaux au formatPNG,ontunedimensionde256x256pixels,etunnombredecouleurslimit256.Cequienfaitdesfichiers detaillerduiteetcequiimpliqueuntempsdetransferttrsfaible.
ENI Editions - All rigths reserved - 1-
Lorsquelutilisateurdplacelacartedansunsens,parlesimpleglissementducurseurdelasouris,cetteactionest priseenchargeparleJavaScript.Celuicircuprelalongitude,lalatitudeetlintensitduzoomdescarrsquidevront tre dvoils. Lobjet XMLHttpRequest envoie une requte vers le serveur pour rclamer les petites images manquantes. la rception, le DOM se chargera de les afficher dynamiquement lendroit adquat, parfaitement aligneslesunesaveclesautres. Toutecetteoprationsefaitsansrechargementdelapage,sansmodificationdeladressedelapage,sansapparition delabarredavancementdutlchargementdanslabarredtatetsansrclamerlinstallationdunpluginspcifique!
2.GoogleSuggest
Linterface est proche de celle de la page daccueil habituelle de Google. Cependant, cet outil suggre automatiquementunelistede10motsouexpressionsquiserapprochentdecequiestencoddanslazonedetexte consacre aux motscls. Cet outil affiche galement en face de chacun des mots ou expressions, le nombre de rsultatstrouvsdanslabanquededonnesdeGoogle.Lutilisateurpeutensuiteeffectueruneslectiondanscette listedesuggestionsetcontinuersarecherchesurGoogle. chaqueencodagedunelettre,cettelistede10expressionsestrecreetaffichedefaondynamique. Cesiteenversionbetaestconsultableladresselabs.google.com/suggest/.
Lavitessedefonctionnementestassezsurprenante.Eneffet,GoogleSuggestdialogueaveclesserveursdeGoogle pendant que linternaute tape sa requte et met jour laffichage de faon quasi instantane, et toujours sans ncessiterunrafrachissementdelapage. LefonctionnementdAJAXdanscetteapplicationpeuttredcomposcommesuit :
q
LencodagedanslazonedetexteestrcuprparJavaScript. UnerequteXMLHttpRequestestinitieaveclavaleurdelencodagecommeparamtre(icilemotAJAX). Leserveurretournelesinformationsdemandessousformededeuxtableaux(Array)Javascript: new Array ("ajax tutorial", "ajax tutorials", "ajax examples", "ajaxian", "ajax framework", "ajax php", "ajax example", "ajax4jsf", "ajax asp.net", "ajax amsterdam"), new array("25,800,000 results", "51,400,000 results", "3,790,000 results", "2,230,000 results", "33,900,000 results", "138,000,000 results", "17,800,000 results", "199,000 results", "9,170,000 results", "3,530,000 results" ). LeDOMentrealorsenactionpourcrerunelistedroulantede10lignes.JavaScriptsechargequantluide rpartirlesdonnesdutableauArraydanschaqueligne.
Nous proposons dans le chapitre Ajax par lexemple, un exemple appel "Une suggestion dencodage" qui sinspire largementdelafaondeprocderdeGoogleSuggest.
- 2-
3.GoogleAgenda
Google Agenda, comme son nom lindique, permet de grer votre emploi du temps en toute simplicit, de faon trs convivialeetcolore.Encoderdesvnements,modifiervotreplanningdunsimplecliquer/glisserdelasouris,partager (avecvotrepermission)votreagenda,dedisposerderappelsdvnementsparunemail,parunefentrepopupou par un message sur votre tlphone portable, voici quelques unes des fonctionnalits, trs varies, de Google Agenda. Une dmonstration de ce nouveau service http://www.google.com/intl/fr/googlecalendar/tour.html. en ligne est disponible ladresse :
LeserviceenluimmeestaccessiblepartirdelapagedaccueildeGoogleetncessitelouverture (gratuite) dun compte.
Le nombre important de fonctionnalits de Google Agenda illustre bien la richesse des applications AJAX : cellesci permettentdemettreenplacedessitesquinontplusrienenvierauxapplicationslogicielles.
4.GoogleDocumentetTableur
Crer, diter, ou encore partager des documents demande toujours linstallation sur notre systme dun logiciel, en gnralMicrosoftOfficeouOpenOffice.EtsionpouvaitfairetoutcelaavecseulementunnavigateurWeb? Google avec Document et Tableur, propose une solution trs allchante qui va nous permettre de disposer dune applicationbureautique,accessibledepuisnimportequelposterelilInternet,sansaucuneinstallationeffectuer.
- 3-
GoogleDocumentetTableurpermetdoncdecrerrapidementdesdocuments,etsurtoutdelespartagerpourfaciliter letravailcollaboratif. LetoutpeuttreenregistrauformatHtml,RTF,Word,OpenOfficeetPDF. Et ce nest pas seulement un traitement de texte qui est votre disposition mais aussi un tableur, avec la mise en formedeformules,mmecomplexes !
Des bruits circulent quun outil de prsentation, du mme style que PowerPoint, de la suite bureautique Office de Microsoft,seraitbienttdisponible. Unevisiteguidevousattendladresse: http://www.google.com/googleds/intl/fr/tour1.html. LeserviceenluimmeestaccessiblepartirdelapagedaccueildeGoogleetncessitelouverture (gratuite) dun compte.
- 4-
Avantagesetinconvnients
Il ne faut pas se laisser aveugler par leffet AJAX. Tous les sites ne se prtent pas cette approche. Surtout que dvelopperunsiteenAJAXseraplusdifficileetpluslongquelesmthodesdepublicationutilisescejour.Pourvous aiderdansvotrechoix,voiciquelqueslmentsquivousaiderontprendrelabonnedcision.
1.Avantages
q
AJAX,cest principalement la rvolution asynchrone ! La technique qui consiste charger en arrireplandes lments de rponse aux interactions de lutilisateur, est au c ur du modle AJAX. Il est certain que le potentiel est norme et quilnest ce jour peine explor. Gageons que la crativit des dveloppeurs y trouveraunterrainoellepourrapleinementsexprimer. Linterface est plus ractive car seulement une petite partie est mise jour, donnant ainsi limpression lutilisateurqueleschangementsseralisentinstantannment. Letempsdattentedelutilisateurestrduitcarilnestplusncessairederechargertoutelapagepourobtenir une nouvelle information. Les applications AJAX apportent ainsi une fluidit inhabituelle aux pages Web. Certains qualifient mme AJAX comme tant le Web des impatients. Je gage que certains lecteurs vont se reconnatre... Letempsdetransfertentreleclientetleserveurestconsidrablementrduitcarilluisuffitdetransfrerles lmentsdelarponseaulieudenvoyertoutelapageavecdeslmentsleplussouventredondants. Un site AJAX bien ralis sera agrable dutilisation pour le visiteur. Ce qui ne peut que valoriser en termes dimagelacommunicationaveclutilisateur. Lamaintenancedusiteseraplusaisecar,grcelarchitecturemiseenplaceparAJAX,ilsuffiradenemettre jour que des fichiers de taille rduite, parfois simplement en format texte. Cette mise jour pourra mme treconfiedespersonnesdontlescomptencessontplusorientesbureautiquequeconceptiondesites Web.
2.Inconvnients
q
Mme si Ajax utilise des composants connus comme le JavaScript, le XML, le DOM et lobjetXMLHttpRequest, soncodeestpointuetdlicatmettreenplace.LefaitdedvelopperuneapplicationAJAXpeutaugmenter sensiblementletempsdeconceptionetdonclecot.IlestadmisdefaonunanimequAJAXestplusdifficile mettre en place quune application Web classique cause de lutilisation conjointe des diffrentes technologies. AJAXcomportebeaucoupdeJavaScript.LesutilisateursquiontdsactivlapriseenchargeduJavaScriptpar leurnavigateur,nontpasaccsauxapplicationsAJAX.Onpeutraisonnablementestimerquecettepopulation estfaiblemaiselleexiste. LeconceptAJAXestorientverslutilisateur.Cependantpardiversaspects,ilrisquededsorienterlutilisateur moyen. Comme certaines parties de la page ne correspondront plus la page initiale, les fonctions de lhistoriqueetdelamiseenfavorisdunavigateurrisquentdenepastrereprsentativesdeltatactueldela page.Deplus,cliquersurleboutonPrcdentdunavigateur,peutnavoiraucuneffetpuisqueladressedela pageestresteinchange. Laccessibilit des applications AJAX avec les systmes de lecture dcran utiliss par les personnes visuellement dficientes est assez problmatique. Dj la prise en compte du JavaScript est trs partielle et souventalatoire.Enoutre,vientsajouterlobjetXMLHttpRequestquimodifie,encoursdelecture,lecontenu de la page. Ainsi, au moins dans un premier temps, il importe de prvoir une page alternative pour les personnesayantunhandicapvisuel. Comme lobjet XMLHttpRequest peut envoyer des requtes du navigateur vers le serveur de faon transparente pour lutilisateur, certaines personnes sinquitent quant au respect de la vie prive de linternaute.OnpeutcomprendreleurpointdevuemaisInternetestetresteraunsystmeouvertdanstoutes lesimplicationsduterme.LalimitationdelobjetXMLHttpRequestquinepeutenvoyerourecevoirdesrequtes
- 1-
queversledomainedusiteWebquicontientlapage,pourra(partiellement)lesrassurer.
q
Ilestdifficilelheureactuelle(courant2007)davoirunavistranchenmatiredescuritinformatiquedes applications AJAX. Comme toujours lors de lapparition dune nouvelle technologie, des dtracteurs se font entendre tandis que dautres se veulent rassurant. Il est un fait que le concept AJAX se base sur des composantsconnusetqueseullenombrederequtesentrelenavigateuretleserveurrisquedaugmenter danslesapplicationsAJAX.Pourlereste,ilestsimplementtropttpourseprononcer. Le rfrencement des pages en AJAX nest pas simple raliser. Comme pour les sites en JavaScript et les pagesenFlash,lerfrencementrclameratouteslesattentionsduconcepteur.Lindexationparlesmoteurs derecherchenestpasmoinsproblmatiquecaraveclesystmeAJAX,unemmepagepeut,selonlesactions delinternaute,avoirplusieurscontenusdiffrents.
- 2-
volutionourvolution
Silyaunequestionquiaaliment,etquialimenteraencore,lesforumsdediscussion,cestbiencellel. Tentons de fairelepointausujetdesargumentsdvelopps.
1.volution
IlestvidentquAJAXestunefaondutiliserplusieurstechnologiesprexistantes. Le JavaScript, omniprsent dans AJAX, est ce vilain petit canard de la publication sur le Web. Invent en 1996 par Netscape,pauvrementnormalisparleECMAScript,avecsesbugsetsesincompatibilits,ilmarquepourtantavecle conceptAJAXsonretoursurledevantdelascne. LutilisationconjointedesfeuillesdestyleCSS,duJavaScriptetduDOMsurfonddepageHtmlouXhtmlnestpassans rappelerladfinitionduDHTMLquiluiaussiprnaitdjlinteractivitdespagesWeb.LobjetXMLHttpRequestnefait quapporterauDhtmllapossibilitdercuprerdesdonnesduserveur. EtencequiconcernelobjetXMLHttpRequest,ilnestpasrcentluinonpluscariltaitdjtimplantdansInternet Explorer5.0en1999etpassatoutcetempsinaperuauprsdesdveloppeurs. AJAXetleWeb2.0neseraientalorsquunevolutionnaturelledeceformidableoutilquestlaWebaprs15annes dexistence. Et le Web, qui sest implant dans la vie quotidienne, connatra encore bien des volutions ou des mutations.
2.Rvolution
Pourtantonnepeutquestonner,audeldubattagemdiatique,duformidablemouvementdesynergiecrautour delapprocheAJAXparlesprofessionnelsdu WebetdInternet.Lamiseenplaceenfvrier2006deOpenAJAXAlliance, consortium de firmes rputes comme Adobe, Backbase, BEA, DoJo Foundation, Eclipse Foundation, Google, IBM, Novell,Oracle,SAPetRedHatpourpromouvoirlatechnologieAJAXenestunepreuve. la vue des exemples prsents lors du prsent chapitre, il faut bien admettre que la mutation des pages Web traditionnellesenvritablesplatesformesapplicativesvamodifier,defaonsignificative,lesusagesdelatoile.Avecla richessedesinterfaces,aveclamultiplicationdesfonctionnalits,aveclesavancesdelergonomieetdelusabilitdes sites,cestassurmentunenouvellefaondenaviguerquisinstaure. LavritablenouveautdAJAXnersidepastantdanssonaspecttechnologiquemaisbiendanslanouvellestratgie miseenplace.CestlapremirefoisdepuislapparitionduWebquelutilisateur,ouautrementditleconsommateur,est plac au centre des proccupations des dveloppeurs. Ajax permet la conception de sites ractifs, ergonomiques, intuitifs,axssurleconsommateurduWebetsesnouvellesattentesdutilisationduWeb.
- 1-
Prrequis
Lobjectif de cet ouvrage, aprs avoir parcouru les lments ncessaires, est de faire percevoir au lecteur le fonctionnementconcretetlesnormespotentialitsdesapplicationsAJAX. ForceestdeconstateraprslalectureduchapitrePrsentationgnraledAJAXqueduXhtmlenpassantpar lesfeuilles destyleCSS,leJavaScript,leXML,leDOMetlobjetXmlHttpRequest,lesdiffrentestechnologiesnemanquentpas. Afin dviter de proposer une encyclopdie de la conception de pages Web, il semble judicieux de limiter les matires abordesdanscelivre.cestadedelintrtdulecteurpourlesnouvellesperspectivesdelapublicationsurleNet,il parat raisonnable de penser que celuici possde dj des notions basiques ou avances du langage Html ou Xhtml ainsiquedesfeuillesdestyleCSS. AJAXmeten uvre,traversdiffrentscomposantscommeleDOMetlobjetXmlHttpRequest,uncodepointuetapriori complexequirclameratoutevotreattention.UnecertaineaisancedanslelangageHtmletlesfeuillesdestyleCSSne peutquefaciliterltudedulecteur. PourparfairevosconnaissancessurleXhtmletlesfeuillesdestyleCSS,vouspouvezvousreporterlouvrage"XHTML 1etCSS1et2.1LesnouveauxstandardsduWeb"auxditionsENIRessourcesInformatiquesdummeauteur. L a connaissance de langage Html ou Xhtml et des feuilles de style CSS est un prrequis indispensable une tudefructueusedecetouvrageconsacrAJAX. TouslesexemplesdulivresontcritsenXhtml1.0detypetransitional.
- 1-
Limitesdecelivre
La lecture du chapitre Prsentation gnrale dAJAX a fait dcouvrir que lapproche AJAX permettait de traiter dans le navigateur de lutilisateur (application ctclient) des fichiers externes la page, prsents sur le serveur (application ctserveur). Lesdonnesdecesfichiersexternespeuventtretraitespardeslangagesdeprogrammationcommeparexemple,le PHPetlASP.Cequilargitencore,etdefaonconsidrable,lescomptencesrclamespourproduiredespagesWeb enAJAX.ceniveau,lafrontireentrelelecteuravertietleprofessionnelnoussemblefranchie. Ainsi, nous limiterons ltude de cet ouvrage sur AJAX des applications ctclient qui rcupreront des fichiers externes,auformatXMLoutexte,etquilesafficherontdefaonasynchronedanslapageWeb. Parailleurs,lavaguedintrtsusciteparAJAXfaitfleurirdenombreuxassistantslogicielslaproductiondapplications AJAX,appelsframeworks,quiexploitentcertainsaspectsrptitifsducodemisenplaceparceluici.Laussi,ilsagit doutilsprofessionnelsquineserontpasabordsici.
- 1-
Outilsctclient
1.UnnavigateurInternetExplorer7ou6etFirefox
Aumomentdelcritureetdelditiondecetouvrage(courant2007),ilestraisonnabledeseconcentrersurlestrois navigateursquesontInternetExplorer6,InternetExplorer7etFirefoxdanssaversion2.0. LevieillissantInternetExplorer6,bienquecontestpoursesproblmesdescuritetsonfonctionnementparticulier danscertainsdomainesdesfeuillesdestyleCSS,estencoreprsentsurdenombreusesmachines. La toute dernire version Internet Explorer 7, prsente dans Microsoft Vista et disponible pour Microsoft XP SP2, suscitecejourunintrtcertain.Dautantque,proposeparlesystmedemisesjourautomatiquesdeMicrosoft, sadiffusiondevraittreplusrapidequecelledesversionsantrieuresdInternetExplorer.Mmesilnapportepasde grandes innovations au niveau du code, on peut dj mettre en avant une approche diffrente de lobjet XmlHttpRequestquiseradtailleauchapitreLobjetXmlHttpRequestconsacrcesujet. P our les lecteurs qui ont dj adopt Internet Explorer 7.0 et qui souhaiteraient nanmoins tester leur code sous Internet Explorer 6.0, Ryan Parman de Skyzyx.com a regroup le fichier iexplore.exe avec les fichiers du noyaudunavigateurpourchacunedesversionsdInternetExplorer.Cesversionsautonomes(standalone)dInternet Explorer5.0,5.5et6.0sontdisponiblessursapagedetlchargement:http://www.skyzyx.com/downloads/ LincontournablenavigateurFirefoxnefaitquaccrotresapartdemarch.Ilnestplusprsenterauxdveloppeurs poursonrespectrigoureuxdesstandardsditsparleW3Cetsesnombreusesextensions. Ilexistebienentendudautresnavigateursdequalitquenousnepouvonsaborderdanslecadredecelivre.
2.Unditeurdetexte
Les initis au Html et ses langages connexes nignorent pas limportance du code source et de son encodage (manuel)dansunditeurdetexte. Pour la suite de notre tude, nimporte quel diteur de texte brut fera laffaire. Pour les utilisateurs de Windows, lutilisationduBlocnotes(notepad)feraparfaitementlaffaire.
- 1-
Outilsctserveur
SipourltudeduJavaScript,duXMLetduDOM,soitrespectivementleschapitres LeJavaScript,IntroductionauXMLet Introduction au XSL, un diteur de texte et votre navigateur suffiront largement, la suite du livre consacre lobjet XmlHttpRequestetAjax(chapitresLeDOM(DocumentObjectModel),LobjetXmlHttpRequest,LapprocheAJAXetAJAX parlexemple)ncessitelamiseenplacedunserveurWeblocal,aussiappelserveurWebpersonnelouvirtuel. Ceserveurlocalvouspermettradetesterlecodesanspasserparlaprocdurecontraignantedesontlchargement parFTPsurvotreespaceperso,vitantainsideseconnecterunserveurexterne.
1.LeserveurlocalMicrosoftIIS
LelogicielserveurWebIIS(InternetInformationServices)estprsentsurleCDdinstallationdeWindowsXPversion Pro,WindowsVistaetWindowsServer2003.
s
LinstallationdIISestassezsimple:DmarrerParamtresPanneaudeconfigurationAjout/Suppressionde programmes. Danslafentredajout/suppressiondeprogrammes,activezAjouterousupprimerdescomposantsdeWindows.
CochezlacaseServicesInternet(IIS)etallezdansDtails...
- 1-
CliquezsurOKpourlancerlinstallation.WindowsvavousdemanderleCDdinstallation.
Linstallationpeutalorssepoursuivre.
- 2-
LeserveurIISestmaintenantinstall. VouspouveztrouversurledisquedurC,unnouveaudossierInetpubcontenantsontourdiffrentssousdossiers.
LesfichiersduserveurlocaldoiventtredpossouenregistrsdansledossierInetpub\wwwroot. Pour accder un fichier, par exemple index.htm, on encodera dans la barre dadresse du navigateur localhost/index.htm.
S ivousavezuneversiondeXPditionfamiliale,vousnepouvezpasinstallerIIS.Retenezdanscecas,loption EasyPhPprsenteciaprs.
2.LeserveurlocalEasyPHP
EasyPHPestuneplateformededveloppementWebcomprenantlerenommserveurApacheainsiquuninterprteur descriptsPHP,leserveurdebasesdedonnesMySQLetloutildadministrationPhpMyAdmin.Initialementprvupour ledveloppementdescriptsPHPenlocal,sonserveurApachevouspermetdetesterenlocalvosapplicationsAJAX.
EasyPHP est tlchargeable ladresse : www.easyphp.org/telechargements.php3. Prcisons que EasyPHP est un outilquialargementfaitsespreuvesetquilestentirementgratuit. Aprsavoirslectionnlalanguequiserautiliseparlassistantdinstallation,cellecidbute.
- 3-
LasuitedeprogrammesseraaccessiblesurledisquedurCProgramFilesEasyPHP.
Linstallationesttermine.
s
LesfichierstesterdevronttresitusdanslesousdossierProgramFiles\EasyPHP\www. Pour afficher ceuxci dans le navigateur, il faut avant toutes choses dmarrer le serveur local : Programmes EasyPHPEasyPHP.
- 4-
On encode ensuite dans la barre dadresse du fichier, par exemple index.php, localhost/index.php ou 127.0.0.1/index.php.
- 5-
IntroductionauJavaScript
1.Dfinition
JavaScriptestunlangagedescriptqui,incorporauxbalisesHtmlouXhtml,permetdagrmenterlaprsentationet linteractivitdespagesWeb. Dtaillonsetcompltonscettedfinition. LeJavaScriptestunlangagedescript,distinctdulangageHtml.LeJavaScriptestenquelquesorteun"petit"langage de programmation dont les lignes de code viennent sajouter au langage Html. Ce langage, inspir plus ou moins directement du langage C, ne pose pas de problmes de comprhension ceux qui ont dj touch la programmation.Parcontre,lesutilisateursissusdelabureautiqueoudelinfographierisquentdtreunpeudrouts devantleslmentsclassiquesdelaprogrammationcommelesvariables,lesinstructionsconditionnelles,lesboucles, lesfonctionsetautresmthodes. LeHtmlavecsaphilosophiedestructurationdecontenuestessentiellementstatique.Trsrapidement,lebesoinsest fait sentir dy ajouter un peu de mouvement et surtout de linteractivit avec lutilisateur. Cest ce que permet le JavaScript. Citonspourexemple:
q
animerdutexteoudesimages, ragirlactiondelasouris, dtecterletypeetlaversiondunavigateur, vrifierlasaisiedanslesformulaires, effectuerdescalculssimples, demanderuneconfirmation, afficherladateetlheure, grerlesmenusdenavigation, redirigerlevisiteurversuneautrepage, etc.
LeslignesdecodeduJavaScriptsontgresetexcutesdirectementparlenavigateurluimme,sansdevoirfaire appel aux ressources du serveur qui hberge la page. Cest ce quon appelle une application "ct client". Il existe dautreslangages,plusvoluscommelePHPoulASPquieux,traitentlesinformationssurleserveuravantdeles renvoyersousformedepageHtmlaunavigateurdelutilisateur.Cesontlesapplications"ctserveur".Cesdernires sortent du cadre fix notre tude. Signalons simplement quil existe bien une version "ct serveur" de JavaScript maisquenousnaborderonspas.Nousnouslimitonsdonclaversionlaplusrpandueetlaplusabordable,soitle JavaScript"ctclient". LatraditionveutquelonprcisedansuneintroductionauJavaScriptqueceluici(malgrlaconfusionquipeutnatre partirdunom)nariendecommunaveclelangageJava.Cedernier,estunvritablelangagedeprogrammationplus performantetbienpluscomplexedontlecodeestcompilsousformedappletsJava.Cellesci peuvent sexcuter partirdunepageWebpourautantquelaMachineVirtuelleJavasoitinstallesurleposteduvisiteur.Pourrappel,le codeduJavaScript,inclusdanslapageHtml,estquantluidirectement"interprt"parlenavigateuraumomentde sonexcution. Consquence directe de linclusion du JavaScript dans les pages html, le code JavaScript sera visible par une simple consultationducodesourcedelapage.Cecipeutfaireledsespoirdesconcepteursdbutantsmaisneconstituepas vraimentunhandicaptantdonnqueleJavaScriptnestdestinqudepetitesapplications,finalementbienconnues de tous. Pour les applications plus professionnelles, cellesci seront ralises avec des langages plus volus ct serveur.Cequiprserveraalorslaconfidentialitducode. Le JavaScript est un langage orient objet. Nous y reviendrons en dtail plus avant dans notre tude. Notons
- 1-
simplement que JavaScript permet daccder directement aux diffrents lments du document et de les manipuler. CommeprincipauxlmentsouobjetsdelapageHtml,onpeutciterlafentredunavigateur,ledocumentHtml,les images, les cadres, les formulaires, les lments de formulaire ou tout autre lment que vous aurez au pralable identifi. L objectif de cette partie nest pas de faire de vous des programmeurs mrites en JavaScript mais de fournir des bases solides qui vous permettront de comprendre le fonctionnement de la technique AJAX ainsi que les manipulationsdedonnesquelleinduira.
2.Brefhistorique
LelangageJavaScriptestapparuen1995aveclenavigateurNetscape2.LeJavaScript1.0taitn.Lespossibilits offertes par ce langage ont trs vite sduit les utilisateurs et les crateurs du Web, crant lpoqueunvifintrt sinonunepetitervolution. DuctdechezMicrosoft,alorsenretardtechnologiquementdansledomainede lInternet,JavaScriptatintgr trsrapidementaunavigateurInternetExplorer3.Eneffet,ilnefallaitpasdelicencepourutiliserleJavaScript.Par contre,dansleclimatdeguerrefroideentrelesdeuxconstructeurs,ilntaitpasquestionpourMicrosoftdacheterune licenceNetscapepourenadapterlecode.CestalorsqueJScriptestn,varianteduJavaScriptselonMicrosoft,qui reprendlaplupartdesfonctionsduJavaScriptetquienlargitlechampdapplication. Leschosestaientmalpartiessurleplandelacompatibilit.Heureusement,lesdeuxfirmesacceptrentdeparticiper une standardisation. Lorganisme choisi fut lECMA (European Computer Manufactures Association). En 1997, le JavaScriptatstandardissouslevocableECMAScriptsouslarfrenceECMA262.Enfait,cettestandardisationna port que sur la syntaxe de base, napportant quune compatibilit minimale et chaque diteur a continu ses dveloppementsindpendammentlundelautre. Avec Netscape 3 (fin 1996) est apparue la version JavaScript 1.1. Puis avec Netscape 4 (1997), la version 1.2. Ces versionsfurentgalementreconnuesparlesversionssuivantesdInternetExplorertandisqueJScriptvoyaitluiaussi apparatredenouvellesversions. CommencealorslelongdclindeNetscape.JavaScriptlanceencoredesversions1.3,1.4et1.5maisellesnontpas connuleretentissementdesversionsprcdentes. Paralllementlvolution(sansrvolution)duJavaScript,ilyaunautrefacteurdedivergence.Nousavonsvu,dansla dfinition, que le langage JavaScript tait un langage orient objet. La faon de dfinir et daccder ces objets a galement connu une approche diffrente selon lditeur du navigateur. Le W3C a ragi cette incompatibilit an lanant le DOM (Document Object Model). Cette standardisation a t globalement bien suivie, mais il subsiste des diffrencesnotoiresdinterprtation(voirchapitreLeDOM(DocumentObjectModel)). Devantcebelimbroglio,ilimportedadopterquelquesrglesdordrepratique. G lobalement,JavaScriptestbienreconnupartouslesnavigateurs.
D ans la nbuleuse des diffrentes versions, la plupart des concepteurs ont choisi la version JavaScript 1.2 vraimentcompatible.
P ourdesapplicationsassezbasiques,leproblmedecompatibilitneseposerapas.
D s que lon passe des applications plus sophistiques, on peut avancer que le JavaScript est hautement incompatible.telpointquilfautparfoiscrireuncodeadaptchaquenavigateuretventuellementchaque versiondeceluici !
3.Limites
Presque toutes les pages Web intgrent quelques lments de JavaScript. Ce qui ne semble plus crer de rels problmesdescurit,dosonsuccsauprsdescrateursdesitesWebetdesinternautes. Maiscetterelativescuritaunprixquisetraduitpardesvreslimitestechniques. LaprincipalelimitedeJavaScriptestquilnepermetpasdelireetdcriresurledisqueduroutoutautrepriphrique
- 2-
duvisiteur.LaseuleexceptionestcellequipermetJavaScriptdelireetdcriresurledisqueduruniquementdansla zonerserveauxcookies.CestlaseuleinteractionqueJavaScriptpeutavoiravecvotredisquedur. En outre, aucune instruction nest prvue en JavaScript pour gnrer une connexion vers un autre ordinateur ou un serveur.CelanestpossiblequeparlacrationdunobjetXmlHttpRequestquiestunlmentindispensablelamise enplacedapplicationsdetypeAJAX(voirchapitreLobjetXmlHttpRequest). IlneseradoncpaspossibledeconcevoirenJavaScriptdesapplicationstellesquunforumdediscussion,unsondage ouuneboutiqueenligne.Toutescesapplicationsncessitentunlangagepluspuissant,gnralementimplantct serveur,commelePHPoulASP. Mmesicelaestenpartieexcessif,ilfauttreconscientqueleJavaScriptestun"petit"langagedeprogrammationet quilnatconuquepourcomplterleHTMLnormal. L actionduJavaScriptestphmreetnedurequeletempsconsacrlavisitedelapageparlutilisateur.
4.OutilspourleJavaScript
LecodesourcedespagesWebprsentecetavantagequilnencessitepasdelogicielscoteux.JavaScriptnedroge paslargle. PourlapprentissageduJavaScript,ilvousfaut:
q
unsimplediteurdetexte, unnavigateurcompatibleJavaScript, etdesconnaissancesdulangageHtml.
LeJavaScript,commelaplupartdeslangagesdeprogrammationscritentextebrut.Ainsiunsimplediteurdetexte comme le BlocnotesdeWindows(notepad)faitparfaitementlaffaire.Lutilisationdelafentredecodedunditeur Htmlestgalementpossible. LeJavaScripttantinterprtparlenavigateur,nimportequelnavigateurcompatibleJavaScriptpeuttreadopt.Ce quiestlecasdelaplupartdesnavigateursdumarch.InternetExplorer6et7ouFirefox,retenusdanslecadredecet ouvrage,sontbienentenduparfaitementadaptsauJavaScript.VeillezcependantcequelafonctionJavaScriptne soitpasdsactivedanslesoptionsdevotrenavigateur. PuisquelecodeJavaScriptvientsegrefferdanslecodesourcedelapage,une connaissanceapprofondiedesbalises HtmlouXhtmlestrecommande,sinonindispensable.
5.JavaScriptetleXhtml
Le JavaScript est interprt par le navigateur. Il faut donc linformer que le code quil risque de rencontrer est du JavaScript.
a.Balisesmeta
Auniveaudesbalisesmeta,onpeutdterminerleouleslangage(s)complmentaire(s)utilis(s)dansledocument Xhtml. Onajouteraauxautresbalisesmeta,labalise: <meta http-equiv="Content-Script-Type" content="text/javascript" /> Cette balise signale que la page comporte (ou peut comporter) un script et que ce script, en mode texte, est du JavaScript.
b.CodeJavaScript
LecodeJavaScriptserasignalaunavigateurenentourantceluicidesbalises<script> ... </script>
- 3-
<script type="text/javascript"> //<![CDATA[ Code JavaScript //]]> </script>
L a balise <script type="text/javascript"> dtermine quil sagit dun script JavaScript. En effet, il existe dautreslangagesdescriptquipeuventsimplmenterdansunepageHtml.OnpenseauVBscriptdeMicrosoft quiestunlangageissuduVisualBasicmaisquinapaseulemmesuccsqueleJavaScript.
D anslapratique,onrencontrefrquemmentladclarationabrge<script>.Celleciestvalablecarlaplupart desnavigateursontreprisleJavaScriptcommelangagedescriptpardfaut.
P arfois, la version du JavaScript est ajoute cette balise pour forcer le navigateur respecter les spcifications de la version ainsi mentionne. Ce qui donne par exemple <script type="text/javascript" language="javascript1.2">. Cette prcision nest plus trs utilise car les navigateurs rcents se "dbrouillent" pourgrerleJavaScriptindpendammentdesaversion.
E nHtml,onaprislhabitudedentourerlecodeJavaScriptdesbalisespourcacherlecode lintentiondesnavigateursquinereconnaissentpasleJavaScript.Remarquonsquelesbalises  sontdescommentairesHtmletlesbarresobliques//ducommentaireJavaScript.
E nXhtml,ilfautentourerlecodeJavaScriptpar//<![CDATA[ ... //]]>.Cettenotation,issueduXML,permet dinformerlenavigateurdenepasanalyseretinterprtercequilyaentrele <![CDATA[initialetle]]>final. Lanalyseursyntaxiquevaseulementrcuprerlecontenudecettesection,sanschercherreprerdesbalises, des entits ou toute autre spcificit syntaxique XML. En effet, sans //<![CDATA[, les signes < infrieur et > suprieurduJavaScriptseraientreconnuscommelessignes<dedbutdebaliseet>defindebaliseduXhtml.
6.Unpremierscript
Encodonslecodesuivantdansunditeurdetexte: <!DOCTYP<!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" xml:lang="fr" lang="fr"> <head> <title>Premier script</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type=text/JavaScript> //<![CDATA[ document.write("Mon premier JavaScript"); //]]> </script> </body> </html> Commentaires:
q
ledoctypenaaucuneinfluencesurlexcutionduJavaScript.Cequinestpaslecasdesfeuillesdestyle. linstruction document.write("Mon premier JavaScript") demande dcrire (write) le texte repris entre les parenthsesdansledocument.
- 4-
remarquezquelinstructionsetermineparunpointvirgule.
Onenregistrecefichierauformathtm. Ensuite,onaffichelapagelocaledanslenavigateur.
L aversionInternetExplorer6.0pourWindowsXPSP2risquedevousapporterquelquesdsagrmentslorsde laconceptiondevosscriptsenlocal.Soucieux(maiscestade,unpeutrop!)delascuritdespagesaffiches, InternetExploreraffichelemessagedinformationsuivant.
P ourvisionnervotrepagecomportantunscript,ilfautautoriserlecontenuainsibloqu.
C emessagedinformationnapparatraplus(saufexceptions)unefoisquelapageseraenligne.
I lestnoterquecetavertissementdescuritatsupprimdansInternetExplorer7.0.
7.JavaScriptinterne
Onpeutseposerlaquestion"Oinclurelesbalises<script> ... </script>dansledocumentXhtml?".
- 5-
Il ny a hlas, pas de rgle prcise qui stipule quel endroit dun fichier Html ou Xhtml, le code JavaScript doit tre dfini.Laseulerponseest"Lolenavigateurenaurabesoin"! Pourrappel,lapageHtmlestchargeparlenavigateurdefaonsquentielle(dehautenbas).Illitdabordlentte (le contenu des balises <head>) et ensuite le corps (<body>), ligne par ligne. Tous les lments du "body" sont interprtsdanslordredcrituredesbalises. SionfaitappelducodeJavaScript,alorsqueceluicinapasencoretdfinidanslapageetdoncinterprtparle navigateur,cederniernepeut,entoutelogique,pasleprendreencharge(erreursurlapage). OnpeutainsiretrouverlecodeJavaScriptplusieursendroitsdelapage:
q
ilnestpasrarequeducodeJavaScriptsoitinclus,totalementouenpartie,danslesbalises<head>.Eneffet,ce code sera alors lu en premier par le navigateur et le concepteur peut en toute scurit faire appel ces fragmentsdecode,nimporteolintrieurdelabalise<body>carilseradjdisponible. onretrouveparfoisducodeJavaScriptimmdiatementaprslabalise<body>lorsqueceluiciestplusspcifique aucorpsdudocument. sileJavaScripttraitelesdonnesdunformulaire,lecodepeutapparatreaprslabalise<form>. des instructions comme document.write("..."); peuvent tre incluses dans le texte de la page lendroit souhait. etc.
L ecodeJavaScriptdoittreencodavantouauplustardaumomentoildevratreexcut. Enoutre,depuisqueleJavaScriptestreconnucommelelangagedescriptpardfautdelaplupartdesnavigateurs,du code JavaScript peuttre inclus directement dans la balise Html ou Xhtml, fonctionnant alors comme un attribut de celleci. Cettefaondeprocdernestpasadoptepouruncodeprogrammecompliqumaisseulementpourunappeldes vnements,mthodes,fonctionsdtermins. Quelquesexemples: <a onclick="javascript:history.back();">Retour page prcdente</a> Avec lobjet history de JavaScript, vous avez accs aux pages Web qui ont t visites par lutilisateur et qui sont sauvegardes dans lhistorique du navigateur. Avec la mthode back(), on demande, au clic sur le lien, de remonter dunepositiondanslhistorique,revenantainsilapageprcdente. <h1 onmouseover="history.back()">Retour page prcdente</h1> Iciondemandederevenirlapageprcdenteparlesimplesurvoldelasouris(onmouseover). <form> <input type="button" value="retour" onclick="history.back()"> </form> Quandlutilisateurcliquesurleboutondeformulaire,onrevientlapageprcdente.
8.JavaScriptexterne
Il est galement possible de noter le code JavaScript dans un ou des fichiers spars de la page Xhtml. Ce qui prsentelavantagedeclarifierlecodedudocumentXhtmletderespecterlargledesparationducontenuetdela prsentation.IlestainsipossibledappelerlemmecodeJavaScriptpartirdefichiersXhtmlsparssansavoirle rcrire. Cefichierexterneestunfichierdetextebrutencod,parexemple,avecleBlocnotesdeWindows.Cetypedefichier comportelextension.js.IlcontientuniquementducodeJavaScript,etdoncsanslesbalises<script>. CefichierestappeldanslapageXhtmlpar:
- 6-
<script src="fichier_externe.js"></script> Cettebalisedappelseplacegnralemententrelesbalises<head> ... </head>. ReprenonsnotreexempledupointUnpremierScriptdecechapitre.
a.Lefichierexterne
Cefichierexterne,quenousappelleronswrite.js,comportelaseulelignedecode: document.write("Mon premier JavaScript externe");
b.LapageXhtml
<!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" xml:lang="fr" lang="fr"> <head> <title>Script externe</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="write.js"></script> </head> <body> </body> </html> LersultatestidentiquelacapturedcranproposeaupointUnpremierScript.
9.Quelquesconseilspourledbogage
Vous serez invitablement drouts lors de vos premires applications en JavaScript. En effet, les navigateurs permettentbeaucoupde"souplesse"danslecodeHtmletlesfeuillesdestyleCSS.AvecleJavaScript,onpassela rigueur dun langage de programmation. La moindre erreur sera sanctionne ! Et une erreur est si vite arrive... Un pointlaplacedunevirgule,unefautedefrappe,unemajusculeabsenteouindue,uneparenthsemanquante,un guillemet au lieu dune apostrophe, une accolade oublie, voil un florilge de petites erreurs qui empchent lexcutiondunscript. Pourfaciliterlapprentissage,lauteurconseilledactiverledbogueurdescriptpardfautdevotrenavigateur.
s
DanslecadredInternetExplorer,OutilsOptionsInternetOngletAvancs.
- 7-
Il est peuttre ncessaire dinstaller le "Script Debugger" de Microsoft. Ce programme est disponible en tlchargement pour diffrentes versions du systme dexploitation de Microsoft ladresse : http://www.microsoft.com/downloads/results.aspx?productID= &freetext= script+debugger&DisplayLang= en ou plus simplement,parunerecherchesurGoogleaveccommemotscls"ScriptDebuggerdownload". Unmessagederreurdutypeaffichcidessousvousfaitgagneruntempsprcieuxetvousaidecorrigervotrescript.
Si vous utilisez le navigateur Firefox, vous avez votre disposition la console JavaScript,Outils Dveloppement WebConsoleJavaScriptouOutilsConsolederreurs(selonlesversions).
- 8-
Notionsfondamentales
Avantdepasserltudeproprementditedetoutlangagedeprogrammation,aussimodestesoitilcommeleJavaScript, ilimportedeparcourirquelquesrglesdcritureetdesyntaxe.
1.Lacasse
LeJavaScriptestsensiblelacasse(casesensitive).Ilfaitdoncladiffrenceentrelesmajusculesetlesminuscules. Ainsi,lavariablevar = numronestpasgalelavariablevar = Numeronivar = NUMERO. LalphabetASCIIcomposde128caractresestutilis.Ainsilecodedoittrecritsanscaractresaccentus. Lesespaces,tabulations,retourschariot,lignesviergessont(saufexceptions)ignorsdanslecode.
2.Lescommentaires
Ilesttoujoursutiledannoterlecodeavecdescommentairesenvuedefacilitersalisibilit,surtoutlarelecture. EnJavaScript,cescommentairespeuventseprsentersousdeuxformesdiffrentes :
q
par une double barre oblique (//) devant le commentaire. Cette notation est bien adapte pour les commentairesquisenotentsuruneseuleligne.
// Ceci est un commentaire

q
parlessignes/*...*/.Cequipermetdtendrelecommentairesurplusieurslignes.
/* Pour les bavards, JavaScript a prvu des commentaires sur plusieurs lignes */
3.Lepointvirgule
ChaquecommandeouinstructionJavaScriptsetermineparunpointvirgule. Exemple:document.write ("ligne : " + compt + "<br>"); Bien que cela ne soit plus obligatoire en toutes circonstances, il reste prudent de maintenir cette rgle de faon systmatiquelorsquonestdbutantenJavaScript.
4.Lesconstantes
Lesconstantessontfixesparlavaleurindiquedanslecode. LesvaleursreconnuesparleJavaScriptsont: Lesnombresentiersouvirguleflottante Notonsquepourcesderniers,lepointremplacelavirgulehabituellementutiliseenbureautique. 2005 16.6666 Leschanesdecaractres Ellessontconstituesdunesuitedecaractresquelconques,encadrepardesguillemetsoudesapostrophes.Une chanecommenceavecdesguillemetsdoitsetermineravecdesguillemets,mmechosepourlapostrophe.
- 1-
"CSS+DHTML" 3.1416 Si la chane de caractres contient un guillemet, une apostrophe ou une barre oblique gauche (backslach), ces derniers risquent dtre interprts comme du code JavaScript. Les caractres cits sencodent ainsi prcds dune barreobliquegauche. Soit: \pourlapostrophe. \"pourleguillemet. \\pourlabarreobliquegauche. document.write ("Je lui ai dit \; \"Va l\cole \""). Unechanedecaractrespeuttrevide.Cestlquivalentdelavaleurzropouruneconstantenumrique.Dansce cas,ellescritaumoyendedeuxguillemetsoudedeuxapostrophesrigoureusementconscutifs(sansespaceentre eux). lesvaleurslogiquesouboolennes,soittruepourvraietfalsepourfaux. nulllorsquilnyapasdevaleurattachelavariable. undefined.Cestlavaleurdunevariablequinapastinitialise.
5.Lesvariables
Contrairement la plupart des autres langages de programmation, JavaScript nest que faiblement typ. En effet, il nest pas ncessaire den dclarer le type (comme par exemple avec int, float, double, char de PHP) et une variable peuttoutmomentchangerdetype. Lesvariablessedclarentdedeuxfaons: a)explicitementparlemotclvar. var indice b)implicitementparsonapparitiongauchedusignegal. b = 256 Lenomdelavariabledoitrespecterlasyntaxesuivante:
q
lavariabledoitcommencerparunelettreouunsoulign"_". lavariablepeutcomporterunnombreindtermindelettres,dechiffresainsiquedescaractres_et$. lesespacesnesontpasautoriss. le nom de variable ne peut utiliser des mots dits "rservs". En effet, ces mots sont utiliss dans le code JavaScriptmme.Onnepeutnommerunevariable,parexemple,var,true,false,else,etc.Lalistecompltede cesmotsrservsestfournieenannexe. pourrappel,leJavaScriptestsensibleauxmajusculesetminuscules.
Exemplesdedclarationdevariablesvalides:
q
var pi; var code_postal; var formulaire1;
- 2-
var result$;
On peut initialiser une variable en mme temps que sa dclaration au moyen du signe gal (= ) suivi dune valeur numrique,dunechanedecaractresoudunevaleurboolenne.Cequivitequelavaleurundefinedsoitretourne encoursdexcutionduscript. Exemples:
q
var pi = 3.1415926535; var code_postal = 59000; var formulaire1 = "Ville"; var result$ = true;
Exemple: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type=text/JavaScript> //<![CDATA[ var texte = "Mon chiffre prfr est le "; var variable = 7; document.write(texte + variable); //]]> </script> </body> </html>
6.Lesoprateurs
JavaScriptcomportedenombreuxoprateursselonletypedevaleurs.
a.Lesoprateursarithmtiques
Cesontlesoprateursclassiquesdetouteslesoprationsdecalcul.
- 3-
Oprateur ++ * / % = Commentaires:
q
Nom plus moins multipli divis modulo gal
Signification addition soustraction multiplication division restedeladivisionpar affectationdevaleur
Exemple x+100 x1 x*2 x/10 356%5 i=4
lorsqueloprateur+portesurdeuxoprateursdontlunaumoinsestunechanedecaractres,iljouele rledoprateurdeconcatnation(voirplusloin). loprateur=affectesimplementunevaleur.Onleconfondsouventavecloprateurdgalit==.
b.Lesoprateursdecomparaison
Cesoprateurssontsouventutilisslorsdetestsconditionnels. Oprateur < <= == >= > != Nom infrieur infrieurougal gal suprieurougal suprieur diffrent Signification x<10 x<=10 x==10 x>=10 x>10 x!=10
Pourrappel,le=estunoprateurdattributiondevaleurtandisquele==estunoprateurdecomparaison.Cette confusionestunesourcefrquentederreurdeprogrammation. Lersultatrenvoyparuneoprationdecomparaisonestunevaleurboolennetrue(vrai)oufalse(faux).
c.Lesoprateursboolens(oulogiques)
Ces oprateurs sont galement utiliss dans les tests conditionnels mais logiques cette fois. Ils portent sur des oprandesboolensetlersultatrenvoyestgalementunevaleurboolenne(trueoufalse). Oprateur && Nom et Signification lesdeuxconditionssont vrifies unedesdeuxconditions estvrifie laconditionnestpas vrifie Exemple condition1&&condition2
||
ou
condition1||condition2
!condition1
- 4-
d.Lesoprateursassociatifs
Ces oprateurs associent deux oprateurs daffectation. Cest une forme abrge pour noter les oprateurs de calcul.Ceciestpluttrservdesprogrammeursplusconfirms. Oprateur += = *= /= Nom plusgal moinsgal multipligal divisgal Exemple x+=y x=y x*=y x/=y Signification x=x+y x=xy x=x*y x=x/y
e.Lesoprateursdincrmentation
Un classique des langages de programmation mais souvent droutant pour les novices. Cet oprateur dincrmentationesttrsutilispourfairevarierduneunitlescompteursimplmentsdanslecode. Ainsipourunevaleurdedpartx=0,aupremierpassagex++vaut1(x=x+1ou1=0+1).Ausecondpassage,x++ vaut2(x=x+1ou2=1+1).Autroisimepassage,x++vaut3(x=x+1ou3=2+1).Etainsidesuite. Oprateur x++ Nom incrmentation Exemple x=x++ Signification x++estlemmeque x=x+1 xestlemmeque x=x1
dcrmentation
x=x
f.Lesoprateursdeconcatnation
Utilisavecdeschanesdecaractres,cetoprateurajouteunechanedecaractreslasuiteduneautrechane decaractres. Oprateur + Nom concatnation Exemple "chaine1"+"chaine2" Signification "chaine1chaine2"
Lorsque vous concatnez des chanes de caractres, il ne faut pas oublier les espaces au dbut ou la fin de chacunedelles,souspeinedecollerleschanes.
g.Autresoprateurs
Ilexisteencoredautresoprateursmaisilsdpassentlargementlecadredecetouvrage. Exemple <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type=text/JavaScript> //<![CDATA[ var variable = (100 - 50) * 2; document.write("(100 - 50) * 2 = " + variable); //]]> </script>
- 5-
</body> </html>
h.Prioritdesoprateurs
Comme en algbre, lorsquune expression comporte plusieurs oprateurs, celleci est value selon la priorit respectivedesoprateurs. Voici,pourlesoprateursreprisdansnotretude,lalistedespriorits,delaplusbasselaplushaute. Oprateur virgule associationetaffectation oulogique etlogique comparaison addition/soustraction multiplication/division diffrentetincrmentation parenthses Symbole , =+==*=/=<<=>>= || && =!=<<=>=> + */ !++ ()
Encasdeprioritgaledoprateursconscutifs,loprationesteffectuedegauchedroite. Onpeuttoujoursmodifieruneprioritdoprateursparlemploideparenthsescarcellesciontleplushautniveau depriorit.
7.Unpeudethorieobjet
JavaScript est un langage orient objet. Il va ainsi diviser la page affiche lcran en objets mais surtout, va vous permettredaccdercesobjetsetdelesmanipuler. IllustronstoutdaborddiffrentsobjetsquipeuventtrecontenusdansunepageWeb. Soitlapagesuivante.
- 6-
Cettepagesaffichedansunefentredunavigateur.Cestlobjetfentre(window).
Danscettefentre,ilyaundocumentHtml.Cestlobjetdocument.Autrementdit(etcestlquelonvoitapparatrela notiondehirarchiedesobjetsJavaScript),lobjetfentrecontientluimmelobjetdocument(document).
Dans ce document, on trouve un formulaire au sens Html du terme. Cest lobjet formulaire (form). Autrement dit, lobjetfentrecontientunobjetdocumentquiluimmecontientunobjetformulaire.
- 7-
Dansceformulaire,ontrouvetroislments:unezonedetexte,desboutonsdoptionetunboutondenvoi.Cesont respectivementlobjettexte, lobjetoption(radio)etlobjetbouton.Soitlobjetfentrecontientlobjetdocumentqui contientlobjetformulairequicontientsontourlobjettexte,lobjetoptionetlobjetbouton.
Lahirarchiedesobjetsdecetexempleestdonc: fentre>document>formulaire>texte,option,bouton Pouraccderunobjet,ilfautdonnerlechemincompletdelobjetenallantducontenantleplusextrieurlobjet rfrenc. Soitparexemplepourleboutonoption"Masculin" (window).document.form.radio[0]. Nousavonsmislobjetwindowentreparenthsescarwindowoccupetoujourslapremireplacedanslahirarchiedes objets.IlestreprispardfautenJavaScriptetdevientdoncfacultatif. C ettefaondeprocderestlapremiremaniremiseenplaceparleJavaScriptpouraccdercertainsobjets. Depuis1998etlapparition du DOM (DocumentObjectModel) dautres procds ont vu le jour pour laccsaux objets. On peut citer par exemple, les mthodes getElementByID, getElementsByName ou getElementsByTagName (voirchapitreLeDOM(DocumentObjectModel)Accderauxnoeuds).
L anotationutiliseciavant,appeleaposterioriDOMniveau0,accompagnenospremierspasenJavaScript,on luiprfrecependantencoursdtude,desmthodesplusrcentespouraccderauxobjets.
- 8-
Fonctionsetmthodes
1.Dclarationdunefonction
Unefonctionestungroupedelignesdecodedeprogrammation,critesparleconcepteuretdestinesexcuterune tchebienspcifique.Onpeut,sibesoinest,lutiliserplusieursreprisesdanslapage.Enoutre,lusagedesfonctions amlioregrandementlalisibilitdevotrescript. Pourdclareroudfinirunefonction,onutiliselemot(rserv)function. Lasyntaxedunedclarationdefonctionestlasuivante: function nom_de_la_fonction(arguments) { ... code des instructions ... } Remarques:
q
lenomdelafonctionsuitlesmmesrglesquecellesquirgissentlenomdesvariables(voirdanscechapitre Notions fondamentalesLesvariables).Pourrappel,JavaScriptestsensiblelacase.Ainsifunction_a()ne serapasgalFunction_a(). touslesnomsdefonctionsdansunscriptdoiventtreuniques. la mention des arguments est facultative mais dans ce cas, les parenthses doivent rester. Cest dailleurs grcecesparenthsesquelinterprteurJavaScriptdistinguelesvariablesdesfonctions.Nousreviendrons plusendtailsurlesargumentsetautresparamtres. lorsquune accolade est ouverte, elle doit imprativement, sous peine de message derreur, tre referme. Prenez la bonne habitude de fermer directement vos accolades et dcrire le code entre elles. De nombreux scriptsnefonctionnentpaspourdeserreursdaccoladesfermantes.
L e nombre daccolades ouvertes (voir fonctions, tests conditionnels, etc) doit toujours tre gal au nombre daccoladesfermes.
lefaitdedfinirunefonctionnentranepaslexcutiondescommandesquilacomposent.Cenestquelorsde lappeldelafonctionquelecodedeprogrammeestexcut. la dclaration de fonction se place souvent dans lentte du document Html ou Xhtml soit entre les balises <head> ... </head>.Elleestainsitoujoursdisponibleetpeuttreappeletoutmomentdansledocument.
Exemple: <head> <script type="text/javascript"> //<![CDATA[ function message(){ document.write("Bienvenue"); } //]]> </script> </head>
2.Appeldunefonction
Lescriptdelafonctionnesexcutequelorsquecelleciestappele. Lappeldunefonctionsefaitparlenomdelafonction(aveclesparenthses).Onyadjointlesparamtresventuels.
- 1-
Soitparexemple: <script type="text/javascript"> //<![CDATA[ message(); //]]> </script> Autre possibilit, lappel de la fonction se ralise souvent au moyen de gestionnaires dvnements comme le chargementdelapage,leclicdunbouton.Nousretenonsicilvnementonloadquiappellelafonctionmessage()au chargementdelapage. <body onload="message();"> Ilfautveillercequelafonctionsoitdjdfinieetconnuedelinterprteuravantsonexcution. Lapagecomplteserait: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function message() { document.write("Bienvenue"); } //]]> </script> </head> <body onload="message();"> </body> </html>
3.Passagedeparamtre(s)
Ilestpossibledepasserdesparamtresunefonction,cestdiredeluifournirunevaleuroulenomdunevariable afinquelafonctionpuisseeffectuerlesoprationsprogrammeslaidedecesparamtres. Lorsquonpasseplusieursparamtresunefonction,ilfautlessparerpardesvirgules,aussibiendansladclaration quedanslappel. Soitunefonctionquicalculelecubedunnombre: function calcul(nombre) var cube = nombre*nombre*nombre; }
- 2-
Cettefonctiondoitavoirunevaleurdedpartpoureffectuersonopration.Cettevaleurluiestfournieenargument lorsdelappeldelafonction. Lorsdelappel:calcul(5); Ousousformedevariable: var nombre = 5 calcul(nombre); Appliqunotreexempleprcdent,lescriptpourraitdevenir: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function message(texte) { document.write(texte); } //]]> </script> </head> <body onload="message(Bienvenue);"> </body> </html>
N ous avons entour la chane de caractres Bienvenue par des apostrophes car les guillemets taient dj utilisspourlattributonload="...".
4.Variablelocaleouglobale
Il existe deux types de variables, les variables locales et les variables globales. Une variable globale est accessible partoutdanslescript.Unevariablelocalenestaccessiblequedanslafonctionquilacre. Cestcequonappellelaportedesvariables.Cettedistinctionestunesourcefrquentederreurs,souventdifficiles dceler,danslesscripts.
a.Variablelocale
Une variable dclare dans une fonction (donc lintrieur des accolades de la fonction) par le mot cl var a une portelimitecetteseulefonction.Onnepeutpasexploitercettevariableailleursdanslescript.Onlappelledonc variablelocale. function calcul(nombre) var cube = nombre*nombre*nombre; } Ainsi,lavariablecubeestdanscetexempleunevariablelocale.Sivousyfaitesrfrenceailleursdanslescript,cette variableestinconnuepourlinterprteurJavaScript(messagederreur). Silavariableestdclarecontextuellement(sansutiliserlemotvar),saporteestglobaleunefoisquelafonctiona texcute. function calcul(nombre) { cube = nombre*nombre*nombre } Lavariablecubedclarecontextuellementesticiunevariableglobaleaprslexcutiondelafonctioncube().
- 3-
b.Variableglobale
Lesvariablesdclarestoutaudbutduscript,endehorsetavanttoutesfonctions,sonttoujoursglobales,quelles soientdclaresavecvaroudefaoncontextuelle. <script type="text/javascript"> //<![CDATA[ var cube=1 function calcul(nombre) { var cube = nombre*nombre*nombre } //]]> </script> Lavariablecubeestbienglobale. Pourlafacilitdegestiondesvariables,onnepeutqueconseillerdelesdclarerendbutdescript(commedansla plupartdeslangagesdeprogrammation).Cettehabitudevousmetlabridecomplicationscertaines.
5.Linstructionreturn
Selonlcritureducode,lersultatdunefonctionpeuttreretournparlinstructionreturn. Soitlafonctionmultiple()quicalculeleproduitdedeuxnombres(aetb). function multiple(a,b) { x = a*b; return x; } lappeldelafonction,onluipasselesparamtrescorrespondantauxargumentsaetb,soitmultiple(4,5). resultat=multiple(4,5); Commelavaleurretourneparlafonctionmultiple()est20,cellecieststockedanslavariableresultat. Lescriptcompletdevient: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function multiple(a,b) { x = a*b; return x; } //]]> </script> </head> <body> <script type="text/JavaScript"> //<![CDATA[ resultat=multiple(4,5); document.write(resultat); //]]> </script> </body> </html>
- 4-
6.QuelquesmthodesJavaScript
LesmthodessontdesfonctionsprdfiniesdanslelangageJavaScriptetddiesunobjetparticulier. NousavonsjusquiciutilislamthodeJavaScriptwrite(),spcifiquelobjetdocument. Passonsenrevuequelquesautresmthodes(delobjetwindow).Celapermetdevariernosexemplesdanslasuitede notreexpos.
a.Alert()
Lamthode alert() de lobjet fentre affiche une bote de dialogue. Cellecicomporteunmessagequireproduitla valeur (variable et/ou chane de caractres) de largument qui lui a t fourni. Cette bote de dialogue bloque le programmeencourstantquelutilisateurnaurapascliqusurOKpourfermercelleci. R gal des programmeurs dbutants en JavaScript, cette mthode est certes spectaculaire mais dun rle marginal dans un site Web. Par contre, alert() est trs utile pour vous aider dbugger les scripts et y retrouverdventuelleserreursdeprogrammation. Sasyntaxeest: alert(variable); alert("chane de caractres"); alert(variable + "chane de caractres"); Sivoussouhaitezcriresurplusieurslignes,ilfaututiliserlesigne\n. Exemple Unebotedalertevasedclencherlorsqueleboutonestcliqu. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function alerte() { alert ("Ceci est un message dalerte !"); } //]]> </script> </head> <body> <form> <input type=button value="Mthode alert()" onclick="alerte()">
- 5-
</form> </body> </html>
b.confirm()
CettemthodedelobjetwindowafficheunebotededialogueavecdeuxboutonsOKetAnnuler.Encliquantsur OK,lamthoderenvoielavaleurtrue et bien entendufalsesionacliqusurAnnuler.Cequipeutpermettre,par exemple,dedfinirdesoptionsdansunprogramme. Exemple Lescriptlanceunebotedeconfirmation.Lavaleurrenvoyeestmisedanslavariablea.Silavaleurdeaesttrue(if (a == true))unebotedalertesaffiche,sicenestpaslecas,uneautrebotededialoguesaffiche. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ var a = confirm("Cliquez OK ou Annuler"); if(a == true){ alert ("Vous avez cliqu OK"); } else { alert ("Vous avez cliqu Annuler"); } //]]> </script> </body> </html>
- 6-
c.prompt()
Danslemmestylequelesprcdentesmthodesdelobjetwindow,JavaScriptvousproposeuneautrebotede dialogue,appelebotedinvite.Elleestcomposedunchampcomportantuneentrecomplterparlutilisateur. Cetteentrepeutaussipossderunevaleurpardfaut. Lasyntaxeest: prompt("texte de la bote dinvite","valeur par dfaut"); En cliquant sur OK, la mthode renvoie la valeur encode par lutilisateur ou la valeur propose par dfaut. Si lutilisateurcliquesurAnnuler,lavaleurnullestalorsrenvoye. Lamthodeprompt()estparfoisutilisepoursaisirdesdonnesfourniesparlutilisateur. Exemple OnvademanderleprnomduvisiteurparunebotedinviteetlaffichersurlapageWeb. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ var prenom = prompt("Encodez votre prnom", "Votre prnom ici"); document.write("<h2>Bonjour " + prenom + "</h2>"); //]]> </script> </body> </html> Labotedinvite:
LedocumentXhtml:
d.Uneminuterie
JavaScriptmetvotredispositionuneminuterie(ouplusprcismentuncompterebours)quipermetdedclencher unefonctionaprsunlapsdetempsdtermin. Lasyntaxedemiseenroutedutemporisateurest: nom_du_compteur = setTimeout<$I[]setTimeout>("fonction_appele()", temps en mil liseconde) Ainsi,setTimeout("demarrer()",5000)valancerlafonctiondemarer()aprs5secondes. Exemple <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function display(){ alert("Bonjour !") } //]]> </script> </head> <body> Cliquez le bouton.<br /> Une bote dalerte apparatra aprs 3 secondes. <form> <input type="button" onclick="setTimeout(display(),3000)" value="Cliquez ici"> </form> </body> </html>
- 8-
Pour arrter le temporisateur avant lexpiration du dlai fix, il suffit dutiliser la mthodeclearTimeout (nom_du_compteur).
- 9-
Conditionsetboucles
1.Lesconditionsif...else
Les langages de programmation nchappent pas aux tests conditionnels. Cest ce qui en fait dailleurs une de leur richesse. Lexpressionif(si)permetdexcuterounon,unesriedinstructionsenfonctiondursultatduntest. if (condition vraie) { une ou plusieurs instruction(s); } Silaconditionestvrifie(true),lesinstructionssexcutent.Siellenelestpas(false),lesinstructionsnesexcutent pasetleprogrammepasselacommandesuivante. Remarquonsquelesinstructionssontcomprisesentreuneaccoladeouvranteetfermante. Voiciuneformeplusvolue : if (condition vraie) { instructions 1; } else { instructions 2; } Si la condition est vrifie (true), le bloc dinstructions 1 sexcute. Sinon (else), soit lorsque la condition renvoie la valeurfalse,leblocdinstructions2sexcute. Exemple Levisiteurentreunnombrecomprisentre0et99.Lescriptannoncesilenombreencodestinfrieurougal50ou suprieur50. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function test(){ var a = document.formulaire.input.value; if (a <= 50) { document.write(a +" infrieur ou gal 50"); } else { document.write(a + " est suprieur 50"); } } //]]> </script> </head> <body> <form action="" name="formulaire"> <input type="text" name="input" size="2" maxlength="2" value="" /> <input type="button" value="Tester" onclick="test()" /> </form> </body> </html>
le formulaire comporte une ligne de texte limite 2 positions (voir maxlength="2") pour encoder un chiffre comprisentre0et99.
- 1-
encliquantleboutonTester,levisiteurappellelafonctiontest()dfinieentre<head> ... </head>. dans la variabletest(), la variable a, chiffre encod dans la zone de texte, est rcupre. Pour ce faire, le formulaire est identifi et la valeur de zone de texte, nomme input, est extraite (cf. ce chapitre Notions fondamentalesUnpeudethorieobjet).
CecheminscritenJavaScript,document.formulaire.input.value.
q
lacondition"ainfrieurougal50"(a<=50)estteste sicetteconditionestralise,linformation"chiffreencodinfrieurougal50"estcritedansledocument. sicetteconditionnestpasralise(else), linformation"chiffreencodestsuprieur50"estcritedansle document. remarquezlesdeuxaccoladesdefin.Lapremiretermineletestif...else.Lasecondeterminelafonctiontest ().
Ilestgalementpossibledeconcevoirdemultiplestestsconditionnels. if (condition 1) { instruction(s) excuter si la condition 1 est vraie } else if (condition 2) { code excuter si la condition 2 est vraie } else { code excuter si tous les tests sont faux } Pourceuxquiaimentlesnotationsconcises,onpeutaussicrire: (expression) ? instruction a : instruction b Silexpressionentreparenthsesestvraie,linstructionaestexcute.Silexpressionentreparenthsesestfausse, cestlinstructionbquiestexcute.Remarquonsledoublepointentrelesdeuxinstructionsaetb. Lescriptprcdentdeviendraitalors:
- 2-
<!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function test(){ var a = document.formulaire.input.value; if (a <= 50) { document.write(a +" infrieur ou gal 50"); } else { document.write(a + " est suprieur 50"); } } //]]> </script> </head> <body> <form action="" name="formulaire"> <input type="text" name="input" size="2" maxlength="2" value="" /> <input type="button" value="Tester" onclick="(document.formulaire.input.value <= 50) ? document.write(document.formulaire.input.value + est infrieur ou gal 50) : document.write(document.formulaire.input.value + est suprieur 50)" </form> </body> </html> Letestconditionnelif...elseestunpilierduJavaScriptetdelaprogrammation.Ilserafrquemmentutilisdansles scriptsdunecertainecomplexit.
2.Labouclefor
Lexpressionforpermetdexcuterunblocdinstructionsuncertainnombredefois(boucle)enfonctiondelaralisation duncertaincritre.Linstructionforprvoitdembleuncompteuretuneconditionpourlinterruption. Lasyntaxegnraleest: for (valeur initiale ; condition ; progression) { instructions; } Prenonsunexempleconcret: for (i=0; i<5; i++) { document.write(i + "<br>") } Aupremierpassage,lavariableivaut0(savaleurinitiale).Elleestbieninfrieure5.Lesinstructionssexcutent.La variable i est ensuite incrmente dune unit par loprateur dincrmentation i++ (i vaut alors 1) et la boucle for continuesonexcution. Lavariablei(quivaut1)esttoujoursinfrieure5.Linstructionestnouveauexcute.Lavariableestaugmente de1parlincrmentation. Et ainsi de suite jusqu obtenir 5 pour i. La variable i ne remplit alors plus la condition i infrieur 5. La boucle sinterromptetleprogrammecontinueaprslaccoladedefermeture. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" />
- 3-
<meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> La boucle for :<br /> <script type="text/JavaScript"> //<![CDATA[ for (i=0; i<5; i++) { document.write("Passage " + i + "<br>") } //]]> </script> </body> </html>
L epigedelamiseenplacedesbouclesestdeconcevoirunebouclequinesarrtejamais(boucleinfinie).Un messagederreurapparatalors,pourquelenavigateurrendelamain.
CetteinstructionforesttrsutiliseenJavaScript.
3.Labouclewhile
Linstructionwhilepermetdexcuteruneinstruction(ouungroupedinstructions)uncertainnombredefois. while (condition vraie) { instruction(s) } Aussilongtempsquelaconditionestvrifie,JavaScriptcontinueexcuterlesinstructionsentrelesaccolades.Une foisquelaconditionnestplusvrifie,laboucleestinterrompueetlescriptcontinuelexcution. Exemple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- 4-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> La boucle while :<br /> <script type="text/JavaScript"> //<![CDATA[ compt = 4; while (compt>=0) { document.write("Passage " + compt + "<br>"); compt--; } //]]> </script> </body> </html>
Le rsultat est identique linstruction for. Dans la pratique, linstruction for est souvent prfre while car elle intgreuncompteur. Lerisquedeboucleinfinieestdautantplusprsentavecwhilequeleconcepteurdoitcreretincrmenterluimmele compteur.
4.Linstructionbreak
Linstructionbreakpermetdinterrompreprmaturmentuneboucleforouwhile. Pourillustrerceci,reprenonsnotreexemple: for (i=0; i<5; i++) { if (i == 3) break; document.write("Passage " + i + "<br>") } document.write("fin de la boucle"); Lefonctionnementestsemblablelexempledupoint2sauflorsquelecompteurvaut3.cemoment,onsortdela boucleparlinstructionbreaketlemessage"findelaboucle"saffiche. Cequidonnelcran: ligne : 0 ligne : 1 ligne : 2 fin de la boucle
- 5-
5.Linstructioncontinue
Linstruction continue permet de sauter une instruction dans une boucle for ou while et de continuer ensuite le bouclage(sanssortirdeceluicicommelefaitbreak). Soitlexemple: compt=0; while (compt<5) { if (compt == 3) { compt++ continue; } document.write ("ligne : " + compt + "<br>"); compt++; } document.write("fin de la boucle"); Ici,laboucledmarre.Lorsquelecompteurvaut3,linstructiondocument. writenesexcutepasgrcelinstruction continue (ligne : 3 nest pas affich) et la boucle poursuit son processus. Notons que compt a t incrment (compt++)avantlinstructioncontinuepourviterunbouclageinfinietquelenavigateurnerendelamain. Cequidonnelcran: ligne : 0 ligne : 1 ligne : 2 ligne : 4 fin de la boucle
- 6-
Gestionnairesdvnement
LesgestionnairesdvnementvontapporterllmentdinteractivitquicaractriseleJavaScript.Parleurintermdiaire, lesactionsduvisiteurmettenten uvrelesoutilsdeprogrammationduJavaScript. La gestion de ces vnements (dclenchs gnralement par linternaute) fait le lien entre le langage Xhtml et le JavaScript.
1.Lanotiondvnement
PassonsenrevuediffrentsvnementsimplmentsenJavaScript.Cettelistenestcependantpaslimitative. onAbort larrtduchargementdelapageouduneimageparlebouton"Stop"dunavigateur. onBlur lapertedufocusparunlmentHtml(gnralementlorsquonquitteunlmentdeformulaire). onClick AuclicdelasourissurunlmentHtml. onDbClick AudoubleclicdelasourissurunlmentHtml. onError lapparitionduneerreurdanslapage. onFocus laprisedufocusdunlmentdeformulaire. onKeyDown lapressiondunetoucheduclavier. onKeyUp Aurelchementdunetoucheduclavierquiatenfonce. onKeyPress lencodageparunetoucheduclavier(combinaisondeonKeyDownetonKeyUp). onLoad Auchargementdelapageparlenavigateur. onMouseDown lapressionduboutondelasouris. onMouseMove Audplacementdelasouris. onMouseOut labandondunlmentHtmlparlasouris.
onMouseOver AusurvoldunlmentHtmlparlasouris. onMouseUp Aurelchementduboutondelasouris(suitedeonMouseDown) onMove Audplacementdelafentre. onReset Auclicdubouton"reset"(boutonAnnuler)dunformulaire. onResize Auredimensionnementdelafentredunavigateur. onScroll lutilisationdelabarrededfilement. onSelect laslectionduntextedansunlmentHtml. onSubmit Auclicduboutonsubmit(boutonEnvoyer)dunformulaire. onUnLoad Aumomentolutilisateurquittelapage. Cesvnementspeuventtreassocisunemultitudedebalisesquenousnedtaillonspasici. C es gestionnaires dvnements sont nots sous forme dattributs dans les balises Html ou Xhtml. Ils ont dailleurstreprisparleW3CdanslesstandardsduHtml4.0etduXhtml1.0.Ilspeuventdonctrenotsdans lecode,sansmajuscule(s).Cestlaconventionquenousallonsadopterparlasuite. Lasyntaxeest: vnement="function()" Soitunvnement(ilscommencenttouspar"on"),lesignegaletlafonctionassocieparleconcepteur,entoure pardesapostrophes. Exemple onclick="alert(Vous avez cliqu sur cet lment)" Defaonlittrale,auclicdelutilisateur,unebotedalertesouvreaveclemessageindiqudanslescript.
2.LvnementonClick
Leclicdelasourisestunvnementfrquemmentutilis.Ilsurvientlorsquelevisiteurclique,parexemple,unlienou unlmentdeformulaire. Exemple Auclicdubouton,unebotedalertesurgit. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 2-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <form action=""> <input type="button" value="Cliquer ici" onclick="alert(Vous avez cliqu ici)" /> </form> </body> </html>
Le clic de la souris, dans le cas dun lien par la balise <a> ... </a>, est dj utilis par le Html ou le Xhtml pour atteindre la page spcifie. Pour associer une action JavaScript au clic dun lien, il a fallu introduire une notation particuliredugenre: <a href="javascript:alert(Bonjour !);">Cliquer ici !</a> Ainsidanslattributhref,onindiqueaunavigateurquilnesagitpasdunlienmaisduneinstructionJavaScript.Dola notationjavascript,doublepointetlinstructionretenue. Onrencontreaussilanotation: <a href="javascript:void(0)" onclick="alert(Bonjour !))"> Cliquer ici !</a> Pourpasseroutretouteactionpartirdelattributhref,lexpressionjavascript:void(0)esticiutilise.
3.LvnementonFocus
Unvnementestgnrlorsquunlmentestactiv,parexempleunelignedetextedunformulaire. Exemple Lorsquelutilisateurcliquedansunezonedetexte,uneinscriptionapparatdanscelleci. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <form action="" name="form">
- 3-
<input name="t1" onfocus="document.form.t1.value=Entrez votre nom ici !" /><br /> <input name="t2" onfocus=" document.form.t2.value=Entrez votre prnom ici !" /> </form> </body> </html> Aprsavoircliqudanslasecondelignedetexte,lacapturedcransuivanteestobtenue.
4.LvnementonLoadetonUnLoad
Auchargement(load)delapageoulasortie(onunload)delapage,desvnementssontgnrs. Exemple Unmessagedaccueilauchargementdelapageetunautremessagelasortiedecelleci. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body onload="alert(Bienvenue !)" onunload="alert(A bientt...)"> <a href="xxx.htm">Page suivante</a> </body> </html> Ce script associe deux vnements dans la mme balise. Son criture est simple. Il suffit dencoder simplement les diffrentsvnementslasuite,carilssont,depuisleHtml4.0,considrscommedesimplesattributs.
- 4-
5.LvnementonMouseOveretonMouseOut
LvnementonMouseOverseproduitlorsquelepointeurdelasourispasseaudessusdunlienouduneimage,sans cliquerdessus. LvnementonMouseOut,gnralementassociunvnementonMouseOver,seproduitlorsquelepointeurquittela zonesensible(lien,imageoubalise<div>). Exemple Cesdeuxvnementssontsouventutilisspourraliseruneffet,dsormaisclassique,daffichageduneautreimage au survol de limage originale par le pointeur de la souris. Cet effet porte le nom de rollover dans la documentation anglosaxonne. Ilimportequeladimensiondesimagesconcernesparlescriptsoitrigoureusementidentiqueenhauteuretlargeur. Soitlesimages:
<!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <img name="image" alt="mappemonde" src="monde1.png" onmouseover="document.image. src=monde2.png;" onmouseout="document.image.src=monde1.png;" /> </body> </html> Labaliseimage<img>affichelimageinitialemonde1.png(src="monde1. png").Onaprissoindedonnerunnomcette balise image (name="image"). Au survol de la souris (onmouseover), limage monde2.png apparat. Pour ce faire, on
- 5-
indique JavaScript quil doit chercher dans le document lobjet "image" et lattribut src qui fournit ladresse de la nouvelle image. Soit le chemin complet, document.image.src. Lorsque le pointeur de la souris quitte limage (onmouseout),limageoriginalerevient.
6.LvnementonSubmit
Lvnement cr par le clic sur le bouton denvoi dun formulaire peut judicieusement tre mis profit pour, par exemple,effectuerdesvrificationsconcernantlencodagedeschampsdeceformulaire. Exemple Cescriptvrifiesileschampsduformulaireontbientcomplts. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> //<![CDATA[ function verif() { a = document.formulaire.texte1.value; b = document.formulaire.texte2.value; c = document.formulaire.texte3.value; if ((a && b && c) =="") { alert("Au moins un champ est vide !"); } } //]]> </script> </head> <body> <form action="" name="formulaire" onsubmit="verif()"> <input name="texte1" size="26" /><br /> <input name="texte2" size="26" /><br /> <input name="texte3" size="26" /><br /> <input type="submit" />
- 6 ENI Editions - All rigths reserved
</form> </body> </html> Auclicduboutondenvoiduformulaire,lafonctionverif()estappele(onsubmit="verif()").Pourlalisibilitduscript, la valeur des diffrentes lignes de texte du formulaire est sauvegarde dans une variable. Laccs cette valeur seffectueparlcritureduchemindsormaishabitueldocument.formulaire.textex.value.Paruntestconditionnelif,on vrifiesiunedeslignesdetexteestvidesoitsiaetbetcestvide(&&pourleetlogique).Danscecas,unebote dalerteapparat.
- 7-
Formulaires
AvecJavaScript,lesformulairesHtmlouXhtmlprennentunetouteautredimension.NoublionspasquenJavaScript,on peut accder chaque lment dun formulaire pour y lire et/ou crire une valeur, par exemple. Tous ces lments renforcentlescapacitsinteractivesdespagesWeb.
1.Lalignedetexte
Lazonedetexteestllmentdentre/sortieparexcellencedeJavaScript. Lalignedetexteestcreparlabalise<inputtype="text"/>. Lalignedetextepossdetroisproprits: Proprit Description Indiquelenomducontrleparlequelonpourra accder. Indiquelavaleurpardfautquiseraaffichedansla zonedetexte. Indiquelavaleurencoursdelazonedetexte.Soit celleencodeparlutilisateurousiceluicinapas rentrdevaleur,lavaleurpardfaut.
name
defaultvalue
value
a.Lireunevaleur
Encoderunevaleurdanslazonedetexteetlareproduiredansunebotedalerte. Lescriptcompletest: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function controle(formulaire) { var test = document.formulaire.input.value; alert("Vous avez encod : " + test); } //]]> </script> </head> <body> <form action="" name="formulaire"> <input type="text" name="input" value="" /><br /> <input type="button" value="Contrler" onclick="controle(formulaire)" /> </form> </body> </html> LorsqueleboutonContrlerestcliqu,JavaScriptappellelafonctioncontrole()laquelleleformulaireesttransmis commeargumentonclick="controle (formulaire)". Cettefonction,dfiniedanslesbalises<head>,prendsouslavariabletest,lavaleurdelazonedetextevar test = document.formulaire.input.value.Cettevariableestalorsfourniecommeargumentdunebotedalerte.
- 1-
b.Reproduireunevaleur
Entrerunevaleurquelconquedanslazonedetextedentre.Affichercettemmevaleurdanslazonedetextede sortieaprsavoircliquunbouton. Voicilecode: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function afficher(formulaire) { var testin =document.formulaire.input.value; document.formulaire.output.value=testin; } //]]> </script> </head> <body> <form action="" name="formulaire"> <input type="text" name="input" value="" /> Zone de texte dentre <br /> <input type="button" value="Afficher" onclick="afficher(formulaire)" /><br /> <input type="text" name="output" value="" /> Zone de texte de sortie </form> </body> </html> LorsqueleboutonAfficherestcliqu,JavaScriptappellelafonctionafficher()laquelleleformulaireesttransmis commeargument(onclick="afficher (formulaire)"). Cette fonction afficher() prend sous la variable testin, la valeur de la zone de texte dentre (document.formulaire.input.value). linstruction suivante, la variable testin est affecte la valeur de la zone de textedesortieenJavaScript:(document.formulaire.output.value = testin).
- 2-
c.Testerunformulairevide
Ilestparfoisimpratifquunlmentdeformulairesoitrempliparlevisiteur.Cepetitscripttestesilevisiteuraomis dyencoderdesdonnes. Nousavonsdjabordcetteproblmatiquedanslechapitreprcdentmaisnousutilisonsiciuneautrefaonde procder. Lescriptest: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function valider(){ input = document.form.entree.value.length; if (input == 0){ alert("Vide !"); } } //]]> </script> </head> <body> <form action="" name="form"> Laissez le champ vide et testez :<br /> <input type="text" name="entree" size="25" value="" /><br /> <input type="button" value="Tester" onclick="valider()" /> </form> </body> </html> La fonction valider() appele par le clic du bouton (onclick="valider()") rcupre dans la variable input, la longueur de ce qui est encod dans la zone de texte (input = document.form.entree.value.length). Si cette longueurestgale0(input == 0),lutilisateurestavertiparunebotedalertequelazoneestvide.
- 3-
d.Donnerlefocus
Ilestsouventconvivialdeplacerdirectementlecurseurdanslapremirezonedetextedunformulaire. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body onload="document.form.entree.focus();"> <form action="" name="form" > <input type="text" name="entree" size="25" value="" /> </form> </body> </html> Auchargementdelapage(vnementonloaddubody),lefocusestdonnlazonedetextedontlecheminat dterminpardocument.form.entree.
Lecurseurestbienpositionndirectementdanslazonedetexte.
e.Encodagedunnombre
Certainesvaleursencodesnepeuventcomporterquedesnombres. Cescriptpermetdelevrifier.
- 4-
La fonction JavaScript isNaN(argument) est utilise : elle value largument pour dterminer sil ne sagit pas dun nombre(NaNpourNotaNumber). Lecodedevient : <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function verif() { n=document.form.nombre.value; if (isNaN(n) || n == 0) { alert("Entrer un nombre SVP !"); } else { alert("Entre valide"); } } //]]> </script> </head> <body> <form action="" name="form"> Code postal : <input type="text" name="nombre" size="3" maxlength="5" /><br /> <p><input type="button" name="bouton" value="Tester" onclick="verif()" /><p> </form> </body> </html> Unezonedetextede5caractresmaximum(maxlength="5")estprvuepourlencodageducodepostal.Celuicidoit comporteruniquementdeschiffresetdoncdoitpouvoirtreinterprtcommeunnombre.LeclicsurleboutonTester appellelafonctionverif(). Cette fonction initialise dabord la variable n avec la valeur de la zone de texte ddie au code postal (document.form.nombre.value). Un test conditionnel (if) est effectu pour vrifier si la valeur de n nest pas un nombre(isNaN(n)) ou est vide (n == 0).Danscecas,lencodageducodepostalestincorrectetunebotedalerte invitelevisiteurentrerunnombrecorrect.Sinon,lentreestvalide.
f.Calculautomatique
Leszonesdetextepeuventgalementtreutilisespourrecevoirdesdonnesoucontenirlersultatdoprations
- 5-
effectuesparlescript. Danslexemplesuivant,nousallonsdemanderauvisiteurlaquantitdeproduitscommands.Auclicdanslazonede texteduprixtotal,celuiciestautomatiquementaffich. Ilestpeuttreprfrable,cestade,dedjjeteruncoupdoeillacapturedcransuivante.
Lefichierdevient: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function calcul(form) { a = document.form.elem1.value; b= document.form.elem2.value; document.form.elem3.value = a* b; } function annul(form) { document.form.elem1.value=""; document.form.elem3.value=""; } //]]> </script> </head> <body> <form action="" name="form"> <table border="1" width="300"> <tr> <td width="100"> <p align="center">Quantit</p> </td> <td width="100"> <p align="center">Prix unitaire</p> </td> <td width="100"> <p align="center">Prix total</p> </td> </tr> <tr> <td> <p align="center"><input type="text" name="elem1" size="2" value="" /> </p> </td> <td> <p align="center"><input type="hidden" name="elem2" value="2.56" />2,56
- 6-
</p> </td> <td> <p align="center"><input type="text" name="elem3" size="5" value="" onfocus="calcul(form)" onblur="annul(form)" /> </p> </td> </tr> </table> </form> Cliquez nimporte o pour rinitialiser le tableau. </body> </html> En cliquant dans la zone de texte du prix total, soit en donnant le focus, la fonction calcul() est appele (onfocus="calcul(form)"). Dans cette fonction calcul(), la valeur encode dans la zone de texte relative aux quantits (a = document.form.elem1.value)estsauvegardedanslavariableaetlavaleurduprixunitaireencodedansllment deformulairecach<input type="hidden" /> (b = document.form.elem2.value)estsauvegardedanslavariableb. La multiplication de a et de b donne le prix total affich dans la zone de texte prvue cet effet (document.form.elem3.value = a * b). NousnoussommesservidecescriptpourillustrerlvnementonBlur.lafinduscript,lazonedetexteduprixtotal alefocus.Encliquantnimporteodanslapage,cettezoneperdlefocus.CestcequedsigneletermedeBlur. cetvnementestassocielafonctionannul(form) :onblur="annul(form)". Cettefonctionremetunechanedecaractresvidesdanslesdeuxzonesdetexte(document.form.elem1.value="" et document.form.elem3.value="").Cequirinitialiselescript.
2.Lesboutonsdechoixunique
Les boutons de choix unique, appels aussi boutons radio, sont utiliss pour noter un choix, et seulement un seul, parmiunensembledepropositions. Lesboutonsdechoixuniquesontcrsparlesbalises<inputtype="radio"/>. Proprit Description Indiquelenomducontrle.Touslesboutonsportent lemmenom. Lindexoulerangduboutonradiodmarrant0. Indiqueltatencoursdellmentradio(slectionn ounon). Indiqueltatduboutonslectionnpardfaut.
name
index
checked
defaultchecked
- 7-
value Exemple Unformulairerenseignantlesexeduvisiteur.
Indiquelavaleurdellmentradio.
<!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" xml:lang="fr" lang="fr"> <head>> <title>JavaScript</title> <meta http-equiv="Content-Type"Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function choixsexe(form) { if (form.choix[0].checked) { alert("Vous avez choisi la proposition " + form.choix[0].value); } if (form.choix[1].checked) { alert("Vous avez choisi la proposition " + form.choix[1].value); } } //]]> </script> </head> <body> Entrez votre choix : <form name="form" action=""> <input type="radio" name="choix" value="1" />Sexe masculin<br /> <input type="radio" name="choix" value="2" />Sexe fminin<br /> <p><input type="button" value="Quel est votre choix ?" onclick="choixsexe(form)" /></p> </form> </body> </html> Dansleformulairenommform,deuxboutonsradiosontdclars.Notezquelemmenomestutilispourlesdeux boutons.Ensuite,unboutondclencheparonclicklafonctionchoixsexe(). Cettefonctionvrifieleboutonradiococh.Cesdonnesdesboutonssontdisponiblesgrceauxindicestablispar rapport au nom des boutons radio soit choix[0], choix[1]. La proprit checked du bouton est teste par if (form.choix[x].checked). Dans laffirmative, une bote dalerte saffiche. Ce message reprend la valeur (voir value) attachechaqueboutonparlecheminform.choix[x].value.
3.Lesboutonsdechoixmultiples
Les boutons de choix multiples (aussi appels checkbox) sont utiliss pour noter un ou plusieurs choix parmi un
- 8-
ensembledepropositions. Lesboutonsdechoixmultiplessontcrsparlabalise<inputtype="checkbox"/>. Proprit name Description Indiquelenomducontrle.Touteslescasescocher portentunnomdiffrent. Indiqueltatencoursdellmentcasecocher (slectionnounon). Indiqueltatduboutonslectionnpardfaut. Indiquelavaleurdellmentcasecocher.
checked
defaultchecked value Exemple Soitlaquestionchoixmultiplessuivante: Slectionner les balises Html : - <h1> ... </h1>. - <a> ... </a>. - <op> ... </op>. - <b> ... </b>.
Labonnerponseestlapremire,secondeetquatrimeproposition. <!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" xml:lang="fr" lang="fr"> <head>> <title>JavaScript</title> <meta http-equiv="Content-Type"Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function choixsexe(form) { if (form.choix[0].checked) { alert("Vous avez choisi la proposition " + form.choix[0].value); } if (form.choix[1].checked) { alert("Vous avez choisi la proposition " + form.choix[1].value); } } //]]> </script> </head> <body> Entrez votre choix : <form name="form" action=""> <input type="radio" name="choix" value="1" />Sexe masculin<br /> <input type="radio" name="choix" value="2" />Sexe fminin<br /> <p><input type="button" value="Quel est votre choix ?" onclick="choixsexe(form)" /></p> </form> </body> </html> Dansleformulairenommform,quatrecasescochersontdclares.Notezquunnomdiffrentestutilispourles quatreboutons.Vientensuiteunboutonquidclencheonclicklafonctionreponse(). Cette fonction teste les cases cocher slectionnes. Pour avoir la bonne rponse, il faut que les cases 1, 2 et 4 soient coches. Le nom des cases cocher permet de les identifier, notamment la proprit checked du bouton par form.nom_de_la_case.checked.Danslaffirmative,lavaleurrenvoyeesttrue.Danslangative,lavaleurrenvoyeest false. Un test conditionnel vrifie par le "et logique" (&&) si les propositions 1, 2 et 4 sont vraies et la proposition 3 est fausse.Danscecas,unebotedalertesaffichepourannoncerlabonnerponse.Danslangative,uneautrebote dalerteinviterefaireletest.
- 9-
4.Lemenudroulant
Lalistedeslectionpermetdeproposerdiversesoptionssouslaformedunmenudroulant,danslequellutilisateur peutslectionneruneoption.Unefoisloptionslectionne,ellerestealorsaffiche. Lemenudroulantestcrparlabalise<select> ... </select>etleslmentsdelalisteparuneouplusieursbalise (s)<option> ... </option>. Proprit name length Description Indiquelenomdelalistedroulante. Indiquelenombredlmentsdelaliste. Indiquelerangpartirde0dellmentdelaliste quiatslectionnparlutilisateur. Indiquellmentdelalisteslectionnpardfaut.
selectedIndex
defaultselected Unexemplehabituel :
Unelistedroulantepermetdechoisirlenavigateur.LesoptionsproposessontInternetExplorer,Firefoxetautre. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function liste(form) { alert("Le navigateur " + (form.list.selectedIndex + 1)); } //]]> </script> </head> <body> Quel navigateur utilisez-vous ? <form name="form" action=""> <select name ="list"> <option value="1">Internet Explorer</option> <option value="2">Firefox</option> <option value="3">Autre</option>
</select> <input type="button" value="Rponse" onclick="liste(form)" /> </form> </body> </html> Dans le formulaire nomm form, on dclare une liste de slection par la balise <select> ... </select>. Entre ces balises,ondclarelesdiffrentesoptionsdelalisteparautantdebalises<option> ... </option>.Ensuiteunbouton dclenche la fonction liste(). Cette fonction fait ressortir loption slectionne. Le chemin complet de llment slectionnest form.list.selectedIndex.Commelindexcommence0,ilfautajouter1pourobtenirlerangexactde llment.
5.Leboutondenvoi
Leboutondenvoi,crparlabalise<input type="submit" />,permetdetransmettrelesdonnesduformulaireselon lesspcificationsdelattributaction="..."delabalise<form>. Proprit name Description Indiquelenomducontrle. Pardfaut,letexteduboutondenvoiestdtermin parvotrenavigateur,pourexempleSoumettrela requtesousInternetExploreretEnvoyersous Firefox.Ilestcependantpossibledepersonnaliserle textepardfautduboutonparlattribut value="valeur". Permetdedsactiverleboutondenvoi.
value
disabled
6.Leboutonderinitialisation
Il est utile de prvoir pour lutilisateur la possibilit dannuler tout encodage effectu dans le formulaire et ainsi de rinitialiser(reset)unformulairevierge. Cetteoprationestraliseparlabalise<input type="reset" />. Tout comme pour le bouton de soumission, il est possible de modifier le texte par dfaut du bouton par lattribut value="valeur". Lesautresattributssontidentiquesceuxduboutondenvoi.
ENI Editions - All rigths reserved - 11 -
7.Leboutondecommande
Leboutondenvoietleboutonderinitialisation,ontdesfonctionsbiendfiniesparlelangageHtmlouXhtml,cesont respectivementlesfonctionsconsistantenvoyerleformulaireselonlesinstructionsdfiniesparlattributactiondela balise<form>ourinitialiserunformulairevidedencodage. Ilfautcependantprvoirdesboutonsdontlafonctionpourraittredfinieparleconcepteurdelapage,gnralement grceauJavaScript. Pourcefairelabalise<input type="button" />(quipriseisolmentnefaitrien)estutilise.Lactionestalorsdfinie parungestionnairedvnement,gnralementdutypeonclick. Proprit name Description Aveclattributname="nom",vouspouvezattribuerun nomaubouton.CestgrcecenomqueJavaScript peutaccderaubouton. Permetdedfinirletextedubouton.Lattributvalue est,danslecasprsent,obligatoire.
value
Exemple Certainsutilisateurs(impatients)ontlafcheusemaniedecliquerplusieursfoissurleboutondenvoi.Cescriptcalmera leurardeur. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ var nombreclic=0; function compteclic(form) { nombreclic++; if (nombreclic>1) { alert("Vous avez dj cliqu ce bouton.\nLe formulaire est en cours de traitement."); } } //]]> </script> </head> <form name="form" action=""> <input type="button" value="Cliquez-moi !" onclick="compteclic(form)" /> </form> </body> </html> Auclicduboutondenvoi,lafonctioncompteclic()estappele(compteclic(form)). Cettefonctionincrmenteduneunit(nombreclic++)lavariablenombreclicquiatpralablementinitialise0(var nombreclic=0). Le script effectue alors un test (if) pour vrifier si la variable nombreclic est suprieure 1 (nombreclic>1).Danscecas,unebotedalertesaffiche(alert("Vous avez dj cliqu ce bouton)).
- 12 -
8.Linstructionthis
Linstruction this est un raccourci qui permet de rfrencer lobjet courant. Elle est souvent utilise lorsque du code JavaScriptestutilisauseindunebaliseHtml,cequipermetalorsdefairerfrencelobjetdfiniparcettebalise. Exemple <form name="form"> <input type="button" value="Cliquez-moi !" onclick="compteclic(this.form)"> </form> ou <form name="form"> <input type="button" value="Cliquez-moi !" onclick="compteclic(this)"> </form>
- 13 -
Manipulationdeschanesdecaractres
LobjetStringpermetdemanipulerdeschanesdecaractres.JavaScriptmetladispositionduprogrammeur,unesrie depropritsetdemthodesquipermettentdemanipulerlescaractresdelachane. LamanipulationdescaractresesttrsutilisedanslesapplicationsAJAX. Instruction Description Propritquirenvoieunentierindiquantlalongueurde lachanedecaractres. Mthodequipermetdaccderuncaractreisol dunechane. Mthodequirenvoielapositiondunechanepartielle partirdunepositiondtermine,encommenantau dbutdelachane,soitenposition0. Mthodequirenvoielapositiondunechanepartielle partirdunepositiondtermine,encommenantla findelachane,soitenpositionlength1. Mthodequirenvoieunechanepartiellesitueentre lapositionxetlapositiony1. Remplacexpary. Transformetoutesleslettresenminuscules. Transformetoutesleslettresenmajuscules.
length charAt()
indexOf()
lastIndexOf()
subString(x,y) replace(x,y) toLowerCase() toUpperCase()
1.Length()
Lapropritlengthretourneunentierquiindiquelenombredlmentsdansunechanedecaractres.Silachaneest vide(""),lenombrevautzro. Lasyntaxeestsimple: X = variable.length; X = ("chane de caractres").length; Exemple Cescriptvrifiequelescaractresencodsdansunezonedetextenedpassentpaslalimitefixehuitcaractres. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function valider(){ input = document.form.entree.value; if (input.length>8) { alert("Maximum 8 caractres !"); } } //]]> </script> </head>
- 1-
<body> <form name="form" action=""> Entrez du texte (maximum 8 caractres) :<br /> <input type="text" name="entree" size="25" value="" /> <p><input type="button" value="Tester" onclick="valider()" /></p> </form> </body> </html> La fonction valider() reprend dabord dans la variable input la valeur de la zone de texte (input = document.form.entree.value).Lalongueurdela chanedecaractresestfournieparlapropritlengthassociela variableinput (input.length).Grceuntest,onvrifiesicettelongueurdpasseles8caractres,danscecasune botedalerteestdclenche.
Ilfautnoterquelapropritlengthestvalablepourleschanesdecaractres,maisaussipourconnatrelalongueur oulenombredlments:
q
deformulaires.Combienyatildeformulairesdiffrentsdansledocument? deboutonsdoption.Combienyatildeboutonsradiodansleformulaire? decasescocher.Combienyatildecasescocherdansleformulaire? doptionsdansunmenudroulant.Combienyatildoptionsdansunebalise<select>? decadres,dancres,deliens, etc.
Exemple CescriptindiquelenombredlmentsdeformulaireprsentsdansledocumentXhtml. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body>
- 2-
<form name="form" action=""> Nom : <input type="text" size="25" /><br /> Prnom : <input type="text" size="25" /><br /> Adresse : <input type="text" size="25" /><br /> Code Postal : <input type="text" size="25" /><br /> Ville : <input type="text" size="25" /> </form> <script type="text/JavaScript"> //<![CDATA[ a="Ce document contient " + document.form.length + " lments de formulaires."; document.write(a); //]]> </script> </body> </html>
2.charAt()
La mthode chartAt() retourne la lettre ou le signe qui occupe une position dtermine dans une chane de caractres.Ilfautluifournirenparamtrelapositionsouhaite. Ilfautdabordnoterquelescaractressontcomptsdegauchedroiteetquelapositiondupremiercaractreest0. Lapositionduderniercaractreestdonclalongueurtotale(length)delachanedecaractremoins1 chane: JavaScript position:0123456789(derniercaractre=9soitlongueurtotale 1) Silapositionindiqueenparamtreestinfrieurezroouplusgrandequelalongueurmoins1,JavaScriptretourne unechanevide. LasyntaxedecharAt()est: resultat = chaine_dpart.charAt(x); oxestunentiercomprisentre0etlalongueurdelachaneanalysermoins1. Notezlesexemplessuivants: var chaine="Javascript"; resultat=chaine.charAt(0); resultat="Javascript".charAt(0); Larponseest"J"
- 3-
var str="Javascript"; var chr=str.charAt(9); var chr=charAt(str,9); Larponseest"t" Exemple Cescriptretournelalettreen5meposition. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function valider() { var x=document.form.texte.value; var a=x.charAt(4); alert("La 5me lettre est " +a); } //]]> </script> </head> <body> <form name="form" action=""> Entrez votre texte :<br /> <input type="text" name="texte" size="30" /><br /> <input type="button" value="Tester" onclick="valider()" /> </form> </body> </html> Le texte encod dans la zone de texte est sauvegard dans la variablex. La mthode charAt est applique cette dernire(x.charAt(4)).Notezleparamtre4quicorrespondenJavaScriptla5meposition.
3.indexOf()
CettemthodeindexOf()retournelapositiondunechanepartielle(lettreunique,groupedelettresoumot)dansune chanedecaractres.Cettechanepartielleesttransmiseenparamtre.
- 4-
Ilestpossible,maisfacultatifetpeuretenudanslapratique,detransmettrecommesecondparamtrelaposition partirdelaquellelarecherchedoitcommencer.Silnestpasspcifi,larecherchecommencelaposition0. Pourchercherlarobasedansunechanedecaractres,lasyntaxeest: variable="chane_de_caractres"; x=variable.indexOf("@"); Commentaires:

q
lapositionretourneestcelledelapremireoccurrencedelachanepartielledanslachanedecaractres. silachanepartiellenestpastrouvedanslachanedecaractresanalyser,lavaleurretourneestgale 1.
Exemple Cescripttestesiuneadresseemailcontientlesigne@.Ilnotifieraunmessagedalertesilesigne@nestpastrouv (soitvaleur1). <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function valider() { var a=document.form.email.value.indexOf("@"); if (a == -1) { alert("Adresse email invalide"); } else { alert("OK"); } } //]]> </script> </head> <body> <form name="form" action=""> Entrez votre adresse e-mail :<br /> <input type="text" name="email" size="30" /><br /> <input type="button" value="Tester" onclick="valider()" /> </form> </body> </html> Ladresse email est fournie par document.form.email.value. La mthode indexOf est applique avec le signe @ recherchertransmisenparamtre.Silarobaseattrouve,lamthoderetournesapositionquinepeuttrequun chiffrepositif.Silapositionretournevaut1,celaindiquequelarobasenapasttrouveetqueladresseemail nestdoncpasvalide.
- 5-
Cetestestassezsommaireetpeuttreaffin.Outrelarobase,uneadresseemailcontientgalementaumoinsun point. Le script suivant va tester la prsence du point et ne dclarer lemail valide que si les deux conditions sont remplies. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function valider() { var a=document.form.email.value.indexOf("@"); if (a == -1) { alert("Adresse email invalide"); } else { alert("OK"); } } //]]> </script> </head> <body> <form name="form" action=""> Entrez votre adresse e-mail :<br /> <input type="text" name="email" size="30" /><br /> <input type="button" value="Tester" onclick="valider()" /> </form> </body> </html> Danslavariablea,onobtientlapositiondusigne@ousonabsence(1).Idempourlavariablebquifournitlaposition dupointousonabsence(1).Labsencedelarobaseoudupointdtermineladresseemailnonvalide. Pourdesprocduresdevalidationdeformulairesplussophistiques,reportezvousaupointLesexpressionsdecette section.
4.LastIndexOf()
Cette mthode ressemble fortement indexOf() sauf que la recherche seffectue cette fois de droite gauche (en
- 6-
commenantdoncparlafin). Notonsquemmelorsquelarechercheseffectuepartirdelafindelachane,lapositionretourneestnumrote depuisledbutdelachaneaveclanumrotationcommenantzro. x=variable.lastIndexOf(chane_partielle); LesexemplessuivantsmontrentladiffrenceentreindexOf()etlastIndexOf(): Soitvariable="Javascript".Onrecherchelapositiondelalettrea. x = variable.indexOf(a)retournelaposition1. x=variable.lastIndexOf(a) retournelaposition3(pourleseconda). Cettemthodeestpeuutilisedanslapratique.
5.Substring()
Lamthodesubstring()seraparticulirementutilepourextrairedesdonnesdunechanedecaractres. Lasyntaxeestsubstring(x,y)oxdsignelapositiondupremiersigneextrairedanslachanedecaractresetyla position du premier signe ne devant plus tre extrait de la chane de caractres. Pour rappel, la numrotation commence0. Sixestgaly,substring()retourne(logiquement)unechanevide. Voiciquelquesexemples: Javascript |||||||||| 0123456789 str="Javascript"; str1=str.substring(0,4); str2=str.substring(6,9); str3=str.substring(7,10); Lesrsultatssont: str1="Java"; soit les positions 0,1, 2 et 3. str2="rip"; soit les positions 6, 7 et 8. str3="ipt" soit les positions 7, 8 et 9. Exemple Retrouverlesdeuxpremierschiffresduncodepostal. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function extraire() { dep = document.form.cp.value; dep = dep.substring(0,2); alert(dep); document.form.cp.value = ""; } //]]> </script> </head> <body> <form name="form" action=""> Code postal : <input type="text" name="cp" size="3" maxlength="5" /><br />
<p><input type="button" name="bouton" value="Tester" onclick="extraire()" /></p> </form> </body> </html> Lafonctionextraire()rcupreles5chiffresducodepostalencoddansla zonedetexte(document.form.cp.value). Lesdeuxpremierschiffressontextraits(dep.substring(0,2))etsontaffichsdansunebotedalerte. Lazonedetexteestrinitialise0pardocument.form.cp.value = "".
6.toLowerCase()
Cettemthodetransformetouslescaractres(majusculesouminuscules)dunechanedecaractresenminuscules. variable="chane de caractres"; x=variable.toLowerCase(); Exemple str="JavaScript"; str1=str.toLowerCase(); Lersultatsera: str1="javascript";
7.toUpperCase()
Cettemthodetransformelescaractres(majusculesouminuscules)dunechanedecaractresenmajuscules. variable="chane de caractres"; x=variable.toUpperCase(); Exemple str="JavaScript"; str2=str.toUpperCase(); Lersultatsera:
- 8-
str2="JAVASCRIPT"; Exemple <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function minuscules() { a = document.formulaire.entree.value.toLowerCase(); document.formulaire.sortie.value = a; } function majuscules() { a = document.formulaire.entree.value.toUpperCase(); document.formulaire.sortie.value = a; } //]]> </script> </head> <body> <form name="formulaire" action=""> Encodez des minuscules et des majuscules.<br /> <input name="entree" size="30" /><br /> <input type="button" value="Minuscules" onclick="minuscules()" /> <input type="button" value="Majuscules" onclick="majuscules()" /> <br /> <input name="sortie" size="30" /> </form> </body> </html> Pour la fonction minuscules(), la variable a repris le contenu de la zone de texte dentre (document.formulaire.entree.value)auquellamthodetoLowerCase()estapplique.Lersultatestrenvoydansla zonedetextedesortie(document.formulaire.sortie.value). Pour la fonction majuscules(), la variable a repris le contenu de la zone de texte dentre (document.formulaire.entree.value)auquellamthodetoUpperCase()estapplique.Lersultatestrenvoydansla zonedetextedesortie(document.formulaire.sortie.value).
8.replace()
- 9-
Lamthodereplace(x,y)remplacelescaractresxdanslachanedecaractrespary. Ilestimportantdenoterquelepremierparamtreestdfinientredeuxbarresobliques/. str="Je programme en PHP"; str=str.replace(/PHP/,"JavaScript") Lersultatest:"JeprogrammeenJavaScript". Ilfautnoterquelamthodereplace(x,y)nevaremplacerquelapremireoccurrencedescaractrescorrespondantx danslachanedecaractres. Pourremplacertouteslesoccurrencesdanslachanedecaractres,ilfautadopterlanotationsuivante: str=str.replace(/PHP/g,"JavaScript"); Exemple JavaScriptretourneunechanedecaractresinitiale"janvier,fvrier, mars,avril". Pourafficheruneprsentationplusconvivialeaveclesmmestermessparspar desespaces"janvier,fvrier,mars, avril",ilsuffitderemplacertoutesleschanesvirgulesparleschanesvirguleespace. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ chaine="janvier,fvrier,mars,avril,mai" chaine=chaine.replace(/,/g,", "); document.write(chaine); //]]> </script> </head> <body> </body> </html>
9.Lesexpressionsrgulires
Les mthodes de manipulation de caractres de lobjetString(JavaScript1.1)dcritesplushautsesontrapidement rvlestroplimites. On a introduit alors en JavaScript les expressions rgulires et lobjet RegExp (JavaScript 1.2) qui comportent des critresderechercheplussophistiqusetqui,enoutre,permettentdemodifierdefaondynamiquedeschanesde caractrespendantlexcutionduscript. Pourcela,ilvousfautdfiniruneinstancedelobjetRegExp.Cest ce quonappelleraune expressionrgulire.Les
lmentsdecetteexpressionrguliresontinclusdansdesbarresobliques.Lesdiffrentslmentssontsparspar unevirgule.
a.Dclaration
LacrationdunobjetRegExpsecrelaidedelasyntaxesuivante : expression = /critre/; Ilestgalementpossibledecreruntelobjetdemanireplusclassiquelaidedesonconstructeur : expression = new RegExp("critre"); Onpeutdeplus,prciserlecomportementdelexpressionrguliredefaonoptionnellepar:
q
gquiindiqueunerechercheglobaledetouteslesoccurrences. i pour une recherche non sensible la casse, soit indpendamment de la prsence de majuscule ou minusculedanslachane. giquicombinelesdeux.
expression = /critre/g; expression = new RegExp("critre","i");
b.Syntaxe
Les expressions rgulires, issues du langage de programmation Perl, en reprennent la concision mais aussi la complexit... Letableausuivantprsenteunelistedecomposantspourformeruneexpressionrgulire. Caractre xyz Description Trouvexyznimporteodanslachanedecaractres. Trouvexyzaudbutdelachanedecaractres. Trouvexyzlafindelachanedecaractres. Trouvexysuividezroouplusieursz. Trouvexysuivideunouplusieursz. Trouvexysuividezroouunseulz. Trouvexyzprcdduncaractrejoker. Trouvexyzprcddeplusieurscaractresjoker. Trouvexyzentantquemotdistinct. Trouveuniquementxyzlintrieurdemots. Trouvexouy. Trouvexouyouz. Trouvenimportequelcaractredeaz(alphabet ASCII,soitsanscaractresaccentus).
^xyz xyz$ xyz* xyz+ xyz? .xyz .+xyz \bxyz\b \Bxyz\B x|y [xyz] [a-z]
- 11 -
[0-9] x{n} x{n,} x{n,m}
Trouvenimportequelchiffrede09. Trouvexexactementnfois. Trouvexaumoinsnfois. Trouvexentrenetmfois.
Pourrechercheruncaractrefaisantpartiedescaractresspciaux,ilsuffitdelefaireprcderdunebarreoblique inverse. Caractrespcial \ . $ [ ] ( ) { } ^^ ? * ++ Onnotegalement: Caractre Description Trouveunsignedesautdepage. Trouveunsautdeligne. Trouveunretourchariot. Trouveunetabulationhorizontale. Trouveunetabulationverticale. Trouvetoutesortedespacevidedoncespace,retour chariot,tabulation,sautdeligne,sautdepage. Trouveuncaractrequelconquequinesoitpasun espacevide. Notation \\ \. \$ \[ \]  \{ \} \^ \? \* \+ \
\f \n \r \t \v \s \S
- 12 -
\w \W \d \D
Exemple1 Unnombre(entieroudcimal). var reg = /^\d+[.]?\d*$/;
q
Trouvetouslescaractresalphanumriques (minusculesoumajuscules)ainsiqueletiretde soulignement. Trouvetouslescaractresnonalphanumriques. Trouvetouslescaractresnumriquessoitchiffrede 09. Trouvetouslescaractresnonnumriques.
lesigne^signalequeloncommenceaudbutdelachanedecaractres. \d+pourplusieurscaractresnumriques. [.]?pourzroouunefoisunpointdcimal. \d*pourzroouplusieurscaractresnumriques. $pourfindunombre.
Exemple2 Login valide de 3 8 caractres (numriques ou alphanumriques, majuscules ou minuscules) sans caractres spciaux. var exp=new RegExp("^[a-zA-Z0-9]{3,8}$");
q
lesigne^signalequeloncommenceaudbutdelachanedecaractres. [a-zA-Z0-9]notequelescaractresalphanumriquespeuventtreenminusculedeaz,enmajusculesde AZetdeschiffresde09. {3,8}vrifiesilachanecomporteentre3et8caractres. $signalelafindelachanedecaractresetinterdittoutcaractressupplmentaires.
c.Mthodes
CertainesmthodesdelobjetStringpeuventutiliserlesexpressionsrgulires. Mthode match() Description Effectueunerecherchedecorrespondancedansune chane.Ellerenvoieuntableaudevaleursounullen casdchec. Effectueunerecherchedecorrespondancedansune chaneetremplacelasouschanecaptureparla chanederemplacement. Utiliseuneexpressionrationnelleouunechanepour diviserunechaneenuntableaudesouschanes.
replace()
split()
ParailleurslobjetRegExppossdecertainesmthodesquiluisontpropres.
- 13 -
Mthode
Description Effectueunerecherchedecorrespondancedansune chane.Ellerenvoieuntableaudevaleurs. Testelacorrespondancedunechane.Ellerenvoiela valeurtrueoufalse. Testelacorrespondancedunechane.Ellerenvoie lindexdelacapture,ou1encasdchec.
exec() test() search()

Exempleavecsplit()
Soitunelistedenomsdontlessparateursnesontpasuniformes:"abc,defhijklmnop".Isolonstouslesnoms decetteliste. Lexpressionrgulirevaprvoirdessparateurssousformedevirgule,pointvirgule,doublepoint,tiret,unoudes espaces.Cellecidevient: var expression=new RegExp("[,;:- ]+","g"); Lecodecompletdevient: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function extraire(form) { var test=document.form.exemple.value; var expression = new RegExp("[,:;-]+","g"); var tableau = test.split(expression); var affichage = "Nombre de noms trouvs = " + tableau.length + "\n"; for (var i=0;i<tableau.length;i++){ affichage=affichage + " ["+ tableau[i] + "]\n"; } alert(affichage); } //]]> </script> </head> <body> <form name="form" action=""> <input type="text" name="exemple" size="30" value="abc ,def ; hij klm - nop"/> <p><input type="button" value="Trouver les mots" onclick="extraire(form)" /></p> </form> </body> </html>
- 14 -
Exempleavecmatch() Continuonssurlemmethmeenutilisantlamthodematch()pourisolerlesmotsdunephrase. Lexpression rgulire doit reconnatre tous les caractres alphanumriques, en majuscules ou minuscules, de la chanedecaractres.Ilestprudentdeprvoirquelquescaractresaccentus. var expression=new RegExp("[a-zA-Z\-]+","gi"); Lecodecompletdevient: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function extraire(form) { var test=document.form.exemple.value; var expression=new RegExp("[a-zA-Z\-]+","gi"); var tableau=test.match(expression); var affichage="Nombre de noms trouvs = " + tableau.length + "\n"; for (var i=0;i<tableau.length;i++){ affichage=affichage + " ["+ tableau[i] + "]\n"; } alert(affichage); } //]]> </script> </head> <body> <form name="form" action=""> <input type="text" name="exemple" size="30" value="Loc est un garon bien lev"/> <p><input type="button" value="Trouver les mots" onclick="extraire(form)" /></p> </form> </body> </html>
- 15 -
Exempleavectest() Parmi les mthodes de lobjet RegExp, la mthode expression.test("chane") est assurment la plus utilise. Elle teste une chane de caractres selon les critres de lexpression rgulire. Cette mthode retourne true si la rechercheestfructueuseetfalsedanslecascontraire. Appliquonslalavrificationdelavaliditduneadresseemail. Uneadresseemailcomportetoujourslesigne@etunpointpourlenomduserveur. exp = new RegExp("@."); Cestunpeusimpliste.Entrelarobaseetlepoint,ildoityavoirquelquescaractres(aumoins2).Deplus,aprsle point,ildoitavoirdeux,troisouquatrecaractrespourlenomdedomaine. exp = new RegExp("@[a-z]{2,}[.][a-z]{2,4}$"); Lesigne$signifielafindelemail. Il y a bien entendu des caractres (ici en minuscules) avant larobase. La prsence du point, du tiret ou du soulignementestgalementprvue. exp = new RegExp("^[a-z0-9.-_]+@[a-z]{2,}[.][a-z]{2,4}$"); Lesigne^faitdmarrerletestdepuisledbutdelachane. Certainsontencoredesmajusculesdansleuradresse. exp = new RegExp("^[a-z0-9.-_]+@[a-z]{2,}[.][a-z]{2,4}$","i"); LquivalentdecetteexpressionrgulireenJavaScript"classique"auraitrclamdenombreuseslignesdecode. Lecodedevient: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function trouver() { var exp = new RegExp("^[a-z0-9.-_]+@[a-z]{2,}[.][a-z]{2,4}$","i"); var email = document.form.mail.value; if (exp.test(email)) { alert("Adresse valide"); }
- 16 -
else { alert("Non valide"); document.form.mail.value=""; } } //]]> </script> </head> <body> <form action="" name="form"> Adresse email valide <br /> <input type="text" name="mail" size="25" /><br /> <input type="button" value="test email" onclick="trouver()" /> </form> </body>
La vrification de la validit des adresses de courrier lectronique peut galement se raliser avec lexpression rguliresuivante,aussiefficacemaisprioriassezhermtique. RegExp("^\\w[\\w\-\_\.]*\\w@\\w[\\w\-\_\.]*\\w\\.\\w{2,4}$"); ^\\w uncaractreaudbutdelemail. [\\w\-\_\.]* ensuiteunesriedecaractresavecventuellementuntiret,unsoulignementetunpoint. \\w uncaractreseuldevantlarobase. @@ lesignearobase. \\w uncaractreseul. [\\w\-\_\.]* diverscaractresavecventuellementuntiret,unsoulignementetunpoint. \\w uncaractrepourfinircettesrie. \\.
- 17 -
unpoint. \\w{2,4} dedeuxquatrecaractrespourlenomdedomaine. $ findelachane. Uneexpressionrgulirepeutmmetreprvuepoursassurerquilnyapasdesignesinterditsdansladresse. var illegal = new RegExp("[,;: \]+","g"); On interdit ici les caractres les parenthses ouvrante et fermantes, la virgule, le pointvirgule, le double point, lespacedescaractresaccentusetlapostrophe. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function trouver() { var illegal = new RegExp("[,;: \]+","g"); var exp = new RegExp("^\\w[\\w\-\_\.]*\\w@\\w[\\w\-\_\.]*\\w\\.\\w{2,4} $"); var email = document.form.mail.value; if (illegal.test(email)==false) { if (exp.test(email)==true) { alert("Adresse valide"); } } else { alert("Recommencez"); document.form.mail.value=""; } } //]]> </script> </head> <body> <form action="" name="form"> Adresse email valide <br /> <input type="text" name="mail" size="25" /><br /> <input type="button" value="test email" onclick="trouver()" /> </form> </body> </html>
- 18 -
TableauxenJavaScript(objetArray)
LobjetArraypermetdelisterunesriedevaleursdansuneseulevariable.Lesdiffrentslmentssontidentifispar unnombreentierreprsentantleurspositions.Cenombreestappelunindex.LobjetArraypermetainsidecrerdes variablesditesindicesouindexes. Lindexcommence(commesouventenJavaScript)lavaleur0. Exemple semaine 0 1 2 3 4 5 6 Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche
Lavariableindexesemainecontientcommevaleurs,lesdiffrentsjoursdelasemaine. CesvariablesindexespeuventtreidentifiesenJavaScript(commedansdautreslangagesdeprogrammation)sous levocabledetableau. L es tableaux en JavaScript nont rien en commun avec les tableaux du langage Html ou Xhtml. ne pas confondre!
1.Ladfinitionduntableau
LacrationdunobjetdetypeArraysoprelaidedeloprateurnewsuivideArray(). var tableau = new Array(); Commentaires:
q
enJavaScript,ilfautdaborddfinirletableauavantdepouvoirenprcisersoncontenu. ilnestpasobligatoirededfinirlatailledutableaudanssadclaration(parexemplevar tableau = new Array (7).LatailledestableauxestpriseenchargedefaondynamiqueparJavaScript. ilestpossible,toutmoment,deconnatrelatailledun tableau, en invoquant la propritlength de lobjet correspondantcetableau.
Notretableauaveclesjoursdelasemaine,peutsedfinircommesuit: var semaine = new Array();
2.Linitialisationduntableau
Pourinitialiserletableau,lasyntaxesuivanteestutilise :
- 1-
tableau[i] = elmentoiestunnombrecomprisentre0etlalongueurdutableau1. Soitpourletableausemaine: var semaine = new Array(); semaine[0] = "Lundi"; semaine[1] = "Mardi"; semaine[2] = "Mercredi"; semaine[3] = "Jeudi"; semaine[4] = "Vendredi"; semaine[5] = "Samedi"; semaine[6] = "Dimanche"; Ladfinitionetlinitialisationpeuventsefairelorsdelammeinstructionsouslaforme : var semaine = new Array("Lundi" , "Mardi" , "Mercredi" , "Jeudi" , "Vendredi" , "Samedi" , "Dimanche");
3.Laccsauxdonnesdutableau
Onaccdeunlmentdutableau,parlenomdutableauetlenumrodelindice. Soit,semaine[0]pour"Lundi". Exemple Afficherleslmentsdutableausemaine. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ var semaine = new Array(); semaine[0] = "Lundi"; semaine[1] = "Mardi"; semaine[2] = "Mercredi"; semaine[3] = "Jeudi"; semaine[4] = "Vendredi"; semaine[5] = "Samedi"; semaine[6] = "Dimanche"; for (i=0; i<7; i++) { document.write(semaine[i] + "<br />"); } //]]> </script> </body> </html>
- 2-
Laffichagedesjoursdelasemaineestralisparunebouclefor(cfcechapitreConditionsetbouclesLabouclefor) aveciinitialis0etcommeconditioniinfrieur7. L orsque la longueur du tableau est inconnue, on peut utiliser la proprit length. Ainsi, linstruction for de lexempledeviendrait: for (i=0; i<semaine.length; i++);
4.Lestableauxassociatifs
Les tableaux associatifs sont des tableaux dont lindice est une chane de caractres (et non plus un nombre). La chaneestconsidrecommelindexpourlaccsauxlmentsdutableau. var moteur = new Array("Google","Yahoo","Voila"); moteur["Google"] = "http://www.google.fr"; moteur["Yahoo"]="http://www.yahoo.fr"; moteur["Voila"]="http://www.voila.fr"; Notezlaprsencedesguillemetsentrelescrochetsderigueurpourutiliserleschanesdecaractres. Pouraccderauxdonnesduntableauassociatif: moteur["Google"] ou moteur[1]; Exemple <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ var moteur = new Array("Google","Yahoo","Voila"); moteur["Google"] = "http://www.google.fr"; moteur["Yahoo"]="http://www.yahoo.fr"; moteur["Voila"]="http://www.voila.fr"; document.write(moteur["Google"] + "<br />"); document.write(moteur[2]); //]]> </script> </body> </html>
- 3-
5.Lesmthodesspcifiquesauxtableaux
LobjetArray()prsentedenombreusesmthodes.Envoiciquelquesunes. Elment Description Assembledeuxouplusieurstableauxpournenfaire quunseul.Cettemthoderclameenargumentle tableau(ouplusieurs)quiestrajoutlafindu tableaurfrenc. Regroupetousleslmentsdutableaudansune seulechanedecaractres.Lesdiffrentslments sontsparsparuncaractresparateurspcifien argument.Pardfaut,cesparateurestunevirgule. Supprimeledernierlmentdutableauetretournesa valeur. Inverselordredeslments(maisnelestriepas). Supprimeledernierlmentdutableauetretournesa valeur. Creunnouveautableaupartirdunepartiedun tableauexistant.Scritslice[dbut,fin]. Trieleslmentsparordrealphabtique(condition quilssoientdemmenature).
concat()
join()
pop() reverse() shift() slice() sort()
a.Trialphabtiqueduntableau
Onappliquelamthodesort()autableausemaine. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ var semaine = new Array();
- 4-
semaine[0] = "Lundi"; semaine[1] = "Mardi"; semaine[2] = "Mercredi"; semaine[3] = "Jeudi"; semaine[4] = "Vendredi"; semaine[5] = "Samedi"; semaine[6] = "Dimanche"; semaine.sort(); for (i=0; i<7; i++) { document.write(semaine[i] + "<br />"); } //]]> </script> </body> </html>
b.Assemblagedetableaux
Soitdeuxtableaux:semestre1etsemestre2.Cesdeuxtableauxsontregroupsdansunnouveautableauanneepar lamthodeconcat()<$I[]>. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ var semestre1 = new Array(); semestre1[0] = "Janvier"; semestre1[1] = "Fvrier"; semestre1[2] = "Mars"; semestre1[3] = "Avril"; semestre1[4] = "Mai"; semestre1[5] = "Juin"; var semestre2 = new Array(); semestre2[0] = "Juillet"; semestre2[1] = "Aot"; semestre2[2] = "Septembre"; semestre2[3] = "Octobre"; semestre2[4] = "Novembre"; semestre2[5] = "Dcembre"; var annee= new Array();
- 5-
annee = semestre1.concat(semestre2); for (i=0; i<annee.length; i++){ document.write(annee[i] + " - "); } //]]> </script> </body> </html>
c.Regrouperenunechane
Aveclamthodejoin(),regrouponsletableausemainedansunechanedecaractres. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ var semaine = new Array(); semaine[0] = "Lundi"; semaine[1] = "Mardi"; semaine[2] = "Mercredi"; semaine[3] = "Jeudi"; semaine[4] = "Vendredi"; semaine[5] = "Samedi"; semaine[6] = "Dimanche"; var join = semaine.join(); document.write(join); //]]> </script> </body> </html>
- 6-
Pardfaut,lesparateurestunevirgule.Unautresparateurpeuttrespcifienargumentdelamthodejoin(). Soitparexemple,join("")pouruntiretdesparation.
d.Partieduntableau
Utilisationdelamthodeslice()pourcrerunnouveautableaucomportantlesmoisduprintemps. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ var annee = new Array(); annee[0] = "Janvier"; annee[1] = "Fvrier"; annee[2] = "Mars"; annee[3] = "Avril"; annee[4] = "Mai"; annee[5] = "Juin"; annee[6] = "Juillet"; annee[7] = "Aot"; annee[8] = "Septembre"; annee[9] = "Octobre"; annee[10] = "Novembre"; annee[11] = "Dcembre"; var printemps = new Array(); printemps = annee.slice(3,6); for (i=0; i<printemps.length; i++){ document.write(printemps[i] + "<br /> "); } //]]> </script> </body> </html>
- 7-
- 8-
QuelquesautresobjetsJavaScript
NousnavonsreprisjusquprsentqueleslmentsessentielsduJavaScript.Ilexistenanmoinsdautresobjets,quilestdifficilede nepasprsentermaisdontltudeestmoinsdtaille.
1.LobjetDate
LobjetDatepermetdegrerlesinformationsrelativesautemps,soitladateetlheure.
a.newDate()
LobjetDateenJavaScriptprsenteuneparticularitdanslamesureoilfautdabordlecrer,avantdepouvoirlutiliser. Eneffet,avantdepouvoirappliquerlesmultiplesfonctionsddieslagestiondutemps,ilfautcreruneinstancedeladateet lheuredelordinateurdelutilisateur. CetteinstanceestcreparnewDate(). variable=new Date(); Ainsivariableseraunechanedecaractresauformat: Fri Feb 23 10:42:23 UTC+0100 2007 Soitvendredi(FripourFriday)fvrier(FebpourFebruary)23pourle23mejourdumois10:42:23pour10heures42minuteset 23secondeset2007pourlanne.CetteheureatnotelheureUTC(tempsuniverselcoordonn)+1heure. Commentaires:
q
ladateetlheureenJavaScriptcommencentau1erjanvier1970.Touterfrenceunedateantrieuredonneunrsultat alatoire. lunitpourlecalculinternedutempsestlemillimedeseconde.
b.Mthodes
getYear() Retourne en principe les deux derniers chiffres de lanne dans lobjet Date. Microsoft Internet Explorer retourne cependant les quatrechiffressoitici2007.Desproblmesdecompatibilitsontdoncpossibles. objetdate=new Date(); annee=objetdate.getYear(); getFullYear() Retournelesquatrechiffresdelanne.Lacompatibilitesttotale. objetdate=new Date(); annee=objetdate.getFullYear(); getMonth() Retournelemoissousformedunentiercomprisentre0et11(0pourjanvier,1pourfvrier,2pourmars,etc.). objetdate=new Date(); mois=objetdate.getMonth(); getDate(); Retournelejourdumoissousformedunentiercomprisentre1et31. objetdate=new Date();
- 1-
jour=objetdate.getDate(); getDay(); Retournelejourdelasemainesousformedunentiercomprisentre0et6(0pourdimanche,1pourlundi,2pourmardi,etc.). objetdate=new Date(); semaine= objetdate.getDay(); getHours(); Retournelheuresousformedunentiercomprisentre0et23. objetdate=new Date(); heure=objetdate.getHours(); getMinutes(); Retournelesminutessousformedunentiercomprisentre0et59. objetdate=new Date(); minute=objetdate.getMinutes(); getSeconds(); Retournelessecondessousformedunentiercomprisentre0et59. objetdate=new Date(); seconde=objetdate.getSeconds(); IlexistedenombreusesautresmthodesmaisellesnentrentpasdanslecasdecetouvrageetdenotretudedeJavaScript.
c.Exemple
Afficherladateetlheuredefaonusuelleenfranais. RemplacezlenumrodumoisretournaveclamthodegetMonth()parsonnom(soit4paravril). Pourcefaire,nousallonscreruntableauindic(Array)enprenantsoindecommencerlindice0pourlemoisdejanvier. var tableau_mois = Array(); tableau_mois[0] = "janvier"; tableau_mois[1] = "fvrier"; tableau_mois[2] = "mars"; tableau_mois[3] = "avril"; tableau_mois[4] = "mai"; tableau_mois[5] = "juin"; tableau_mois[6] = "juillet"; tableau_mois[7] = "aot"; tableau_mois[8] = "septembre"; tableau_mois[9] = "octobre"; tableau_mois[10] = "novembre"; tableau_mois[11] = "dcembre"; Pourafficherlejourdelasemaineentouteslettres,nousprocdonsdelammefaonparuntableau. var tableau_jours = Array(); tableau_jours[0] = "dimanche"; tableau_jours[1] = "lundi"; tableau_jours[2] = "mardi"; tableau_jours[3] = "mercredi"; tableau_jours[4] = "jeudi"; tableau_jours[5] = "vendredi"; tableau_jours[6] = "samedi"; Onsouhaiteharmoniserlaffichagedesheures,minutesetsecondesavecdeuxchiffres.Ainsiaulieudafficher7h,cesera07h. Cettemanipulationpeutseraliseravecuntestconditionnel.Silechiffreestinfrieur10,onajouteraun0.Sinon,ongardele chiffre. Cetestpeutscrire: if (if (min<10) {
- 2-
min="0" + min; } else { min="" + min; } Cequipeutsenoterdefaonabrge(voirdanscechapitreConditionsetbouclesLesconditionsif...else): min = ((min<10) ? "0" : "") + min; Lescriptdevient: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ var objetdate= new Date(); var mois=objetdate.getMonth(); var tableau_mois = Array(); tableau_mois[0] = "janvier"; tableau_mois[1] = "fvrier"; tableau_mois[2] = "mars"; tableau_mois[3] = "avril"; tableau_mois[4] = "mai"; tableau_mois[5] = "juin"; tableau_mois[6] = "juillet"; tableau_mois[7] = "aot"; tableau_mois[8] = "septembre"; tableau_mois[9] = "octobre"; tableau_mois[10] = "novembre"; tableau_mois[11] = "dcembre"; var nommois=tableau_mois[mois]; var jour=objetdate.getDay(); var tableau_jours = Array(); tableau_jours[0] = "dimanche"; tableau_jours[1] = "lundi"; tableau_jours[2] = "mardi"; tableau_jours[3] = "mercredi"; tableau_jours[4] = "jeudi"; tableau_jours[5] = "vendredi"; tableau_jours[6] = "samedi"; var nomjour=tableau_jours[jour]; document.write("Nous sommes le "); document.write(nomjour + " "); document.write(objetdate.getDate()); document.write(" "); document.write(nommois); document.write(" "); document.write(objetdate.getFullYear()); document.write(" "); heure= objetdate.getHours(); heure = ((heure<10) ? "0" : "") + heure; document.write(heure + " heure "); min=objetdate.getMinutes(); min = ((min<10) ? "0" : "") + min; document.write(min + " minutes "); sec=objetdate.getSeconds(); sec = ((sec<10) ? "0" : "") + sec; document.write(sec + " secondes "); //]]> </script> </body> </html>
- 3-
2.LobjetMath
AJAXsefocalisesurtoutsurlamanipulationdeschanesdecaractresmaisilnestpasexcluquilfailleeffectuerdesoprationssur des chiffres. Lobjet Math met la disposition du programmeur JavaScript une panoplie de mthodes permettant deffectuer des calculscomplexes. Lasyntaxeest: x = Math.mthode(paramtre); LesmthodeslespluscourantesdelobjetMathsont: abs(y) Lamthodeabs(y)renvoielavaleurabsolue(valeurpositive)dey.Ellesupprime,enquelquesorte,lesignengatifdunnombre. Y = -4; x = math.abs(y); a comme rsultat 4. ceil(y) Lamthodeceil(y)renvoielentiersuprieurougaly. Attention!Cettefonctionnarronditpaslenombre.Commelillustrelexemplesuivant,siy=1.01,lavaleurdexvaut2. y=1.01; x=Math.ceil(y); a comme rsultat 2. floor(y) Lamthodefloor(y)renvoielentierinfrieurougaly. Attention!Cettefonctionnarronditpaslenombre.Siy=1.99,lavaleurdexvaut1. y=1.99; x=Math.floor(y); a comme rsultat 1. round(y) Lamthoderound(y)arronditlenombrelentierleplusproche. y=20.355; x=Math.round(y); a comme rsultat 20. Attention!Certainscalculsrclamentuneplusgrandeprcision.Ainsi,pouravoirdeuxdcimalesaprslavirgule,laformulesuivante estutilise: x=Math.round(y*100))/100;etdanscecas,xvaut20.36. max(y,z) Lamthodemax(y,z)renvoieleplusgranddesdeuxnombresyetz.
- 4-
y=20; z=10; x=Math.max(y,z); a comme rsultat 20. min(y,z) Lamthodemin(y,z)renvoielepluspetitdes2nombresyetz. y=20; z=10; x=Math.min(y,z); a comme rsultat x=10. pow(y,z) Lamthodepow()calculelavaleurdunnombreylapuissancez. y=2; z=8 x=Math.pow(y,z); a comme rsultat 2 8 soit 256. random() Lamthoderandom()renvoielavaleurdunnombrealatoirechoisientre0et1. Cenombrealatoirepourraittre0.042105102268759464. sqrt(y) Lamthodesqrt(y)renvoielaracinecarredey. y=25; x=Math.sqrt(y); a comme rsultat 5. parseFloat(var) Cettefonctionconvertitunechaneenunnombrevirguleflottante.Particulirementutilepourtransformerlecontenudunezonede texte(quiestconsidrcommeunechanedecaractres)enunnombreenvueduntraitementdecalcul. str=-.12345; x=parseFloat(str); aura comme rsultat le nombre -.12345. Attention!LersultatrisquedtresurprenantsiJavaScriptrencontreautrechosedanslachanequedeschiffres,lessignes+et, le point dcimal ou un exposant. Sil trouve un caractre "tranger", la fonction ne prend en compte que les caractres avant le caractre"tranger". Silepremiercaractrenestpasuncaractreadmis,xestgal0ouNaN(NotaNumber). str= 5.50; x=parseFloat(str); a comme rsultat NaN. parseInt(var) Retournelapartieentiredunnombreavecunevirgule. str=1.2345; x=parseInt(str); a comme rsultat 1. eval(var) Cette fonction value une chane de caractres sous forme de valeur numrique. Dans la chane peuvent tre stockes des oprationsnumriques,desoprationsdecomparaison,desinstructionsetmmedesfonctions. Str=5 + 10; x=eval(str); a comme rsultat 15. Exemple laboronsunconvertisseurFFversleuro. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" />
- 5-
<meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ var montant_francs; var montant_euro; function convertir() { montant_francs = document.form.entree.value; montant_francs=montant_francs.replace(/,/,"."); montant=parseFloat(montant_francs); montant_euro=montant/6.55957; montant_euro=(Math.round(montant_euro*100))/100; document.form.sortie.value=montant_euro; if (isNaN(montant_francs)) { alert("Entrez un nombre"); document.form.entree.value = ""; document.form.sortie.value = ""; } } //]]> </script> </head> <body> <form name="form" action=""> <input type="text" size="10" name="entree" /> FF <input type="button" value="Convertir" onclick="convertir()" /> <input type="text" size="10" name="sortie" /> _ </form> </body> </html> Pourcommencer,lesvariablesmontant_francsetmontant_eurosontdfinies. Dansmontant_francs,lavaleurdelazonedetextedentreestrcupresoitlavaleurdedocument.form.entree.value. Levisiteurrisquedencoderlemontantavecunevirgule.Lafonctionreplace()estutilisepourconvertirlventuellevirguleenpoint (voircechapitreManipulationdeschanesdescaractresreplace()). Pourtransformerennombrelachanedecaractrescontenuedanslavariableformule,lamthodeparseFloat()prsenteciavant estutilise. Cenombreestdivispar6.55957,puisestarrondit(Math.round()). Enfinsilutilisateurnapasencodunnombre(NaN),unebotedalerteapparatetleszonesdetextesontrinitialises.
3.Lobjetnavigator
Lobjetnavigatorestparticulirementutilepouradapterlesmodalitsdexcutiondesscriptslorsdesdivergencesdimplmentation decertainesinstructionsJavaScriptselonlesnavigateursouselonlesversionsdunmmenavigateur.
a.Proprits
LobjetnavigatordeJavaScriptfournitunensembledinformationssurlenvironnementdetravailduvisiteurettoutparticulirement surlenavigateurquilutilise. Passonsenrevuequelquesunesdesespropritsetmthodes. Proprit Description Retournele"surnom"(CodeName)dunavigateur.
- 6-
appCodeName
Historiquement,cettepropritatinventepar Netscape :eneffetlenavigateurNetscapeportait(dj)le surnomde"Mozilla". Retournelenomdunavigateur. Retournelaversiondunavigateur. Spcifielalangueutiliseparlenavigateur.Cetteproprit nexistepassousInternetExplorer. Spcifielalangueutiliseparlenavigateur.Cetteproprit nestvalablequesousInternetExplorer. Retournelesystmedexploitationdunavigateurde linternaute. Spcifiedesinformationsrelativesaunavigateur(useragent signifienavigateur).
appName appVersion language userLanguage platform userAgent
Appliqueslamachinedelauteur,cespropritsfournissentlesinformationssuivantes: navigator.appCodeName
InternetExplorer6et7 Firefox
Mozilla(tonnantnon?)
Mozilla
CommeInternetExplorer,Netscape,Mozilla,OperaouFirefoxrenvoientlammevaleur,cettepropritnestpastrsutiledansla pratique. navigator.appName
navigator.appVersion
MicrosoftInternetExplorer Netscape
InternetExplorer7 InternetExplorer6 Firefox
4.0(compatibleMSIE7.0WindowsNT5.1.NET CLR1.1.4322.NETCLR2.0.50727.NETCLR 3.0.04506.30) 4.0(compatibleMSIE6.0WindowsNT5.1.NET CLR1.1.4322.NETCLR2.0.50727.NETCLR 3.0.04506.30) 5.0(WindowsfrFR)
Les informations, autant pour Internet Explorer que pour Firefox sont assez neutres. Seul la mention MSIE (MicroSoft Internet Explorer)permetvraimentdidentifierInternetExplorer. navigator.language
navigator.userLanguage
undefined frFR
navigator.platform
fr undefined
navigator.userAgent
Win32 Win32
InternetExplorer7 InternetExplorer6
Mozilla/4.0(compatibleMSIE7.0WindowsNT 5.1.NETCLR1.1.4322.NETCLR2.0.50727 .NETCLR3.0.04506.30) Mozilla/4.0(compatibleMSIE6.0WindowsNT 5.1.NETCLR1.1.4322.NETCLR2.0.50727 .NETCLR3.0.04506.30)

Firefox2
Mozilla/5.0(WindowsUWindowsNT5.1fr rv:1.8.1.1)Gecko/20061204Firefox/2.0.0.1
b.DistinguerInternetExplorerdeFirefox
LaproprituserAgentpermetdidentifierlenomdunavigateur.GrcelamthodeindexOf(cechapitreManipulationdeschanes decaractresindexOf()),laprsencedelachanepartielle"MSIE"ou"Firefox"vatrevrifie. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ if (navigator.userAgent.indexOf("MSIE") != -1) { navigateur = "Internet Explorer"; } else { if (navigator.userAgent.indexOf("Firefox") != -1) { navigateur = "Firefox"; } else { navigateur ="Autre"; } } document.write("Votre navigateur est " + navigateur); //]]> </script> </body> </html> VoicilersultatsousFirefox :
c.IdentifierlesversionsdInternetExplorer
Nousutilisonslesinformationstransmisesparnavigator.userAgent.
InternetExplorer7 InternetExplorer6 InternetExplorer5.5 InternetExplorer5
Mozilla/4.0(compatibleMSIE7.0WindowsNT 5.1.NET) Mozilla/4.0(compatibleMSIE6.0WindowsNT 5.1SV1) Mozilla/4.0(compatibleMSIE5.5WindowsNT 5.1SV1) Mozilla/4.0(compatibleMSIE5.01WindowsNT 5.0SV1)
IlestvidentquenousdevonsrechercherlaprsencedeschanespartiellesMSIE 7,MSIE6,MSIE5.5etMSIE5.0afindidentifier lesversionsdInternetExplorer. Lescriptdevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- 8-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ if (navigator.userAgent.indexOf("MSIE 7") != -1) { document.write("<h2> Internet Explorer 7</h2>"); } if (navigator.userAgent.indexOf("MSIE 6") != -1) { document.write("<h2> Internet Explorer 6</h2>"); } if (navigator.userAgent.indexOf("MSIE 5.5") != -1) { document.write("<h2> Internet Explorer 5.5</h2>"); } if (navigator.userAgent.indexOf("MSIE 5.0") != -1) { document.write("<h2> Internet Explorer 5</h2>"); } //]]> </script> </body> </html> EtlersultatsousInternetExplorer6:
4.Lobjetwindow
Certainesmthodesdelobjetwindownevoussontpasinconnues.Ainsilesmthodesalert(),confirm(),prompt()etsetTimeoutont djtabordesdanscechapitreFonctionsetmthodes.
a.Lafentrepopup
Les mthodes open() et close() de lobjet window permettent douvrir (open) ou de fermer (close) une nouvelle fentre du navigateur.Ilseraenoutrepossiblededfinirdenombreusescaractristiquesdecettenouvellefentre. Lusagedesnouvellesfentres,appelesaussifentrespopup,estsouventutilepourafficherdesinformationscomplmentaires sans surcharger la page (ou la fentre) de dpart. Elles comportent cependant deux dsagrments notoires. En effet, si le concepteurnapasprvuunmoyendefermercellesci,unnombreimportantdefentrespopuppeutapparatre.Enoutre,ilfaut admettrequelatoileest"pollue"parcesfentrespopup,leplussouventutilisesdesfinspublicitaires.Nousvousconseillons debienfermerlesfentrespopupetlesutiliseravecmodrationoudiscernement. Lasyntaxedeopen()est: window.open("URL","nom_fentre","caractristiques_fentre"); Commentaires:
q
lamentiondewindowestfacultativecarwindowtantlobjetaveclaplushautepriorit,celuiciestreprispardfautparle JavaScript. URL est ladresse de la page que lon dsire afficher dans la nouvelle fentre. Si on ne dsire pas afficher un fichier htm existant,onindiquerasimplement" ".
- 9-
nom_fentredsignelenomdelanouvellefentre :cettevariablepeuttrerepriseenrfrencedanslecodeJavaScript. caractrstiques_fentreestuneliste(voirciaprs)decertainesoudetouteslescaractristiquesdelafentre.Cellesci se notent la suite lune de lautre, spares par des virgules, sans retour la ligne. Ces caractristiques doivent tre imprativementcritessuruneseuleetmmeligne.
P ourlemoteurJavaScript,lescaractristiquesdelafentredoiventtreimprativementcritessuruneseuleetmmeligne. Cescaractristiquessont: width=x Largeurdelanouvellefentreenpixels. height=x Hauteurdelanouvellefentreenpixels.Lavaleurminimaleestde100pixels.
toolbar=yes ou no Affichagedelabarredoutils.Lavaleurpardfautestyes
location=yes ou no Affichagedelabarredadresse.
directories=yes ou no Affichagedesboutonsdaccsrapide(barredeliens).PasdaffichagesousIE7.
- 10 -
status=yes ou no Affichagedelabarredtat.
menubar=yes ou no Affichagedelabarredemenus.
scrollbars=yes ou no Affichagedesbarresdedfilement.
resizable=yes ou no Redimensionnementdelafentre. fullscreen=yes ou no Affichagedelanouvellefentreenpleincran.InternetExploreruniquement. top=x Positionenpixelsparrapportaubordsuprieurdelcran. left=x Positionenpixelsparrapportaubordgauchedelcran.
- 11 -
Lanotation1ou0laplacedeyesounoestgalementpossible. Lasyntaxedeclose()estlasuivante: window.close("nom_de_la_fentre")owindowestfacultatif. Danslapratique,pourvitertouteconfusionpossible,leraccourciselfestutilispourindiquerlafentreencours. window.self.close(); Lamthodeclose()entredanslecadreduconceptdescuritdeJavaScript.Celasignifiequunefentre,partirdumomento elle possde un historique (parce que lutilisateur a dj appel plusieurs pages), ne se laisse plus fermer sans demande de confirmationdelapartdunavigateur.Ilnestpaspossibledempchercettedemande.
Exemple1 Pluttquedechargerunfichierhtm,ilestpossibledcrireenJavaScriptdanslanouvellefentre. <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function popup() { nouvelle = open(, , width=200, height=100, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no); nouvelle.document.write(<html><head><title>Popup 1</title></head> <body bgcolor=\"#99ccff\"><h2>JavaScript</h2></body></html>); } //]]> </script> </head> <body> <form action=""> <input type ="button" value="Ouvrir la fentre" onclick="popup()" /> </form> </body> </html> Pourrappel,lescaractristiquesdelanouvellefentreetlecodedelinstructionwritedoiventtreimprativementcritssurune seuleetmmelignedanslecode.
Exemple2 Fermerunenouvellefentreavecunbouton.
- 12 -
Lamthodeclose()requiertlenomdelafentrecommeargument.Pourvitertouteconfusionpossible,onutiliseselfpourindiquer lafentreencours. Voicilefichierquilancelafentrepopup: <!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" xml:lang="fr" lang="fr"> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function popup() { open(popup.htm,nouvelle, width=200, height=100, toolbar=no, locati on=no, directories=no, status=no, menubar=no, scrollbars=no, resizable= no); } //]]> </script> </head> <body> <form action=""> <input type ="button" value="Ouvrir la fentre" onclick="popup()" /> </form> </body> </html> Pour rappel, les caractristiques de la nouvelle fentre doivent tre imprativement crites sur une seule et mme ligne dans le code. Lefichierpopup.htmdelanouvellefentre: <!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" xml:lang="fr" lang="fr"> <head> <title>Popup</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body style="text-align: center;"> Nouvelle fentre <form action=""> <input type="button" value= "Fermer" onclick="self.close()" /> </form> </body> </html>
b.Lazoneutiledunavigateur
LazonedisponiblepourlapagedanslafentredunavigateurpeuttredtermineparlespropritsinnerWidthetinnerHeight delobjetwindowpourFirefoxetautresnavigateursdelafamilleMozilla.
- 13 -
innerHeight Hauteurutiledelafentre(horscadreetbarrededfilement).Enpixels. innerWidth Largeurutiledelafentre(horscadreetbarrededfilement).Enpixels. Internet Explorer ne reconnat pas ces proprits mais ces dimensions sont disponibles par les proprits body.clientHeight et body.clientWidthdelobjetdocument. Voiciunscriptcompatiblepourlesdeuxversionsdunavigateur : <html> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <script type="text/JavaScript"> //<![CDATA[ var largeur; var hauteur; if (window.innerWidth) { largeur = window.innerWidth; } else { largeur = document.body.clientWidth; } if (window.innerHeight) { hauteur = window.innerHeight; } else { hauteur = document.body.clientHeight; } document.write("La largeur disponible est de " + largeur +" pixels.<br />"); document.write("La hauteur disponible est de " + hauteur +" pixels."); //]]> </script> </body> </html> Commentaires
q
Aprsavoirdfinilesvariableslargeurethauteur,silapropritwindow.innerWidthestreconnuedanscecasnousavons faireFirefox.Ceciestuneautrefaondetesterlenavigateurdelutilisateur.Pluttquedepasserparlesinformations delobjetnavigatorvuesaupointQuelquesautresobjetsJavaScriptLobjetNavigatordecechapitre,ontestesimplement silobjetoulapropritexistepourgagnerdeslignesdecode.!mbo, Pour tre tout fait complet, on signale dans les sites spcialiss dans la compatibilit des navigateurs (par exemple, www.quirksmode.org),quedanslecasdunfichierHtmlouXhtmlavecunedclarationdeDTD,ilestncessaire,danslecas dInternet Explorer, de passer par : document.documentElement.clientWidth et document.documentElement.clientHeight.Ceci illustre bien que dans certaines situations, JavaScript peut se rvler hautementincompatible.
CapturedcranpourFirefox :
CapturedcranpourInternetExplorer:
- 14 -
- 15 -
LeXML
Dans le terme AJAX, le X signifie XML (Asynchronous JavaScript and XML). Ainsi, il convient dintroduire ou de rappeler quelqueslmentsdecelangage. LeXMLestunmtalangage,soitunlangagepourcriredautreslangages. Mmesilnyaquepeudechancesquevousconceviezunjourvotreproprelangage,leXMLestunevritablervolution danslepanoramadelapublicationsurleWeb.Ilapparataujourdhuicommeincontournablecarilestdjlabasede toute une srie de nouveaux langages qui sont, ou qui seront, utiliss dans la conception des pages Web. Ces nouveaux langages gnrs partir du XML en reprennent lesprit, les rgles et la syntaxe que vous dcouvrirez ci aprs. AutoutdbutdelinformatiqueetdelInternet,existaitdjleSGML(StandardGeneralizedMarkupLanguage),unlangage normalispourlaconceptiondelangagesdebalises.Cettenormeinternationale(ISO8879)acommeobjectifdedcrire lastructureetlecontenudediffrentstypesdedocumentslectroniques.LeSGMLalaparticularitdtretrsconcis maisaussitrsabstrait.Enconsquence,ilnestquetrsdifficilementabordableparlesnoninitis.Leslangagesquien dcoulent sont pourtant assez nombreux et vous ne pouvez pas ignorer un de ses fils qui est un langage de balises utilispourlapublicationsurleWeb:leHTML(HyperTextMarkupLanguage). LeHtmlayantmalvieilliaufildesversions,leW3CConsortium,quirgitlesrglesdelapublicationsurleWeb,adcid derepartirdunefeuilleblancheenrevenantenquelquessortesauxsources.DoleXML(eXtensibleMarkupLanguage) qui prsente de fortes similitudes avec le SGML dont il est issu. Ainsi, le XML peut tre considr comme un SGML simplifiouunSGMLquiseraitplusabordable. LeXML(eXtensibleMarkupLanguage)estdoncunlangagedebalisescommeleHtmlmaisilestextensibleouautrement dit,volutif.EnXML,lesbalisesnesontpasprdfinies.Cestvousdedfinirvospropresbalises. Si les navigateurs affichent sans problme les balises prdfinies du Html comme <h1>, <br> ou autres <table>, que doiventilsfaireavecvosbalisesdustyle<membre>ou<nouveau>?LeXMLacommevocationdedcriredelinformation et non pas de lafficher. Ainsi le XML pourtant cr en 1999, est rest durant quelques annes un concept plutt thoriquefautedenavigateurscapabledafficherceformat.Avecledveloppementdenouvellestechniquescommele XSL (Extended Stylesheet Language ou langage de feuilles de style extensible), il est devenu maintenant possible de percevoirconcrtementlesnormespotentialitsdecenouveaulangage. E n conclusion, si le Html a t conu pour afficher de linformation, le XML a t cr pour structurer de linformation.luiseul,ilnestcensrienfairedautre!
VoiciunpremierexempledeXML. <?xml version="1.0"?> <demoxml> <message>Voici du XML</message> </demoxml> CequiaffichdanslenavigateurInternetExplorerdonnelersultatsuivant.
Il ny a pas de quoi se rjouir sur le plan esthtique... Mais le XML nest finalement que de linformation structure, encodeentredesbalises.IlfaudradautreslmentscommeunedclarationdefeuillesdestyleCSSouunfichierXSL, pourquelenavigateurpuisse"comprendre"vosbalisesetaffichercefichiersousuneformeplusconviviale. Si le Html a rgn en matre sur le Web durant la dernire dcennie du 20me sicle (1990 2000), le XML est sans
aucun doute possible, le standard omniprsent pour tout ce qui concerne la structuration et lchange de donnes durantlespremiresdcenniesdu21mesicle.
- 2-
LeXML,leHtmletleXhtml
Lorsque les techniques de publication sur le Web sont abordes, une comparaison entre le Html, le Xhtml et le XML simpose.Aucontrairedecequiadjtcritparailleurs,leXMLnestpaslesuccesseurduHtml.LeXML,leXhtmletle Htmlsontdeslangagesdistincts!
1.Uneseulesimilitude:leSGML
Le seul point commun entre le Html et le XML est quils sont issus tous deux de la mme "mre" soit le SGML (Standardized Generalised Markup Language) qui est le langage de rfrence en milieu professionnel pour tout ce qui concerne la gestion lectronique des documents. Ils sont donc, tous deux, des langages de balises (voir le Markup Language).IlsontgalementdescaractristiquescommuneshritesduSGMLquiconsistenttransportersurleWeb desdonnesenmodetexte(plaintext),compatiblesavecnimportequelleplateformelogicielle.
2.LesdiffrencesentreleHtmletleXML
LeHtmletleXMLdiffrentsurdetrsnombreuxpointsdontcertainsonttraitlessencemmedulangage.
q
LeXMLdcrit,structure,changedesdonnestandisqueleHtmlapourvocationdafficherdesdonnes. LeXMLestungnrateurdelangages(mtalangage).LeHtmlestunlangagenormalisdepublicationsurle Web. Le XML est extensible. Il permet de crer ses propres balises en fonction des donnes traites. En Html, les balisessontprdfiniesetellessontdoncfiges. LeXMLestunlangagestrictdontlcrituredoittrerigoureuse.LasyntaxeduHtmlestdevenuetrs(trop?) permissivecausedesnavigateursrcents.
3.LeXhtml
LeXhtmlestprsentcommelesuccesseurduHtml.Maisilestsurtoutundes"enfants"engendrsparleXML.Pour contournerleproblmedesdrivesduHtmlaufildesdiffrentesversions,leW3CaconuleXhtmlcommetantune reformulationduHtml4.0selonlasyntaxeetlesrglesduXML.
LeXhtmlaainsi,entreautreschoses,hritdelastructurerigoureuseduXMLetdesarigueurdcriture.
- 1-
LasyntaxeduXML
Le XML impose des rgles de syntaxe trs strictes et trs spcifiques par rapport au Html. On retrouvera ces mmes rglesdesyntaxedanstousleslangagesdrivsduXML,dontleXhtml. Passonscesrglesenrevue:
q
LeXMLestunlangagedebalises.MaisaucontraireduHtmlolesbalisessontdfinies,vousdevezoupouvez inventer vos propres balises. Rappelezvous, le XML est eXtensible. Il faut donc dfinir soimme le nom des balisesutilises. Ilyaquelquesrglespourlacompositiondesnoms(maisellesnedrouterontpasleshabitusduJavaScript):
Lesnomspeuventcontenirdeslettres,deschiffresoudautrescaractres. Lesnomsnepeuventdbuterparunnombreouunsignedeponctuation. Lesnomsnepeuventcommencerparleslettresxml(ouXMLouXml...). Lesnomsnepeuventcontenirdesespaces. Lalongueurdesnomsestlibremaisonconseillederesterraisonnable. Onviteracertainssignesquipourraientprterconfusioncommeletiret,lepointvirgule,lepoint,lavirgule,le signeplusgrandque(>)etlesignepluspetitque(<). Les balises sont sensibles aux majuscules et minuscules (case sensitive). Ainsi, la balise <Message> est diffrentedelabalise<message>.Labalisedouvertureetlabalisedefermeturedoiventdonctreidentiques. Ainsiparexemple<Message>...</message>estincorrectet<message>...</message>estcorrect. Unconsensussedgagepourncrirelesbalisesquenminuscules,limitantainsileserreurspossibles. Toutebaliseouvertedoittre,imprativement,ferme. LesmauvaisespratiquesduHtmlaveclesquellesonpouvaitdanscertainscasomettrelabalisedefincomme pourleparagraphe<p>oullmentdeliste<li>sontrvolues.
AinsienHtml,cequisuitestaffichcorrectement: <p> <ul> <li>Point 1 <li>Point 2 LeXMLestbeaucoupplusstrict.Ondevraitavoir: <p> <ul> <li>Point 1</li> <li>Point 2</li> </ul> <p> Les ventuelles balises uniques, appeles aussi balises vides, comme <br>, <meta> ou <img> en Html, doivent galementcomporterunsignedefermeturesoitbalise/.Ainsiunebalise<meta/>seraitcorrecteenXML.
q
Les balises doivent tre correctement imbriques. Le XML attachant beaucoup dimportance la structure des donnes,desbalisesmalimbriquessontdesfautesgravesdesens. Ainsi lcriture suivante est incorrecte car les balises ne sont pas bien imbriques :
- 1-
<parent><enfant>Marine</parent></enfant> Lcriturecorrecteavecunebonneimbricationdeslmentsest:<parent><enfant>Marine</enfant></parent>
q
ToutdocumentXMLdoitcomporteruneracine. Enfait,lapremirepairedebalisesdundocumentXMLseraconsidrecommelabalisederacine(root).
Parexemple: <racine> ... suite du document XML ... </racine> EncomparaisonavecleHtmlouleXhtml,llmentracineest<html> ... </html>. Touslesautreslmentssontimbriqusentrecesbalisesderacine. Parexemple: <racine> <parents> <enfants> <petits_enfants> ... </petits_enfants> </enfants> </parents> </racine>
q
Lesvaleursdesattributsdoiventtoujourstremisesentredesguillemets.LeXMLpeut(commeleHtml)avoir des attributs comportant des valeurs. En XML, les valeurs des attributs doivent obligatoirement tre reprises entredesguillemets,linverseduHtmloleurprsenceouleurabsencenaplusbeaucoupdimportancepour lesnavigateurs. Ainsi,lcrituresuivanteestincorrectecarilmanquelesguillemets. <enfant date_anniversaire=071185> Labonnecritureest: <enfant date_anniversaire="071185">
LeXMLestunlangagestrict.VotredocumentdoitimprativementrespecterlasyntaxeduXML.Onditalorsque le document est bienform (Wellformed). Seuls les documents "bien forms" sont affichs correctement. la moindreerreurdesyntaxe,ledocumentnestpasaffich!
VoicicequiestaffichdansInternetExploreretFirefoxlorsqueledocumentestincorrect.
- 2-
L esnavigateurssontaussiunoutildedbogagerudimentaireducodeXML.
- 3-
UnpremierdocumentXML
VoiciunpremierdocumentXMLquiseratoffencoursdechapitre. <?xml version="1.0" encoding="ISO-8859-15"?> Ladclaration<?xml version="1.0"?>indiqueaunavigateurquecequisuitestundocumentXMLselonsaversion1.0. VousremarquerezquecettebalisenecomportepasdesignedefermeturecarcettebalisenestpasencoreduXML. LejeudecaractresutiliserestgnralementnotifilintentiondelinterprteurXML(Parser).Lejeudecaractres ISO885915a,pournousfrancophones,lavantagedaccepterlaplupartdeslettresavecdesaccentsetlesigneeuro. Defaonnative,leXMLestconuparlejeudecaractresUTF8. <racine> LlmentracineindispensableauXML.Vouspouvezutiliser,votreconvenance,nimportequelnompourcettebalise deracine. ... suite du document XML ... VotredocumentXMLproprementdit,quirespectebienentenduscrupuleusementlasyntaxeduXML(bienform). </racine> LedocumentXMLsetermineobligatoirementparlafermeturedelabalisederacine. Exemple VoiciunpetitfichierXML. <?xml version="1.0" encoding="ISO-8859-15"?> <famille> <enfants> <fils>Loc</fils> <fille>Marine</fille> </enfants> </famille> OnlereproduitdansleprogrammeBlocnotes(Notepad)pourlesutilisateursdeWindows.
EtonlenregistreenType:Touslesfichierssousunnomavecuneextension.xml.
RsultatdansMicrosoftInternetExplorer7:
- 1-
Vousremarquerezquilyaunpetitsignemoinsaffichdevantdesbalisesenglobantes.Ilsuffitdecliquersurlesigne pourmasquercellesci,etbienentendu,decliquersurlesignepluspourlesfairerapparatre.
RsultatsousFirefox:
FirefoxfaitremarquerquilnyaaucuneinformationdestyleassocieaufichierXMLafindelaffichervalablement.Ainsi
- 2-
seulelastructuredudocument(appeleaussilarbre)peuttreaffiche.
- 3-
LeDOCTYPE
LeDOCTYPEouDTD(DocumentTypeDefinition)estlensembledesrglesetdespropritsquedoitsuivreledocument XML produit. Ces rgles dfinissent gnralement le nom et le contenu de chaque balise ainsi que le contexte dans lequel elles doivent exister. Cette formalisation des lments est particulirement utile lorsquon utilise de faon rcurrente des balises dans un document XML ou que plusieurs personnes sont appeles travailler sur le mme documentXML. LesDTDsontcritesselonlesprescriptionsduSGML. Ltude dtaille des DTDs dpasse de loin le cadre de cet ouvrage mais un aperu est cependant utile, surtout pour comprendrelefonctionnementdeslangagesdrivsduXML(commeleXhtml)quinemanquentpasdutilisercesfameux DTDs. Danscertainscas,plusieursconcepteurspeuventsemettredaccordpourutiliser unDTDcommunpourchangerleurs donnes.CestlecasduXhtml,oleDOCTYPEestsignaldanslenttedudocument(strict,transitionalouframeset). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Cependant,danslaplupartdesapplicationsXML,leconcepteurdoitcriresapropredfinitiondedocument.
1.DTDinterne
OnpeutinclureleDOCTYPEaucodedufichierXML.OnparleraalorsdunDTDinterne. UnDTDinternesuitlasyntaxesuivante: <!DOCTYPE lment-racine [ dclaration des composants ]> DupointdevuedesDTDs,touslesdocumentsXMLsontlaborsaveclescomposantssuivants:
q
leslmentsoupluscommunmentlesbalises.Exemple:labalise<body>enXhtml. lesattributsquiviennentcomplterlesbalises.Lesattributssonttoujoursinclusdanslabaliseouvrante. Exemple:lattributborderdelabalise<table>enXhtml.
LesPCDATA(parsedcharacterdata),chanesdecaractresquiserontaffichesparlinterprteurXML(Parser). Exemple:lecontenudelabalise<p>Chapitre 1:LeXhtml</p>enXhtml. Les CDATA (characterdata),chanesdecaractresquinesontpasprisesencompteetquinesontdoncpas affichesparlenavigateurXML. Exemple,ducodeJavaScriptdansundocumentXhtml.
Lesentits,sortederaccourciquipermetdedclarerplusieursparamtresutilisablesenappelantsimplement lentitplusloindansledocument.
Dtaillonsciaprsquelquesrglespourdfinircesdiffrentscomposants.
a.Ladclarationdunlment
UnlmentsedclaredanslaDTDselonlasyntaxesuivante: <!ELEMENT nom_de_llment mot-cl> ou <!ELEMENT nom_de_llment (contenu)> Exemple
- 1-
<!ELEMENT h1>pourlabalise<h1>enXhtml.
b.Leslmentsvides
Unlmentvide(empty)sedclare: <!ELEMENT nom_de_llment EMPTY> Exemple <!ELEMENT img EMPTY>pourlabalise<img />enXhtml.
c.Leslmentscomprenantdescaractresafficher
Leslmentscomprenantdescaractresafficher,gnralementlecontenudesbalises,senotent: <!ELEMENT nom_de_llment (#PCDATA)> Exemple <!ELEMENT p (#PCDATA)>pourlabalisedeparagraphe<p>enXhtml.
d.Leslmentsavecdeslmentsenfant
<!ELEMENT nom_de_llment (elment_enfant,lment_enfant,...)> Exemple <!ELEMENT <enfants (fils,fille)> Lorsque des lments enfant sont dclars, ces lments enfant doivent apparatre dans le mme ordre dans le documentXML. Enoutre,leslmentsenfantdoiventtredclars. <!ELEMENT <enfants (fils,fille)> <!ELEMENT fils (#PCDATA)> <!ELEMENT fille (#PCDATA)>
e.Leslmentsavecuneseuleoccurrence
Leslmentsenfantquidoiventapparatreseulementunefoisdanslecodedellmentparentsenotent: <!ELEMENT nom_de_llment (elment_enfant)> Exemple <!ELEMENT adhrent (nom)> Llmentenfantnomdoitapparatreunefoisetseulementunefoisdansllmentparentadhrent.
f.Leslmentsavecauminimumuneoccurrence
Leslmentquipeuventapparatreplusieursfoissedclarent: <!ELEMENT nom_de_llment (elment_enfant+)> Exemple <!ELEMENT adhrent (telephone+)>
- 2-
Lesigne+dclarequellmentenfanttelephonedoitapparatreunefoismaispeutaussiapparatreplusieursfois dansllmentparentadhrent.
g.Leslmentsavecauminimumzrooccurrence
Leslmentsfacultatifsquipeuventnepasapparatre(zrooccurrence)ouapparatreplusieursfoissenotent: <!ELEMENT nom_de_llment (elment_enfant*)> Exemple <!ELEMENT adhrent (telephonefixe*)> Le signe * dclare que llment enfant telephonefixe peut ne pas apparatre, tout comme il peut apparatre plusieursfoisdansllmentadhrent.
h.Leslmentsaveczroouuneoccurrence
Leslmentsquipeuventapparatrequunefoisoutreabsentssedfinissent: <!ELEMENT nom_de_llment (elment_enfant?)> Exemple <!ELEMENT adhrent (adresseIP?)> Le signe ? dclare que llment enfant adresseIP peut tre absent ou apparatre une seule fois dans llment parentadhrent.
i.Leslmentsalternatifs
Lorsquedesoptions(leoulogique)sontautorisesdansleslmentsenfants,cellescisedclarent: <!ELEMENT nom_de_llment ((elment_enfant|lment_enfant))> Exemple <!ELEMENT telephone ((national|international))> Lexemple dclare que llment parent telephone peut contenir llment enfant national ou llment enfant international. AppliquonsuneDTDinternenotrefichierXML. <?xml version="1.0" encoding="ISO-8859-15"?> <famille> <enfants> <fils>Loc</fils> <fille>Marine</fille> </enfant> </famille> Celuicidevient: <?xml version="1.0" "standalone="yes"?> <!DOCTYPE famille [ <!ELEMENT famille (enfants?)> <!ELEMENT enfants (fils*, fille*)> <!ELEMENT fille (#PCDATA)> <!ELEMENT fils (#PCDATA)> ]> <famille> <enfants>
- 3-
<fils>Loc</fils> <fille>Marine</fille> </enfants> </famille> Commentaires:

q
Lorsquundoctypeinterneestdfini,ilfautdclarerquelefichierestindpendant(standalone="yes")dansle prologueXML. LlmentracineestdclardansledbutduDOCTYPE(<!DOCTYPE famille). LecontenuduDOCTYPEestencodentredescrochetsouvrantsetfermants. La ligne <!ELEMENT famille (enfants?)> dclare que la balise <famille> contient la balise <enfants>. Le signe?prvoitlecasdesfamillessansenfants. Laligne<!ELEMENT enfants (fils*, fille*)>dclarequelabalise<enfants>contientlesbalises<fils>et <fille>.Lesigne*estprvupourlecasounedescendancenestcomposquedunouplusieursfilsainsi queduneouplusieursfille(s). LeDOCTYPEsetermineparlesigne>.
2.DTDexterne
LeDTDexternesuitlasyntaxesuivante: <!DOCTYPE lment-racine SYSTEM "nom_du_fichier.dtd"> Lemmefichierquecidessusestalors: <!DOCTYPE famille SYSTEM "parent.dtd"> <?xml version="1.0" standalone="no"?> <famille> <enfants> <fils>Loc</fils> <fille>Marine</fille> </enfants> </famille> LefichierdeDTDexterne(icidanslemmerpertoire)parent.dtdcontient : <!ELEMENT <!ELEMENT <!ELEMENT <!ELEMENT famille (enfants?)> enfants (fils*, fille*)> fille (#PCDATA)> fils (#PCDATA)>
Mais il est aussi possible de faire rfrence un DTD externe situ sur un autre site comme pour, par exemple, le XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
U ndocumentestditvalidesilrespectelesrglesspcifiquesdesonDOCTYPE.
Enapart IlexisteuneautremthodepourdfinirlesDTDs,nonplusenSGMLmaisenXML,cestleXMLSchema. Le XML Schema est un langage de description de format de document (XML Schema Description), encod en XML, permettant de dfinir la structure dun document XML. Ce fichier de description de structure tient le rle de DTD et permetgalementdevaliderledocumentXML.
- 4-
- 5-
AfficherleXMLavecCSS
PourafficherlesbalisesXML,onpeutfaireappelauxfeuillesdestyleCSS,maintenantclassiquesdanslepaysagedela publication sur le Web. Pour chaque balise "invente" dans le fichier XML, un lment de style va tre intgr pour laffichageparlenavigateur. VoiciunexempledespossibilitsdesfeuillesdestyleCSSassociesundocumentXML. SoitnotredocumentXMLdedpart: <?xml version="1.0" encoding="ISO-8859-15"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> <editeur>Columbia Tristar</editeur> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> <editeur>Virgin France</editeur> </mp3> <mp3> <titre>>Sheller en solitaire</titre> <artiste>William Sheller</artiste> <date>1992</date> <editeur>Mercury</editeur> </mp3> <mp3> <titre>Cach derrire</titre> <artiste>Laurent Voulzy</artiste> <date>1993</date> <editeur>Ariola</editeur> </mp3> </compilation> Affichdanslenavigateur,cecodeXMLsaffichecommesuit:
- 1-
Unfichier.cssestajout,voicisoncontenu(xmlcss.css) : compilation , mp3 {} titre { display: block; width: 250px; font-size: 12pt; font-family: Arial; font-weight: bold; background-color: #9cf; color: black; padding-left: 10px;} artiste { display: block; font-size: 12pt; padding-left: 10px;} date { display: block; font-size: 12pt; color: red ; font-weight: bold; padding-left: 10px;} editeur { display: block; font-size: 11pt ; font-style: italic; font-family: Arial ; padding-left: 10px;} AprsavoirajoutunlienverslefichiercssdanslefichierXML:
- 2-
<?xml-stylesheet href="xmlcss.css" type="text/css"?> Lecodecompletdevient: <?xml version="1.0" encoding="ISO-8859-15"?> <?xml-stylesheet href="xmlcss.css" type="text/css"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> <editeur>Columbia Tristar</editeur> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> <editeur>Virgin France</editeur> </mp3> <mp3> <titre>Sheller en solitaire</titre> <artiste>William Sheller</artiste> <date>1992</date> <editeur>Mercury</editeur> </mp3> <mp3> <titre>Cach derrire</titre> <artiste>Laurent Voulzy</artiste> <date>1993</date> <editeur>Ariola</editeur> </mp3> </compilation> Onobtientfinalementdanslenavigateur:
Assez efficace, non ?... Mais il y a encore un autre moyen, plus performant et ayant des possibilits plus tendues : afficherduXMLavecleXSLsoitlelangagedefeuillesdestyleeXtensible :lependantduXMLauxfeuillesdestyleCSS.
- 3-
AfficherleXMLavecXSL
PourafficherdesdocumentsXML,ilestncessairededisposerdunmcanismequipermettraitdedcrirelaffichagedu document dans le navigateur. Les feuilles de style CSS constituent un de ces mcanismes mais le XSL (eXtensible StylesheetLanguage)estdeloinunlangagedefeuilledestyleplusadaptauXMLetdoncplusperformant. NousyreviendronsendtailauchapitreIntroductionauXSL. seulefindedmonstration,voiciunexempledespossibilitsduXSLassociundocumentXML. ReprenonsnotredocumentXMLdedpart: <?xml version="1.0" encoding="ISO-8859-15"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> <editeur>Columbia Tristar</editeur> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> <editeur>Virgin France</editeur> </mp3> <mp3> <titre>Sheller en solitaire</titre> <artiste>William Sheller</artiste> <date>1992</date> <editeur>Mercury</editeur> </mp3> <mp3> <titre>Cach derrire</titre> <artiste>Laurent Voulzy</artiste> <date>1993</date> <editeur>Ariola</editeur> </mp3> </compilation> OnajouteunfichierXSL(simple.xsl)dontvoicilecontenu: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body style="font-family: Arial; font-size: 12pt;"> <xsl:for-each select="compilation/mp3"> <div style="background-color: #9cf; color: black;"> <span style="font-weight: bold; padding-left: 4px"> <xsl:value-of select="titre"/></span> - <xsl:value-of select="artiste"/> </div> <div style="margin-left: 20px; font-size: 11pt"> <span><xsl:value-of select="date"/> </span> <span style="font-style: italic;"> <br/> <xsl:value-of select="editeur"/> </span> </div> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet> AprsavoirajoutunlienverslefichierXSLdanslefichierXML:
- 1-
<?xml-stylesheet type="text/xsl" href="simple.xsl"?> Lecodecompletdevient: <?xml version="1.0" encoding="ISO-8859-15"?> <?xml-stylesheet type="text/xsl" href="simple.xsl"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> <editeur>Columbia Tristar</editeur> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> <editeur>Virgin France</editeur> </mp3> <mp3> <titre>Sheller en solitaire</titre> <artiste>William Sheller</artiste> <date>1992</date> <editeur>Mercury</editeur> </mp3> <mp3> <titre>Cach derrire</titre> <artiste>Laurent Voulzy</artiste> <date>1993</date> <editeur>Ariola</editeur> </mp3> </compilation> Onobtientfinalement:
- 2-
AfficherduXMLdansduXhtml
On peut toujours incorporer du XML dans un fichier Xhtml ou Html avec la balise <xml> ... </xml>. Mais, en toute logique,quandlesnavigateursrencontrentdesbalisesincorrectesouinconnues,riennestaffich.Ceseralecasavec vosbalisesXMLincorporesdansunfichierXhtml(ouHtml).Heureusement,nousallonsutiliserunetechniqueintitule "lotsdedonnes"(DataIslands). Cettetechniqueoffreunepossibilitassezintressante.DansunfichierXhtml,onpeutcrerun"lotdedonnes"XML, se trouvant dans un fichier XML distinct, et en extraire des donnes que lon pourra alors inclure dans le document Xhtml. DanslefichierXhtml,onvadsignerlefichierXMLextrieurparunidentifiantid: <xml id="fichierxml" src="exemple.xml"></xml> Ensuite, dans un tableau Xhtml, que lon relie par un attribut la source des donnes au moyen de lidentifiant id dsign plus haut (datasrc="#id"), des donnes du fichier XML peuvent tre reprises. Pour ce faire, un attribut de champdedonnesayantpourvaleurlenomdelabaliseXMLestutilis(datafld= "balise_xml"). VoillefichierXMLextrieur(exemple.xml): <?xml version="1.0" encoding="ISO-8859-15"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> <editeur>Columbia Tristar</editeur> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> <editeur>Virgin France</editeur> </mp3> <mp3> <titre>Sheller en solitaire</titre> <artiste>William Sheller</artiste> <date>1992</date> <editeur>Mercury</editeur> </mp3> <mp3> <titre>Cach derrire</titre> <artiste>Laurent Voulzy</artiste> <date>1993</date> <editeur>Ariola</editeur> </mp3> </compilation> Un fichier Xhtml (ou Html) doit tre cr dans lequel on reprend des donnes du fichier XML et plus prcisment le contenudesbalises<titre>,<artiste>et<date>. <!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" xml:lang="fr" lang="fr"> <head> <title>Data Islands</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-15" /> </head> <body> <xml id="fichierxml" src="exemple.xml"></xml> <table datasrc="#fichierxml"> <tr> <td><span datafld="titre"></span></td> <td><span datafld="artiste"></span></td> <td>Anne : <span datafld="date"></td> </tr>
- 1-
</table> </body> </html> AjoutonscefichierquelquesdclarationsdefeuillesdestyleCSSafindamliorersaprsentation. <!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" xml:lang="fr" lang="fr"> <head> <title>Data Islands</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-15" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> table { border-collapse: collapse; border: solid black 1px;} td { padding: 3px; border: solid black 1px;} </style> </head> <body> <xml id="fichierxml" src="exemple.xml"></xml> <table datasrc="#fichierxml" style=""> <tr> <td><span datafld="titre"></span></td> <td><span datafld="artiste"></span></td> <td>Anne : <span datafld="date"></td> </tr> </table> </body> </html> Onobtientfinalement:
- 2-
DesditeursXML
NattendezpasdemiracledesditeursXML!tantdonnquenXMLvousconcevezvousmmevosbalises,lesditeurs XMLnesontquedesoutilsdaidelencodageetlastructurationdevotredocument. LesditeursXMLsontcependantdunegrandeutilitsidenombreusesbalisesrcurrentesseprsententdansvotre documentXML.Enoutre,silestncessairedactualisersouventlesdonnesdufichierXML,ilestplusfacilederetrouver uneinformationdanslinterfacedunditeurXMLquedansunequantitinnombrabledebalisesducodesource.
1.MicrosoftXMLNotepad2007
lafin2006,MicrosoftafortementremanisonlogicielXMLNotepad1.0,devenucompltementdsuetcarildataitde 1998.AinsiXMLNotepad2007(logicielgratuit)sepositionnecommeunditeurXMLsimpleetparfaitementadapt lapprentissageduXML.
XML Notepad 2007 est une application qui vous permet de crer et de modifier rapidement des documents XML. Linterface prsente deux volets : celui de gauche affiche graphiquement la structure arborescente du document et celuidedroitelesvaleursdufichier.Deslments,desattributs,descommentairespeuventtreajoutsdanslevolet degaucheetleursvaleurspeuventtreencodesdanslazonedetexteduvoletdroitcorrespondant. Ilestaussipossiblededplacerdeslmentsparunsimpleglisser/dposer(drag/drop)etdevisualiserledocument endirectgrceundocumentXSLassoci.
s
OuvronsnotredocumentXML(FileOpen)dansXMLNotepad2007.
Onremarquedirectement,danslepanneaudegauche,lapprochevisuelledudocumentXML. XMLNotepad,commelaplupartdesditeursXML,metlaccentsurlastructurationetlarborescencedesdonnesque
- 1-
nervlentpasdirectementlecodesourceetlencodagebrutdesbalises. La balise<compilation> ... </compilation> est llment racine obligatoire, soit celui qui occupe la position la plus hautedanslahirarchie.Elleestconsidrecommellmentparentdetouteslesautresbalisesdudocument. Labalise<mp3> ... </mp3>estunedescendancedelabaliseparent<compilation>.Ellefaitpartiedeslmentsenfant (child)decelleci. Cette balise <mp3> est son tour parent de diffrentes balises. Ainsi, les balises <titre>, <artiste>, <date> et <editeur>sontdesbalisesenfantdecettedernire. LarborescenceoularbredenotredocumentXMLpeutdoncsereprsentercommesuit.
Laffichage de larborescence du document est des plus utile pour illustrer le DOM (Document Object Model), abord danslechapitreLeDOM(DocumentObjectModel). Pourunerapidepriseenmain,nousallonsreproduirenotredocumentXMLaveclelogicielXMLNotepad2007. <?xml version="1.0" encoding="ISO-8859-15"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> <editeur>Columbia Tristar</editeur> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> <editeur>Virgin France</editeur> </mp3> Etc.
Commenonsparouvrirundocumentvierge,FileNew.
Ilfauttoutdabord encoder la dclaration de document XML,Insert Processing Instruction Before.Unezonede texte apparat dans le panneau de gauche, il faut introduire au clavier le mot xml et dans la zone de texte apparaissantdanslepanneaudedroiteversion="1.0"encoding="ISO885915".
Ilfautensuiteveillerdterminerllmentracine<compilation>,InsertElementAfter,oncompltelazonede textedupanneaudegaucheparlemotcompilation.
- 2-
Maintenant traitons des lments enfant <mp3>. Aprs avoir slectionn la ligne compilation, Insert Element Childilfautintroduireauclavierlemotmp3.
Onremarquequelicneenfacedecompilationnestplusunepucemaisundossier,signequelabalise<compilation> estdevenuunebaliseparent.
s
Aprsavoirslectionnleniveaump3,proccuponsnousdesbalisesenfantdecettedernire.Insert Element ChildpuisintroduireauclavierlemottitreetsoncontenuSarbacanedanslepanneaudedroite.
Onprocdedemmepourlesautresbalises(artiste,dateetediteur).Aprsavoirslectionnllmentparentmp3, InsertElementChildpuiscompltlesinformations.
Ilfautmaintenantprocderdemmeaveclesautresblocsmp3dudocument.Aprsavoirslectionnmp3,Edit Duplicatepuismodifierlesinformationsdanslepanneaudedroite.
- 3-
OnrpteraloprationautantdefoispourinsrertouteslesdonnesdudocumentXML.
s
Aprsavoirenregistrledocument(FileSaveAs...),lecodesourcedufichierserasoussaformeclassique.
2.AltovaXMLSpy2007
DanslepaysagedesditeursXMLprofessionnels,unditeursedtachedulot.Eneffet,XMLSpyexistedslesdbuts du XML et linterface et son utilisation sont devenues de plus en plus sophistiques. XMLSpy dAltova est trs largementadoptparlesconcepteursprofessionnels. XMLSpyestbienplusquunditeurdebalisesXMLcarilpermetaussi :
q
devaliderendirectledocumentXMLgnr desaisirundocumentXSLT dedbuggerundocumentXSLT degnrerlesDTD deconvertirlesDTDenSchema etc.
Bienquilexisteuneversionfreeware(XMLSpyauthentic2007),laversionshareware(limite30jours)delaversion professionnelle (XMLSpy Professional Edition 2007) permet quant elle, de dcouvrir rellement les multiples potentialitsdulogiciel.
Pourdonnerunexemplederapidepriseenmaindeloutil,reproduisonslemmefichierXML.
s
OuvrezunfichierXML,soitFileNewpuisslectionnezletypededocumentxmlXMLDocumentetOK.
- 4-
Ilfautnoterlventaildespossibilitsoffertespermettantdetraiterdiffrentstypesdedocument.
cestadedepriseenmain,dclinezparCancellabotededialogueproposeparXMLSpypermettantdinclureun DTDexistant. Danslasousfentrerserveldition,encodezlabaliseracine<compilation>.
Vousremarquezaubasdelafentreddition,lesboutonsText,Grid,Schema/WSDL,Authentic,Browser.Cliquez surleboutonGridpourpasserenmodedecrationgraphique,cequiestplusconvivial.
- 5-
Encodons prsent, llmentenfant mp3. Aprs avoir cliqu dans la zone compilation,menu XML Add child Element,encodezlabalisemp3.Lammeoprationpeuttreralisepartirduboutondroit.
Leslmentsenfantdemp3peuventprsenttreenregistrs.Aprsavoirslectionnlazonemp3,construisez quatre lments soitXML Add childElementoprationquelonrptequatrefoisetlenomdesbalisestitre, artiste,dateetediteurestencod.
Pourreproduireunsecondblocmp3,slectionnezlazonemp3,EditCopypuisEditPaste.
- 6-
Ilneresteplusquencoderlesdonnes. IlestpossiblederevenirtoutmomentauxfichiersXMLencliquantsurleboutonTextpourvisualiserlefichiersousla formesuivante :
PourlaborerleDTDdudocument,cestfacileavecXMLSpy,MenuDTD/SchemaGenerateDTD/Schema.
EtleDTDapparat! <?xml version="1.0" encoding="UTF-8"?>  <!ELEMENT compilation ((mp3+))> <!ELEMENT mp3 ((titre, artiste, date, diteur))> <!ELEMENT titre (#PCDATA)>
- 7-
<!ELEMENT artiste (#PCDATA)> <!ELEMENT date (#PCDATA)> <!ELEMENT diteur (#PCDATA)> CecinestvraimentquuntrsbrefaperudeXMLSpy.Sesfonctionnalitssonteneffetplusnombreusesettendues. P ourcomplterltudeduXML,lauteurvousrecommandelouvrageXMLparlapratiquebasesindispensables, conceptsetcaspratiquesdeSbastienLecomtedanslacollectionRessourcesInformatiquesdesEditionsENI.
- 8-
LeXSL
Le XSL pour eXtensible Stylesheet Language (langage extensible de feuilles de style) est une recommandation du consortiumW3Cdatantdenovembre1999.IlsagitdunstandarddansledomainedelapublicationsurleWeb.LeXSL estenquelquesortelelangagedefeuillesdestyleduXML.UnfichierdefeuillesdestyleXSLreprenddesdonnesXML etproduitlaprsentationoulaffichagedececontenuXMLselonlessouhaitsduconcepteurdelapageweb. LeXSLcomporteenfait3langages:
q
Le XSLT(XSL Transform), langage qui Transforme un document XML en un format, gnralement en Html ou Xhtml,reconnuparunnavigateur. LeXpathlangagequipermetdedfiniretdadresserdespartiesdedocumentXML. LeXMLFormatterlangagepermettantde"formater"outransformerduXMLdefaonlerendrecompatibleavec desorganismesPDAoudesunitsdereconnaissancevocale.
Pourlasuitedecetutorial,nousnouslimitonsauxlangagesXMLTetXpath.Etcommedanslalittraturerelativece sujet,ilssontidentifissouslevocablegnraldeXSL. Le XSL est driv du XML, reprenant ainsi toutes les rgles de syntaxe du XML (dtaille au chapitre Introduction au XML). Soitenbref:
q
lesbalisessensibleslacasse,scriventenminuscules. touteslesbalisesouvertesdoiventtreimprativementfermes. lesbalisesvidesaurontaussiunsignedefermeturesoit<balise/>. lesbalisesdoiventtrecorrectementimbriques. lesvaleursdesattributsdoiventtoujourstremisesentredesguillemets. ledocumentXSLdevratre"bienform".
LeXSLnepermetpasuniquementlaffichagedeXML.Ilpermetaussi:
q
deslectionnerunepartiedeslmentsXML. detrierdeslmentsXML. defiltrerdeslmentsXMLenfonctiondecertainscritres. dechoisirdeslments. deretenirdeslmentspardestestsconditionnels. detransformerundocument.
- 1-
UnpremierdocumentXSL
Avantdedbuter,ilestutiledeprciserque:
s
leXSLestdrivduXML.LedocumentXSLreprenddonclastructureetlasyntaxedenimportequeldocumentXML. ledocumentXSLcomporteundocumentHtmlouXhtmlquiseraquantluireconnuparlenavigateuretquiservirade supporttoutoupartiedesdonnesdudocumentXMLassoci. leXSLfonctionneavecuneouplusieurs templates,sortedegabarit,pourdfinircommentafficherdeslmentsdu fichierXML.LeslmentsconcernsdufichierXMLsontdterminsparlattributmatch.
VoiciunpremierdocumentXSL.Saconceptionestbasiquemaisnestpascomplique cedocumentseratoffencours dtude. <?xml version="1.0"?> LeXSLestdrivduXML.Aussi,ilestnormalqueledocumentXSLcommenceparladclarationdedocumentXML,soit <?xmlversion="1.0"?>. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> CettelignedclarequeledocumentestauformatXSL. Lattribut xmlns fait rfrence lespace de nommage (namespace) utilis. Le namespace officiel du W3C est : xmlns:xsl="http://www.w3.org/1999/XSL/Transform. <xsl:template match="/"> Voiciunebalisetemplateetsonattributmatch. CettebalisetemplatevadterminerungabaritdanslequeldeslmentsdufichierXMLsonttransformssousuneforme affichableparlenavigateur. LeslmentsdufichierXMLsontdterminsparlattributmatch="/".Labarreoblique("/")entreguillemetssignaleque touteslesbalisesXMLdudocumentassocipartirdelaracinesontconcernes. <html> <head> <title>XSL</title> </head> <body> Il sagit du dbut de la partie Html ou Xhtml servant de support pour laffichage du document dans le navigateur. Attention,lesbalisesdoiventtrecritesenminuscules! Diverses balises Xhtml et XSL... LapartieHtmlouXhtmldudocument. </body> </html> FindelapartieenHtmlouXhtml. </xsl:template> Lafermeturedelabalisedetemplate. </xsl:stylesheet> LedocumentXSLsetermineobligatoirementparlafermeturedelabalisededclarationdedocumentXSL. Attention!PourquecefichierXSLsoitdunequelconqueutilit,ilnefautpasoublierdefairerfrenceceluicidansle fichierXML.
AinsicettelignedoittreajoutedanslefichierXML: <?xml-stylesheet type="text/xsl" href="nom_du_fichier_xsl.xsl"?> Cettebaliseindiqueaunavigateurquunefeuilledestyle(stylesheet)detypeXSLestassocieaufichierXMLetquildoit allerchercherlefichierladresseindiqueparlattributhref. VoicinotrepremierdocumentXSL : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> Diverses balises Xhtml et XSL... </body> </html> </xsl:template> </xsl:stylesheet>
- 2-
UnpremierexempleXSL
Aprscetaperuthorique,tudionsunexempledtaill :unecompilationdecompositionmusicaleMP3. VoiciunfichierXMLquenousallonsutilisertoutaulongdecechapitre. <?xml version="1.0" encoding="ISO-8859-1"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3> <mp3> <titre>Sheller en solitaire</titre> <artiste>William Sheller</artiste> <date>1992</date> </mp3> <mp3> <titre>Cach derrire</titre> <artiste>Laurent Voulzy</artiste> <date>1993</date> </mp3> <mp3> <titre>Rio Grande</titre> <artiste>Eddy Mitchell</artiste> <date>1994</date> </mp3> <mp3> <titre>Samedi soir sur la Terre</titre> <artiste>Francis Cabrel</artiste> <date>1995</date> </mp3> <mp3> <titre>Dfoule sentimentale</titre> <artiste>Alain Souchon</artiste> <date>1996</date> </mp3> </compilation> On lenregistre sous le nom xsldemo avec une extension .xml (soit xsldemo.xml) dont voici un aperu dans Internet Explorer :
- 1-
PassonsmaintenantaufichierXSL. Lebutdelexempleestdereprsenterlacompilationsousformeduntableaudetroiscolonnes. <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <h3>Les victoires de la musique</h3> <table border="1" style="border-collapse: collapse" bordercolor="#000000" cellpadding="3"> <tr style="background: #9cf;"> <td>Anne</td> <td>Album</td> <td>Artiste</td> </tr> <tr> <td><xsl:value-of select="compilation/mp3/date"/></td> <td><xsl:value-of select="compilation/mp3/titre"/></td> <td><xsl:value-of select="compilation/mp3/artiste"/></td> </tr> </table> </body> </html> </xsl:template> </xsl:stylesheet> Aprs les balises de dpart dun fichier XSL, on labore un tableau tout fait classique en Xhtml. Dans la premire cellule, une information de date est renseigne, soit la balise <xsl:value-of /> avec
- 2-
lattributselect="compilation/mp3/date" qui indique comme chemin daccs dans le fichier XML la balise racine compilation, la balisemp3etlabalisedate.Dansladeuximecellule,uneinformationdetitreestrenseigne,soitla balise <xsl:value-of /> avec lattribut select="compilation/mp3/titre" qui indique comme chemin daccs dans le fichier XML, la balise racine compilation, la balise mp3 et la balise titre. Enfin la dernire cellule est consacre linformationrelativelartisteaveclattribut select="compilation/mp3/artiste". Lefichierestenregistrsouslenomxsldemoavecuneextension.xsl(xsldemo.xsl). AfindassociercefichierXSLaufichierXMLprcdent,labalisesuivanteestajoute: <?xml-stylesheet type="text/xsl" href="xsldemo.xsl"?> Lecodecompletdecedernierdevient: <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="xsldemo.xsl"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3> Etc. Etunefoisaffichdansunnavigateur,notrefichierXMLestdevenuuntableauplusprsentable.
Par contre, une seule rfrence de la compilation est affiche dans le tableau. Pour afficher toutes les rfrences, procdercommesuit : LefichierXMLdedpartresteinchang. Considrons le fichier XSL dans lequel la balise<xsl:for-each />(foreach signifie pour chaque) avec comme attribut select="compilation/mp3" va tre ajoute. Dans le fichier XML de balises, une ligne de tableau (<tr>) est insre, contenantdescellules<td>dontvoicilecontenu :
q
balisedatesoit<xsl:value-of select="date" />pourlapremirecellule balisetitresoit<xsl:value-of select="titre" />pourlasecondecellule baliseartistesoit<xsl:value-of select="artiste" />pourlatroisimecellule.
Cequidonne: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"
- 3-
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <h3>Les victoires de la musique</h3> <table border="1" style="border-collapse: collapse" bordercolor="#000000" cellpadding="3"> <tr style="background: #9cf;"> <td>Anne</td> <td>Album</td> <td>Artiste</td> </tr> <xsl:for-each select="compilation/mp3"> <tr> <td><xsl:value-of select="date"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="artiste"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> Lefichierestenregistraveclextension.xsl(xsldemo1.xsl). IlnefautpasoublierdemodifierleliendanslefichierXML.Soit : <?xml-stylesheet type="text/xsl" href="xsldemo1.xsl"?> LecodecompletdufichierXMLdevient: <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="xsldemo1.xsl"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3> Etc. Pourrappel,lefichierXMLsanslefichierXSLprendraitlaformesuivante.
- 4-
Ilneresteplusquvrifierquelefichieraffichebientouteslesrfrencesdelacompilation.
- 5-
TrieraveclelangageXSL
LelangageXSLpermetdetrierdesdonnesdunfichierXMLassoci,enordrecroissantoudcroissant.Ainsi,ilsuffit dajouterlabalise<xsl:sort select="..."/>etlattributorder="ascending"pourtrierdesdonnesenordrecroissant ouorder="descending"pourtrierenordredcroissant. C etteconcisionillustrebienlapuissancedulangageXSL.
Exemple ReprenonsnotrefichierXMLdedpart(inchang). Dans le fichier XSL, nous allons trier notre compilation de mp3 en XML en ordre alphabtique croissant du nom des artistes. En outre, nous allons permuter les colonnes "Anne" et "Artiste" pour bien montrer que le XSL affiche les donnesdufichierXMLselonlefichierHtmlouXhtmlquilcontient. <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <table border="1" style="border-collapse: collapse" bordercolor="#000000" cellpadding="3"> <tr style="background: #9cf;"> <td>Artiste</td> <td>Titre</td> <td>Anne</td> </tr> <xsl:for-each select="compilation/mp3"> <xsl:sort select="artiste" order="ascending" /> <tr> <td><xsl:value-of select="artiste"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="date"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> Lefichierestenregistrsouslenomxsl_orderavecuneextension.xsl(xsl_order.xsl). AfindassociercefichierXSLaufichierXML,labalisesuivanteestajoute : <?xml-stylesheet type="text/xsl" href="xsl_order.xsl"?> Soit, <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="xsl_order.xsl"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3>
Etc
Pourtrierlacompilationparordrealphabtiqueinverse,ilsuffitdemodifierlattributorder="descending". <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <table border="1" style="border-collapse: collapse" bordercolor="#000000" cellpadding="3"> <tr style="background: #9cf;"> <td>Artiste</td> <td>Titre</td> <td>Anne</td> </tr> <xsl:for-each select="compilation/mp3"> <xsl:sort select="artiste" order="descending" /> <tr> <td><xsl:value-of select="artiste"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="date"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>
- 2-
Lefichierestenregistrsouslenomxsl_orderbisavecuneextension.xsl(xsl_orderbis.xsl). AfindassociercefichierXSLaufichierXML,labalisesuivanteestajoute : <?xml-stylesheet type="text/xsl" href="xsl_orderbis.xsl"?> Soit, <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="xsl_orderbis.xsl"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3> Etc.
- 3-
FiltreravecleXSL
LelangageXSLpermetaussidefiltrerlesdonnesdufichierXMLassociselondescritrestelsquegal,diffrentde, plusgrandque,pluspetitque. Ilsuffitdutiliserlattributselect="chemin_daccs[balise=xxx]". Lesoprateurspossiblessont:
q
=pourgal. !=pourdiffrent(nongal). &gtpourplusgrandque. &ltpourpluspetitque.
Cecivousparatunpeuabstrait ?Voyonsunexempledefiltrededonnes... Danslacompilationmp3,nereprenonsquele(oules)titre(s)delartisteAlainSouchon. LattributselectdufichierXSLdevientselect="compilation/mp3[artiste= Alain Souchon]". LefichierXMLrestetoujoursinchang. PassonsmaintenantaufichierXSL. Nousallonsreprendredansnotrecompilationdemp3enXMLquele(oules)titre(s)dAlainSouchon. <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <h3>Les victoires de la musique</h3> <table border="1" style="border-collapse: collapse" bordercolor="#000000" cellpadding="3"> <tr style="background: #9cf;"> <td>Anne</td> <td>Album</td> <td>Artiste</td> </tr> <xsl:for-each select="compilation/mp3[artiste=Alain Souchon]"> <tr> <td><xsl:value-of select="date"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="artiste"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> Lefichierestenregistrsouslenomxsl_filteraveclextension.xsl(xsl_filter.xsl). AfindassociercefichierXSLaufichierXML,labalisesuivanteestajoute : <?xml-stylesheet type="text/xsl" href="xsl_filter.xsl"?> Soit, <?xml version="1.0" encoding="ISO-8859-1"?>
- 1-
<?xml-stylesheet type="text/xsl" href="xsl_filter.xsl"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3> Etc. CequinouspermetdafficheruniquementlesalbumsdAlainSouchon.
- 2-
ChoisiravecleXSL
La balise <xsl:if> ... </xsl:if> permet deffectuer un choix dans les donnes du fichier XML. Lattribut match est ajout pourindiquerllmentchoisi.Cequidonne: <xsl:if test="balise=xxx"> balises Html </xsl:if> Nousallonsillustrercechoixparunexemple :nefaireapparatrequele(s)titre(s)deVoulzydanslefichierenXMLde compilationdemp3. <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <h3>Les victoires de la musique</h3> <table border="1" style="border-collapse: collapse" bordercolor="#000000" cellpadding="3"> <tr style="background: #9cf;"> <td>Anne</td> <td>Album</td> <td>Artiste</td> </tr> <xsl:for-each select="compilation/mp3"> <xsl:if test="artiste=Laurent Voulzy"> <tr> <td><xsl:value-of select="date"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="artiste"/></td> </tr> </xsl:if> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> Lefichierestenregistrsouslenomxsl_ifaveclextension.xsl(xsl_if.xsl). AfindassociercefichierXSLaufichierXMLdedpart,labalisesuivanteestajoute : <?xml-stylesheet type="text/xsl" href="xsl_if.xsl"?> LefichierXMLcompletdevient: <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="xsl_if.xsl"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3> Etc.
- 1-
CequinouspermetdafficheruniquementlalignedutableaucorrespondantLaurentVoulzy.
Voici une autre illustration de cette possibilit de choix : ne retenir dans notre compilation de mp3 en XML que les informationspostrieures1993. Ilsuffitdemodifierlabalise<xsl:if>dufichierXSLprcdent.Laconditionsexprimepartest="date > 1993"(&gt pourlesigne>suprieur). <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <h3>Les victoires de la musique</h3> <table border="1" style="border-collapse: collapse" bordercolor="#000000" cellpadding="3"> <tr style="background: #9cf;"> <td>Anne</td> <td>Album</td> <td>Artiste</td> </tr> <xsl:for-each select="compilation/mp3"> <xsl:if test="date > 1993"> <tr> <td><xsl:value-of select="date"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="artiste"/></td> </tr> </xsl:if> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> Lefichierestenregistrsouslenomxsl_ifbisaveclextension.xsl(xsl_ifbis.xsl). AfindassociercefichierXSLaufichierXMLdedpart,labalisesuivanteestajoute : <?xml-stylesheet type="text/xsl" href="xsl_ifbis.xsl"?> Soit, <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="xsl_ifbis.xsl"?> <compilation>
- 2-
<mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3> Etc. Cequinouspermetdafficheruniquementleslignesdutableaupourlesannespostrieures1993.
- 3-
ConditionsetleXSL
LeXSLpermetaussidefaireunchoixconditionnelparlabalise<xml:choose>. lintrieurdecettebalise,uneaction peut tre dtermine lorsquune condition est vrifie (balise <xsl:when>) et dans le cas contraire il faut prvoir une autreaction(balisexsl:otherwise>). <xsl:choose> Conditionvrifie <xsl:when test="artiste=Francis Cabrel"> <tr style="background: #9cf;"> <td><xsl:value-of select="date"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="artiste"/></td> </tr> </xsl:when> sinon <xsl:otherwise> <tr> <td><xsl:value-of select="date"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="artiste"/></td> </tr> </xsl:otherwise> </xsl:choose> Exemple Nousallonsreprendredansnotrecompilationdemp3enXMLtouslestitresdeFrancisCabrelquenousallonsafficher avecunarrireplandecouleur,lesautrestitretantaffichsnormalement. <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <h3>Les victoires de la musique</h3> <table border="1" style="border-collapse: collapse" bordercolor="#000000" cellpadding="3"> <tr> <td>Anne</td> <td>Album</td> <td>Artiste</td> </tr> <xsl:for-each select="compilation/mp3"> <xsl:choose> <xsl:when test="artiste=Francis Cabrel"> <tr style="background: #9cf;"> <td><xsl:value-of select="date"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="artiste"/></td> </tr> </xsl:when> <xsl:otherwise> <tr> <td><xsl:value-of select="date"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="artiste"/></td> </tr>
- 1-
</xsl:otherwise> </xsl:choose> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> Lefichierestenregistrsouslenomxsl_chooseetlextension.xsl(xsl_choose.xsl). AfindassociercefichierXSLaufichierXMLdedpart,labalisesuivanteestajoute : <?xml-stylesheet type="text/xsl" href="xsl_choose.xsl"?> Soit, <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="xsl_choose.xsl"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3> Etc. CequinouspermetdafficheruniquementleslignesconcernantFrancisCabrelmisesenvidence.
- 2-
TransformationavecleXSL
Llment <xsl:apply-templates /> utilis au sein de la balise <xsl: template/> permet dappliquer un modle (template)detransformationoudeprsentationsurleslmentsdudocumentXML. SurnotrefichierXML,nousallonsappliquerdesprsentationsdestylediffrentespourlesinformationsrelatives:
q
autitredelalbum<xsl:template match="titre"> ... </xsl:template>, aunomdelartiste<xsl:template match="artiste"> ... </xsl:template>, etladate<xsl:template match="date"> ... </xsl:template>.
Lesbalisesconcernesonttpralablementdfiniespar: <xsl:template match="mp3"> <p> <xsl:apply-templates select="titre"/> <xsl:apply-templates select="artiste"/> <xsl:apply-templates select="date"/> </p> </xsl:template> LefichierXSLdevient: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <h3>Les victoires de la musique</h3> <xsl:apply-templates/> </body> </html> </xsl:template> <xsl:template match="compilation/mp3"> <p> <xsl:apply-templates select="titre"/> <xsl:apply-templates select="artiste"/> <xsl:apply-templates select="date"/> </p> </xsl:template> <xsl:template match="titre"> Titre : <span style="font-weight:bold;"> <xsl:value-of select="."/></span> <br /> </xsl:template> <xsl:template match="artiste"> Artiste : <span style="font-variant:small-caps"> <xsl:value-of select="."/></span> <br /> </xsl:template> <xsl:template match="date"> Date: <span style="font-style:italic;"> <xsl:value-of select="."/></span> <br /> </xsl:template> </xsl:stylesheet> Lefichierestenregistrsouslenomxsl_applyetlextension.xsl(xsl_apply.xsl). AfindassociercefichierXSLaufichierXMLdedpart,labalisesuivanteestajoute :
- 1-
<?xml-stylesheet type="text/xsl" href="xsl_apply.xsl"?> Cedernierdevient: <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="xsl_apply.xsl"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3> Etc. Cequipermetdaffichernotrefichieravecunemiseenformediffrentepourletitre(engras),lenomdelartiste(petites majuscules)etledate(enitalique).
P our une tude (beaucoup) plus complte du XSL, vous pouvez vous reporter louvrage XML et XSL Les feuillesdestyleXMLdeCyrilVincentdelacollectionRessourcesInformatiquesdesEditionsENI.
- 2-
XMLNotepad2007etleXSL
Si vous utilisez XML Notepad 2007, lorsque vous ouvrez un fichier (File Open), celuici saffiche dans la fentre correspondantlongletTreeView.
En choisissant longlet XSL Output, il est possible dadjoindre au fichier XML un fichier XSL et de visualiser la transformationgraphiqueinstantanment,sansavoirutiliserunnavigateur.
- 1-
Prsentation
LeDOM(pourDocumentObjectModel)<$SDocumentObjectModelDOM,N ud>dfinitunmodestandardispouraccder etmettrejourtousleslmentsdundocumentHtml,XhtmlouXML. IlfautprciserqueleDOMnestpasensoiunlangagedebaliseoudeprogrammationmaissimplementunemanirede percevoir, de parcourir et de manipuler un document Html ou XML, en utilisant des mthodes et des proprits spcifiques. LorsdesbalbutiementsdelapublicationsurleWeb,Netscape2etInternetExplorer3avaientdjintroduitunconcept objetdanslespagesHtml.CeconceptrudimentairepermettaitdaccdercertainslmentsdudocumentHtml,comme les images et les composants de formulaires. Il portera, a posteriori, le nom de DOM niveau 0 (DOM level 0). Comme ctaitlamauvaisepratiquelpoque,chaquediteuravaitsapropreimplmentationdesobjets,cequilaissaitlaporte ouverteuneforteincompatibilitentrelesdiffrentsnavigateurs. LeconsortiumW3Csempressadditerds1998unerecommandationpourstandardiserlesobjetsetlafaondeles apprhender.CelleciportelenomdeDOMniveau1(Domlevel1).Ildevenaitainsipossibledaccderchaquelment delapageHtml,dudocumententierausimplecontenutextuel.Mieuxencore,touslesfabricantsdenavigateursont, petit petit, adopt cette recommandation, avec pour consquence la disparition quasitotale des problmes dincompatibilitduDOM. Pour tre complet, signalons que le DOM a volu avec la recommandation DOM niveau 2 en novembre 2000 et la recommandationDOMniveau3enjanvier 2004.Lesspcificationsdecesderniresrecommandationsnesont,lheure actuelle,quepartiellementreprisesparlesnavigateurs.
- 1-
Conceptdenud(node)
SelonleDOM,toutcomposantoulmentdundocumentHtml,XhtmlouXMLconstitueunn ud(node). Cesdiffrentsn udssontenrelationlesunsaveclesautres.Ilestalorspossibledereprsenterundocumentselon une structure arborescente qui nest pas sans rappeler celle dun arbre gnalogique avec ses branches et ses intersections. Il faut bien admettre que ce terme de n ud ou node nest pas trs lgant ni trs explicite. On aurait pu parler dlment mais ce terme dsigne galement les balises Html et Xhtml. Le terme dobjet est, quant lui, repris par le JavaScriptetlesautreslangagesdeprogrammation.Parcontre,ilananmoinslavantagederappelerlarborescenceou lahirarchisationdundocument. Toutcomposanttantunn ud,onpeutconcevoir:
q
ledocumententiercommeunn ud,appeln uddocument(documentnode). Chaquebaliseoulmentestunn ud lment (elementnode).Ainsi,desbalisescomme<p>, <ul>,<li>sont desn udslment. Letextecontenuentrelesbalisesestunn udtexte(text node).Ainsi,pour<p>Texte du paragraphe</p>,les mots"Texteduparagraphe"constituentunn udtexte. Chaque attribut dune balise ou lment est un n ud attribut (attribut node). Pour <img href="image.png" alt="" />,hrefetaltsontdesn udsattribut. Lescommentairesdeviennentdesn udsdecommentaire(commentnode). Etc.
- 1-
Hirarchisationdesnuds
Lesn udsontunerelationhirarchiqueentreeux. Soit,parexemple,<p>Texte du Paragraphe</p>.Cetexemplecontientdeuxn uds.Unn udlmentpourlabalise<p> et un n ud texte qui comporte les mots "Texte du paragraphe". Comme le n ud <p> contient un n ud texte, leur relationpeuttrequalifiedeparent/enfant,labalise<p>jouantlerledeparent(parent)etletextedeceluidenfant (child).
Seloncemodehirarchique,touslesn udsformentlarborescenceoularbredudocument.Cetarbrecommenceparle n uddocumentetsetermineparlesn udstextepourlesniveauxlesplusloigns. Prenonstitredexemple,undocumentHtmlrudimentaire. <html> <head> <title>Le DOM</title> </head> <body> <h1>Titre de niveau 1</h1> <p>Texte du paragraphe</p> </body> </html> Lahirarchiedudocumentpeutsereprsentercommesuit:
Document,html,head,title,LeDOM,body,h1,Titredeniveau1,p,Texteduparagraphesonttousdesn uds.Maisils nesontpastousdummetype.Documentestunn uddocument.LessixbalisesHtmlsontdesn udslmentetles troistextessontdesn udstexte. Touscesn udssontenrelationlesunsaveclesautres.Pourqualifiercesrelations,leDOMempruntelaterminologie utilisepourlesarbresgnalogiques.
- 1-
Chaque n ud,exceptlen ud document, a un n ud parent. Ainsi, par exemple, le n ud parent du n udlment <body>estlen udlment<html>etlen udparentde<h1>estlen udlment<body>. Laplupartdesn udslmentontunoudesn udsenfant.Ainsi,len ud<head>possdeunlmentenfant,len ud <title>.sontour,len ud<title>comporteunlmentenfant,soitlen udtexte"LeDOM". Certainsn udssontfrresets urs(siblings)carilspartagentlemmeparent.Ainsi,lesn uds<h1>et<p>sontfrres ets urscarilssonttousdeuxdeslmentsenfantdun udlment<body>. Desn udspeuventavoirdesascendantsetdesdescendants. Lesascendantssontlesn udsquisontparentsdunn udouparentsdunn udparent.Dansnotreexemple,tousles n uds de texte ont le n ud <html> comme ascendant et le n ud de texte de <p> a le n ud lment body comme ascendant. Lesdescendantssontlesn udsquisontenfantsdunn udouenfantsdunn udenfant.Dansnotreexemple,tous lesn udstextesontdesdescendantsdun ud<html>etlen uddetextede<p>estdescendantdun ud<body>.
- 2-
PropritsdelobjetNode
1.Lespropritsderelation
Ilnestpastonnantderetrouverlestermesdeparent(parent),enfant(child)oufrres/s urs(sibling)danslesproprits.
parentNode firstChild lastChild childNodes previousSibling nextSibling
Renvoielenudparentdunnud. Renvoielepremierenfantdunnud. Renvoieledernierenfantdunnud. Stockeunelistedetouslesnudsenfant disponiblespartirdunnud. Renvoielenudfrres/sursprcdentdun nud. Renvoielenudfrres/surssuivantdun nud.
2.Lespropritsdtat
Cespropritspermettentdesinformersurltatdunn ud. nodeName Indiquelenomdun udslectionn.Lenomdelabaliseesttoujoursretournenmajuscules. nodeType Indiqueletypedenoderencontr.Cetypeprenddiffrentesvaleurs : 1silen udestunlment. 2silaslectionportesurunattribut. 3silsagitdun uddetexte. 4pourunn uddesectionCDATA. 5pourunn udderfrenceuneentit. 6pourunn uddentit. 7pourunn uddinstructiondetraitement. 8pourunn uddecommentaire. 9pourunn uddedocument. 10pourunn uddetypededocument. 11pourunn uddefragmentdedocument. 12pourunn uddenotation. nodeValue Permetdobteniroudechangerlavaleurdunn uddetypetexte. Exemples: SelonlarbredudocumenttudiaupointC.prcdent: Pourlenudlment<head>
nodeName nodeType nodeValue parentNode childNodes firstChild lastChild nextSibling previousSibling

Pourlenudlment<body>
HEAD 1 null(sansobjet) Lenoeudlmenthtml Unenfant,lenudlmenttitle Lenudlmenttitle Lenudlmenttitle Lenudlmentbody null(sansobjet)
- 1-

Pourlenudlment<h1>
BODY 1 null(sansobjet) Lenoeudlmenthtml Deuxenfants,lesnudslmenth1etp Lenudlmenth1 Lenudlmentp null(sansobjet) Lenodelmenthead
H1 1 null(sansobjet) Lenudlmentbody Unenfant,lenudtexte Lenudtexte Lenudtexte Lenudlmentp null(sansobjet)
- 2-
FirefoxDOMInspector
Grcesesnombreusesextensions,Firefoxoffreladispositiondesutilisateursdesfonctionnalitstrsutilesquine cessentderavirlesdveloppeurs. Parmi ces extensions, il y en a une, assez mconnue et peu documente, qui se rvle dune grande utilit pour lapprentissageduDOMetlexplorationdelarborescencedudocument.IlsagitdeFirefoxDOMInspector. Cet outil est install automatiquement avec Firefox, condition que vous ayez choisi linstallation personnalise. Si, commelaplupartdesutilisateurs,vousavezchoisilinstallationstandard,lafaonlaplussimplepourdisposerdecet outil consiste dsinstaller le navigateur et le rinstaller en choisissant la bonne option (voir captures dcran ci aprs).Ilnyaaucunecrainteavoirpourvotreprofil,votreconfiguration,vosmarquepagesouautresextensionsrien neseramodifi.
Unefoislapageaffiche,pourdmarrerDOMInspector,onpeututiliserleraccourciclavier [Ctrl] [Maj] ioupasser parlemenuOutilsDOMInspector.
- 1-
UnefoisDOMInspectorouvert,larborescencedudocumentsetrouvegauche.Chaquelignereprsenteunn ud.On peut naviguer dans larbre du DOM en cliquant les petites icnes + ou pour dployer ou refermer larborescence de chaque n ud. Dans la partie de droite, avec loption Javascript Object du menu droulant, saffichent toutes les propritsdenodeNamepreviousSibling(etplusencore...)dun udslectionndanslapartiegauche. ReprenonslefichierHtmldupointHierarchisationdesnoeudsdecechapitre. <html> <head> <title>Le DOM</title> </head> <body> <h1>Titre de niveau 1</h1> <p>Texte du paragraphe</p> </body> </html> CeluicisaffichedansDOMInspectorcommesuit:
Pour des documents plus consquents, on peut aussi utiliser la fonction de recherche par id, balise ou attribut en passantparmenuRechercherRechercherunnudet[F3]pourtrouverlen udsuivant.
- 2-
Danslafentredegauche,vouspouvezchoisirdafficherdiffrentstypesdinformations:
q
DOMNodesestlavuepardfaut,elleaffichelastructuredelapage. BoxModelpermetdeconnatrelaposition,lesdimensions,lesmarges,labordureouleremplissagedunebote. XBLBindingsestdestinauxdveloppeursquiutilisentleXUL(XMLbasedUserinterfaceLanguage). CSSStyleRulesmontretouteslesrglesCSSappliquesaun udslectionn. Computed Style indique toutes les rgles appliques au n ud slectionn, quelle que soit leur origine (dclarationexplicite,scriptouhritage). JavaScriptObjectmontretouslesobjetsJavaScriptutiliss.
Ainsi, DOM Inspector est bien plus quun outil pour explorer larborescence des n uds. Il permet, par exemple, de dbugueretmodifierendirectundocumentmaistoutessesfonctionsdpassentlecadredecetouvrage.
- 3-
ParticularitdeFirefox
UneutilisationplusintensivedeDOMInspectorfaitapparatreuneinterprtationparticuliredelarborescenceduDOM de la part de Firefox. En effet, Firefox et les autres navigateurs de la famille Mozilla considrent les sauts de ligne du codecommedesn udsdetextevides,chosequenefaitpasMicrosoftInternetExplorer. NotredocumentHtmldupointHierarchisationdesnoeudsdecechapitreestinterprtcommetelparInternetExplorer. Soit, <html> <head> <title>Le DOM</title> </head> <body> <h1>Titre de niveau 1</h1> <p>Texte du paragraphe</p> </body> </html> ParcontreFirefoxlinterprteraainsi: <html>n uddetexte <head>n uddetexte <title>Le DOM</title>n uddetexte </head>n uddetexte <body>n uddetexte <h1>Titre de niveau 1</h1>n uddetexte <p>Texte du paragraphe</p>n uddetexte </body>n uddetexte </html> LenombredenfantsdunlmentestdoncdiffrentselonqueledocumentestaffichparInternetExplorerouFirefox. Cequeconfirmelexpriencesuivante. Ainsilemmecodealert(x.childnodes.length)rvleunrsultatdiffrentpourundocumentidentique: DansInternetExplorer:
DansFirefox
Cette diffrence dinterprtation du DOM peut entraner des variations notables entre les deux navigateurs. Les dveloppeurs sen accommodent en limitant laccs par les proprits de lobjet n ud, des lments proches dun objetdtermin.CestcequenousallonsfaireplusloindansnotretudedAJAXauxchapitresLapprocheAJAXetAJAX parlexemple.
- 1-
Accderauxnuds
1.Parlaprocdureclassique
CestlamthodequenousavonstudieetutilisedanslechapitrepartieLeJavaScriptdecetouvrage.Elleconsiste dfinirlechemin,dobjetenobjet,verslobjetconcern. Cettemthodenemetpasencoreen uvrelesspcificationsduDOMetatappeleaposterioriDOMniveau0.Elle est encore tout fait valable et reconnue par les diffrents navigateurs du march, et mme si son implmentation nestpastoutercenteelleestassezpratiquedanslecasdeformulairesparexemple. Exemple <!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" xml:lang="fr" lang="fr"> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function test() { var nom = document.form.votrenom.value; var prenom = document.form.votreprenom.value; var age = document.form.votreage.value; alert(nom + " " + prenom + "\n" + age + " ans"); } //]]> </script> </head> <body> <form name="form" action=""> Nom : <input type="text" name="votrenom" value="Nom" /><br /> Prnom : <input type="text" name="votreprenom" value="Prnom" /><br /> Age : <input type="text" name="votreage" value="Age" /> <p><input type="submit" value="Entrer" onclick="test()" /></p> </form> </body> </html>
- 1-
2.ParlamthodegetElementById
LamthodeJavaScriptgetElementByIdparcourtledocumentHtmlouXhtmllarecherchedunn uduniquequiat spcifiparlattributid.Cetidentifiantiddoittreuniquedansledocument. LetermeElementdegetElementByIDestbienausinguliercarilnepeutyavoirquunseulidentifiantportantcenom. Exemple Auclicsuruntitredeniveau1,retournerdansunebotedalertelenomdun ud(nodeName). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> // <![CDATA[ function valeur() { var x = document.getElementById("titre").nodeName; alert(x); } // ]]> </script> </head> <body> <h1 id="titre" onclick="valeur()">Titre de niveau 1</h1> <p>Cliquez sur le titre</p> </body> </html>
LamthodegetElementById,appliqueaudocument,accdelidentifiantsignalenargument("titre")etlaproprit den udnodeNameluiestapplique.Cettevaleur,stockedanslavariablex,estaffichedanslabotedalerte. C ette mthode getElementById nest que rarement utilise dans un document XML car elle recherche les attributsdetypeidquidoiventalorstredfinisdansunDTD(DocumentTypeDefinition)particulier.
3.ParlamthodegetElementsByName
- 2-
La mthode getElementsByName permet de slectionner les lments portant un nom donn, spcifi par lattribut name. Les lments portant le mme nom sont stocks dans une liste de n uds. Cette liste se gre comme un tableauArray. LetermeElementsdegetElementsByNameestbienauplurielcarplusieurslmentsportantlemmenompeuventse trouverdansledocument. Exemple AccdonslavaleurdelatroisimelignedetexteparlamthodegetElementsByName. <!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" xml:lang="fr" lang="fr"> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function test() { var age = document.getElementsByName("in")[2].value; alert(age + " ans"); } //]]> </script> </head> <body> <form name="form" action=""> Nom : <input type="text" name="in" value="Nom" /><br /> Prnom : <input type="text" name="in" value="Prnom" /><br /> Age : <input type="text" name="in" value="Age" /> <p><input type="submit" value="Entrer" onclick="test()" /></p> </form> </body> </html> La mthode getElementsByName, applique au document, accde la troisime balise ayant lattribut name="in" par getElementsByName("in")[2].Savaleurestrcupreparvalue.Cettevaleur,stockedanslavariableage,estaffiche danslabotedalerte.
L attribut name est un hritage du Html 4.0. Son emploi est dprci (deprecated) en Xhtml au profit de lidentifiant id. Ainsi lemploi de getElementsByName est de moins en moins frquent. Il est mme ignor dans certainesparutionsrcentes.
- 3-
4.ParlamthodegetElementsByTagName
La mthode getElementsByTagName parcourt le document la recherche de toutes les balises dun type spcifique, signal en argument. Ces balises sont contenues dans une liste (nodeList) qui se gre comme les tableaux de type Array. LetermeElementsdegetElementsByNameestbienauplurielcarilnepeutyavoirplusieursbalisesdemmetypedans ledocument. Exemple Accdonslavaleurdela3melignedetextepargetElementsByTagName. <!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" xml:lang="fr" lang="fr"> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ function test() { var age = document.getElementsByTagName("input")[2].value; alert(age + " ans"); } //]]> </script> </head> <body> <form name="form" action=""> Nom : <input type="text" value="Nom" /><br /> Prnom : <input type="text" value="Prnom" /><br /> Age : <input type="text" value="Age" /> <p><input type="submit" value="Entrer" onclick="test()" /></p> </form> </body> </html> La mthode getElementsByTagName, applique au document, accde la troisime balise <input/> par getElementsByTagName("input")[2].Savaleurestrcupreparvalue.Cettevaleur,stockedanslavariableage,est affichedanslabotedalerte. Lacaptureestidentiquecelledupointprcdent. C ettemthode,getElementsByTagName,esttrsfrquemmentutilisedanslesdocumentsXML.
5.Parlespropritsdesnuds
Ilestthoriquementpossibledaccdernimportequellmentparuncodedugenre: x.parentNode.lastChild.childNodes[2].firstChild.nextSibling; Cettefaondeprocderneservlecependantpastrspratiquelusagecar:
q
Lecodedevientrapidementillisible. Une simple mise jour de la page risque de modifier compltement larborescence du document et ncessiteraitalorslarcriturecomplteducode. LesnavigateursnontpaslammeinterprtationduDOM,spcialementencequiconcernelessautsdeligne dans le code que Firefox considre comme des lments texte vide et que Explorer ignore (voir ciavant au
- 4-
pointParticularitdeFirefox). Ainsi,lesdveloppeursutilisentlesmthodes getElementById, getElementsByName ougetElementsByTagName pour se rapprocherdellmentet,partirdel,utilisentlespropritsfirstChild,parentNodeouautrespropritssimilaires pouraccderllmentsouhait. Mettonsenpratiquelaprocduredterminesoitunsautdelonguedistanceetensuiteuneexplorationlimite. Exemple1 Soitlecodesuivant: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> </head> <body> <h1 id="titre">Titre de niveau 1</h1> <p>Paragraphe 1</p> <div>Texte quelconque</div> <form> La rponse :<br /> <input id="texte" type="text" /> </form> </body> </html>
Larborescenceseprsentecommesuit:
- 5-
Auclicsurledocument,affichonsdansunelignedetexte,letextecomprisentrelesbalises <h1> ... </h1>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> // <![CDATA[ function valeur() { var y=document.getElementById("texte"); var x=document.getElementById("titre").firstChild; y.value=x.nodeValue; } // ]]> </script> </head> <body onclick="valeur()"> <h1 id="titre">Titre de niveau 1</h1> <p>Paragraphe 1</p> <div>Texte quelconque</div> <form> La rponse :<br /> <input id="texte" type="text" /> </form> </body> </html>
Llment<h1>estobtenuparlamthode getElementById("titre").partirdel,len udtexteestobtenuparla propritfirstChid.IlsuffitalorsdafficherlavaleurparlapropritnodeValue.

q
Auclicsurledocument,afficherdanslalignedetexte,letextecomprisentrelesbalises<div> ... </div>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> // <![CDATA[
- 6-
function valeur() { var y = document.getElementById("texte"); var x = document.getElementById("titre").parentNode.childNodes[2].firstChild; y.value=x.nodeValue; } // ]]> </script> </head> <body onclick="valeur()"> <h1 id="titre">Titre de niveau 1</h1> <p>Paragraphe 1</p> <div>Texte quelconque</div> <form> La rponse :<br /> <input id="texte" type="text" /> </form> </body> </html>
La mthode getElementById("titre") accde la balise <h1>. partir de l, le n ud parent est obtenu par la propritparentNodes,soitlabalise<body>.Onredescendalorsversllmentenfant<div>parchildNodes[2].Ilfaut encore descendre dun niveau pour atteindre le texte en utilisant firstChild. Le texte est affich par la proprit nodeValue. NotonsquenotrecodenestpascompatibleavecFirefox,causedespassageslalignequisontalorsconsidrs commedeslmentsenfant(lmentsdetextevide). Exemple2 Soitprsentuntableauduneligneettroiscolonnes: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> </head> <body> <table border="1" bordercolor="black" cellpadding=3" style="border-collapse: collapse;"> <tr> <td>Cellule 1</td> <td id="di">Cellule 2</td> <td>Cellule 3</td> </tr> </table>
- 7-
</body> </html>
Larborescenceseprsentecommesuit:
Auclicsurunbouton,afficherdansunebalise<div> ... </div>,letextecontenudanslapremirecolonnedu tableau,sachantquelidentifiantestplacauniveaudelasecondebalise<td>,doncsurladeuximecolonne.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta<+>http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> //<![CDATA[ function valeur() { var y = document.getElementById("texte"); var x = document.getElementById("di").previousSibling.firstChild; y.innerHTML =x.nodeValue; } //]]> </script> </head> <body> <table border="1" bordercolor="black" cellpadding=3" style="border-collapse: collapse;"> <tr> <td>Cellule 1</td> <td id="di">Cellule 2</td> <td>Cellule 3</td> </tr>
- 8-
</table> <form action=""> <input type="button" value="Tester" onclick="valeur()" /> </form> La rponse est : <span id="texte"></span> </body> </html>
Labalise<td>desecondecolonneestobtenuepargetElementById("di").Puislepremier<td>dutableauestaccd par la proprit previousSibling Le texte est atteint par firstChild. Celuici est alors affich grce la proprit nodeValue. Lcrituresuivanteestgalementvalable: document.getElementById("di").parentNode.firstChild.firstChild; oubien document.getElementById("di").parentNode.childNodes[0].firstChild;
P our modifier le contenu de la balise <span> ... </span>, nous avons utilis la proprit innerHtml. Cette propritinnerHtmlatintroduiteparInternetExploreretestdoncpropritaire.Elleatdepuisreprisepar les principaux navigateurs, dont Firefox, mais son implmentation peut dans certaines situations, donner des rsultatsdiffrents.
L apropritinnerHtmlnestpasunstandardduW3Cmaiselleesttellementcommodepourchangerlecontenu dunebalise<div>ou<span>quelesdveloppeurslontlargementadopte.
Auclicsurunbouton,afficherdansunebalise<div> ... </div>,letextecontenudansladernirecolonnedu tableau.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> // <![CDATA[ function valeur() { var y=document.getElementById("texte"); var x=document.getElementById("di").nextSibling.firstChild; y.innerHTML = x.nodeValue;
- 9-
} // ]]> </script> </head> <body> <table border="1" bordercolor="black" cellpadding=3" style="border-collapse: collapse;"> <tr> <td>Cellule 1</td> <td id="di">Cellule 2</td> <td>Cellule 3</td> </tr> </table> <form action=""> <input type="button" value="Tester" onclick="valeur()" /> </form> La rponse est : <span id="texte"></span> </body> </html>
Labalise<td>desecondecolonneestobtenuepargetElementById("di").Puislepremier<td>dutableauestaccd parlapropritnextSibling.LetexteestatteintparfirstChild.CeluiciestalorsaffichgrcelapropritnodeValue. Lcrituresuivantestgalementvalable: document.getElementById("di").parentNode.lastChild.firstChild; oubien document.getElementById("di").parentNode.childNodes[2].firstChild;
- 10 -
Accderauxattributs
Lesattributssontdespropritsdellment,etnonpasdesenfantsdeceluici.Ainsi,nousavonsbesoindefaireappel desprescriptionsduDOMniveau2. Lapropritattributesrenvoieunelistedesattributsdunlmentspcifi.Cettelisteden udsattributsestrenvoye sousformedunobjetdetypeNamedNodeMap.Cequiimpliquequelesattributsserontaccessiblesparleurnom. Soit, var paragraphe = document.getElementsByTagName("p")[0]; var attributs = paragraphe.attributes; Lavariableparagraphercuprelepremierparagraphedudocument.Lapropritattributesappliquecettevariable listelensembledesattributsdeceluici. LamthodegetNamedItem()retrouveunn udselonlenomspcifienargument. Soit: var paragraphe = document.getElementsByTagName("p")[0]; var attributs = paragraphe.attributes; var language= attributs.getNamedItem("lang"); Lavariablelanguagecontientlattributlangdupremierparagraphedudocument. Exemple Retrouvonslalanguedesdiffrentstitres: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript"> // <![CDATA[ function trouver() {var selection = document.getElementById("liste").selectedIndex; var paragraphe = document.getElementsByTagName("h2")[selection]; var attributs = paragraphe.attributes; var language= attributs.getNamedItem("lang").nodeValue; alert(language); } // ]]> </script> </head> <body> <h2 lang="fr">Bienvenue!</h2> <h2 lang="en">Welcome!</h2> <h2 lang="de">Willkommen!</h2> <h2 lang="it">Benvenuto!</h2> <form action=""> <select id="liste"> <option>Titre 1</option> <option>Titre 2</option> <option>Titre 3</option> <option>Titre 4</option> </select> <input type="button" onclick="trouver(liste)" value="Trouver la langue" /> </form> </body> </html> La variable selection contient lindex slectionn (selectedIndex) de la liste droulante. Par getElementsByTagName ("h2")[selection],onaccdeauparagrapheconcern.Lalistedesattributs(paragraphe.attributes)estcre.Enfin
- 1-
lavariablelanguagenousfournitlavaleur(nodeValue)delattributlangparlecodeattributs.getNamedItem("lang").
Les attributs en XML peuvent contenir des donnes. Il est ainsi trs utile de pouvoir y accder dans les applications AJAX.
- 2-
Modifierlahirarchisation
Le W3C DOM vous permet de crer vos propres n udslmentoun uds texte et de les insrer dans le document, modifiantainsilahirarchiedeceluici.
1.LamthodecreateElement
LamthodecreateElementpermet,commesonnomlesuggre,decrerunnouvellment. Exemple var x = document.createElement("h1"); var x = document.createElement("div"); Ilfautnoterquellmentainsicrnapparatpasencoredansledocument.Il faututiliserlesmthodesappendChild ouinsertBeforepourlajouterceluici.
2.LamthodecreateTextNode
LamthodecreateTextNodecreunn udtextedansledocument. Exemple var x = document.createElement("h1"); var y = document.createTextNode("Titre de niveau 1"); Ilfautnoterquelen udainsicrnapparatpasencoredansledocument.IlfaututiliserlesmthodesappendChild ouinsertBeforepourlajouterceluici.
3.LamthodeappendChild
LamthodeappendChildajouteunlmentcommederniern udenfantdunn udspcifienargument. LamthodeappendChildsappliquedonctoujoursunn udparent. Exemple var x = document.getElementsByTagName(p)[0]; x.parentNode.appendChild(x); Prenonsuneapplicationcompltepourillustrerdefaondtaille,lefonctionnementdelamthodeappendChild. SoitunfichierXhtml: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> </head> <body> <h1>Titre de niveau 1</h1> <p>Paragraphe 1</p> <p>Paragraphe 2</p> </body> </html> Larbredesn uds,limitlabalisebodyetsesdescendants,estlesuivant
- 1-
Auclicdelasourisdanslafentredudocument,appliquonslamthodeappendChildlabalise<h1>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title>. <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function actualiser(){ var x = document.getElementsByTagName(h1)[0]; x.parentNode.appendChild(x); } //]]> </script> </head> <body onclick=actualiser()> <h1>Titre de niveau 1</h1> <p>Paragraphe 1</p> <p>Paragraphe 2</p> </body> </html>
- 2-
La balise <h1> est obtenue par getElementsByTagName(h1)[0], puis la balise parent <body> est atteinte par la mthodeparentNode.Enfin,labalise<h1>estplacecommedernierenfantparappendChild,ainsi<h1>seretrouveen dernireposition. Larbredudocumentadonctmodifi:
Ouencore,partirdufichierXhtmlinitial,ajoutonsaudocumentunlmentcrparcreateElement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function actualiser(){ var x = document.createElement("p"); var texte = document.createTextNode("Je suis le petit nouveau"); y = x.appendChild(texte); document.body.appendChild(x); } //]]>
- 3-
</script> </head> <body onclick=actualiser()> <h1>Titre de niveau 1</h1> <p>Paragraphe 1</p> <p>Paragraphe 2</p> </body> </html> Par la variable x, la mthode createElement("p") cre un nouveau paragraphe. Un nouveau texte est dfini par createTextNode("Je suis le petit nouveau").Letexteestassocilabaliseparx.appendChild(texte). Le nouvel lmentdanssatotalitestinsrdansledocumentcommedernierenfantdelabaliseparent<body>parlaproprit appendChild.
4.LamthodeinsertBefore
LamthodeinsertBeforepermetdinsrerunn udavantunautren ud. Cettemthodeestutiliselorsquelonsouhaiteajouterunlmentsansquildevienneledernierlmentenfant(voir appendChild). Exemple x.parentNode.insertBefore(x,y); Ainsi, en reprenant le document Xhtml du point prcdent, insrons la balise <h1> aprs la premire balise de paragraphe(<p>). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" />
- 4-
<meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function actualiser(){ var x = document.getElementsByTagName(p)[0]; var y = document.getElementsByTagName(h1)[0]; x.parentNode.insertBefore(x,y); } //]]> </script> </head> <body onclick=actualiser()> <h1>Titre de niveau 1</h1> <p>Paragraphe 1</p> <p>Paragraphe 2</p> </body> </html>
La variable x repre par getElementsByTagName(p)[0] le premier paragraphe <p>. La variable y dsigne avec getElementsByTagName(h1)[0] la balise <h1>. Ensuite lordre des enfants de la balise <body>(parentNode) est intervertiparinsertBefore(x,y). Larbremodifiseprsentecommesuit:
- 5-
5.LamthodereplaceChild
LamthodereplaceChildremplaceunn udparunautren ud. Len udainsiremplac,estsupprimainsiquetoussesdescendants. Exemple x.parentNode.replaceChild(x,y); RemplaonsledeuximeparagraphedenotredocumentXhtmlparllment<h1>. Lecodedevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function actualiser(){ var x = document.getElementsByTagName(h1)[0]; var y = document.getElementsByTagName(p)[1]; x.parentNode.replaceChild(x,y); } //]]> </script> </head> <body onclick=actualiser()> <h1>Titre de niveau 1</h1> <p>Paragraphe 1</p> <p>Paragraphe 2</p> </body> </html>
La balise <h1> est slectionne par getElementsByTagName(h1)[0] et le second paragraphe <p> par getElementsByTagName(p)[1].ParlapropritreplaceChild,onremplacelesecondlmentparlepremier.
- 6-
Ilfautnoterquellment<h1>achangdepositionetquelesecondparagraphe<p>adisparududocument.Lenode textede<h1>asuivilechangementdeposition. Larbremodifidevient:
6.LamthoderemoveChild
LamthoderemoveChildsupprimelen ud(etventuellementsesdescendants)fournienargument. var x = document.getElementsByTagName(p)[0]; x.parentNode.removeChild(x); Supprimonslepremierparagraphe<p>dudocument. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function actualiser(){ var x = document.getElementsByTagName(p)[0]; x.parentNode.removeChild(x); } //]]> </script> </head> <body onclick=actualiser()> <h1>Titre de niveau 1</h1> <p>Paragraphe 1</p> <p>Paragraphe 2</p> </body> </html>
- 7-
Aprsavoirreprllmentsupprimer,soitgetElementsByTagName (p)[0],ilestsupprimdelabalise<body>par lapropritremoveChild. Larbredudocumentseprsentecommesuit:
7.Uneapplicationrcapitulative
Cescriptpermetdajouter,desupprimer,dinsreretderemplacerdesparagraphesdetexte(voirlesquatreboutons radiopourlesquatreactionspossibles).Leparagrapheinsrerdanslapageprovientdunezonedetexte.Silaction ncessitedeconnatreunnumrodeparagrapheceluiciserafourniparunmenudroulant,actualischaqueaction antrieure.
- 8-
LecodedufichierXhtmlinitialest: <!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" xml:lang="fr" lang="fr"> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <form action=""> <p> <textarea id="zonetexte" rows="3" cols="30"></textarea> </p> <p> <input type="radio" name="bouton" />Ajouter <input type="radio" name="bouton" />Supprimer <input type="radio" name="bouton" />Insrer avant <input type="radio" name="bouton" />Remplacer </p> <p> Quel paragraphe ? : <select id="liste"></select> <input type="submit" value="Tester"/></p> </form> <div id="modifiable"> </div> </body> </html> Commenonslescriptparlafonctionajouter() function ajouter() { var contenu = document.getElementById("zonetexte").value; var newparag = document.createElement("p"); var newtexte = document.createTextNode(contenu); newparag.appendChild(newtexte); changement.appendChild(newparag); document.getElementById("zonetexte").value=""; } La zone de texte est atteinte par la mthode getElementByID prenant en paramtre son identifiant (zonetexte). La propritvaluenousfournitsavaleur.Cettevaleureststockedanslavariablecontenu.Lavariablenewparagcrepar la mthode createElement un nouveau n ud lment (ici un paragraphe p). La variable newtexte cre par createTextNode,unnouvellmenttextedontlecontenuestfourniparlavariablecontenu.Len udtexteestassoci au nouveau n ud lment par newparag.appendChild(newtexte). Le tout est inclus en dernire position dans le documentchangement.appendChild(newparag)ochangementatdfiniparailleurscommelazonedelabalise<div id="modifiable"> ... </div>.Ladernirelignerinitialiselazonedetexte.
- 9-
Le script doit par ailleurs dclencher cette fonction ajouter() lorsque le bouton radio Ajouter est slectionn. Il doit aussimodifierdynamiquementlesoptionsdumenudroulant<select>,lorsqueleparagrapheesteffectivementajout audocument.Cequefaitlafonctionchanger(). function changer() { var typeaction = -1; var nombreparag = changement.getElementsByTagName("p").length; var boutonradio = document.getElementsByTagName("form")[0].bouton; for (var i=0; i<boutonradio.length; i++) { if (boutonradio[i].checked) { typeaction = i; } } if (typeaction==-1) { alert("Pas de bouton radio selectionn"); } if (typeaction==0) { ajouter(); } document.getElementById("liste").options.length = 0; for (i=0; i<changement.getElementsByTagName("p").length; i++) { document.getElementById("liste").options[i] = new Option(i+1); } return false; } La variable typeaction est initialise 1(var typeaction = -1). Le nombre de paragraphes (varnombreparag) est donnparlalongueur(length)dutableaurenvoypargetElementsByTagName("p"). Le nombre de boutons radio est donn par le nombre de boutons (bouton) prsents dans le formulaire (getElementsByTagName("form")[0]). Une boucle for passe ces boutons en revue pour trouver llment slectionn (checked).Lenumrodordredubouton(boutonradio[i])estlenumrodutypedaction(typeaction = i). Siaucunboutonnatslectionnparlutilisateur,lavariabletypeactionatoujoursgardsavaleurinitiale.Untest surcettevaleurinitiale(if (typeaction==-1))permetdedclencherunebotedalerte. Ici,lepremierboutontantslectionn,letypedactionprendlavaleur0.Ainsiaumoyendunsimpletestconditionnel (if (typeaction==0)),lafonctionajouter()peuttreappele. Le nombre doptions(options.length) du menu droulant (liste)estrinitialis 0.Uneboucle forcomptetousles paragraphes(getElementsByTag-Name("p"))delazone<div id="modifiable">(changement).chaquepassagedela boucle,lalistedesoptionsestalimente(getElementById("liste").options[i])parlenombreencoursplus1dela boucle(new Option(i+1)).
- 10 -
Pourlafonctionsupprimer(): function supprimer() { var choixout = document.getElementById("liste").selectedIndex; var tous = changement.getElementsByTagName("p"); var asupprimer = tous[choixout]; changement.removeChild(asupprimer); } La variable choixout mmorise loption retenue par lutilisateur dans le menu droulant (getElementById ("liste").selectedIndex). La variable choixout note ainsi le numro dordre du paragraphe que lon souhaite supprimer. La variable tous renvoie tous les paragraphes (getElementsByTagName("p")) sous forme dun tableau. Llmentsupprimer(var asupprimer)estdterminenappliquantlavariablechoixoutautableau(tous[choixout]). LasuppressionestobtenuparlamthoderemoveChild(asupprimer)appliquelazonedelabalise<div>. Ilnefautpasoublierdajouterlafonctionchanger(): if (typeaction==1 && nombreparag > 0) { supprimer(); } Lafonctionsupprimernadesensquesilyadesparagraphesdanslazone<div> (nombreparag > 0).
- 11 -
Passonsmaintenantlafonctioninserer(): function inserer() { var choixins = document.getElementById("liste").selectedIndex; var intexte = document.getElementById("zonetexte").value; var newparag = document.createElement("p"); var newtexte = document.createTextNode(intexte); newparag.appendChild(newtexte); var tous = changement.getElementsByTagName("p"); var oldparag = tous[choixins]; changement.insertBefore(newparag,oldparag); document.getElementById("zonetexte").value=""; } Le choix de lutilisateur (getElementById("liste").selectedIndex) est stock dans la variable choixins. La variable intexte rcupre le contenu (value) de la zone de texte (getElementById("zonetexte")). Un nouveau paragraghe (newparag) est cr par la mthode createElement("p"). Un nouveau n ud de texte est cr par la mthode createTextNode(intexte). Le n ud de texte est associ llment (newparag.appendChild(newtexte)). La variable tous liste les paragraphes de la zone modifiable (getElementsByTagName("p")). Puis le paragraphe signal par lutilisateur(var oldparag = tous[choixins]estidentifi.Lenouveauparagraphe(newparag)estinsravantceluici (oldparag)parlamthodeinsertBefore(newparag,oldparag).Enfin,lazonedetexteestrinitialise. Ilfautencoreajouterlafonctionchanger(): if (typeaction==2 && nombreparag > 0) { inserer(); }
- 12 -
Voicilafonctionremplacer(). function remplacer() { var inchoix = document.getElementById("liste").selectedIndex; var intexte = document.getElementById("zonetexte").value; var newparag = document.createElement("p"); var newtexte = document.createTextNode(intexte); newparag.appendChild(newtexte); var tous = changement.getElementsByTagName("p"); var oldparag = tous[inchoix];
- 13 -
changement.replaceChild(newparag,oldparag); document.getElementById("zonetexte").value=""; } Lavariable inchoixnotelechoixdelutilisateur dans le menu droulant. La variableintextereprendlecontenudela zone de texte. La variable newparag cre le nouveau paragraphe par la mthode createElement("p"). La variable newtextecreunnouveaun uddetextecreateTextNode(intexte).Len uddetexteestassociaun udlment (newparag.appendChild(newtexte)). Leparagraphesupprimer(oldparag)estfournipartous[inchoix].Leremplacementduparagrapheseffectueparla mthodereplaceChild(newparag,oldparag).Lazonedetexteestensuiterinitialise. Etilfautajouterlafonctionchanger(): if (typeaction==3 && nombreparag > 0) { remplacer(); }
Lefichieraveclescriptcompletdevient: <!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" xml:lang="fr" lang="fr"> <head> <title>DOM</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/JavaScript"> //<![CDATA[ window.onload = init; var changement; function init() { document.getElementsByTagName("form")[0].onsubmit = function() {return changer();} changement = document.getElementById("modifiable"); } function ajouter() { var contenu = document.getElementById("zonetexte").value; var newtexte = document.createTextNode(contenu); var newparag = document.createElement("p"); newparag.appendChild(newtexte); changement.appendChild(newparag); document.getElementById("zonetexte").value=""; } function supprimer() { var choixout = document.getElementById("liste").selectedIndex; var tous = changement.getElementsByTagName("p"); var asupprimer = tous[choixout]; changement.removeChild(asupprimer); } function inserer() { var choixins = document.getElementById("liste").selectedIndex; var intexte = document.getElementById("zonetexte").value; var newtexte = document.createTextNode(intexte); var newparag = document.createElement("p"); newparag.appendChild(newtexte); var tous = changement.getElementsByTagName("p"); var oldparag = tous[choixins]; changement.insertBefore(newparag,oldparag); document.getElementById("zonetexte").value=""; } function remplacer() { var inchoix = document.getElementById("liste").selectedIndex; var intexte = document.getElementById("zonetexte").value; var newtexte = document.createTextNode(intexte); var newparag = document.createElement("p"); newparag.appendChild(newtexte); var tous = changement.getElementsByTagName("p"); var oldparag = tous[inchoix]; changement.replaceChild(newparag,oldparag); document.getElementById("zonetexte").value=""; } function changer() { var typeaction = -1; var nombreparag = changement.getElementsByTagName("p").length; var boutonradio = document.getElementsByTagName("form")[0].bouton; for (var i=0; i<boutonradio.length; i++) { if (boutonradio[i].checked) { typeaction = i;
- 15 -
} } if (typeaction==-1) { alert("Pas de bouton radio selectionn"); } if (typeaction==0) { ajouter(); } if (typeaction==1 && nombreparag > 0) { supprimer(); } if (typeaction==2 && nombreparag > 0) { inserer(); } if (typeaction==3 && nombreparag > 0) { remplacer(); } document.getElementById("liste").options.length = 0; for (i=0; i<changement.getElementsByTagName("p").length; i++) { document.getElementById("liste").options[i] = new Option(i+1); } return false; } //]]> </script> </head> <body> <form action=""> <p> <textarea id="zonetexte" rows="3" cols="30"></textarea> </p> <p> <input type="radio" name="bouton" />Ajouter <input type="radio" name="bouton" />Supprimer <input type="radio" name="bouton" />Insrer avant <input type="radio" name="bouton" />Remplacer </p> <p> Quel paragraphe ? : <select id="liste"></select> <input type="submit" value="Tester"/></p> </form> <div id="modifiable"> </div> </body> </html>
- 16 -
Prsentation
LobjetXMLHttpRequestpermetdenvoyerdesrequtesHTTPversleserveur,derecevoirdesrponsesetdemettre jourunepartiedelapageWeb.Enmodeasynchrone,cettemisejourseralisesansavoirrechargerlapageetdonc defaontotalementtransparentepourlutilisateur. LobjetXMLHttpRequestsutilisedoncdansunearchitecturedetypeclient/serveur. Dtaillonssonmodedefonctionnement:
q
LobjetXMLHttpRequestestcrparlemoteurJavaScriptdunavigateur. CetobjetestalorsutilispoureffectuerunerequteHTTPversleserveur. Larponseestfournieparcedernieraunavigateur. laideduXhtmletdesfeuillesdestyleCSS,lersultatestensuiteaffichdanslenavigateur.
LavantagedesapplicationsAJAXrsideprincipalementdansladiminutiondela bandepassantecarseuleslesdonnes rclamessontaffichessansavoirrechargertoutledocument,douneinteractivitetunefluiditaccrue. Lobjet XMLHttpRequest a initialement t dvelopp en tant que contrle ActiveX de Microsoft XML Core Services (MSXML), implment dans Internet Explorer 5.0, soit en 1999. Il y eu, au fil des annes, diffrentes versions de ce composant.Citons:
q
Microsoft.XMLHTTP MSXML2.XMLHTTP MSXML2.XMLHTTP.3.0 MSXML2.XMLHTTP.4.0 MSXML2.XMLHTTP.5.0 MSXML2.XMLHTTP.6.0
En2002,lobjetXMLHttpRequestatreprisparleprojetMozillacommeobjetnatifJavaScript.Ilestainsireconnuds les premires versions de Firefox. Les autres navigateurs du march ont suivi en commercialisant Safari 1.2 en 2004, Konqueror,Operaen2005etdernirement,lasurprisegnrale,InternetExplorer7. I lsagitdunebonnenouvellepourleswebdveloppeurs:InternetExplorer7intgrelarequteXMLHTTPentant quobjetJavaScriptnatif.Ceciamliorelacompatibilitsyntaxiqueentrelesdiffrentsnavigateurs.
- 1-
B ienheureusement,lesappelslanciencontrleActiveXsonttoujourssupportsparInternetExplorer7.
Lacompatibilitdelobjet XMLHttpRequestpeuttrejugeglobalementbonnepourlesnavigateursrcents.Maisdans labsolu,cetobjetnestpasreconnuparlesnavigateursdela"vieillegnration". Il faut noter que lobjet XMLHttpRequest nest pas un standard du Web. Cependant cette situation ne devrait pas perdurercar,suiteausuccsgrandissantdelobjetXMLHttpRequest,leW3Caditdiffrents"workingdrafts"(5avril 2006,19juin2006,27septembre2006)quidevraientdbouchersurunestandardisationprochaine.Ilnefaudrapas prvoirdegrandschangementsparrapportlaversionactuelledXmlHttpRequestquelontrouveactuellementdansles navigateurs. Le but de cette dmarche est surtout de standardiser spcifiquement les spcifications de lobjet XMLHttpRequest,afinquetouslesconcepteurssaccordentsurlammeimplmentation.
- 2-
CrerunobjetXMLHttpRequest
PourInternetExplorer(IE5,IE5.5,IE6),ilfautpasserpardesmthodesActiveXpropritairespourcreruneinstance delobjet. var xhr = new ActiveXObject("Microsoft.XMLHTTP"); ouencore: var xhr = new ActiveXObject("Msxml2.XMLHTTP"); Cesdeuxmthodesfournissentunrsultatidentiquemaisvarientcependantdansleurmodedefonctionnement. La premire est indpendante des versions de MSXML. Avec Microsoft.XMLHTTP, lActiveXObject initialise la dernire bonneversiondeMSXML.CetobjetpeuttreMSXML1.0mais,denosjours,aveclamutationversXPetsonsystmede misejour,ilvatrevraisemblablementremplacpardesversionsplusrcentes. LasecondesebasesuruneversionparticuliredeMSXML2.EnencodantMSXML2.XMLHTTP,lenavigateurvapasseren revuelesdiffrentesversionsdeslibrairiesMSXML2.0pourdterminerlameilleureversionpourcrercetobjet.Chaque checrisquedentranerunmessagederreur.Ilestutiledeprvoircesventualitsdanslecodeavecdesinstructions detypetry ... catch (voirplusloin). Pourlesautresnavigateurs(Mozilla,Firefox,Safari,Konqueror,Opra,IE7),lobjetnatifXMLHttpRequestestutilis. var xhr = new XMLHttpRequest(); Commecettesolutionestlapluscompatiblelheureactuelle,cestcelleciquiseraadoptedanslesinstructions. Lecodepourraittre: if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } Un test prliminaire vrifie si le navigateur supporte lobjet natif XMLHttpRequest soit, dans le cadre de cet ouvrage, pour Firefox et Internet Explorer 7. Si cest le cas (rponse true), lobjet est cr dans la variable var xhr = new XMLHttpRequest(). Dans le cas contraire (rponse false), lobjet est cr par le contrle ActiveX soit pour Internet Explorer5,5.5ou6.Danscecaslobjeteststockdanslavariablexhr = new ActiveXObject("Microsoft. XMLHTTP"). Ilestpeuttrencessairedeprvoirunmessagedalertepourles(rares)utilisateursdontlenavigateurnereconnat paslobjetXMLHttpRequestetpourlequellapplicationAJAXnefonctionnepas. Lecodedevientalors: if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } SilonsouhaiteutiliserMSXML2.XMLHTTP,lecodeleplusfrquemmentrencontrest: if(window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ try { var xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { var xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
} else { alert("Votre navigateur nest pas compatible avec AJAX..."); } LaversionJavaScript1.5aintroduitungestionnairedexceptionaveclesinstructionstry ... catch. Leprincipeestsimple.Linstructiontrydsignelecodequidoittreessay.Siaucuneerreurnestsurvenue,leblocde commandesdecatchestpurementetsimplementignor.Siparcontre,uneexceptionouerreurestdtecte,lecontrle delexcutionpassedirectementaublocdecommandesdsignparlinstructioncatch.Letypedexceptionestidentifi dansunevariable(identificateur).lafindubloccatch,leprogrammecontinuesonexcutionparlinstructionquisuit. Lasuitedonneauxexceptionsidentifiesdanslavariable(identificateur)peutprendredesformesmultiplesselonles besoinsduprogrammeur.Ellespeuventtreignores,traitesparducodeouaffichesdansunmessagederreur.Il estimportantdenoterquecesexceptionsnebloquentpasledroulementduprocessus. try { // instructions essayer } catch (identificateur) { // instructions alternatives } LecodetestedabordlexistencedunobjetnatifXMLHttpRequest.Siceluicinestpastrouv,lescriptserabatsurle contrle ActiveX par if(window.ActiveXObject). On demande alors dessayer (try) de trouver le module MSXML2 (MSXML2.XMLHTTP).Cequiestlecasleplusprobable(voirpointPrsentationduprsentchapitre).SilemoduleMSXML2 nestpastrouv,lacommandeMicrosoft.XMLHTTPestpriseencompte(catch). Si le dveloppeur veut tre assur que JavaScript prenne en compte la dernire version du contrle ActiveX, on peut alors imaginer le script suivant. On essayera dabord de crer lobjet avec la dernire version de MSXML soit par MSXML2.XMLHTTP.6.0.Encasdchec,uneversionplusancienneestessayeetainsidesuitejusqucequelobjetsoit cr. Lecodeproposest: var xhr; try { xhr = new XMLHttpRequest(); } catch(e) { var XmlHttpVersions = new Array(MSXML2.XMLHTTP.6.0, MSXML2.XMLHTTP.5.0, MSXML2.XMLHTTP.4.0, MSXML2.XMLHTTP.3.0, MSXML2.XMLHTTP, Microsoft.XMLHTTP); for (var i=0; i<XmlHttpVersions.length && ! xhr; i++) { try { xhr = new ActiveXObject(XmlHttpVersions[i]); } catch (e) {} } } if (!xhr) alert("Lobjet XMLHttp na pas pu tre cr."); } EnpremierlieulobjetXMLHttpRequest()estinstanci.Silopration choue, lobjetActiveXObject()estinstanci,pour lesversionsdInternetExplorer6ouantrieures.Danscecas,uneboucleforpasseenrevuelesdiffrentesversionsde MSXML2.XMLHTTPquionttencodessouslaformeduntableauArray.OnessayealorsdecrerlobjetActiveXparla version6deMSXML2.Sicelachoue,lerreurestignorecarleblocdecommandesdecatchestvide.Lecodecontinue ententantdecrerlobjetparMSXML2.XMLHTTP.5.0etainsidesuitejusqucequelobjetsoitcr. SilobjetXMLHttpRequestnaputrecr(if (!xhr)),unebotedalertesaffichepouravertirlutilisateur. Exemple Vrifionsauclicdunbouton,silavariablexhrestbienunobjetXMLHttpRequest.Larponseestaffichedansunebote dalerte. <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ var xhr = null; function getxhr(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); alert("xhr est un " + xhr); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); alert("xhr est un " + xhr); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } } //]]> </script> </head> <body> <form action=""> <input type="button" value="Test" onclick="getxhr()" /> </form> </body> </html> LersultatdansInternetExplorer7est:
Notonsquececiestencoreuneapplicationdetypeclient.
- 3-
Propritsetmthodes
Avantdelestudierendtail,jetonsun ilsurlespropritsetmthodesdelobjetXMLHttpRequest. LespropritsdelobjetXMLHttpRequestsont: Proprit readyState Description Retourneltatdelarequte. Gestionnairedvnementsquiprendenchargeles changementsdtatdelarequte. Renvoielecodenumriquedelarponseduserveur HTTP. Renvoielemessageliaucodenumriquedela rponseduserveurHTTP. Rponseduserveursousformedechanede caractres. RponseduserveursousformedundocumentXML.
onreadystatechange
status
statusText
responseText
responseXML LesmthodesdelobjetXMLHttpRequestsont: Mthode
Description Initialiselarequteselonunesriedeparamtres fournisenargument. Effectuelarequte,avecventuellementlenvoide donnes. RenvoielensembledelentteHTTPdelarponse souslaformedunechanedecaractres. RenvoielavaleurdunseulchampdelentteHTTP souslaformedunechanedecaractres. AssigneunevaleurunchampdentteHTTP ventuellementenvoylorsdelarequte. <$I[]Forceundocumenttretraitselonuntypede contenu(MimeType)particulier. <$I[]>Annulelarequte.
open()
send()
getAllResponseHeaders()
getResponseHeader()
setRequestHeader()
overrideMimeType()
abort()
- 1-
Effectuerunerequte
LesmthodesutilisespourtouteslesrequtesHTTPsurleserveursontopen() et send() :
q
open()configurelarequteenspcifiantdiversparamtres send()effectuerellementlarequteetaccdeainsiauserveur.
Lamthodeopen()senoteplusprcismentopen("mthode","urldufichier",mode). Commentaires:
q
"mthode"prendlavaleurGETpourrecevoirunfichierduserveurdistantouPOSTpourenvoyerunfichierversle serveur.Notonslemploideguillemets. "url du fichier" est ladresse absolue ou relative du fichier. Notons lemploi de guillemets. En fonction des limitationsdelobjetXMLHttpRequest,lefichierdoitimprativementsesituerdanslemmedomaine. modeprendlavaleurfalsepourlemodeasynchronequinousintressedanslecadredenotretudeoutrue pouruneexcutionenmodenormal,ousynchrone. Enmodesynchrone,tantquelarponselarequtenestpasparvenue,lescriptsemetenpauseetbloquele navigateur.Cequinestjamaistrsconvivialpourlutilisateur. Enmodeasynchrone,lescriptpoursuitsonexcutionsansbloquerleprocessus.Cequipermetunenavigation plusfluideetplusconfortablepourlutilisateur.
Lamthodesend()senoteplusprcismentsend(contenu) Commentaires:
q
AvecGET,ilfautnotersend(null). Avec POST, il faut noter send("donnes"). Les donnes doivent tre sous la forme dune chane de requte, comme: nom=valeur&autrenom=autrevaleur&ainsi=desuite
Parexemple: open("POST", "http://localhost/ajax/test.php", true); send("param1=x&param2=y"); IlfautgalementnoterquelorsdelenvoidedonnesaveclamthodePOST,ilestrecommanddechangerlentte HTTP de la requte laide de la ligne suivante (voir point Quelques proprits dtailles Mthode getResponse Headerduprsentchapitre):setRequestHeader(Content-Type, application/x-www-form-urlencoded); Lecodedevient if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr_object.open("GET", "test.txt", false); xhr_object.send(null); otest.txtestladresserelativedufichier.
- 1-
C etouvragetantcentrsurlimplmentationdAJAXctclient,nousutiliseronssurtoutlamthodeGET<$I[]>. La mthode POST<$I[]> envoie les donnes vers des programmes serveur PHP ou ASP.net par exemple : le traitementdesdonnesdpasselecadredecetouvrage.
- 2-
Quelquespropritsdtailles
1.PropritreadyState
LapropritreadyStatedelobjetXMLHttpRequestpermetdeconnatrelvolutiondelarequte.Cettevolutionprend successivement5valeursreprisesdansletableausuivant: Valeur 0ouuninitialized 1ouloading 2ouloaded 3ouinteractive 4oucomplete Description Larequtenestpasinitialise. Dbutdetransfertdesdonnes. Lesdonnessonttransfres. Lesdonnesreuessontpartiellementaccessibles. Lesdonnessontcompltementaccessibles.
Cestlavaleur4oucompletequiretientnotreattentioncar,unefoisobtenue,lesdonnestransfrespeuventalors tretraites. LaccslapropritreadyStateseffectueparlvnementonreadystatechangeauqueldoittreassociunefonction. Danslecasprsent,cettefonctionpermettradeconnatrelavaleurpriseparreadyState. Lecodedevient: if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function() { if(xhr.readyState == 4) { // instructions } } xhr.open("GET", test.txt, false); xhr.send(null); Ilfautnoterquelecodeajoutpourconnatreltatdelarequte,doitprendreplacedanslescriptavantlinstruction send(). Exemple1 Auclicsurunbouton,testonssilefichiertest.txtabientrceptionn(valeur4dereadyState).Lersultatestaffich dansunebotedalerte. Lefichierexemple.htm: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function getxhr() { var xhr=null; if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { alert("Fichier transmis"); } } xhr.open("GET", "test.txt", true); xhr.send(null); } //]]> </script> </head> <body> <form action=""> <input type="button" value="Test" onclick="getxhr()" /> </form> </body> </html> Lefichiertest.txtcomportelesmots"Jeviensduserveur". LersultatdansFirefox2est:
Cetexempleconstituenotrepremireapplicationclientserveur. Pour plus de commodit, elle ncessite linstallation dun serveur HTTP local, par exemple IIS (Internet Information Services)ouEasyPHP(voirchapitreLenvironnementdetravailoutilsctserveur). Il faut ainsi charger le fichier exemple.htm et test.txt sur le disque dur dans le dossier Inetpub wwwroot si vous utilisezIISouProgramFilesEasyPHP18wwwsivousutilisezEasyPHP. Danslenavigateur,lefichierexemple.htmestaccessibleenintroduisantladressehttp://localhost/exemple.htmsivous utilisezIISouhttp://127.0.0.1/exemple.htmsivousutilisezEasyPHP. S i vous modifiez le fichier htm, il faut garder lesprit que le serveur local utilise la copie mise en cache du navigateur au lieu dextraire le nouveau le fichier sur le disque dur, risquant ainsi de ne pas tenir compte des modificationsapportes. Exemple2 Auclicsurunbouton,notonslesdiffrentstatsdelarequtedansunebalise<div> ... </div>.Lefichiertest.txtest inchang. <!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" xml:lang="fr" lang="fr">
<head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function getxhr(){ var xhr=null; if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function(){ monDiv = document.getElementById("DivElement"); if(xhr.readyState == 1){ monDiv.innerHTML += "Status: 1 (loading)<br />"; } if (xhr.readyState == 2){ monDiv.innerHTML += "Status: 2 (loaded)<br />"; } if (xhr.readyState == 3){ monDiv.innerHTML += "Status: 3 (interactive)<br />"; } if (xhr.readyState == 4){ monDiv.innerHTML += "Status: 4 (complete)<br />"; } } xhr.open("GET", "test.txt", true); xhr.send(null); } //]]> </script> </head> <body> <form action=""> <input type="button" value="Test" onclick="getxhr()" /> </form> <div id="DivElement"></div> </body> </html> LersultatdansExplorer6est:
Ne vous tonnez pas si vous nobtenez pas exactement le mme message. Selon limplmentation de lobjet
- 3-
XMLHttpRequest,certainstatspeuventtreignors.Ainsi,onrapportequOperanetientcomptequedestats3et4. InternetExplorerneretientquelestats2,3et4lorsquedesversionsplusrcentesdeMSXML2.0sontutilises.
2.Propritstatus
LapropritstatusrenvoielecodeHTTPindiquantlersultatdeladernirerequteeffectue. Celuicivautparexemple:
q
200silarequteatexcuteavecsuccs, 403pourunaccsinterdit, 404pourunfichiernontrouv 500pouruneerreurinterneauserveur.
VoustrouverezcidessousunelisteplusdtailledescodesHTTP. Code 100 101 200 201 202 203 204 205 206 300 301 302 303 304 305 307 400 401 402 Description Continue Switchingprotocols OK Created Accepted NonAuthoritativeformation NoContent ResetContent PartialContent MultipleChoices MovedPermanently Found SeeOther NotModified UseProxy TemporaryRedirect BadRequest Unauthorized PaymentRequired
- 4-
403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 500 501 502 503 504 505
Forbidden NotFound MethodNotAllowed NotAcceptable ProxyAuthentificationRequired RequestTimeout Conflict Gone LengthRequired PreconditionFailed RequestEntityTooLarge RequestURITooLong UnsupportedMediaType RequestedRangeNotSuitable ExpectationFailed InternalServerError NotImplemented BadGateway ServiceUnavailable GatewayTimeout HTTPVersionNotSupported
Unelistecompltepeuttreconsulteladresse: www.w3.org/Protocols/rfc2616/rfc2616sec10.html. LesinformationsfourniesparreadyStatesont,danslapratique,troppartiellescarlarequtepeutavoirteffectue maissanssuccs(parexempleavecuncode404fichiernontrouv).Ainsi,ilestprudentdedoublerletestreadyState ==4parstatus==200quiconfirmequelarequteabienteffectueavecsuccs. Lecodedevientalors if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { // instructions
- 5-
} } xhr.open("GET", test.txt, false); xhr.send(null); Lecodecompletdelexempleprcdentdevient: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function getxhr(){ var xhr = null; if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200) { alert("Fichier transmis"); } } xhr.open("GET", "test.txt", true); xhr.send(null); } //]]> </script> </head> <body> <form action=""> <input type="button" value="Test" onclick="getxhr()" /> </form> </body> </html> LacapturedcranestidentiquecelledupointQuelquespropritsdtailles. Onpeutaussiimaginerunautrecode. if (xhr.readyState == 4) { if (xhr.status == 200) { // instructions } } Ici,letestpourvrifiersistatusvaut200neseffectuequelorsquelefichierattransmis(readystate==4).
3.PropritresponseText
LapropritresponseTextcontientlarponsedelarequtesousformedechanedecaractres(String). Exemple1 Auclicdunbouton,affichezdansunebotedalerteletextedufichiertest.txt. Lefichiertest.txtcomportelaphrase:"Jeviensduserveur".
- 6-
<!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function getxhr(){ var xhr = null; if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200) { alert(xhr. responseText); } } xhr.open("GET", "test.txt", true); xhr.send(null); } //]]> </script> </head> <body> <form action=""> <input type="button" value="Test" onclick="getxhr()" /> </form> </body> </html> LersultatdansInternetExplorer7est:
Exemple2 Au clic dun bouton, affichez dans une ligne de texte, le contenu du fichier test.txt. Le fichier test.txt comporte la phrase:"Jeviensduserveur". <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript>
//<![CDATA[ function getxhr(){ var xhr = null; if (window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById("txt").value = "Reu du serveur - " + xhr.responseText; } } xhr.open("GET", "test.txt", true); xhr.send(null); } //]]> </script> </head> <body> <form name="ajax" action=""> <p> <input type="button" value="Envoyer la requte" onclick="getxhr()" /> <input type="text" name="texte" id="txt" size="32" value="" /> </p> </form> </body> </html> LersultatdansFirefox:
Exemple3 Auclicdunbouton,affichezdansunebotedalerte,letextedufichiertest.xml. Lefichiertest.xmlestlesuivant: <?xml version="1.0"?> <compilation> <mp3> <titre>Foule sentimentale</titre> <artiste>Alain Souchon</artiste> </mp3> <mp3> <titre>Shape of my heart</titre> <artiste>Sting</artiste> </mp3> <mp3> <titre>Ta douleur</titre> <artiste>Camille</artiste>
- 8-
</mp3> </compilation> Lecodedufichierhtmest: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function getxhr(){ var xhr=null; if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); } } xhr.open("GET", "test.xml", true); xhr.send(null); } //]]> </script> </head> <body> <form action=""> <input type="button" value="Test" onclick="getxhr()" /> </form> </body> </html>
- 9-
LefichierXMLestretourndanscetexemple,commeunechanedecaractreetnonsouslaformedunobjetavecla structuration du fichier XML. Les lments ne sont pas accessibles par des mthodes comme getElementById, getElementsByTagNameouquivalentes.
4.PropritresponseXML
La proprit responseXML renvoie les donnes comme un objet document XML. Il pourra alors tre examin et trait selonlesmthodesetpropritsduDocumentObjectModel(DOM). SoitaveclefichierXMLsuivant: <?xml version="1.0"?> <racine> Je suis un texte </racine> Llment"Jesuisuntest"estaccessibleparlecode: var xmldoc = xhr.responseXML; var root_node = xmldoc.getElementsByTagName(racine)[0]; alert(root_node.firstChild.nodeValue); NousreviendronspluslonguementsurlaccsauxdonnesXMLetleurtraitementdanslechapitresuivantconsacr AJAX. I lestremarquerlorsdeltude de ce chapitre que la mthodeXMLHttp- Requestportefinalementassezmal sonnomcarellenetraitepasqueduXMLmaisaussidutexteettoussesdrivscommedesfichiersXhtmlou Html,desfichiersJavaScriptoutoutautrecode. Exemple Auclicdunbouton,affichezdansunebotedalerteletextedufichiertest.xml. Lefichiertest.xmlestidentiqueceluidupointprcdent. Lecodedufichierhtmest: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function getxhr(){ var xhr = null; if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseXML); } } xhr.open("GET", "test.xml", true); xhr.send(null); } //]]> </script> </head> <body> <form> <input type="button" value="Test" onclick="getxhr()" /> </form> </body> </html>
AvecresponseXML,lefichierXMLestbienretourncommeunobjet.
- 11 -
Quelquesmthodesdtailles
1.MthodegetAllResponseHeaders
Pourcequisuit,ilfautbiendistinguerunentteHTTPetunenttedefichierHtml.Lesbalisescomprisesdansunen tteHtml,soitentrelesbalises<head> ... </head>envoientdesinformationsconcernantlapageHtml,tandisqueles enttesHTTPenvoientdesinformationsrelativesaufichier. Lentte HTTP est un court message que le serveur Web envoie au navigateur juste avant de lui transmettre le documentluimme.Cemessagesertparexempledonnerlatailledudocumentouindiquerquiladisparu(code 404).IlpeutaussiservirprciserlencodagedufichiergrcelaligneContentType. IlfautaussinoterquavecunerequteHTTP,leserveurrenvoielesenttesdelaressourceoudufichier,paslefichier luimme. Cela signifie que des renseignements sur un document comme Contenttype ou lastmodified sont connus sansavoirtlchargerledocumentluimme. La mthode getAllResponseHeaders() renvoie tous les enttes HTTP de la rponse sous la forme dune chane de caractres. Exemple Auclicdunbouton,afficherdansunebotedalerte,touslesenttesdufichiertest.txt. <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <script type=text/JavaScript> //<![CDATA[ function getxhr(){ var xhr = null; if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200) { alert(xhr.getAllResponseHeaders()); } } xhr.open("GET","test.txt",true); xhr.send(null); } //]]> </script> </head> <body> <form> <input type="button" value="Test" onclick="getxhr()" /> </form> </body> </html> SousInternetExplorer:
- 1-
SousFirefox:
2.MthodegetResponseHeader
La mthode getResponseHeader() renvoie la valeur dun seul champ de lentte HTTP sous forme dune chane de caractres. ElleprendlaformedegetResponseHeader("nom du paramtre den-tte HTTP"). Soit,xhr.getResponseHeader("Content-Type")quineretournequelesrenseignementsconcernantletypedecontenu (ContentType). Exemple Auclicdunbouton,afficherdansunebotedalerte,lenttedecontenudefichier(Contenttype)dufichiertest.xml: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function getxhr(){
- 2-
var xhr = null; if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200) { alert(xhr.getResponseHeader("Content-type")); } } xhr.open("GET","test.xml",true); xhr.send(null); } //]]> </script> </head> <body> <form> <input type="button" value="Test" onclick="getxhr()" /> </form> </body> </html>
3.MthodesetRequestHeader
CettemthodeassigneunevaleurunchampdentteHTTPquiestenvoyelorsdelarequte. ElleprendlaformedesetRequestHeader("nomduparamtredentte","valeurassocieauparamtre"). ElleestspcialementutiliselorsdunenvoiaveclamthodePOSTpourspcifierlencodage: xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
4.MthodeoverrideMimeType
Cettemthodeforceundocumenttretraitselonuntypedecontenuparticulier(MimeType).Onappellesouvent cettemthodelorsdelutilisationderesponseXMLsurunserveurtransmettantduXMLavecunentteContentType incorrect.
- 3-
xhr.req.overrideMimeType(text/xml);
- 4-
Introduction
LapprocheAJAX<$I[]atdfinieauchapitrePrsentationgneraledAJAX,commelutilisationconjointeduJavaScript, duXML,duXSL,duDOMetdelobjetXMLHttpRequest.Leprsentchapitreacommeobjectifderaliserlasynthsedes diffrentscomposantstudispouraboutirdesapplicationsAJAX. RappelonsgalementqueladfinitiondAJAX(JavaScriptetXMLenmodeasynchrone)nedoitpastrepriseaupiedde lalettrecarlobjetXMLHttpRequestpermetdeprendreenchargenonseulementduXMLmaisgalementdutextebrut.
- 1-
Rcuprerettraiterdutexte
CestassurmentlafaonlaplussimpledapprhenderleconceptAJAX.Ellerestenanmoinstrsricheauniveaudes possibilitsoffertesauxdveloppeurs. Affichons, de faon asynchrone, une rponse sous forme de texte dans une zone de la page par la proprit responseText. SoitunepageXhtml.Auclicdelutilisateursurleboutondeformulaire,larponseestaffichedansllment<div id=" affichage "> ... </div>. Lefichiertextecomportelesmots:"Csardumeilleurfilmfranais:JacquesAudiardpour"Debattremonc ursest arrt".Ilestenregistrsurleserveursouslenomdecesar2006.txt. LefichierXhtmlseprsentecommesuit: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <h2>Crmonie des Csars 2006</h2> <form action=""> <input type="button" value="Afficher le Csar" onclick="extraire()" /> </form> <div id="affichage"> La rponse ici ! </div> </body> </html>
laboronslescriptpaspas. Auclicsurlebouton,lafonctionextraire()estappele. var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX...");
- 1-
} Aprsavoirdfinilavariable xhrcommeunevariableglobale,lescriptdfinitlarequteHTTPversleserveurdefaon compatible avec les diffrents navigateurs. Ces lignes de script ont t largement abordes au chapitre Lobjet XmlHttpRequestCrerunobjetXMLHttpRequest. if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var txtdocument = xhr.responseText; afficher(txtdocument); } } xhr.open("GET", "cesar2006.txt", true); xhr.send(null); } } LarequtedoitallerrechercherselonlamthodeGET,lefichiercesar2006.txtdefaonasynchrone(voirchapitreLobjet XmlHttpRequestEffectuerunerequte). Auchangementdtatdelarequte(onreadystatechange),onsassuretout dabord,commetudiauchapitreLobjet XmlHttpRequest Quelquespropritsdtaillesquelleabienabouti(readyState == 4 et status == 200). Le fichier est renvoy simplement comme un fichier texte par responseText (cf chapitre Lobjet XmlHttpRequest Quelques propritsdtailles).Lescriptpassealorslamainlafonctionafficher()aveclefichiertexteenargument(afficher (txtdocument)). function afficher(txtdocument) { var target = document.getElementById("affichage"); target.innerHTML = txtdocument; La fonction afficher() repre tout dabord la zone daffichage pour la rponse, par son identifiant getElementById ("affichage").Lacibleestainsidtermine,etlarponseestalorsafficheparlapropritinneHTML. Lescriptcompletdevientdonc: <script type=text/JavaScript> //<![CDATA[ function afficher(txtdocument) { var target = document.getElementById("affichage"); target.innerHTML = txtdocument; } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var txtdocument = xhr.responseText; afficher(txtdocument); } } xhr.open("GET", "cesar2006.txt", true); xhr.send(null); } } //]]> </script> LedocumentXhtmldevient: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function afficher(txtdocument) { var target = document.getElementById("affichage"); target.innerHTML = txtdocument; } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var txtdocument = xhr.responseText; afficher(txtdocument); } } xhr.open("GET", "cesar2006.txt", true); xhr.send(null); } } //]]> </script> </head> <body> <h2>Crmonie des Csars 2006</h2> <form action=""> <input type="button" value="Afficher le Csar" onclick="extraire()" /> </form> <div id="affichage"> La rponse ici ! </div> </body> </html> Lefichierseprsentedslorscommesuitlcran:
- 3-
Diverses sources recommandent dafficher la rponse, fournie par lapproche Ajax, en vidence, lintention des internautesdbutantsquipourraienttrepertubsdansleurshabitudesdenavigation,cequipeutseraliseraisment parunefeuilledestyleCSS. <style type="text/css"> <!-#affichage { width: 250px; font-family: sans-serif; font-weight: bold; font-size: 16px; margin: 10px; padding: 5px; background-color: #9cf; } --> </style> Ainsi la zone daffichage possde un arrireplan de couleur et est dlimite par une bordure. En outre la police de caractresestdiffrente. LefichierXhtmlfinalprendlaformesuivante: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <<meta http-equiv="Content-Style-Type" content="text/css" /> <script type=text/JavaScript> //<![CDATA[ function afficher(txtdocument) { var target = document.getElementById("affichage"); target.innerHTML = txtdocument; } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) {
xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var txtdocument = xhr.responseText; afficher(txtdocument); } } xhr.open("GET", "cesar2006.txt", true); xhr.send(null); } } //]]> </script> <style type="text/css"> <!-#affichage { width: 250px; font-family: sans-serif; font-weight: bold; font-size: 16px; margin: 10px; padding: 5px; background-color: #9cf; } --> </style> </head> <body> <h2>Crmonie des Csars 2006</h2> <form action=""> <input type="button" value="Afficher le Csar" onclick="extraire()" /> </form> <div id="affichage"> La rponse ici ! </div> </body> </html>
I l ne faut pas sarrter une interprtation limitative de la proprit responseText. En effet, cela signifie que la rponse est renvoye sous forme de texte au sens informatique du terme. Tous les types de format sont acceptsdessfichiersXhtml,desdonnestraitesparduPHPenpassantparducodeJavaScript.Letoutdpendde lutilisationultrieuredecesdonnestextuelles. Soitunfichierjs.txtquicontientletexte:alert("Messagedalerteprovenantduserveur"). PrenonsunfichierXhtml(js.htm).Cefichiernecontientaucuneinstructionalert().Pourtantunebotedalertepeuttre cre en excutant le code JavaScript partir de la chane de caractres contenue dans le fichier js.txt. Ce qui est
- 5-
effectuparlamthodeeval(). <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function getxhr(){ var xhr = null; if(window.XMLHttpRequest){ var xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre navigateur nest pas compatible avec AJAX..."); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200) { eval(xhr. responseText); } } xhr.open("GET", "js.txt", true); xhr.send(null); } //]]> </script> </head> <body> <form action=""> <input type="button" value="Test" onclick="getxhr()" /> </form> </body> </html> Unebotedalertesaffichedonc,alorsquellentaitpasprsentedanslecodedelapageXhtml.
- 6-
RcuprerettraiterduXML
1.ParlesnudsInternetExplorer
Soitlefichiercesar2006.xml: <?xml version="1.0" encoding="ISO-8859-1"?> <cinema> <evenement>Crmonie des Csars</evenement> <sujet>Palmars</sujet> <date>2006</date> <cesar> <categorie> <prix>Csar du meilleur acteur</prix> <nom>Michel Bouquet</nom> <film>Le promeneur du Champ de Mars</film> </categorie> <categorie> <prix>Csar du meilleur film franais</prix> <nom>Jacques Audiard</nom> <film>De battre mon coeur sest arrt</film> </categorie> <categorie> <prix>Csar du meilleur film tranger</prix> <nom>Clint Eastwood</nom> <film>Million dollar baby</film> </categorie> </cesar> </cinema> Sastructureestlasuivante: <cinema> <evenement></evenement> <sujet></sujet> <date></date> <cesar> <categorie> <prix></prix> <nom></nom> <film></film> </categorie> </cesar> </cinema> On souhaite, au clic dun bouton, extraire les donnes incluses dans la troisime balise <categorie>. Soient les informations: Csar du meilleur film tranger Clint Eastwood Million dollar baby LefichierXhtmldedpartcomportesimplementunboutondeformulaireetunebalise<div id="affichage">servant deconteneurpourlarponse. !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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <h2>Crmonie des Csars 2006</h2> <form action="">
- 1-
<input type="button" value="Afficher le Csar" onclick="extraire()" /> </form> <div id="affichage"> La rponse ici ! </div> </body> </html> tudionslescriptendtail. <script type=text/JavaScript> //<![CDATA[ Le script commence par linitialisationdelobjet XmlHttpRequest ou du contrle ActiveX correspondant, comme cela a ttudiauchapitreLobjetXmlHttpRequestCrerunobjetXmlhttpRequestdecetouvrage. var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } Si lobjet xhr existe, le script lance la requte HTTP en veillant utiliser la proprit responseXML pour rcuprer le fichiercesar2006.xml.Celuiciestalorstransmislafonctionafficher(). if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument); } } xhr.open("GET", "cesar2006.xml", true); xhr.send(null); } } La fonctionafficher() doit tout dabord, parcourir larborescence du fichier XML pour retrouver linformationsouhaite. Nousutilisonspourcefaire,lesacquisduchapitreLeDOM(DocumentObjectModel). CedocumentXMLaunebaliseracineappele<cinema> <?xml version="1.0" encoding="ISO-8859-1"?> <cinema> . . . </cinema> Onaccdecen udracineaveclapropritJavaScriptdocumentElement. function afficher(xmldocument) { var cinema; cinema = xmldocument.documentElement; . . } LavariablecinemacontientmaintenantlarborescencedufichierXMLavectousseslmentsenfants. Len udcorrespondantlabalise<cesar>estatteintparlapropritlastChilddun udracinesoitlavariablecinema. <?xml version="1.0" encoding="ISO-8859-1"?>
- 2-
<cinema> <evenement>Crmonie des Csars</evenement> <sujet>Palmars</sujet> <date>2006</date> <cesar> . . . </cesar> </cinema> Lafonctionafficher()devient: function afficher(xmldocument) { var cinema, cesar, categorie; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; . . } Ilnousfautensuiteaccderlatroisimebalise<categorie>.OnutilisenouveaulapropritlastChildmaiscettefois appliqueaun udcesar. <?xml version="1.0" encoding="ISO-88 59-1"?> <cinema> <evenement>Crmonie des Csars</evenement> <sujet>Palmars</sujet> <date>2006</date> <cesar> <categorie> <prix>Csar du meilleur acteur</prix> <nom>Michel Bouquet</nom> <film>Le promeneur du Champ de Mars</film> </categorie> <categorie> <prix>Csar du meilleur film franais</prix> <nom>Jacques Audiard</nom> <film>De battre mon coeur sest arrt</film> </categorie> <categorie> <prix>Csar du meilleur film tranger</prix> <nom>Clint Eastwood</nom> <film>Million dollar baby</film> </categorie> </cesar> </cinema> Lafonctionafficher()devient: function afficher(xmldocument) { var cinema, cesar, categorie; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; . . } Il est possible maintenant daccder la balise <prix> en utilisant la proprit firstChild de la troisime balise <categorie>oudenotrevariablecategorie. <categorie> <prix>Csar du meilleur film tranger</prix> <nom>Clint Eastwood</nom> <film>Million dollar baby</film> </categorie>
Lafonctionafficher()devient: function afficher(xmldocument) { var cinema, cesar, categorie; var prix; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; prix = categorie.firstChild; . . } Nouspouvonscestadeextraireletexteassocilabalise<prix>. <prix>C s a r d u m e i l l e u r f i l m t r a n g e r </prix> Len udtexte"Csardumeilleurfilmtranger"estunlmentenfantdelabalise<prix>.LapropritfirstChilddela variableprixpermetdyaccder.LetexteluimmeestrcuprparlapropritnodeValue. Lescriptdevient: function afficher(xmldocument) { var cinema, cesar, categorie; var prix, textediv; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; prix = categorie.firstChild; textediv = prix.firstChild.nodeValue; . . } Il suffit alors dafficher (innerHTML) ce texte dans la balise <div id="affichage"> ... </div>, repre dans le documentparlamthodegetElementById. function afficher(xmldocument) { var cinema, cesar, categorie; var prix, textediv; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; prix = categorie.firstChild; textediv = prix.firstChild.nodeValue; var target = document.getElementById("affichage"); target.innerHTML = textediv; . . } Procdons de mme pour la balise <nom>, elle est atteinte par la proprit nextSibling applique au n ud prix. Le n udtexte"ClintEastwood"estunlmentenfantdelabalise<nom>.OnpeutyaccderparlapropritfirstChildde lavariablenom.LetexteluimmeestrcuprparlapropritnodeValue. <nom>Clint Eastwood</nom> Lecodesecompltealorscommesuit: function afficher(xmldocument) { var cinema, cesar, categorie; var prix, nom, textediv; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; prix = categorie.firstChild; nom = prix.nextSibling;
- 4-
textediv = (prix.firstChild.nodeValue + "<br />" + nom.firstChild.nodeValue); var target = document.getElementById("affichage"); target.innerHTML = textediv; . . } Nouspouvonsterminerparlabalise<film>atteinteenutilisantlapropritlastChilddelabalise<categorie>. <film>Million dollar baby</film> Len udtexte"Milliondollarbaby"estunlmentenfantdelabalise<film>accdeparlapropritfirstChilddela variable film.LetexteluimmeestrcuprparlapropritnodeValue. Lecodefinaldelafonctionafficher()est: function afficher(xmldocument) { var cinema, cesar, categorie; var prix, nom, film, textediv; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; prix = categorie.firstChild; nom = prix.nextSibling; film = categorie.lastChild; textediv = (prix.firstChild.nodeValue + "<br />" + nom.firstChild.nodeValue + "<br />" + film.firstChild.nodeValue); var target = document.getElementById("affichage"); target.innerHTML = textediv; } //]]> </script> Lescriptesttermin. Lecodecompletduscriptest: <script type=text/JavaScript> //<![CDATA[ function afficher(xmldocument) { var cinema, cesar, categorie; var prix, nom, film, textediv; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; prix = categorie.firstChild; nom = prix.nextSibling; film = categorie.lastChild; textediv = (prix.firstChild.nodeValue + "<br />" + nom.firstChild.nodeValue + "<br />" + film.firstChild.nodeValue); var target = document.getElementById("affichage"); target.innerHTML = textediv; } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){
- 5-
var xmldocument = xhr.responseXML; afficher(xmldocument); } } xhr.open("GET", "cesar2006.xml", true); xhr.send(null); } } //]]> </script> LefichierXhtmlseprsentealorscommesuit: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function afficher(xmldocument) { var cinema, cesar, categorie; var prix, nom, film, textediv; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; prix = categorie.firstChild; nom = prix.nextSibling; film = categorie.lastChild; textediv = (prix.firstChild.nodeValue + "<br />" + nom.firstChild.nodeValue + "<br />" + film.firstChild.nodeValue); var target = document.getElementById("affichage"); target.innerHTML = textediv; } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument); } } xhr.open("GET", "cesar2006.xml", true); xhr.send(null); } } //]]> </script> </head> <body> <h2>Crmonie des Csars 2006</h2> <form action=""> <input type="button" value="Afficher le Csar" onclick="extraire()" /> </form> <div id="affichage">
- 6-
La rponse ici ! </div> </body> </html> cestadedenotretravail,lacapturedcranestlasuivante:
Ajoutonsunefeuilledestyleafindgayerunpeulaprsentation. <style> <!-#affichage { width: 250px; height: 50px; font-family: sans-serif; font-variant: small-caps; font-size: 14px; line-height: 18px; background-color: #9cf; padding: 5px; --> </style> LefichierXhtmlfinalestlesuivant: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type=text/JavaScript> //<![CDATA[ function afficher(xmldocument) { var cinema, cesar, categorie; var prix, nom, film, textediv; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; prix = categorie.firstChild; nom = prix.nextSibling; film = categorie.lastChild; textediv = (prix.firstChild.nodeValue + "<br />" + nom.firstChild.nodeValue + "<br />" + film.firstChild.nodeValue); var target = document.getElementById("affichage");
target.innerHTML = textediv; } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument); } } xhr.open("GET", "cesar2006.xml", true); xhr.send(null); } } //]]> </script> <style> <!-#affichage { width: 250px; height: 50px; font-family: sans-serif; font-variant: small-caps; font-size: 14px; line-height: 18px; background-color: #9cf; padding: 5px; --> </style> </head> <body> <h2>Crmonie des Csars 2006</h2> <form action=""> <input type="button" value="Afficher le Csar" onclick="extraire()" /> </form> <div id="affichage"> La rponse ici ! </div> </body> </html>
- 8-
2.ParlesnudsFirefox
FirefoxetlesautresnavigateursdelafamilleMozillatraitenttouslesespacesvidesainsiquelesindentationsducode XMLcommedesn udsdetextevide(voirchapitreLeDOM(DocumentObjectModel)ParticularitdeFirefox). Reprenonsnotrefichiercesar2006.xml. <?xml version="1.0" encoding="ISO-8859-1"?> <cinema> <evenement>Crmonie des Csars</evenement> <sujet>Palmars</sujet> <date>2006</date> <cesar> <categorie> <prix>Csar du meilleur acteur</prix> <nom>Michel Bouquet</nom> <film>Le promeneur du Champ de Mars</film> </categorie> <categorie> <prix>Csar du meilleur film franais</prix> <nom>Jacques Audiard</nom> <film>De battre mon coeur sest arrt</film> </categorie> <categorie> <prix>Csar du meilleur film tranger</prix> <nom>Clint Eastwood</nom> <film>Million dollar baby</film> </categorie> </cesar> </cinema> PourInternetExplorer,len udracineest<cinema>.Lepremiern udenfant(firstChild)estlabalise<evenement>.Le secondn udenfantestlabalise<sujet>etainsidesuite. Les choses sont diffrentes avec Firefox. Pour ce navigateur, le n ud racine est toujours<cinema> mais le premier lmentenfantestunn udtextevidequiinclutlepassagelaligneaprslabalise<cinema>.AinsipourFirefox,le fichierXMLseprsentecommesuit: <?xml version="1.0" encoding="ISO-8859-1"?> <cinema> nud texte <evenement>Crmonie des Csars</evenement> nud texte <sujet>Palmars</sujet> nud texte <date>2006</date>
- 9-
nud texte <cesar> nud texte <categorie> nud texte <prix>Csar du meilleur acteur</prix> nud texte <nom>Michel Bouquet</nom> nud texte <film>Le promeneur du Champ de Mars</film> nud texte </categorie> . . Ilfaudratenircomptedecetteparticularitdansllaborationducode. Commenconsparaccderllmentracinedudocument. <?xml version="1.0" encoding="ISO-8859-1"?> <cinema> . . . </cinema> ToutcommepourInternetExplorer,lapropritdocument.ElementdelobjetdocumentXMLestreprise. function affiche(xmldocument) { var cinema; cinema = xmldocument.documentElement; . . } Leschosessecompliquentpouratteindrelabalise </cesar>.Onpourraitcroirequelabalise</cesar>estledernier enfant(lastChild)delabalise<cinema>.MaispourFirefox,ledernierenfantdelabalise<cinema>estunn udtextequi suitlabalise</cesar>. <?xml version="1.0" encoding="ISO-8859-1"?> <cinema> nud texte <evenement>Crmonie des Csars</evenement> nud texte <sujet>Palmars</sujet> nud texte <date>2006</date> nud texte <cesar> . . . </cesar> nud texte </cinema> Ainsi,aulieudutilisercinema.lastChild, il faut remonter duncrandanslarborescencepourviterlen ud texte et accderllment<cesar> ... </cesar>,cequipeutseraliseraveclapropritpreviousSibling. function affiche(xmldocument) { var cinema, cesar; cinema = xmldocument.documentElement; cesar = cinema.lastChild.previousSibling; . . } Pourlesmmesraisons,latroisimebalise<categorie>nepeutpastreatteinteparlapropritlastChildapplique
- 10 -
llment<cesar>. <cesar> . . . <categorie> nud texte <prix>Csar du meilleur film tranger</prix> nud texte <nom>Clint Eastwood</nom> nud texte <film>Million dollar baby</film> nud texte </categorie> nud texte </cesar> Elleestatteinteparcategorie = cesar.lastChild.previousSibling. Etainsidesuite... LecodecompletpourFirefoxdevient: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function afficher(xmldocument) { var cinema, cesar, categorie; var prix, nom, film, textediv; cinema = xmldocument.documentElement; cesar = cinema.lastChild.previousSibling; categorie = cesar.lastChild.previousSibling; prix = categorie.firstChild.nextSibling; nom = prix.nextSibling.nextSibling; film = categorie.lastChild.previousSibling; textediv = (prix.firstChild.nodeValue + "<br />" + nom.firstChild.nodeValue + "<br />" + film.firstChild.nodeValue); var target = document.getElementById("affichage"); target.innerHTML = textediv; } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument); } } xhr.open("GET", "cesar2006.xml", true); xhr.send(null); } }
//]]> </script> </head> <body> <h2>Crmonie des Csars 2006</h2> <form action=""> <input type="button" value="Afficher le Csar" onclick="extraire()" /> </form> <div id="affichage"> La rponse ici ! </div> </body> </html>
Cela fonctionne correctement en utilisant le navigateur Firefox, mais le script est compliqu mettre en place. Non seulement,ilfaut"sauter"lesn udstextemaisenplus,lecodepourFirefoxdiffredeceluidInternet Explorer. La solutionestunscriptcompatiblepourlesdeuxnavigateurs.
3.Parlesnudssolutioncompatible
Pourrendrelescriptcompatible,ilsuffit,avanttoutemanipulationdecode,denleverlesespacesvidesdudocument XML. Ainsi, ces problmatiques n uds de texte vide introduits par Firefox disparaissent et le mme code peut tre utilispournaviguerdansledocumentquelonutiliseFirefoxoubienInternetExplorer. Nousallonslaborerunefonctionenleverespaces()quipermetdesupprimerlesespacesvidesdanslecodeXML. Audbutdecettefonction,uneboucleforpermetdepasserenrevuelesdiffrentsn udsenfantgrcelaproprit childNodes(voirchapitreLeDOM(DocumentObjectModel)PropritsdelObjetNode). function enleverespaces(xmldocument) { var index; for (index = 0; index < xmldocument.childNodes.length; index++) { var noeudc = xml.childNodes(index); . . } } cettetapedelaboucle,len udcouranteststockdanslavariablen udc. Sil sagit dun n ud lment (noeudc.nodeType == 1), cet lment peut, son tour, avoir des n uds enfant pour lesquelsilfautenleverlesespacesvides.Danscecas,cen udcourantestrenvoylafonctionenleverespaces()en lefournissantcommeargumentdelafonction,soitenleverespaces(noeudc). function enleverespaces(xmldocument) { var index;
- 12 -
for (index = 0; index < xmldocument.childNodes.length; index++) { var noeudc = xmldocument.childNodes[index]; if (noeudc.nodeType == 1) { enleverespaces(noeudc); } . . } } Parailleurs,silen udcourantestunn udtexte(noeudc.nodeType == 3),ilsagitpeuttredunespacevide.Nous allonstesterletexteprsentdanslen ud(propritnodeValue)aumoyenduneexpressionrgulire(voirchapitre Le JavaScript Manipulation des chanes de caractres) qui permet de dceler les espaces vides, soit linstruction (/^\s+$/.test(noeudc.nodeValue)). Nous allons donc vrifier si le n ud courant comporte des espaces vides et est un n ud texte (if ((/^\s+$/.test (noeudc.nodeValue)) && (noeudc. nodeType == 3))). Dans laffirmative, il suffit alors dappliquer la proprit removeChildpourenlevercen ud.Ilnefautpasoublierdedcrmenterlindexduneposition. function enleverespaces(xmldocument) { var index; for (index = 0; index < xmldocument.childNodes.length; index++) { var noeudc = xmldocument.childNodes[index]; if (noeudc.nodeType == 1) { enleverespaces(noeudc); } if ((/^\s+$/.test(noeudc.nodeValue)) && (noeudc.nodeType == 3)) { xmldocument.removeChild(xmldocument.childNodes[index--]); } } } Pour rendre le script compatible avec les navigateurs, cette fonction est appele pour liminer les espaces vides du codeXMLpourFirefox.LincompatibilitintroduiteparFirefoxayantdisparu,ilestdslorspossibledutiliserlemme codepourFirefoxetInternetExplorer. LefichierXhtmlcompatibleseprsentecommesuit: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function enleverespaces(xmldocument) { var index; for (index = 0; index < xmldocument.childNodes.length; index++) { var noeudc = xmldocument.childNodes[index]; if (noeudc.nodeType == 1) { enleverespaces(noeudc); } if ((/^\s+$/.test(noeudc.nodeValue)) && (noeudc.nodeType == 3)) { xmldocument.removeChild(xmldocument.childNodes[index--]); } } } function afficher(xmldocument) { var cinema, cesar, categorie; var prix, nom, film, textediv; cinema = xmldocument.documentElement; cesar = cinema.lastChild; categorie = cesar.lastChild; prix = categorie.firstChild; nom = prix.nextSibling; film = categorie.lastChild; textediv = (prix.firstChild.nodeValue + "<br />" +
- 13 -
nom.firstChild.nodeValue + "<br />" + film.firstChild.nodeValue); var target = document.getElementById("affichage"); target.innerHTML = textediv; } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; if(navigator.userAgent.indexOf("Firefox") != -1) { enleverespaces(xmldocument); } afficher(xmldocument); } } xhr.open("GET", "cesar2006.xml", true); xhr.send(null); } } //]]> </script> </head> <body> <h2>Crmonie des Csars 2006</h2> <form action=""> <input type="button" value="Afficher le Csar" onclick="extraire()" /> </form> <div id="affichage"> La rponse ici ! </div> </body> </html>
- 14 -
4.ParlamthodeGetElementsByTagName
Leprocdprcdentpermetdaccderauxobjetsparlespropritsdesn uds,estcerteslgantmaisilfautbien admettrequelessautssuccessifssurleslmentsdundocumentXMLproduituncodecomplexe.Ilservleenoutre peu pratique dans le cas dune mise jour de la page car le moindre lment ajout ou retir ncessiterait la rcriturecomplteducode. Lutilisation de la mthode getElementsByTagName se rvle plus simple et plus fonctionnelle (chapitre Le DOM (DocumentObjectModel)Accderauxnoeuds). Considronstoujoursnotredocumentcesar2006.xml :ilsagittoujoursdaccderauxinformationsdesbalises<prix>, <nom>et<film>delatroisimebalise<categorie>. <?xml version="1.0" encoding="ISO-8859-1"?> <cinema> <evenement>Crmonie des Csars</evenement> <sujet>Palmars</sujet> <date>2006</date> <cesar> <categorie> <prix>Csar du meilleur acteur</prix> <nom>Michel Bouquet</nom> <film>Le promeneur du Champ de Mars</film> </categorie> <categorie> <prix>Csar du meilleur film franais</prix> <nom>Jacques Audiard</nom> <film>De battre mon coeur sest arrt</film> </categorie> <categorie> <prix>Csar du meilleur film tranger</prix> <nom>Clint Eastwood</nom> <film>Million dollar baby</film> </categorie> </cesar> </cinema> Construisonslescript. <script type=text/JavaScript> //<![CDATA[ function afficher(xmldocument) { noeudsprix = xmldocument.getElementsByTagName("prix"); noeudsnom = xmldocument.getElementsByTagName("nom"); noeudsfilm = xmldocument.getElementsByTagName("film"); . . . } Les variables noeudsprix, noeudsnom et noeudsfilm contiennent dans une liste toutes les balises <prix>, <nom> et <film> du document XML. Il suffit alors dextraire la valeur (nodeValue) du premier lment enfant (firstChild) du troisimen ud<prix>(noeudsprix[2]).Bienentendu,lesn uds<nom>et<film>sontextraitsdelammefaon.Une foiscesinformationsrecueillies,lapropritinnerHTMLpermetlaffichagedecellesci. function afficher(xmldocument) { noeudsprix = xmldocument.getElementsByTagName("prix"); noeudsnom = xmldocument.getElementsByTagName("nom"); noeudsfilm = xmldocument.getElementsByTagName("film"); var textediv = (noeudsprix[2].firstChild.nodeValue + "<br />" + noeudsnom[2].firstChild.nodeValue + "<br />" + noeudsfilm[2].firstChild.nodeValue); var target = document.getElementById("affichage"); target.innerHTML = textediv; } LecodecompletdudocumentXhtmlaveclamthodegetElementsByTagNamedevient: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- 15 -
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function afficher(xmldocument) { noeudsprix = xmldocument.getElementsByTagName("prix"); noeudsnom = xmldocument.getElementsByTagName("nom"); noeudsfilm = xmldocument.getElementsByTagName("film"); var textediv = (noeudsprix[2].firstChild.nodeValue + "<br />" + noeudsnom[2].firstChild.nodeValue + "<br />" + noeudsfilm[2].firstChild.nodeValue); var target = document.getElementById("affichage"); target.innerHTML = textediv; } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre<+>navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument); } } xhr.open("GET", "cesar2006.xml", true); xhr.send(null); } } //]]> </script> </head> <body> <h2>Crmonie des Csars 2006</h2> <form action=""> <input type="button" value="Afficher le Csar" onclick="extraire()" /> </form> <div id="affichage"> La rponse ici ! </div> </body> </html> Lersultatestidentiqueceluidelexplorationdudocumentparlespropritsdesn uds. C ecodeaveclamthodegetElementsByTagNameestparfaitementcompatiblepourInternetExploreretFirefox.
Ilvousestpossibledajouterunefeuilledestylepouragrmenterlaprsentationcommecelaatralisauxpoints prcdents.
5.Traitementdesattributs
Un document XML peut galement comporter des attributs de balises. Ceuxci contiennent souvent des informations dunintrtnonngligeable.Ainsi,ilimportedepouvoirgalementyaccder.
- 16 -
Pourrappel(cf.chapitreLeDOM(DocumentObjectModel)Accderauxattributs),nousutilisonslapropritattributes qui renvoie une liste de tous les attributs dun lment spcifi. Cette liste des n uds attributs est renvoye sous formedunobjetdetypeNamedNodeMap.Cequiimpliquequelesattributssontparlasuite,accessiblesparleurnom. SoitundocumentXML(stock.xml)quicomportedesattributs: <?xml version="1.0" encoding="ISO-8859-1"?> <stock> <album> <article="en stock">1001</article> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> </album> <album> <article etat="en stock">1002</article> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> </album> <album> <article etat="en rupture">1003</article> <titre>Sheller en solitaire</titre> <artiste>William Sheller</artiste> </album> <album> <article etat="en rupture">1004</article> <titre>Cach derrire</titre> <artiste>Laurent Voulzy</artiste> </album> <album> <article etat="en stock">1005</article> <titre>Dfoule sentimentale</titre> <artiste>Alain Souchon</artiste> </album> </stock> Onsouhaitesavoir,aprsavoirconsultlefichierstock.xml,silarticleestenstockouenrupture. LefichierXhtmldedpartprsentelaformesuivante: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/javascript" /> </head> <body> <form action=""> Article : <input type="text" id="entree" size="4" /> <input type="button" value="Voir stock" onclick="extraire()" /> <input type="reset" value="Annuler" /> </form> <div id="affichage"> La rponse ici ! </div> </body> </html>
- 17 -
Passonslapartiescript. <script type=text/JavaScript> //<![CDATA[ var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } Au clic sur le bouton, la fonction extraire() est appele. Elle cre un objet XMLHttpRequest ou un objet ActiveX pour rendrelescriptcompatible. if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument); } } xhr.open("GET",<+>"stock.xml", true); xhr.send(null); } } Unerequteasynchroneesteffectuesurlefichierstock.xml.Siloprationsestdroulecorrectement,lescriptpasse lamainlafonctionafficher()prenantenargumentlefichierXML(afficher(xmldocument)). function afficher(xmldocument) { var entree = document.getElementById("entree").value; var target = document.getElementById("affichage"); var article = xmldocument.getElementsByTagName("article"); Diffrentsobjetssontalorsdtermins.Lavariableentreereprendlecontenudelalignedetexte.Lavariabletarget accde la zone daffichage dfinie par la balise <div id="affichage"> et enfin la variable article liste les balises <article>dudocumentXML. for (i=0; i<article.length; i++){ if(article[i].firstChild.nodeValue==entree){ var attributs=article[i].attributes; var etatstock=attributs.getNamedItem("etat").nodeValue; Ensuite,aumoyendunebouclefor,lesdiffrentslmentsdelalistearticlesontpasssenrevue.Silenumrode rfrence (article[i]. firstChild.nodeValue) contenu dans la balise <article> est gal la valeur encode (variableentree),unevariableattributsestcrecomprenanttouslesattributsdelabalise<article>retenue.Enfin,
- 18 -
ilsuffitdallerchercherlattributetat(attributs.getNamedItem("etat"))etdenprendrelavaleur(nodeValue). target.innerHTML="Cet article est " + etatstock; } } } //]]> </script> Lescriptsetermineparlaffichagedumessage. Lescriptcompletestlesuivant : <script type=text/JavaScript> //<![CDATA[ function afficher(xmldocument) { var entree = document.getElementById("entree").value; var target = document.getElementById("affichage"); var article = xmldocument.getElementsByTagName("article"); for (i=0; i<article.length; i++){ if(article[i].firstChild.nodeValue==entree){ var attributs=article[i].attributes; var etatstock=attributs.getNamedItem("etat").nodeValue; target.innerHTML="Cet article est " + etatstock; } } } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument); } } xhr.open("GET", "stock.xml", true); xhr.send(null); } } //]]> </script> LefichierXhtmlfinaldevient: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function afficher(xmldocument) { var entree = document.getElementById("entree").value; var target = document.getElementById("affichage"); var article = xmldocument.getElementsByTagName("article"); for (i=0; i<article.length; i++){
- 19 -
if(article[i].firstChild.nodeValue==entree){ var attributs=article[i].attributes; var etatstock=attributs.getNamedItem("etat").nodeValue; target.innerHTML="Cet article est " + etatstock; } } } var xhr = null; function extraire(){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument); } } xhr.open("GET", "stock.xml", true); xhr.send(null); } } //]]> </script> </head> <body> <form action=""> Article : <input type="text" id="entree" size="4" /> <input type="button" value="Voir stock" onclick="extraire()" /> <input type="reset" value="Annuler" /> </form> <div id="affichage"> La rponse ici ! </div> </body> </html>
- 20 -
RcuprerettraiteravecXSL
Avec ce chapitre sur le traitement du XSL dans les applications AJAX, nous sommes la limite du fonctionnement des navigateursactuelsetlessolutionsquilsproposentsontsouventspcifiquesetdonchautementincompatibles. NousavonstudiauchapitreIntroductionauXSLlaliaisondune feuille de style XSL (fichier .xsl) dans un document XML(fichier.xml). CelleciseralisaitparunelignedecodedanslefichierXML.Pourrappel: <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="xsldemo.xsl"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> Etc. Cesystme,bienquetrspuissant,neprendcependantenchargequelaffichagedudocumentXMLdansunnavigateur dontlavocationpremireest,rappelonsle,dafficherduHtmlouduXhtml. Il faut, avec le modle AJAX, avoir la possibilit daccder aux lments du fichier XML et XSL. Accessoirement, il faut aussipouvoirchangerdefaondynamique(parleJavaScript),lafeuilledestyleassocieaudocumentXML. Ilafalludoncmettreenplaceunetechniquediffrentedecellehabituellementutilise.Cestcequenousallonsaborder dansltudedecesouschapitre. Nous allons utiliser comme fichier XML (xml.xml), le code suivant, dj donn en exemple au chapitre Introduction au XSL. <?xml version="1.0" encoding="ISO-8859-1"?> <compilation> <mp3> <titre>Sarbacane</titre> <artiste>Francis Cabrel</artiste> <date>1990</date> </mp3> <mp3> <titre>Nickel</titre> <artiste>Alain Souchon</artiste> <date>1991</date> </mp3> <mp3> <titre>Sheller en solitaire</titre> <artiste>William Sheller</artiste> <date>1992</date> </mp3> <mp3> <titre>Cach derrire</titre> <artiste>Laurent Voulzy</artiste> <date>1993</date> </mp3> <mp3> <titre>Rio Grande</titre> <artiste>Eddy Mitchell</artiste> <date>1994</date> </mp3> <mp3> <titre>Samedi soir sur la Terre</titre> <artiste>Francis Cabrel</artiste> <date>1995</date> </mp3> <mp3> <titre>Dfoule sentimentale</titre> <artiste>Alain Souchon</artiste> <date>1996</date> </mp3> </compilation>
EtcommefichierdefeuilledestyleXSL(fichierxsl.xsl): <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <table border="1" style="border-collapse: collapse" bordercolor="#000000" cellpadding="3"> <tr style="background: #9cf;"> <td>Anne</td> <td>Album</td> <td>Artiste</td> </tr> <xsl:for-each select="compilation/mp3"> <tr> <td><xsl:value-of select="date"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="artiste"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>
I lfautremarquerquilnyapasdeliaisonentrelefichierXMLetlefichierXSL.
1.SolutionpourInternetExplorer7
Ladmarcheseralisetoujoursentroistapes:
s
LechargementdepuisleserveurdufichierXML. LechargementdepuisleserveurdufichierXSL. LetraitementpourassocierlefichierXSLaufichierXML.
Pourraliserletraitement,MicrosoftsesttournverslescontrlesActiveXdesonmoteurMSXML(voirchapitreLobjet XMLHttpRequestCrerunobjetXMLHttpRequest). Drivedecettetechnologie,linstructionxml.transformNode(xsl)permetdassocierdefaondynamique,unefeuillede style XSL un document XML. Il faut noter que ce code est spcifique Microsoft et ne repond en rien aux spcificationsduW3C. Depuis quInternet Explorer 7 admet galement lobjet XMLHttpRequest de faon native, un code peut tre labor, prochedeceluiabordauxpointsetchapitresprcdents. SoitnotrefichierXhtmldedpart: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/css" />
<style type="text/css"> <!-#transform {background-color: #9cf; padding: 10px; text-align: center;} --> </style> </head> <body> <h2>XML et XSL</h2> <div id="transform"> <form action=""> <input type="button" value="Afficher le palmars" onclick="transform(xml, xsl, transform)" /> </form> </div> </body> </html> Commentaires
q
Lescriptestappelauclicsurleboutonduformulaire. Une dclaration de feuilles de style (#transform) met en avant la zone dfinie par la balise <div id="transform"> ... </div>danslaquelleseraliselatransformation.
Passonsauscriptetsontude. <script type="text/javascript"> //<![CDATA[ var xml = loadXML(xml.xml); var xsl = loadXML(xsl.xsl); LafonctionloadXML()estappeleunepremirefoispourchargerlefichierXML(xml.xml)etunesecondefoispour chargerlefichierXSL(xsl.xsl). function loadXML(url){ var xhr; xhr = new XMLHttpRequest(); xhr.open(GET, url, false); xhr.send(null); if (xhr.readyState == 4){ xhr = xhr.responseXML; } return xhr; }
- 3-
LafonctionloadXML(url)chargelefichierXMLouXSLdefaonasynchroneselonlecodetudiprcdemment. function transform(xml, xsl, id){ if (window.ActiveXObject) { var target = document.getElementById(id); target.innerHTML = xml.transformNode(xsl); } } La fonctiontransform(), appele au clic du bouton, ralise la troisime tape en associant la feuille de style XSL au documentXML(xml.transform-Node(xsl);). Lenouveaufichierainsiobtenuestaffich(innerHTML)danslabalise<div id="transform">parunappellamthode getElementById. //]]> </script> Finduscript LefichierXhtmlcompletdevient: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <style type="text/css"> <!-#transform {background-color: #9cf; padding: 10px; text-align: center;} --> </style> <script type="text/javascript"> //<![CDATA[ var xml = loadXML(xml.xml); var xsl = loadXML(xsl.xsl); function loadXML(url){ var xhr; xhr = new XMLHttpRequest(); xhr.open(GET, url, false); xhr.send(null); if (xhr.readyState == 4){ xhr = xhr.responseXML; } return xhr; } function transform(xml, xsl, id){ if (window.ActiveXObject) { var target = document.getElementById(id); target.innerHTML = xml.transformNode(xsl); } } //]]> </script> </head> <body> <h2>Les victoires de la musique</h2> <div id="transform"> <form action=""> <input type="button" value="Afficher le palmars" onclick="transform(xml, xsl, transform)" /> </form> </div>
- 4-
</body> </html>
2.SolutionpourInternetExplorer6(etprcdents)
CettesolutionsebaseuniquementsurdescontrlesActiveXduMSXMLetdesoncompreXMLDOM. Ce code est compatible pour Internet Explorer 6, Internet Explorer 5.5, Internet Explorer 5 et mme pour internet Explorer7.Eneffet,mmesicedernierprendenchargelobjetXMLHttpRequestdefaonnative,elreprendgalement leprocessusaveclescontrlesActivexdesesprdcesseurs. Ainsi,nousdcouvonsuncodediffrentdeceluiutilisjusquprsent. LefichierXhtmldedpartnestquefaiblementmodifi: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <style type="text/css"> <!-#transform {background-color: #9cf; padding: 10px; text-align: center;} --> </style> <script type="text/javascript"> //<![CDATA[ var xml = loadXML(xml.xml); var xsl = loadXML(xsl.xsl); function loadXML(url){ var xhr; xhr = new XMLHttpRequest();
- 5-
xhr.open(GET, url, false); xhr.send(null); if (xhr.readyState == 4){ xhr = xhr.responseXML; } return xhr; } function transform(xml, xsl, id){ if (window.ActiveXObject) { var target = document.getElementById(id); target.innerHTML = xml.transformNode(xsl); } } //]]> </script> </head> <body> <h2>Les victoires de la musique</h2> <div id="transform"> <form action=""> <input type="button" value="Afficher le palmars" onclick="transform(xml, xsl, transform)" /> </form> </div> </body> </html> EnvoicilacapturedcransousInternetExplorer6.
Passonsauscriptetsontude. <script type="text/javascript"> //<![CDATA[ function transform(id){ var xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.load("xml.xml"); LecontrleActiveXestinitialis(new ActiveXObject("Microsoft. XMLDOM")). Le mode synchrone gnralement utilis est fix (async = false). Il semble cependant, selon la documentation de Microsoft,quelemodeasynchronepourraittreadopt.Puislamthodeload()prendenargumentlefichierXMLpour lecharger(load("xml.xml")). var xsl = new ActiveXObject("Microsoft.XMLDOM"); xsl.async = false; xsl.load("xsl.xsl"); LetraitementdufichierXSLestidentique.
- 6-
var target = document.getElementById(id); target.innerHTML = xml.transformNode(xsl); } LefichierXMLesttransformpartirdufichierXSL(xml.transformNode(xsl))quiestaffich(innerHTML)danslabalise <div id="transform"> ... </div>. //]]> </script> Findescript. LefichierXhtmlfinaldevient: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <style type="text/css"> <!-#transform {background-color: #9cf; padding: 10px; text-align: center;} --> </style> <script type="text/javascript"> //<![CDATA[ function transform(id){ var xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.load("xml.xml"); var xsl = new ActiveXObject("Microsoft.XMLDOM"); xsl.async = false; xsl.load("xsl.xsl"); var target = document.getElementById(id); target.innerHTML = xml.transformNode(xsl); } //]]> </script> </head> <body> <h2>Les victoires de la musique</h2> <div id="transform"> <form action=""> <input type="button" value="Afficher le palmars" onclick="transform(transform)" /> </form> </div> </body> </html>
- 7-
3.SolutionpourFirefox
AveclenavigateurFirefox(depuislaversionFirefox1.2),JavaScriptpeutexcuterdestransformationsXSLTtravers lobjetXSLTProcessor. UnfoislobjetXSLTProcessorcr,ilfaututiliserlamthodeimportStylesheet(xsl)pourraliserlatransformation.La feuille de style xsl doit tre charge dans le document par lobjet XMLHttpRequest avant dappeler la mthode importStylesheet().Nousallonsyrevenirplusendtaildanslapartiescript. VoicilefichierXhtmldedpart(inchang): <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <style type="text/css"> <!-#transform {background-color: #9cf; padding: 10px; text-align: center;} --> </style> </head> <body> <h2>Les victoires de la musique</h2> <div id="transform"> <form action=""> <input type="button" value="Afficher le palmars" onclick="transform(xml, xsl, transform)" /> </form> </div> </body> </html>
- 8-
Lescriptdevient: <script type="text/javascript"> //<![CDATA[ var xml = loadXML(xml.xml); var xsl = loadXML(xsl.xsl); LesdeuxfichiersXMLetXSLsontchargsenmmoireenfaisantappellafonctionloadXML(). function loadXML(url) { var xhr; if (document.implementation.createDocument) { xhr = new XMLHttpRequest(); xhr.open(GET, url, false); xhr.send(null); if (xhr.readyState == 4){ xhr = xhr.responseXML; } } return xhr; } La fonction loadXML(), aprs avoir vrifi si le navigateur utilis est bien Firefox (if (document.implementation.createDocument))chargeenmodesynchronelesfichierslaidedelobjetXMLHttpRequest. function transform(xml, xsl, id) { if (window.XSLTProcessor) { var fragment; var xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); La fonction transform(), aprs stre assur que lobjet XSLTProcessor est disponible (if (window.XSLTProcessor)), creunenouvelleinstancedeceluici(xsltProcessor = new XSLTProcessor()).Lefichierdestylexslestalorsimport danslobjetXSLTProcessor(xsltProcessor.importStyle-sheet(xsl)). fragment = xsltProcessor.transformToFragment(xml, document); Pourquelatransformationsoiteffective,XSLTProcessordoitexcuterlamthodetransformToDocument()quiretourne un document XML entier ou la mthodetransformToFragment() qui retourne un fragment de document pouvant tre facilementajoutundocumentXMLexistant. Nous retenons la mthode transformToFragment(). Cette dernire qui prend les deux variables suivantes comme paramtres :
q
ledocumentXMLtransformer , lobjetdocumentquiaccueillelefragmentgnr.
- 9-
LadocumentationdeFirefoxsignalequesilefragmentgnrestinsrdansledocumentHTMLcourant,lepassage duparamtre documentestsuffisant.Cettetransformationpermetdextrairedesdonnesaprslechargementdela page,sansavoirlarafrachir. var target = document.getElementById(id); target.innerHTML=""; target.appendChild(fragment); document.appendChild(target); } } IlestmaintenantpossibledafficherledocumentXMLtransformparlafeuilledestyleXSL. Lavariabletargetreprelabalise<div id="transform">,dontlecontenudeceluiciesteffac(target.innerHTML=""). Le fichier XML transform (variable fragment) est alors ajout comme dernier enfant (appendChild(fragment)) la variabletarget.Letoutestinclusdansledocumentcourant(document.appendChild(target). //]]> </script> Findescript. LefichierXhtmlfinaldevient: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-#transform {background-color: #9cf; padding: 10px; text-align: center;} --> </style> <script type="text/javascript"> //<![CDATA[ var xml = loadXML(xml.xml); var xsl = loadXML(xsl.xsl); function loadXML(url) { var xhr; if (document.implementation.createDocument) { xhr = new XMLHttpRequest(); xhr.open(GET, url, false); xhr.send(null); if (xhr.readyState == 4){ xhr = xhr.responseXML; } } return xhr; } function transform(xml, xsl, id) { if (window.XSLTProcessor) { var fragment; var xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); fragment = xsltProcessor.transformToFragment(xml, document); var target = document.getElementById(id); target.innerHTML=""; target.appendChild(fragment); document.appendChild(target); } } //]]>
- 10 -
</script> </head> <body> <h2>Les victoires de la musique</h2> <div id="transform"> <form action=""> <input type="button" value="Afficher le palmars" onclick="transform(xml, xsl, transform)" /> </form> </div> </body> </html>
4.Solutioncompatible
Ilseraitassezconvivialdavoirunscriptcompatible,lafoispourlesnavigateursdelafamilleInternetExploreretpour lenavigateurFirefox. Lescriptsuivantreprendlecodelaborpourchacundeuxauxpointsprcdents. LefichierXhtmlestinchang. <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-#transform {background-color: #9cf; padding: 10px; text-align: center;} -->
</style> </head> <body> <h2>Les victoires de la musique</h2> <div id="transform"> <form action=""> <input type="button" value="Afficher le palmars" onclick="transform(xml, xsl, transform)" /> </form> </div> </body> </html> Lescriptcompatibledevient: <script type="text/javascript"> //<![CDATA[ var xml = loadXML(xml.xml); var xsl = loadXML(xsl.xsl); function loadXML(url) { var xhr; // code pour Firefox if (document.implementation.createDocument) { xhr = new XMLHttpRequest(); xhr.open(GET, url, false); xhr.send(null); if (xhr.readyState == 4){ xhr = xhr.responseXML; } } // code pour IE7 else if (window.XMLHttpRequest){ xhr = new XMLHttpRequest(); xhr.open(GET, url, false); xhr.send(null); if (xhr.readyState == 4){ xhr = xhr.responseXML; } } //code pour IE6, IE5.5 et IE5 else if (window.ActiveXObject) { var xhr = new ActiveXObject("Microsoft.XMLDOM"); xhr.async = false; xhr.load(url); } return xhr; } function transform(xml, xsl, id){ if (window.XSLTProcessor) { var fragment; var xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); fragment = xsltProcessor.transformToFragment(xml, document); var target = document.getElementById(id); target.innerHTML=""; target.appendChild(fragment); document.appendChild(target); } else if (window.ActiveXObject) { var target = document.getElementById(id); target.innerHTML = xml.transformNode(xsl); } } //]]> </script>
- 12 -
5.UneapplicationXSLdynamique
Cetteapplicationpermetdedcouvrirquilestpossibledechangerdynamiquementlafeuilledestyledundocument XMLpourlaremplacerparuneautre. SoitnotrefichierXML(xml.xml),utilistoutaulongdecechapitre.Lefichierdestylehabituel(xsl.xsl)luiestassoci dansunpremiertemps.Aprsuneactiondelutilisateur,lescripttransformelefichierXMLdedpartavecunenouvelle feuilledestyle. Cette feuille de style (xsl1.xsl), tire du chapitre Introduction du XSL Trier avec le langage XSL, permet de trier le dossierXMLparordrealphabtique. <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <head> <title>XSL</title> </head> <body> <table border="1" style="border-collapse: collapse" bordercolor="#000000" bgcolor="#ffffff" cellpadding="3"> <tr> <td>Artiste</td> <td>Titre</td> <td>Anne</td> </tr> <xsl:for-each select="compilation/mp3"> <xsl:sort select="artiste" order="ascending" /> <tr>
- 13 -
<td><xsl:value-of select="artiste"/></td> <td><xsl:value-of select="titre"/></td> <td><xsl:value-of select="date"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> LefichierXhtmldedpartestnotrefichierusuelquiacependanttlgrementmodifi. <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-#transform {background-color: #9cf; padding: 10px; text-align: center;} --> </style> </head> <body onload="init(xml.xml, xsl.xsl, transform)"> <h2>Les victoires de la musique</h2> <div id="transform"> </div> <form action="" style="text-align:center"> <input type="button" value="Trier par nom" onclick="init(xml.xml, xsl1.xsl, transform)" /> </form> </body> </html> Ainsi, au chargement de la page (<body onload="init()"), la fonction init() est appele avec, comme paramtres, le fichierxml.xml,lafeuilledestylexsl.xsletlazonedelapage,identifieparlabalise<div id="transform">. Auclicsurleboutonduformulaire,lammefonctionestdclenchemaiscettefoisaveccommeparamtredelafeuille destyle,lefichierxsl1.xsl.
- 14 -
Le script est lui aussi modifi afin de pouvoir tenir compte des adresses de fichiers, fournies en paramtres de la fonctiondappel. Nousavonssimplementajoutauscript,lafonctioninit()quichargelesfichiersXMLetXSLenfonctiondesadresses fournies en paramtres (xml = loadXML(url1)et xsl = loadXML(url2)). La fonction init() passe ensuite la main la fonctiontransform(). <script type="text/javascript"> //<![CDATA[ function init(url1, url2,id){ var xml = loadXML(url1); var xsl = loadXML(url2); transform(xml, xsl, id); } function loadXML(url) { var xhr; // code pour Firefox if (document.implementation.createDocument) { xhr = new XMLHttpRequest(); xhr.open(GET, url, false); xhr.send(null); if (xhr.readyState == 4){ xhr = xhr.responseXML; } } // code pour IE7 else if (window.XMLHttpRequest){ xhr = new XMLHttpRequest(); xhr.open(GET, url, false); xhr.send(null); if (xhr.readyState == 4){ xhr = xhr.responseXML; } } //code pour IE6, IE5.5 et IE5 else if (window.ActiveXObject) { var xhr = new ActiveXObject("Microsoft.XMLDOM");
xhr.async = false; xhr.load(url); } return xhr; } function transform(xml, xsl, id){ if (window.XSLTProcessor) { var fragment; var xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); fragment = xsltProcessor.transformToFragment(xml, document); var target = document.getElementById(id); target.innerHTML=""; target.appendChild(fragment); document.appendChild(target); } else if (window.ActiveXObject) { var target = document.getElementById(id); target.innerHTML = xml.transformNode(xsl); } } //]]> </script> Lersultatnousfournitletableautriparnom.
- 16 -
Uncarnetdadresses
Cescriptproposeunelistedeslectionavecplusieursnoms.Auclicsurlebouton,lescoordonnesdelapersonnesont affiches. LesinformationsrelativesauxpersonnessontprsentessurleserveursousformedunfichierXML.
P ourrappel,touslesfichiersdecesexemplesdoiventtresitussurleserveurlocaletsontaccessiblesdansle navigateur,paruneadressedetypelocalhost/... laboronsdabordlefichierXML.Chaquecontactdurpertoirecomportelescoordonnessuivantes:

q
Nom
- 1-
Prnom Adresse Codepostal Ville Tlphone
LastructuredufichierXMLprendlaformesuivante: <carnet> <contact> <nom></nom> <prenom></prenom> <adresse></adresse> <cp></cp> <ville></ville> <tel></tel> </contact> </carnet> LefichierXML(carnet.xml)proposest: <?xml version="1.0" encoding="ISO-8859-1"?> <carnet> <contact> <nom>Chevalerin</nom> <prenom>Vincent</prenom> <adresse>13, rue du Marchal Joffre</adresse> <cp>59000</cp> <ville>Lille</ville> <tel>+33-(0)-320219729</tel> </contact> <contact> <nom>Clment</nom> <prenom>Alex</prenom> <adresse>17, boulevard Jean Jaurs</adresse> <cp>31000</cp> <ville>Toulouse</ville> <tel>+33-(0)-565906248</tel> </contact> <contact> <nom>Lovisetti</nom> <prenom>Stephane</prenom> <adresse>9, avenue Poissonnire</adresse> <cp>75000</cp> <ville>Paris</ville> <tel>+33-(0)-173409540</tel> </contact> <contact> <nom>Souffre</nom> <prenom>Jean</prenom> <adresse>121, rue Robert Caumont</adresse> <cp>33000</cp> <ville>Bordeaux</ville> <tel>+33-(0)-556002266</tel> </contact> <contact> <nom>Vivire</nom> <prenom>Sylvain</prenom> <adresse>64, rue des Sources</adresse> <cp>69000</cp> <ville>Lyon</ville> <tel>+33-(0)-478383899</tel>
- 2-
</contact> </carnet> PassonsmaintenantaufichierXhtmldedpart : <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <h3>Un carnet dadresse en Ajax</h3> <form action=""> <fieldset> <legend>Choisissez une personne</legend> <select name="personnes"> <option>Faites votre choix</option> <option>Chevalerin Vincent</option> <option>Clment Alex</option> <option>Lovisetti Stephane</option> <option>Souffre Jean</option> <option>Vivire Sylvain</option> </select> <input type="button" onclick="extraire(personnes)" value="Coordonnes" /> </fieldset> </form> <div id="cadre" style="display:none;"> Nom Prnom : <span id="idnom"></span> <span id="idprenom"></span><br /> Adresse : <span id="idadresse"></span><br /> Ville : <span id="idcp"></span> <span id="idville"></span> <br /> Tel : <span id="idtelephone"></span> </div> </body> </html> Commentaires:
q
Lalistedeslectionestintroduiteparlabalise<select> ... </select>. Lesbalises<fieldset> ... </fieldset>et<legend> ... </legend>sontdesbalisesclassiquesenHtml4.1et Xhtml1.0maispeuconnues.Ellespermettentdorganiserlaprsentationdesformulaires. Le rsultat saffiche dans la zone <div id="cadre"> ... </div> qui, louverture de la page, est cache (style="display:none;"). Auclicdubouton,lafonctionextraire(personnes)permetdelancerlescript.
AbordonslapartieJavaScript. <script type=text/JavaScript> //<![CDATA[ var xhr = null; function extraire(personnes){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
- 3-
else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } Aprsavoirinitialislavariablexhr,laboronslecodedelafonctionextraire().Celleciest,pourrappel,appeleauclic duboutonCoordonnesdanslefichierXhtml. Les premires lignes de script tiennent compte des diffrences de traitement dune requte HTTP dun navigateur lautre.FirefoxetInternetExplorer7passentparlobjetJavaScriptnatifXMLHttpRequest,tandisquInternetExplorer6 et versions prcdentes utilisent un contrle ActiveX (voir chapitre Lobjet XMLHttpRequest Crer un objet XMLHttpRequest). if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument,personnes); } } xhr.open("GET", "carnet.xml", true); xhr.send(null); } } Aprsstreassurquelobjetxhrexistebien(if(xhr)),unerequteestmiseenplaceselonlamthodeGET,versle fichier carnet.xml et selon un mode asynchrone. La requte est alors effectivement excute lors de linstruction xhr.send(null). La bonne excution de cette requte HTTP est surveille en fonction des informations retournes sur ses propres changements dtat, soit par (onreadystatechange). Lassurance que la requte a bien abouti est obtenu deux conditions :dunepart,lesdonnessontaccessibles(readyState == 4)dautrepartlecodenumriquedelarponsedu serveur est satisfaisant (status == 200). Le fichier est alors retourn sous la forme dun document XML (xhr.responseXML).Cederniereststockdanslavariablexmldocument.LefichierXMLpeutmaintenanttretraitparle JavaScript du navigateur par la fonction afficher(). Le fichier XML (xmldocument) et les donnes du menu droulant (personnes)sontfourniscommeargumentsdelafonction. function afficher(xmldocument,personnes) { Lafonctionafficher()sechargedercuprerlesdiffrentescoordonnes(nom,prnom,adresse,etc)delapersonne slectionneetdafficherlersultatdanslapageXhtml. var ordre = (personnes.selectedIndex - 1); if(ordre!= -1) { var affichage= document.getElementById("cadre"); affichage.style.display = block Ilimportedeconnatrelapersonneretenueparlutilisateurdanslemenudroulant.CestlerledeselectedIndex.Sa valeureststockedanslavariableordre.Lapremireoptiondumenutantletexte"Faitesvotrechoix",ilfautprendre laprcautiondediminuercetindexduneunit(selectedIndex - 1).Toutaffichageestexclusicettevaleurestngative (if(ordre!= -1)). Le contenu de la balise <div id="cadre"> ... </div> devient apparent ce stade du processus (style.display = block)sachantquilestcachdanslefichierXhtmlinitial. nouedsnom = xmldocument.getElementsByTagName("nom"); noeudsprenom = xmldocument.getElementsByTagName("prenom"); noeudsadresse = xmldocument.getElementsByTagName("adresse"); nouedscp = xmldocument.getElementsByTagName("cp"); noeudsville = xmldocument.getElementsByTagName("ville"); noeudstel = xmldocument.getElementsByTagName("tel"); Lesdiffrentesbalises(ex :<nom>)dufichierXMLsontrcupresdansuneliste(ex : noeuds.nom)grcelamthode getElementsByTagName.Lesbalisessuivantessonttraitesdelammefaon:<prenom>, <adresse>, <cp>, <ville>et <telephone>. var var var var var var textenom = nouedsnom[ordre].firstChild.nodeValue; texteprenom = noeudsprenom[ordre].firstChild.nodeValue; texteadresse = noeudsadresse[ordre].firstChild.nodeValue; textecp = nouedscp[ordre].firstChild.nodeValue; texteville = noeudsville[ordre].firstChild.nodeValue; textetel = noeudstel[ordre].firstChild.nodeValue;
- 4-
Ilfautmaintenantatteindreletexteassocilabalise<nom>pourlecontactslectionn.Cettebaliseestdtermine par son numro dordre du contact dans le menu droulant (la variable ordre), associ la liste noeudsnom. Dans larborescencedufichierXML,lenomducontactestlepremierenfantdelabalise<nom>(firstChild)dontlavaleurdece n udtexteestobtenueparlapropritnodeValue,etainsidesuitepourlesautresvaleurs. var targetnom = document.getElementById("idnom"); var targetprenom = document.getElementById("idprenom"); var targetrue = document.getElementById("idadresse"); var targetcp = document.getElementById("idcp"); var targetville = document.getElementById("idville"); var targettelephone = document.getElementById("idtelephone"); targetnom.innerHTML = textenom; targetprenom.innerHTML = texteprenom; targetrue.innerHTML = texteadresse; targetcp.innerHTML = textecp; targetville.innerHTML = texteville; targettelephone.innerHTML = textetel; } } La variable targetnom repre la balise <span id="idnom"> ... </span> du document Xhtml, par son identifiant id (getElementById("idnom");). Le contenu de la balise <span> est modifi par la proprit innerHTML (targetnom.innerHTML)enfonctiondesinformationsrecueilliesparlavariabletextenom. //]]> </script> Lescriptesttermin. Sachantquelafonctionafficher()doittredisponibleavantlafonctionextraire(),lescriptcompletdevient: <script type=text/JavaScript> //<![CDATA[ function afficher(xmldocument,personnes) { var ordre = (personnes.selectedIndex - 1); if(ordre!= -1) { var affichage= document.getElementById("cadre"); affichage.style.display = block nouedsnom = xmldocument.getElementsByTagName("nom"); noeudsprenom = xmldocument.getElementsByTagName("prenom"); noeudsadresse = xmldocument.getElementsByTagName("adresse"); nouedscp = xmldocument.getElementsByTagName("cp"); noeudsville = xmldocument.getElementsByTagName("ville"); noeudstel = xmldocument.getElementsByTagName("tel"); var textenom = nouedsnom[ordre].firstChild.nodeValue; var texteprenom = noeudsprenom[ordre].firstChild.nodeValue; var texteadresse = noeudsadresse[ordre].firstChild.nodeValue; var textecp = nouedscp[ordre].firstChild.nodeValue; var texteville = noeudsville[ordre].firstChild.nodeValue; var textetel = noeudstel[ordre].firstChild.nodeValue; var targetnom = document.getElementById("idnom"); var targetprenom = document.getElementById("idprenom"); var targetrue = document.getElementById("idadresse"); var targetcp = document.getElementById("idcp"); var targetville = document.getElementById("idville"); var targettelephone = document.getElementById("idtelephone"); targetnom.innerHTML = textenom; targetprenom.innerHTML = texteprenom; targetrue.innerHTML = texteadresse; targetcp.innerHTML = textecp; targetville.innerHTML = texteville; targettelephone.innerHTML = textetel; } } var xhr = null; function extraire(personnes){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
- 5-
else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument,personnes); } } xhr.open("GET", "carnet.xml", true); xhr.send(null); } } //]]> </script> Voicilersultatdansunnavigateur :
AgrmentonslefichierXhtmldequelquesdclarationsdestylepourenamliorerlaprsentation. <style type="text/css"> #cadre { width: 250px; height: 80px; margin-left: 10px; padding: 5px; border: solid black 1px; background-color: #9cf; } #idnom, #idprenom { font-family: sans-serif; font-weight: bold; font-size: 11pt; } #idadresse { font-style: italic; } #idtelephone { font-weight: bold; font-family: monospace;
- 6-
} </style> Commentaires:
q
Lesdiffrentescoordonnes(<div id="cadre")sontaffichesdansunebotedotedunefinebordureetdun arrireplandecouleur.Cederniermetenavantlersultatduscript. Lenometleprnom(<span id="idnom">et<span id="idprenom">)sontaffichsengras. Ladresse(<span id="idadresse">)estmiseenlettresitaliques. Letlphone(<span id="idtelephone">)estprsentselonunepolicechassefixe.
LefichierXhtmlcomplet,aveclescriptetlesfeuillesdestyledevient: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <script type=text/JavaScript> //<![CDATA[ function afficher(xmldocument,personnes) { var ordre = (personnes.selectedIndex - 1); if(ordre!= -1) { var affichage= document.getElementById("cadre"); affichage.style.display = block nouedsnom = xmldocument.getElementsByTagName("nom"); noeudsprenom = xmldocument.getElementsByTagName("prenom"); noeudsadresse = xmldocument.getElementsByTagName("adresse"); nouedscp = xmldocument.getElementsByTagName("cp"); noeudsville = xmldocument.getElementsByTagName("ville"); noeudstel = xmldocument.getElementsByTagName("tel"); var textenom = nouedsnom[ordre].firstChild.nodeValue; var texteprenom = noeudsprenom[ordre].firstChild.nodeValue; var texteadresse = noeudsadresse[ordre].firstChild.nodeValue; var textecp = nouedscp[ordre].firstChild.nodeValue; var texteville = noeudsville[ordre].firstChild.nodeValue; var textetel = noeudstel[ordre].firstChild.nodeValue; var targetnom = document.getElementById("idnom"); var targetprenom = document.getElementById("idprenom"); var targetrue = document.getElementById("idadresse"); var targetcp = document.getElementById("idcp"); var targetville = document.getElementById("idville"); var targettelephone = document.getElementById("idtelephone"); targetnom.innerHTML = textenom; targetprenom.innerHTML = texteprenom; targetrue.innerHTML = texteadresse; targetcp.innerHTML = textecp; targetville.innerHTML = texteville; targettelephone.innerHTML = textetel; } } var xhr = null; function extraire(personnes){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{
- 7-
alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; afficher(xmldocument,personnes); } } xhr.open("GET", "carnet.xml", true); xhr.send(null); } } //]]> </script> <style> #cadre { width: 250px; height: 80px; margin-left: 10px; padding: 5px; border: solid black 1px; background-color: #9cf; } #idnom, #idprenom { font-family: sans-serif; font-weight: bold; font-size: 11pt; } #idadresse { font-style: italic; } #idtelephone { font-weight: bold; font-family: monospace; } </style> </head> <body> <h3>Un carnet dadresse en Ajax</h3> <form action=""> <fieldset> <legend>Choisissez une personne</legend> <select name="personnes"> <option>Faites votre choix</option> <option>Chevalerin Vincent</option> <option>Clment Alex</option> <option>Lovisetti Stephane</option> <option>Souffre Jean</option> <option>Vivire Sylvain</option> </select> <input type="button" onclick="extraire(personnes)" value="Coordonnes" /> </fieldset> </form> <div id="cadre" style="display:none;"> Nom Prnom : <span id="idnom"></span> <span id="idprenom"></span> <br /> Adresse : <span id="idadresse"></span><br /> Ville : <span id="idcp"></span> <span id="idville"></span><br /> Tel : <span id="idtelephone"></span> </div> </body> </html>
- 8-
L escriptdecetexempleestcompatibleentreInternetExploreretFirefox.
- 9-
Suggestiondencodage
La philosophie de cet exemple est de prsenter, en cours de saisie de donnes, au clavier par lutilisateur des suggestionsdevaleurs. SoitunepageWebdanslaquellelevisiteurpeutsaisirlenomdesondpartement.
la saisie clavier de la lettre "L", diverses propositions sont affiches dans un menu droulant, soit tous les dpartements commenant par la lettre L : Landes, LoiretCher, Loire, LoireAtlantique, Loiret, Lot, LotetGaronne, Lozre.
Lutilisateur poursuit la saisie et tape la lettre "o". Le menu droulant ne prsente alors que les dpartements commenantpar"Lo"etceinstantanment,sansquelapagesoitrecharge.
- 1-
Continuonsaveclasaisiedelalettre"i".Unenouvellemodificationdumenudroulantfaitapparatrelesdpartements commenantparleslettres"Loi"(LoiretCher,Loire,LoireAtlantiqueetLoiret).
Supposonsqucestade,ledpartementdelaLoireAtlantiqueestretenu.
- 2-
Il suffit alors de cliquer sur le dpartement de la LoireAtlantique pour que celuici saffiche automatiquement dans la zonedetexte,enfaisantdisparatredanslemmetemps,lalistedroulante.
CetexemplesinspiredirectementdeGoogleSuggest(labs.google.com/suggest/)quisuggreles10motsclslesplus pertinentspourunerechercheaveclenombredepagesserfrantdesmotscls(voirchapitrePrsentationgenrale dAJAX,Exemplessurleweb).
C et exemple illustre parfaitement lapport du Web 2.0 et du concept AJAX, dans le but de faciliter lutilisation quotidienneduWebainsiqueleconfortdutilisation. Auniveauducode,cescriptcomportedanssonensemble :
q
UnfichierXML,situsurleserveur,quireprendlalistedesdpartements. UnfichierXhtmlavec,danslecasprsent,unesimplelignedetexte. UnfichierJavaScriptexternequi,aprsavoirrcuprlaouleslettre(s)saisiesdanslazonedetexte,excute unerequteHTTPpourinterrogerlefichierXML,rcuprelesdpartementscorrespondantsetlesaffichesousla formedunmenupopupdroulant. UnfichierdefeuillesdestyleCSSexterneprenantenchargelaprsentationdumenudroulant.
CommenonsparlefichierXML(departements.xml). Larborescencedecefichierseprsentecommesuit:
- 3-
Llmentracinedudocumentestlabalise<choix> ... </choix>. Pourchaquedpartement,unebalise<item>estprvue. Chaque item contient la balise <dep> ... </dep> pour le nom du dpartement et la balise <valeur> ... </valeur>pourlenumroquiluiestassoci.
<choix> <item> <dep> ... </dep> <valeur> ... </valeur> </item> </choix> Cefichier,disponibledanslespacedetlchargement,seprsentecommesuit: <?xml version="1.0" encoding="ISO-8859-1"?> <choix xml:lang="FR"> <item><dep>Ain</dep><valeur>01</valeur></item> <item><dep>Aisne</dep><valeur>02</valeur></item> <item><dep>Allier</dep><valeur>03</valeur></item> <item><dep>Alpes-de-Haute-Provence</dep><valeur>04</valeur></item> <item><dep>Hautes-Alpes</dep><valeur>05</valeur></item> <item><dep>Alpes-Maritimes</dep><valeur>06</valeur></item> <item><dep>Ardche</dep><valeur>07</valeur></item> <item><dep>Ardennes</dep><valeur>08</valeur></item> <item><dep>Arige</dep><valeur>09</valeur></item> <item><dep>Aube</dep><valeur>10</valeur></item> <item><dep>Aude</dep><valeur>11</valeur></item> <item><dep>Aveyron</dep><valeur>12</valeur></item> <item><dep>Bouches-du-Rhne</dep><valeur>13</valeur></item> <item><dep>Calvados</dep><valeur>14</valeur></item> <item><dep>Cantal</dep><valeur>15</valeur></item> <item><dep>Charente</dep><valeur>16</valeur></item> <item><dep>Charente-Maritime</dep><valeur>17</valeur></item> <item><dep>Cher</dep><valeur>18</valeur></item> <item><dep>Corrze</dep><valeur>19</valeur></item> <item><dep>Cte-dOr</dep><valeur>21</valeur></item> <item><dep>Ctes-dArmor</dep><valeur>22</valeur></item> <item><dep>Creuse</dep><valeur>23</valeur></item> <item><dep>Dordogne</dep><valeur>24</valeur></item> <item><dep>Doubs</dep><valeur>25</valeur></item> <item><dep>Drme</dep><valeur>26</valeur></item> <item><dep>Eure</dep><valeur>27</valeur></item> <item><dep>Eure-et-Loir</dep><valeur>28</valeur></item> <item><dep>Finistre</dep><valeur>29</valeur></item> <item><dep>Corse-du-Sud</dep><valeur>2A</valeur></item> <item><dep>Haute-Corse</dep><valeur>2B</valeur></item> <item><dep>Gard</dep><valeur>30</valeur></item> <item><dep>Gers</dep><valeur>31</valeur></item> <item><dep>Gironde</dep><valeur>33</valeur></item> <item><dep>Hrault</dep><valeur>34</valeur></item> <item><dep>Ille-et-Vilaine</dep><valeur>35</valeur></item> <item><dep>Indre</dep><valeur>36</valeur></item> <item><dep>Indre-et-Loire</dep><valeur>37</valeur></item> <item><dep>Isre</dep><valeur>38</valeur></item> <item><dep>Jura</dep><valeur>39</valeur></item> <item><dep>Landes</dep><valeur>40</valeur></item> <item><dep>Loir-et-Cher</dep><valeur>41</valeur></item> <item><dep>Loire</dep><valeur>42</valeur></item> <item><dep>Haute-Loire</dep><valeur>43</valeur></item> <item><dep>Loire-Atlantique</dep><valeur>44</valeur></item> <item><dep>Loiret</dep><valeur>45</valeur></item> <item><dep>Lot</dep><valeur>46</valeur></item> <item><dep>Lot-et-Garonne</dep><valeur>47</valeur></item> <item><dep>Lozre</dep><valeur>48</valeur></item> <item><dep>Maine-et-Loire</dep><valeur>49</valeur></item> <item><dep>Manche</dep><valeur>50</valeur></item>
<item><dep>Marne</dep><valeur>51</valeur></item> <item><dep>Haute-Marne</dep><valeur>52</valeur></item> <item><dep>Mayenne</dep><valeur>53</valeur></item> <item><dep>Meurthe-et-Moselle</dep><valeur>54</valeur></item> <item><dep>Meuse</dep><valeur>55</valeur></item> <item><dep>Morbihan</dep><valeur>56</valeur></item> <item><dep>Moselle</dep><valeur>57</valeur></item> <item><dep>Nivre</dep><valeur>58</valeur></item> <item><dep>Nord</dep><valeur>59</valeur></item> <item><dep>Oise</dep><valeur>60</valeur></item> <item><dep>Orne</dep><valeur>61</valeur></item> <item><dep>Pas-de-Calais</dep><valeur>62</valeur></item> <item><dep>Puy-de-Dme</dep><valeur>63</valeur></item> <item><dep>Pyrnes-Atlantiques</dep><valeur>64</valeur></item> <item><dep>Hautes-Pyrnes</dep><valeur>65</valeur></item> <item><dep>Pyrnes-Orientales</dep><valeur>66</valeur></item> <item><dep>Bas-Rhin</dep><valeur>67</valeur></item> <item><dep>Haut-Rhin</dep><valeur>68</valeur></item> <item><dep>Rhne</dep><valeur>69</valeur></item> <item><dep>Haute-Sane</dep><valeur>70</valeur></item> <item><dep>Sane-et-Loire</dep><valeur>71</valeur></item> <item><dep>Sarthe</dep><valeur>72</valeur></item> <item><dep>Savoie</dep><valeur>73</valeur></item> <item><dep>Haute-Savoie</dep><valeur>74</valeur></item> <item><dep>Paris</dep><valeur>75</valeur></item> <item><dep>Seine-Maritime</dep><valeur>76</valeur></item> <item><dep>Seine-et-Marne</dep><valeur>77</valeur></item> <item><dep>Yvelines</dep><valeur>78</valeur></item> <item><dep>Deux-Svres</dep><valeur>79</valeur></item> <item><dep>Somme</dep><valeur>80</valeur></item> <item><dep>Tarn</dep><valeur>81</valeur></item> <item><dep>Tarn-et-Garonne</dep><valeur>82</valeur></item> <item><dep>Var</dep><valeur>83</valeur></item> <item><dep>Vaucluse</dep><valeur>84</valeur></item> <item><dep>Vende</dep><valeur>85</valeur></item> <item><dep>Vienne</dep><valeur>86</valeur></item> <item><dep>Haute-Vienne</dep><valeur>87</valeur></item> <item><dep>Vosges</dep><valeur>88</valeur></item> <item><dep>Yonne</dep><valeur>89</valeur></item> <item><dep>Territoire-de-Belfort</dep><valeur>90</valeur></item> <item><dep>Essonne</dep><valeur>91</valeur></item> <item><dep>Hauts-de-Seine</dep><valeur>92</valeur></item> <item><dep>Seine-Saint-Denis</dep><valeur>93</valeur></item> <item><dep>Val-de-Marne</dep><valeur>94</valeur></item> <item><dep>Val-dOise</dep><valeur>95</valeur></item> </choix> LefichierXhtml(departement.htm)estassezsommaire.Ilcomporteunformulaireaveccommeuniquelmentuneligne detexteetunlment<div> ... </div>identifieparid="popups". <!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" xml:lang="fr" lang="fr"> <head> <title>Script Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" rev="stylesheet" href="departements.css" /> <script src="departements.js" type="text/javascript"> </script> </head> <body> <form action=""> Dpartement :<br /> <input type="text" id="formulaire" /><br /> <div id="popups"> </div> </form>
- 5-
</body> </html> LefichierJavaScriptestpluscomplexecausedelamultiplicitdestchesquildoitgrer.Voicilecodepaspasdece fichier : window.onload = initAll; var xhr = null; var departements = new Array(); CommeilsagitdunfichierJavaScriptexterne,oninitialiselafonctioninitAll()auchargementdelapage(onload). Aprsladclarationdelavariablexhr,untableauestcr(newArray())afindyinsrerlesdiffrentsdpartements. function initAll() { document.getElementById("formulaire").onkeyup = searchSuggest; La fonction initAll() rcupre dabord laction de lutilisateur dans la ligne de texte du formulaire (getElementById ("formulaire")) .Levnement associ celleci est de type onkeyup. Ainsi chaque lettre saisie, la fonction searchSuggest()seraappele(voirplusloindanslescript). UnerequteHTTPpeutalorstrelancesurleserveur. if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } Comme nous lavons vu au chapitre LobjetXMLHttpRequest Crer un objet XMLHttpRequest , ce bout de script est destin distinguer les procdures diffrentes mises en uvre pour Internet Explorer 7 et Firefox (xhr = new XMLHttpRequest();)etInternetExplorer6ouversionsantrieurespourlesquellesuncontrleActiveXestencoreutilis (xhr = new ActiveX-Object("Microsoft.XMLHTTP");). if (xhr) { xhr.onreadystatechange = setdepartements; xhr.open("GET", "departements.xml", true); xhr.send(null); } else { alert("Dsol, votre navigateur nest pas compatible avec AJAX"); } } Si lobjet xhr a bien t cr (if (xhr)), la requte est initialise selon la mthode GET, pour lire le fichier departements.xmlenmodeasynchrone.Larequteestensuiteeffectueparlinstructionsend(null). Ds quilyades changementsdtatdelarequte(onreadystatechange),lafonctionsetdepartements()estappele. function setdepartements() { if (xhr.readyState == 4) { if (xhr.status == 200) { Cette fonction setdepartements() teste dabord si les donnes retournes sont compltement accessibles (xhr.readyState == 4)puissilarequteatexcuteavecsuccs(xhr.status == 200). if (xhr.responseXML) { var tousdepartements = xhr.responseXML.getElementsByTagName("item"); Si lobjet xhr.responseXML existe, la variable tousdepartements contient, sous forme dun document XML, toutes les balises<item>dufichier,rpertoriesgrceaunomdelabalise(getElementsByTagName("item")). for (var i=0; i<tousdepartements.length; i++) {
- 6-
departements[i] = tousdepartements[i].getElementsByTagName("dep")[0].firstChild; } } } else { alert("Il y a un problme avec la requte " + xhr.status); } } } Parunebouclefor,chaqueitemvatreparcouruunun(tousdepartements[i]).Labalise<dep>(getElementsByTagName ("dep")[0])estidentifeetsonpremierenfantestmmoris,soitlen udtextecontenantlenomdudpartement.Ce nomeststockdansletableaudepartements. LesdonnesdudocumentXMLayantainsitrcupres,lafonctionsearchsuggest()vaprsentlestraiter. function searchSuggest() { var str = document.getElementById("formulaire").value; document.getElementById("formulaire").className = ""; La variablestr contiendra la ou les lettres encode(s) (value) par lutilisateur dans la ligne de texte (getElementById ("formulaire")). prsent,considronslapropritdestyleassocielalignedetexte.cestade,riennestspcifi(getElementById ("formulaire").className = ""). if (str != "") { document.getElementById("popups").innerHTML = ""; Si le contenu de la zone de texte nest pas vide (str!= ""), le contenu de la balise <div id="popups"> du document Xhtmlestinitialis.cetinstant,cecontenuestvide(innerHTML = ""). for (var i=0; i<departements.length; i++) { var ce_departement = departements[i].nodeValue; if (ce_departement.toLowerCase().indexOf(str.toLowerCase()) == 0) { var tempDiv = document.createElement("div"); tempDiv.innerHTML = ce_departement; tempDiv.onclick = choix; tempDiv.className = "suggestions"; document.getElementById("popups").appendChild(tempDiv); } } Grceunebouclefor,tousleslmentsdutableaudepartementssonttraits :ilsagitdesdonnesrcupresdans lafonctionsetdepartements()tudieciavant(departements[i]).Pourchaquelment,lavaleurdun ud(nodeValue) estretenue,soitlenomdudpartement.Cenomeststockdanslavariablece_departement. Puis un test conditionnel vrifie si le contenu de la ligne de texte se trouve dans la ou les premire(s) lettres du dpartementenutilisantlamthodeindexOftudieauchapitreLeJavaScriptManipulationdeschanesdecaractres (ce_departement.indexOf(str) == 0)). Par prcaution le nom du dpartement et la variable str (toLowerCase()) sont transformsenlettresminuscules. Sicestlecas,unnouvellment <div> (createElement("div"))estcrayantpourcontenulenomdudpartement (innerHTML = ce_departement).Lecaspourlequellutilisateurchppisitcetlmentparunclicdelasourisestprvu.Ce clicrenvoielafonctionchoix()quiseradtailleultrieurement(onclick = choix).Laffichagedecetlment<div>est prisenchargeparlapropritdestylequisappliquelaclassesuggestionsdufichierdepartements.css(className = "suggestions"). Et enfin, ce nouvel lment est inclus dans la balise <div id="popups"> en dernire position grce la mthode appendChild(). var liste = document.getElementById("popups").childNodes.length; if (liste == 0) { document.getElementById("formulaire").className = "error"; } Lescriptprvoit,enoutre,lventualit dunesaisiequinarienvoiraveclenomdesdpartements,parexemplele caractre @. La variable liste contient le nombre des n uds enfant crs dans la balise <div id="popups"> par la boucle for prcdente (getElementById("popups").childNodes.length). Dans le cas dune saisie inadquat (liste == 0),lafeuilledestyleerrorestappliqueauformulaire.
- 7-
if (liste == 1) { document.getElementById("formulaire").value = document.getElementById(" popups").firstChild.innerHTML; document.getElementById("popups").innerHTML = ""; } } } Lescriptprvoitgalementlecasoilnyauraquunseuldpartementpossibleafficherpartirdelapremirelettre saisiedanslazonedetexte.CestlecasdelalettreJ,leseuldpartementayantpourinitialeJestleJura,demme pour la lettre F le seul choix possible est le Finistre. Dans cette ventualit, le script peut afficher directement le dpartement. Voici lexplication du code : i cette variable liste ne contient quun seul lment (liste == 1), JavaScript peut directement encoder dans le formulaire (get-ElementById("formulaire").value) le contenu de ce seul lment. Il est alorsinutiledaffichernimmedefaireapparatrelemenudroulant(get-ElementById("popups").innerHTML = "";). Ilnerestepluqqutudierlafonctionchoix(). function choix(evt) { var thisDiv = (evt) ? evt.target : window.event.srcElement; document.getElementById("formulaire").value = thisDiv.innerHTML; document.getElementById("popups").innerHTML = ""; } Lafonctionchoix()tait,rappelonsle,associelvnementduclicdelasouriscorrespondantauchoixdelutilisateur dundpartementdanslalistedesdpartementssuggrs.Laligne(evt) ? evt.target : window.event. srcElement assurelacompatibilitavecFirefoxetInternetExplorer :eneffetlesdeuxnavigateursnegrentpasdelammefaon les vnements. Au clic de la souris sur un lment du menu droulant, la valeur de celuici(thisDiv.inner HTML)est retenue pour tre mise dans la ligne de texte (getElementById("formulaire").value). Dans ce cas le menu droulant peutalorstreeffac(getElementById("popups").innerHTML = ""). Lescriptcompletdevientdonc: window.onload = initAll; var xhr = null; var departements = new Array(); function initAll() { document.getElementById("formulaire").onkeyup = searchSuggest; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } if (xhr) { xhr.onreadystatechange = setdepartements; xhr.open("GET", "departements.xml", true); xhr.send(null); } else { alert("Dsol, votre navigateur nest pas compatble avec AJAX"); } } function setdepartements() { if (xhr.readyState == 4) { if (xhr.status == 200) { if (xhr.responseXML) { var tousdepartements = xhr.responseXML.getElementsByTagName("item"); for (var i=0; i<tousdepartements.length; i++) { departements[i] = tousdepartements[i].getElementsByTagName("dep") [0].firstChild; }
- 8-
} } else { alert("Il y a un problme avec la requte " + xhr.status); } } } function searchSuggest() { var str = document.getElementById("formulaire").value; document.getElementById("formulaire").className = ""; if (str != "") { document.getElementById("popups").innerHTML = ""; for (var i=0; i<departements.length; i++) { var ce_departement = departements[i].nodeValue; if (ce_departement.toLowerCase().indexOf(str.toLowerCase()) == 0) { var tempDiv = document.createElement("div"); tempDiv.innerHTML = ce_departement; tempDiv.onclick = choix; tempDiv.className = "suggestions"; document.getElementById("popups").appendChild(tempDiv); } } var liste = document.getElementById("popups").childNodes.length; if (liste == 0) { document.getElementById("formulaire").className = "error"; } if (liste == 1) { document.getElementById("formulaire").value = document.getElementById("popups").firstChild.innerHTML; document.getElementById("popups").innerHTML = ""; } } } function choix(evt) { var thisDiv = (evt) ? evt.target : window.event.srcElement; document.getElementById("formulaire").value = thisDiv.innerHTML; document.getElementById("popups").innerHTML = ""; } Ilresteconstruirelefichierdespropritsdefeuillesdestyle,soitdepartement.css. .suggestions { background-color: #FFF; padding: 2px 2px; border: 1px solid #000;} .suggestions :hover { background-color: #9cf;} #popups { position: absolute;} #formulaire { font: 9pt arial, helvetica, sans-serif;} #formulaire.error { background-color: #FFC;} Commentaires:
q
Les suggestions du script (.suggestions) seront affiches avec un arrireplan de couleur blanche et avec une finebordure. Ausurvoldelasouris,cessuggestions(.suggestions)apparaissentavecunarrireplandecouleur. Lencodagedanslalignedetexte(#formulaire)seraliseenpoliceArial,9 points. Si lutilisateur saisit une lettre ou un caractre qui ne correspond pas la liste des dpartements (#formulaire.error),lalignedetexteapparatenjaune.
C escriptestglobalementcompatibleentreInternetExploreretFirefox.Cependant,leseffetsdestylenesontpas prsents dans Firefox car, en effet, il faudrait utiliserclass (au lieu declassName sous Internet Explorer). Nous nenavonspastenucomptepourviterderallongerlescript.
- 9-
- 10 -
Undoublemenudroulant
Cet exemple met en uvre un double menu droulant (balises<select> ... </select>) dans lequel, en fonction du choix effectu dans la premire liste droulante, les options de la seconde liste sont diffrentes, le tout, sans faire appel un langage serveur commePHP. Lescapturesdcransuivantesillustrentlescript. Lasituationdedpartestlasuivante :
Lepremiermenuproposeleschoix:OS,NavigateuretProgrammation.
EnchoisissantloptionOSdupremiermenu,lesecondmenudroulantproposelesoptions:WindowsXP,WindowsVista,MacOSet Unix.
Si loption Navigateur est retenue, ces options deviennent : Explorer 5.0, Explorer 5.5, Explorer 6.0, Explorer 7.0, Firefox, Netscape,SafarietKonqueror.
- 1-
EtenfinpourledernierchoixProgrammation,lasecondelistesechangeenPHP,ASPetRuby.
ConcevonslefichierXhtmldedpart : <!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" xml:lang="fr" lang="fr"> <head> <title>Script Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <form name="formulaires" action=""> <select name="form1" onChange="changement(this)"> <option>Faites un premier choix</option> <option>OS</option> <option>Navigateur</option> <option>Programmation</option> </select> <select name="form2"> <option>Faites un second choix</option> </select> </form> </body> </html> Commentaires:
q
Leformulaire(global)portelenomsuivant :name="formulaires". Lesmenusdroulantsportentrespectivementlesnomsname="form1" etname="form2". Lechoixeffctuparlutilisateurdanslepremiermenudroulantestprisenchargeparlafonctionchangement(this)duscript.
- 2-
Leslmentsdelasecondebalise<select> sont prsents sur le serveur sous la forme dunfichiertextecomportantlesdiffrentes optionssparesparlesignetoile*. SoitlefichierOS.txt: *Windows XP*Windows Vista*Mac OS*Unix LefichierNavigateur.txt: *Explorer 5.0*Explorer 5.5*Explorer 6.0*Explorer 7.0*Firefox* Netscape*Safari*Konqueror Etenfin,lefichierProgrammation.txt: *PHP*ASP*Ruby Lescriptapourmission,aprsavoirrcuprloptionslectionneauniveaudupremiermenu,defaireunerequtesurlefichiertexte concern,desparerlesinformationsfourniesparcefichieretdelesincluredanslesecondmenu. laboronscescript,ligneparligne : <script type=text/JavaScript> //<![CDATA[ function changement(form1){ La fonction changement() est appele dans le fichier Xhtml lorsque lutilisateur choisit une option dans le premier formulaire (onChange="changement (this)). var index = form1.selectedIndex; LavariableindexidentifieloptionslectionneparlutilisateurdanslepremiermenugrcelapropritselectedIndex. var valeur = form1[index].text; Lavariablevaleurretourneletexteassociloption(balise<option> ... </option>)slectionne. var formulaireselements = document.formulaires.elements var form2elements = formulaireselements["form2"]; Plus loin dans le script, il faudra pointer les lments du second menu. La variable formulaireselements liste tous les lments du formulaireglobal(formulaires).Lavariableform2elementsnereprendqueleslmentsdusecondmenu(form2). url = valeur + ".txt"; LenomdufichiertexteutiliserlorsdelarequteHTTPestconstruitpartirdelavariablevaleurlaquelleonajoutelextension ".txt". if (valeur != "Faites votre choix") { Lorsque lutilisateur effectue un choix dans le premier menu droulant, soit lorsque la variable valeur est diffrente de loption proposepardfaut(if (valeur != "Faites votre choix")),laprocdurepourinitialiserlarequtepeuttreaborde. var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } Lobjetxhrestcrdesortetrecompatiblepourlesdiffrentsnavigateurs. if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ Onsassurequelobjetxhrabientcr(if(xhr))etquelarequteabienabouti(xhr.readyState == 4 et xhr.status == 200). var form2reponse = xhr.responseText; Lavariableform2reponsecontientlefichierretournparlarequtesousformedunfichiertexte(xhr.responseText).
- 3-
contenuform2(form2reponse,form2elements); } } xhr.open("GET", url, true); xhr.send(null); } } } Lafonctioncontenuform2()quivaconstruirelesecondmenudroulant,peutalorstreappele,avecenarguments,lefichierrsultant delarequte(form2reponse)etleslmentsdusecondmenu(form2elements). function contenuform2(form2reponse,form2elements) { var form2options = form2reponse.split("*"); Lapremiretchedelafonctioncontenuform2()consisteretrouverlesdiffrentsitemscontenusdanslefichierform2reponse.Pource faire,lamthodesplit()delobjetStringestutilise :elleretournesousformedetableau,leslmentsdelachanedecaractresen tenantcomptedusparateurtoile*. form2elements = 1; form2elements.length = form2options.length; On informe le moteur JavaScript que le nombre dlments du second menu (form2elements.length) sera gal au nombre de sous chanesdecaractrescontenuesdansletableauretournparlamthodesplit()(form2options.length). Par lintermdiaire dune boucle for, il suffit, pour terminer le script, de transfrer une par une, les souschanes de caractres (form2options[i])versletexteassociauxoptionsdusecondmenu<select> (form2elements[i].text) for (i=1; i < form2options.length; i++) { form2elements[i].text = form2options[i]; } } //]]> </script> LefichierXhtmlcompletdecetexempledevient: <!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" xml:lang="fr" lang="fr"> <head> <title>Script Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ function changement(form1){ var index = form1.selectedIndex; var valeur = form1[index].text; var formulaireselements = document.formulaires.elements var form2elements = formulaireselements["form2"]; url = valeur + ".txt"; if (valeur != "Faites votre choix") { var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var form2reponse = xhr.responseText; contenuform2(form2reponse, form2elements); } } xhr.open("GET", url, true); xhr.send(null); } } } function contenuform2(form2reponse, form2elements) {
- 4-
var form2options = form2reponse.split("*"); form2elements.length = 1; form2elements.length = form2options.length; for (i=1; i <<+>form2options.length; i++) { form2elements[i].text = form2options[i]; } } //]]> </script> </head> <body> <form name="formulaires" action=""> <select name="form1" onChange="changement(this)"> <option>Faites un premier choix</option> <option>OS</option> <option>Navigateur</option> <option>Programmation</option> </select> <select name="form2"> <option>Faites un second choix</option> </select> </form> </body> </html> Pourrendrelescriptfonctionnel,ilfaudraitassocieruneaction(parexemple,unlienversunepage)loptionretenuedanslesecond menudroulant. C escriptestparfaitementcompatibleentreFirefoxetInternetExplorer.
- 5-
Unmenudenavigation
Lexemplesuivantproposeuntableauduneligneetdedeuxcolonnes.Encliquantsurunliendumenudenavigation danslapremirecolonne,lapagedemandesaffichedanslasecondecolonne. LespagesaffichesdanslasecondecolonnesontprsentessurleserveuretsontappelesparunerequteHTTP. Lacapturedcranillustrelasituationdorigine.
Auclicsurlepremierliendumenudenavigation,lapage1saffiche.
Le script prvoit la possibilit dun lien bris. Ce qui occasionne un message derreur illustr par la capture dcran suivante.
- 1-
LefichierXhtmldedpart,avecquelquesdclarationsdestyleseprsentecommesuit: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-#tableau { border-collapse: collapse; border: solid black 1px; height : 200px;} .td1 { border-right : solid black 1 px; padding: 5px;} .td2 { padding: 5px;} a:link { text-decoration:none; color:#000000; } a:visited { text-decoration:none; color:#000000; } a:hover { text-decoration:none; color:#000000; } a:active { text-decoration:none; color:#000000; } --> </style> </head> <body> <table width="300" id="tableau"> <tr> <td valign="top" width="80" class="td1"> <a href="javascript:void(0)" onclick="open_url(page1.htm)">Page 1</a><br /> <a href="javascript:void(0)" onclick="open_url(page2.htm)">Page 2</a><br /> <a href="javascript:void(0)" onclick="open_url(page3.htm)">Page 3</a><br /> <a href="javascript:void(0)" onclick="open_url(page4.htm)">Page 4</a><br /> <a href="javascript:void(0)" onclick="open_url(xxxxx.htm)">Lien bris</a> </td> <td valign="top" width="220" class="td2"> <div id="contenu"><h2>Accueil</h2></div> </td> </tr> </table> </body> </html>
- 2-
Lecodedelabalisedelien<a> ... </a>ncessitequelquescommentaires:

q
Habituellement, au clic dun lien, la page spcifie dans lattribut href est charge par le navigateur. Dans ce script,cetraitementclassiqueduXhtmlnestpasutilis,ainsinousutilisonslaplacelafonction open_url(). Pourpasseroutretouteactiondelattributhref,lanotationjavascript:void(0)estutilise. Auclicdulien,lafonctionopen_url()estappeleetprendcommeargument,ladressedufichierafficher,par exempleopen_url(page1.htm).
Les fichiers page1.htm, page2.htm, page3.htm et page4.htm sont des fichiers Xhtml basiques. Voici le code du fichier page1.htm. <!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" xml:lang="fr" lang="fr"> <head> <title>Page 1</title> <meta http-equiv="Content-Type" content="text/html" /> </head> <body> <h2>Page 1</h2> <p style="font-size: 9px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Etc... </p> </body> </html> Lescriptprsenteuncodagedontlaplupartdeslmentsdevraienttreassimilscestadedeltude. <script type=text/JavaScript> //<![CDATA[ var xhr = null; function open_url(url) { Aprsavoirdfinilavariablexhrcommeunevariableglobale,lafonctionopen_url(url),appeleauclicsurunliendans lecodeXhtml,estinitialise. var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } LobjetxhrestcrpourtrecompatibleentrelesnavigateursFirefoxetInternetExplorer. xhr.onreadystatechange = function() { response(); } xhr.open("GET", url, true); xhr.send(null); } LarequteHTTPesteffectue.Auxchangementsdtatsdecelleci,lafonctionreponse()estappele. function response() { if (xhr.readyState == 4) { if (xhr.status==200) { document.getElementById("contenu").innerHTML = xhr.responseText; } La fonction reponse(), aprs avoir tabli que les conditions habituelles sont remplies (xhr.readyState == 4 et
xhr.status = 200),vacriredanslabalise<div id="contenu">,lefichiertransmissousformedunfichiertexte.Ilfaut remarquerquilsagitbiendunfichierXhtmlcarceluicirpondbienladfinitiondetextebrut,agrmentdebalises permettantsonaffichage. else { document.getElementById("contenu").innerHTML = "<h3>La page nest pas di sponible. <br> <br> Erreur : " + xhr.status + "</h3"; } } } Si la requte na pu aboutir, soit dans le cas cause dun lien bris (si le fichier xxxxx.htm nest pas prsent sur le serveur),unmessagederreurestaffich. //]]> </script> Finduscript. LefichierXhtmlcomplet,aveclescript,seprsentecommesuit: !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" xml:lang="fr" lang="fr"> <head> <title>Script Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ var xhr = null; function open_url(url) { if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } xhr.onreadystatechange = function() { reponse(); } xhr.open("GET", url, true); xhr.send(null); } function reponse() { if (xhr.readyState == 4) { if (xhr.status==200) { document.getElementById("contenu").innerHTML = xhr.responseText; } else { document.getElementById("contenu").innerHTML = "<h3>La page nest pas disponible.<br><br>Erreur : " + xhr.status + "</h3"; } } } //]]> </script> <style type="text/css"> <!-#tableau { border-collapse: collapse; border: solid black 1px; height : 200px;} .td1 { border-right : solid black 1px; padding: 5px;} .td2 { padding: 5px;}
- 4-
a:link { text-decoration:none; color:#000000; } a:visited { text-decoration:none; color:#000000; } a:hover { text-decoration:none; color:#000000; } a:active { text-decoration:none; color:#000000; } --> </style> </head> <body> <table width="300" id="tableau"> <tr> <td valign="top" width="80" class="td1"> <a href="javascript:void(0)" onclick="open_url(page1.htm)">Page 1</a><br /> <a href="javascript:void(0)" onclick="open_url(page2.htm)">Page 2</a><br /> <a href="javascript:void(0)" onclick="open_url(page3.htm)">Page 3</a><br /> <a href="javascript:void(0)" onclick="open_url(page4.htm)">Page 4</a><br /> <a href="javascript:void(0)" onclick="open_url(xxxxx.htm)">Lien bris</a> </td> <td valign="top" width="220" class="td2"> <div id="contenu"><h2>Accueil</h2></div> </td> </tr> </table> </body> </html>
L escriptestcompatibleentreInternetExploreretFirefox.
- 5-
Unscriptdelogin
Les utilisateurs autoriss accder un site ont chacun un identifiant (utilisateur) et un mot de passe qui leur est propre dans un document XML. ces deux chanes de caractres sont listes. Si les donnes encodes sont valides, laccsausiteestaccord.Danslecascontraire,unmessagederreurapparat. Danslecadredelexemple,lesbinmes(utilisateur/motdepasse)sont(AdminAdmin),(User1Pass1)et(User2Pass2). Pouraugmenterlenombredutilisateurs,ilsuffitdajouterleursidentifiantsdanslefichierXML. L esscriptsdeloginetdemotdepasseenJavaScriptposentdesproblmesdescuritcarlecodesourceest accessible. Le script nchappe pas la rgle malgr la complexit du code. Un login nest efficace que sil fait appelunlangagedeprogrammationctserveurcommePHPouASP.
LefichierHtmldedpartcomportedeuxlignesdetexteetunbouton. <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </head> <body> <form action=""> <table border="0"> <tr> <td align="right">Utilisateur : </td> <td><input type="text" id="idlogin" size="15" /></td> </tr> <tr> <td align="right">Mot de passe : </td> <td><input type="text" id="idpass" size="15" /></td> </tr> <tr> <td align="center" colspan="2"> <br /><input type="button" onclick="log()" value="Me connecter" /> </td> </tr> </table> </form> </body> </html> Lefichierlogin.xmlcontientlesutilisateursautoriss:
- 1-
<?xml version="1.0" encoding="ISO-8859-1"?> <utilisateurs> <user><login>Admin</login><pass>Admin</pass></user> <user><login>User1</login><pass>Pass1</pass></user> <user><login>User2</login><pass>Pass2</pass></user> </utilisateurs> Lastructureestlasuivante : <utilisateurs> <user> <login></login> <pass></pass> </user> </utilisateurs> Lescriptdevient: <script type=text/JavaScript> //<![CDATA[ var xhr = false; function log() { login=document.getElementById("idlogin").value; pass=document.getElementById("idpass").value; Lavariablexhrestdfinie(variableglobale).Lafonctionlog()estappeledanslefichierXhtmlparleclicsurlebouton Meconnecter,puisrcuprelesvaleursencodesdansleslignesdetextedudocumentXhtml,soitrespectivementles variablesloginetpass. if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } LobjetcorrespondantunerequteHTTPestcr. if (xhr) { xhr.onreadystatechange = verif; xhr.open("GET", "login.xml", true); xhr.send(null); } else { alert("Votre navigateur nest pas compatible avec AJAX"); } } La requte vers le fichier login.xml seffectue en mode asynchrone. Au changement dtat de la requte (xhr.onreadystatechange),lafonction verif() estappele. function verif() { if (xhr.readyState == 4) { if (xhr.status == 200) { if (xhr.responseXML) { var login_el = new Array(); var logins = xhr.responseXML.getElementsByTagName("login"); La fonction verif(), aprs stre assure que la requte sest effectue de faon correcte (xhr.readyState == 4 et xhr.status == 200),traitelefichierreucommeunobjetXML(xhr.responseXML). La variable login_el est dfinie comme une variable indexe en vue de son utilisation ultrieure. Du fichier XML reu (xhr.responseXML), le tableau logins liste tous les lments (getElementsByTagName("login");) comportant la balise <login>.
for (var i=0; i<logins.length; i++) { login_el[i] = logins[i].firstChild; var celogin = login_el[i].nodeValue; Une bouclefor passe en revue, un par un, les lments de la variable logins(soit logins[i]) et plus prcisment le premiern ud enfant de celuici(firstChild). La variable celogin stocke le texte de ce noeud enfant (nodeValue).Elle contientdoncletextecomprisentrelesbalises<login> ... </login>dufichierXML. if (login.toLowerCase()==celogin.toLowerCase()){ var cepass=logins[i].nextSibling.firstChild.nodeValue; if (pass.toLowerCase()==cepass.toLowerCase()) { window.location.href="xxx.htm"; } Ontestealorsparlacondition(if (login==celogin))silavariableceloginestgaleautextesaisiparlutilisateur(pour rappellavariablelogin).Cettecomparaisondevariablessaffectuesurdeschanesenminuscules(mthodetoLowerCase ()*,rendantainsilencodagecaseinsensitive. Il faut prsent soccuper du mot de passe. La proprit nextSibling permet daccder aux balises <pass> au mme niveauquelabalise<login>danslarborescencedufichierXML.Letextecomprisentrelesbalises<pass> ... </pass> estalorsobtenupar firstChild.nodeValue.Celuicieststockdanslavariablecepass.Sicettedernireestgalela saisie de lutilisateur, soit la variable pass (if (pass==cepass)), laccs au site peut tre accord (window.location.href)versunepagequelconque,icixxx.htm. else { alert("Login ou mot de passe incorrect"); } } } } } Si ce stade, le login ou le mot de passe ne correspond pas aux informations du fichier XML, un message derreur saffichedansunebotedalerte.
else { alert("Il y eu un problme " + xhr.status); } } } //]]> </script> Lescriptesttermin. Lefichierlogin.htmlcompletdevient:
- 3-
<!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type=text/JavaScript> //<![CDATA[ var xhr = false; function log() { login=document.getElementById("idlogin").value; pass=document.getElementById("idpass").value; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } if (xhr) { xhr.onreadystatechange = verif; xhr.open("GET", "login.xml", true); xhr.send(null); } else { alert("Votre navigateur nest pas compatible avec AJAX"); } } function verif() { if (xhr.readyState == 4) { if (xhr.status == 200) { if (xhr.responseXML) { var logins = xhr.responseXML.getElementsByTagName("login"); var login_el = new Array(); for (var i=0; i<logins.length; i++) { login_el[i] = logins[i].firstChild; var celogin = login_el[i].nodeValue; if (login.toLowerCase()==celogin.toLowerCase()){ var cepass=logins[i].nextSibling.firstChild.nodeValue; if (pass.toLowerCase()==cepass.toLowerCase()) { window.location.href="carnet.htm"; } else { alert("Login ou mot de passe incorrect"); } } } } } else { alert("Il y eu un problme " + xhr.status); } } } //]]> </script> </head> <body> <form action=""> <table border="0"> <tr> <td align="right">Utilisateur : </td> <td><input type="text" id="idlogin" size="15" /></td>
</tr> <tr> <td align="right">Mot de passe : </td> <td><input type="text" id="idpass" size="15" /></td> </tr> <tr> <td align="center" colspan="2"> <br /><input type="button" onclick="log()" value="Me connecter" /> </td> </tr> </table> </form> </body> </html>
E nltat,lescriptnefonctionnequesousInternetExplorer.
- 5-
UndiaporamaenAJAX
SoitundiaporamadontleslmentssontsitussurleserveuretappelsparunerequteHTTP.Ilfautnoterqueles lmentsdudiaporamacomportentdesimagesmaisgalementducommentaire.
LefichierXhtmldedpartestlesuivant: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <style type="text/css">  </style> </head> <body> <table width="235" id="tableau"> <tr> <td class="top"> <p> <a href="javascript:void(0)" onclick="go(0)">1</a> <a href="javascript:void(0)" onclick="go(1)">2</a> <a href="javascript:void(0)" onclick="go(2)">3</a> <a href="javascript:void(0)" onclick="go(3)">4</a> <a href="javascript:void(0)" onclick="go(4)">5</a> </p> </td> </tr> <tr> <td class="diapo"><div id="image">Diaporama</div></td> </tr> <tr> <td class="comment"><div id="commentaires">Commentaires <br /> </div></td> </tr> </table> </body> </html> LesimagessontcontenuesdanslesfichiersXhtml,image1.htm,image2.htm,image3.htm,image4.htmetimage5.htm. Soittitredexemple,pourlefichierimage1.htm: <!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" xml:lang="fr" lang="fr"> <head> <title>Image 1</title> <meta http-equiv="Content-Type" content="text/html" /> </head> <body> <p> <img border="0" src="html.jpg" width="108" height="120" /> </p> </body> </html> Les commentaires sont repris dans de simples fichiers de texte soit description1.txt, description2.txt, description3.txt, description4.txtetdescription5.txt. Lefichierdescription1.txtcontientainsi: HTML 4 - Matrisez le code source (2me dition)
- 2-
P ourviterlesproblmesdencodagedescaractres,nousavons,sousNotepad,enregistrlefichiertextesous uncodageUTF8. Voicilescriptpaspas: <script type=text/JavaScript> //<![CDATA[ galerie = new Array(); galerie[0] = "image1.htm"; galerie[1] = "image2.htm"; galerie[2] = "image3.htm"; galerie[3] = "image4.htm"; galerie[4] = "image5.htm"; description = new Array(); description[0] = "description1.txt"; description[1] = "description2.txt"; description[2] = "description3.txt"; description[3] = "description4.txt"; description[4] = "description5.txt"; var index; Lescriptcommenceparladclarationdedeuxtableaux(Array),lunpourrecueillirlesimages(galerie)etunautrepour letexteexplicatif(description). Ondclareaussilavariableglobaleindex. function requetehttp() { if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } } Commeilfauteffectuer,pourchaquecrandudiaporama,deuxrequtes(unepourlimageetuneautrepourletexte), lacrationdelobjetxhrestconfielafonctionrequetehttp().Cequiallgelecodeduscript. function go(index) { var url1 = galerie[index]; var url2 = description[index]; Ladresse du fichier contenant limageestfournieparlargumentdelafonction go()au clic de la souris dans le fichier Html.Cetindexestfourniautableaugalerie.Onprocdedemmepourletextedescriptif. requetehttp() Oneffectueunepremirerequte(requetehttp())envuedercuprerlefichierXhtmlcontenantlimage. xhr.onreadystatechange = function() { reponseimg(); } xhr.open("GET", url1, true); xhr.send(null); Dsquedesinformationssontdisponiblessurlvolutiondelarequte(xhr.onreadystatechange),lescriptpasselamain lafonctionreponseimg(). requetehttp() Une seconde requte (requetehttp()) est envoye en vue de rcuprer cette fois le fichier texte contenant le commentaire. xhr.onreadystatechange = function() { reponsecom(); } xhr.open("GET", url2, true); xhr.send(null);
- 3-
} Dsquedesinformationssontdisponiblessurlvolutiondecetterequte(xhr.onreadystatechange),lescriptpassela mainlafonctionreponsecom()pourtraiterlescommentaires. function reponseimg() { if ((xhr.readyState == 4) && (xhr.status==200)) { document.getElementById("image").innerHTML = xhr.responseText; } } La fonction reponseimg(), aprs stre assur que tout sest droul correctement (xhr.readyState == 4 et xhr.status==200),affichedanslefichierXhtml(innerHTML),lemplacementprvuceteffetdansledocumentpourles images(getElementById("image")),larponselarequtesousformedetexte(xhr.responseText). function reponsecom() { if ((xhr.readyState == 4) && (xhr.status==200)) { document.getElementById("commentaires").innerHTML = xhr.responseText; } } Lafonctionreponsecom()procdedemmepourlescommentaireslemplacementprvuceteffetdanslefichierXhtml soitdanslabalise<div id="commentaires"> (getElementById("commentaires")). Lescriptseterminepar: //]]> </script> LefichierXhtmlcompletestlesuivant: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type=text/JavaScript> //<![CDATA[ galerie = new Array(); galerie[0] = "image1.htm"; galerie[1] = "image2.htm"; galerie[2] = "image3.htm"; galerie[3] = "image4.htm"; galerie[4] = "image5.htm"; description = new Array(); description[0] = "description1.txt"; description[1] = "description2.txt"; description[2] = "description3.txt"; description[3] = "description4.txt"; description[4] = "description5.txt"; var index; function requetehttp() { if (window.XMLHttpRequest) { xhr<+>= new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } } function go(index) {
var url1 = galerie[index]; var url2 = description[index]; requetehttp(); xhr.onreadystatechange = function() { reponseimg(); } xhr.open("GET", url1, true); xhr.send(null); requetehttp(); xhr.onreadystatechange = function() { reponsecom(); } xhr.open("GET", url2, true); xhr.send(null); } function reponseimg() { if ((xhr.readyState == 4) && (xhr.status==200)) { document.getElementById("image").innerHTML = xhr.responseText; } } function reponsecom() { if ((xhr.readyState == 4) && (xhr.status==200)) { document.getElementById("commentaires").innerHTML = xhr.responseText; } } //]]> </script> <style type="text/css"> <!-#tableau { border-collapse: collapse; border: solid black 1px;} .top {text-align:center; background-color: #9cf;} .diapo {height: 140px; text-align: center; border-top: solid black 1px; vertical-align: middle;} .comment {font-family: sans-serif; font-size: 11px; text-align: center; padding: 3px;} a:link { text-decoration:none; color:#000; } a:visited { text-decoration:none; color:#000; } a:hover { text-decoration:none; color:#000; } a:active { text-decoration:none; color:#000; } --> </style> </head> <body> <table width="235" id="tableau"> <tr> <td class="top"> <p> <a href="javascript:void(0)" onclick="go(0)">1</a> <a href="javascript:void(0)" onclick="go(1)">2</a> <a href="javascript:void(0)" onclick="go(2)">3</a> <a href="javascript:void(0)" onclick="go(3)">4</a> <a href="javascript:void(0)" onclick="go(4)">5</a> </p> </td> </tr> <tr> <td class="diapo"><div id="image">Diaporama</div></td> </tr> <tr> <td class="comment"><div id="commentaires">Commentaires<br /> </div></td> </tr> </table> </body> </html> Denombreusesamliorationsouvolutionsdecescriptdediaporamasontpossibles,citons:
- 5-
Unprchargementdesimages. Uneffetdaffichageprogressifpendantlechargementdelimage. Unaffichagealatoiredesimagesetdescommentaires. Etc.
E nltat,lescriptnefonctionneconvenablementquesousInternetExplorer.
- 6-
Uneprvisualisationdelapage
Lexemplesuivantproposelaprvisualisationdelapagedansunebotepopupapparaissantausurvoldunlienparla souris. CetexempleillustrebienleconfortdenavigationetlinteractivitquepeutapporterleconceptAJAXlutilisateur. Illustronslescriptpardescapturesdcran.
LefichierXhtmldedpartaveclafeuilledestylequigrelafentredeprvisualisationestlesuivant : <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <style> <!-#popup { position: absolute; top: 10px;
- 1-
left: 10px; background-color: #9cf; width: 275px; height: 120px; font: .9em Arial, sans-serif; padding: 5px; visibility: hidden; border: 1px black solid; clip: auto; overflow: hidden;} a { color: black; text-decoration: none;} --> </style> </head> <body> <h3>Previsualisation au survol du lien</h3> <p> <a href="page1.htm">Vers page 1</a><br /> <a href="page2.htm">Vers page 2</a><br /> <a href="page3.htm">Vers page 3</a><br /> <a href="xxxxx.htm">Vers page 4</a> </p> <div id="popup"> </div> </body> </html> Lesfichierspage1.htm,page2.htmetpage3.htmsontdesfichiersXhtmlquelconques. NousavonsreprislesfichiersdupointUnmenudenavigationduprsentchapitre.Voicilecodedelapage1.htm : <!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" xml:lang="fr" lang="fr"> <head> <title>Page 1</title> <meta http-equiv="Content-Type" content="text/html" /> </head> <body> <h2>Page 1</h2> <p style="font-size: 9px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Etc... </p> </body> </html> Entamonsltudeduscript. <script type=text/JavaScript> //<![CDATA[ window.onload = initial; var xhr = null; var xpos; var ypos; Auchargementdelapage(window.onload),lafonctioninitial()estappele.Diffrentesvariablessontinitialises:la variablexhr,lavariablexposquidterminelapositionhorizontaledunpointetlavariableyposquidterminelaposition verticaledunpoint. function initial() { var liens = document.getElementsByTagName("a"); for (var i=0; i< liens.length; i++) { liens[i].onmouseover = previsualisation; } } La fonctioninitial() a pour mission dassocier la fonction previsualisation() au survol par la souris des liens de la page. La variable liens liste toutes les balises <a> du document (getElementsByTagName("a")). Tous les liens sont
- 2-
traitsparuneboucleforquiassocielafonctionprevisualisation()lvnementsurvol(onmouseover)desliens(liens [i]). function cacher() { document.getElementById("popup").style.visibility = "hidden"; } La fonction cacher() a pour but de cacher la fentre popup. Ceci se fait en affectant la dclaration de visibilit CSS (style.visibility)delafentredeprvisualisation(getElementById("popup"))lavaleurhidden. function previsualisation(evt) { if (evt) { var url = evt.target; } else { evt = window.event; var url = evt.srcElement; } Lafonctionprevisualisation()possdecommeargumentlvnementevtdelafonctioninitial(),soitlesurvoldela sourissurunlien. Les navigateurs Internet Explorer et Firefox nont pas la mme gestion des vnements, spcialement pour faire rfrence llment do provient lvnement. Avec Firefox et les navigateurs de la famille Mozilla, il sagit de la propritevt.targetquifaitrfrencelobjetoriginedelvnement.AveclesnavigateursdetypeInternetExplorer,il faut dabord accder lobjetvnement par window.event puis llment dans lequel a eu lieu lvnement par srcElement. Ladresse (var url) associe au survol du lien par la souris est donne par evt.target window.event.srcElementpourInternetExplorer.Lescriptestainsicompatible. xpos = evt.clientX; ypos = evt.clientY; La variablexpos note la position horizontale du pointeur de la souris au survol du lien et la variable ypos, la position verticaledeceluici. if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject ("Microsoft.XMLHTTP"); } catch (e) { } } } LobjetrequteHTTPestcrdefaoncompatibleaveclesnavigateursFirefoxetInternetExplorer. if (xhr) { xhr.onreadystatechange = afficher; xhr.open("GET", url, true); xhr.send(null); } else { alert("Votre navigateur nest pas compatible AJAX"); } } Larequteesteffectue.Aupremierchangementdtatdecelleci,lafonctionafficher() estappele. function afficher() { var previsu = document.getElementById("popup"); if (xhr.readyState == 4) { if (xhr.status==200) { previsu.innerHTML = xhr.responseText; previsu.style.top = yPos+10 + "px"; pour Firefox et par
- 3-
previsu.style.left = xPos+10 + "px"; previsu.style.visibility = "visible"; previsu.onmouseout = cacher; } Dans la fonction afficher(), la variable previsu est dabord dfinie comme tant la fentre popup (getElementById ("popup")).Silarequtesestdroulecorrectement(xhr.readyState == 4 etxhr.status == 200),lecontenudecelle ci(xhr.responseText)estaffichdanslafentrepopup(previsu.innerHTML). On cre un lger dcalage vertical (previsu.style.top = (yPos+10) + "px") puis horizontal (previsu.style.left = xPos+10 + "px"). Lafentrepopupdevientalorsvisible(previsu.style.visibility = "visible").Lorsquelepointeurdelasourisquitte lafentrepopup(previsu.onmouseout),lafonctioncacher()estappelle. else { previsu.innerHTML = "La page nest pas disponible. <br> <br> Erreur : " + xhr.status; } } } Silarequteneseffectuepas,unmessagederreurestaffichdanslafentrepopup(previsu.innerHTML)aveclecode (xhr.status)delerreur.
//]]> </script> Finduscript LefichierXhtmlcompletdevient: <!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" xml:lang="fr" lang="fr"> <head> <title>Ajax</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <script type=text/JavaScript> //<![CDATA[ window.onload = initial;
- 4-
var xhr = null; var xPos; var yPos; function initial() { var liens = document. getElementsByTagName("a"); for (var i=0; i< liens.length; i++) { liens[i].onmouseover = previsualisation; } } function cacher() { document.getElementById("popup").style.visibility = "hidden"; } function previsualisation(evt) { if (evt) { var url = evt.target; } else { evt = window.event; var url = evt.srcElement; } xPos = evt.clientX; yPos = evt.clientY; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { if (window.ActiveXObject) { try { xhr = new ActiveXObject ("Microsoft.XMLHTTP"); } catch (e) { } } } if (xhr) { xhr.onreadystatechange = afficher; xhr.open("GET", url, true); xhr.send(null); } else { alert("Votre navigateur nest pas compatible AJAX"); } } function afficher() { var previsu = document.getElementById ("popup"); if (xhr.readyState == 4) { if (xhr.status==200) { previsu.innerHTML = xhr.responseText; previsu.style.top = (yPos+10) + "px"; previsu.style.left = (xPos+10) + "px"; previsu.style.visibility = "visible"; previsu.onmouseout = cacher; } else {previsu.innerHTML = "La page nest pas disponible. <br> <br> Erreur : " + xhr.status;} } } //]]> </script> <style> <!-#popup { position: absolute; top: 10px; left: 10px; background-color: #9cf; width: 275px;
- 5-
height: 120px; font: .9em arial, sans-serif; padding: 5px; visibility: hidden; border: 1px black solid; clip: auto; overflow: hidden;} a {color: black; text-decoration: none;} --> </style> </head> <body> <h3>Previsualisation au survol du lien</h3> <p> <a href="page1.htm">Vers page 1</a><br /> <a href="page2.htm">Vers page 2</a><br /> <a href="page3.htm">Vers page 3</a><br /> <a href="xxxxx.htm">Vers page 4</a> </p> <div id="popup"> </div> </body> </html>
C ommesignalplushaut,lescriptestcompatibleentreInternetExploreretFirefox.
- 6-
Unmenuverticaldynamique
Arriv au terme de votre apprentissage dAjax, il semble intressant daborder un exemple, peuttre un peu plus complexe, qui mle non seulement les requtes asynchrones mais galement le traitement dynamique des feuilles de styleCSSetlacrationparleDOM,lementsdelapage. C et exemple est directement inspir du script AJAX Switch Menu de Martial Boissonneault. Nous livrons ici une versionsimplifieetpersonnaliseafinderesterdanslalignepdagogiquequenousnoussommesfixsdansle cadredecetouvrage.Laversioncomplteesttlchargeablesurlesitewww.getelementbyid.com/. Lideduscriptestde"confectionner"parleDOM,unmenudenavigationverticalpartirdesdonnesreprisesdansun simpledocumentXML. Ce script permet donc la ralisation, la commande, de multiples menus de navigation par la seule modification du documentXML.Lacrationetlamisejourdunmenudenavigationncessitetoujoursuntravaillongetprilleux,pour contournerceproblme,cescriptrendparfaitementmodulable,etsimpledutilisation,lamiseenplacedecesmenus.
SoitnotrepageHtmlquisertgalementdemodlepourlesautrespagesdusite(menuAjax.htm). <html> <head> <title>Menu dynamique AJAX</title>
- 1-
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <link rel="stylesheet" href="menuAjax.css" type="text/css"/> <script type="text/javascript" src="menuAjax.js"></script> </head> <body onload="menuAjax(menuAjax.xml);"> <div id="menu" style="float:left;width:130px;"> <div id="affichageMenu"></div> </div> <div id="contenu"> <h3>Page daccueil</h3> <p> Contenu de la page... </p> </div> </body> </html> Plusieursremarquessimposent:
q
Il ny a pas de dclaration de doctype. Cette astuce est destine contourner les problmes lis linterprtationdesfeuillesdestyleCSSparlesnavigateursdelafamilleInternetExplorer. IlyadesliensversdesfichiersJavaScriptetdefeuillesdestyleCSSexternes.Cequiallgelecodedelapage Xhtmletfacilitenotretude. Labalise<body>appellelafonctionmenuAjax()auchargementdelapage. La page de dpart comporte uniquement deux balises <div> dont la balise <div id="affichageMenu"> ... </div> qui contient le menu de navigation. ce stade, elle est compltement vide ainsi que la balise <div id="contenu"> ... </div>quiaccueilleletextedelapageWeb.
LefichierXML(menuAjax.xml) : <?xml version="1.0" encoding="iso-8859-1" ?> <menus> <menu texte="Home"> <sousmenu texte="Accueil" url="accueil.htm"></sousmenu> </menu> <menu texte="Produits"> <sousmenu texte="Produit 1" url="produit1.htm"></sousmenu> <sousmenu texte="Produit 2" url="produit2.htm"></sousmenu> <sousmenu texte="Produit 3" url="produit3.htm"></sousmenu>
- 2-
</menu> <menu texte="Services"> <sousmenu texte="Service <sousmenu texte="Service <sousmenu texte="Service <sousmenu texte="Service <sousmenu texte="Service </menu> </menus>
1" 2" 3" 4" 5"
url="service1.htm"></sousmenu> url="service2.htm"></sousmenu> url="service3.htm"></sousmenu> url="service4.htm"></sousmenu> url="service5.htm"></sousmenu>
Ces balises comportent des attributs. Les items principaux (Home,Produits etServices) possdent lattribut texte.Les sousmenus,outrelattributtexte,disposentdelattributurlquidfinitleliencorrespondant. Pourmodifieroumettrejourlemenudenavigation,ilsuffitsimplementdemodifiercefichierXML. Aprschargementettraitementdecefichier,notrefichiermenuAjax.htmprendlaformesuivante:
Lefichierexternedefeuillesdestyle(menuAjax.css): #affichageMenu{ width: 100px; background-color: #F3F9FE; } .menuOut { cursor:pointer; color: #21536A; border: 1px solid; background-color: #EAEEEE; padding: 4px; font-family:Verdana; font-size: 11px; border-color: #FEFEFE #C3C8CB #C3C8CB; margin: 0px; text-decoration: none; padding-left:3px; } .menuOver { cursor:pointer; color: #21536A; border: 1px solid; background-color: #DDEEFF; padding: 4px; font-family:Verdana; font-size: 11px; border-color: #C3C8CB #C3C8CB #FEFEFE #C3C8CB;
margin: 0px; text-decoration: none; padding-left:3px; } .menuSelected { cursor:pointer; color: #21536A; border: 1px solid; background-color: #DDEEFF; padding: 4px; font-family:Verdana; font-size: 11px; border-color: #FEFEFE #C3C8CB #C3C8CB; margin: 0px; text-decoration: none; padding-left:3px; } .sousmenu { font-family:Verdana; font-size: 10px; padding-top:3px; padding-bottom:4px; padding-left:20px; border-right: 1px solid #C3C8CB; border-left: 1px solid #C3C8CB; border-bottom: 1px solid #C3C8CB; } .sousmenu a { color:#21536A; text-decoration:none; font-family:Verdana; font-size: 10px; } .sousmenu a:hover { color:#0000FF; text-decoration:none; font-family:Verdana; font-size: 10px; font-weight: bold; } Commentaires
q
LesdclarartionsmenuOut, menuOver etmenuSelectedgrentlaprsentationdesitemsprincipaux.Ausurvolde ceuxciparlasouris,unpetiteffetvisuel(unarrireplandecouleurdiffrente)estmisenplacecommeillustr parlacapturedcransuivante.
- 4-
Ladclarationdestylesousmenuprendenchargelaffichagedessousmenus. Unpetiteffetausurvoldeslmentsdesous-menuestgalementprvuavecsousmenuaetsousmenu a:hover.
tudionslefichierJavaScriptexterne(menuAjax.js)paspas. var ie5 = (document.getElementById && document.all); Comme il faut tenir compte dincompatibilits notoires entre Internet Explorer et Firfox, la variable ie5 permet de distinguerlesnavigateursdelafamilleMicrosoft. Le script doit avant tout, initier une requte HTTP compatible entre Firefox et Internet Explorer afin de rapatrier les donnesdufichiermenuAjax.xmlversleclient. var xhr = null; function menuAjax(url){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX...");
} if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; setXML(xmldocument);} } xhr.open("GET",url,true); xhr.send(null); } } Unefoislarequterussie,lafonctionsetXML()prendenchargelesdonnesdudocumentXMLetprocdelaffichage dynamiquedumenudenavigation. Cettefonctionest(bienentendu)assezcomplexemettreenplace. function setXML(xmldocument){ LafonctionsetXML()rcuprelefichierXML(xmldocument)sousformedargument. var menu = xmldocument.getElementsByTagName(menu); Lavariablemenulistelensembledesbalises<menu>decedocumentXML. for (var i=0;i<menu.length;i++){ Unboucleforpasseenrevuelesdiffrentslmentsdelavariablemenu. var p = document.createElement(p); Lavariablepcreunnouveauparagraphe(createElementvoirchapitreLeDOM(DocumentObjectModel) Modifier la Hirarchisation). var attributs=menu[i].attributes; var txt = attributs.getNamedItem("texte").nodeValue; Le script accde aux attributs de la prsente balise <menu> et extrait son contenu au moyen de lattribut texte (voir chapitreLeDOMAccderauxattributsetchapitreLapprocheAJAXRcuprerettraiterduXML). p.appendChild(document.createTextNode("> " + txt)); Lescriptcreunn udtexte(createTextNodevoirchapitreLeDOM(DocumentObjetModel ModifierlaHirarchisation LamthodecreateTextNode),avecenparamtreletexteidentifilalignedecodeprcdente(variabletxt)etajout commedernierlmentlavariablep. if(ie5){p.style.cssText= width: 100%;;} Cette ligne corrige un bug dInternet Explorer et force llment prendre tout lespace disponible dans llment dtermin. ie5 ? p.setAttribute("className", "menuSelected") : p.setAttribute("class", "menuSelected"); LamthodesetAttribute() permetdajouteroudemodifierunlment,unattributetsavaleur.Lasyntaxeenest setAttribute("attribut","valeur"). Comme la gestion en JavaScript des styles est diffrente avec Internet Explorer et Firefox, la notation className est utilisepourInternetExploreretlanotationclassestutilisepourFirefox.LattributprendlavaleurmenuSelected. document.getElementById(affichageMenu).appendChild(p); Aprsavoiraccdlidentifiantdelabalise<div>consacrelaffichagedumenu(affichageMenu)dansledocument Xhtml,llmentpluiestajoutcommedernierlmentenfant(appendChild). p.setAttribute("id", "menu" + i);
- 6-
Unattributidayantpourvaleur"menu"+i(imeitration)estaffectllmentp. ie5 ? p.setAttribute("className", "menuOut") : p.setAttribute("class", "menuOut"); LattributclassNameouclassestmodifipourluidonnerlavaleurmenuOut. p.onmouseover = new Function("changerClasse(menu" + i + ",menuOver);"); p.onmouseout = new Function("changerClasse(menu" + i + ",menuOut);"); LadclarationdestylemenuOverestassocielvnementonmouseoverparlafonctionchangerClasse()(voirplusbas danslescript).LadclarationdestylemenuOutreprendlamainlvnementonmouseout. La partie consacre la construction de litem dans le menu de navigation est maintenant termine. Le script passe maintenantllaborationdessousmenus. var d = document.createElement(div); La variable d cre (createElement voir chapitre Le DOM (Document Object Model) Modifier la Hirarchisation) une nouvelledivision(balise<div>). d.setAttribute("id", "sub" + i); UnattributidaveccommevaleursubiluiestaffectparlamthodesetAttribute(), ie5 ? d.setAttribute("className", "sousmenu") : d.setAttribute("class", "sousmenu"); Ladclarationdestylesousmenuluiestaffecte(voirfichierdestyleexternemenuAjax.css). d.style.cssText = display:block;; Ladivisionainsicre,estafficheparlapropritCSSdestyledisplay. document.getElementById(affichageMenu).appendChild(d); Etladivisionestjointecommedernierenfantaumenudenavigationenconstruction. var sousMenu = menu[i].getElementsByTagName(sousmenu); LavariablesousMenulisteparitem,lesdiffrentesbalises<sousmenu>(voirlefichiermenuAjax.xml). for (var j=0;j<sousMenu.length;j++){ Unebouclefortraitealorsenrevue,unparun,lesdiffrentslmentsdelavariablesousMenu. var a = document.createElement(a); Unebalisedelien(createElement)estcre. var attributs= sousMenu[j].attributes; var Url = attributs.getNamedItem("url").nodeValue; Lattributurlestrecherchparmilesattributsdelabalise<sousmenu>etsavaleurestdduite. a.href = Url; Cettevaleurconstituelelien(href)attachllmenta. var txt = attributs.getNamedItem("texte").nodeValue; Lattributtexteestcherchparmilesattributsdelabalise<sousmenu>etsavaleurestreprise. var spn = document.createElement(span); a.appendChild(spn);
Unebalise<span>(variablespn)estcre :elleestjointecommedernierenfantllmenta. spn.appendChild(document.createTextNode("- " + txt)); Unn udtexteestcrprenantpourvaleurlavariabletxt :ilestjointllmentspn. d.appendChild(a); Letoutestajoutcommedernierenfantlavariabled(pourrappel,lesdivisionsdusousmenu). var b = document.createElement(br); d.appendChild(b); } } } Unebalise<br>(createElement)estcreetajoutellmentd,cequipermettraausousmenusuivantdesafficher surunenouvelleligne. function changerClasse(menu, newClass) { if (document.getElementById) { document.getElementById(menu).className = newClass; } } LefichierJavaScriptmenuAjax.jscomplet: var ie5 = (document.getElementById && document.all); function setXML(xmldocument){ var menu = xmldocument.getElementsByTagName(menu); for (var i=0;i<menu.length;i++){ var p = document.createElement(p); var attributs=menu[i].attributes; var txt = attributs.getNamedItem("texte").nodeValue; p.appendChild(document.createTextNode("> " + txt)); if(ie5){p.style.cssText= width: 100%;;} ie5?p.setAttribute("className", "menuSelected"):p.setAttribute("class", "menuSelected"); document.getElementById(affichageMenu).appendChild(p); p.setAttribute("id", "menu" + i); ie5?p.setAttribute("className", "menuOut"):p.setAttribute("class", "menuOut"); p.onmouseover = new Function("changerClasse(menu" + i + ",menuOver);"); p.onmouseout = new Function("changerClasse(menu" + i + ",menuOut);"); var d = document.createElement(div); d.setAttribute("id", "sub" + i); ie5?d.setAttribute("className", "sousmenu"):d.setAttribute("class", "sousmenu"); d.style.cssText = display:block;; document.getElementById(affichageMenu).appendChild(d); var sousMenu = menu[i].getElementsByTagName(sousmenu); for (var j=0;j<sousMenu.length;j++){ var a = document.createElement(a); var attributs= sousMenu[j].attributes; var Url = attributs.getNamedItem("url").nodeValue; a.href = Url; var txt = attributs.getNamedItem("texte").nodeValue; var spn = document.createElement(span); a.appendChild(spn); spn.appendChild(document.createTextNode("- " + txt)); d.appendChild(a); var b = document.createElement(br); d.appendChild(b); } } } var xhr = null; function menuAjax(url){ if(window.XMLHttpRequest) { xhr = new XMLHttpRequest();
} else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else{ alert("Votre navigateur nest pas compatible avec AJAX..."); } if(xhr) { xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var xmldocument = xhr.responseXML; setXML(xmldocument);} } xhr.open("GET",url,true); xhr.send(null); } } function changerClasse(menu, newClass) { if (document.getElementById) { document.getElementById(menu).className = newClass; } }
C escriptestcompatibleentreInternetExploreretFirefox.
- 9-
MotsrservsJavaScript
abstract boolean break byte case catch char class continue const debugger default delete do double else extends enum export false final finally float for function goto if implements import in instanceOf int interface label long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with
Outrelesmotsrservsnumrscidessus,ilestprfrabledviterlesmotssuivantsdanslesnomsdevariables.Ces nomssontutilisspourlesobjets,mthodesoupropritsparlelangageJavaScript.
- 1-
fileUpload alert focus all form anchor forms anchors frame area frames array frameRate assign function blur getClass button hidden checkbox history clearTimeout image clientInformationclose images closed isNaN confirm java crypto JavaArray date JavaClass defaultStatus JavaObject document JavaPackage element innerHeight elements innerWidth embed layer embeds layers escape length eval link event location
Math plugin mimeTypes prompt name prototype navigate radio navigator reset netscape screenX Number screenY Object scroll offscreen secure onblur select onerror self onfocus setTimeout onload status onunload String open submit opener sun option taint outerHeight text outerWidth textarea packages top pageXOffset toString pageYOffset unescape parent untaint parseFloat valueOf parseInt window password
- 2-

Ajax Développez Pour Le Web 2.0

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ajax Développez Pour Le Web 2.0

Uploaded by

Copyright:

Available Formats

AJAX

Dveloppez pour le web 2.0

ENI Editions - All rigths reserved

leXhtmletlesfeuillesdestyleCSS leJavaScript leDocumentObjectModel(DOM) lobjetXMLHttpRequest leXMLetleXSL.

ENI Editions - All rigths reserved

Toutecetteprocduresestdrouledefaontransparentepourlutilisateur,sansncessiterlerechargementfastidieux delapage. LemodleAJAXpermetainsidesortirduschmatraditionneldelaconceptiondepagesWebquinecessitaitquechaque nouvelleinformationrclameunenouvellepage.

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved - 1-

ENI Editions - All rigths reserved

LeserviceenluimmeestaccessiblepartirdelapagedaccueildeGoogleetncessitelouverture (gratuite) dun compte.

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

LinstallationdIISestassezsimple:DmarrerParamtresPanneaudeconfigurationAjout/Suppressionde programmes. Danslafentredajout/suppressiondeprogrammes,activezAjouterousupprimerdescomposantsdeWindows.

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

unsimplediteurdetexte, unnavigateurcompatibleJavaScript, etdesconnaissancesdulangageHtml.

ENI Editions - All rigths reserved

<script type="text/javascript"> //<![CDATA[ Code JavaScript //]]> </script>

E nHtml,onaprislhabitudedentourerlecodeJavaScriptdesbalisespourcacherlecode lintentiondesnavigateursquinereconnaissentpasleJavaScript.Remarquonsquelesbalises  sontdescommentairesHtmletlesbarresobliques//ducommentaireJavaScript.

ENI Editions - All rigths reserved

L aversionInternetExplorer6.0pourWindowsXPSP2risquedevousapporterquelquesdsagrmentslorsde laconceptiondevosscriptsenlocal.Soucieux(maiscestade,unpeutrop!)delascuritdespagesaffiches, InternetExploreraffichelemessagedinformationsuivant.

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

<script src="fichier_externe.js"></script> Cettebalisedappelseplacegnralemententrelesbalises<head> ... </head>. ReprenonsnotreexempledupointUnpremierScriptdecechapitre.

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

// Ceci est un commentaire

ENI Editions - All rigths reserved

var pi; var code_postal; var formulaire1;

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

Nom plus moins multipli divis modulo gal

Signification addition soustraction multiplication division restedeladivisionpar affectationdevaleur

Exemple x+100 x1 x*2 x/10 356%5 i=4

lorsqueloprateur+portesurdeuxoprateursdontlunaumoinsestunechanedecaractres,iljouele rledoprateurdeconcatnation(voirplusloin). loprateur=affectesimplementunevaleur.Onleconfondsouventavecloprateurdgalit==.

Pourrappel,le=estunoprateurdattributiondevaleurtandisquele==estunoprateurdecomparaison.Cette confusionestunesourcefrquentederreurdeprogrammation. Lersultatrenvoyparuneoprationdecomparaisonestunevaleurboolennetrue(vrai)oufalse(faux).

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

Encasdeprioritgaledoprateursconscutifs,loprationesteffectuedegauchedroite. Onpeuttoujoursmodifieruneprioritdoprateursparlemploideparenthsescarcellesciontleplushautniveau depriorit.

ENI Editions - All rigths reserved

ENI Editions - All rigths reserved

Dansceformulaire,ontrouvetroislments:unezonedetexte,desboutonsdoptionetunboutondenvoi.Cesont respectivementlobjettexte, lobjetoption(radio)etlobjetbouton.Soitlobjetfentrecontientlobjetdocumentqui contientlobjetformulairequicontientsontourlobjettexte,lobjetoptionetlobjetbouton.

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

</form> </body> </html>

ENI Editions - All rigths reserved