L'API DOM : Document Object Model

Dimension: px
Commencer à balayer dès la page:

Download "L'API DOM : Document Object Model"

Transcription

1 Ingénierie Documentaire L'API DOM : Document Object Model STÉPHANE CROZAT 16 octobre 2014

2 Table des matières I - Introduction au DOM 5 A. Principes du DOM...5 B. L'interface DOM...6 II - Implémentation JavaScript du DOM 9 A. Introduction à JavaScript...9 B. Fonctions et objets DOM en JavaScript...10 C. Spécificités HTML...11 III - Fonctions et objets JavaScript liés à XML 13 A. Utiliser XPath...13 B. Exécuter une XSLT...14 C. xmlhttprequest : Communication avec le serveur...14 D. XMLSerializer : Sérialiser un DOM...16 IV - Exercices 17 A. Travaux pratiques DOM et JavaScript "Hello World!" en JavaScript Manipulation du DOM en JavaScript Un éditeur XML en JavaScript...19 Solution des exercices 23 Bibliographie 27 Contenus annexes 29 3

3 Introduction au I - DOM I Principes du DOM 5 L'interface DOM 6 A. Principes du DOM Définition Le DOM ( Document Object Model) est un standard W3C qui décrit une API orientée objet permettant de représenter un document XML ou HTML en mémoire afin de la manipuler avec un langage de programmation. Le standard DOM est indépendant d'un langage de programmation en particulier, et implémenté dans de nombreux langages (JavaScript, Java, PHP, C,...). «The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.» 1 Fonctions du DOM L'API DOM permet de : Exemple Parcourir un arbre XML ou HTML Rechercher des nœuds particuliers, en consulter le contenu Créer, ajouter, supprimer, déplacer des nœuds dans l'arbre L'API DOM implémentée en JavaScript permet de manipuler un document HTML ou XHTML, afin d'en modifier dynamiquement (en fonction des actions utilisateurs), la structure et le contenu :... Faire apparaître ou disparaître des éléments div en fonction d'une action utilisateur Créer ou initialiser des contrôles de formulaire function fdisplay(pdivid) { 2 var vdiv = document.getelementbyid(pdivid); 5

