7 years ago · 38c210b6b6
--- a/index.html
+++ b/index.html
@@ -60,10 +60,16 @@
 
				     .pagination {
			
 
				       display: inline-block;
			
 
				     }
			
 
				-    .breadcrumb::before {
			
 
				+    .breadcrumb:before {
			
 
				       color: #888;
			
 
				       margin-top: -4px;
			
 
				     }
			
 
				+    .page li {
			
 
				+      margin-bottom: 6px;
			
 
				+    }
			
 
				+    .page blockquote {
			
 
				+      border-left: 5px solid #ffb74d;
			
 
				+    }
			
 
				   </style>
			
 
				 
			
 
				 </head>
			
--- a/react-tuto/src/index.js
+++ b/react-tuto/src/index.js
@@ -5,21 +5,26 @@ import { Switch, Route, HashRouter, Link } from 'react-router-dom';
 
				 const markdown = require('./markdown.json');
			
 
				 const intro = `
			
 
				 Cette appli est un petit guide pour débuter en JavaScript, qui s'adresse à ceux
			
 
				-qui connaissent déjà un autre langage.
			
 
				+qui connaissent déjà un autre langage - Java en l'occurence.
			
 
				 
			
 
				-On ne va pas rentrer dans les détails du langage, mais plutôt présenter les
			
 
				-bases nécessaires pour interagir avec une page web.
			
 
				+On va présenter les bases nécessaires pour interagir avec une page web, sans
			
 
				+entrer dans les détails du langage.
			
 
				+
			
 
				+Précisons que le fait qu'il soit disponible sur tous les navigateurs et machines
			
 
				+(ordinateurs, tablettes, smartphones), fait de JavaScript la plate-forme d'exécution
			
 
				+de programmes **la plus répandue**.
			
 
				 `;
			
 
				 
			
 
				 class Page extends React.Component {
			
 
				   componentDidMount() {
			
 
				     Prism.highlightAll();
			
 
				+    $('.page ul').addClass('browser-default');
			
 
				   }
			
 
				   render() {
			
 
				     const { title, content } = this.props.page;
			
 
				     const { section } = this.props;
			
 
				     return (
			
 
				-      <div>
			
 
				+      <div className="page">
			
 
				         <div>
			
 
				           <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>
			
@@ -27,7 +32,7 @@ class Page extends React.Component {
 
				         </div>
			
 
				 
			
 
				         <h4 className="header orange-text">{title}</h4>
			
 
				-        <ReactMarkdown source={content} />
			
 
				+        <ReactMarkdown source={content} escapeHtml={false} />
			
 
				       </div>
			
 
				     );
			
 
				   }
			
--- a/react-tuto/src/markdown.json
+++ b/react-tuto/src/markdown.json
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -0,0 +1,14 @@
 
				+Ouvre le fichier `empty.html`. A part l'entête, c'est vide. &Agrave; toi de jouer !
			
 
				+
			
 
				+Commence par ajouter du contenu entre les tags `<body>` et `</body>`,
			
 
				+sous la section "CONTENU". Un bouton par exemple :
			
 
				+```html
			
 
				+<button onclick="alert('Hi!')">Click me</button>
			
 
				+```
			
 
				+Après l'ajout, recharge cette page, puis clique le bouton pour voir.
			
 
				+
			
 
				+Cela peut déjà te donner une idée de l'utilité de JavaScript :
			
 
				+
			
 
				+<blockquote>
			
 
				+JS a été créé pour <strong>ajouter de l'interactivité</strong> aux pages web.
			
 
				+</blockquote>
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,11 +0,0 @@
 
				-Ouvre le fichier `empty.html`.
			
 
				-
			
 
				-Tu n'y verras pas grand chose. C'est normal, ça va être à toi de jouer !
			
 
				-
			
 
				-Commence par ajouter du contenu entre les tags `<body>` et `</body>`, sous la section "CONTENU". Un bouton par exemple :
			
 
				-```html
			
 
				-<button>Whatever you like</button>
			
 
				-```
			
 
				-Après l'ajout, recharge cette page.
			
 
				-
			
 
				-Tu verras normalement tes ajouts s'afficher sur la moitié droite de l'écran&nbsp;! Passe à l'étape suivante.
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -0,0 +1,15 @@
 
				+Le bouton ajouté précédemment permet l'affichage d'un message quand on le
			
 
				+clique, via la fonction `alert()` de JavaScript.
			
 
				+
			
 
				+Cette fonction fait partie de l'**API** offerte par le navigateur, à distinguer
			
 
				+du **langage** lui-même (tout comme **Java** dont l'API ne se confond pas avec
			
 
				+le langage).
			
 
				+
			
 
				+<blockquote>
			
 
				+  Le navigateur est <strong>un</strong> des environnements d'exécution du JS.
			
 
				+</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.
			
 
				+
			
 
				+La fonction `alert()` est disponible dans le contexte du navigateur, mais pas sous Node.js.
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -0,0 +1,14 @@
 
				+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
			
 
				+parenthèses.
			
 
				+
			
 
				+Avant de recharger, ouvre les **outils de développement** de ton navigateur.
			
 
				+* Chrome et Opera : `Ctrl+Shift+I` sur PC ou `Cmd+Shift+I`
			
 
				+* Firefox : F12
			
 
				+
			
 
				+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.
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -0,0 +1,14 @@
 
				+Dans `empty.html`, ajoute ceci, en a sous la section "SCRIPTS", puis recharge :
			
 
				+```html
			
 
				+<script>
			
 
				+var prenom = "TonPrenomIci";
			
 
				+var dateDeNaissance = 1990;
			
 
				+var message = "Salut " + prenom + ", tu es né en " + dateDeNaissance;
			
 
				+console.log(message);
			
 
				+</script>
			
 
				+```
			
 
				+
			
 
				+<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>
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -0,0 +1,15 @@
 
				+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.
			
 
				+
			
 
				+Tape directement ceci dans la console pour voir :
			
 
				+```javascript
			
 
				+a=5
			
 
				+console.log(a)
			
 
				+```
			
 
				+<blockquote>
			
 
				+Il faut <strong>absolument</strong> éviter de faire ça quand on programme "pour de vrai".
			
 
				+</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).
			
 
				+
			
 
				+On l'active en insérant `"use strict"` au début de son programme.
			
--- a/react-tuto/src/tmp/2.
+++ b/react-tuto/src/tmp/2.
@@ -0,0 +1,4 @@
 
				+Quelques-unes des caractéristiques de JavaScript :
			
 
				+* C'est un langage de **script**, dynamique.
			
 
				+* Il est **interprété**, contrairement à Java qui est compilé.
			
 
				+* 
			
--- a/react-tuto/src/tmp/3pouet.md
+++ b/react-tuto/src/tmp/3pouet.md