La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Lexique Langages & Documents Réfs Paul Franchi SI 4 2011-12 Techs Sommaire...... 13/01/2014 Transparent - 1 Chap VI - DHTML Programmation Dynamique Spry.

Présentations similaires


Présentation au sujet: "Lexique Langages & Documents Réfs Paul Franchi SI 4 2011-12 Techs Sommaire...... 13/01/2014 Transparent - 1 Chap VI - DHTML Programmation Dynamique Spry."— Transcription de la présentation:

1 Lexique Langages & Documents Réfs Paul Franchi SI Techs Sommaire /01/2014 Transparent - 1 Chap VI - DHTML Programmation Dynamique Spry JQuery

2 SommaireLexique Réfs Techs Transparent 2 13/01/2014 Sommaire du Cours n Chap I - Documents: Historique, Modèles, Standards et Références Chap I n Chap II - HTML: voir le cours CIP1-CMD & HTML5 Chap IIvoir le cours CIP1-CMD n Chap III - XML: "eXtensible Markup Language", les Bases Chap III n Chap IV - DTD: "Document Type Definition" Chap IV n Chap V - CSS: Feuilles de Styles en Cascades& CSS3 Chap V n Chap VI - DOM, DHTML: "Domain Object Model "& Programmation Dynamique en HTML & SPRY & JQuery Chap VI n Chap VII - XSD: Schémas XML Chap VII n Chap VIII - XML "Advanced" Processeurs et Dialectes: XPath, Xlink Chap VIII n Chap IX - XSLT: Transformations XML Chap IX n Chap X - RDF: "Resource Description Framework" Chap X n Chap IX - AJAX: "Asynchronous JavaScript And XML" Chap IX Savoir-Faire: Know Hows Know Hows HTMLHTML XHTML CSS JS+DOM MATHML XPATH XLINK XSLTXHTMLCSS JS+DOMMATHMLXPATHXLINKXSLT n Etat de l'art: HTML5HTML5 CSS3 SPRY SVG RDF AJAX XULCSS3 SPRYSVGRDFAJAXXUL

3 SommaireLexique Réfs Techs Transparent 3 13/01/2014 n Web EPU courses (in French) Création & Manipulltion de Document Introduction to Internet Langages & Documents W3C tutorial : Mozilla Development Center W3C, Web Developer's Bookmarks n Biblio: many issues at EPU's lib Some Références

4 SommaireLexique Réfs Techs Transparent 4 13/01/2014 Documentation et Manuels n Documents du web liste de balises HTML code des couleurs RVB code HTML des caractères ISO liste des extensions de fichiers (formats) liste des extensions de fichiers (formats) Expressions Rationnelles n Manuels. Expressions régulières sous Emacs Expressions régulières sous Emacs Recherche et remplacement sous Emacs Recherche et remplacement sous Emacs compléments Emacs grep sous Unix n Tutoriaux du Web W3C : CSS Play : Zen Garden : CSS in10 steps : training/css/positioning/ training/css/positioning/ 10 steps to better CSS: r_css/ r_css/

5 SommaireLexique Réfs Techs Transparent 5 13/01/2014 Références Web

6 SommaireLexique Réfs Techs Transparent 6 13/01/2014 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 Lexique

7 Langages & Documents Réfs Paul Franchi SI Techs Sommaire /01/2014 Transparent - 7 Chap VI - DHTML Programmation Dynamique DHTML DOM JavaScript DOM JQuery [ Google - Labs ] Spry [ Adobe - Labs ] DHTML DOM JavaScript DOM JQuery [ Google - Labs ] Spry [ Adobe - Labs ]

8 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 8 13/01/2014 DHTML - Dynamique HTML Une technique dassemblage de 4 composants: n HTML 4.0 n 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 +) n Un Langage de Script JavaScript 1.2 (Netscape 2.0), JScript (I.E.3.0) ECMAScript, VBScript (I.E.) PHP n Document Object Model DOM niveau 1 DOM niveau 2 SAX Une ref Web:

9 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 9 13/01/2014 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 daccès et de manipulation dun 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 Dom Application

10 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 10 13/01/2014 DOM - "Parser" un document XML (1) 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 n Script en HTML sous I.E. :

11 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 11 13/01/2014 DOM - "Parser" un document XML (2) / / 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 n Script en HTML sous Mozilla :

12 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 12 13/01/2014 DOM - Programmation 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() ……. n Exemple: viewNote.htmlviewNote.html