4 Introduction au DOM Introduction au DOM 3 vdiv.style.display="block"; 4 } Rappel L'arbre du document XML - p.29 B. L'interface DOM Fondamental Document Object Model (DOM) Technical Reports 2 Document Object Model Core 3 Objets principaux Node : Élément central du DOM, il représente tout nœud de l'arbre DOM, les autres interfaces en héritent. NodeList : Ensemble ordonné de Nodes. Document : Racine d'un fichier XML bien formé (ou d'un fichier HTML valide), son fils est donc l'élément racine du document XML. Element : Représentation d'un élément au sens XML Attr : Représentation d'un attribut au sens XML Text : Contenu textuel d'un nœud texte ou d'un attribut au sens XML Attributs principaux de Node string nodename integer nodetype Node parentnode NodeList childnodes Node firstchild Attributs principaux de NodeList Node item(integer index) integer length Fonctions principales de Node Node insertbefore(node newchild, Node refchild) Node replacechild(node newchild, Node oldchild)

5 Introduction au DOM Node removechild(node oldchild) Node appendchild(node newchild) boolean haschildnodes() Node clonenode(boolean deep) Fonctions principales de Document Element getelementbyid(string elementid) NodeList getelementsbytagname(string tagname) Element createelement(string tagname) Text createtextnode(string data) Attr createattribute(string name) Document 7 Fonctions principales de Element NodeList getelementsbytagname(string name) Attr getattributenode(string name) Attr setattributenode(attr newattr) Attr removeattributenode(attr oldattr) boolean hasattribute(string name) Text (attributs et fonctions) Attributs : string data integer length Fonctions : void appenddata(string arg) void insertdata(integer offset, string arg) void deletedata(integer offset, integer count) void replacedata(integer offset, integer count, string arg) Attr (attributs) string name string value

6 Introduction au DOM Introduction au DOM Remarque : NameSpace Il existe toutes les fonctions nécessaires pour gérer les namespaces, comme par exemple : NodeList getelementsbytagnamens(string namespaceuri, string localname) Element createelementns(string namespaceuri, string qualifiedname) Attr createattributens(string namespaceuri, string qualifiedname) Complément (Brillant07 [Brillant07], pp ) 8 8

7 Implémentation II - JavaScript du DOM II Introduction à JavaScript 11 Fonctions et objets DOM en JavaScript 13 Spécificités HTML 14 A. Introduction à JavaScript 9

8 Implémentation JavaScript du DOM Implémentation JavaScript du DOM Définition : JavaScript JavaScript est un langage de programmation instance du standard ECMAScript, principalement utilisé comme langage client dans les navigateurs Web, afin de rendre dynamique l'affichage et la manipulation de pages HTML. Rappel : Intégration JavaScript HTML 1 //file.js 2 function func(parg1, parg2) { } 1 <html> 2 <head> <script src="file.js" type="text/javascript"></script> </head> 7 <body> <div... onclick="func(varg1, varg2)"> </body> 12 </html> Rappel : Introduction au JavaScript 11 Rappel : Syntaxe JavaScript 12 Complément : Fonctions JavaScript 13 Complément : Objets JavaScript 14 Rappel : Console JavaScript Pour afficher la console JavaScript sous Firefox : CTRL+MAJ+J B. Fonctions et objets DOM en JavaScript Exemple 1 vdiv = document.getelementbyid("id1");

9 Implémentation JavaScript du DOM Exemple 1 vdivs = document.getelementsbytagname("p"); 2 for (var i=0; i<vdivs.length; i++) { 3 vdivs.item(i)...; 4 } Exemple 1 alert(vdiv.firstchild.data) ; Exemple 1 vdiv.removechild(vdiv.firstchild); Exemple 1 vdiv.appendchild(vdiv2); Syntaxe Document 15 Node 16 getelementbyid 17 getelementbytagname g_name 18 firstchild 19 data 20 C. Spécificités HTML Attributs et méthodes spécifiques aux éléments HTML input, select : value, name,... a : href

10 Implémentation JavaScript du DOM Implémentation JavaScript du DOM queryselectorall : Manipulation HTML via les classes CSS queryselectorall est une méthode de l'objet document permettant de renvoyer une liste de nœuds correspondant à l'union des sélecteurs CSS passés en paramètre. NodeList document.queryselectorall(<list_of_selectors>) https://developer.mozilla.org/en/dom/document.queryselectorall 22 Exemple : queryselectorall <body> 3 <div class="class1">...</div> 4 <div class="class2">...</div> 5 <div class="class1 class2">...</div> 6 <div class="class2 class3">...</div> 7... document.queryselectorall("div.class1, div.class2") renvoie tous les div de l'extrait HTML ci-avant. Conseil : Firebug Installer l'extension Firebug sous Firefox pour pouvoir visualiser dynamiquement le DOM. https://addons.mozilla.org/fr/firefox/addon/firebug/ https://developer.mozilla.org/en/dom/document.queryselectorall 23 - https://addons.mozilla.org/fr/firefox/addon/firebug/ 12 12

11 Fonctions et III - objets JavaScript liés à XML III Utiliser XPath 15 Exécuter une XSLT 15 xmlhttprequest : Communication avec le serveur 16 XMLSerializer : Sérialiser un DOM 17 A. Utiliser XPath L'API XPath est moins pratique que l'api DOM en JavaScript, et en conséquence moins utilisée. Il est néanmoins possible d'exécuter un XPath en fonction d'un nœud courant, les deux étant passés en paramètres à la méthode evaluate() de document. 13

12 Fonctions et objets JavaScript liés à XML Fonctions et objets JavaScript liés à XML Exemple 1 var nodessnapshot = document.evaluate(<pxpath>, <pcontextnode>, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); 2 for ( var i=0 ; i < nodessnapshot.snapshotlength; i++ ) 3 { 4...nodesSnapshot.snapshotItem(i)... 5 } Complément https://developer.mozilla.org/fr/introduction_%c3%a0_l %27utilisation_de_XPath_avec_JavaScript 24 B. Exécuter une XSLT Syntaxe Objet : XSLTProcessor Méthodes : importstylesheet(vxsl) DocumentFragment transformtofragment(vxml,document) Document transformtodocument(vxml) Syntaxe 1 // Chargement d'une XSLT depuis le serveur 2 var vxhr = new XMLHttpRequest(); 3 vxhr.open("get", "fichier.xslt", false); 4 vxhr.send(null); 5 var vxsl = vxhr.responsexml; 6 7 // Initialisation d'un processeur XSLT 8 var vproc = new XSLTProcessor(); 9 vproc.importstylesheet(vxsl); // Sélection d'un nœud XML source de la transformation dans le Document 12 var vxml = document.getelementbyid("source"); // Exécution de la XSLT dans un DocumentFragment vresult 15 var vresult = vproc.transformtofragment(vxml,document); // Ajout de vresult dans le Document 18 document.getelementbyid("source").appendchild(vresult); C. xmlhttprequest : Communication avec le serveur L'objet XMLHttpRequest permet d'envoyer des commandes POST et GET à un serveur HTTP, en particulier (mais pas uniquement) pour transmettre des documents XML entre le client et le serveur https://developer.mozilla.org/fr/introduction_%c3%a0_l%27utilisation_de_xpath_avec_javascript 14 14

13 Fonctions et objets JavaScript liés à XML Exemple : Exécuter un fichier PHP avec des paramètres 1 var vxhr = new XMLHttpRequest(); 2 vxhr.open("post", "fichier.php", false); 3 vxhr.setrequestheader("content-type", "application/x-www-formurlencoded"); 4 var vargs="key1=" + encodeuricomponent(vvalue1) + "&key2=" + encodeuricomponent(vvalue2); 5 vxhr.send(vargs); 1 <?php 2 $vparam1=$_post['key1']; 3 $pparam2=$_post['key2']; ?> Exemple : Charger un document XML sur le client 1 var vxhr = new XMLHttpRequest(); 2 vxhr.open("get", "fichier.xml", false); 3 vxhr.send(null); 4 vxml vxhr.responsexml; Exemple : Enregistrer un document XML sur le serveur (via PHP) 1 var vxml = document.getelement... //un node DOM 2 var vtxt = (new XMLSerializer()).serializeToString(vXml); 3 var vargs = "xml=" + encodeuricomponent(vtxt); 4 var vxhr = new XMLHttpRequest(); 5 vxhr.open("post", "savexml.php", false); 6 vxhr.setrequestheader("content-type", "application/x-www-formurlencoded"); 7 vxhr.send(vargs); 1 <?php 2 $xml= $_POST["xml"]; 3 $dom = new DomDocument(); 4 $dom->loadxml($xml); 5 $dom->save('src.xml'); 6?> Syntaxe 1 eval(vxhr.responsetext); Permet au client d exécuter une instruction JavaScript qui aura été générée par le serveur PHP (par exemple un compte-rendu d'exécution). Complément

14 Fonctions et objets JavaScript liés à XML Fonctions et objets JavaScript liés à XML D. XMLSerializer : Sérialiser un DOM 1 var xmlstring = new XMLSerializer().serializeToString(Node); 16 16

15 IV - Exercices IV Travaux pratiques DOM et JavaScript 19 A. Travaux pratiques DOM et JavaScript 1. "Hello World!" en JavaScript Q u e s t i o n 1 [Solution n 1 p 23] Créer un fichier HTML contenant un bouton. Ajouter la fonction JavaScript qui permet d'afficher "Hello World!" lorsque l'on clique sur le bouton. Q u e s t i o n 2 [Solution n 2 p 23] Ajouter un champ de saisie texte au fichier HTML. Ajouter la fonction JavaScript qui permet d'afficher le contenu de ce champ de saisie lorsque l'on clique sur le bouton. 2. Manipulation du DOM en JavaScript Soit le fichier HTML : 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>mon titre</title> 5 <script type="text/javascript" src="lib.js"></script> 6 </head> 7 <body> 8 <h1 onclick="showhxcontent(1)">partie 1</h1> 9 <div id="title1" style="display:none"> 10 <p>mon premier paragraphe</p> 11 <p>mon second paragraphe</p> 12 </div> 13 <h1 onclick="showhxcontent(2)">partie 2</h1> 14 <div id="title2" style="display:none"> 15 <p>mon premier paragraphe</p> 16 <p>mon second paragraphe</p> 17 </div> 18 <p> 19 <input type="submit" value="masquer" onclick="hidealldivs()"/> 20 </p> 21 <p> 22 Titre n : <input type="text" id="title"/> 17

16 Exercices Exercices 23 <input type="submit" value="afficher" onclick="alerttitle()"/> 24 </p> 25 </body> 26 </html> Q u e s t i o n 1 [Solution n 3 p 24] Écrire la fonction JavaScript showhxcontent permettant d'afficher le contenu du div correspondant au titre sur lequel on clique. Indice : 1 function showhxcontent (pnumber) { 2 vdiv = document.getelementbyid(...); 3 vdiv.style.display = "..."; 4 } Q u e s t i o n 2 [Solution n 4 p 24] Écrire la fonction JavaScript hidealldivs permettant de masquer le contenu de tous les div du document. Indice : 1 function hidealldivs () { 2 vdivs = document.getelementsbytagname(...); 3 for (var i=0; i<vdivs...; i++) { 4 vdivs.item(i)...; 5 } 6 } Q u e s t i o n 3 [Solution n 5 p 24] Écrire la fonction alerttitle permettant d'afficher (avec la fonction JavaScript alert) le contenu du énième titre, défini par le champ de saisie title. Indice : 1 function alerttitle () { 2 vhx = document.getelementsbytagname(...); 3 vindice = document.getelementbyid(...).value; 4 vindice = vindice - 1; 5 alert(...); 6 } Q u e s t i o n 4 [Solution n 6 p 24] Écrire la fonction deletetitle permettant d'effacer le contenu du titre défini par le champ title. (suppression du nœud fils de type texte) Indice : 1 function deletetitle () { vhx.item(vindice).removechild(...); 4 } 18 18

17 Exercices Q u e s t i o n 5 [Solution n 7 p 24] Écrire la fonction definetitle permettant d'affecter le contenu du titre défini par le champ title avec la valeur "Nouveau titre". On testera que le titre a ou non déjà une valeur (nœud texte) avant l'ajout, afin de la supprimer si besoin. Indice : 1 function definetitle () { vtext = document.createtextnode(...); 4 if (vhx.item(vindice)...) { } 7 vhx.item(vindice).appendchild(...); 8 } 3. Un éditeur XML en JavaScript L'objectif de ce TP est de réaliser un éditeur XML avec HTML et JavaScript. Soit le fichier XHTML "editor.html" ci-après. 1 <html> 2 <!--editor.html--> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>éditeur de document</title> 6 <script type="text/javascript" src="lib.js"></script> 7 </head> 8 <body id="body"> 9 <h1>édition</h1> 10 <form> 11 <p>ajouter un paragraphe</p> 12 <input type="text" size="50" id="text"/> 13 <input type="button" onclick="addpara(document.getelementbyid('text').value);" value="ajouter"/> 14 <br/> 15 <input type="button" onclick="alertxml(document);" value="afficher DOM"/> 16 <br/> 17 <input type="button" onclick="savexml();" value="sérialiser XML"/> 18 </form> 19 <hr> 20 <div id="visu"> 21 <h1>visualisation</h1> 22 <script type="text/javascript"> 23 //ouvre le fichier XML sur le serveur 24 var xml = loadxml("src.xml"); 25 //ouvre le fichier XSLT sur le serveur 26 var xsl = loadxml("xml2html.xsl"); 27 //exécute le XSLT sur le XML 28 res=execxslt(xml,xsl); 29 //afficher le résultat 30 document.getelementbyid("visu").appendchild(res); 31 </script> 32 </div> 33 </body> 34 </html> 19

18 Exercices Exercices Q u e s t i o n 1 Expliquer le fonctionnement de "editor.html". [Solution n 8 p 24] Q u e s t i o n 2 Créer un fichier XML avec un élément racine document contenant des éléments paragraphe. Le placer sur un serveur Web et le rendre accessible en lecture/écriture. Indice : 1 <?xml version="1.0" encoding="utf-8"?> 2 <document> 3 <paragraphe>lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit ametlibero ac mauris egestas venenatis nec vitae sapien. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere cubilia Curae; Ut commodo, neque at auctortincidunt, turpis quam molestie augue, sit amet mattis nibh neque eget felis.</paragraphe> 4 <paragraphe>donec a lectus sed augue pellentesque accumsan eu ac justo. Etiam est urna, sagittisac cursus nec, placerat quis velit.</paragraphe> 5 </document> Q u e s t i o n 3 [Solution n 9 p 25] Écrire les XSLT xml2html.xsl et html2xml.xsl, puis les déposer sur le serveur à côté du fichier XML. Q u e s t i o n 4 [Solution n 10 p 25] Écrire les fonctions loadxml et alertxml (la seconde permettant de tester la première). Indice : Pour loadxml utiliser XMLHttpRequest : xmlhttprequest : Communication avec le serveur Pour alertxml utiliser XMLSerializer : XMLSerializer : Sérialiser un DOM Q u e s t i o n 5 Écrire la fonction execxslt. [Solution n 11 p 26] Indice : Exécuter une XSLT Q u e s t i o n 6 Écrire la fonction addpara. [Solution n 12 p 26] Q u e s t i o n 7 Écrire la fonction savexml permettant d'exécuter le fichier PHP ci-après. [Solution n 13 p 26] 1 <?php 2 //savexml.php 20 20

19 Exercices 3 $xml= $_POST["xml"]; 4 $dom = new DomDocument(); 5 $dom->loadxml($xml); 6 $dom->save('src.xml'); 7?> 21

20 Solution des exercices > Solution n 1 (exercice p. 17) hw.html 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>hello World!</title> 5 <script type="text/javascript" src="hw.js"></script> 6 </head> 7 <body> 8 <input type="button" onclick="hw()" value="clic me!"/> 9 </body> 10 </html> hw.js 1 function hw () { 2 alert("hello World") 3 } > Solution n 2 (exercice p. 17) hw.html 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>hello World!</title> 5 <script type="text/javascript" src="hw.js"></script> 6 </head> 7 <body> 8 <input type="text" id="text"/> 9 <input type="button" onclick="hw2()" value="clic me!"/> 10 </body> 11 </html> hw.js 1 function hw2() { 2 alert (document.getelementbyid('text').value) 3 } 23

21 Solution des exercices Solution des exercices > Solution n 3 (exercice p. 18) 1 function showhxcontent (pnumber) { 2 vdiv = document.getelementbyid("title" + pnumber); 3 vdiv.style.display = "block"; 4 } > Solution n 4 (exercice p. 18) 1 function hidealldivs () { 2 vdivs = document.getelementsbytagname("div"); 3 for (var i=0; i<vdivs.length; i++) { 4 vdivs.item(i).style.display="none"; 5 } 6 } > Solution n 5 (exercice p. 18) 1 function alerttitle () { 2 vhx = document.getelementsbytagname("h1"); 3 vindice = document.getelementbyid("title").value; 4 vindice = vindice - 1; 5 alert(vhx.item(vindice).firstchild.data); 6 } > Solution n 6 (exercice p. 18) 1 function deletetitle () { 2 vhx = document.getelementsbytagname("h1"); 3 vindice = document.getelementbyid("title").value; 4 vindice = vindice - 1; 5 vhx.item(vindice).removechild(vhx.item(vindice).firstchild); 6 } > Solution n 7 (exercice p. 19) 1 function definetitle () { 2 vhx = document.getelementsbytagname("h1"); 3 vindice = document.getelementbyid("title").value; 4 vindice = vindice - 1; 5 vtext = document.createtextnode("nouveau titre"); 6 if (vhx.item(vindice).haschildnodes()) { 7 vhx.item(vindice).removechild(vhx.item(vindice).firstchild); 8 } 9 vhx.item(vindice).appendchild(vtext); 10 } > Solution n 8 (exercice p. 20) 1. Après avoir affiché les éléments statiques, le script charge un fichier XML situé sur le serveur (src.xml). 2. Il lui applique une XSLT située sur le serveur pour le transformer en HTML 24 24

22 Solution des exercices (xml2html.xsl). 3. Il affiche le résultat dans un div de la page (<div id="visu">). 4. Le formulaire propose de : a. modifier le DOM du HTML en JavaScript (function addpara()) ; b. afficher le code HTML correspondant au DOM courant (function alertxml(document)) ; c. sérialiser le DOM sur le serveur, à la place du fichier XML source (function savexml ()) : i. en appliquant une XSLT inverse de la première (html2xml.xsl), ii. puis en postant le flux XML obtenu à une page PHP (savexml.php), iii. qui écrase le fichier src.xml avec la nouvelle sérialisation du DOM. > Solution n 9 (exercice p. 20) html2xml.xsl 1 <?xml version="1.0" encoding="utf-8"?> 2 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> 3 <xsl:output method="xml"/> 4 <xsl:template match="div"> 5 <document> 6 <xsl:apply-templates select="p"/> 7 </document> 8 </xsl:template> 9 <xsl:template match="p"> 10 <paragraphe><xsl:value-of select="."/></paragraphe> 11 </xsl:template> 12 </xsl:stylesheet> xml2html.xsl 1 <?xml version="1.0" encoding="utf-8"?> 2 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/xsl/transform" version="1.0"> 3 <xsl:output method="html"/> 4 <xsl:template match="document"> 5 <div id="srcxml"> 6 <xsl:apply-templates select="paragraphe"/> 7 </div> 8 </xsl:template> 9 <xsl:template match="paragraphe"> 10 <p><xsl:value-of select="."/></p> 11 </xsl:template> 12 </xsl:stylesheet> > Solution n 10 (exercice p. 20) 1 function loadxml (ppath){ 2 var vxhr = new XMLHttpRequest(); 3 vxhr.open("get", ppath, false); 4 vxhr.send(null); 5 return rxml = vxhr.responsexml; 6 } 7 function alertxml (pdom) { 8 var xmlstring = new XMLSerializer().serializeToString(pDom); 9 alert(xmlstring); 10 } 25

23 Solution des exercices Solution des exercices > Solution n 11 (exercice p. 20) 1 function execxslt (pxml, pxsl) { 2 var proc = new XSLTProcessor(); 3 proc.importstylesheet(pxsl); 4 return proc.transformtofragment(pxml,document); 5 } > Solution n 12 (exercice p. 20) 1 function addpara (ptext) { 2 vnewp = document.createelement("p"); 3 vnewp.appendchild(document.createtextnode(ptext)); 4 document.getelementbyid("srcxml").appendchild(vnewp); 5 } > Solution n 13 (exercice p. 20) 1 function savexml () { 2 var xsl = loadxml("html2xml.xsl"); 3 var xml = document.getelementbyid("srcxml"); 4 var proc = new XSLTProcessor(); 5 proc.importstylesheet(xsl); 6 var res = proc.transformtodocument(xml); 7 var restxt = (new XMLSerializer()).serializeToString(res); 8 var data = "xml=" + encodeuricomponent(restxt); 9 var vxhr = new XMLHttpRequest(); 10 vxhr.open("post", "savexml.php", false); 11 vxhr.setrequestheader("content-type", "application/x-www-formurlencoded"); 12 vxhr.send(data); 13 } 26 26

24 Bibliographie [Brillant07] ALEXANDRE BRILLANT, XML : Cours et exercices, Eyrolles, 2007 [ISBN ] 27

25 Contenus annexes - L'arbre du document XML Il est possible de représenter un document XML sous forme d'arbre, tel que : L'arbre possède une racine / qui a comme fils l'élément racine l'élément racine est l'élément du document XML qui contient tous les autres chaque nœud a comme fils les éléments et le texte qu'il contient, ainsi que ses attributs. Exemple : Fichier XML 1 <?xml version="1.0" encoding="utf-8"?> 2 <document modele="ulcoursgeneral" code="bp-incendie3_s1_e2_ul1"> 3 <entete> 4 <identification> 5 <titre>l'assurance de la responsabilité de voisinage</titre> 6 <date>21/02/01</date> 7 <auteur>aea</auteur> 8 <version>1.00</version> 9 </identification> 10 </entete> 11 <corps> 12 <contenu> 13 <paragraphe>cette garantie est appelée : recours des voisins et des tiers.</paragraphe> 14 <remarque> 15 <paragraphe>l'image suivante <ressource URIsrc="img07.jpg" titre="recours des voisins et des tiers" type="image"/> montre la garantie.</paragraphe> 16 </remarque> 17 </contenu> 18 </corps> 19 </document> Exemple : Arbre XML 1 / 2 document = "ULCoursGeneral" = "BP-Incendie3_S1_E2_UL1" 5 entete 6 identification 7 titre 8 text() = "L'assurance de..." 9 date 10 text() = "21/02/01" 11 auteur 12 text() = "AEA" 29

26 Contenus annexes Contenus annexes 13 version 14 text() = "1.00" 15 corps 16 contenu 17 paragraphe 18 text() = "Cette garantie..." 19 remarque 20 paragraphe 21 text() = "L'image suivante" 22 ressource = "img07.jpg" = "Recours des voisins..." = "image" 26 text() = "montre la garantie." Remarque : Ordre des nœuds L'ensemble des nœuds de l'arbre d'un document est muni d'un ordre, qui est celui de l'ordre dans le document XML sérialisé

L'API DOM et son implémentation en JavaScript

L'API DOM et son implémentation en JavaScript L'API DOM et son implémentation en JavaScript Ingénierie Documentaire http://doc.crzt.fr Stéphane Crozat 14 septembre 2016 Table des matières I Introduction au DOM 3 1. Principes du DOM... 3 2. L'interface

Plus en détail

LIVRE BLANC RÉDIGER POUR LE WEB

LIVRE BLANC RÉDIGER POUR LE WEB 86, rue de la Ville en Pierre - 44000 NANTES Tél.: 02 40 37 01 77 - Fax : 02 40 37 01 84 info@creasit.fr - www.creasit.fr LIVRE BLANC RÉDIGER POUR LE WEB Ce document est la propriété exclusive de Creasit

Plus en détail

Mise en forme XML avec XSLT XML schéma (XSD)

Mise en forme XML avec XSLT XML schéma (XSD) Mise en forme XML avec XSLT XML schéma (XSD) BOUALEM ABID & LEBCIR FAHIMA ENS KOUBA ALGER ÉÀ&( Introduction XSL : extensible Stylesheet Langage, ou langage extensible de feuille de style. XPath : un moyen

Plus en détail

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 Premières applications Web 2.0 avec Ajax et PHP J e a n - M a r i e D e f r a n c e Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 8 Applications Ajax-PHP synchrones Pour commencer simplement, je vous

Plus en détail

Document Object Model (DOM)

Document Object Model (DOM) Document Object Model (DOM) Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Description générale Définit un standard pour accéder aux documents structurés

Plus en détail

COMPÉTITIONS TROPHÉE ORANGE LE MARDI 23 JUIN 21 C DECOUVRIR LE PARCOURS INFORMATIONS LUNDI 11 JUIN ACCÈS PRO ACCUEIL LE GOLF LE RESTAURANT

COMPÉTITIONS TROPHÉE ORANGE LE MARDI 23 JUIN 21 C DECOUVRIR LE PARCOURS INFORMATIONS LUNDI 11 JUIN ACCÈS PRO ACCUEIL LE GOLF LE RESTAURANT ACCÈS PRO ECOLE DE GOLF ECOLE DE GOLF PRO SHOP CARTE SCORE ECOLE DE GOLF PRO SHOP Suspendisse potenti. Aliquam ut felis enim, eget auctor nulla. Proin scelerisque massa ac quam malesuada fermentum. Cras

Plus en détail

API pour XML. Mihaela JUGANARU-MATHIEU mathieu@emse.fr. février 2012. École Nationale Supérieure des Mines de St Etienne.

API pour XML. Mihaela JUGANARU-MATHIEU mathieu@emse.fr. février 2012. École Nationale Supérieure des Mines de St Etienne. API pour XML Mihaela JUGANARU-MATHIEU mathieu@emse.fr École Nationale Supérieure des Mines de St Etienne février 2012 Les outils pour traiter XML (validation, navigation, interrogation) sont puissants

Plus en détail

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des

Plus en détail

PHP. Manipulation de XML avec DOM. A. Belaïd

PHP. Manipulation de XML avec DOM. A. Belaïd PHP Manipulation de XML avec DOM 1 DOM Introduction DOM est une API standard : Les méthodes et procédures de manipulation DOM sont exactement les mêmes dans tous les langages Vous pouvez passer d un langage

Plus en détail

Guide d utilisation. Version 0514. URL : http://atpa.creaprime.fr URL admin : http://atpa.creaprime.fr/master-atpa Login: atpa Mot de passe : atpa

Guide d utilisation. Version 0514. URL : http://atpa.creaprime.fr URL admin : http://atpa.creaprime.fr/master-atpa Login: atpa Mot de passe : atpa Guide d utilisation Version 0514 URL : http://atpa.creaprime.fr URL admin : http://atpa.creaprime.fr/master-atpa Login: atpa Mot de passe : atpa SOMMAIRE PRINCIPALES FONCTIONNALITÉS Résumé... p. 3 ACTUALITÉS

Plus en détail

Traitement de documents XML Les API DOM et Sax. DOM et Sax p.1/33

Traitement de documents XML Les API DOM et Sax. DOM et Sax p.1/33 Traitement de documents XML Les API DOM et Sax DOM et Sax p.1/33 DOM et Sax p.2/33 Sommaire Les deux principales interfaces de programmation XML : DOM (Document Object Model), basé sur une représentation

Plus en détail

christine.vanoirbeek@epfl.ch" Relational Database Object Database Files !" Un processeur XML est un outil (package, librairie,

christine.vanoirbeek@epfl.ch Relational Database Object Database Files ! Un processeur XML est un outil (package, librairie, DOCUMENTS MULTIMEDIA! Manipulation de documents! DOM & SAX" Manipulation de documents " import java.io.*;? import java.text.*; import javax.servlet.http.*; public class cvcollection {.. Accès Création

Plus en détail

Programmation XML. Pour quoi faire? Format de stockage. Format d échange

Programmation XML. Pour quoi faire? Format de stockage. Format d échange Programmation XML Pour quoi faire? Format de stockage Plus puissant que les fichiers fixes Plus standard que les fichiers formatés Plus souple et plus «simple» qu une base de données Format d échange Entre

Plus en détail

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet Création de sites web INF0326 Outils bureautiques, logiciels et Internet Plan Création de pages web HTML et CSS Création de sites web avec WordPress Créer des pages web Partie 1 Système hypertexte Un système

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

Plus en détail

DOM - Document Object Model

DOM - Document Object Model DOM - Document Object Model 1 But de DOM Interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet DOM permet aux programmes et scripts : d'accéder et

Plus en détail

Les 2 grands métiers. autour de la création Web. Mais où est passé l'intégrateur?

Les 2 grands métiers. autour de la création Web. Mais où est passé l'intégrateur? Les 2 grands métiers autour de la création Web Mais où est passé l'intégrateur? Langages et frameworks Outils spécifi ques dev mobile À voir dans le module multimédia... Langage : Java Objective C C#,...

Plus en détail

Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2)

Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie 1 de 2) École de bibliothéconomie et des sciences de l information SCI6306 Bases de données documentaires Cours 9 Formulaires Web pour saisie de données dans une base de données relationnelle avec PHP (partie

Plus en détail

Langage HTML (2 partie) lt La Salle Avignon BTS IRIS

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv> Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee

Plus en détail

Introduction à XML : principes, syntaxe, schémas et manipulations

Introduction à XML : principes, syntaxe, schémas et manipulations LO17 Introduction à XML : principes, syntaxe, schémas et manipulations https://stph.scenaricommunity.org STÉPHANE CROZAT Paternité - Partage des Conditions Initiales à l'identique : http://creativecommons.org/licenses/by-sa/2.0/fr/

Plus en détail

Un test de mon thème Beamer

Un test de mon thème Beamer Parce que L A TEX c est mieux que tout fedora-fr 22 octobre 2008 1/8 Plan 1 2 3 4 2/8 En veux-tu, en voilà Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dolor. Aenean quis est eu

Plus en détail

XML - Semaine 6. XML - Semaine 6. Pierre Nerzic. février-mars 2016. 1 / 42 Pierre Nerzic

XML - Semaine 6. XML - Semaine 6. Pierre Nerzic. février-mars 2016. 1 / 42 Pierre Nerzic XML - Semaine 6 Pierre Nerzic février-mars 2016 1 / 42 Pierre Nerzic Le cours de cette semaine présente l API XML DOM permettant de produire et traiter un document XML : Principes, Création et modification

Plus en détail

Parsing des documents XML

Parsing des documents XML 75 Document XML Schéma XML XSLT SAX Parsing des documents XML Objectif: Analyse du document XML. Rôle: Vérifier la cohérence du document XML et transmettre à l application les informations utiles au traitement

Plus en détail

PHP 5.4 Développez un site web dynamique et interactif

PHP 5.4 Développez un site web dynamique et interactif Editions ENI PHP 5.4 Développez un site web dynamique et interactif Collection Ressources Informatiques Extrait 183 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel

Plus en détail

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr

Technologies Web. Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Technologies Web Farah Benamara Zitoune Maître de conférences IRIT-UPS benamara@irit.fr Plan du cours Cours 1 : Introduction HTML/CSS Cours 2 : Introduction programmation web + javascirpt Cours 3 : Introduction

Plus en détail

Le client/serveur dans le cas du Web

Le client/serveur dans le cas du Web Le client/serveur dans le cas du Web Olivier Flauzac & Cyril Rabat olivier.flauzac@univ-reims.fr cyril.rabat@univ-reims.fr Licence 3 Info - Info0503 - Introduction à la programmation client/serveur 2015-2016

Plus en détail

Rémi Godard Vivian Perez Florian Pérugini Bertrand Vitrant. Comparateur de documents XML

Rémi Godard Vivian Perez Florian Pérugini Bertrand Vitrant. Comparateur de documents XML Rémi Godard Vivian Perez Florian Pérugini Bertrand Vitrant DOCUMENTATION TECHNIQUE Comparateur de documents XML SOMMAIRE 1 Introduction... 3 2 Langage et choix de programmation... 4 2.1 Le langage PHP...

Plus en détail

Programmation du Web : Présentation du Web dynamique

Programmation du Web : Présentation du Web dynamique Programmation du Web : Présentation du Web dynamique Jean-Baptiste Vioix (Jean-Baptiste.Vioix@u-bourgogne.fr) IUT de Dijon-Auxerre - LE2I http://jb.vioix.free.fr 1-8 Présentation Nécessité du web dynamique

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Dom, XML, Lecture de fichiers

Dom, XML, Lecture de fichiers Projet de développement web : Développement côté client Chapitre 4 Dom, XML, Lecture de fichiers Page 1 / 11 Table des matières Table des matières Introduction DOM : Document Object Model Structure habituelle

Plus en détail

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP.

1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. TP5: LES FORMULAIRES OBJECTIFS : 1. Manipulation des formulaires avec PHP. 2. Transmission d'arguments entre pages : méthodes GET et POST. 3. Manipulation du JavaScript avec le PHP. PARTIE 1: Formulaire

Plus en détail

Introduction à XML. 1. Notions de base. Introduction à XML

Introduction à XML. 1. Notions de base. Introduction à XML Introduction à XML INTRODUCTION À XML 1. NOTIONS DE BASE 2. EXEMPLE SIMPLE 3. SYNTAXE XML 3.1. LES CARACTÈRES SPÉCIAUX 4. DTD 5. DOCUMENT XML AVEC FEUILLE DE STYLE CSS 6. XLS ET XSLT 6.1. EXEMPLE DE DOCUMENT

Plus en détail

XML : l ASCII de demain

XML : l ASCII de demain Carrefour de l information XML : l ASCII de demain Philippe Mabilleau ing. 3 octobre 2002 Le langage XML Historique : De l ASCII à XML XML : Le langage XML : La programmation XML : Les transformations

Plus en détail

Programmation Web Avancée AJAX

Programmation Web Avancée AJAX 1/28 Programmation Web Avancée AJAX Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017

Plus en détail

Tables des matières. Normes régissant l utilisation du logo 3. Composition du logo 4. Zone de dégagement 5. Taille et proportions 6

Tables des matières. Normes régissant l utilisation du logo 3. Composition du logo 4. Zone de dégagement 5. Taille et proportions 6 1 Tables des matières Normes régissant l utilisation du logo 3 Composition du logo 4 Zone de dégagement 5 Taille et proportions 6 Couleurs et formats de fichiers 7 Application sur une image 8 À ne pas

Plus en détail

Apprendre à développer avec JavaScript

Apprendre à développer avec JavaScript Présentation du langage JavaScript 1. Définition et rapide historique 11 2. Pré-requis pour un apprentissage aisé du langage 13 3. Outillage nécessaire 14 4. Positionnement du JavaScript face à d autres

Plus en détail

Thierry Templier. Programmation objet, DOM, Ajax, Prototype, Dojo, Script.aculo.us, Rialto. JavaScript. Arnaud Gougeon. pour le Web 2.

Thierry Templier. Programmation objet, DOM, Ajax, Prototype, Dojo, Script.aculo.us, Rialto. JavaScript. Arnaud Gougeon. pour le Web 2. JavaScript pour le Web 2.0 Programmation objet, DOM, Ajax, Prototype, Dojo, Script.aculo.us, Rialto Thierry Templier Arnaud Gougeon 4 Programmation DOM Avant la standardisation du DOM, chaque navigateur

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 Table des matières PREMIÈRE PARTIE

Plus en détail

Secteur Tertiaire Informatique Filière étude - développement. Développer des composants d interface Créer des formulaires de saisie

Secteur Tertiaire Informatique Filière étude - développement. Développer des composants d interface Créer des formulaires de saisie Secteur Tertiaire Informatique Filière étude - développement. Développer des composants d interface Créer des formulaires de saisie JAVASCRIPT JS08-Gestion des cookies-consignes Accueil Apprentissage Période

Plus en détail

Compte rendu de PHP MySQL : création d un formulaire de base de données

Compte rendu de PHP MySQL : création d un formulaire de base de données REVILLION Joris Décembre 2009 3EI Compte rendu de PHP MySQL : création d un formulaire de base de données Objectifs : Le principal objectif de ce cours est de découvrir et de nous familiariser avec le

Plus en détail

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6 Légende Conception de Sites Web dynamiques 2015 Cours 5+6 Patrick Reuter http://www.labri.fr/perso/preuter/cswd2015 Titre de la page h1, h2, h3 color: red; $a = 3; SELECT * FROM commentaires; HTML CSS

Plus en détail

Les technologies XML. Cours 3 : Les API XML. Novembre 2013 - Version 4.0 -

Les technologies XML. Cours 3 : Les API XML. Novembre 2013 - Version 4.0 - Les technologies XML Cours 3 : Les API XML Novembre 2013 - Version 4.0-1 LES API POUR MANIPULER DES DOCUMENTS XML Les API XML sont : des librairies proposant un ensemble de composants logiciels facilitant

Plus en détail

Programmation Web. Thierry Hamon

Programmation Web. Thierry Hamon 1/27 Programmation Web Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017 Bobigny

Plus en détail

Programmation client web cours 8 : javascript et applet

Programmation client web cours 8 : javascript et applet Programmation client web cours 8 : javascript et applet Plan Modèles de programmation via le service Web Protocole HTTP HTML BALISES Cascading Style Sheet Javascript Applet java IPW : programmation côté

Plus en détail

Programmation Web Avancée Parsers XML

Programmation Web Avancée Parsers XML 1/38 Programmation Web Avancée Parsers XML Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin,

Plus en détail

Cours de programmation web

Cours de programmation web Cours de programmation web ENSAE 2006-2007 Cours 1 - Introduction 1. Introduction 2. Le principe d Internet 3. Les langages du web 4. Le web 2.0 Introduction : Historique 1967 : Arpanet : réseau militaire

Plus en détail

XML Introduction à DOM

XML Introduction à DOM XML Introduction à DOM Document Object Model Généralités Définition Le modèle objet de document de XML (XML DOM) définit une manière standard pour accéder et manipuler des documents XML Il présente un

Plus en détail

Développement de l interface Web du projet Hôpital

Développement de l interface Web du projet Hôpital Pôle informatique 2013/2014 École Nationale Supérieure des Mines de Saint-Étienne Développement de l interface Web du projet Hôpital Antoine Zimmermann antoine.zimmermann@emse.fr Le cahier des charges

Plus en détail

Applications orientées données (NSY135)

Applications orientées données (NSY135) Applications orientées données (NSY135) 2 Applications Web Dynamiques Auteurs: Raphaël Fournier-S niehotta et Philippe Rigaux (philippe.rigaux@cnam.fr,fournier@cnam.fr) Département d informatique Conservatoire

Plus en détail

" extensible Markup Language " XML

 extensible Markup Language  XML " extensible Markup Language " XML Sylvie Vignes, Département Informatique et Réseaux École Nationale Supérieure des Télécommunications 46, rue Barrault 75634 Paris cedex 13 Département Informatique et

Plus en détail

Dojo partie 1. Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax

Dojo partie 1. Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax Dojo partie 1 Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax 1 Modules Dojo 3 espaces de noms principaux: dojo: bibliothèque de base dijit: bibliothèque de widgets

Plus en détail

Plan. Environnement Client/Serveur. Cours 7 JavaServer Pages (1) JSP. Programmation Web coté serveur

Plan. Environnement Client/Serveur. Cours 7 JavaServer Pages (1) JSP. Programmation Web coté serveur Plan Environnement Client/Serveur Cours 7 JavaServer Pages (1) kn@lri.fr 7.1 Principe 7.2 Rappels HTTP 7.3 Le serveur web Tomcat Programmation Web coté serveur JSP 2/28 (rappel) génération de pages-web

Plus en détail

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques.

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques. TP Javascript 2013 tv - v.1.0 Sommaire Séquence n 1 : les bases 2 Insertion de code javascript..................................... 2 Exercice n 1.1 : code javascript interne au document.......................

Plus en détail

Cours Web - Javascript

Cours Web - Javascript Cours Web - Javascript Thierry Vaira BTS IRIS Avignon tvaira@free.fr v0.1 Objectifs Se familiariser avec le langage Javascript et acquérir une pratique minimale. Être capable d intégrer des scripts clients

Plus en détail

Java EE - Cours 7. Cours de 2 e année ingénieur Spécialisation «Génie Informatique»

Java EE - Cours 7. Cours de 2 e année ingénieur Spécialisation «Génie Informatique» Java EE - Cours 7 Cours de 2 e année ingénieur Spécialisation «Génie Informatique» Rappels 2 Feuilles de Styles : CSS Lorsque l on réalise un site Web, il faut dissocier la partie forme de la partie fond.

Plus en détail

Module: Programmation sites Web Dynamique

Module: Programmation sites Web Dynamique Module: Programmation sites Web Dynamique Formateur: A BENDAOUD LEÇON : MÉTHODES DE NAVIGATION Les différentes méthodes de navigation : Voici les différentes méthodes que nous allons expliciter dans cette

Plus en détail

Formation PHP débutant

Formation PHP débutant Formation PHP débutant Table des matières 1 Le principe de PHP 3 1.1 Langage côté serveur.................................. 3 1.2 Pour travailler..................................... 3 1.3 Langage de pré-processing...............................

Plus en détail

APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI

APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Cours en Réponse à questions, n 1 Valérie Bellynck, Benjamin Brichet-Billet, Mazen Mahrous Grenoble

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

INTRODUCTION A JAVA. Fichier en langage machine Exécutable

INTRODUCTION A JAVA. Fichier en langage machine Exécutable INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

TP 2 : programmation côté serveur À rendre pour le mardi 6 mai 2008

TP 2 : programmation côté serveur À rendre pour le mardi 6 mai 2008 Université Claude Bernard Lyon 1 UFR d informatique avril 2006 MIAG soir Systèmes d Information Méthodes Avancées TP 2 : programmation côté serveur À rendre pour le mardi 6 mai 2008 Introduction Dans ce

Plus en détail

Gérer les formulaires

Gérer les formulaires 195 Chapitre 7 Gérer les formulaires 1. Vue d'ensemble Gérer les formulaires 1.1 Petit rappel sur les formulaires Le formulaire est un outil de base indispensable pour les sites web dynamiques puisqu'il

Plus en détail

Systèmes d'informations

Systèmes d'informations Systèmes d'informations C'est un ensemble d'outils pour stocker / gérer / diffuser des informations / des données Le stockage : Bases de données + SGDBR La gestion : Saisie, Mise à jour, Contrôle La diffusion

Plus en détail

Programmation Web. Madalina Croitoru IUT Montpellier

Programmation Web. Madalina Croitoru IUT Montpellier Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance

Plus en détail

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s):

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s): Formation JavaScript : Perfectionnement Objectif(s): Comprendre l'approche AJAX Comprendre l'objet XMLHttpRequest Durée : 2 jour(s) Pré-requis : Bonnes connaissances en (X)HTML, CSS et JavaScript Public

Plus en détail

XML DOM. Marc Chevaldonné marc.chevaldonne@u-clermont1.fr http://marc.chevaldonne.free.fr. Année scolaire 2010-2011

XML DOM. Marc Chevaldonné marc.chevaldonne@u-clermont1.fr http://marc.chevaldonne.free.fr. Année scolaire 2010-2011 XML DOM Marc Chevaldonné marc.chevaldonne@u-clermont1.fr http://marc.chevaldonne.free.fr Année scolaire 2010-2011 DOM - Qu est-ce que c est? DOM = Document Object Model API pour accéder et utiliser des

Plus en détail

Création du contenu RichMédia

Création du contenu RichMédia HTML5 : les formulaires 2.0 Avec Html4, les typesde champs n'étaientpasnombreux. HTML5 apporteplus d'unedouzaine de nouveauxtypes. HTML5 introduit de nombreuses nouveautés pour les formulaires pour améliorer

Plus en détail

Programme d identification visuelle de la banque laurentienne

Programme d identification visuelle de la banque laurentienne Programme d identification visuelle de la banque laurentienne Table des matières 1 Introduction 2 Lexique 2 3 6 Papeterie officielle 6.1 Papier en-tête 6.2 Papier en-tête personnalisé 11 12 12 6.3 Papier

Plus en détail

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Olivier BOEBION 12/02/2004 1 Le point de départ 1.1 Et la lumière fut... A la fin des années 1980, Tim Berners-Lee travaillant

Plus en détail

XML, DOM & XSL Synthèse de lecture

XML, DOM & XSL Synthèse de lecture Dorine MAZEYRAT XML, DOM & XSL Synthèse de lecture Novembre 2008 NFE107 - Urbanisation des SI 0 SOMMAIRE 1. LE LANGAGE XML...2 1.1. Définition...2 1.2. Historique...2 1.3. Objectif...2 1.4. Présentation

Plus en détail

Technologies de l Internet. Partie 5 : DOM, JavaScript Iulian Ober iulian.ober@irit.fr

Technologies de l Internet. Partie 5 : DOM, JavaScript Iulian Ober iulian.ober@irit.fr Technologies de l Internet Partie 5 : DOM, JavaScript Iulian Ober iulian.ober@irit.fr DHTML : Introduction Objectif : créer des pages dynamiques objets qui apparaissent/disparaissent/changent (ex. menus)

Plus en détail

L1 Option Programmation Web côté Serveur - Contrôle continu n 1

L1 Option Programmation Web côté Serveur - Contrôle continu n 1 L Option Programmation Web côté Serveur - Contrôle continu n Veuillez noircir les cases correspondantes à votre numéro d étudiant ( case/colonne). Si votre N est, il faut noircir le dans la ère colonne,

Plus en détail

PHP et XML. Traitements de XML

PHP et XML. Traitements de XML PHP et XML XML et PHP 1 Traitements de XML Deux approches pour manipuler des documents XML: Approche DOM: Utilise un analyseur (Parser) qui transforme le document XML en structure d'arbre. Il faut parcourir

Plus en détail

Internet. jquery jquery Mobile Partie 2

Internet. jquery jquery Mobile Partie 2 Internet jquery jquery Mobile Partie 2 Olivier Pons / 2013 Objectif Jquery / jquery Mobile Sommaire 1. Fondamentaux DOM 2. jquery 3. jquery Mobile 2 / 32 1. Fondamentaux DOM - Définition Le Document Object

Plus en détail

Cours 4 Programmation web, orientée serveur

Cours 4 Programmation web, orientée serveur DUT MMI IUT de Marne-la-Vallée 17/03/2015 M2202 - Algorithmique Cours 4 Programmation web, orientée serveur Philippe Gambette Sources phpdebutant.net www.php.net (documentation du langage PHP) Plan du

Plus en détail

PHP 5. simplexml. A. Belaïd 1

PHP 5. simplexml. A. Belaïd 1 PHP 5 simplexml A. Belaïd 1 Introduction Dans les versions précédentes de PHP, il n y avait aucun outil permettant de manipuler simplement des fichiers XML Dans PHP 5, on trouve un mode, appelé, SimpleXML

Plus en détail

Repérage dans le support de cours. D3.js ~ Data Driven Document. Notes. Notes

Repérage dans le support de cours. D3.js ~ Data Driven Document. Notes. Notes Visualisation interactive de données sur le web Présentation Généralités Repérage dans le support de cours Sur les slides projetés, le numéro de page entre parenthèse correspond à celui de votre support

Plus en détail

Programmation Web Avancée Parsers XML

Programmation Web Avancée Parsers XML 1/33 Programmation Web Avancée Parsers XML Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin,

Plus en détail

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript AJAX Ajax 1 AJAX Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript Utilise: HTML pour le marquage XML pour représenter les résultats

Plus en détail

CHARTE GRAPHIQUE DE LA MARQUE

CHARTE GRAPHIQUE DE LA MARQUE CETI F 1341.4 03/2015 CHATE GAPHIQUE DE LA MAQUE À L USAGE DES OGANISMES CETIFICATEUS MANDATÉS ET DE LEUS CLIENTS TITULAIES 11 rue Francis de Pressensé - 93571 La Plaine Saint-Denis Cedex - France - T.

Plus en détail

INF 6450 GESTION DE L'INFORMATION AVEC XML Télé-université, Université du Québec à Montréal CORRIGÉ DES QUESTIONS PRÉPARATOIRES À L'EXAMEN

INF 6450 GESTION DE L'INFORMATION AVEC XML Télé-université, Université du Québec à Montréal CORRIGÉ DES QUESTIONS PRÉPARATOIRES À L'EXAMEN INF 6450 GESTION DE L'INFORMATION AVEC XML Télé-université, Université du Québec à Montréal CORRIGÉ DES QUESTIONS PRÉPARATOIRES À L'EXAMEN Question 1. Écrivez un programme en Java qui utilise l API DOM

Plus en détail

Échange et mise à jourde documents XML via le Web p.1/46

Échange et mise à jourde documents XML via le Web p.1/46 Échange et mise à jour de documents XML via le Web Échange et mise à jourde documents XML via le Web p.1/46 CGI : Common Gateway Interface Principe : on déclenche une action (un programme) sur la machine

Plus en détail

LI345 - EXAMEN DU 22JUIN 2010

LI345 - EXAMEN DU 22JUIN 2010 N d anonymat : page 1 LI345 - EXAMEN DU 22JUIN 2010 Durée : 2h ---documents autorisés Transactions Soit la relation Produit, et les deux transactions T1 et T2 suivantes : Produit NOM PRIX P1 40 P2 50 P3

Plus en détail

XSL est utilisé pour permettre de convertir les données par exemple en HTML pour l affichage

XSL est utilisé pour permettre de convertir les données par exemple en HTML pour l affichage المدرسة الوطنية العليا لإلعالم اآللي Ecole nationale Supérieure d Informatique Ecole Doctorale Promotion 2012-2013 Présenté par : Dr. Kamel Boukhalfa boukhalk@gmail.com, kboukhalfa@usthb.dz Source : Yves

Plus en détail

Charte graphique Avril 2015

Charte graphique Avril 2015 Charte graphique Avril 2015 Introduction AFFIRMER L IDENTITÉ DE CHÂTEAUROUX MÉTROPOLE Depuis le 1 er janvier 2015, la Ville et l Agglomération de Châteauroux ont mutualisés leurs services et partagent

Plus en détail

charte graphique:charte graphique 16/03/07 16:37 Page 1 AUDIO ENGINEERING

charte graphique:charte graphique 16/03/07 16:37 Page 1 AUDIO ENGINEERING SOMMAIRE P2 Sommaire P3 Introduction et présentation du logo P4 P5 Construction du logo normal Construction du logo partenaire Les constituants de l identité Vous trouverez sur le CD-ROM joint les éléments

Plus en détail

PHP. virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/pwb. Internet et HTML

PHP. virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/pwb. Internet et HTML PHP virginie.sans@irisa.fr http://perso.univ-rennes1.fr/virginie.sans/ BUR Internet et HTML PHP, qu'est-ce que c'est? Un langage pour la programmation du serveur Permet d'inclure des parties programmées

Plus en détail

Module : Programmation site web dynamique

Module : Programmation site web dynamique Module : Programmation site web dynamique LEÇON : MANIPULATION DES FICHIERS XML VIA.NET C# (LECTURE ET ECRITURE) Proposé par : A BENDAOUD XML Sommaire Créer un fichier XML à l aide de Visual Studio...

Plus en détail

PHP & XML par KDO FORUM DU PHP 2002 PARIS

PHP & XML par KDO FORUM DU PHP 2002 PARIS par KDO FORUM DU PHP 2002 PARIS PLAN Introduction Dialectes XML XSLT Conclusion XML qu'est ce que c'est? Une recommandation du W3C Un méta-langage Un format de données Un format de documents Un mode de

Plus en détail

LES SCRIPTS CGI. Présentation Mise en œuvre La programmation Les variables d environnement

LES SCRIPTS CGI. Présentation Mise en œuvre La programmation Les variables d environnement LES SCRIPTS CGI Présentation Mise en œuvre La programmation Les variables d environnement LES SCRIPTS CGI Présentation Mise en œuvre La programmation Les variables d environnement OBJECTIFS Historiquement,

Plus en détail

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web.

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web. Document 1 : client et serveur Les ordinateurs sur lesquels sont stockés les sites web sont appelés des serveurs. Ce sont des machines qui sont dédiées à cet effet : elles sont souvent sans écran et sans

Plus en détail

Table des matières. JavaScript. Exemples. À quoi ça sert? À quoi ça sert? Présentation. Exemple 1. 1ère partie. Js partout!

Table des matières. JavaScript. Exemples. À quoi ça sert? À quoi ça sert? Présentation. Exemple 1. 1ère partie. Js partout! JavaScript M4103C - Programmation Web client riche Table des matières À quoi ça sert? 2ème année - S4, cours - 1/5 2014-2015 Présentation Exemple 1 Marcel Bosc Exemple 2 Département informatique 1ère partie

Plus en détail

Programmation en Java Java et XML. NGUYEN Thi Minh Tuyen

Programmation en Java Java et XML. NGUYEN Thi Minh Tuyen Programmation en Java Java et XML XML l'acronyme de «extensible Markup Language». permet d'échanger des données entres applica=ons hétérogènes car il peut modéliser et stocker des données de façon portable.

Plus en détail

Java et Objet. Amélie Lambert 2014-2015. Amélie Lambert 2014-2015 1 / 52

Java et Objet. Amélie Lambert 2014-2015. Amélie Lambert 2014-2015 1 / 52 Java et Objet Amélie Lambert 2014-2015 Amélie Lambert 2014-2015 1 / 52 Chapitre 10 Le langage JavaServer Pages (JSP) et le modèle de composants Java (Java beans) Amélie Lambert 2014-2015 2 / 52 Plan du

Plus en détail

ultisites S.A. module «services»

ultisites S.A. module «services» M ultisites S.A. module «services» TP N 3 : Installation du serveur WEB Nom : Prénom : Classe : Date : Appréciation : Note : Objectif : Être capable d'installer le serveur WEB, et de créer une page HTML

Plus en détail

Développement Web Frameworks AJAX

Développement Web Frameworks AJAX 1 / 27 Développement Web Frameworks AJAX Jean-Michel Richer jean-michel.richer@univ-angers.fr http://www.info.univ-angers.fr/pub/richer 2009 2 / 27 Objectif Objectif du cours découverte de quelques frameworks

Plus en détail

ASP. Etape par étape. 1ère partie : Introduction à asp.net. (Révision : 2 du 05/11/2004 13 pages) Avertissement :

ASP. Etape par étape. 1ère partie : Introduction à asp.net. (Révision : 2 du 05/11/2004 13 pages) Avertissement : ASP Etape par étape 1ère partie : Introduction à asp.net (Révision : 2 du 05/11/2004 13 pages) Avertissement : Ce document peut comporter des erreurs. Cependant, tout a été mis en œuvre afin de ne pas

Plus en détail