7 lat temu · 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;
			
 
				-```