Chap VI - DHTML Programmation Dynamique 26/03/2017 Chap VI - DHTML Programmation Dynamique Spry JQuery Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 1 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

26/03/2017 Sommaire du Cours Chap I - Documents: Historique, Modèles, Standards et Références Chap II - HTML: voir le cours CIP1-CMD & HTML5 Chap III - XML: "eXtensible Markup Language", les Bases Chap IV - DTD: "Document Type Definition" Chap V - CSS: Feuilles de Styles en Cascades& CSS3 Chap VI - DOM, DHTML: "Domain Object Model "& Programmation Dynamique en HTML & SPRY & JQuery Chap VII - XSD: Schémas XML Chap VIII - XML "Advanced" Processeurs et Dialectes: XPath, Xlink Chap IX - XSLT: Transformations XML Chap X - RDF: "Resource Description Framework" Chap IX - AJAX: "Asynchronous JavaScript And XML" Savoir-Faire: Know Hows HTML XHTML CSS JS+DOM MATHML XPATH XLINK XSLT Etat de l'art: HTML5 CSS3 SPRY SVG RDF AJAX XUL 26/03/2017 Transparent 2 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi 2

Some Références Web EPU courses (in French) 26/03/2017 Some Références Web EPU courses (in French) Création & Manipulltion de Document http://www.polytech.unice.fr/~pfz/cmd.html Introduction to Internet http://rainbow.i3s.unice.fr/iai/ Langages & Documents http:www.polytech.unice;fr/~pfz/document.html W3C tutorial : http://www.w3schools.com/ Mozilla Development Center http://developer.mozilla.org/en/docs/Main_Page W3C, http://www.w3.org/ Web Developer's Bookmarks http://antriksh.com/resources/ Biblio: many issues at EPU's lib 26/03/2017 Transparent 3 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Documentation et Manuels Documents du web liste de balises HTML code des couleurs RVB code HTML des caractères ISO liste des extensions de fichiers (formats) Expressions Rationnelles Manuels. Expressions régulières sous Emacs Recherche et remplacement sous Emacs compléments Emacs grep sous Unix Tutoriaux du Web W3C : http://www.w3schools.com/ CSS Play : http://www.cssplay.co.uk/index Zen Garden : http://www.csszengarden.com/tr/francais/ CSS in10 steps : http://www.barelyfitz.com/screencast/html-training/css/positioning/ 10 steps to better CSS: http://shapeshed.com/journal/10_steps_to_better_css/ 26/03/2017 Transparent 4 ESSI - 2 – 2004-05 - Paul Franchi

Références Web 26/03/2017 Transparent 5 5 ESSI - 2 – 2004-05 - Paul Franchi 5

Lexique API – Application Programming Interface 26/03/2017 Lexique API – Application Programming Interface ANSI – American National Standards Institute ASCII – American Standard Code for Information Interchange (128 car.) AJAX – Asynchronous JavaScript & XML CSS – Cascading Style Sheets DHTML – Dynamic HTML DOM – Document Object Model DTD – Document Type Definition HTML – HyperText Markup Language HTTP – HyperText Transfer Protocol ISO - International Standards Organization Mozilla - Fondation (global community for free and open Internet software)) MVC - Model View Controler RDF - Resource Description Framework REST - Representational State Transfer RIA - Rich Internet Application RSS - Really Simple Syndication SGML - Standard Generalized Markup Language SOAP - Simple Access Object Protocol SPRY - Extensions JS pour HTML - Adobe Lab. SVG - Scalable Vector Graphics UNICODE – World wide Code (16 bits) UTF-8 – Unicode version 8 bits URL / URI – Uniform Resource Locator / Identifier XML – eXtensible Markup Language XBL – XML Binding Language (Mozilla) XForms – XML Forms XHTML – HTML 4 en XML XLink – XML Linking Language XPath – XML Path Language XPointer – XML Pointer Language XSL - eXtensible Stylesheet Language XSLT – XSL Transformations XSL-FO – XSL Formatting Objects XSD – XML Schémas Définition Language XUL – XML User Language (Mozilla) W3C – World Wide Web Consortium Web2.0 – Web dit "sémantique" WHATWG - Web Hypertext Application Technology Working Group WSDL - Web Service Description Language 26/03/2017 Transparent 6 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Chap VI - DHTML Programmation Dynamique 26/03/2017 Chap VI - DHTML Programmation Dynamique DHTML DOM JavaScript JQuery [ Google - Labs ] Spry [ Adobe - Labs ] Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 7 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

