Diapositive 1

Transcript Diapositive 1

Lexique Sommaire
.
Langages & Documents
Réfs
Techs
Chap VI - DHTML
.
Programmation Dynamique
.
.
.
Spry
DOM XML
Paul Franchi
SI 4
2014-15
JQuery
.
17/07/2015
Transparent - 1
Lexique Sommaire
Sommaire du Cours
Réfs
.
.
.
.
.

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
Techs
MATHML XPATH XLINK XSLT
Etat de l'art:
HTML5
CSS3
SPRY
SVG
RDF AJAX
17/07/2015
XUL
Transparent 2
Lexique Sommaire
Some Références
.

.
.
Réfs
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
Techs
 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
.
17/07/2015
Transparent 3
Lexique Sommaire
Documentation et Manuels
.

Techs
Documents du web
 liste de balises HTML

 code des couleurs RVB
.
 liste des extensions de fichiers
(formats)
 Expressions Rationnelles
.

.
Manuels.
 Expressions régulières sous
Emacs
 Recherche et remplacement
sous Emacs
Tutoriaux du Web
 W3C : http://www.w3schools.com/
 code HTML des caractères ISO
.
Réfs
 CSS Play : http://www.cssplay.co.uk/index
 Zen Garden :
http://www.csszengarden.com/tr/francais/
 CSS in10 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
17/07/2015
Transparent 4
Lexique Sommaire
.
Références Web
Réfs
Techs
.
.
.
.
.
17/07/2015
Transparent 5
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
17/07/2015
Lexique Sommaire
Réfs
Techs
Transparent 6
Lexique Sommaire
.
Langages & Documents
Réfs
Techs
Chap VI - DHTML
.
Programmation Dynamique
.
DHTML
.
DOM
.
JavaScript
Paul Franchi
SI 4
2014-15
JQuery [ Google - Labs ]
Spry [ Adobe - Labs ]
.
17/07/2015
Transparent - 7
y
y
Lexique Sommaire
DHTML - Dynamique HTML
DHTML Dynamique HTML
Une technique d’assemblage de 4 composants:
 DOM Document Object
Model

HTML 4.0

Feuilles de styles séparées
DOM - "Parser"
un document XML

JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
Chap VI - JQuery
Un Langage de Script
 JavaScript 1.2 (Netscape 2.0), JScript (I.E.3.0)
 ECMAScript, VBScript (I.E.)
 PHP
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
Techs
 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 Programmation
A chacun son DOM
(1)
Réfs

Document Object Model
 DOM niveau 1
 DOM niveau 2
 SAX
Une ref Web: http://www.ruleweb.com/dhtml
17/07/2015
Transparent 8
y
Lexique Sommaire
y
DOM - Document Object Model
Réfs
DHTML "The W3C 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
JavaScript
Doc
Parseur
XML
Dom
Application
JS+DOM Transformation XSL
Dom (level 1/2/3): Core DOM , XML DOM, HTML DOM,
Spry: framework JS
pour dHTML
Sax : une implémentation (light) évènementielle du Dom
Chap VI - JQuery
17/07/2015
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

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
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
Chap VI - JQuery
17/07/2015
Transparent 10
y
Lexique Sommaire
y
DOM - "Parser" un document XML (1)
DHTML Dynamique HTML

 DOM Document Object
Model
DOM - "Parser"
un document XML
DOM Programmation
A chacun son DOM
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
Réfs
Script en HTML sous I.E. :
Techs
<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
Chap VI - JQuery
17/07/2015
Transparent 11
y
Lexique Sommaire
y
DOM - "Parser" un document XML (2)
Réfs
DHTML Dynamique HTML

Techs
Script en HTML sous Mozilla :
 DOM Document Object
Model
// suite du précédent
DOM - "Parser"
un document XML
DOM Programmation
A chacun son DOM
(1)
JS+DOM «Décompiler»
// 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'); }
XPath + DOM avec
JavaScript
} // fin de loadXML()
JS+DOM Transformation XSL
// continue sur le suivant
Spry: framework JS
pour dHTML
Chap VI - JQuery
17/07/2015
Transparent 12
y
Lexique Sommaire
y
DOM - Programmation
DHTML Dynamique HTML
 DOM Document Object