13 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 13 13/01/2014 DOM - Définition Element PropertyDescription attributesReturns a NamedNodeMap that contains all attributes of a node childNodesReturns a node list that contains all children of a node firstChildReturns the first child node of a node lastChildReturns the last child node of a node nextSiblingReturns the node immediately following a node. Two nodes are siblings if they have the same parent node nodeNameReturns the name of the node (depending on the node type) nodeTypeReturns the node type as a number nodeValueReturns the value of the node ownerDocumentReturns the Document object of a node (returns the root node of the document) parentNodeReturns the parent node of a node previousSiblingReturns the node immediately preceding a node. Two nodes are siblings if they have the same parent node tagNameReturns the name of the element node

14 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 14 13/01/2014 DOM - Définition Element MethodDescription 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

15 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 15 13/01/2014 A chacun son DOM (1) Obj. PropertyDescriptionIEFOW3C baseURIthe absolute base URI of a nodeNo1 Yes childNodesa NodeList of child nodes for a node519Yes firstChildthe first child of a node519Yes lastChildthe last child of a node519Yes localNamethe local part of the name of a nodeNo19Yes namespaceURIthe namespace URI of a nodeNo19Yes nextSiblingthe node immediately following a node 519Yes nodeNamethe name of a node, depending on its type 519Yes nodeTypethe type of a node519Yes nodeValueSets or returns the value of a node, depending on its type 519Yes

16 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 16 13/01/2014 A chacun son DOM (2) Obj. PropertyDescriptionIEFOW3C ownerDocumentthe root element (document object) for a node 519Yes parentNodethe parent node of a node519Yes prefixSets or returns the namespace prefix of a node No19Yes previousSiblingthe node immediately before a node519Yes textContentSets or returns the textual content of a node and its descendants No1 Yes textthe text of a node and its descendants. IE-only property 5No xmlthe XML of a node and its descendants. IE-only property 5No

17 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 17 13/01/2014 A chacun son DOM (3) MethodDescriptionIEFO W3C appendChild()Adds a new child node to the end of the list of children of a node 519Yes cloneNode()Clones a node519Yes compareDocumentPo sition() Compares the document position of two nodes No1 Yes getFeature(feature,ver sion) a DOM object which implements the specialized APIs of the specified feature and version NoYes 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 NoYes hasAttributes()true if a node has any attributes, otherwise it returns false No19Yes

18 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 18 13/01/2014 A chacun son DOM (4) MethodDescriptionIEFO W3C hasChildNodes()true if a node has any child nodes, otherwise it returns false 519Yes insertBefore()Inserts a new child node before an existing child node 519Yes isDefaultNamespace( URI) Returns whether the specified namespaceURI is the default NoYes isEqualNode()Checks if two nodes are equalNo Yes isSameNode()Checks if two nodes are the same node No1 Yes isSupported(feature,v ersion) Returns whether a specified feature is supported on a node 9Yes lookupNamespaceURI () Returns the namespace URI matching a specified prefix No1 Yes

19 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 19 13/01/2014 A chacun son DOM (5) MethodDescriptionIEFO W3C lookupPrefix()Returns the prefix matching a specified namespace URI No1 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 519Yes removeChild()Removes a child node519Yes replaceChild()Replaces a child node519Yes setUserData(key,data, handler) Associates an object to a key on a node NoYes

20 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 20 13/01/2014 JS+DOM - «Décompiler» un arbre var text=" "; text=text+" Tove "; text=text+" Jani "; text=text+" Reminder "; text=text+" Don't forget me this weekend! "; text=text+" "; // 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

21 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 21 13/01/2014 JS+DOM+SVG - Animation: "Clock" 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 .

22 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 22 13/01/2014 «Enjoliver» et Exécuter un source function enjolive (id){ var js=$(id).value; if (!js || !js.replace) return ""; //regexp html var balise = new RegExp(" ", "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, " <$1> "); js=js.replace(styleO, " $1").replace(styleF, "$1 ") ; js=js.replace(comHO,' <!--').replace(comHF,'--> '); js=js.replace(keywordsCSS,' $1 '); js=js.replace(strings,' $1 '); js=js.replace(numbers,' $1 '); js=js.replace(comC,' $1 '); return " "+js+" "; }; // enjolive var mode = 'source'; function $(id) { return document.getElementById(id) } function show(id) { if(mode=="page") $("EXEC").innerHTML= $(id).value ; else $("EXEC").innerHTML=enjolive(id) ; }

23 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 23 13/01/2014 XPath + DOM avec 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

24 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 24 13/01/2014 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;} } var XML= loadXML(xmlURL); var XSL= loadXML(xslURL); function theJobTe() { transform (XML, XSL, 'ICI');.... } JS+DOM - Transformation XSL