DHTML - Dynamique HTML Une technique d’assemblage de 4 composants: 26/03/2017 DHTML - Dynamique HTML Une technique d’assemblage de 4 composants: HTML 4.0 Feuilles de styles séparées CSS-1 (Netscape 4.0 & I.E.4.0) CSS-2 (Netscape 6.0 & I.E.5.0 et +) XSL (Mozilla & Netscape 7.0 & I.E.6.0 et +) Un Langage de Script JavaScript 1.2 (Netscape 2.0), JScript (I.E.3.0) ECMAScript, VBScript (I.E.) PHP Document Object Model DOM niveau 1 DOM niveau 2 SAX Une ref Web: http://www.ruleweb.com/dhtml 26/03/2017 Transparent 8 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

DOM - Document Object Model 26/03/2017 DOM - Document Object Model "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." La spécification Dom définit une interface abstraite (type API Java) pour standardiser les fonctionnalités d’accès et de manipulation d’un document vu comme une arborescence («tree structure»). Création d’éléments Parcours et accès aux éléments Edition: déplacer, copier, supprimer, etc. Modification des attributs Dom (level 1/2/3): Core DOM , XML DOM, HTML DOM, Sax : une implémentation (light) évènementielle du Dom Doc Parseur XML Application Dom 26/03/2017 Transparent 9 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

DOM - "Parser" un document XML (1) 26/03/2017 DOM - "Parser" un document XML (1) Script en HTML sous I.E. : http://www.w3schools.com/dom <html> <head> <script type="text/javascript"> var xmlDoc function loadXML() { //load a xml file // code for IE if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.validateOnParse = "false" // "true" pour valider avec une DTD xmlDoc.load("note.xml"); getmessage() } // continue sur le suivant 26/03/2017 Transparent 10 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

DOM - "Parser" un document XML (2) 26/03/2017 DOM - "Parser" un document XML (2) Script en HTML sous Mozilla : http://www.w3schools.com/dom // suite du précédent // code for Mozilla, etc. else if (document.implementation && document.implementation.createDocument) { xmlDoc = document.implementation.createDocument("","",null); xmlDoc.load("note.xml"); xmlDoc.onload =getmessage(); } else { alert('Your browser cannot handle this script'); } } // fin de loadXML() // continue sur le suivant 26/03/2017 Transparent 11 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Exemple: viewNote.html 26/03/2017 DOM - Programmation Exemple: viewNote.html function getmessage() { document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].firstChild.nodeValue document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].firstChild.nodeValue document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue } // fin de getmessage() </script> </head> <body onload="loadXML()"> <div id="to" style="background-color:pink"> ……. </div> <div id="from" style="background-color:pink"> ……. </div> <div id="message" style="background-color:pink"> ……. </div> </body> </html> 26/03/2017 Transparent 12 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

DOM - Définition Element Property Description attributes 26/03/2017 DOM - Définition Element Property Description attributes Returns a NamedNodeMap that contains all attributes of a node childNodes Returns a node list that contains all children of a node firstChild Returns the first child node of a node lastChild Returns the last child node of a node nextSibling Returns the node immediately following a node. Two nodes are siblings if they have the same parent node nodeName Returns the name of the node (depending on the node type) nodeType Returns the node type as a number nodeValue Returns the value of the node ownerDocument Returns the Document object of a node (returns the root node of the document) parentNode Returns the parent node of a node previousSibling Returns the node immediately preceding a node. Two nodes are siblings if they have the same parent node tagName Returns the name of the element node 26/03/2017 Transparent 13 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

DOM - Définition Element Method Description appendChild(newnode) 26/03/2017 DOM - Définition Element Method Description appendChild(newnode) Appends a new child node to a node cloneNode(boolean) Creates an exact clone node of a node. If the boolean parameter is set to true, the cloned node clones all the child nodes of the original node as well getAttribute(attrname) Returns the value of the specified attributeget AttributeNode(attrname) Returns the specified attribute node as an Attr object getElementsByTagName(tag) Returns the specified node, and all its child nodes, as a node list hasChildNodes() Returns true if a node has child nodes. Otherwise it returns false insertBefore(newnode,refnode) Inserts a new node (newnode) before the existing node (refnode)normalize() Combines all subtree Text nodes into a single one removeAttribute(attrname) Removes the specified attribute's value removeAttributeNode(attriname) Removes the specified attribute node removeChild(nodename) Removes the specified node and returns it replaceChild(newnode,oldnode) Replaces the oldnode with the newnode, and returns the old node setAttribute(attrname,attrvalue) Sets the value of the named attribute setAttributeNode(attrname) Inserts the specified new attribute to the element 26/03/2017 Transparent 14 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