Model
DOM - "Parser"
un document XML
DOM Programmation
A chacun son DOM
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML

Exemple: viewNote.html
Réfs
Techs
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>
Chap VI - JQuery
17/07/2015
Transparent 13
y
y
Lexique Sommaire
DOM - Définition
Réfs
DHTML Dynamique HTML
Element Property
Description
attributes
Returns a NamedNodeMap that contains all attributes of a node
 DOM Document ObjectchildNodes
Model
Techs
Returns a node list that contains all children of a node
firstChild
DOM - "Parser"
un document XML
lastChild
Returns the first child node of a node
DOM Programmation
Returns the node immediately following a node. Two nodes are siblings if they
have the same parent node
nextSibling
nodeName
A chacun son DOM
(1)
JS+DOM «Décompiler»
Returns the last child node of a node
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
XPath + DOM avec
ownerDocument
JavaScript
Returns the Document object of a node (returns the root node of the document)
JS+DOM parentNode
Transformation XSL
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
Spry: framework JS
pour dHTML
Chap VI - JQuery
17/07/2015
Transparent 14
y
y
Lexique Sommaire
DOM - Définition
Réfs
Element Method
DHTML Dynamique HTML
appendChild(newnode)
 DOM Document Object cloneNode(boolean)
Model
getAttribute(attrname)
DOM - "Parser"
un document XMLAttributeNode(attrname)
DOM Programmation
Returns the value of the specified attributeget
Returns the specified attribute node as an Attr object
hasChildNodes()
Returns true if a node has child nodes. Otherwise it returns false
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
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
Spry: framework JS
setAttribute(attrname,attrvalue)
pour dHTML
Chap VI - JQuery
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
Returns the specified node, and all its child nodes, as a node list
XPath + DOM avec
removeAttributeNode(attriname)
JavaScript
JS+DOM Transformation XSL
Techs
Appends a new child node to a node
getElementsByTagName(tag)
A chacun son DOM
insertBefore(newnode,refnode)
(1)
JS+DOM «Décompiler»
Description
setAttributeNode(attrname)
Sets the value of the named attribute
Inserts the specified new attribute to the element
17/07/2015
Transparent 15
y
y
Lexique Sommaire
A chacun son DOM (1)
Réfs
DHTML Dynamique HTML
Techs
Obj. Property
Description
IE
F
O
W3C
No
1
No
Yes
a NodeList of child nodes for a node
5
1
9
Yes
 DOM Document Object
Model
baseURI
DOM - "Parser"
un document XML
firstChild
the first child of a node
5
1
9
Yes
lastChild
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
nodeName
the name of a node, depending on
its type
5
1
9
Yes
nodeType
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
childNodes
DOM Programmation
localName
A chacun son DOM
(1)
namespaceURI
JS+DOM «Décompiler»
nextSibling
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
nodeValue
Chap VI - JQuery
the absolute base URI of a node
17/07/2015
Transparent 16
y
y
Lexique Sommaire
A chacun son DOM (2)
Réfs
DHTML Dynamique HTML
Techs
 DOM Obj. Property
Document Object
Model
ownerDocument
DOM - "Parser"
un document XMLparentNode
DOM Programmation
prefix
A chacun son DOM
(1)
Description
IE
F
O
W3C
the root element (document object)
for a node
5
1
9
Yes
the parent node of a node
5
1
9
Yes
No
1
9
Yes
Sets or returns the namespace
prefix of a node
previousSibling
the node immediately before a node
5
1
9
Yes
textContent
Sets or returns the textual content of
a node and its descendants
No
1
No
Yes
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
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
17/07/2015
Transparent 17
y
y
DHTML Dynamique HTML
 DOM Document Object
