7 年之前 · 16e42520ac
--- a/react-tuto/src/markdown.json
+++ b/react-tuto/src/markdown.json
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -0,0 +1,22 @@
 
																+<blockquote>
															
 
																+Dans le navigateur, JS dispose de l'<em>API DOM</em>. Le DOM ou <em>Document
															
 
																+Object Model</em> est la représentation, sous forme d'un "arbre", du document HTML.
															
 
																+</blockquote>
															
 
																+
															
 
																+Dans cet arbre, le "noeud" ou **élément** de plus haut niveau correspond à la balise `<html>`.
															
 
																+Ce noeud "racine" a des noeuds "enfants" indiqués par `<head>` et `<body>`.
															
 
																+
															
 
																+Tape ceci dans la console :
															
 
																+```javascript
															
 
																+console.log(document.getElementsByTagName('html'))
															
 
																+```
															
 
																+
															
 
																+Ici on a utilisé `getElementsByTagName()` qui permet de récupérer **tous** les noeuds
															
 
																+correspondant à une certaine balise (tag). Il y a forcément **une seule** balise
															
 
																+`<html>` dans un document valide, donc on obtient un tableau avec un élément.
															
 
																+
															
 
																+Tu dois apparaître quelque chose comme `[html]`. Clique dessus pour le "déplier".
															
 
																+
															
 
																+Tu peux constater que cet élément/noeud a de nombreuses propriétés, comme `children` (où
															
 
																+on trouve logiquement les noeuds `head` et `body`), `innerHTML` (le contenu HTML),
															
 
																+ou encore `style` (les propriétés CSS).
															
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -0,0 +1,17 @@
 
																+Ajoute ceci au contenu de `empty.html`, puis recharge :
															
 
																+
															
 
																+```html
															
 
																+<div id="contenu"></div>
															
 
																+<script>
															
 
																+var divContenu = document.getElementById('contenu');
															
 
																+divContenu.innerHTML = 'Contenu ajouté avec JavaScript';
															
 
																+</script>
															
 
																+```
															
 
																+
															
 
																+Dans l'exemple précédent, `getElementsByTagName()` nous permettait d'obtenir
															
 
																+tous les éléments correspondant à une balise.
															
 
																+
															
 
																+<blockquote>Ici on utilise <code>getElementById()</code> pour récupérer un élément, via l'attribut <code>id</code> spécifié
															
 
																+dans sa balise ouvrante.
															
 
																+On manipule ensuite son contenu, en assignant une valeur à la propriété <code>innerHTML</code>.
															
 
																+</blockquote>
															
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -0,0 +1,22 @@
 
																+Dans l'exemple précédent, modifie l'attribut `id` de la `div`, **sans modifier**
															
 
																+le JavaScript, et vois ce qui se passe dans la console. Tu dois obtenir une erreur :
															
 
																+
															
 
																+    empty.html:17 Uncaught TypeError: Cannot set property 'innerHTML' of null
															
 
																+
															
 
																+<blockquote>
															
 
																+Si l'élement ciblé n'est pas trouvé, <code>getElementById()</code> renvoie <code>null</code>
															
 
																+(une autre valeur courante en JS, à distinguer de <code>undefined</code>).
															
 
																+</blockquote>
															
 
																+
															
 
																+Il faut donc être prudent :
															
 
																+* Soit être très rigoureux, et modifier en même temps le HTML et le JS pour que les `id`
															
 
																+correspondent.
															
 
																+* Ou bien, si par exemple on récupère du HTML d'une source externe, et qu'on n'est pas sûr
															
 
																+que l'élément existe, tester sa valeur avant de le modifier :
															
 
																+
															
 
																+```javascript
															
 
																+var element = document.getElementById('element-inconnu');
															
 
																+if(element !== null) {
															
 
																+  element.innerHTML = "Contenu ajouté si l'élément existe";
															
 
																+}
															
 
																+```
															
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,5 +0,0 @@
 
																-### Yop Yop
															
 
																-
															
 
																-```java
															
 
																-int anInteger = 4;
															
 
																-```