A chacun son DOM (1) Obj. Property Description IE F O W3C baseURI 26/03/2017 A chacun son DOM (1) Obj. Property Description IE F O W3C baseURI the absolute base URI of a node No 1 Yes childNodes a NodeList of child nodes for a node 5 9 firstChild the first child of a node lastChild the last child of a node localName the local part of the name of a node namespaceURI the namespace URI of a node nextSibling the node immediately following a node nodeName the name of a node, depending on its type nodeType the type of a node nodeValue Sets or returns the value of a node, depending on its type 26/03/2017 Transparent 15 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

A chacun son DOM (2) Obj. Property Description IE F O W3C 26/03/2017 A chacun son DOM (2) Obj. Property Description IE F O W3C ownerDocument the root element (document object) for a node 5 1 9 Yes parentNode the parent node of a node prefix Sets or returns the namespace prefix of a node No previousSibling the node immediately before a node textContent Sets or returns the textual content of a node and its descendants text the text of a node and its descendants. IE-only property xml the XML of a node and its descendants. IE-only property 26/03/2017 Transparent 16 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

A chacun son DOM (3) Method Description IE F O appendChild() 26/03/2017 A chacun son DOM (3) Method Description IE F O W3C appendChild() Adds a new child node to the end of the list of children of a node 5 1 9 Yes cloneNode() Clones a node compareDocumentPosition() Compares the document position of two nodes No getFeature(feature,version) a DOM object which implements the specialized APIs of the specified feature and version   getUserData(key) the object associated to a key on a this node. The object must first have been set to this node by calling setUserData with the same key hasAttributes() true if a node has any attributes, otherwise it returns false 26/03/2017 Transparent 17 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

A chacun son DOM (4) Method Description IE F O hasChildNodes() 26/03/2017 A chacun son DOM (4) Method Description IE F O W3C hasChildNodes() true if a node has any child nodes, otherwise it returns false 5 1 9 Yes insertBefore() Inserts a new child node before an existing child node isDefaultNamespace(URI) Returns whether the specified namespaceURI is the default   No isEqualNode() Checks if two nodes are equal isSameNode() Checks if two nodes are the same node isSupported(feature,version) Returns whether a specified feature is supported on a node lookupNamespaceURI() Returns the namespace URI matching a specified prefix 26/03/2017 Transparent 18 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

setUserData(key,data,handler) 26/03/2017 A chacun son DOM (5) Method Description IE F O W3C lookupPrefix() Returns the prefix matching a specified namespace URI No 1 Yes normalize() Puts all text nodes underneath a node (including attributes) into a "normal" form where only structure (e.g., elements, comments, processing instructions, CDATA sections, and entity references) separates Text nodes, i.e., there are neither adjacent Text nodes nor empty Text nodes 5 9 removeChild() Removes a child node replaceChild() Replaces a child node setUserData(key,data,handler) Associates an object to a key on a node   26/03/2017 Transparent 19 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

JS+DOM - «Décompiler» un arbre 26/03/2017 JS+DOM - «Décompiler» un arbre <script type="text/javascript"> var text="<note>"; text=text+"<to>Tove</to>"; text=text+"<from>Jani</from>"; text=text+"<heading>Reminder</heading>"; text=text+"<body>Don't forget me this weekend!</body>"; text=text+"</note>"; // code for IE if (window.ActiveXObject) { var doc=new ActiveXObject("Microsoft.XMLDOM"); doc.async="false"; doc.loadXML(text); } var x=doc.documentElement; for ( i=0; i<x.childNodes.length; i++ ) { document.write(x.childNodes[i].nodeName); document.write("="); document.write(x.childNodes[i].childNodes[0].nodeValue); document.write("<br />"); </script> // code for Mozilla, Firefox, Opera, etc. else { var parser=new DOMParser(); var doc=parser.parseFromString(text,"text/xml"); } 26/03/2017 Transparent 20 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