Model
Lexique Sommaire
A chacun son DOM (3)
Réfs
Description
appendChild()
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
DOM - "Parser"
un document XML
cloneNode()
compareDocumentPo
sition()
DOM Programmation
IE
F
getFeature(feature,ver a DOM object which implements
sion)
the specialized APIs of the
specified feature and version
getUserData(key)
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
hasAttributes()
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
true if a node has any attributes,
otherwise it returns false
No Yes
No Yes
A chacun son DOM
(1)
JS+DOM «Décompiler»
O
Techs
W3C
Method
No Yes
No 1
9
Yes
Chap VI - JQuery
17/07/2015
Transparent 18
y
y
Lexique Sommaire
A chacun son DOM (4)
Réfs
DHTML Dynamique HTML
Techs
Method
 DOM Document Object
hasChildNodes()
Model
DOM - "Parser"
insertBefore()
un document XML
DOM Programmation
isDefaultNamespace(
URI)
A chacun son DOM
Description
IE
F
O
W3C
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
namespaceURI is the default
No Yes
isEqualNode()
Checks if two nodes are equal
No No No Yes
isSameNode()
Checks if two nodes are the same
node
No 1
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
isSupported(feature,v
ersion)
JS+DOM Transformation XSL
Returns whether a specified
feature is supported on a node
Spry: framework JS
pour dHTML
lookupNamespaceURI Returns the namespace URI
()
matching a specified prefix
No Yes
9
No 1
Yes
No Yes
Chap VI - JQuery
17/07/2015
Transparent 19
y
y
DHTML Dynamique HTML
Lexique Sommaire
A chacun son DOM (5)
Method
lookupPrefix()
IE
F
O
Returns the prefix matching a
specified namespace URI
No 1
No Yes
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
1
9
Yes
removeChild()
Removes a child node
5
1
9
Yes
replaceChild()
Replaces a child node
5
1
9
Yes
 DOM Document Object
Model
normalize()
DOM - "Parser"
un document XML
DOM Programmation
A chacun son DOM
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Description
Réfs
W3C
Techs
Spry: framework JS
pour dHTML
setUserData(key,data, Associates an object to a key on a
handler)
node
Chap VI - JQuery
17/07/2015
No Yes
Transparent 20
y
y
Lexique Sommaire
JS+DOM - «Décompiler» un arbre
Réfs
DHTML <script type="text/javascript">
Dynamique HTML
Techs
var text="<note>";
 DOM text=text+"<to>Tove</to>"; text=text+"<from>Jani</from>";
