Lexique Sommaire Langages Documents Réfs Techs

Lexique Sommaire . Langages & Documents Réfs Techs Chap VI - DHTML. Programmation Dynamique . . . Spry DOM XML JQuery Paul Franchi SI 4 2014 -15 . 18/03/2018 Transparent - 1

Lexique Sommaire du Cours . Réfs n n Chap IV - DTD: "Document Type Definition" n Chap V - CSS: Feuilles de Styles en Cascades& CSS 3 n 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 n Chap IX - XSLT: Transformations XML n Chap X - RDF: "Resource Description Framework" n Chap IX - AJAX: "Asynchronous Java. Script And XML" n . n n . Chap III - XML: "e. Xtensible Markup Language", les Bases n . Chap II - HTML: voir le cours CIP 1 -CMD & HTML 5 n . Chap I - Documents: Historique, Modèles, Standards et Références Savoir-Faire: Know Hows HTML n . XHTML CSS JS+DOM Techs MATHML XPATH XLINK XSLT Etat de l'art: HTML 5 CSS 3 SPRY SVG RDF AJAX 18/03/2018 XUL Transparent 2

Lexique Sommaire Some Références. n . . Réfs Web = EPU courses (in French) w Création & Manipulltion de Document http: //www. polytech. unice. fr/~pfz/cmd. html w Introduction to Internet http: //rainbow. i 3 s. unice. fr/iai/ w Langages & Documents http: www. polytech. unice; fr/~pfz/document. html Techs = W 3 C tutorial : http: //www. w 3 schools. com/ = Mozilla Development Center http: //developer. mozilla. org/en/docs/Main_Page . = W 3 C, http: //www. w 3. org/ = Web Developer's Bookmarks http: //antriksh. com/resources/ . n Biblio: = many issues at EPU's lib . 18/03/2018 Transparent 3

Lexique Sommaire Documentation et Manuels . n Techs Documents du web = liste de balises HTML = code des couleurs RVB . n = code HTML des caractères ISO . = liste des extensions de fichiers (formats) = Expressions Rationnelles . n . Réfs Manuels. = Expressions régulières sous Emacs = Recherche et remplacement sous Emacs Tutoriaux du Web = W 3 C : http: //www. w 3 schools. com/ = CSS Play : http: //www. cssplay. co. uk/index = Zen Garden : http: //www. csszengarden. com/tr/francais/ = CSS in 10 steps : http: //www. barelyfitz. com/screencast/htmltraining/css/positioning/ = 10 steps to better CSS: http: //shapeshed. com/journal/10_steps_to_bette r_css/ = compléments Emacs . = grep sous Unix 18/03/2018 Transparent 4

Lexique Sommaire . Références Web Réfs Techs . . . 18/03/2018 Transparent 5

Lexique. . . = = = = = = = = = = API – Application Programming Interface ANSI – American National Standards Institute ASCII – American Standard Code for Information Interchange (128 car. ) AJAX – Asynchronous Java. Script & XML CSS – Cascading Style Sheets DHTML – Dynamic HTML DOM – Document Object Model DTD – Document Type Definition HTML – Hyper. Text Markup Language HTTP – Hyper. Text 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 – e. Xtensible 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 - e. Xtensible Stylesheet Language XSLT – XSL Transformations XSL-FO – XSL Formatting Objects XSD – XML Schémas Définition Language XUL – XML User Language (Mozilla) W 3 C – World Wide Web Consortium Web 2. 0 – Web dit "sémantique" WHATWG - Web Hypertext Application Technology Working Group WSDL - Web Service Description Language 18/03/2018 Lexique Sommaire Réfs Techs Transparent 6

Lexique Sommaire . Langages & Documents Réfs Techs Chap VI - DHTML . Programmation Dynamique . DHTML . DOM . Java. Script Paul Franchi SI 4 2014 -15 JQuery [ Google - Labs ] Spry [ Adobe - Labs ]. 18/03/2018 Transparent - 7

y ØDHTML Dynamique HTML y Lexique Sommaire DHTML - Dynamique HTML Une technique d’assemblage de 4 composants: 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 +) ØDOM - "Parser" un document XML ØDOM - Programmation ØA chacun son DOM (1) n ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML Chap VI - JQuery Un Langage de Script = Java. Script 1. 2 (Netscape 2. 0), JScript (I. E. 3. 0) = ECMAScript, VBScript (I. E. ) = PHP ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script Techs HTML 4. 0 n Ø DOM - Document Object Model Réfs n Document Object Model = DOM niveau 1 = DOM niveau 2 = SAX Une ref Web: http: //www. ruleweb. com/dhtml 18/03/2018 Transparent 8