25 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 25 13/01/2014 n Browser du client n Cookies n Widgets & Interactivité Menus, Boutons Effets dynamiques "Drag & Drop" n Animations Timing & Event n Image map n Objects String, Date, Array, Math, RegExp n DHTML avec le DOM Objects: Window, Document, Location, Event Modification dynamique du style Modification dynamique du document Transformation XSL n Applications Enjoliveur de code source Diaporamas n sur le Web W3Schools - JS Tutorial Cours de JavaScript Free JS Examples toutjavascript.com/ javascript sur commentcamarche.net/ Sources on javascript.com/ JavaScript + DOM : savoir-faire

26 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 26 13/01/2014 Langages de Script Où trouver des scripts sur le Web? DHTML Lab Dynamic HTML Tutorials, DHTML Scripts, Programming, Tools, Code, and Examples.html JavaScript Source Free JavaScripts, Tutorials, Example Code, Reference, Resources, And Help.html Un langage de script parmi dautres 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

27 Lexique Langages & Documents Réfs Paul Franchi SI Techs Sommaire /01/2014 Transparent - 27 Chap VI - Spry Spry [ Adobe - Labs ]

28 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 28 13/01/2014 Spry: framework JS pour dHTML n Librairie (libre) JS par Adobe Labs n 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") n Implémentation (X)HTML + "Include" JS DOM XML CSS HTTP + AJAX intégration complète avec DW CS n sur le Web ies/spry/ ies/spry/ pry/ pry/ ies/spry/demos/index.html ies/spry/demos/index.html

29 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 29 13/01/2014 Spry - Schéma & Utilisation ….. cours 1 cours 2 cours 3 HTML généré interpréteur JS Dom

30 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 30 13/01/2014 Spry - Génération de XML DATA SETs var dsBib = new Spry.Data.XMLDataSet("bib.xml", "Bib/Article"); dsBib.setColumnType("Date", "date"); Titre Date ref {Title} {Date} mis à plat "flatening"

31 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 31 13/01/2014 Spry - Galerie Photo avec XML DATA SETs var dsAlbum = new Spry.Data.XMLDataSet("photos.xml", "gallery"); Titre Lieu ref {Title} {Location} mis à plat "flatening" XML metadata

32 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire JS 13/01/2014 R.I.A. - XML as metadatas & SPRY CSS, XSL HTML DHTML AJAX SPRY Rich Client XML rdf DHTML XML rdf

33 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 33 13/01/2014 Spry: Démos

34 Lexique Langages & Documents Réfs Paul Franchi SI Techs Sommaire /01/2014 Transparent - 34 Chap VI - JQuery JQuery

35 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 35 13/01/2014 JQuery: a framework for DOM, AJAX, CSS, etc. n Fonctions Parcours et modification du DOM (y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath) ; DOM Événements ; Effets et animations ; Manipulations des feuilles de style en cascade (ajout/suppression des classes, d'attributs…) ;feuilles de style en cascade AJAX ; AJAX Plugins ; 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."

36 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 36 13/01/2014 JQuery: Références Web n Liens externes JQuery in 15 minutes (en) Site officielSite officiel (en) Tutoriels jQueryTutoriels jQuery (en) API de jQueryAPI de jQuery JQuery UI, un ensembles de plugins permettant la réalisation d'interfaces graphiques complexes 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

37 Lexique Réfs Techs DHTML - Dynamique HTML DHTML - Dynamique HTML DOM - Document Object Model DOM - Document Object Model JS+DOM - «Décompiler» JS+DOM - «Décompiler» XPath + DOM avec JavaScript XPath + DOM avec JavaScript DOM - Programmation DOM - Programmation A chacun son DOM (1) A chacun son DOM (1) JS+DOM - Transformation XSL JS+DOM - Transformation XSL Chap VI - JQuery DOM - "Parser" un document XML DOM - "Parser" un document XML Spry: framework JS pour dHTML Spry: framework JS pour dHTML yy Sommaire Transparent 37 13/01/2014 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= ]").val(); //Variable contenant la valeur d'un input ayant pour name " " $.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: " =" + encodeURIComponent( ) + "&action=get_ ", //Données s'il y en a dans ce cas oui(l' 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


Télécharger ppt "Lexique Langages & Documents Réfs Paul Franchi SI 4 2011-12 Techs Sommaire...... 13/01/2014 Transparent - 1 Chap VI - DHTML Programmation Dynamique Spry."

Présentations similaires


Annonces Google