Ajout section sur les tableaux

index.html

@@ -60,9 +60,17 @@
     .pagination {
       display: inline-block;
     }
-    .breadcrumb:before {
+    .breadcrumb-wrapper .breadcrumb i {
+      font-size: 20px;
+    }
+    .breadcrumb {
+      font-size: 16px;
+    }
+    a.breadcrumb::before,
+    span.breadcrumb::before {
       color: #888;
-      margin-top: -4px;
+      margin: -4px 2px 0 2px;
+      font-size: 22px;
     }
     .page li {
       margin-bottom: 6px;

react-tuto/src/index.js

@@ -25,7 +25,7 @@ class Page extends React.Component {
     const { section } = this.props;
     return (
       <div className="page">
-        <div>
+        <div className="breadcrumb-wrapper">
           <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
           <Link to={section.path} className="breadcrumb light-blue-text">{section.title}</Link>
           <span className="breadcrumb grey-text">{title}</span>
@@ -42,7 +42,7 @@ class Home extends React.Component {
   render() {
     return (
       <div>
-        <div>
+        <div className="breadcrumb-wrapper">
           <span className="breadcrumb light-blue-text"><i className="material-icons">home</i></span>
           <span className="breadcrumb grey-text">Accueil</span>
         </div>
@@ -60,7 +60,7 @@ function getSection(sectionIndex) {
   const section = markdown[sectionIndex];
   return () => (
     <div>
-      <div>
+      <div className="breadcrumb-wrapper">
         <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
         <span className="breadcrumb grey-text">{section.title}</span>
       </div>

react-tuto/src/markdown/1. Les bases/2. JS dans le navigateur.md

@@ -10,6 +10,7 @@ le langage).
 </blockquote>
 
 C'est le plus répandu, mais pas le seul : ainsi <a target="_blank" href="https://nodejs.org">Node.js</a>
-permet d'écrire des serveurs web en JS.
+permet d'écrire des serveurs web en JS. Même langage, mais des API différentes :
 
-La fonction `alert()` est disponible dans le contexte du navigateur, mais pas sous Node.js.
+* La fonction `alert()` est disponible dans le contexte du navigateur, mais pas sous Node.js.
+* Inversement, Node.js dispose de fonctions d'accès aux fichiers, à des bases de données, mais pas JS dans le navigateur !

react-tuto/src/markdown/1. Les bases/3. La console.md

@@ -1,7 +1,7 @@
 La fonction `alert()` est parfois utile, mais pas optimale en termes d'UX
 (ces "popups" à fermer sont agaçantes).
 
-Dans `empty.html`, remplace `alert` par `console.log`, en gardant l'argument entre
+Dans le bouton créé précédemment, remplace `alert` par `console.log`, en gardant l'argument entre
 parenthèses.
 
 Avant de recharger, ouvre les **outils de développement** de ton navigateur.
@@ -11,4 +11,6 @@ Avant de recharger, ouvre les **outils de développement** de ton navigateur.
 Cela ouvre un panneau d'outils, avec plusieurs onglets. Va sur l'onglet "Console"
 et recharge la page : tu dois y voir s'afficher le message.
 
-`console.log()` permet d'afficher non seulement des messages, mais aussi le contenu de variables.
+<blockquote>
+<code>console.log()</code> permet d'afficher non seulement des messages, mais aussi le contenu de variables.
+</blockquote>

react-tuto/src/markdown/1. Les bases/4. Les variables.md

@@ -1,14 +1,22 @@
-Dans `empty.html`, ajoute ceci, en a sous la section "SCRIPTS", puis recharge :
+<blockquote>
+On <strong>déclare</strong> une variable avec <code>var</code>, quel que soit le
+type de données (entier, chaîne de caractères...) qu'on souhaite y mettre.
+</blockquote>
+
+Dans `empty.html`, ajoute ceci sous `<!-- SCRIPTS -->` et recharge :
 ```html
 <script>
-var prenom = "TonPrenomIci";
+var prenom;
 var dateDeNaissance = 1990;
-var message = "Salut " + prenom + ", tu es né en " + dateDeNaissance;
+var message = "Salut " + prenom + ", tu es né(e) en " + dateDeNaissance;
 console.log(message);
 </script>
 ```
 
+Ce script donne le résultat ci-dessous. Saurais-tu corriger ça ?
+```
+Salut undefined, tu es né(e) en 1990
+```
 <blockquote>
-On <strong>déclare</strong> une variable avec <code>var</code>, quel que soit le
-type de données (entier, chaîne de caractères...) qu'on souhaite y mettre.
+<code>undefined</code> est la valeur par défaut d'une variable à laquelle on n'a rien assigné.
 </blockquote>

react-tuto/src/markdown/1. Les bases/5. Les variables - suite.md

@@ -1,5 +1,5 @@
 Une variable doit en principe être déclarée avant d'être utilisée. Mais par défaut,
-JS est laxiste comparé à Java : JS dans le navigateur permet d'affecter une valeur sans la déclarer.
+JS est laxiste : JS dans le navigateur permet d'affecter une valeur sans la déclarer.
 
 Tape directement ceci dans la console pour voir :
 ```javascript
@@ -7,7 +7,8 @@ a=5
 console.log(a)
 ```
 <blockquote>
-Il faut <strong>absolument</strong> éviter de faire ça quand on programme "pour de vrai".
+Il faut <strong>absolument</strong> éviter de faire ça quand on programme "pour de vrai", et <strong>
+toujours</strong> déclarer les variables.
 </blockquote>
 En effet, JS dispose d'un "mode strict", qui proteste quand on utilise une variable non déclarée.
 Tout le monde l'utilise (ou <em>devrait</em> l'utiliser).

react-tuto/src/markdown/1. Les bases/6. Types de données - tableaux.md

@@ -0,0 +1,20 @@
+Ajoute les lignes suivantes au script précédent (avant ou après, mais toujours entre
+`<script>` et `</script>`).
+
+```javascript
+var booleen = true;
+var chaine = 'Un tableau avec des types différents';
+var entier = 3456;
+var flottant = 3.14;
+var tableau = [booleen, chaine, entier, flottant];
+console.log(tableau);
+```
+<blockquote>
+On définit un tableau par une liste d'éléments séparés par des virgules, entre crochets.
+</blockquote>
+
+Les langages de script comme PHP et JS permettent de mixer les types dans un tableau.
+Laxistes, je vous dis !
+
+C'est un des aspects des langages dits "dynamiques". Cela donne une grande souplesse.
+Mais ça oblige à faire (encore plus) attention à ce qu'on fait !