JS+DOM+SVG - Animation: "Clock" 26/03/2017 JS+DOM+SVG - Animation: "Clock" <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" > <script type="text/javascript"> <![CDATA[ function $(id) {return document.getElementById(id)}; var centre=$("small"); function ANIM() { // mise à l'heure a=new Date(); h=a.getHours()%12; m=a.getMinutes(); s=a.getSeconds(); m+=s/60; h+=m/60; // ring centre.setAttribute("fill", "grey"); if (s%5==0) {centre.setAttribute("fill", "green");} if (s%15==0) {centre.setAttribute("fill", "red");} // aiguilles $("heures").setAttribute("x2", Math.cos((h-3)/6*pi)*25+50); $("heures").setAttribute("y2", Math.sin((h-3)/6*pi)*25+50); $("minutes").setAttribute("x2", Math.cos((m-15)/30*pi)*35+50); $("minutes").setAttribute("y2", Math.sin((m-15)/30*pi)*35+50); $("secondes").setAttribute("x2", Math.cos((s-15)/30*pi)*45+50); $("secondes").setAttribute("y2", Math.sin((s-15)/30*pi)*45+50); setTimeout("ANIM()", 900); // <1000 = 1 sec } ANIM(); // appel de l\'animation ]]> </script> </svg> <!-- le décor de l'horloge --> . <g stroke="black"> <line x1="50" id="secondes" /> <line x1="50" id="minutes" /> <line x1="50" id="heures" /> </g> <g stroke="black" id="marques"> <circle cx="50" cy="50" r="9" id="small"/> Code Partiel 26/03/2017 Transparent 21 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

