//Ensures that we load SWS at the very end, after MathJax has
//been initialized
+ var toggle_circuit = function (id) {
+ var v = $("#" + id).text();
+ var nv = "0";
+ if (v == "0") { nv = "1"; };
+ $("#" + id).text(nv);
+ draw_circuit();
+ };
+
+ var draw_circuit = function() {
+ var i0 = parseInt($("#input0").text());
+ var i1 = parseInt($("#input1").text());
+ var r = (i0 + i1) % 2;
+ var c = (Math.floor((i0 + i1) / 2)) %2;
+ $("#result").text(r)
+ $("#carry").text(c)
+ $(".num").each(function (i, e) {
+ var txt = parseInt($(e).text());
+ if (txt == 0) {
+ $(e).css( 'background', '#aaaaff');
+ } else {
+ $(e).css( 'background', '#aaffaa');
+ }
+ });
+
+ };
+
+
+
$(window).load(SWS.Presentation.init);
</script>
+ <style>
+ .num { display:inline-block;
+ width: 5em;
+ font-size: 150%;
+ }
+ </style>
</head>
<body>
<div class="sws-slide">
<h1> Comment fonctionne un ordinateur ? </h1>
<div style="text-align:center;vertical-align:center">
- <img id="id_eniac" style="width:75%"
- src="http://www.fi.edu/learn/case-files/eckertmauchly/ENIAC_Image_2.jpg"
+ <img id="id_eniac" style="width:70%" src="Eniac.jpg"
/>
</div>
</div>
<h1> Comment fonctionne un ordinateur ? </h1>
<div style="text-align:center;vertical-align:center">
<img style="width:25%"
- src="http://www.resistors-and-diodes-and-picchips-oh-my.co.uk/wp-content/uploads/2011/03/vacuum-tube.jpg"
+ src="vacuum-tube.jpg"
/>
<svg width="100%" height="15%" xmlns="http://www.w3.org/2000/svg"
version="1.1">
passe (1) ou ne passe pas (0)</p>
</div>
<div class="sws-slide">
- <h1> Compter avec des 0 et des 1 ? </h1>
- <iframe class="sws-onframe-0_1" src="cartes.html"
+ <h1> Représenter tous les nombres des 0 et des 1 ? </h1>
+ <iframe class="sws-onframe-0_1" src="anim/cartes.html"
style="padding-left:5%;width:90%; height:50vh;border-width:0;" />
<p class="sws-onframe-1" >
On groupe les <i>bits</i> par paquets de 8 qu'on appelle des <em>octets</em>!
</p>
</div>
+ <div class="sws-slide">
+ <h1>Compter avec du courant électrique ?</h1>
+ <div style="text-align:center;">
+ <div style=";display:inline-block;">
+ <span class="num" id="input0" onclick="toggle_circuit('input0');">0</span><br/>
+ <span class="num" id="input1" onclick="toggle_circuit('input1');">0</span>
+ </div>
+ <img style="vertical-align:top;border:width:300px;height:200px" src="Half_Adder.svg" />
+ <div style=";display:inline-block;vertical-align:top;"><br/>
+ <span class="num" id="result">0</span><br/><br/><br/>
+ <span class="num" id="carry">0</span>
+ </div>
+ <p><img style="vertical-align:middle;" src="xor.svg" /> renvoie un 1 si les deux valeurs sont
+ différentes <br/><br/>
+<img style="vertical-align:middle;" src="and.svg" /> renvoie un 1 si les deux valeurs sont
+ à 1
+ </p>
+ <script type="text/javascript">
+ SWS.Presentation.registerCallback(0, function (c) {
+ draw_circuit(); });
+ </script>
+ </div>
+ </div>
+ <div class="sws-slide">
+ <h1>Et ensuite ?</h1>
+ <div style="position:relative;text-align:center;">
+ <img src="mb_adder.png" style="left:0pt;top:0pt;width:600px"
+ />
+
+ </div>
+ </div>
+ <div class="sws-slide">
+ <h1>Et ensuite ?</h1>
+ <div style="position:relative;text-align:center;">
+ <img src="pentium_internal_detail.jpg" style="left:0pt;top:0pt;height:300px"
+ />
+
+ </div>
+ </div>
<div class="sws-slide">
<h1> Écrire (des lettres) avec des 0 et des 1 ? </h1>
<form>
</div>
<div class="sws-slide">
<h1> Dessiner avec des 0 et des 1 ? </h1>
- <iframe class="sws-onframe-0_1" src="dessin.html"
+ <iframe class="sws-onframe-0_1" src="anim/dessin.html"
style="padding-left:5%;width:90%; height:75vh;border-width:0;" />
</div>
</body>
--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+>
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>DOM</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+ <style type="text/css">
+ .xml-tag { color: #00486c; }
+ </style>
+ <script type="text/javascript">
+ <![CDATA[
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(function () {
+ $(".inline-xml").each(function(i, elem)
+ {
+ var jelem = $(elem);
+ var code = jelem.html();
+ code = code.replace ("<![CDATA" + "[", "").replace ("]" + "]>", "");
+ code = code.replace (/>/g, ">>>");
+ code = code.replace (/</g, "<span class='xml-tag'><");
+ code = code.replace (/>>>/g,"></span>");
+
+ jelem.html(code);
+ });
+ });
+
+ var checkSVG = function (o, i)
+ {
+ if (i >= 10 || SWS.Utils.isUndefined(o) || o == null) return;
+ var svg = o.getSVGDocument();
+ if (svg == null) {
+ setTimeout(function() { checkSVG(o, i+1); }, 200);
+ } else {
+ var alltext = $(svg).find("text");
+ alltext.css("font-family", "DIN");
+ alltext.css("font-size", "70%");
+
+ };
+ };
+ $(window).load(function() {
+ $("embed").ready(function() {
+ setTimeout(function() {
+ $("embed").each(function(i, o) { checkSVG(this,0); });
+}, 1000);
+ });
+ });
+ $(window).load(SWS.Presentation.init);
+
+ ]]>
+
+ </script>
+
+ </head>
+ <body>
+ <a href="xpi_05.xhtml" class="sws-previous"/>
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>XML et Programmation Internet</h1>
+ <h1>Cours 6</h1>
+ <a href="mailto:kn@lri.fr">kn@lri.fr</a>
+ </div>
+ <h1>Le modèle DOM</h1>
+ <div class="sws-slide">
+ <h1>Programmer avec XML</h1>
+<p>La représentation textuelles de documents XML n'est pas
+ adaptée à la manipulation des données par un programme : </p>
+<ul>
+ <li>On ne veut pas lire le fichier « caractère par caractère » </li>
+ <li>On veut s'assurer que le fichier est bien formé et valide </li>
+ <li>On veut pouvoir manipuler la structure d'arbre que représente le
+ fichier </li>
+</ul>
+
+ </div>
+ <div class="sws-slide">
+ <h1>Document Object Model</h1>
+ <p>DOM est une <a>spécification</a> du W3C qui
+ explique <a>comment</a> représenter un document dans un
+ langage <a>orienté objet</a>.<br/>Avantages :
+ </p>
+ <ul>
+ <li>N'est pas limité à un seul langage</li>
+ <li>Permet de spécifier une API unique : programmer en XML en
+ Java ou Python ne sera pas différent</li>
+ </ul>
+ <p>Inconvénivents :</p>
+ <ul>
+ <li>En pratique, orienté Java</li>
+ <li>Se focalise sur les lanages objets de manière arbitraire</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Que définit le DOM ?</h1>
+ <p>Le DOM définit des <a>interfaces</a> (c'est à dire, <a>des noms
+ de classes</a> auquels sont associés
+ des <a>propriétés</a>). Il définit aussi des types de bases
+ (chaînes de caractères, entiers, etc.) et des types
+ auxiliaires qui sont implantés par les types de bases du
+ langage.
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>L'interface <tt>Node</tt> (1/4, constantes) </h1>
+ <code>
+ //attention ce n'est pas du Java
+ interface <a>Node</a> {
+
+ //constantes entières définissant les types de nœuds
+ const unsigned short <a>ELEMENT_NODE</a> = 1;
+ const unsigned short <a>ATTRIBUTE_NODE</a> = 2;
+ const unsigned short <a>TEXT_NODE</a> = 3;
+ const unsigned short <a>CDATA_SECTION_NODE</a> = 4;
+ const unsigned short <a>ENTITY_REFERENCE_NODE</a> = 5;
+ const unsigned short <a>ENTITY_NODE</a> = 6;
+ const unsigned short <a>PROCESSING_INSTRUCTION_NODE</a> = 7;
+ const unsigned short <a>COMMENT_NODE</a> = 8;
+ const unsigned short <a>DOCUMENT_NODE</a> = 9;
+ const unsigned short <a>DOCUMENT_TYPE_NODE</a> = 10;
+ const unsigned short <a>DOCUMENT_FRAGMENT_NODE</a> = 11;
+ const unsigned short <a>NOTATION_NODE</a> = 12;
+
+
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>L'interface <tt>Node</tt> (2/4, valeur, nom et type) </h1>
+
+
+ <code>
+ //nom et valeur du nœud
+
+ readonly attribute DOMString <a>nodeName</a>;
+ attribute DOMString <a>nodeValue</a>;
+ </code>
+ <ul>
+ <li>Pour les éléments <tt>nodeValue</tt> vaut <tt>null</tt>
+ et <tt>nodeName</tt> est le nom de la balise
+ </li>
+ <li>Pour les nœuds texte <tt>nodeValue</tt> est le texte
+ et <tt>nodeName</tt> est la chaine fixe <tt>#text</tt>
+ </li>
+ <li>Pour les attributs <tt>nodeValue</tt> vaut la valeur de
+ l'attribut et <tt>nodeName</tt> est son nom
+ </li>
+ </ul>
+ <code>
+ //L'une des 12 constantes du slide précédent
+ readonly attribute unsigned short <a>nodeType</a>;
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>L'interface <tt>Node</tt> (3/4, navigation) </h1>
+ <code>
+ readonly attribute Node <a>parentNode</a>;
+ readonly attribute NodeList <a>childNodes</a>;
+ readonly attribute Node <a>firstChild</a>;
+ readonly attribute Node <a>lastChild</a>;
+ readonly attribute Node <a>previousSibling</a>;
+ readonly attribute Node <a>nextSibling</a>;
+ readonly attribute NamedNodeMap <a>attributes</a>;
+ </code>
+ <p>Utilise deux interfaces auxiliaires:</p>
+ <code>
+ interface NodeList {
+ Node <a>item(in unsigned long index)</a>;
+ readonly attribute unsigned long <a>length</a>;
+ };
+ interface NamedNodeMap {
+ Node <a>getNamedItem(in DOMString name)</a>;
+ …
+ }
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>L'interface <tt>Node</tt> (4/4, mise à jour) </h1>
+ <code>
+ //Renvoie le document auquel appartient le nœud
+ readonly attribute Document <a>ownerDocument</a>;
+
+ Node <a>insertBefore(in Node newChild,
+ in Node refChild)
+ raises(DOMException)</a>;
+
+ Node <a>replaceChild(in Node newChild,
+ in Node oldChild)
+ raises(DOMException)</a>;
+ Node <a>removeChild(in Node oldChild)
+ raises(DOMException)</a>;
+ Node <a>appendChild(in Node newChild)
+ raises(DOMException)</a>;
+ boolean <a>hasChildNodes()</a>;
+
+ //Nécessaire pour copier un nœud d'un document dans un autre
+ Node <a>cloneNode(in boolean deep)</a>;
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>Sous-interfaces de <tt>Node</tt></h1>
+ <p>L'interface <tt>Node</tt> est spécialisées en 12
+ sous-interfaces différents (les 12 types de nœuds
+ possibles). Les principales sont:
+ </p>
+ <ul>
+ <li><a><tt>Document</tt></a> : l'interface du nœud « racine » du
+ document </li>
+ <li><a><tt>Element</tt></a> : l'interface des nœuds
+ correspondant à des balises</li>
+ <li><a><tt>Attr</tt></a> : l'interface des nœuds
+ correspondant à des attributs</li>
+ <li><a><tt>Text</tt></a> : l'interface des nœuds
+ correspondants à des textes </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>L'interface <tt>Text</tt></h1>
+ <code>
+ interface Text : Node {
+ //renvoie vrai si le nœud ne contient que des espaces
+ readonly attribute boolean <a>isElementContentWhitespace</a>;
+ …
+ }
+ </code>
+ <p>(La spécification de DOM mentionne d'autres propriétés)</p>
+ </div>
+ <div class="sws-slide">
+ <h1>L'interface <tt>Attr</tt></h1>
+ <code>
+ interface Attr : Node {
+ readonly attribute DOMString <a>name</a>;
+ readonly attribute DOMString <a>value</a>;
+
+ readonly attribute Element <a>ownerElement</a>;
+ …
+ };
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>L'interface <tt>Element</tt></h1>
+ <code>
+ interface Element : Node {
+ readonly attribute DOMString <a>tagName</a>;
+ //manipulation par chaine :
+ DOMString <a>getAttribute(in DOMString name)</a>;
+ void <a>setAttribute(in DOMString name,
+ in DOMString value)
+ raises(DOMException)</a>;
+
+ void <a>removeAttribute(in DOMString name)
+ raises(DOMException)</a>;
+
+ //manipulation par nœud :
+ Attr <a>getAttributeNode(in DOMString name)</a>;
+ Attr <a>setAttributeNode(in Attr newAttr)
+ raises(DOMException)</a>;
+ Attr <a>removeAttributeNode(in Attr oldAttr)
+ raises(DOMException)</a>;
+
+ //renvoie tous les descendants avec un certain tag
+ NodeList <a>getElementsByTagName(in DOMString name)</a>;
+
+ }
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>L'interface <tt>Document</tt></h1>
+ <code>
+ inteface Document : Node {
+ //L'élément racine
+ readonly attribute Element <a>documentElement</a>;
+
+ //Création de nœuds pour ce document :
+
+ Element <a>createElement(in DOMString tagName)
+ raises(DOMException)</a>;
+ Text <a>createTextNode(in DOMString data)</a>;
+ Attr <a>createAttribute(in DOMString name)
+ raises(DOMException)</a>;
+
+ //Les descendants avec un tag particulier
+ NodeList <a>getElementsByTagName(in DOMString tagname)</a>;
+
+
+ //Copie un nœud, éventuellement avec ses descendants et
+ //en fait un nœud ajoutable au document :
+ Node <a>importNode(in Node importedNode,
+ in boolean deep)</a>;
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>Modèle mémoire</h1>
+ <p>Un <a>nœud</a> (objet implémentant l'interface <tt>Node</tt>)
+ ne peut pas appartenir à deux documents. Exemple : </p>
+ <code>
+ Node noeud_a = document1.getElementByTagName("a").item(0);
+
+ <s>document2.appendChild(noeud_a);</s>//Exception si document2 n'est
+ //pas le même objet que
+ document1
+ //par contre ceci est ok:
+ document2.appendChild(<a>document2.importNode</a>(noeud_a, true));
+ </code>
+ </div>
+ <h1>Java API for XML Processing</h1>
+ <div class="sws-slide">
+ <h1>Introduction à JAXP</h1>
+ <p>API de la bibliothèque standard Java qui permet de manipuler
+ du XML. Elle comprend (entre autres) :</p>
+ <ul>
+ <li>Lecture et écriture de documents <a>en streaming</a>
+ (cours 7)</li>
+ <li>Implémentation complète de la
+ spécification <a>DOM</a></li>
+ <li>Moteur XSLT (et donc XPath)</li>
+ </ul>
+ <p>Inconvénients : la bibliothèque essaye d'être très générique,
+ afin que n'importe qui puisse fournir son implémentation de DOM
+ en utilisant les interfaces fournies. Il faut donc parfois
+ passer par des grandes séquences d'incatations magiques pour
+ créer un objet</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Structure de l'API</h1>
+ <ul>
+ <li>Les types et interfaces spécifiés par le w3C se trouvent
+ dans le packages <tt>org.w3c.*</tt> </li>
+ <li>Les types « usuels» pour XML sont
+ dans <tt>org.xml.*</tt></li>
+ <li>Les <a>classes</a> concrètes java implémentant les
+ interfaces sont dans <tt>javax.xml.*</tt></li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1><tt>Factory</tt> <i>design pattern</i></h1>
+ <p>Comme toutes les API complexes en Java (et dans les langages
+ objets en général), Jaxp utilise le <i>design pattern</i>
+ de <a>Factory</a>. </p>
+ <p>Pour créer un objet de type <tt>Foo</tt> on ne fait pas
+ simplement <tt>new Foo(…);</tt> mais on utilise une
+ classe <tt>FooFactory</tt> qui possède une
+ méthode <tt>.createFoo(…)</tt>
+ </p>
+ <p >Dans quel cas est-ce intéressant ?</p>
+ <p class="sws-pause">Quand <tt>Foo</tt> est une interface. On
+ ne peut pas faire <tt>new</tt> sur une interface. Il faut donc
+ une méthode pour appeler le constructeur de la classe
+ implémentant <tt>Foo</tt> puis qui le caste en <tt>Foo</tt> … </p>
+
+ </div>
+ <div class="sws-slide">
+ <h1><tt>Factory</tt> <i>design pattern</i> (exemple) </h1>
+ <img style="margin-left:10%;width:80%" src="factory_pattern_uml_diagram.jpg" />
+ </div>
+ <div class="sws-slide">
+ <h1>Création d'un document : <tt>DocumentBuilder</tt></h1>
+ <p>La classe <tt>DocumentBuilder</tt> permet de créer un
+ document XML : </p>
+ <ul><li>Soit en le lisant depuis un fichier (avec la
+ méthode <tt>parse()</tt></li>
+ <li>Soit vide, avec la méthode <tt>newDocument()</tt></li>
+ </ul>
+ <p>Pour obtenir un <tt>DocumentBuidler</tt>, il faut passer par
+ un <tt>DocumentBuilderFactory</tt> : </p>
+ <code>
+ //création de la Factory
+ DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
+
+ //On définit quelques options
+ dbf.setIgnoringElementContentWhitespace(true); // option
+ dbf.setValidating(false); // option
+
+ //On crée le documentBuilder
+ DocumentBuilder db = dbf.newDocumentBuilder();
+
+ //On charge le document
+ Document doc = db.parse("fichier.xml");
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>DOM dans JAXP</h1>
+ <p>Le <tt>DocumentBuilder</tt> permet d'obtenir
+ un <tt>Document</tt> (interface Java qui implémente l'interface DOM
+ du même nom)</p>
+ <p><a>Conventions de nommage :</a> les <i>propriétés</i> des
+ interfaces DOM sont préfixées par <tt>get</tt> ou <tt>set</tt>
+ en Java. Les méthodes ont le même nom. Exemple :</p>
+ <code>
+ Node n = …;
+ n.getNodeType(); //DOM défini nodeType;
+ n.getFirstChild(); //DOM défini firstChild;
+ n.appendChild(m); //C'est une méthode en DOM donc même nom
+ </code>
+ </div>
+ <div class="sws-slide">
+ <h1>Conversions</h1>
+ <p>On travaille la plupart du temps avec des objets ayant le
+ type <tt>Node</tt>. La manière correcte de les convertir est la
+ suivante :
+ </p>
+ <code>
+ switch (n.getNodeType()) {
+
+ case Node.DOCUMENT_NODE:
+ Document d = (Document) n;
+ …
+ break;
+ case Node.ELEMENT_NODE:
+ Element e = (Element) n;
+ …
+ break;
+ case Node.TEXT_NODE:
+ Text t = (Text) n;
+ …
+ break;
+ }
+ </code>
+ </div>
+ </body>
+</html>
projects / hacks / simpleWebSlides.git / commitdiff