y Lexique Sommaire y DOM - Document Object Model Réfs ØDHTML "The W 3 C Document Object Model (DOM) is a platform and language-neutral Techs Dynamique HTML interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. " Ø DOM - Document Object Model La spécification Dom définit une interface abstraite (type API Java) pour standardiser les fonctionnalités d’accès et de manipulation ØDOM - "Parser" d’un document vu comme une arborescence ( «tree structure» ). un document XML = = ØDOM - Programmation Création d’éléments Parcours et accès aux éléments Edition: déplacer, copier, supprimer, etc. Modification des attributs ØA chacun son DOM (1) ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML Doc Parseur XML Dom Application Dom (level 1/2/3): Core DOM , XML DOM, HTML DOM, Sax : une implémentation (light) évènementielle du Dom Chap VI - JQuery 18/03/2018 Transparent 9

y y Tree Structure of an XML Document Lexique Sommaire Réfs ØDHTML Dynamique HTML Ø DOM - Document Object Model ØDOM - "Parser" un document XML ØDOM - Programmation n 7 types of Nodes = The root node = Element nodes = Text nodes = Attribute nodes = Comment nodes = Processing instruction nodes = Namespace nodes ØA chacun son DOM (1) Techs - CDATA, DOCTYPE, are NOT in the tree - attributes are NOT children - Namespaces are not selectable ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML Chap VI - JQuery 18/03/2018 Transparent 10

y ØDHTML Dynamique HTML n Ø DOM - Document Object Model ØDOM - "Parser" un document XML ØDOM - Programmation ØA chacun son DOM (1) ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML Lexique Sommaire y DOM - "Parser" un document XML (1) Réfs Script en HTML sous I. E. : Techs

y y DOM - Définition Lexique Sommaire Réfs Element Property ØDHTML Dynamique HTML attributes Ø DOM - Document child. Nodes Object Model first. Child ØDOM - "Parser" un document XML last. Child ØDOM - Programmation next. Sibling node. Name ØA chacun son DOM (1) Description Returns a Named. Node. Map that contains all attributes of a node Returns a node list that contains all children of a node Returns the first child node of a node Returns the last child node of a node Returns the node immediately following a node. Two nodes are siblings if they have the same parent node Returns the name of the node (depending on the node type) node. Type ØJS+DOM - «Décompiler» Techs Returns the node type as a number node. Value Returns the value of the node ØXPath + DOM avec owner. Document Java. Script Returns the Document object of a node (returns the root node of the document) ØJS+DOM parent. Node Transformation XSL Returns the parent node of a node previous. Sibling Returns the node immediately preceding a node. Two nodes are siblings if they have the same parent node tag. Name Returns the name of the element node ØSpry: framework JS pour d. HTML Chap VI - JQuery 18/03/2018 Transparent 14

y y DOM - Définition Lexique Sommaire Réfs Element Method ØDHTML Dynamique HTML append. Child(newnode) Description Techs Appends a new child node to a node Ø DOM - Document clone. Node(boolean) Object Model 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 get. Attribute(attrname) ØDOM - "Parser" un document XMLAttribute. Node(attrname) Returns the value of the specified attributeget ØDOM - Programmation get. Elements. By. Tag. Name(tag) Returns the specified node, and all its child nodes, as a node list has. Child. Nodes() Returns true if a node has child nodes. Otherwise it returns false ØA chacun son DOM insert. Before(newnode, refnode) (1) ØJS+DOM - «Décompiler» Returns the specified attribute node as an Attr object Inserts a new node (newnode) before the existing node (refnode)normalize() Combines all subtree Text nodes into a single one remove. Attribute(attrname) Removes the specified attribute's value ØXPath + DOM avec remove. Attribute. Node(attriname) Java. Script Removes the specified attribute node remove. Child(nodename) ØJS+DOM Transformation XSL Removes the specified node and returns it ØSpry: framework JS set. Attribute(attrname, attrvalue) pour d. HTML Sets the value of the named attribute replace. Child(newnode, oldnode) Chap VI - JQuery set. Attribute. Node(attrname) Replaces the oldnode with the newnode, and returns the old node Inserts the specified new attribute to the element 18/03/2018 Transparent 15

