1 / 38

06/09/2014

Chap VI - DHTML Programmation Dynamique. Spry. DOM XML. JQuery. 06/09/2014. Transparent - 1. 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

reece
Download Presentation

06/09/2014

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chap VI - DHTML Programmation Dynamique Spry DOM XML JQuery 06/09/2014 Transparent - 1

  2. 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 HTMLXHTMLCSS JS+DOMMATHMLXPATHXLINKXSLT Etat de l'art: HTML5CSS3 SPRYSVGRDFAJAXXUL 06/09/2014 Transparent 2

  3. 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 Some Références 06/09/2014 Transparent 3

  4. 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/ 06/09/2014 Transparent 4

  5. Références Web 06/09/2014 Transparent 5

  6. 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 – DynamicHTML 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 Lexique 06/09/2014 Transparent 6

  7. Chap VI - DHTML Programmation Dynamique DHTMLDOM JavaScript JQuery [ Google - Labs ] Spry [ Adobe - Labs ] 06/09/2014 Transparent - 7

  8. 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 06/09/2014 Transparent 8

  9. 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 (typeAPIJava) 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 W3SChools XML DOM Doc Parseur XML Application Dom 06/09/2014 Transparent 9

  10. Tree Structure of an XML Document 7 types of Nodes The root node Element nodes Text nodes Attribute nodes Comment nodes Processing instruction nodes Namespace nodes from XMLinanutshell - CDATA, DOCTYPE, are NOT in the tree - attributes are NOT children - Namespaces are not selectable 06/09/2014 Transparent 10

  11. 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 06/09/2014 Transparent 11

  12. 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 06/09/2014 Transparent 12

  13. 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> 06/09/2014 Transparent 13

  14. DOM - Définition 06/09/2014 Transparent 14

  15. DOM - Définition 06/09/2014 Transparent 15

  16. A chacun son DOM (1) 06/09/2014 Transparent 16

  17. A chacun son DOM (2) 06/09/2014 Transparent 17

  18. A chacun son DOM (3) 06/09/2014 Transparent 18

  19. A chacun son DOM (4) 06/09/2014 Transparent 19

  20. A chacun son DOM (5) 06/09/2014 Transparent 20

  21. 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"); } 06/09/2014 Transparent 21

  22. 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"/> </g> Code Partiel 06/09/2014 Transparent 22

  23. «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>&lt;$1&gt;</bal>"); js=js.replace(styleO, "<sty>$1").replace(styleF, "$1</sty>") ; js=js.replace(comHO,'<comh>&lt;!--').replace(comHF,'--&gt;<\/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 06/09/2014 Transparent 23

  24. 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.async=false; 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 06/09/2014 Transparent 24

  25. JS+DOM - Transformation XSL 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) { var target = document.getElementById(id); target.innerHTML = xml.transformNode(xsl); } } catch (e) {return e;} } <script type="text/javascript"> var XML= loadXML(xmlURL); var XSL= loadXML(xslURL); function theJobTe() { transform (XML, XSL, 'ICI'); .... } </script> Code Partiel 06/09/2014 Transparent 25

  26. JavaScript + DOM : savoir-faire compatibleavec HTML, XHTML, CSS XML, etDialectes XSLT, XUL • toutjavascript.com/ • javascript sur commentcamarche.net/ • Sources on javascript.com/ 06/09/2014 Transparent 26 • 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

  27. 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 06/09/2014 Transparent 27

  28. Chap VI - Spry Spry [ Adobe - Labs ] 06/09/2014 Transparent - 28

  29. Spry: framework JS pour dHTML avec une assistance compatibleavec HTML, XHTML, CSS XML, etDialectes 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 06/09/2014 Transparent 29 • 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

  30. 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é 06/09/2014 Transparent 30

  31. 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 mis à plat "flatening" JS Object 06/09/2014 Transparent 31

  32. 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> <thspry: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" … /> mis à plat "flatening" XML metadata Code Partiel JS Object 06/09/2014 Transparent 32

  33. R.I.A. - XML as metadatas & SPRY Rich Client XML rdf XML rdf HTML SPRY CSS, XSL JS DHTML AJAX DHTML 06/09/2014

  34. Spry: Démos 06/09/2014 Transparent 34

  35. Chap VI - JQuery JQuery 06/09/2014 Transparent - 35

  36. 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." 06/09/2014 Transparent 36

  37. 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 06/09/2014 Transparent 37

  38. 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 06/09/2014 Transparent 38

More Related