Dom, XML, Lecture de fichiers

 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier Projet de développement web : Développement côté client — Chapitre 4 Dom, XML, Lecture de fichiers Page 1 / 11 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier Table des matières Table des matières Introduction DOM : Document Object Model Structure habituelle d’une hiérarchie DOM Types de nœuds Navigation dans les éléments Accéder aux éléments Méthodes d’accès aux éléments Valeur des éléments et éléments enfants Méthodes d’accès aux éléments Accès aux éléments enfants XML Lecture de fichier XML Requête XML HTTP Utilisation dans le cadre de ce cours Page 2 / 11 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier Introduction Tout développeur front­end actuel sait se servir du JavaScript, mais bien souvent assisté par un ensemble d’outils appelé Framework. L’approche d’un de ces frameworks, jQuery, sera par ailleurs le sujet du chapître 5 de ce cours. Si ceux­ci constituent une excellente manière de limiter, contrôler ou empêcher les bugs et accélérer le développement, il est important de comprendre le fonctionnement des technologies sous­jacentes. Dans ce chapitre, nous approcherons les éléments fondateurs de ces frameworks, dans leur expression la plus proche du langage du base, JavaScript. JavaScript est un langage dynamique, faiblement typé, basé sur les prototypes qui existe ans la plupart des navigateurs modernes et dans de nombreux environnements. Parmi ses fonctionnalités, nous pouvons en souligner et rappeler quelques unes : ● Les langages de développement dynamiques s’exécutent au moment de l’appel au script, en “direct”, dit au runtime. Ils ne doivent pas être compilés. Cela a un effet direct sur la page : Lorsque Javascript est lu par un document HTML, il va être lu au moment de la génération de la page, et pas avant. ● Pour créer l’équivalent de classes et d’héritage, nous utiliserons le principe des prototypes Javascript. Parmi ces prototypes, de nombreux sont compris dans l’implémentation de JavaScript présente dans votre navigateur. Vous ne devez disposer de rien de plus pour les utiliser. Ces deux points sont importants dans la compréhension de ce chapitre et de JavaScript en général, en les mettant en parallèle avec d’autres langages de programmation appris dans votre formation. Page 3 / 11 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier DOM : Document Object Model Le Document Object Model ou DOM (ou Modèle d’Objet du Document, plus rarement) est l’API (Application Programming Interface ou Interface de Programmation, un pont logiciel reliant deux technologies ou parties de technologies) à travers laquelle JavaScript interagit avec le contenu des pages web sur lesquelles il est activé et utilisé. JavaScript et le DOM sont généralement vus comme une seule entité. Cela est du à l’usage de JavaScript principalement pour la manipulation du DOM, qui se traduit par une interaction avec le contenu sur Internet. Le DOM est utilisé pour traverser, manipuler et accéder aux objets HTML (sur une page web) ou XML (dans un fichier distinct). Traverser signifie parcourir les éléments parents d’une hiérarchie de balise et leurs enfants jusqu’à trouver une balise ou une série de balises par leur nom, leur type, leurs attributs, leur contenu, leur ID ou leurs classes. Avec la notion de DOM, JavaScript peut : ● Modifier les balises du document. ● Modifier les attributs de ces balises. ● Modifier les styles CSS de tout élément dans la page. ● Supprimer les éléments, attributs, styles CSS dans la page. ● Ajouter des éléments, attributs, CSS dans la page. Structure habituelle d’une hiérarchie DOM La structure habituelle d’une hiérarchie dans le DOM est comme suit : ● Au premier niveau, nous trouvons l’objet window qui agit comme un objet global, représentant la fenêtre du navigateur dans lequel vous œuvrez. Vous y accédez via la variable globale window fournie par votre interpréteur JavaScript. Comme tous les objets, il dispose de propriétés et de méthodes. 1 1
