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 @@ Cadoles - Formation Javascript - 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; }