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 @@