Pour rappel, vous pouvez obtenir la liste des méthodes et propriétés d’un objet en entrant son nom suivi d’un point dans votre console JavaScript ou les outils de développement de Firefox. Page 4 / 11 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier ● Au second niveau de la hiérarchie, nous trouverons les objets : ○ History, utilisé pour stocker l’historique de l’utilisateur. On y accède via window.history. ○ Location : Cette variable contient des informations sur la page actuelle, et pourra servir à la redirection de l’utilisateur (window.location). ○ Document : La variable document est la plus importante dans le contexte de ce chapitre. Il s’agit du nœud initial de la hiérarchie des balises de la page. ● Enfin, dès le troisième niveau et document, le DOM créera une hiérarchie basée sur la structure du document web, de ses balises. Ces balises sont appelées des nœuds du DOM. Il y a plusieurs types de nœuds, détaillés ci­après. Types de nœuds Les trois plus grands types de nœuds sont “Element”, “Text” et “Document”. ● Un nœud de type “Element” représente un élément ou une balise dans votre page. Par exemple, si vous disposez d’une balise <p> dans la hiérarchie, cette balise et son contenu sont un nœud de type “Element” et pourront être sélectionnés dans le DOM. ● Un nœud de type “Text” désigne tout texte dans les balises de la page. Si nous reprenons l’exemple précédent, si le paragraphe dispose de contenu, son contenu sera considéré comme un nœud de type “Text” et pourra être sélectionné directement dans le DOM. ● Le nœud de type “Document” représente le document (la page web) dans sa totalité. Il est unique et constitue le nœud dit racine de la hiérarchie (ou de l’arbre) DOM. À toute fin utile, il est intéressant de noter que techniquement parlant, les attributs de tout élément (toute balise) sont également considérés dans le DOM comme des nœuds. Chaque navigateur interprête les notions du DOM différemment, via un mécanisme appelé moteur de rendu. Les plus connus sont : ● Gecko pour Firefox ● Trident pour Internet Explorer, connu jusqu’en version 7 pour son implémentation bugguée et incomplète. ● Blink pour Google Chrome. ● Webkit pour Safari. Page 5 / 11 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier Navigation dans les éléments Une page web peut être vue comme un arbre de balises, imbriquées de manière hiérarchie On peut donc schématiser une page Web simple comme ceci : Exemple : <html>
<head>
<title>Titre de la page</title>
<meta charset=“UTF-8”>
</head>
<body>
<p>Contenu</p>
</body>
</html>
La hiérarchie est ainsi posée : ● <html> est à la racine et contient deux éléments : <head> et <body>. ○ Pour ces deux éléments, <html> est l’élément parent. ○ Pour <html>, ces éléments sont ses enfants. ● Chaque élément est un nœud. ● <head> contient lui aussi deux éléments, <title> et <meta>. ● <meta> ne contient pas de nœud enfant. ● <title> quant à lui contient un nœud enfant, de type Texte. Il est important de comprendre la notion de nœud texte : Le texte présent dans une page Web est vu par le DOM comme un nœud. Les concepts évoqués ici peuvent être appliqués de manière récursive à tout élément qui serait enfant d’un autre élément dans la hiérarchie. Ce mécanisme est appelé Traversing. Page 6 / 11 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier Accéder aux éléments L'accès aux éléments HTML via le DOM est assez simple et se fait via plusieurs méthodes principales, qui sélectionnent les éléments par un de leur composant (nom, attribut, id, classe, type, contenu). Ces méthodes peuvent être appelées à la fois sur le nœud racine du document, document, mais aussi sur tout élément dans la hiérarchie. dans le tableau qui suit, nous utiliserons document comme exemple. Méthodes d’accès aux éléments document.getElementById() Retourne un élément qui a l’identifiant correspondant à l’argument de la fonction. document.getElementsByClassName() Retourne un tableau d’éléments ayant la classe passée en argument de la fonction. document.getElementsByName() Retourne un tableau d’éléments ayant le nom passé en argument de la fonction. document.getElementsByTagName() Retourne un tableau d’éléments correspondant à la balise passée en argument. Attention : Comme indiqué, la plupart de ces fonctions renvoient une liste d’éléments, même si elles ne trouvent qu’un élément correspondant à la recherche. Ces éléments sont placés dans un tableau JavaScript, ou array. Pour obtenir un élément en particulier, nous utiliserons l’index de la case dans ce tableau. S’il n’existe qu’un élément, nous y accèderons via nom_de_la_variable[0]. Exemple : <div>
<p id=”exemple”>Exemple</p>
</div>
<script type=”text/javascript”>
var div = document.getElementById(“exemple”);
var p = document.getElementsByTagName(“p”);
alert(div);
alert(p[0]);
</script>
Le navigateur, à l’exécution de ceci, affichera la réponse [object HTMLpElement] deux fois, correspondant à l’élément HTML <p> de cet exemple. Page 7 / 11 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier Valeur des éléments et éléments enfants Pour accéder aux valeurs d’un élément, une fois celui­ci sélectionné, nous utiliserons les attributs suivants : Méthodes d’accès aux éléments element.nodeType; Renverra le type de noeud (Document, Element ou Text). element.nodeValue; Renverra la valeur du nœud dans le cas d’un nœud Element et le texte d’un nœud dans le cas d’un nœud Texte. element.nodeName; Renverra le nom du nœud actuel, soit le nom de la balise auquel il correspond. Accès aux éléments enfants Nous le voyons dans cette liste, lors de l’usage de nodeValue, nous pouvons constater que le nœud dispose de nœuds enfants. Dans ce cas, pour accéder aux nœuds plus bas que le nœud manipulé dans la hiérarchie, nous utiliserons l’attribut childNodes. Ce membre contiendra un tableau d’éléments (voir remarque sur les tableaux page précédente) correspondant aux enfants du nœud manipulé. Exemple : <div>
<p id=”exemple”>Exemple</p>
</div>
<script type=”text/javascript”>
var div = document.getElementsByTagName(“div”);
var p = div.childNodes[0];
var texte = p.childNodes[0].nodeValue;
alert(p.nodeName); alert(texte);
</script>
Le navigateur, à l’exécution de ceci, affichera la réponse p puis Exemple, correspondant à l’élément HTML <p> puis à sa valeur textuelle (dans le nœud de type Text enfant). Page 8 / 11 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier XML XML, pour Extensible Markup Language est un langage de représentation qui permet de créer la structure de données qui seront manipulées par d’autres langages. Ce langage est donc transversal à tous les langages de programmation, qui peuvent s’y greffer et l’utiliser. En ce sens, il peut s’apparenter au JSON (JavaScript Standard Object Notation) qui sert également à représenter de l’information de manière structurée. L’essence même du langage est dans son nom : ● Extensible : XML se veut par nature extensible. Vous pouvez définir vos propres balises, l’ordre dans lesquelles vous les placez, et la hiérarchie dans laquelle elles se placeront. Une autre manière de réfléchir à la notion d’extensibilité est de considérer qu’XML permet d’étendre notre notion de document. Il peut s’agir d’un fichier sur un serveur, d’un message transmis entre deux ordinateurs, d’une image, d’une vidéo ou, globalement, de tout concept qui peut être exprimé de manière textuelle. ● Markup : XML est principalement défini par ses balises, ou éléments. Les éléments crées en XML sont très similaires aux éléments manipulés jusqu’ici en HTML, mais vous pourrez également définir votre propre jeu de balises. ● Language : Tout comme le HTML ou le JSON, XML est un langage. XML est beaucoup plus flexible que HTML, mais il est important de réaliser que XML dispose d’une couche dite de méta­langage, qui permettra sur sa base de créer d’autres langages. L’exemple le plus flagrant est le RSS. Exemple : <?xml version="1.0" encoding="UTF-8"?>
<horaire>
<cours id="1102" category="informatique">
<nom>PDW Côté client</nom>
<duree>50</duree>
<professeur>CARLIER</professeur>
</cours>
</horaire>
Page 9 / 11 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier Lecture de fichier XML Requête XML HTTP Afin de lire un fichier XML en JavaScript, nous utiliserons un objet basé sur le prototype XmlHttpRequest. XmlHttpRequest est un objet JavaScript qui a été créé par Microsoft et adopté par Mozilla. Utilisation dans le cadre de ce cours L'utilisation de XmlHttpRequest nécessite de créer une instance de ce prototype, d'ouvrir une URL et d'envoyer la requête. À l’issue de cet envoi de requête, les membres du prototype response et responseXML sont peuplés. Le premier contiendra le contenu de la réponse sans formattage, le second contiendra, dans le cas de la lecture d’un fichier XML, la version formatée et hiérarchisée de la réponse. Si nous reprenons le XML en exemple à la page précédente... Exemple : <script type=”text/javascript”>
// Prototype de requête AJAX
var xmlHTTP = new XMLHttpRequest();
// Ouverture du fichier
xmlHTTP.open("GET","exemple.xml",false);
xmlHTTP.send();
// Stockage de la réponse en XML
var myXML = xmlHTTP.responseXML;
</script>
À ce moment dans l’exécution du code, xmlHTTP.response contient la réponse au format texte, et xmlHTTP.responseXML contient la version hiérarchisée des nœuds.2 2
Attention : Pour que ce code s’exécute, il faut que les fichiers soient sur un serveur et appellent les données via le protocole HTTP. Dans le cas où un fichier distant serait lu, il faut également que le serveur distant autorise l’accès à ses données depuis l’extérieur, via les headers CORS. Plus d’informations sur http://en.wikipedia.org/wiki/Cross­origin_resource_sharing. Page 10 / 11 INF A — Année académique 2014­2015 Projet de développement web : Développement côté client — Chapitre 4 / Romain Carlier Exemple final complet : <script type=”text/javascript”>
// Prototype de requête AJAX
var xmlHTTP = new XMLHttpRequest();
// Ouverture du fichier
xmlHTTP.open("GET","exemple.xml",false);
xmlHTTP.send();
// Stockage de la réponse en XML
var myXML = xmlHTTP.responseXML;
// Lecture de tous les cours
var cours = myXML.getElementsByTagName('cours');
for(var i = 0; i < cours.length; i++){
var nom = cours[i].getElementsByTagName('nom')[0];
document.write('Cours trouvé : ' + nom.childNodes[0].nodeValue);
console.log(nom.childNodes[0].nodeName);
console.log(nom.childNodes[0].nodeValue);
console.log(nom.childNodes[0].nodeType);
}
</script>
Page 11 / 11