Javascript
http://get-focus.github.io/formation-js/#/JS !== jQuery
-Les bases
Javascript
http://get-focus.github.io/formation-js/#/Présentation
Les strings
-
-
-'déjà' < 'demain' // => false
-'déjà'.localeCompare('demain') // => -1 ('déjà' avant 'demain')
-
-'déjà !'.toLocaleUpperCase() // => 'DÉJÀ !'
-'ÇA POUTRE'.toLocaleLowerCase() // => 'ça poutre'
-
-'one,two,three'.split(',') // => ['one', 'two', 'three']
-'one,,two,three'.split(/\W+/) // => ['one', 'two']
-
-'hello'.substring(1) // => 'ello'
-'hello'.slice(1, -2) // => 'el' -> [1;length-2[
-
-
+ Kesako?
+-
+
- Langage créé en 1995 pour réaliser des petits scripts dans des pages Web dans le but de les dynamiser +
- Le langage respecte l'ensemble des paradigmes orienté objet, et est basé sur un principe de prototype +
- Langage nativement supporté par tous les navigateurs Web, ce qui le rend extrêmement populaire +
- Chaque navigateur a cependant son propre moteur JS +
Les dates
-
-
-new Date // maintenant !
-new Date(y,m,d[,h,m,s,ms]) // Valeur découpée. (un peu lourd...)
-
-date.getFullYear() // JAMAIS
-date.getMonth() // NAZE Java-like qui démarre à… zéro (janvier). #ugly
-date.getDay() // PERDUUUU ! C'est le DOW (Day Of Week), 0 = dim., 6 = s
-date.getDate() // Le jour du mois. Super logique.
-date.getHours()
-date.getMinutes()
-date.getSeconds()
-date.getMilliseconds() // "Milliseconds", un seul mot : une seule initiale.
-
-// Heure locale du navigateur/système. On a les mêmes en getUTCXxx()…
-
-
+ De l'utilisation du JS
+-
+
- Utilisation au sens premier du langage: dynamiser une page HTML avec quelques scripts côté client +
- Utilisation de Jquery: simplification de fonction complexe (écoute d'évènement, manipulation du DOM ...) +
- Attention! JS !== JQuery +
- Avènement des SPA: React, Angular, Backbone, Vue ... +
- Multiplication des usages
+
-
+
- Application desktop (Electron) +
- Application mobile (Cordova, Phonegap) +
- Application mobile "native" (React native) +
- Serveur web (NodeJS) +
- ... +
+
Les dates
-
-
-// "J'ai bien lu la doc"
-date.getTime() // => ex. 1290852603042
-
-// "#superSmart"
-+date
-
-// Et sinon…
-new Date(1301733937452)
+ Standard ECMAScript (ECMA-262)
+ Il s'agit des normes Javascript écrites au cours des années.
+
+ ES5 (2009) Version la plus connue, supportée par tous les navigateurs ES 2015 (ES6) Ajoute énormément de modifications au langage ... Evolution annuelle de la norme ES 2019 Version actuelle de la norme ES next Version destinée à devenir la nouvelle norme
+
+ On voit beaucoup de « ES7 » ou « ES8 » qui traînent : en général, ça fait référence à l’« ES next » du moment.
+ Transpilage
+Le langage évoluant rapidement (tous les ans depuis 2015), les moteurs JS ne suivent pas toujours. Une étape de transpilage nous permet d'écrire notre code + avec toutes les avancées du langage, et rend cela compréhensible pour les différents moteurs JS
+-
+
- Babel: Implémente les normes ES2017 et ESnext, les publie sous forme de module pour le développeur. +
- TypeScript: Implemente tout ou partie des normes ES2017 et ESnext. Ajoute un sucre syntaxique de typage pour le langage, ainsi qu'un jeu de fonctions avancées propre à ce typage. +
Les bases
+Types primitifs
+Il y a 6 types primitifs en Javascript:
-// Mais aussi (car souci pour partir de composantes UTC) : -Date.UTC(y, m, d, h, mn, s, ms) // => numérique - - +-
+
- boolean: résultat d'une assertion logique true ou false +
- null: ne possède qu'une unique valeur null +
- undefined: représente la non-affectation d'une variable +
- number: contient l'ensemble des valeurs numéraires (entier, float, NaN, +Infinity, - Infinity) +
- string: représente une chaine de caractères à partir d'un ensemble d'élements 16bits non-signés +
- symbol: type de données uniques et inchangeables (souvent utilisé pour créer des identifiants) +
Tout le reste est "Objet" (oui oui même les tableaux...)
+Un objet avec une "call signature" est une fonction
- A retenir : Momentjs (on voit ça plus tard...) -+
Objets
+JavaScript est conçu autour d'un paradigme simple, basé sur les objets.
+Un objet est un ensemble de propriétés. Une propriété est une association entre un nom (aussi appelé clé) et une valeur.
+La valeur d'une propriété peut être une fonction, auquel cas la propriété peut être appelée « méthode ».
Les objets
+Objets
-
-let obj = { first: 'David', last: 'Lopez', age: 77 };
+
+/// Création d'un objet
+const obj = { first: 'David', last: 'Lopez', age: 77 };
+/// Utilisation des propriétés
obj.first // => 'David'
-obj['age'] // => 42
-
+obj['age'] // => 77
+/// Affectation d'une valeur à une propriété
obj.first = 'pierr';
-obj['first'] // => 'pierr'
-
+obj.first // => 'pierr'
+/// Attention si votre clé de propriété est un nombre!
obj[77] = 'roberto';
obj[77] // => 'roberto'
obj['77'] // => 'roberto'
obj.77 // => SyntaxError
-
-
+/// Parce que je fais ce que je veux depuis ES2016 :p
+obj['a'+ 12] = 'Gino';
+obj.a12; // => 'Gino' évidemment ;)
+
+
Les objets avec ES6
---let defaults = { first: 'John', last: 'Doe', age: 42 }; -let trainer = { last: 'Smith', age: 35 }; -trainer = { ...defaults, ...trainer, age: 36 } -// => { first: 'John', last: 'Smith', age: 36 } -trainers['a'+ 12] = 'Gino'; -trainers.a12; -// Gino --+Strings
+Le type String de JavaScript est utilisé pour représenter des données textuelles.
+C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16).
+Chaque élément occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite.
+La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient.
+Une String est immuable: il est impossible de la modifier une fois créée. Il est cependant possible de recréer une string à partir d'une autre string.
Les tableaux
-+Strings
++++var maString = 'Hello World!'; +maString.length // => 12 +maString[0] // => 'H' +maString[0] = 'X'; // Aucun effet. une string est immuable +maString[0] // => 'H' +/// Quelques fonctions +'déjà' < 'demain' // => false Cette comparaison ne fait pas du tout ce que vous pensez! +'déjà'.localeCompare('demain') // => -1 'déjà' est alphabétiquement avant 'demain' +'déjà !'.toLocaleUpperCase() // => 'DÉJÀ !' Renvoie une nouvelle instance en majuscule +'ÇA POUTRE'.toLocaleLowerCase() // => 'ça poutre' Renvoie une nouvelle instance en minuscule +'one,two,three'.split(',') // => ['one', 'two', 'three'] transformation en tableau selon un séparateur +'one,,two,three'.split(/\W+/) // => ['one', 'two'] transformation en tableau selon une expression régulière +'hello'.substring(1) // => 'ello' renvoie une nouvelle instance d'une partie de la chaine +'hello'.slice(1, -2) // => 'el' -> [1;length-2[ ++
Les tableaux
+Un Array est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice.
+JavaScript ne possède pas de type particulier pour représenter un tableau. En revanche, il est possible d'utiliser l'objet natif Array ainsi que ses méthodes pour manipuler des tableaux
+Les tableaux
+
let names = ['John', 'David', 'Rodrigo'];
names.length
-// => 3. R/W : astuce pour réutiliser un tableau!
+// => 3
names[0]
// => 'John'
@@ -174,13 +209,13 @@ Les tableaux
// => 13
names[9]
-// => undefined (comme 10 et 11): c'est appelé "sparse array"
-
-
+// => undefined (comme de 3 à 11): c'est appelé "sparse array"
+
+
Les tableaux
-Les tableaux
let data = [1, 2, 3]; @@ -207,256 +242,550 @@Les tableaux
-+Les tableaux en ES6
-- -let arr1 = ['one', 'two'], arr2 = ['three', 'four']; -arr1.push(...arr2) // => 4 -arr1 // => ['one', 'two', 'three', 'four'] -//le map -arr1.map(element => console.log(element)) -// for…in itère sur LES PROPRIÉTÉS ÉNUMÉRABLES de N’IMPORTE QUEL OBJET -var arr = ['hello', 'world', , 'cool']; -for (var k in arr){ console.log(k)}; // => 0, 1, 3 -// for…of itère sur les éléments d'un objet itérable -for (var k of arr){ console.log(k)}; // => hello, world, undefined, cool - --
Dates
+JavaScript ne possède pas de type primitif pour représenter des dates. Cependant l'objet Date et ses méthodes permettent de manipuler des dates et des heures au sein d'une application.
+L'objet Date possède de nombreuses méthodes pour définir, modifier, obtenir des dates. Il ne possède pas de propriétés
+JavaScript gère les dates de façon similaire à Java. (Donc assez mal...)
+Les dates sont représentées selon les nombres de millisecondes écoulées depuis le 1er janvier 1970 à 00h00:00. + L'objet Date permet de représenter des dates allant de -100 000 000 jours jusqu'à +100 000 000 jours par rapport au 1er janvier 1970 UTC.
-+"Déguiser" un objet en tableau
-
-// Toi aussi, déguise-toi en tableau ! - -var fakeArray = { 0: '!', 1: 'ça torche', 2: 'JavaScript', length: 3 }; - -fakeArray.join = [].join; fakeArray.reverse = [].reverse; -fakeArray.reverse().join(' '); -// => 'JavaScript ça torche !' ++Dates
+++// Heure locale du navigateur/système. On a les mêmes en getUTCXxx()… ++new Date() // maintenant ! +new Date(y,m,d[,h,m,s,ms]) // Valeur découpée. (un peu lourd...) -// Ou alors : -fakeArray.__proto__ = Array.prototype; -fakeArray.reverse().join(' '); -// => 'JavaScript ça torche !' +date.getYear() // JAMAIS #Bug de l'an 2000 exemple: L'année 1976 renverra 76. Mais l'année 2016 renverra 116. -_-' +date.getFullYear() // Mieux mais pas vraiment logique dans le nom... +date.getMonth() // NAZE Java-like qui démarre à… zéro (janvier). #ugly +date.getDay() // PERDUUUU ! C'est le DOW (Day Of Week), 0 = dim., 6 = sam +date.getDate() // Le jour du mois. Super logique. +date.getHours() +date.getMinutes() +date.getSeconds() +date.getMilliseconds() // "Milliseconds", un seul mot : une seule initiale. -// Méthodes « génériques » utilisables: hn -// concat, join, pop, push, reverse, shift, -// slice, sort, splice, toString, unshift. --
Vous avez le choix dans l'implémentation de la date...+
De manière générale, on préferera utiliser des libraries de dates type moment.js pour gérer des dates.
Operateurs
+| == | +true si les opérandes sont égaux après conversion en valeurs de mêmes types | +
| != | +true si les opérandes sont différents après conversion en valeurs de mêmes types. | +
| === | +true si les opérandes sont égaux et de même type. | +
| !== | +true si les opérandes ne sont pas égaux ou pas de même type. | +
| > | +true si l'opérande gauche est supérieur (strictement) à l'opérande droit. | +
| >= | +true si l'opérande gauche est supérieur ou égal à l'opérande droit. | +
| < | +true si l'opérande gauche est inférieur (strictement) à l'opérande droit. | +
| <= | +true si l'opérande gauche est inférieur ou égal à l'opérande droit. | +
Les boucles
-
-
-const ARRAY = [1,2,3,4];
-for(let i = 0, _l=ARRAY.length; i < _l; i++ ){console.log(ARRAY[i])}
-
-ARRAY.forEach(function(element, idx){console.log(element, idx)});
-
-ARRAY.map(function(element, idx){console.log(element, idx)});
-
-
+ Quelques pièges de comparaisons en JS ...
+
+
+ == ou === ?!
+
+ 42 == '42' // => true --
+ null == undefined // => true --
+ null == 0 // => false --
+ 0 == undefined // => false --
+ 0 == false // => true --
+ 1 == true // => true --
+ 42 == true // => false --
+ '0' == false // => true --
+ '' == false // => true --
+ NaN == NaN // => false --
+
+
+ C'est franchement sale...+
Pour éviter les écueils, utiliser ===
+
+
+ // avec ===, fini de jouer : vérif valeur ET TYPE !
+
+ 42 === '42' // => false
+ null === undefined // => false
+ null === 0 // => false
+ 0 === undefined // => false
+ 0 === false // => false
+ '0' === false // => false
+ NaN === NaN // => false -- rien à faire !
+
+
+ Toujours utiliser la comparaison stricte === et !==+
Opérateurs
+Les opérateurs javascripts font des conversions implicites.
+Le javascript ne plantera jamais sur une opération. En revanche, il peut vous renvoyer une valeur native comme Nan, +Infinity etc.
+
+ !42 => false
+ !!42 => true //pratique pour convertir n'importe quelle valeur en booleen
+ +'2' => 2
+ "lala" + 42 => "lala42"
+ 1/0 => Infinity
+ "lala" - 42 => NaN
+
+ {} + [] => 0 // Hum ok...
+ [] + {} => "[object Object]" // parce que why not!
+ {} + {} => "[object Object][object Object]" // Bon ça je veux bien
+ [] + [] => "" // Nan mais les gars...
+ [] - {} => NaN // -_-'
+ +[] => 0 // Ah ah
+ +[] + [] => "0" // Vous l'avez?
+ +[] + +[] => 0 // Bon ok j'arrete :=)
+ Les fonctions
+Opérateurs logiques
+Ces opérateurs servent à résoudre des expressions logiques en prenant en compte le caractère "Truthy" ou "Falsy" des valeurs de l'expression
+| && | +ET logique. Vrai si les deux expressions ont des valeur Truthy. S'arrête à la première valeur Falsy | +
| || | +OU logique. Vrai si une des deux expressions a une valeur Truthy. S'arrête à la première valeur Truthy | +
| ! | +NON logique. Faux si l'expression a une valeur Truthy. Vrai sinon. | +
Attention: les opérateurs logiques &&, || et ! fonctionnent différemment des opérateurs binaire &, | et ~.+
Pour plus d'info: La doc MDN
Truthy / Falsy
+
+"true" == true => false // la chaine de caratère "true" même après conversion n'est pas égale à true.
+"true" && true => true // la chaine de caratère "true" pour ce qui est des expression logique!!
+"true"&true => 0 // le & binaire renvoie le bit 0...
+"1" == true => true // bah oui après converstion "1" => 1 => true donc égale à true...
+ Globalement les valeurs suivantes sont Falsy :+. Le reste est Truthy.
- false
- undefined
- null
- ""
- 0
- NaN
Destructuring / Spreading
+Des opérateurs de décomposition (Spread) et d'affectation par décomposition (Destructuring) ont fait leur apparition pour manipuler plus simplement les objets et les collections.
+-
+
- La syntaxe de décomposition permet d'étendre un itérable en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les tableaux) ou de paires clés-valeurs (pour les objets). +
- L'affectation par décomposition est une expression JavaScript qui permet d'extraire des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet. +
+ Destructuring / Spreading +
-
-function maFonction() {
- return 'test';
+
+/* Arrays */
+// Initialisation d'un array
+const array = [1, 2, 3];
+// On crée un nouvel array à partir de l'ancien
+const array2 = [...array, 4, 5]; // array2 => [1,2,3,4,5]
+function f(a, b, c) {
+ return a + b + c;
}
-maFonction() // test;
-const a = () => 'test';
-a(); //test
-
-
+// On appelle la fonction à partir de l'array
+f(...array); // => 1+2+3
+// On récupère des éléments précis d'un array.
+const [a, b, c, ...rest] = array2; // a=1; b=2, c=3, rest=[4,5]
+
+
Quelques pièges de comparaisons en JS ...
++ Destructuring / Spreading +
+
+
+/* Objets */
+// Initialisation d'un objet.
+const objet = {a: 1, b: 2};
+// On crée un nouvel objet à partir de l'ancien
+const objet2 = {...objet, c: 3}; // objet2 = {a:1, b:2, c:3}
+// On récupère des éléments précis d'un objet.
+const {a, b, ...rest} = objet2; // a=1 b=2 rest={c:3}
+// On peut aussi déstructurer directement dans une fonction :
+function g({a, b, c: c2}) {
+ return a + b + c2;
+}
+g(objet2);
+
+
+ Interpolation de strings
+Les nouvelles normes ECMAScript ont permis de faire évoluer le langage et de fournir un moyen de manipuler les strings. Il est désormais possible de créer des chaines de caractères multilignes et paramétrables!
-
-== ou === ?!
-
-42 == '42' // => true --
-null == undefined // => true --
-null == 0 // => false --
-0 == undefined // => false --
-0 == false // => true --
-1 == true // => true --
-42 == true // => false --
-'0' == false // => true --
-'' == false // => true --
-NaN == NaN // => false --
-
-
+
+const person = { nom: "Ingargiola", prenom: "Thibault" };
+
+const stringAvant = 'Bonjour je suis ' + person.prenom + ' ' + person.nom;
+const stringApres= `Bonjour je suis ${objet.prenom} ${objet.nom}.
+Et le javascript c'était pas mieux avant!`;
+
+
+ Programmation en JS
Pour éviter les écueils, utiliser ===
+Les fonctions
+Les fonctions sont un peu la base de toute programmation... Le Javascript n'échappe pas à la règle.
+En JavaScript, les fonctions sont des objets de première classe. Cela signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et des méthodes, comme tous les autres objets JavaScript. Les fonctions sont des objets Function
+Afin de renvoyer une valeur, la fonction doit comporter une instruction return. Une fonction qui ne renvoie pas de valeur retourne undefined.
+Déclaration
-
-// avec ===, fini de jouer : vérif valeur ET TYPE !
-
-42 === '42' // => false
-null === undefined // => false
-null === 0 // => false
-0 === undefined // => false
-0 === false // => false
-'0' === false // => false
-NaN === NaN // => false -- rien à faire !
+
+/// Fonction standard
+function a() {
+ /// this = contexte appelant
+}
+/// Variable fonction anonyme (ne pas utiliser)
+const b = function() {
+ /// this = contexte appelant
+}
+/// Variable fonction nommée (usage assez rare)
+const c = function c() {
+ /// this = contexte appelant
+}
+/// Lambda / "fat arrow" (anonyme)
+const d = () => {
+ /// this = contexte de la déclaration
+}
+/// fonction auto-appelante (usage particulier)
+(function(){
+ /// this = contexte appelant
+})()
in et delete
-
-
+ Déclaration
+
+
+/// La syntaxe de a est un raccourci pour celle de b. (usage assez rare)
+const e {
+ a() {
+ /// this = contexte appelant
+ },
+ b: function b() {
+ /// this = contexte appelant
+ }
+}
+/// Dans une classe
+class G {
+ a() {
+ /// this = contexte appelant
+ }
+ /// Variable d'instance
+ b = () => {
+ /// this = instance de la classe
+ }
+}
+
+
+ Variables
+Il existe trois façons de déclarer des variables en javascript:
+-
+
- var: On déclare une variable dont la portée est celle de la fonction courante, éventuellement en initialisant sa valeur. +
- let: On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur. +
- const: On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule. +
var n'est plus vraiment utilisé dans les nouvelles normes. On préfèrera utiliser const dans les 3/4 des cas, et let dans les cas ou la variables est réaffectable.+
Boucles
+Depuis ECMAScript2015, le prototype ARRAY a gagné de nouvelles méthodes d'itération sur les éléments. Nous allons en présenter deux ici:
+| map | +immutable | +Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant. | +
| foreach | +mutable | +Permet d'exécuter une fonction donnée sur chaque élément du tableau. Ne renvoie rien | +
Boucles
+
+
+const ARRAY = [1,2,3,4];
-let person = { name: 'Joe', langs: ['fr', 'en'] };
-
-'name' in person // => true
-person.age = 35;
-'age' in person // => true
-person.age = null;
-'age' in person // => true
-delete person.age
-'age' in person // => false
-person.age // => undefined
-
-0 in person.langs // => true
-'0' in person.langs // => true
-person.langs[3] = 'de';
-2 in person.langs // => false
-3 in person.langs // => true
-delete person.langs[3]
-person.langs // => ['fr', 'en', undefined, undefined]
-
-
+for(let i = 0, _l=ARRAY.length; i < _l; i++ ){console.log(ARRAY[i], i)}
+
+ARRAY.forEach(function(element, idx){console.log(element, idx)});
+
+ARRAY.map(function(element, idx){console.log(element, idx)});
+
+
Falsy / Truthy
+Scope
+Les éléments créés en javascript ont une portée. Un Scope.
+Lorsqu'une variable est déclarée avec var en dehors des fonctions, elle est appelée variable globale car elle est disponible pour tout le code contenu dans le document. Lorsqu'une variable est déclarée dans une fonction, elle est appelée variable locale car elle n'est disponible qu'au sein de cette fonction.
+Avant la norme ECMAScript2015, il n'existait pas d'autre manière de déclarer des variables. Grâce aux mots clés const et let, il est possible de restreindre la portée d'une variable au bloc en cours (un bloc if par exemple)
XML
-
-
-
-
-
+ Scope
+
+
+if (true) {
+ var x = 5;
+}
+console.log(x); // x vaut 5
+if (true) {
+ let y = 5;
+}
+console.log(y); // ReferenceError: y is not defined
+
+
JSON
+Closure
+Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée (interne) est privée par rapport à la fonction (externe) qui la contient. Cela forme ce qu'on appelle une Closure.
+Étant donné qu'une fonction imbriquée est une closure, cela signifie que la fonction imbriquée peut « hériter » du scope de la fonction parente. Et donc avoir accès aux variables de cette fonction.
+Closure
+
+function externe(x) {
+ function interne(y) {
+ return x + y;
+ }
+ return interne;
+}
+var fn_interne = externe(3); // fn_interne est donc une fonction qui prend en parametre y en renvoie 3 + y
+var resultat = fn_interne(5); // donc 8
+
+var resultat1 = externe(3)(5); // renvoie 8
+ Closure
-
-{
- "menu": {
- "id": "file",
- "value": "File",
- "popup": {
- "menuitem": [
- { "value": "New", "onclick": "CreateNewDoc()" },
- { "value": "Open", "onclick": "OpenDoc()" },
- { "value": "Close", "onclick": "CloseDoc()" }
- ]
- }
- }
+
+function publicFx() {
+ let dateAppel = Date.now();
+ return function() { console.log(dateAppel); };
}
-
-
+let privilegedFx1 = publicFx();
+// Attendre un bref instant
+let privilegedFx2 = publicFx();
+// privilegedFx(1,2) sont en fait les fonctions internes construites au
+// sein de publicFx, qui grâce aux règles de portée "voient"
+// dateAppel. Elles sont *closed over* par publicFx, ce qui fait
+// que les valeurs de dateAppel au moment où les fonctions ont été
+// renvoyéees sont préservées
+privilegedFx1(); // => affiche la dateAppel du moment de la création de la fonction privilegedFx1!
+privilegedFx2(); // => affiche la dateAppel d'après !
+
+
+ Les closures sont un bon moyen de rendre privée une partie du code. Elles seront très utiles pour créer des modules. Mais on y reviendra plus tard...
Contexte
+Le contexte d'une fonction est représenté par la variable this.
+La valeur de this sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée.
+Les différentes évolutions du langage ont permis de mieux définir cette variable indépendamment de la façon dont elle est appelée : bind, fat-arrow...
+Binding implicite
+La valeur de this dépend donc de la façon dont il est appelé. De manière générale, lorsque this est utilisé dans une fonction, il aura la valeur de l'appelant.
+
+
+const monObjet = {
+ firstName: 'Thibault',
+ lastName: 'Ingargiola',
+ fullName() {
+ console.log(this.firstName + ' ' + this.lastName)
+ },
+ strictFullName() {
+ "use strict";
+ console.log(this.firstName + ' ' + this.lastName)
+ }
+};
+monObjet.fullName(); // => log Thibault Ingargiola. Dans ce cas this === monObjet
+monObjet.strictFullName(); // => IDEM
-
- Oublions jQuery
+const newFullName = monObjet.fullname; const newStrictFullName = monObjet.strictFullname;
+newFullName(); // => log undefined undefined. this vaut window.
+newStrictFullName(); // => Error!!!!!!!! this vaut undefined
+
+
+ Le problème
+Comment faire si je veux utiliser this mais que je ne maitrise pas l'appelant?
+
+
+var name = 'Mr X';
+let obj = {
+ name: 'Joe Lopez',
+ greet(whom) {
+ console.log(this);
+ console.log(this.name + ' salue ' + whom);
+ },
+ greetAll(first, second, last) {
+ console.log(this);
+ [first, second, last].forEach(this.greet);
+ }
+};
+obj.greet("les lopezs de France");
+// => 'Joe Lopez salut les lopezs de France !'
+let fx = obj.greet;
+fx("l’atelier") // => '"Mr X salue l’atelier"'
+obj.greetAll('David', 'Joe', 'Guénolé'); // => 'Mr X salue David, Mr X salue Joe, Mr X salue Guénolé'
+/// Le contexte est perdu au travers du foreach
+
+
+ Solution 1: la closure
+On fixe le contexte et on fait un appel explicite à la fonction.
+
+
+const obj = {
+ // …
+ greetAll(first, second, last) {
+ const that = this;
+ [first, second, last].forEach(function(name) {
+ that.greet(name);
+ });
+ }
+}
+
+
+ Solution 2: bind
+La fonction bind permet de déterminer le contexte d'une fonction qu'importe la façon dont elle est appelée.
+
+
+const obj = {
+ // …
+ greetAll(first, second, last) {
+ [first, second, last].forEach(this.greet.bind(this));
+ }
+}
+
+
+ Ici, on crée donc une nouvelle fonction pour les trois appels dont le contexte vaudra this.+
Solution 3: la fat arrow
+Cette notation permet de "binder" automatiquement le contexte englobant.
-
-//Avant
-const monElement = $('[data-my-selector]');
-
-//Après
-const monElement = document.querySelector('[data-my-selector]');
+
+ const obj = {
+ // …
+ greetAll(first, second, last) {
+ [first, second, last].forEach(name => this.greet(name));
+ }
+ }
-
Binding
+La fat arrow c'est la vie!
+
+
+['add', 'remove'].forEach((action) => {
+ ['change', 'status', 'error'].forEach((elt) => {
+ this[`${action}${capitalizeDefinition}${capitalize(elt)}Listener`] = (cb) => {
+ this[`${action}Listener`](`${def}:${elt}`, cb);
+ }
+ })
+});
+
+
Les outils
-Node.js
--
-
- JS côté serveur -
- Apporte plein d'outils sous forme de modules -
- npm (node package module) -
Node.js
--
-
- package.json -
- node_modules -
npm install -g ma-dependance-globale
- npm install -g rimraf
- npm install --save ma-dependance
-
Babel
-Webpack
-call et apply
+Les fonctions call et apply permettent de fixer le contexte au travers du premier argument lors de l'appel. La fonction call prendra par la suite une liste d'argument là ou apply utilisera un tableau.
+
+
+ function ajout(c, d){
+ return this.a + this.b + c + d;
+ }
-
- Debug
-
+ var o = {a:1, b:3};
+
+ ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
+
+ ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
+
+
Prototypes / Constructor
-Classes ?
--
-
- Avant ES6 pas de classe -
- JS est un langage prototypale -
- En JS tout est un objet -
- Une propriété est identifiée par une paire nom / valeur -
- Une propriété peut être une fonction -
Constructeur
--
-
- Fonctions servant à initialiser un nouvel objet. Le nom du constructeur est un peu comme « le nom de la classe »… -
- Toute fonction peut servir de constructeur : il suffit de l’appeler avec l’opérateur new. -
- Elle dispose alors d’une variable implicite this, qui représente la nouvelle « instance ». -
- L’objet créé référence son constructeur : constructor. -
Le JS objet
+On l'avait dit au début, mais le javascript n'a pas de de classe à proprement parler. C'est un langage prototypable!
Constructeur
-
-
+ Constructeur
+
+ - Fonctions servant à initialiser un nouvel objet. Le nom du constructeur est un peu comme « le nom de la classe »…
+ - Toute fonction peut servir de constructeur : il suffit de l’appeler avec l’opérateur new.
+ - Elle dispose alors d’une variable implicite this, qui représente la nouvelle « instance ».
+ - L’objet créé référence son constructeur : constructor.
+
+ Constructeur
+
+
function Person(first, last) {
- this.first = first;
- this.last = last;
+this.first = first;
+this.last = last;
}
var joeLopezPerson = new Person('Joe', 'Lopez');
@@ -466,111 +795,133 @@ Constructeur
// Si on jouait aux cons ?!
function LopezPerson(first, last) {
- this.first = first;
- this.last = last;
- return { first: 'Anne', last: 'Pas Lopez' };
+this.first = first;
+this.last = last;
+return { first: 'Anne', last: 'Pas Lopez' };
}
var oops = new LopezPerson('Henry', 'Lopez');
oops.first // => Anne
-
-
- Prototypes
--
-
- Tout constructeur a un prototype : un objet qui définit les propriétés (et donc méthodes) partagées par tous les objets que produit ce constructeur. -
- Le prototype est « vivant » : si on le triture après l’appel au constructeur, ça marche quand même ! -
- Techniquement, y’a plein d’autres trucs dans un prototype (réf. au constructeur, gestion de propriétés…). -
- On verra, plutôt vous verrez... -
Prototype
-
-
+ Prototypes
+
+ - Tout constructeur a un prototype : un objet qui définit les propriétés (et donc méthodes) partagées par tous les objets que produit ce constructeur.
+ - Le prototype est « vivant » : si on le triture après l’appel au constructeur, ça marche quand même !
+ - Techniquement, y’a plein d’autres trucs dans un prototype (réf. au constructeur, gestion de propriétés…).
+ - On verra, plutôt vous verrez...
+
+ Prototype
+
+
function Person(first, last) {
- this.first = first;
- this.last = last;
+ this.first = first;
+ this.last = last;
}
// On augmente l'existant…
Person.prototype.fullName = function fullName() {
- return this.first + ' ' + this.last;
+ return this.first + ' ' + this.last;
}
Person.prototype.greet = function greet() {
- alert('Salut je m’appelle ' + this.first);
+ alert('Salut je m’appelle ' + this.first);
}
var john = new Person('John', 'Smith');
john.fullName() // => 'John Smith'
john.greet() // 'Salut je m’appelle John'
-
-
- Prototype (Don't)
-
-
+
+
+ Prototype (Don't)
+
+
function Person(first, last) {
- this.first = first;
- this.last = last;
- this.fullName = function fullName() {
- return this.first + ' ' + this.last;
- }
- this.greet = function greet() {
- alert('Salut je m’appelle ' + this.first);
- }
+ this.first = first;
+ this.last = last;
+ this.fullName = function fullName() {
+ return this.first + ' ' + this.last;
+ }
+ this.greet = function greet() {
+ alert('Salut je m’appelle ' + this.first);
+ }
}
var john = new Person('John', 'Smith');
john.fullName() // => 'John Smith'
john.greet() // 'Salut je m’appelle John'
-
-
- Mauvaise pratique: on copie la fonction dans chaque constructeur-
Mauvaise pratique: on copie la fonction dans chaque constructeur+
Les classes ES6
+++"Déguiser" un objet en tableau
++/// Toi aussi, déguise-toi en tableau ! + +var fakeArray = { 0: '!', 1: 'ça torche', 2: 'JavaScript', length: 3 }; + +fakeArray.join = [].join; fakeArray.reverse = [].reverse; +fakeArray.reverse().join(' '); +/// => 'JavaScript ça torche !' + +// Ou alors : +fakeArray.__proto__ = Array.prototype; +fakeArray.reverse().join(' '); +// => 'JavaScript ça torche !' + +// Méthodes « génériques » utilisables: hn +// concat, join, pop, push, reverse, shift, +// slice, sort, splice, toString, unshift. ++
Classe
+Bon depuis ES2015 on a tout de même un équivalent de classe. Ce n'est que du sucre syntaxique, mais c'est quand même vachement bien!
-
+
class TodoItem extends Component {
- constructor(props, context) {
- super(props, context);
- this.state = {
- editing: false
- };
- }
-
- handleDoubleClick() {
- this.setState({ editing: true });
- }
- …
+ constructor(props, context) {
+ super(props, context);
+ this.state = {
+ editing: false
+ };
+ }
+
+ handleDoubleClick() {
+ this.setState({ editing: true });
+ }
+ …
}
-
-
- Attention il s'agit de sucre syntaxique pas d'une classe comme en Java ou .NET. Le JS reste un langage prototypale.+ +
La chaîne d'appel d'une méthode
-obj.prop ou obj['prop'] (c'est équivalent)
+ La chaîne d'appel d'une méthode
+Supposons que l'on fasse appel à l'attribut d'un objet: obj.prop
-
-
- On part de l’objet indexé (obj) -
- Si on trouve prop dans ses own properties, on s’arrête là -
- Sinon, on passe sur le prototype du niveau supérieur : celui du constructeur de l’objet en cours* -
- On reprend à l’étape 2, sauf si on était déjà sur Object.prototype, auquel cas le lookup est fini, et échoue (undefined). +
- On part de l’objet indexé (obj) +
- Si on trouve prop dans ses own properties, on s’arrête là +
- Sinon, on passe sur le prototype du niveau supérieur : celui du constructeur de l’objet en cours* +
- On reprend à l’étape 2, sauf si on était déjà sur Object.prototype, auquel cas le lookup est fini, et échoue (undefined).
*on le trouve sous:constructor.prototypeou__proto__
La preuve en live...
-
-
+
+ La preuve en live...
+
+
function Person(first, last) {
- this.first = first;
- this.last = last;
+ this.first = first;
+ this.last = last;
}
Person.prototype.fullName = function fullName() {
- return this.first + ' ' + this.last;
+ return this.first + ' ' + this.last;
};
const davidLopez = new Person('David', 'Lopez');
@@ -579,340 +930,224 @@ La preuve en live...
davidLopez.toString() // => '[object Object]', Object.prototype
Person.prototype.toString = function personToString() {
- return '#Person ' + this.fullName();
+ return '#Person ' + this.fullName();
};
davidLopez.toString() // => "#Person David Lopez"
-
-
+
+
Closure
Closure simple
-
-
-function publicFx() {
- let dateAppel = Date.now();
- return function() { console.log(dateAppel); };
-}
-let privilegedFx1 = publicFx();
-// Attendre un bref instant
-let privilegedFx2 = publicFx();
-
-// privilegedFx(1,2) sont en fait les fonctions internes construites au
-// sein de publicFx, qui grâce aux règles de portée "voient"
-// dateAppel. Elles sont *closed over* par publicFx, ce qui fait
-// que les valeurs de dateAppel au moment où les fonctions ont été
-// renvoyéees sont préservées
-privilegedFx1(); // => affiche la dateAppel du moment de la création de la fonction privilegedFx1!
-privilegedFx2(); // => affiche la dateAppel d'après !
-
-
+ Structure applicative
+Une application SPA est composée de plusieurs fichiers javascripts. C'est quand même plus pratique pour coder!
+On découpe donc une application en modules
+
Les modules sont une utilisation des closures
+Module avant ES6
+Les modules javascripts permettent d'isoler votre code du reste de l'application, d'organiser votre code, d'éviter les collision de noms etc.
-function yourModule(require, module, exports) {
+/// fichier1.js
+const private = 5;
+const monObjet = {
+ name: "lala",
+ age: 42 + private,
+ awesomeness: true
- let widgets = {};
- let util = require('util');
- let Widget = require('widgets/base');
+}
- function CoolWidget(elt) { … }
- util.inherits(CoolWidget, Widget);
- // …
+module.exports = monObjet;
- module.exports = Widget;
-}
+/// fichier2.js
+const lala = require('./fichier1.js');
+lala.awesomeness; // true;
+private; // undefined
+lala.age; // 47
Dans node on ne voit pas la fonction enrobante...-
Le binding
- -Le problème
-
-
-var name = 'Mr X';
-let obj = {
- name: 'Joe Lopez',
- greet: function greet(whom) {
- console.log(this)
- console.log(this.name + ' salue ' + whom);
- },
- greetAll: function greetAll(first, second, last) {
- console.log(this)
- [first, second, last].forEach(this.greet);
- }
-};
-obj.greet("les lopezs de France");
-// => 'Joe Lopez salut les lopezs de France !'
-let fx = obj.greet;
-fx("l’atelier") // => '"Mr X salue l’atelier"'
-obj.greetAll('David', 'Joe', 'Guénolé'); // => 'Mr X salue David, Mr X salue Joe, Mr X salue undefined'
-
-
- Comment faire ? La closure?
-
-
-const obj = {
- // …
- greetAll: function greetAll(first, second, last) {
- var that = this;
- [first, second, last].forEach(function(name) {
- that.greet(name);
- });
- }
-}
-
-
- Comment faire ? ES6 style?
-
-
-const obj = {
- // …
- greetAll(first, second, last) {
- [first, second, last].forEach(name => this.greet(name));
- //Ultra fat
- }
-}
-
-
call et apply
-
-
-
-
-//let fx = obj.greet;
-fx.call(obj, 'les singes') // Joe Lopez salue les singes
-
-
-let xy = { 0: 'Zero', 1: 'One', length: 2 };
-Array.prototype.join.call(xy, '-') // 'Zero-One'
-
-
-fx.apply(obj, ['']) // => 'Joe salue l’atelier'
-Array.prototype.push.apply(xy, ['Two', 'Three', 'Four']) // => 5
-xy // => { 0: 'Zero', 1: 'One', 2: 'Two', 3: 'Three', 4: 'Four', length: 5 }
-
-
-
- Module depuis ES6
+Il est possible d'exporter plusieurs variables au sein d'un même fichier en les nommant.
+
+ /// fichier1.js
+ export monObjet = {
+ name: "lala",
+ age: 42
+ }
+
+ export monObjet2 = {
+ name: "lola",
+ age: 8
+ }
+
+ /// fichier2.js
+ import {monObjet, monObjet2 as renommage} from "./fichier1.js";
+
+ monObjet.age; // 42
+ renommage.age; // 8
+ Module depuis ES6
+Il existe différentes manières d'exporter et d'importer des choses via module. Le mieux est d'aller voir la doc ;)
+
+ /// fichier1.js
+ export default {
+ name: "lala",
+ age: 42
+ }
+
+ export const lolo = 28
+
+ /// fichier2.js
+ import lala from "./fichier1.js";
+ import * as monModule from './fichier1.js';
+
+ lala.age; // 42
+ monModule.lolo; // 28
+ JS et asynchronisme
+Gestion de l'asynchrone
+Dans une application JS, vous aurez à gérer de l'asynchrone. Ne serait-ce que pour faire des appels à une API. Il existe plusieurs manière de gérer cela.
Callback
-
-
+ Callbacks
+
function delayedAlert() {
- window.setTimeout(slowAlert, 2000);
+ window.setTimeout(slowAlert, 2000);
}
function slowAlert() {
- alert("That was really slow!");
+ alert("That was really slow!");
}
+ Attention le code de la callback est exécuté dans un contexte complètement différent!
Les promesses
-
- Une promesse a un état (pending, fullfilled, rejected).
- Elle est asynchrone, et se termine soit par un succès soit par une erreur et renvoie une nouvelle promesse.
-
promise.then(successCb,errorCb).then(otherSuccess, otherCb).catch(errorHandlingFn)
-
+ Promesses
+L'objet Promise est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais.
+Une promesse a un état (pending, fullfilled, rejected). En fonction de sa résolution, elle appellera la callback associée via l'instruction then, qui renverra elle aussi une promesse.
+promise.then(successCb,errorCb).then(otherSuccess, otherCb).catch(errorHandlingFn)Les promesses
-
-const myPromise = new Promise((resolve, reject) => {
- ajaxCall({success: resolve, error: reject});
-})
-Promise.resolve([1,2,3,4]);
-
-Promise.reject('ma super erreur')
-
- Les promesses
-
-fetch('/users.json')
- .then(function(response) {
- return response.json()
- }).then(function(json) {
- console.log('parsed json', json)
- }).catch(function(ex) {
- console.log('parsing failed', ex)
- }) ES6 / 2015
-Les modules de node
-
-
-//Dans un fichier
-module.exports = monObjetAExporter;
-
-//Utilisation
-require('./mon_module_locale');
-//Utilisation d'un module npm
-require('mon_module');
-
-
-
-
- Les modules de Papa
-
-
-import * as types from '../constants/ActionTypes';
-
-export function addTodo(text) {
- return { type: types.ADD_TODO, text };
-}
-import React, { PropTypes, Component } from 'react';
-import classnames from 'classnames';
-import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters';
-import 'http://material.js'
-…
-export default Footer;
-export const ADD_TODO = 'ADD_TODO';
-export const DELETE_TODO = 'DELETE_TODO';
-export const EDIT_TODO = 'EDIT_TODO';
-
-
-
-
-
+ Promesses
+
+var promise1 = new Promise(function(resolve, reject) {
+ setTimeout(function() {
+ resolve('foo');
+ }, 300);
+});
+
+promise1.then(function(value) {
+ console.log(value);
+ // expected output: "foo"
+});
+ Destruct
----const { activeCount } = this.props; -… -const { filter: selectedFilter, onShow } = this.props; -const [, filters] = output.props.children; -… -const [,, clear] = output.props.children; -var { op: a, lhs: { op: b }, rhs: c } = getASTNode(); -Détails -- +Promesses
-
+fetch('/users.json')
+.then(function(response) {
+ return response.json()
+}).then(function(json) {
+ console.log('parsed json', json)
+}).catch(function(ex) {
+ console.log('parsing failed', ex)
+})
+ Les strings interpolation et multi lignes
-
-
-const person = { first: 'Thomas', last: 'Anderson', age: 25, nickname: 'Neo' };
-
-// Interpolation de JS quelconque
-console.log(`${person.first} aka ${person.nickname}`)
-// => 'Thomas aka Neo'
-
-// Multi-ligne !
-const markup = `
-${person.first} ${person.last}, age ${person.age}
- `;
-
-
-
-
-
+ Async/await
+La déclaration async function définit une fonction asynchrone qui renvoie un objet AsyncFunction.
+Une fonction asynchrone est une fonction qui s'exécute de façon asynchrone grâce à la boucle d'évènement en utilisant une promesse (Promise) comme valeur de retour.
+L'opérateur await permet d'attendre la résolution d'une promesse. Il ne peut être utilisé qu'au sein d'une fonction asynchrone.
+Au final, c'est un sucre syntaxique autour d'une promesse
Valeur par défaut dans une fonction
-
-
-function add(source, numToAdd = 1){
- return source + numToAdd;
+
+ Async/await
+
+function resolveAfter2Seconds(x) {
+ return new Promise(resolve => {
+ setTimeout(() => {
+ resolve(x);
+ }, 2000);
+ });
}
-
-
-
-
-
- Les objets
-
-
-function editTodo(id, text) {
- return { type: types.EDIT_TODO, id, text };
- //On créé un objet avec pour clef le nom de la variable.
+async function f1() {
+ var x = await resolveAfter2Seconds(10);
+ console.log(x); // 10
}
-const FILTERS = {
- [maVar1]: 'All',
- [maVar2]: 'Active',
- [maVar3]: 'Completed'
-};
-
-
-
-
-
+f1();
+
LODASH / UNDERSCORE
+on ne réinvente pas la roue
+L'éco-système JS
Les trucs utiles
+lodash
+Lodash est la librairie utilitaire la plus utilisée du monde JS. Si vous voulez manipuler des objets/collections etc. Lodash a certainement la fonction qu'il vous faut.
- Est ce que ma variable est un nombre / function / tableau
lodash/lang - Filtrer, trier, reduce....
lodash/{collection/object/array} - Plein de fonctions prêtes à l'emploi
lodash/function
+ - ...
MOMENT
-on ne réinvente pas la roue
- -Les trucs utiles
+moment
+Les dates en JS, c'est pas vraiment la joie... Du coup on utilise moment. C'est bien plus pratique!
- formatter des dates
moment().format('L') - Manipuler des dates
moment(maDate).add('days', 1) - Timezone...
Si tu manipules des dates tu utilises momentjs
Exercices
+i18n
+i18n vous sera utile pour gérer l'internationalisation de votre application. L'intégralité de vos ressources textuelles passeront par cette librairie pour pouvoir gérer le multilinguisme.
+node.js
++ Node.js vous permet de créer des applicatifs écrits en javascript, et notamment des serveurs. On l'utilisera notamment pour éxécuter l'intégralité de la toolchain d'un projet SPA. +
+babel
++ Babel est le traducteur universelle du javascript. Il permet de transpiler le langage écrit dans une version évoluée d'ECMAScript en une version compréhensible pour n'importe quel navigateur. +
+webpack
++ Webpack est un ordonnanceur javascript utilisé pour builder les projets javascript. Il permet d'ajouter plusieurs modules à un pipeline de build. +
+Au travers de ce pipeline de build, on passe d'un projet complexe avec des modules, des librairies etc. à un livrable composé de fichiers statiques à intégrer dans une page web.
+transpilage --> obfuscation --> compréssion --> postCss --> ...+
npm
++ Npm (Node Package Manager) est le gestionnaire de paquet qui vient avec Node.js. Il vous servira à gérer l'intégralité de vos dépendances javascripts. +
+npm install internet