Document Object
text=text+"<heading>Reminder</heading>";
Model
DOM - "Parser"
un document XML
text=text+"<body>Don't forget me this weekend!</body>";
text=text+"</note>";
// code for IE
if (window.ActiveXObject) {
DOM var doc=new ActiveXObject("Microsoft.XMLDOM");
Programmation
doc.async="false";
A chacun son DOMdoc.loadXML(text);
(1)
}
JS+DOM «Décompiler»
// code for Mozilla, Firefox, Opera, etc.
else {
var parser=new DOMParser();
var doc=parser.parseFromString(text,"text/xml");
}
var x=doc.documentElement;
for ( i=0; i<x.childNodes.length; i++ ) {
XPath + DOM avec document.write(x.childNodes[i].nodeName);
JavaScript
document.write("=");
document.write(x.childNodes[i].childNodes[0].nodeValue);
JS+DOM Transformation XSL
document.write("<br />");
}
Spry: framework JS
</script>
pour dHTML
Chap VI - JQuery
17/07/2015
Transparent 21
y
y
Lexique Sommaire
JS+DOM+SVG - Animation: "Clock"
Réfs
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1"
DHTML Dynamique HTML
xmlns:xlink="http://www.w3.org/1999/xlink" >
Techs
<script type="text/javascript"> <![CDATA[
 .
 DOM function $(id) {return document.getElementById(id)};
<g stroke="black">
Document Object
var centre=$("small");
Model
<line x1="50" id="secondes" />
function ANIM() {
<line x1="50" id="minutes" />
// mise à l'heure
DOM - "Parser"
a=new Date(); h=a.getHours()%12; m=a.getMinutes();
<line x1="50" id="heures" />
un document XML
s=a.getSeconds(); m+=s/60; h+=m/60;
</g>
// ring
DOM <g stroke="black" id="marques">
centre.setAttribute("fill", "grey");
Programmation
<circle cx="50" cy="50" r="9" id="small"/>
if (s%5==0) {centre.setAttribute("fill", "green");}
</g>
A chacun son DOM if (s%15==0) {centre.setAttribute("fill", "red");}
(1)
// aiguilles
$("heures").setAttribute("x2", Math.cos((h-3)/6*pi)*25+50);
JS+DOM $("heures").setAttribute("y2", Math.sin((h-3)/6*pi)*25+50);
«Décompiler»
$("minutes").setAttribute("x2", Math.cos((m-15)/30*pi)*35+50);
$("minutes").setAttribute("y2", Math.sin((m-15)/30*pi)*35+50);
XPath + DOM avec
$("secondes").setAttribute("x2", Math.cos((s-15)/30*pi)*45+50);
JavaScript
$("secondes").setAttribute("y2", Math.sin((s-15)/30*pi)*45+50);
JS+DOM setTimeout("ANIM()", 900); // <1000 = 1 sec
Transformation XSL
}
ANIM(); // appel de l\'animation
Spry: framework JS
]]> </script>
pour dHTML
</svg>
Chap VI - JQuery
17/07/2015
Transparent 22
y
y
«Enjoliver» et Exécuter un source
Lexique Sommaire
Réfs
var mode = 'source';
<script type="text/javascript">
DHTML function $(id) {
Techs
Dynamique HTML
function enjolive (id)
{
return document.getElementById(id)
var js=$(id).value; if (!js || !js.replace) return "";
}
 DOM //regexp html
Document Object
function show(id) {
var balise = new RegExp("<(\\D[^><]*)>", "g");
Model
if(mode=="page")
var comC = /(\/\/.+|\/\*(.|\n)+?\*\/)/g; // forme C ou JS
$("EXEC").innerHTML= $(id).value ;
//regexp JS
DOM - "Parser"
else $("EXEC").innerHTML=enjolive(id) ;
un document XML
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;
DOM Programmation var strings = /((["'])(?:.*?(?:[^\\](?:\\\\)*|[^\\]))?\2)/g;
var numbers = /\b(-?(?:\d+|\d*\.\d+)\b)/g; //CSS
A chacun son DOM
var keywordsCSS = /\b(blue|red|green|cyan|yellow|none|inherit|justify|center|left|right|italic|bold|block)\b/g;
(1)
// les remplacements ...
js=js.replace(balise, "<bal><$1></bal>");
JS+DOM «Décompiler» js=js.replace(styleO, "<sty>$1").replace(styleF, "$1</sty>") ;
js=js.replace(comHO,'<comh><\/comh>');
XPath + DOM avec
js=js.replace(keywordsCSS,'<mc>$1<\/mc>');
JavaScript
js=js.replace(strings,'<chaine>$1<\/chaine>');
js=js.replace(numbers,'<chaine>$1<\/chaine>');
JS+DOM Transformation XSL
js=js.replace(comC,'<comc>$1<\/comc>');
return "<pre>"+js+"</pre>";
Spry: framework};
JS// enjolive
pour dHTML
</script>
Chap VI - JQuery
17/07/2015
Transparent 23
y
y
Lexique Sommaire
XPath + DOM avec JavaScript
<html>
DHTML Dynamique HTML<body>
Réfs
Techs
<script type="text/javascript">
une expression de chemin XPATH
 DOM //xpath
Document Object
Model
// I.E
DOM - "Parser"var xmlDoc=new ActiveXObject ("Microsoft.XMLDOM");
un document XMLxmlDoc.async=false;
xmlDoc.load ("cdcatalog.xml") ;
DOM Programmation
firstFit=xmlDoc.selectNodes(xpath)[0];
A chacun son DOM
(1)
// Mozillla
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false;
JS+DOM «Décompiler»
xmlDoc.load("cdcatalog.xml")
firstFit=document.
XPath + DOM avec
JavaScript
evaluate(xpath, xmlDoc, null, XPathResult.ANY_TYPE,null)[0];
JS+DOM Transformation XSL
attValue=firstFit.getAttribute('someAtt'); //exemple
</script>
Spry: framework JS</body>
pour dHTML
</html>
Chap VI - JQuery
17/07/2015
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 xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
fragment =
xsltProcessor.transformToFragment
(xml, document);
<script type="text/javascript">
var target = document.getElementById(id);
var XML=
target.innerHTML =
fragment.firstChild.innerHTML ; // pfz
loadXML(xmlURL);
//target.appendChild(fragment); //orig
var XSL=
//document.replaceChild(target, fragment); //orig
loadXML(xslURL);
// ActiveX pour Internet Explorer
function theJobTe() {
} else if (window.ActiveXObject) {
transform (XML, XSL, 'ICI');
var target = document.getElementById(id);
....
target.innerHTML =
xml.transformNode(xsl);
}
}
</script>
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
Lexique Sommaire
y
function
transform (xml, xsl, id) {
} catch (e) {return e;}
}
Chap VI - JQuery
17/07/2015
Transparent 25
y


DHTML Dynamique HTML 
 DOM Document Object
Model

DOM - "Parser"
un document XML
DOM Programmation



A chacun son DOM
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
Lexique Sommaire
y


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
 toutjavascript.com/
 W3Schools - JS Tutorial
 javascript sur commentcamarche.net/
 Cours de JavaScript
 Sources on javascript.com/
 Free JS Examples
JavaScript + DOM : savoir-faire
Réfs
Techs
Chap VI - JQuery
17/07/2015
Transparent 26
y
y
Lexique Sommaire
Langages de Script
Réfs
DHTML Dynamique HTML
 DOM Document Object
Model
DOM - "Parser"
un document XML
DOM Programmation
A chacun son DOM
(1)
Où trouver des scripts sur le Web?
Techs
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
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
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
Chap VI - JQuery
17/07/2015
Transparent 27
Lexique Sommaire
.
Langages & Documents
Réfs
Techs
.
Chap VI - Spry
.
.
.
Spry [ Adobe - Labs ]
Paul Franchi
SI 4
2014-15
.
17/07/2015
Transparent - 28
y
Lexique Sommaire
y
Spry: framework JS pour dHTML
DHTML Dynamique HTML
 DOM Document Object
Model
Techs

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")
DOM - "Parser"
un document XML
DOM Programmation
A chacun son DOM
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
Chap VI - JQuery
Réfs

Implémentation
 (X)HTML + "Include" JS
 DOM
 XML
 CSS
 HTTP + AJAX
 intégration complète avec DW CS
17/07/2015

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
y
Lexique Sommaire
Spry - Schéma & Utilisation
Réfs
DHTML Dynamique HTML
 DOM Document Object
Model
DOM - "Parser"
un document XML
A chacun son DOM
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
<head>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript">
</script><script src="SpryAssets/SpryMenuBar.js"… />
<style> </script><script src="SpryAssets/xpath.js"… />
</script><script src="SpryAssets/SpryData.js" … />
…..
</style> <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" … />
<link href="SpryAssets/SpryMenuBarHorizontal.css" … />
</head>
<link href="SpryAssets/SpryMenuBarVertical.css"… />
</head>
<body>
Dom
Techs
interpréteur
JS
DOM Programmation
<html>
<head>
<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>
HTML
</ul></div>
généré
</body></html>
Chap VI - JQuery
17/07/2015
Transparent 30
y
y
Lexique Sommaire
Spry - Génération de XML DATA SETs
Réfs
<html>
DHTML Dynamique HTML
<head>
 DOM Document Object
<script
Model
<head>
</script><script src="SpryAssets/xpath.js"… />
</script><script src="SpryAssets/SpryData.js" … />
</head>
mis à plat
"flatening"
type="text/javascript">
var dsBib = new Spry.Data.XMLDataSet("bib.xml", "Bib/Article");
DOM - "Parser"
dsBib .setColumnType("Date", "date");
un document XML
</script>
DOM Programmation </head>
<body>
A chacun son DOM
(1)
<div spry:region="dsBib">
JS+DOM <table>
«Décompiler»
<tr> <th>Titre</th> <th>Date</th> <th spry:sort="@ref">ref</th> </tr>
XPath + DOM avec
JavaScript
<tr spry:repeat="dsBib" spry:setrow="dsBIb">
Title Date
<td>{Title}</td>
<td>{Date}</td>
<td>{@ref}</td>
JS+DOM Transformation XSL
</tr>
Spry: framework</table>
JS
pour dHTML
</body></html>
Techs
Edit
@ref
Chap VI - JQuery
17/07/2015
Transparent 31
y
Lexique Sommaire
y
Spry - Galerie Photo avec XML DATA SETs
Réfs
DHTML <html>
Dynamique HTML
<head>
</script><script src="SpryAssets/xpath.js"… />
</script><script src="SpryAssets/SpryData.js" … />
Techs
 DOM Document Object
<script
Model
mis à plat
"flatening"
type="text/javascript">
var dsAlbum =
DOM - "Parser"
new Spry.Data.XMLDataSet("photos.xml", "gallery");
un document XML
</script>
DOM </head>
Programmation
XML
<body>
A chacun son DOM
metadata
(1)
<div spry:region="dsAlbum">
<table>
JS+DOM «Décompiler»
<tr> <th>Titre</th> <th>Lieu</th> <th spry:sort="@ref">ref</th> </tr>
XPath + DOM avec
<tr spry:repeat="dsAlbum" spry:setrow="dsAlbum">
JavaScript
<td>{Title}</td> <td>{Location}</td> <td>{@ref}</td> Title Lieu
JS+DOM Transformation XSL
</tr>
</table>
Spry: framework JS
pour dHTML
</body></html>
@ref
Chap VI - JQuery
17/07/2015
Transparent 32
y
Lexique Sommaire
y
R.I.A. - XML as metadatas & SPRY
Réfs
DHTML Dynamique HTML
Techs
 DOM Document Object
Model
Rich Client
XML
XML
rdf
rdf
DOM - "Parser"
un document XML
HTML
DOM Programmation
A chacun son DOM
(1)
SPRY
CSS, XSL
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS
DHTML
AJAX
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
DHTML
Chap VI - JQuery
17/07/2015
y
Lexique Sommaire
y
Spry: Démos
DHTML Dynamique HTML
Réfs
Techs
 DOM Document Object
Model
DOM - "Parser"
un document XML
DOM Programmation
A chacun son DOM
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
Chap VI - JQuery
17/07/2015
Transparent 34
Lexique Sommaire
.
Langages & Documents
Réfs
Techs
.
Chap VI - JQuery
.
.
.
JQuery
Paul Franchi
SI 4
2014-15
.
17/07/2015
Transparent - 35
y
Lexique Sommaire
y
Réfs
JQuery: a framework for DOM, AJAX, CSS, etc.
DHTML Dynamique HTML
 DOM Document Object
Model
DOM - "Parser"
un document XML
DOM Programmation
A chacun son DOM
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL

Techs
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."
Spry: framework JS
pour dHTML
Chap VI - JQuery
17/07/2015
Transparent 36
y
DOM - "Parser"
un document XML
DOM Programmation
A chacun son DOM
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Réfs
JQuery: Références Web
DHTML Dynamique HTML
 DOM Document Object
Model
Lexique Sommaire
y
Techs

Liens externes
// un exemple de "onclick" avec jQuery :
 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
$(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
Spry: framework JS
pour dHTML
Chap VI - JQuery
17/07/2015
Transparent 37
y
DHTML Dynamique HTML
 DOM Document Object
Model
DOM - "Parser"
un document XML
DOM Programmation
A chacun son DOM
(1)
JS+DOM «Décompiler»
XPath + DOM avec
JavaScript
JS+DOM Transformation XSL
Spry: framework JS
pour dHTML
y
Lexique Sommaire
AJAX avec Jquery
Réfs
$(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
Techs
Chap VI - JQuery
17/07/2015
Transparent 38