From 33d3f5386ab37039257be9a9ec0baafd06f50282 Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Thu, 26 Mar 2015 17:36:34 +0100
Subject: [PATCH] Formation JS, ajout slides suppl.

---
 javascript/base/cover.md            |  2 ++
 javascript/base/fonctions-1.md      |  6 ++--
 javascript/base/fonctions-2.md      | 23 ++++++++++-----
 javascript/base/fonctions-3.md      | 24 ++++++++++++---
 javascript/base/fonctions-4.md      | 23 +++++++++++++++
 javascript/base/heritage-1.md       | 29 +++++++++++++++++++
 javascript/base/historique.md       |  2 +-
 javascript/base/index.html          | 45 +++++++++++++++++++++++------
 javascript/base/index.md            | 28 ------------------
 javascript/base/langage.md          |  6 ++--
 javascript/base/objets-1.md         | 32 ++++++++++++++++++++
 javascript/base/objets-2.md         | 31 ++++++++++++++++++++
 javascript/base/plan.md             |  4 +--
 javascript/base/structures-1.md     |  2 --
 javascript/base/structures-2.md     |  2 --
 javascript/base/structures-3.md     |  4 +--
 javascript/base/tableaux-1.md       |  2 --
 javascript/base/tableaux-2.md       |  3 --
 javascript/base/variables-1.md      |  6 ++--
 javascript/base/variables-2.md      |  2 --
 javascript/cadoles-remark-macros.js | 10 -------
 javascript/cadoles-theme.css        | 32 +++++++++++++-------
 22 files changed, 224 insertions(+), 94 deletions(-)
 create mode 100644 javascript/base/fonctions-4.md
 create mode 100644 javascript/base/heritage-1.md
 delete mode 100644 javascript/base/index.md
 create mode 100644 javascript/base/objets-1.md
 create mode 100644 javascript/base/objets-2.md
 delete mode 100644 javascript/cadoles-remark-macros.js

diff --git a/javascript/base/cover.md b/javascript/base/cover.md
index 44ae479..41ae252 100644
--- a/javascript/base/cover.md
+++ b/javascript/base/cover.md
@@ -1,3 +1,5 @@
+class: middle, center
+
 # .cadoles-blue[Formation Javascript]
 
 ## .cadoles-blue[EOLE]
diff --git a/javascript/base/fonctions-1.md b/javascript/base/fonctions-1.md
index 3174e4d..29a3d68 100644
--- a/javascript/base/fonctions-1.md
+++ b/javascript/base/fonctions-1.md
@@ -1,7 +1,5 @@
-# .cadoles-slide-title[Fonctions (1/3)]
-.cadoles-clearfix[
+# .cadoles-slide-title[Fonctions (1/4)]
 **Déclaration et invocation**
-]
 ```js
 // Déclaration
 function myFunc() {
@@ -16,7 +14,7 @@ var myFunc2 = function() {
 myFunc();  // -> 'Hello from myFunc'
 myFunc2(); // -> 'Hello from myFunc2'
 ```