y y Lexique Sommaire A chacun son DOM (1) ØDHTML Dynamique HTML Réfs Techs Obj. Property Description IE F O W 3 C No 1 No Yes Ø DOM - Document base. URI Object Model the absolute base URI of a node a Node. List of child nodes for a node 5 1 9 Yes ØDOM - "Parser" un document XML first. Child the first child of a node 5 1 9 Yes last. Child the last child of a node 5 1 9 Yes the local part of the name of a node No 1 9 Yes the namespace URI of a node No 1 9 Yes the node immediately following a node 5 1 9 Yes node. Name the name of a node, depending on its type 5 1 9 Yes node. Type the type of a node 5 1 9 Yes Sets or returns the value of a node, depending on its type 5 1 9 Yes child. Nodes ØDOM - Programmation local. Name ØA chacun son DOM (1) namespace. URI ØJS+DOM - «Décompiler» next. Sibling ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML node. Value Chap VI - JQuery 18/03/2018 Transparent 16

y y Lexique Sommaire A chacun son DOM (2) Réfs ØDHTML Dynamique HTML Obj. Ø DOM - Document Object Model Techs Property Description IE F O W 3 C 5 1 9 Yes Sets or returns the namespace prefix No of a node 1 9 Yes the node immediately before a node 1 9 Yes 1 No Yes owner. Document the root element (document object) for a node ØDOM - "Parser" un document XMLparent. Node ØDOM - Programmation prefix ØA chacun son DOM (1) previous. Sibling ØJS+DOM - «Décompiler» text. Content ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML the parent node of a node 5 Sets or returns the textual content of No a node and its descendants text the text of a node and its descendants. IE-only property 5 No No No xml the XML of a node and its descendants. IE-only property 5 No No No Chap VI - JQuery 18/03/2018 Transparent 17

y y ØDHTML Dynamique HTML Lexique Sommaire A chacun son DOM (3) Réfs Description append. Child() Adds a new child node to the end of the list of children of a node 5 1 9 Yes Clones a node 5 1 9 Yes Compares the document position of two nodes No 1 No Yes the object associated to a key on a this node. The object must first have been set to this node by calling set. User. Data with the same key No Yes Ø DOM - Document Object Model ØDOM - "Parser" un document XML clone. Node() compare. Document. Po sition() ØDOM - Programmation get. Feature(feature, ver a DOM object which implements sion) the specialized APIs of the specified feature and version ØA chacun son DOM (1) ØJS+DOM - «Décompiler» get. User. Data(key) ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL has. Attributes() ØSpry: framework JS pour d. HTML true if a node has any attributes, otherwise it returns false IE F No 1 O Techs W 3 C Method 9 Yes Chap VI - JQuery 18/03/2018 Transparent 18

y y Lexique Sommaire A chacun son DOM (4) Réfs ØDHTML Dynamique HTML Techs Method Ø DOM - Document Object Model has. Child. Nodes() Description IE F O W 3 C true if a node has any child nodes, 5 otherwise it returns false 1 9 Yes Inserts a new child node before an 5 existing child node 1 9 Yes Returns whether the specified namespace. URI is the default No Yes is. Equal. Node() Checks if two nodes are equal No No No Yes is. Same. Node() Checks if two nodes are the same No 1 node ØDOM - "Parser" insert. Before() un document XML ØDOM - Programmation is. Default. Namespace( URI) ØA chacun son DOM (1) ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script is. Supported(feature, ve Returns whether a specified rsion) feature is supported on a node lookup. Namespace. URI Returns the namespace URI () matching a specified prefix No 1 ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML No Yes 9 Yes No Yes Chap VI - JQuery 18/03/2018 Transparent 19

y y ØDHTML Dynamique HTML Lexique Sommaire A chacun son DOM (5) Method lookup. Prefix() Ø DOM - Document Object Model normalize() Description Returns the prefix matching a specified namespace URI IE F No 1 O Réfs W 3 C Techs No Yes Puts all text nodes underneath a 5 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 1 9 Yes remove. Child() Removes a child node 5 1 9 Yes replace. Child() Replaces a child node 5 1 9 Yes set. User. Data(key, data, Associates an object to a key on a handler) node Chap VI - JQuery No Yes ØDOM - "Parser" un document XML ØDOM - Programmation ØA chacun son DOM (1) ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML 18/03/2018 Transparent 20

