DHTML INFO0406 Arnaud RENARD arnaud.renard@univ-reims.fr Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 1/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 2/ 80 DHTMLetWEB2.0 Objectif HTML dynamique, de l anglais Dynamic HTML, souvent abrégé DHTML, est un nom générique donné à l ensemble des techniques utilisées par l auteur d une page web pour que celle-ci soit capable de se modifier elle-même en cours d affichage: Les éléments constituant la page peuvent ainsi être modifiés, déplacés, créés ou effacés; Une succession rapide de modification peut créer une animation; Les style et les contenu des éléments peuvent être modifiées dynamiquement; Les champs de formulaire peuvent être contrôlées; Des informations sont échangées entre le navigateur et le serveur. But répartir la charge et l utilisation des ressources déplacer du traitement sur le client déplacerdelamiseenformesurleclient développer l utilisation de pages WEB dynamiques permettre un chargement"local" dans la page permettre la mise à jour d une fraction d un document inter-agir entre des éléments(images, formulaires) et un serveur Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 3/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 4/ 80 Les technologies mises en oeuvre HTML pour la structuration CSS pour la présentation JavaScript pour traitement sur le client DOM comme méthode pour manipuler une structure XML AJAX pour les communications avec le serveur JSON pour JavaScript Object Notation JQUERY comme framework Javascript PHP pour la programmation sur le serveur Cours de référence en Creative Commons: http://www.gchagnon.fr/cours/dhtml Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 5/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 6/ 80
JavaScript: Historique JavaScript: Insertion dans un document C est un langage orienté objets à prototype, c est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objetsquinesontpasdesinstancesdeclasses,maisquisontchacun équipés de constructeurs permettant de générer leurs propriétés, et notamment une propriété de prototypage qui permet d en générer des objets héritiers personnalisés. Lelangageaétécrééen1995parBrendanEichpourlecomptede Netscape Communications Corporation. Le langage actuellement à la version 1.7 est une implémentation du standard ECMA-262. La version 1.8 est en développement et intégrera des éléments du langage Python.Laversion2.0dulangageestprévuepourintégrerla4e version du standard ECMA. en ligne <balise onclick=... > interne <script type="text/javascript">...</script> externe <script type="text/javascript" src="../scripts/monscript.js"> Navigateurs non JavaScript <script type="text/javascript"> (...) <noscript >Achetez un navigateur! </ noscript > </script> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 7/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 8/ 80 JavaScript: code convention JavaScript: les types espaces, fins de ligne et tabulations ignorées; ;enfindeligne; //ou/*...*/pourlescommentaires; nomsdevariablesetdefonctionsensiblesàlacasse; déclaration de variable optionelle(portée globale); déclaration avec var(donc de type undefined, portée bloc); affectationa=b=c=5;,+=,-=,*=,/==(expression)?4:5;; opérateurs:+(additionouconcaténation),-,*,/,%,++,--,!, &&, ; comparaison:<, <=, >,>=,==,!=,===(typeetvaleur); conversion explicite 1=="1" est true; évaluation d expression: eval("a=3+2;alert(a);"). chaines de caractères: "... \ \t \n \\ " nombres(entiers ou flottant); boolean; object(orienté prototype); undefined; null. Conversions: parseint() et parsefloat(): chaine vers nombre Number(): objet vers nombre string(): objet vers chaine Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 9/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 10/ 80 JavaScript: tableaux JavaScript: test des types // tableau vide var tableau1 = new Array(); // tableau de taille 4 var tableau2 = new Array(4); // initialisation du tableau tableau2=["beurre", "Confiture", "Pain", "Jus de fruit "]; // création et initialisation var tableau3 = new Array( Beurre, Confiture, Pain ) ; // taille du tableau alert(tableau3.length); // tableau multi var tableau4 = new Array(4); for(i=0;i<tableau4.length;i++){ tableau4[i] = newarray(2) ; var myfun = new Function("5+2") var shape=" round" var size=1 var today=new Date() typeof myfun == function typeof shape == string typeof size == number typeof today == object typeof dontexist == undefined typeof true == boolean typeof null == object typeof 62 == number typeof Hello world == string typeof parseint == function typeof Date == function typeof Function == function typeof Math == object typeof Object == function typeof String == function Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 11/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 12/ 80
JavaScript: l objet String L objet window chaine="bonjour!"; // une propriété alert(chaine.length); // des méthodes chaine.indexof( o ); // 0 (ou 1) chaine.lastindexof( o ); // 4 chaine.charat(5); // u chaine.touppercase; // majuscule chaine. tolowercase; chaine.substring(1,4); // onj chaine.substr(1,4); // onjo chaine.substr(2); // njour! tab=chaine.split( o ); // ["B", "nj", "ur!"] chaine.replace("jour", "soir"); // Bonsoir! Méthodes utilisables directement. // message alert(chaine) // confirmation if(confirm(chaine)) alert("bravo"); // valeur quantite=prompt("entrez la quantité souhaitée :"); alert(quantite); Expressions rationnelles: match et search Autres objets: Math, Date, window... Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 13/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 14/ 80 Object à prototype <script type="text/javascript"> function cd(p_chanteuse,p_titre){ this.chanteuse=p_chanteuse; this. titre=p_titre; this.description=function (){ return this. titre+" par "+this.chanteuse; this.lachanteuse = affichechanteuse; function affichechanteuse(){ alert(this.chanteuse); toto = new cd("madonna","frozen"); alert(toto. titre ); // Frozen alert(toto.description()); // Frozen par Madonna toto.lachanteuse(); // Madonna </script> Tests et boucles if (c==1) {... if (c==1) {... else {... switch (c) { case 1:... break ;... default :... while (c<3) { c++;... for (i=0;i<3<i++) {... var tab = new Array(3) ; for (element in tab) { element="test" ; Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 15/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 16/ 80 Timers Avec settimeout var i=6 function test(){ alert(i ); if(i>0) settimeout("test()", 1000) ; test(); Avec setinterval var i=6 function affanddec(){ alert(i ); if(i<0) cleartimeout(identifiant ); var identifiant=setinterval("affanddec()", 1000) ; Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 17/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 18/ 80
LeDOM,Àquoicelasert-il? LeDOM,ouDocumentObjectModelestunstandardduW3C désignant l ensemble des techniques permettant à un langage de script(comme JavaScript) d accéder au contenu d un document balisé (comme par exemple une page HTML). LeHTML«standard»eststatique.Lapageestchargéesurle navigateur de l internaute, et son affichage est défini une fois pour toutes.sil onrevientsurcettepageunautrejour,ellen aurapas changé d aspect. On peut considérer que le DOM permet d aller au-delà de cet aspect statique. Maisajouterdesanimationsàunepageestunactegratuitet inutile si cela n apporte rien à l internaute. Le JavaScript permet d augmenter le niveau d interactivité de l utilisateur, voire de concevoir des applications en ligne. Ces animations supplémentaires ne sont traitées que sur la machine de l internaute, ce qui allège d autant les charges reposant sur le serveur. Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 19/ 80 Techniques mises en jeu Le DOM est la conjonction d un ensemble de techniques, qui sont supportées par la pluspart des navigateurs. unevueorientéeobjetdelapagewebetdeseséléments. Chaqueélément <tagid = id_du_tag >blabla < /tag >est identifié par son identifiant(l attribut id) et accessible de manière univoque. la structure entière de la page peut être représentée sous la forme d une arborescence, permettant l accès direct(et la modification, l insertion, la suppression) à chacun de ses éléments. C est à proprement parler cette structure qui constitue le DOM du W3C. l appel systématique aux feuilles de style(les CSS) qui permettent une modification précise de l apparence de chacun des éléments. lerecourséventuelàdeslangagesdescriptpourlagestiondes événements. Nous nous limiterons au JavaScript. Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 20/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 21/ 80 Attributs de gestion d événements La gestion d événements(clavier, souris, formulaire, image, navigateur,...) est un processus complexe si on veut pouvoir tirer parti de toutes les possibilités offertes par le DOM. Fort heureusement, lorsqu il s agit de coder un effet simple, les attributs HTML définis dans la recommandation du W3C sont suffisants. On trouve: Lesattributsdegestiondesboutonsdelasouris:onclicket ondblclick permettent la prise en compte d un clic simple ou d un double clic, tandis que onmousedown et onmouseup détectent si unboutondelasourisaétéenfoncéourelaché. Les attributs de gestion des déplacements de la souris: onmouseover et onmouseout détectent si la souris passe sur la boîte de l élément courant, ou bien la quitte. Les attributs de gestion du clavier: onkeypress, onkeydown et onkeyup détectent respectivement si l utilisateur a appuyé puis relaché, simplement appuyé, ou relaché une touche du clavier. onloadpermetdedétecterlechargementdelapageetonerrorla présence d erreurs Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 22/ 80 Les événements Modification des propriétés de style Formulaire et éléments de formulaire onfocus onblur:pertedufocus onchange onclick onreset onselect onsubmit Un événement permet de déclencher une action, par exemple de modifier localement les propriétés de style d un élément. On fait alors appel à l objet courant this en JavaScript. En voici quelques exemples: <p onmouseover="this.style.color= blue " onmouseout="this.style.color= black "> Ceci est un texte dont la couleur va changer au passage de la souris. </p> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 23/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 24/ 80
Modification des propriétés de style Dans l exemple suivant l utilisation de majuscules permet d éviter l utilisation du tiret présent dans la propriété CSS. <p style="position:absolute; left:10px; top:230px; width:400px" onmouseover="this.style.left= 100px ; this.style.top= 300px ; this.style.width= 600px ; this.style.textalign= center " oumouseout="this.style.left= 10px ; this.style.top= 230px ; this.style.width= 400px ; this.style.textalign= left ">Exemple de texte... à géométrie variable. </p> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 25/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 26/ 80 Pour aller plus loin getelementbyid Modification d attributs quelconques: this.src= ; Modification de la class: this.classname= ; Modification du contenu d un élément: this.innerhtml= ; Accèsdirectauxélémentsparleurid: elem = document.getelementbyid("id_du_tag") Accès direct aux éléments par leur nom(renvoie une collection): liens=elem.getelementsbytagname( a ); Accèsdirectauxélémentsparleurname: liens=elem.getelementsbyname( a ); Accès à l attribut getattribute("nom_d_attribut") variable = document.getattribute("nom"); <img id= nomimage src= waiting.gif /> <a href= \# onclick= document.getelementbyid("nomimage").src="image1.jpg"; >image1 </ a> <a href= \# onclick= document.getelementbyid("nomimage").src="image2.jpg"; >image2 </ a> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 27/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 28/ 80 getelementsbytagname Accès par les collections <ol id="toto"> <li lang="fr">bonjour</li > <li lang="be">bonjourrr</li > <li lang="us">hello</li > <li lang="de">allo</li > </ol> <script type="text/javascript"> maol = document.getelementbyid("toto") var leselements= maol.getelementsbytagname(" li "); for(var i=0; i< leselements.length; i++){ alert(leselements.item(i ).getattribute("lang")); </script> Résultat:fr,be,us,de Quatre collections(=tableaux) sont définies. window.frames document.forms document.images document.links Particulièrement utile pour les formulaires: window.document.forms["form1"].checkbox window.document.forms[0].nom_du_champ.value= valeur incohérente ; accès au second élément du premier formulaire document.forms[0].elements[1].value="toto"; Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 29/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 30/ 80
Accès aux valeurs des éléments Accèsparlenom Valeur des éléments de formulaires value chemin.vers.un.element.value = xxx Conteneur HTML innertext chemin.vers.un.element.innertext = xxx innerhtml chemin.vers.un.element.innerhtml = xxx Nommage successif des éléments utilisation des noms successifs depuis la racine <form method="post" name=" ajax" action ="" > <input type=" button" value="submit" onclick ="submitform()" > <input type=" text" name="dyn" value="" > </form> pouraccéderetmodifierlecontenuduchampdetexte: document.ajax.dyn.value="toto"; Image src chemin.vers.un.element.src = xxx Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 31/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 32/ 80 Manipulation de l arborescence elt est un élément identifié, par exemple, par une méthode getelementbyid. elt.childnodes liste des enfants(tableau). elt.firstchild premier fils elt.lastchild dernier fils elt.previoussibling frêre précédent elt.nextsibling frêre suivant elt.parentnode le pêre Attributs:nodeName(nomdunoeud,img,a,...)etnodeType(typede noeud) Méthodes: haschildnodes() et hasattributes() Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 33/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 34/ 80 Modification dans le DOM Ajout d un élément Cequiest/n estpasmodifiable appelàdespopup boîte alert nouvelle fenêtre: window.open(...) possibilité de modifier des éléments conteneurs divdontonadéfinitlaclasseoul id spandontonadéfinitlaclasseoul id impossibilité de rajouter des éléments au niveau du document impossibilité de modifier la structure du document possibilité d accéder et de modifier certains attributs champs texte des formulaires contenu des listes déroulantes div1=document.getelementbyid("parentdiv") ; p2=document.getelementbyid("enfantp") ; p1=document.createelement("p") ; div1.insertbefore(p1,p2) ; Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 35/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 36/ 80
Suppression d un élément Suppression d un attribut elt=document.getelementbyid("div1") ; elt_inclus=document.getelementbyid("para1") ; elt_rejete=elt.removechild(elt_inclus) ; parag2=parag.clonenode(true) elt.replacechild(newchild, oldchild) elt=document.getelementbyid("top") ; attr_align=elt.getattributenode("align") ; elt.removeattributenode(attr_align) ; Existe aussi: elt.removeattribute("align") Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 37/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 38/ 80 Manipulation des feuilles de style Ecran, Fenetre et page Affichage/ Suppression d une règle. regle=document.stylesheets[0].cssrules[0]; alert("la première règle est :"+regle.csstext); alert("et maintenant on la supprime!"); document.stylesheets[0].deleterule(regle); Ajout d une règle. indexfin=document.stylesheets[0].cssrules.length; new_regle="p {font family:verdana,arial "; alert("on ajoute la nouvelle règle :"+nouvelle_regle); document.stylesheets[0].insertrule(new_regle, indexfin); resizeto(width, height): redimensionner moveto(x, y): déplacer window.screen.width: largeur de l écran window.screen.height: hauteur de l écran window.screen.availwidth: largeur de la fenetre window.screen.availheight: hauteur de la fenetre TailledelapagesousIE: document.body.clientheight document.body.clientwidth TailledelapagesousFirefox: window.innerheight window.innerwidth Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 39/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 40/ 80 Navigateur Navigation On peut accéder à nombre d informations sur le navigateur à l aide de la collection navigator de l objet window. window.navigator.appname retourne le nom du navigateur. window.navigator.appversion retourne le numéro de version du navigateur ainsi que diverses informations sur le système. window.navigator.language retourne la langue du navigateur. Cette propriété n est pas supportée par Internet Explorer. window.navigator.platform retourne la plateforme sur laquelle fonctionne le navigateur(dans le cas de Windows, la chaîne retournée est"win32"). window.navigator.product retourne le nom du produit(dans le cas de Mozilla/FireFox, il s agit de Gecko). document.lastmodified: date et heure de modification window.history.back(): précédent window.history.forward(): suivant window.history.go(index): déplacement dans l historique window.history.length: taille de l historique document.referrer: URL de la page précédente window.location: URL du document Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 41/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 42/ 80
Pop-up: window.open() popup = window.open( url, titre, options ); popup.close(); Parmi les options: top=100, left=100, width=200, height=100 scrollbars=yes status=no menubar=no Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 43/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 44/ 80 Généralités AJAX Asynchronous Javascript And XML ensemble de techniques et de langages existants dépend de XMLHttpRequest: objet client manipulable avec Javascript apparuaveci.e.4 à l origine un objet Active X microsoft utilisable sur tous les navigateurs Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 45/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 46/ 80 Principe La présentation gestiondelamiseenforme exploitation de la structure des données Les événements interactions avec les utilisateurs génération des appels et des requêtes Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 47/ 80 Synchrone et asynchrone Exécution synchrone requête bloquante aucuntraitementsurleclienttantquelaréponsen estpas obtenue risque d attente indéfinie miseenplaced undélaidegarde Exécution asynchrone requête non bloquante exécution poursuivie sur le client(navigateur) le client(navigateur) poursuit son code(javascript, applet, flash...) miseenplaceduncallback auretourdelarequête nécessité de connaître l état de la requête Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 48/ 80
L objet de base:xmlhttprequest XMLHttpRequest: les attributs Utilisation permet l émission de requêtes vers le serveur gestion asynchrone des requêtes polling sur le résultat de la requête basé sur l utilisation d attributs ou de méthodes dépendant des navigateurs: sur Firefox, Mozilla...: XMLHttpRequest surie:xmlhttp Etats: readystate 0:noninitialisé 1: connexion établie 2:requêtereçue 3:réponseencours 4:terminé status 200:OK 404:erreurpagenontrouvée Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 49/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 50/ 80 XMLHttpRequest: les attributs XMLHttpRequest: les méthodes open prototype Les éléments retournés responsetext responsexml changement d état onreadystatechange open(mode, url,boolean) mode:typedelarequête(post,get) url: localisation du traitement true: asynchrone- false: synchrone send prototype send(chaine) null pour une commande GET Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 51/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 52/ 80 Différentes étapes Mise en place d une requête 1 création de l objet XMHttpRequest 2 miseenplacedel attente/delafonctionderetour 3 exécution de la requête Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 53/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 54/ 80
Création de l objet Création par détection du navigateur Solution de création 1 détection du naviagateur création d un XMLHttpRequestion sur Firefox... création d un XMLHTTP sur IE 2 test des erreurs de création essai de création d un XMLHttpRequestion sierreuressaidecréationd unxmlhttpsurie if (window.xmlhttprequest){ //Firefox, Safari,... xhr = new XMLHttpRequest(); else{ if (window.activexobject){ // Internet Explorer xhr = new ActiveXObject("Microsoft.XMLHTTP"); Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 55/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 56/ 80 Création par gestion des erreur Gestion de la requête try { // Essayer Internet Explorer xhr = new ActiveXObject("Microsoft.XMLHTTP"); catch(e){ // en cas d échec xhr = new XMLHttpRequest(): // Autres navigateurs Mise en place d une fonction de retour xhr.onreadystatechange = function(){ // instructions de traitement de la réponse ; Testdel étatdelarequête if (xhr.readystate == 4) { // Reçu, OK else { // Attendre... Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 57/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 58/ 80 Emission de la requête Exemple complet xhr.open("get","http ://www.monurl.com/laressource", true); xhr.send(null); Type de la ressource fichier HTML fichier texte élément issu d une exécution sur le serveur(php, ASP, JSP, CGI...) fichier XML <html> <head><script > function submitform(){ var xhr; try { xhr = new ActiveXObject( Msxml2.XMLHTTP ); catch (e){ try { xhr = new ActiveXObject( Microsoft.XMLHTTP ); catch (e2){ try { xhr = new XMLHttpRequest(); catch (e3) { xhr = false; xhr. onreadystatechange = function(){ if(xhr.readystate == 4){ if(xhr.status == 200) document.ajax.dyn.value="received:" + xhr.responsexml; else document.ajax.dyn.value="error code " + xhr.status; ; xhr.open("get", "data.xml", true); xhr.send(null); </ script ></head> <body> <form method="post" name=" ajax" action ="" > <input type=" button" value="submit" onclick ="submitform()" > <input type=" text" name="dyn" value="" > </form> </body> </html> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 59/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 60/ 80
Modification d un champ de formulaire Principe définition d un formulaire(aj) composé: unchampdetexte(t) un bouton(événement onclick) définition de la fonction de traitement création de l objet récupération d un fichier sur le serveur modification du contenu du champ texte Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 61/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 62/ 80 Modification d un champ de formulaire Modification d un texte <html> <head> <script > function execajax() { var xhr; try { xhr = new ActiveXObject( Msxml2.XMLHTTP ); catch (e) { try { xhr = new ActiveXObject( Microsoft.XMLHTTP ); catch (e2) { try { xhr = new XMLHttpRequest(); catch (e3) { xhr = false; xhr. onreadystatechange = function() { if(xhr.readystate == 4) { if(xhr.status == 200){ document.aj.t.value = xhr.responsetext; else{alert("error code " + xhr.status); ; xhr.open("get", "http://192.168.30.130/~arnaud/info0406/cours3/ex2.txt", true); xhr.send(null); </ script > </head> <body> <form name="aj"> <input type="text" name="t"> <input type="button" onclick="javascript:execajax()" value="cliquez ici"> </form> </body> </html> Principe définition d un div: définition de l attribut id définition de la fonction de traitement création de l objet récupération de l accès au div récupération d un fichier sur le serveur modification du contenu du div Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 63/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 64/ 80 Modification d un champ de formulaire MiseenplacedeHTML <html> <head> <script > function execajax(){ var xhr; var zone = document.getelementbyid("mon_div"); try { xhr = new ActiveXObject( Msxml2.XMLHTTP ); catch (e) { try { xhr = new ActiveXObject( Microsoft.XMLHTTP ); catch (e2) { try { xhr = new XMLHttpRequest(); catch (e3) { xhr = false; xhr. onreadystatechange = function(){ if(xhr.readystate == 4){ if(xhr.status == 200){ zone.innerhtml = xhr.responsetext; else{ alert("error code " + xhr.status); ; xhr.open("get", "http://192.168.30.130/~arnaud/info0406/cours3/ex2.txt", true); xhr.send(null); </ script ></head> <body> <p> <a href ="#" onclick="execajax()" > cliquez i c i </a> </p> <div id="mon_div"> la valeur d origine </div> </body> </html> Principe définition d un div: définition de l attribut id définition de la fonction de traitement création de l objet récupération de l accès au div récupération d un fichier HTML sur le serveur modification du contenu du div Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 65/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 66/ 80
Le fichier HTML tableau.html <table border="1"> <tr> <th> nom </ th> <th> prénom </th> </tr> <tr> <td> Renard </td> <td> Arnaud </td> </tr> <tr> <td> Steffenel </ td> <td> Luiz Angelo </ td> </tr> </table> MiseenplacedeHTML <html> <head> <script > function execajax(){ var xhr; var zone = document.getelementbyid("mon_div"); try { xhr = new ActiveXObject( Msxml2.XMLHTTP ); catch (e){ try { xhr = new ActiveXObject( Microsoft.XMLHTTP ); catch (e2) { try { xhr = new XMLHttpRequest(); catch (e3) { xhr = false; xhr. onreadystatechange = function(){ if(xhr.readystate == 4){ if(xhr.status == 200){ zone.innerhtml = xhr.responsetext; else{ alert("error code " + xhr.status); ; xhr.open("get", "http://192.168.30.130/~arnaud/info0406/cours3/tableau.html", true); xhr.send(null); </script> </head> <body> <p> <a href ="#" onclick="execajax()" > cliquez i c i </a> </p> <div id="mon_div"> la valeur d origine </div> </body> </html> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 67/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 68/ 80 Paramètres des requêtes et traitement serveur Le script PHP Principe utilisation d un URL GET utilisation d un formulaire construction de la requête partir des informations collectées dans le formulaire requête vers un script PHP récupération des paramètres de la requête traitement sur le serveur affichagedansledivsurleclient <?php $texte = $_GET["texte"]; echo "<p> vous avez écrit : ". $texte."</p>";?> Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 69/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 70/ 80 Le code javascript Le fichier HTML <html> <head> <script > function execajax() { var xhr; var zone = document.getelementbyid("amodifier"); var requete = "http://192.168.30.130/trait.php?texte=" + document.aj.t.value ; alert(requete); try { xhr = new ActiveXObject( Msxml2.XMLHTTP ); catch (e) { try { xhr = new ActiveXObject( Microsoft.XMLHTTP ); catch (e2) { try { xhr = new XMLHttpRequest(); catch (e3) { xhr = false; xhr. onreadystatechange = function() { if(xhr.readystate == 4) { if(xhr.status == 200){ zone.innerhtml = xhr.responsetext; else{ alert("error code " + xhr.status); ; </script> </head> <body> <form name="aj"> <p> entrez votre texte : <input type="text" name="t"> </p> <input type="button" onclick="javascript:execajax()" value="cliquez ici"> </form> <div id="amodifier"> le texte d origine </div> </body> </html> xhr.open("get", requete, true); xhr.send(null); Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 71/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 72/ 80
Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 73/ 80 JavaScript Object Notation Format de données textuel, générique, dérivé de la notation des objets du langage ECMAScript, afin de représenter de l information structurée.ilestdécritparlarfc4627del IETF. Un document JSON ne comprend que deux éléments structurels: desensemblesdepairesnom/valeur (pas de différence entre attriuts et éléments de XML); des listes ordonnées de valeurs. Ces mêmes éléments représentent 3 types de données: Numérique:nombresentiersouàvirgule:18,3.1415; Booléen:trueoufalse; Chaîne de caractères: suite de caractères Unicode, encadrés par des guillemets doubles; null; tableau et tableau associatif( chaîne: donnée) Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 74/ 80 Exemple JSON JSONenPHP { "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()", {"value": "Open", "onclick": "OpenDoc()", {"value": "Close", "onclick": "CloseDoc()" ] Entension à installer. json_decode: Decodes a JSON string json_encode: Returns the JSON representation of a value $val = array("abc" => 12, "foo" => "bar", "bool0" => false, "bool1" => true, "arr" => array(1, 2, 3, null, 5), "float" => 1.2345 ); $output = json_encode( $val); echo $output."\n"; Résultat: { "abc": 12, "foo": "bar", "bool0": false, "bool1": true, "arr": [ 1, 2, 3, null, 5 ], "float": 1.234500 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 75/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 76/ 80 JSON en JavaScript A partir d une chaine de caractère var strpersonne = "{nom: Steffenel, prenom: Luiz Angelo "; var personne = eval( ( + strpersonne + ) ); Ou directement var personne = { nom: Steffenel, prenom: Luiz Angelo ; Manipulation comme un tableau. Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 77/ 80 Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 78/ 80
jquery Query est une bibliothèque Javascript libre qui porte sur l interaction entrejavascript(comprenantajax)ethtml,etapourbutde simplifier des commandes communes de Javascript et d assurer leur compatibilité avec les principaux navigateurs. jquery se présente commeununiquefichierde19ko. Le framework contient notamment les fonctionnalités suivantes: ParcoursetmodificationduDOM(ycomprislesupportdesCSS1 à3etunsupportbasiquedexpath); Événements; Effets et animations; Manipulations des feuilles de style en cascade(ajout/suppression desclasses,d attributs,...); AJAX; Plugins; Utilitaires(version du navigateur,...). Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 79/ 80 jquery àsuivre Arnaud RENARD (URCA) DHTML arnaud.renard@univ-reims.fr 80/ 80