-**Arguments**
+**Les arguments**
 
 Comme les variables, les arguments d'une fonction en Javascript ne sont pas typés, et leur nombre n'est pas fixe.
 ```js
diff --git a/javascript/base/fonctions-2.md b/javascript/base/fonctions-2.md
index 57190a0..401cfe3 100644
--- a/javascript/base/fonctions-2.md
+++ b/javascript/base/fonctions-2.md
@@ -1,10 +1,22 @@
-# .cadoles-slide-title[Fonctions (2/3)]
+# .cadoles-slide-title[Fonctions (2/4)]
 
-.cadoles-clearfix[
-**La variable `arguments`**
-]
+**Déclaration et portée des variables**
+```js
+var outer = 'foo';
+
+var myFunc = function() {
+  var inner = 'bar';
+  console.log(outer, inner);
+};
+
+console.log(inner)    // -> Soulève une erreur, variable non définie
+
+myFunc();             // -> 'foo' 'bar';
+```
+**La variable spéciale `arguments`**
 
 Dans le contexte d'exécution d'un fonction, la variable `arguments` permet de manipuler les arguments, même si ceux ci n'ont pas été déclarés par la fonction.
+
 ```js
 function myFunc() {
   console.log(arguments.length, arguments[0], arguments[1]);
@@ -13,6 +25,3 @@ function myFunc() {
 myFunc('arg1', 'arg2');   // Affiche '2 "arg1" "arg2"' dans la console
 myFunc();                 // Affiche '0 undefined undefined' dans la console
 ```
-**Contexte d'exécution et `this`**
-
-En Javascript, le mot clé `this` permet d'obtenir une référence vers le contexte d'exécution.
diff --git a/javascript/base/fonctions-3.md b/javascript/base/fonctions-3.md
index f66b1f6..85bdd97 100644
--- a/javascript/base/fonctions-3.md
+++ b/javascript/base/fonctions-3.md
@@ -1,8 +1,24 @@
-# .cadoles-slide-title[Fonctions (3/3)]
+# .cadoles-slide-title[Fonctions (3/4)]
+
+**Contexte d'exécution et `this`**
+
+En Javascript, le mot clé `this` permet d'obtenir une référence vers le contexte d'exécution.
+
+Ce contexte est **dynamique** selon la méthode d'invocation de la fonction.
 
-.cadoles-clearfix[
-**"Levage" de fonctions**
-]
 ```js
 
+console.log(this);  // -> Window
+
+var showThis = function() {
+  console.log(this);
+};
+
+showThis();         // -> Window
+
+var obj = {
+  "showThis": showThis
+};
+
+obj.showThis();      // -> obj
 ```
diff --git a/javascript/base/fonctions-4.md b/javascript/base/fonctions-4.md
new file mode 100644
index 0000000..8d8c4fd
--- /dev/null
+++ b/javascript/base/fonctions-4.md
@@ -0,0 +1,23 @@
+# .cadoles-slide-title[Fonctions (4/4)]
+
+**Manipulation du contexte d'exécution et injection d'arguments**
+
+```js
+var showThisAndArgs = function() {
+  console.log(this, arguments);
+};
+
+showThisAndArgs();                                  // -> Window, []
+
+// Lier un fonction à un contexte
+var myContext = {};
+var bound = showThisAndArgs.bind(myContext);
+
+bound();                                            // -> myContext, []
+
+// Invoquer une fonction en modifiant son contexte et/en injectant des arguments
+
+showThisAndArgs.call(myContext, 'arg1', 'arg2');    // -> myContext, ['arg1', 'arg2']
+showThisAndArgs.apply(myContext, ['arg1', 'arg2']); // -> myContext, ['arg1', 'arg2']
+
+```
diff --git a/javascript/base/heritage-1.md b/javascript/base/heritage-1.md
new file mode 100644
index 0000000..65f33e4
--- /dev/null
+++ b/javascript/base/heritage-1.md
@@ -0,0 +1,29 @@
+# .cadoles-slide-title[Héritage et chaîne prototypale]
+
+Javascript est un langage objet orienté **prototype**.
+
+**Constructeur et opérateur `new`**
+```js
+function Person(name) {
+  this.name = name;
+}
+
+// "Méthode" d'instance
+Person.prototype.sayHello = function() {
+  return 'Hello, my name is ' + this.name;
+};
+
+// On créait une instance de Person
+var p = new Person('John Doe');
+
+console.log(p.name);
+console.log(p.sayHello());   // -> 'Hello, my name is John Doe'
+
+```
+**Ce qui peut déstabiliser:**
+.cadoles-list.cadoles-small[
+
+- Les méthodes et propriétées privées n'existent pas.
+- Le prototype d'un objet peut être modifié/remplacé en cours d'exécution (les objets **déjà** seront également impactés).
+
+]
diff --git a/javascript/base/historique.md b/javascript/base/historique.md
index 3d4dab5..a8d5d1c 100644
--- a/javascript/base/historique.md
+++ b/javascript/base/historique.md
@@ -1,6 +1,6 @@
 # .cadoles-slide-title[Historique]
 
-.cadoles-list.cadoles-clearfix[
+.cadoles-list[
 
 - Créé en 1995 par [Brendan Eich](https://fr.wikipedia.org/wiki/Brendan_Eich) pour [Netscape](https://fr.wikipedia.org/wiki/Netscape_Communications);
 - Normalisé par le standard [ECMAScript](https://fr.wikipedia.org/wiki/ECMAScript) en juin 1997;
diff --git a/javascript/base/index.html b/javascript/base/index.html
index f8c5ded..eb071de 100644
--- a/javascript/base/index.html
+++ b/javascript/base/index.html
@@ -4,28 +4,55 @@
     <title>Cadoles - Formation Javascript</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <style type="text/css">
-      @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
-      @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
-      @import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
-
       body {
-          font-family: 'Droid Sans';
+          font-family: 'Droid Sans', 'Ubuntu Sans', 'sans-serif';
       }
       h1, h2, h3 {
-        font-family: 'Caviar Dream', 'Droid Sans';
+        font-family: 'Caviar Dream', 'Droid Sans', 'Ubuntu Sans', 'sans-serif';
         font-weight: normal;
       }
-      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
+      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono', monospace; }
     </style>
     <link href="../cadoles-theme.css" rel="stylesheet">
   </head>
   <body>
     <script src="../bower_components/remark/out/remark.js"></script>
-    <script src="../cadoles-remark-macros.js"></script>
     <script type="text/javascript">
+
+      var slides = [
+        'cover',
+        'plan',
+        'historique',
+        'langage',
+        'variables-1',
+        'variables-2',
+        'structures-1',
+        'structures-2',
+        'structures-3',
+        'objets-1',
+        'objets-2',
+        'fonctions-1',
+        'fonctions-2',
+        'fonctions-3',
+        'fonctions-4',
+        'tableaux-1',
+        'tableaux-2',
+        'heritage-1'
+      ];
+
       var slideshow = remark.create({
-        sourceUrl: 'index.md'
+        source: slides.map(fetchSlide).join('\n---\n'),
+        highlightStyle: 'github',
+        highlightLanguage: 'javascript'
       });
+
+      function fetchSlide(slideName) {
+        var req = new XMLHttpRequest();
+        req.open('GET', slideName+'.md', false);
+        req.send();
+        return req.responseText.replace(/\r\n/g, '\n');
+      };
+
     </script>
   </body>
 </html>
diff --git a/javascript/base/index.md b/javascript/base/index.md
deleted file mode 100644
index 1da6ffe..0000000
--- a/javascript/base/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
-class: middle, center
-![:include](cover.md)
----
-![:include](plan.md)
----
-![:include](historique.md)
----
-![:include](langage.md)
----
-![:include](variables-1.md)
----
-![:include](variables-2.md)
----
-![:include](structures-1.md)
----
-![:include](structures-2.md)
----
-![:include](structures-3.md)
----
-![:include](fonctions-1.md)
----
-![:include](fonctions-2.md)
----
-![:include](fonctions-3.md)
----
-![:include](tableaux-1.md)
----
-![:include](tableaux-2.md)
diff --git a/javascript/base/langage.md b/javascript/base/langage.md
index b0f174f..4addc7b 100644
--- a/javascript/base/langage.md
+++ b/javascript/base/langage.md
@@ -1,9 +1,11 @@
 # .cadoles-slide-title[Le langage]
 
-.cadoles-list.cadoles-clearfix[
+.cadoles-list[
+
 - Variables
 - Structures de contrôles
+- Objets
 - Fonctions
 - Tableaux
-- Objets
+
 ]
diff --git a/javascript/base/objets-1.md b/javascript/base/objets-1.md
new file mode 100644
index 0000000..0d5c510
--- /dev/null
+++ b/javascript/base/objets-1.md
@@ -0,0 +1,32 @@
+# .cadoles-slide-title[Objets (1/2)]
+**Déclaration et manipulation**
+```js
+// Notation Javascript classique
+var obj = {
+  pro1: 1,
+  prop2: {
+    subProp1: "foo"
+  },
+  prop3: "bar",
+  prop4: function() { console.log('Hello Word !'); }
+};
+
+// Notation JSON stricte
+obj = {
+  "pro1": 1,
+  "prop2": {
+    "subProp1": "foo"
+  },
+  "prop3": "bar",
+  "prop4": function() { console.log('Hello Word !'); }
+};
+
+// Accès et manipulation des propriétés
+obj.prop1 = 2;
+obj['prop1'] = 3;
+
+obj.prop2.subProp1 = "hello world !";
+obj['prop2']['subProp1'] = "hello world !";
+
+obj.prop4();
+```
diff --git a/javascript/base/objets-2.md b/javascript/base/objets-2.md
new file mode 100644
index 0000000..bbe2e4b
--- /dev/null
+++ b/javascript/base/objets-2.md
@@ -0,0 +1,31 @@
+# .cadoles-slide-title[Objets (2/2)]
+
+**Itération sur les propriétés**
+```js
+
+var obj = {
+  pro1: 1,
+  prop2: 'test',
+  prop3: {}
+};
+
+// Boucle for..in
+
+var value;
+for(var key in obj) {
+  if( obj.hasOwnProperty(key) ) {
+    value = obj[key];
+    console.log('Key: ', key, 'Value:', value);
+  }
+}
+
+// Méthode Object.keys()
+
+Object.keys(obj)
+  .forEach(function(key) {
+    var value = obj[key];
+    console.log('Key: ', key, 'Value:', value);
+  })
+;
+
+```
diff --git a/javascript/base/plan.md b/javascript/base/plan.md
index ea18c5f..205d21e 100644
--- a/javascript/base/plan.md
+++ b/javascript/base/plan.md
@@ -1,6 +1,6 @@
 # .cadoles-slide-title[Plan]
 
-.cadoles-list.cadoles-clearfix[
+.cadoles-list[
 
 - Historique
 - Le langage
@@ -19,9 +19,9 @@
 - Le langage
   - Variables
   - Structures de contrôles
+  - Objets
   - Fonctions
   - Tableaux
-  - Objets
 - L'héritage prototypal
 - Modularisation
   - État des lieux
diff --git a/javascript/base/structures-1.md b/javascript/base/structures-1.md
index 5f5d88d..5c5af38 100644
--- a/javascript/base/structures-1.md
+++ b/javascript/base/structures-1.md
@@ -1,8 +1,6 @@
 # .cadoles-slide-title[ Structures de contrôle (1/3) ]
 
-.cadoles-clearfix[
 **Tests et conditions**
-]
 ```js
 // Opérateurs de comparaison: <, >, >=, <=, ==, ===, !=, !==
 
diff --git a/javascript/base/structures-2.md b/javascript/base/structures-2.md
index e15f46c..91320c9 100644
--- a/javascript/base/structures-2.md
+++ b/javascript/base/structures-2.md
@@ -1,8 +1,6 @@
 # .cadoles-slide-title[Structures de contrôle (2/3)]
 
-.cadoles-clearfix[
 **Tests, transitivité, égalité stricte et petites subtilités**
-]
 ```js
 var test;
 
diff --git a/javascript/base/structures-3.md b/javascript/base/structures-3.md
index 5600c89..2be9b26 100644
--- a/javascript/base/structures-3.md
+++ b/javascript/base/structures-3.md
@@ -1,8 +1,6 @@
 # .cadoles-slide-title[Structures de contrôle (3/3)]
 
-.cadoles-clearfix[
 **Itérations**
-]
 ```js
 for(var i = 0; i < 5; i++) {
   console.log(i);
@@ -23,6 +21,6 @@ do {
 } while(j < 5);
 
 ```
-** Instructions de contrôle des boucles **
+** Opérateurs de contrôle des boucles **
 - `break;` Sort de la boucle
 - `continue;` Interromp la boucle et passe à l'itération suivante
diff --git a/javascript/base/tableaux-1.md b/javascript/base/tableaux-1.md
index 590a007..c9be42b 100644
--- a/javascript/base/tableaux-1.md
+++ b/javascript/base/tableaux-1.md
@@ -1,8 +1,6 @@
 # .cadoles-slide-title[Tableaux (1/2)]
 
-.cadoles-clearfix[
 **Différentes notations**
-]
 ```js
 var arr = [1, 2, 3]; // A préférer
 arr = new Array(1, 2, 3);
diff --git a/javascript/base/tableaux-2.md b/javascript/base/tableaux-2.md
index 0237f50..23389ce 100644
--- a/javascript/base/tableaux-2.md
+++ b/javascript/base/tableaux-2.md
@@ -1,8 +1,5 @@
 # .cadoles-slide-title[Tableaux (2/2)]
-
-.cadoles-clearfix[
 **Méthodes de parcours et transformations**
-]
 ```js
 var arr = [1, 2, 3];
 
diff --git a/javascript/base/variables-1.md b/javascript/base/variables-1.md
index 32a85d1..d9646c8 100644
--- a/javascript/base/variables-1.md
+++ b/javascript/base/variables-1.md
@@ -1,17 +1,17 @@
 # .cadoles-slide-title[Variables (1/2)]
 
-.cadoles-clearfix[
 Javascript est un langage **faiblement typé**.
-]
 ```js
 var foo; // Une variable peut être déclarée, avec ou sans valeur
 var bar = 'hello world !';
 
+// Elle peut être globale
+myGlob = 'global';
+
 // Elle peut changer de type de valeur en cours d'exécution
 bar = 5
 
 // Incrémentation...
-
 bar += 1; // -> 6
 bar -= 2; // -> 4
 
diff --git a/javascript/base/variables-2.md b/javascript/base/variables-2.md
index ae47b39..8301474 100644
--- a/javascript/base/variables-2.md
+++ b/javascript/base/variables-2.md
@@ -1,8 +1,6 @@
 # .cadoles-slide-title[Variables (2/2)]
 
-.cadoles-clearfix[
 **Types**
-]
 ```js
 var foo;
 
diff --git a/javascript/cadoles-remark-macros.js b/javascript/cadoles-remark-macros.js
deleted file mode 100644
index 01f8587..0000000
--- a/javascript/cadoles-remark-macros.js
+++ /dev/null
@@ -1,10 +0,0 @@
-(function() {
-
-  remark.macros.include = function() {
-    var req = new XMLHttpRequest();
-    req.open('GET', this, false);
-    req.send();
-    return remark.convert(req.responseText.replace(/\r\n/g, '\n'));
-  };
-
-}());
diff --git a/javascript/cadoles-theme.css b/javascript/cadoles-theme.css
index 1afbcb4..922f5c7 100644
--- a/javascript/cadoles-theme.css
+++ b/javascript/cadoles-theme.css
@@ -14,16 +14,33 @@ ul > li {
   line-height: 1.5em;
 }
 
-.remark-slide-content {
+.remark-slide {
+  background-color: white;
   background-image: url('../beamer-skel/img/banner01.png'), url('../beamer-skel/img/logo-cadoles-01.png');
-  background-position: top center, center 98% !important;
-  background-size: contain, 150px !important;
+  background-position: top center, center calc(100% - 10px) !important;
+  background-size: contain, 100px !important;
+  background-repeat: no-repeat;
+}
+
+.remark-slide-content {
+  background-color: transparent;
 }
 
 .remark-code-line {
-  font-size: 0.85em;
+  font-size: 0.80em;
 }
 
+.remark-slide-content h1:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+.remark-slide-content h1 { display: inline-block; }
+
 .cadoles-slide-title {
   color: white;
   float: left;
@@ -31,12 +48,7 @@ ul > li {
   font-size: 50px;
   margin-top: -40px;
   margin-left: -50px;
-  margin-bottom: 50px;
-}
-
-.cadoles-slide-title:after {
-  content: '';
-  clear: both;
+  display: inline-block;
 }
 
 .cadoles-blue { color: #5379B4; }