«Enjoliver» et Exécuter un source 26/03/2017 «Enjoliver» et Exécuter un source var mode = 'source'; function $(id) { return document.getElementById(id) } function show(id) { if(mode=="page") $("EXEC").innerHTML= $(id).value ; else $("EXEC").innerHTML=enjolive(id) ; <script type="text/javascript"> function enjolive (id) { var js=$(id).value; if (!js || !js.replace) return ""; //regexp html var balise = new RegExp("<(\\D[^><]*)>", "g"); var comC = /(\/\/.+|\/\*(.|\n)+?\*\/)/g; // forme C ou JS //regexp JS var sep = /([\]\[()}:]+)/g; var pv = /([^t])([;])/g; var keywordsJS = /\b(function|var|if|return|if|else|for|while|new|continue|switch|case|true|false)\b/g; var strings = /((["'])(?:.*?(?:[^\\](?:\\\\)*|[^\\]))?\2)/g; var numbers = /\b(-?(?:\d+|\d*\.\d+)\b)/g; //CSS var keywordsCSS = /\b(blue|red|green|cyan|yellow|none|inherit|justify|center|left|right|italic|bold|block)\b/g; // les remplacements ... js=js.replace(balise, "<bal><$1></bal>"); js=js.replace(styleO, "<sty>$1").replace(styleF, "$1</sty>") ; js=js.replace(comHO,'<comh><!--').replace(comHF,'--><\/comh>'); js=js.replace(keywordsCSS,'<mc>$1<\/mc>'); js=js.replace(strings,'<chaine>$1<\/chaine>'); js=js.replace(numbers,'<chaine>$1<\/chaine>'); js=js.replace(comC,'<comc>$1<\/comc>'); return "<pre>"+js+"</pre>"; }; // enjolive </script> Code Partiel 26/03/2017 Transparent 22 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

XPath + DOM avec JavaScript 26/03/2017 XPath + DOM avec JavaScript <html> <body> <script type="text/javascript"> //xpath une expression de chemin XPATH // I.E var xmlDoc=new ActiveXObject ("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.load ("cdcatalog.xml") ; firstFit=xmlDoc.selectNodes(xpath)[0]; // Mozillla xmlDoc=document.implementation.createDocument("","",null); xmlDoc.load("cdcatalog.xml") firstFit=document. evaluate(xpath, xmlDoc, null, XPathResult.ANY_TYPE,null)[0]; attValue=firstFit.getAttribute('someAtt'); //exemple </script> </body> </html> I.E. only Code Partiel 26/03/2017 Transparent 23 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

JS+DOM - Transformation XSL 26/03/2017 function transform (xml, xsl, id) { try { // navigateur basé sur Gecko if (window.XSLTProcessor) { var fragment; var xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); fragment = xsltProcessor.transformToFragment (xml, document); var target = document.getElementById(id); target.innerHTML = fragment.firstChild.innerHTML ; // pfz //target.appendChild(fragment); //orig //document.replaceChild(target, fragment); //orig // ActiveX pour Internet Explorer } else if (window.ActiveXObject) { xml.transformNode(xsl); } } catch (e) {return e;} JS+DOM - Transformation XSL <script type="text/javascript"> var XML= loadXML(xmlURL); var XSL= loadXML(xslURL); function theJobTe() { transform (XML, XSL, 'ICI'); .... } </script> Code Partiel 26/03/2017 Transparent 24 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

JavaScript + DOM : savoir-faire 26/03/2017 Browser du client Cookies Widgets & Interactivité Menus , Boutons Effets dynamiques "Drag & Drop" Animations Timing & Event Image map Objects String, Date, Array, Math, RegExp DHTML avec le DOM Objects: Window, Document, Location, Event Modification dynamique du style Modification dynamique du document Transformation XSL Applications Enjoliveur de code source Diaporamas sur le Web W3Schools - JS Tutorial Cours de JavaScript Free JS Examples JavaScript + DOM : savoir-faire compatible avec HTML, XHTML, CSS XML, et Dialectes XSLT, XUL toutjavascript.com/ javascript sur commentcamarche.net/ Sources on javascript.com/ 26/03/2017 Transparent 25 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Langages de Script http://www.webreference.com/ 26/03/2017 Langages de Script Où trouver des scripts sur le Web? http://www.webreference.com/ DHTML Lab Dynamic HTML Tutorials, DHTML Scripts, Programming, Tools, Code, and Examples.html http://javascript.internet.com/ JavaScript Source Free JavaScripts, Tutorials, Example Code, Reference, Resources, And Help.html Un langage de script parmi d’autres JavaScript 1.3 à 1.5, 1.6, 1.7 (Mozilla) JScript , VBScript (I.E.) norme ECMA: JavaScript 1.5 (ECMAScript) & JScript 5.5 ASP, PHP, côté serveur 26/03/2017 Transparent 26 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Chap VI - Spry Spry [ Adobe - Labs ] Objectif pédagogique 26/03/2017 Chap VI - Spry Spry [ Adobe - Labs ] Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 27 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Spry: framework JS pour dHTML 26/03/2017 Spry: framework JS pour dHTML avec une assistance Librairie (libre) JS par Adobe Labs Conception Création assistée de Widgets Effets dynamiques avec JS Définition de "Data Sets" à partir XML/RDF Génération de contenus HTML Gestion des Interfaces/HTTP Extensible ("Open") Implémentation (X)HTML + "Include" JS DOM XML CSS HTTP + AJAX intégration complète avec DW CS compatible avec HTML, XHTML, CSS XML, et Dialectes XSLT, XUL sur le Web http://labs.adobe.com/technologies/spry/ http://labs.adobe.com/wiki/index.php/Spry http://www.adobe.com/devnet/spry/ http://labs.adobe.com/technologies/spry/demos/index.html 26/03/2017 Transparent 28 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Spry - Schéma & Utilisation 26/03/2017 Spry - Schéma & Utilisation versions Spry 1.4 1.5 1.6 <html> <head> <style> ….. </style> </head> <body> <div id="TP1" class="TabbedPanels"> <ul class="TabbedPanelsTabGroup"> <li class="TabbedPanelsTab" tabindex="0">cours 1</li> <li class="TabbedPanelsTab" >cours 2</li> <li class="TabbedPanelsTab" >cours 3</li> </ul></div> </body></html> <head> <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"> </script><script src="SpryAssets/SpryMenuBar.js"… /> </script><script src="SpryAssets/xpath.js"… /> </script><script src="SpryAssets/SpryData.js" … /> <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" … /> <link href="SpryAssets/SpryMenuBarHorizontal.css" … /> <link href="SpryAssets/SpryMenuBarVertical.css"… /> </head> Dom interpréteur JS Code Partiel HTML généré 26/03/2017 Transparent 29 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Spry - Génération de XML DATA SETs 26/03/2017 Spry - Génération de XML DATA SETs <html> <head> <script type="text/javascript"> var dsBib = new Spry.Data.XMLDataSet("bib.xml", "Bib/Article"); dsBib .setColumnType("Date", "date"); </script> </head> <body> <div spry:region="dsBib"> <table> <tr> <th>Titre</th> <th>Date</th> <th spry:sort="@ref">ref</th> </tr> <tr spry:repeat="dsBib" spry:setrow="dsBIb"> <td>{Title}</td> <td>{Date}</td> <td>{@ref}</td> </tr> </table> </body></html> <head> </script><script src="SpryAssets/xpath.js"… /> </script><script src="SpryAssets/SpryData.js" … /> </head> XPath Code Partiel "flatening" mis à plat Title Date Edit @ref JS Object 26/03/2017 Transparent 30 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Spry - Galerie Photo avec XML DATA SETs 26/03/2017 Spry - Galerie Photo avec XML DATA SETs <html> <head> <script type="text/javascript"> var dsAlbum = new Spry.Data.XMLDataSet("photos.xml", "gallery"); </script> </head> <body> <div spry:region="dsAlbum"> <table> <tr> <th>Titre</th> <th>Lieu</th> <th spry:sort="@ref">ref</th> </tr> <tr spry:repeat="dsAlbum" spry:setrow="dsAlbum"> <td>{Title}</td> <td>{Location}</td> <td>{@ref}</td> </tr> </table> </body></html> </script><script src="SpryAssets/xpath.js"… /> </script><script src="SpryAssets/SpryData.js" … /> XML metadata "flatening" mis à plat Code Partiel Title Lieu @ref JS Object 26/03/2017 Transparent 31 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

R.I.A. - XML as metadatas & SPRY 26/03/2017 R.I.A. - XML as metadatas & SPRY Rich Client XML rdf XML rdf HTML SPRY CSS, XSL JS DHTML AJAX DHTML 26/03/2017 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Spry: Démos 26/03/2017 Transparent 33 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Chap VI - JQuery JQuery Objectif pédagogique 26/03/2017 Chap VI - JQuery JQuery Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 34 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

JQuery: a framework for DOM, AJAX, CSS, etc. 26/03/2017 JQuery: a framework for DOM, AJAX, CSS, etc. Fonctions Parcours et modification du DOM (y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath) ; Événements ; Effets et animations ; Manipulations des feuilles de style en cascade (ajout/suppression des classes, d'attributs…) ; AJAX ; Plugins ; Utilitaires (version du navigateur…). "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript." 26/03/2017 Transparent 35 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

JQuery: Références Web 26/03/2017 JQuery: Références Web Liens externes JQuery in 15 minutes (en) Site officiel (en) Tutoriels jQuery (en) API de jQuery JQuery UI, un ensembles de plugins permettant la réalisation d'interfaces graphiques complexes // un exemple de "onclick" avec jQuery : $(document).ready(function(event) { // Quand le document est chargé on exécute une fonction $(".Hello").click(function() { //Lorsque l'on clique sur un élément ayant la classe "Hello" alert ("Hello"); // ou autre action event.preventDefault(); // si on veut ? }); //On ferme la fonction du onclick }); //On ferme le document.ready 26/03/2017 Transparent 36 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

AJAX avec Jquery $(document).ready(function() { 26/03/2017 AJAX avec Jquery $(document).ready(function() { //Quand le document est chargé on exécute une fonction $(".load_page_on_click").click(function() { //Lorsque l'on clique sur un élément ayant la classe "load_page_on_click" on exécute la fonction suivante var text_dans_input = $("input[name=email]").val(); //Variable contenant la valeur d'un input ayant pour name "email" $.ajax({ //On débute ajax async: "true", //Asynchrone "true" pour vrai "false" pour faux type: "GET", // Type, "GET" ou "POST" url: "mapage.php", //Url de la page à charger data: "email=" + encodeURIComponent(email) + "&action=get_email", //Données s'il y en a dans ce cas oui(l'email et une action) error: function(errorData) { $("#error").html(errorData); }, //S'il y a une erreur on écrit quelque chose success: function(data) { $("#container").html(data); $("#error").append("Contenu chargé"); } //Si c'est bon }) //On ferme l'ajax }); //On ferme la fonction du onclick }); //On ferme le document.ready 26/03/2017 Transparent 37 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi