{"id":1085,"date":"2020-02-05T07:45:26","date_gmt":"2020-02-05T06:45:26","guid":{"rendered":"http:\/\/labodemaths.fr\/WordPress3\/?p=1085"},"modified":"2020-02-05T18:44:01","modified_gmt":"2020-02-05T17:44:01","slug":"isn-dom-et-json","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/isn-dom-et-json\/","title":{"rendered":"ISN : DOM et JSON"},"content":{"rendered":"\n<h2>Partie A : Document Object Model ou comment manipuler la structure d&rsquo;un document HTML<\/h2>\n\n\n\n<h3>1. Mise en place<\/h3>\n\n\n\n<ul><li>Cr\u00e9er un dossier \u00ab\u00a0DOM_et_JSON\u00a0\u00bb,<\/li><li>cr\u00e9er un fichier index.html dans ce dossier et y copier le code ci-dessous. Enregistrer votre page,<\/li><li>cr\u00e9er un fichier script.js et y copier le code ci-dessous.. Enregistrer votre fichier.<\/li><\/ul>\n\n\n\n<p>Code html de la page index :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\" >\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>json et DOM&lt;\/title>\n&lt;\/head>\n&lt;body>\n  &lt;header>\n  &lt;\/header>\n&lt;article>\n&lt;\/article>\n\n&lt;\/body>\n    &lt;script src=\"script.js\">&lt;\/script>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>Code js de la page script :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/\/ Comment ins\u00e9rer un \u00e9l\u00e9ment h1 avec du conenu    \/\/\/\n\/\/\/ \u00e0 l'\u00e9l\u00e9ment header                              \/\/\/\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n\/\/ on r\u00e9cup\u00e8re le 1er \u00e9l\u00e9ment de type header dans notre document\nvar header=document.getElementsByTagName('header').item(0);\n\/\/ on peut aussi utiliser \n\/\/var header =document.querySelector('header');\n\n\/\/ on cr\u00e9e un \u00e9l\u00e9ment html de type h1\nvar mon_titre = document.createElement('h1');\n\n\/\/ on modifie ou on ins\u00e8re son contenu\n  mon_titre.textContent =\"Manipulation du DOM en JS\";\n\n\/\/ on ajouter notre \u00e9l\u00e9ment comme enfant de l'\u00e9l\u00e9ment header\nheader.appendChild(mon_titre);\n\n\/\/ on modifie une de ses propri\u00e9t\u00e9s css\nmon_titre.style.color = \"red\";\n\n\/\/ on peut modifier un attribut d'un \u00e9l\u00e9ment\nmon_titre.setAttribute(\"id\", \"mon_titre\");<\/code><\/pre>\n\n\n\n<h3>2. Structure DOM d&rsquo;une page HTML<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"500\" height=\"518\" src=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2020\/02\/image_site1.png\" alt=\"\" class=\"wp-image-1088\" srcset=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2020\/02\/image_site1.png 500w, https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2020\/02\/image_site1-290x300.png 290w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><figcaption>Arbre repr\u00e9sentant la structure d&rsquo;une page HTML.<\/figcaption><\/figure>\n\n\n\n<p>Une page HTML est un document compos\u00e9 d&rsquo;\u00e9l\u00e9ments HTML qui forment des noeuds de sa structure arborescente.<br>Un noeud peut poss\u00e9der \u00e9ventuellement des attributs et du contenu.<br>Les noeuds issus d&rsquo;un noeud constitue ses enfants :<br>le noeud &lt;html&gt; ( appel\u00e9 racine du document ) poss\u00e8de deux enfants : les noeuds &lt;head&gt; et &lt;body&gt;.<br>Les noeuds &lt;head&gt; et &lt;body&gt; sont fr\u00e8res et ont pour parent le noeud &lt;html&gt;.<br>Le noeud &lt;a&gt; a pour parent le noeud &lt;body&gt;, pour attribut un href et pour contenu Link text.<\/p>\n\n\n\n<h3>3. Manipulation du DOM avec le JS.<\/h3>\n\n\n\n<p>Ouvrir le fichier \u00ab\u00a0index.html\u00a0\u00bb dans votre navigateur.<br>A l&rsquo;aide des outils de d\u00e9veloppement, inspecter le code html de votre page.<br>Que peut-on remarquer ?<\/p>\n\n\n\n<h3>4. Exercice 1 : 5 points<\/h3>\n\n\n\n<p>Pour tout l&rsquo;exercice, on ne modifiera pas la page HTML mais uniquement la page script.js.<br>En vous inspirant de l&rsquo;exemple figurant dans le js :<\/p>\n\n\n\n<ul><li>Ins\u00e9rer un \u00e9l\u00e9ment &lt;p> \u00e0 l&rsquo;\u00e9l\u00e9ment header. Le contenu de cet \u00e9l\u00e9ment sera : Je manipule le DOM de ma page<\/li><li>ins\u00e9rer un \u00e9l\u00e9ment footer. Son contenu sera votre nom et votre pr\u00e9nom,<\/li><li>.t\u00e9l\u00e9charger l&rsquo;image ci-dessous et la placer dans le dossier contenant vos pages html et css,<\/li><li>ajouter cette image dans votre page comme enfant de l&rsquo;\u00e9l\u00e9ment article.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-file\"><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2020\/02\/image_site1-2.png\">image_site1-2<\/a><a href=\"https:\/\/labodemaths.fr\/WordPress3\/wp-content\/uploads\/2020\/02\/image_site1-2.png\" class=\"wp-block-file__button\" download>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n<h2>Partie B : une structure de donn\u00e9es en JSON<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>JavaScript Object Notation (<strong>JSON<\/strong>) est un format de donn\u00e9es textuelles d\u00e9riv\u00e9 de la notation des objets du langage JavaScript. Il permet de repr\u00e9senter de l&rsquo;information structur\u00e9e comme le permet XML par exemple.<\/p><cite>Wikip\u00e9dia<\/cite><\/blockquote>\n\n\n\n<p>Un exemple de donn\u00e9es format\u00e9e en jSON :<\/p>\n\n\n\n<p>La structure de donn\u00e9es repose sur la combinaison d&rsquo;objets ( d\u00e9clar\u00e9s entre accolades { } ) et de tableaux ( d\u00e9clar\u00e9s entre crochers [] qui permettent de stocker un ensemble de donn\u00e9es de mani\u00e8re ordonn\u00e9e ).<\/p>\n\n\n\n<p>Consid\u00e9rons par exemple, un jeu de 7 familles relatif aux figures marquantes de l&rsquo;informatique.<br>Voir : <a href=\"https:\/\/interstices.info\/dossier\/7-familles-de-linformatique\/\">https:\/\/interstices.info\/dossier\/7-familles-de-linformatique\/<\/a><br>Une carte ou un personnage est d\u00e9finie par un ensemble de propri\u00e9t\u00e9s auxquelles on associe des valeurs :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n        \"nom\":\"Hypatie d\u2019Alexandrie\",\n        \"date naissance\":\"vers 355\",\n        \"date mort\":\"415\",\n        \"biographie\":\"Philosophe, astronome et math\u00e9maticienne grecque d\u2019Alexandrie. Elle est l\u2019une des premi\u00e8res math\u00e9maticiennes connues. Elle a en particulier am\u00e9lior\u00e9 les m\u00e9thodes permettant de calculer le d\u00e9placement du soleil au cours d\u2019une journ\u00e9e. On lui attribue \u00e9galement un \u00e9crit permettant la construction d\u2019un astrolabe, instrument utilis\u00e9 pour calculer la date et l\u2019heure en se basant sur les positions des \u00e9toiles et des plan\u00e8tes, ou inversement de pr\u00e9dire la position des plan\u00e8tes.\"\n          }<\/code><\/pre>\n\n\n\n<p>Une famille est d\u00e9finie son nom et par un ensemble de cartes : <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n      \"famille\": \"Math\u00e9matiques &amp; Informatique\",\n      \"cartes\": [\n          {\n        \"nom\":\"Hypatie d\u2019Alexandrie\",\n        \"date naissance\":\"vers 355\",\n        \"date mort\":\"415\",\n        \"biographie\":\"Philosophe, astronome et math\u00e9maticienne grecque d\u2019Alexandrie. Elle est l\u2019une des premi\u00e8res math\u00e9maticiennes connues. Elle a en particulier am\u00e9lior\u00e9 les m\u00e9thodes permettant de calculer le d\u00e9placement du soleil au cours d\u2019une journ\u00e9e. On lui attribue \u00e9galement un \u00e9crit permettant la construction d\u2019un astrolabe, instrument utilis\u00e9 pour calculer la date et l\u2019heure en se basant sur les positions des \u00e9toiles et des plan\u00e8tes, ou inversement de pr\u00e9dire la position des plan\u00e8tes.\"\n          },\n        {\n        \"nom\":\"George Boole\",\n        \"date naissance\":\"1815\",\n        \"date mort\":\"1864\",\n        \"biographie\":\"Math\u00e9maticien britannique. Il avait pour ambition de mettre en \u00e9quation les concepts et les id\u00e9es. \u00c0 l\u2019origine de la logique moderne, qu\u2019il voulait rendre autonome de la philosophie, il cr\u00e9e l\u2019alg\u00e8bre qui porte son nom et qui n\u2019accepte que deux valeurs : 0 et 1. Cela vous rappelle quelque chose ?\"\n          }\n      ]\n    }<\/code><\/pre>\n\n\n\n<p>Le jeu est constitu\u00e9 par un ensemble de familles :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cartes={\n  \n  \"familles\": [\n    {\n      \"famille\": \"Algorithme &amp; Programmation\",\n      \"cartes\": [\n          {\n        \"nom\":\"Al-Khwarizmi\",\n        \"date naissance\":\"vers 780\",\n        \"date mort\":\"vers 850\",\n        \"biographie\":\"Math\u00e9maticien persan du IXe si\u00e8cle. Pour aider ses contemporains, ce sage a \u00e9crit un livre regroupant des m\u00e9thodes claires, \u00e0 suivre pas \u00e0 pas, pour r\u00e9soudre des probl\u00e8mes math\u00e9matiques. De plus, le titre de ce livre contient l\u2019expression \u00ab Al Jabr \u00bb (lisez-le \u00e0 haute voix) ce qui explique que son nom soit associ\u00e9 \u00e0 l\u2019arriv\u00e9e de l\u2019alg\u00e8bre en Europe. Son nom fut traduit par Algoritmi en latin.\"\n          },\n        {\n        \"nom\":\"Ada Lovelace\",\n        \"date naissance\":\"1815\",\n        \"date mort\":\"1852\",\n        \"biographie\":\"Femme de sciences anglaise. En anticipant le potentiel de la machine analytique, certainement plus que Charles Babbage lui-m\u00eame, qui en \u00e9tait pourtant le concepteur, elle a propos\u00e9 de nombreux travaux sur cette derni\u00e8re, en particulier, la premi\u00e8re s\u00e9rie d\u2019instructions ex\u00e9cutables par cette machine..\"\n          }\n      ]\n    },\n    {\n      \"famille\": \"Math\u00e9matiques &amp; Informatique\",\n      \"cartes\": [\n          {\n        \"nom\":\"Hypatie d\u2019Alexandrie\",\n        \"date naissance\":\"vers 355\",\n        \"date mort\":\"415\",\n        \"biographie\":\"Philosophe, astronome et math\u00e9maticienne grecque d\u2019Alexandrie. Elle est l\u2019une des premi\u00e8res math\u00e9maticiennes connues. Elle a en particulier am\u00e9lior\u00e9 les m\u00e9thodes permettant de calculer le d\u00e9placement du soleil au cours d\u2019une journ\u00e9e. On lui attribue \u00e9galement un \u00e9crit permettant la construction d\u2019un astrolabe, instrument utilis\u00e9 pour calculer la date et l\u2019heure en se basant sur les positions des \u00e9toiles et des plan\u00e8tes, ou inversement de pr\u00e9dire la position des plan\u00e8tes.\"\n          },\n        {\n        \"nom\":\"George Boole\",\n        \"date naissance\":\"1815\",\n        \"date mort\":\"1864\",\n        \"biographie\":\"Math\u00e9maticien britannique. Il avait pour ambition de mettre en \u00e9quation les concepts et les id\u00e9es. \u00c0 l\u2019origine de la logique moderne, qu\u2019il voulait rendre autonome de la philosophie, il cr\u00e9e l\u2019alg\u00e8bre qui porte son nom et qui n\u2019accepte que deux valeurs : 0 et 1. Cela vous rappelle quelque chose ?\"\n          }\n      ]\n    }\n    \n  ]\n}\n<\/code><\/pre>\n\n\n\n<h3>1. Mise en place<\/h3>\n\n\n\n<p>Ins\u00e9rer le code suivant dans votre page html \u00e0 la suite du pr\u00e9c\u00e9dent appel au script :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"script1.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<p>Cr\u00e9er une nouvelle page script1.js et y ins\u00e9rer le code json correspondant \u00e0 notre famille d&rsquo;informaticiens.<\/p>\n\n\n\n<h3>2. R\u00e9cup\u00e9rer les \u00e9l\u00e9ments dans la hi\u00e9rarchie d&rsquo;un objet json.<\/h3>\n\n\n\n<p>Ins\u00e9rer le code suivant \u00e0 la fin du script2.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>alert(cartes[\"familles\"]);<\/code><\/pre>\n\n\n\n<p>Enregistrer et actualiser votre page index.html.<\/p>\n\n\n\n<p>Tester ensuite les commandes suivantes :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>alert(cartes[\"familles\"][0]);\nalert(cartes[\"familles\"][0][\"famille\"]);\nalert(cartes[\"familles\"][0][\"cartes\"][0][\"nom\"]);<\/code><\/pre>\n\n\n\n<h3>Exercice 2 : 5 points<\/h3>\n\n\n\n<p>Comment doit-on modifier la derni\u00e8re commande pour afficher la biographie de George Boole ?<\/p>\n\n\n\n<h2>Partie C : TP<\/h2>\n\n\n\n<h3>1. Mise en place.<\/h3>\n\n\n\n<p>Supprimer les diff\u00e9rentes commandes alert() du script1.js, ins\u00e9rer le code suivant \u00e0 la fin du script1.js.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function affichage_carte(i){\nvar carte;\nvar nom;\nvar dates;\nvar bio;\n    \n}\n\naffichage_carte(1);<\/code><\/pre>\n\n\n\n<p>Compl\u00e9ter cette fonction pour qu&rsquo;en fonction de la valeur de i, votre page HTML affiche :<\/p>\n\n\n\n<p>&#8211; en h1 : le nom de la personne,<br>&#8211; en h2 : ses dates de naissances et mort,<br>&#8211; en p : sa biographie<\/p>\n\n\n\n<p>Pour aller plus loin, r\u00e9cup\u00e9rer les images correspondantes sur <a href=\"https:\/\/interstices.info\/dossier\/7-familles-de-linformatique\/\">https:\/\/interstices.info\/dossier\/7-familles-de-linformatique\/<\/a> et modifier votre script pour qu&rsquo;il affiche l&rsquo;image correspondante.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Partie A : Document Object Model ou comment manipuler la structure d&rsquo;un document HTML 1.&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/labodemaths.fr\/WordPress3\/isn-dom-et-json\/\">Read the post<span class=\"screen-reader-text\">ISN : DOM et JSON<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":1088,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[58],"tags":[],"_links":{"self":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1085"}],"collection":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/comments?post=1085"}],"version-history":[{"count":5,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1085\/revisions"}],"predecessor-version":[{"id":1097,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1085\/revisions\/1097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/1088"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=1085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=1085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=1085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}