Dom, XML, Lecture de fichiers

Transcription

1 Projet de développement web : Développement côté client Chapitre 4 Dom, XML, Lecture de fichiers Page 1 / 11

2 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

3 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

4 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 windowqui agit comme un objet global, représentant la fenêtre du navigateur dans lequel vous œuvrez. Vous y accédez via la variable globale windowfournie 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

5 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 documentest 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

6 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> </head> <body> </html> </body> <title>titredelapage</title> <metacharset= UTF-8 > <p>contenu</p> 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

7 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 documentcomme 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> </div> <pid= exemple >Exemple</p> <scripttype= text/javascript > vardiv=document.getelementbyid( exemple ); varp=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

8 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, Elementou Text). element.nodename; Renverra le nom du nœud actuel, soit le nom de la balise auquel il correspond. element.nodevalue; Renverra la valeur du nœud dans le cas d un nœud Elementet le texte d un nœud dans le cas d un nœud Texte. 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> </div> <pid= exemple >Exemple</p> <scripttype= text/javascript > vardiv=document.getelementsbytagname( div ); varp=div.childnodes[0]; vartexte=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 Textenfant). Page 8 / 11

9 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 : <?xmlversion="1.0" encoding="utf-8"?> <horaire> <coursid="1102" category="informatique"> <nom>pdwcôtéclient</nom> <duree>50</duree> <professeur>carlier</professeur> </cours> </horaire> Page 9 / 11

10 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. XmlHttpRequestest un objet JavaScript qui a été créé par Microsoft et adopté par Mozilla. Utilisation dans le cadre de ce cours L'utilisation de XmlHttpRequestné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 responseet responsexmlsont 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 : <scripttype= text/javascript > // PrototypederequêteAJAX varxmlhttp=newxmlhttprequest(); // Ouverturedufichier xmlhttp.open("get","exemple.xml",false); xmlhttp.send(); // StockagedelaréponseenXML varmyxml=xmlhttp.responsexml; </script> À ce moment dans l exécution du code, xmlhttp.responsecontient la réponse au format texte, 2 et xmlhttp.responsexmlcontient la version hiérarchisée des nœuds. 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 origin_resource_sharing. Page 10 / 11

11 Exemple final complet : <scripttype= text/javascript > // PrototypederequêteAJAX varxmlhttp=newxmlhttprequest(); // Ouverturedufichier xmlhttp.open("get","exemple.xml",false); xmlhttp.send(); // StockagedelaréponseenXML varmyxml=xmlhttp.responsexml; // Lecturedetouslescours varcours=myxml.getelementsbytagname('cours'); for(vari=0; i<cours.length; i++){ varnom=cours[i].getelementsbytagname('nom')[0]; document.write('courstrouvé:' +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