Dynamique" src="https://present5.com/presentation/082cb244c6404eaed87061657363ea71/image-21.jpg" alt="y y JS+DOM - «Décompiler» un arbre Lexique Sommaire Réfs ØDHTML pour d. HTML Chap VI - JQuery 18/03/2018 Transparent 21

y y JS+DOM+SVG - Animation: "Clock" Lexique Sommaire Chap VI - JQuery 18/03/2018 Transparent 22

y y «Enjoliver» et Exécuter un source Lexique Sommaire Réfs var mode = 'source'; ØDHTML - Chap VI - JQuery 18/03/2018 Transparent 23

y y Lexique Sommaire XPath + DOM avec Java. Script ØDHTML Dynamique HTML Réfs Techs ØSpry: framework JS pour d. HTML Chap VI - JQuery 18/03/2018 Transparent 24

y ØDHTML Dynamique HTML Ø DOM - Document Object Model ØDOM - "Parser" un document XML ØDOM - Programmation ØA chacun son DOM (1) try { Réfs // navigateur basé sur Gecko JS+DOM - Transformation XSL Techs if (window. XSLTProcessor) { var fragment; var xslt. Processor = new XSLTProcessor(); xslt. Processor. import. Stylesheet(xsl); fragment = xslt. Processor. transform. To. Fragment (xml, document); ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML Lexique Sommaire y function transform (xml, xsl, id) { } catch (e) {return e; } } Chap VI - JQuery 18/03/2018 Transparent 25

y n n ØDHTML Dynamique HTML n Ø DOM - Document Object Model n ØDOM - "Parser" un document XML n ØDOM - Programmation n n ØA chacun son DOM (1) ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML Lexique Sommaire y n n Browser du client Cookies Widgets & Interactivité = Menus , Boutons = Effets dynamiques = "Drag & Drop" Animations = Timing & Event Image map Objects = String, Date, Array, Math, Reg. Exp 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 = toutjavascript. com/ = W 3 Schools - JS Tutorial = javascript sur commentcamarche. net/ = Cours de Java. Script = Sources on javascript. com/ = Free JS Examples Java. Script + DOM : savoir-faire Réfs Techs Chap VI - JQuery 18/03/2018 Transparent 26

y y Langages de Script Lexique Sommaire Réfs ØDHTML Dynamique HTML Où trouver des scripts sur le Web? Techs http: //www. webreference. com/ Ø DOM - Document Object Model ØDOM - "Parser" un document XML DHTML Lab Dynamic HTML Tutorials, DHTML Scripts, Programming, Tools, Code, and Examples. html http: //javascript. internet. com/ ØDOM - Programmation ØA chacun son DOM (1) Java. Script Source Free Java. Scripts, Tutorials, Example Code, Reference, Resources, And Help. html ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML Un langage de script parmi d’autres = Java. Script 1. 3 à 1. 5, 1. 6, 1. 7 (Mozilla) = JScript , VBScript (I. E. ) = norme ECMA: Java. Script 1. 5 (ECMAScript) & JScript 5. 5 = ASP, PHP, côté serveur Chap VI - JQuery 18/03/2018 Transparent 27

Lexique Sommaire . Langages & Documents Réfs Techs . Chap VI - Spry . . . Spry [ Adobe - Labs ] Paul Franchi SI 4 2014 -15 . 18/03/2018 Transparent - 28

y y Lexique Sommaire Spry: framework JS pour d. HTML ØDHTML Dynamique HTML Techs 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") Ø DOM - Document Object Model ØDOM - "Parser" un document XML ØDOM - Programmation ØA chacun son DOM (1) ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML Chap VI - JQuery Réfs n Implémentation = (X)HTML + "Include" JS = DOM = XML = CSS = HTTP + AJAX = intégration complète avec DW CS 18/03/2018 n sur le Web = http: //labs. adobe. com/technolog ies/spry/ = http: //labs. adobe. com/wiki/index. php/Spry = http: //www. adobe. com/devnet/s pry/ = http: //labs. adobe. com/technolog ies/spry/demos/index. html Transparent 29

y ØDHTML Dynamique HTML Ø DOM - Document Object Model ØDOM - "Parser" un document XML ØA chacun son DOM (1) ØJS+DOM - «Décompiler» ØXPath + DOM avec Java. Script ØJS+DOM Transformation XSL ØSpry: framework JS pour d. HTML Lexique Sommaire Spry - Schéma & Utilisation Réfs ØDOM - Programmation ØA chacun son DOM (1)