Les fondamentaux de JavaScript

Slide 1

Slide 1 text

JavaScript Les fondamentaux #JSweek 1 Matti Schneider @matti_sg

Slide 2

Slide 2 text

2 Watai github.com/MattiSG/Watai Matti Schneider @matti_sg JS depuis 2008

Slide 3

Slide 3 text

3 ? Qui êtes-vous ? Quels sont vos objectifs ? Background ? Petit quiz. Attention, volontairement difficile, ne pas prendre peur ! 1. OOP 2. Structures de contrôle. 3. Quel langage ? Degré de maîtrise de la CSS. 4. Informatique théorique. 5. Programmation “dure” (décalages binaires). 6. Dev culture.

Slide 4

Slide 4 text

3 ? {:|:&};: while (true); class B extends A #left_aligned 2 < 2 << 2 O(nlog(n)) while (false); #cart .item 2 > 2 >> 2 O(n3) Qui êtes-vous ? Quels sont vos objectifs ? Background ? Petit quiz. Attention, volontairement difficile, ne pas prendre peur ! 1. OOP 2. Structures de contrôle. 3. Quel langage ? Degré de maîtrise de la CSS. 4. Informatique théorique. 5. Programmation “dure” (décalages binaires). 6. Dev culture.

Slide 5

Slide 5 text

4 ! {}.prototype null === undefined ‘a’ || ‘b’ this.meth() typeof [] fermeture null == undefined this[meth]() typeof {} méthode Ce que vous saurez. Prérequis : savoir coder (invocation de fonction, boucle, variable…). Bien : savoir programmer (architecture…), connaître l’architecture du web (client/serveur, HTML/CSS/JS). Si vous avez les idées déjà claires sur tout ça, vous pouvez partir :)

Slide 6

Slide 6 text

5 nodejs.org Pendant qu’on voit l’intro, installez un WebKit et Node. Fonctionnement atelier : posez des questions, interactif !! ⾠ passages simples, et passages compliqués. Pas d'inquiétude si on saisit pas tout. Poser le plus de questions possibles, essayer de comprendre, mais pas grave. On redevient plus simple plus tard.

Slide 7

Slide 7 text

6 Notation destinée à décrire des programmes exécutables. ECMA : organisme de standardisation international. Java / JavaScript : franc (obsolète depuis 2001) / framboise (ﬁn et délicat, un peu dur à obtenir au premier abord mais excellent). Créé en 1995 par Brendan Eich, intégré dans Netscape Navigator 2. Puis IE3. Aujourd’hui dans tous les navigateurs. Puis même indépendamment. Que veut dire qu’un langage soit “intégré” dans une application ??

Slide 8

Slide 8 text

6 ECMA Notation destinée à décrire des programmes exécutables. ECMA : organisme de standardisation international. Java / JavaScript : franc (obsolète depuis 2001) / framboise (ﬁn et délicat, un peu dur à obtenir au premier abord mais excellent). Créé en 1995 par Brendan Eich, intégré dans Netscape Navigator 2. Puis IE3. Aujourd’hui dans tous les navigateurs. Puis même indépendamment. Que veut dire qu’un langage soit “intégré” dans une application ??

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

7 { baseURL: 'https:// duckduckgo.com/', // see all allowed values at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'ﬁrefox' } } index.js Some text Some text Some text Some text Some text Some text index.html span.some { font-family: «herpader»; text-align: left; } some selector { sdf property: vlue; } some selector { sdf property: vlue; } some selector { sdf property: vlue; index.css JavaScript en tant que langage est interprété dans une machine virtuelle. Tout navigateur intègre une machine virtuelle. Node.js aussi (V8 de Chrome). Les navigateurs font plus : ils interprètent le HTML et les CSS. Leur exécution de JS est totalement indépendante de ce processus, au fait près qu’ils fournissent une API d’accès aux informations HTML & CSS, l’API DOM (Document-Object Model). Cette présentation n’abordera quasiment pas l’API DOM, on reste sur JS. Inconsistances navigateurs.

Slide 12

Slide 12 text

Slide 13

Slide 13 text

7 { baseURL: 'https:// duckduckgo.com/', // see all allowed values at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'ﬁrefox' } } index.js Some text Some text Some text Some text Some text Some text index.html span.some { font-family: «herpader»; text-align: left; } some selector { sdf property: vlue; } some selector { sdf property: vlue; } some selector { sdf property: vlue; index.css DOM JavaScript en tant que langage est interprété dans une machine virtuelle. Tout navigateur intègre une machine virtuelle. Node.js aussi (V8 de Chrome). Les navigateurs font plus : ils interprètent le HTML et les CSS. Leur exécution de JS est totalement indépendante de ce processus, au fait près qu’ils fournissent une API d’accès aux informations HTML & CSS, l’API DOM (Document-Object Model). Cette présentation n’abordera quasiment pas l’API DOM, on reste sur JS. Inconsistances navigateurs.

Slide 14

Slide 14 text

8 Variables Faiblement typé : tout avec `var`. ≠ non typé. camelCase, minuscule, sauf pour “fonctions constructeurs”, constantes en majuscules. SNAKE_CASE constante : rien d'obligatoire, pas comme Ruby. On va commencer par explorer les types de base. Ouvrir Node !!

Slide 15

Slide 15 text

8 Variables var Faiblement typé : tout avec `var`. ≠ non typé. camelCase, minuscule, sauf pour “fonctions constructeurs”, constantes en majuscules. SNAKE_CASE constante : rien d'obligatoire, pas comme Ruby. On va commencer par explorer les types de base. Ouvrir Node !!

Slide 16

Slide 16 text

8 Variables var var [$_a-zA-Z][$_a-zA-Z0-9]*; Faiblement typé : tout avec `var`. ≠ non typé. camelCase, minuscule, sauf pour “fonctions constructeurs”, constantes en majuscules. SNAKE_CASE constante : rien d'obligatoire, pas comme Ruby. On va commencer par explorer les types de base. Ouvrir Node !!

Slide 17

Slide 17 text

8 Variables var var [$_a-zA-Z][$_a-zA-Z0-9]*; var myVar = …; var MY_CONSTANT = …; Faiblement typé : tout avec `var`. ≠ non typé. camelCase, minuscule, sauf pour “fonctions constructeurs”, constantes en majuscules. SNAKE_CASE constante : rien d'obligatoire, pas comme Ruby. On va commencer par explorer les types de base. Ouvrir Node !!

Slide 18

Slide 18 text

8 Variables var var [$_a-zA-Z][$_a-zA-Z0-9]*; var myVar = …; var MY_CONSTANT = …; typeof Faiblement typé : tout avec `var`. ≠ non typé. camelCase, minuscule, sauf pour “fonctions constructeurs”, constantes en majuscules. SNAKE_CASE constante : rien d'obligatoire, pas comme Ruby. On va commencer par explorer les types de base. Ouvrir Node !!

Slide 19

Slide 19 text

String 9 String : pas de char. Échappement par \ Échappement équivalent `'`et `"` Représentation 16 bits / char. Concaténation par + typeof

Slide 20

Slide 20 text

String 'toto' "toto" 'j\'aime les pommes' 'plusieurs\nlignes\tindentées' '\u2665' 9 String : pas de char. Échappement par \ Échappement équivalent `'`et `"` Représentation 16 bits / char. Concaténation par + typeof

Slide 21

Slide 21 text

String 'toto' "toto" 'j\'aime les pommes' 'plusieurs\nlignes\tindentées' '\u2665' 'a' + 'b' 9 String : pas de char. Échappement par \ Échappement équivalent `'`et `"` Représentation 16 bits / char. Concaténation par + typeof

Slide 22

Slide 22 text

String 'toto' "toto" 'j\'aime les pommes' 'plusieurs\nlignes\tindentées' '\u2665' 'a' + 'b' '1' + 2 9 String : pas de char. Échappement par \ Échappement équivalent `'`et `"` Représentation 16 bits / char. Concaténation par + typeof

Slide 23

Slide 23 text

Number 10 Pas de float / int, mais représentation interne float => erreurs d’approximation classiques, mais pas de problème pour comparer 1 et 1.0. Division : 1/3 => 0.333, pas besoin de forcer avec 1/3.0. Infinity: 1/0. NaN: 0/0. NaN is sticky. typeof

Slide 24

Slide 24 text

Number 10 -10 0.1 10e6 10 Pas de float / int, mais représentation interne float => erreurs d’approximation classiques, mais pas de problème pour comparer 1 et 1.0. Division : 1/3 => 0.333, pas besoin de forcer avec 1/3.0. Infinity: 1/0. NaN: 0/0. NaN is sticky. typeof

Slide 25

Slide 25 text

Number 10 -10 0.1 10e6 0x10 10 Pas de float / int, mais représentation interne float => erreurs d’approximation classiques, mais pas de problème pour comparer 1 et 1.0. Division : 1/3 => 0.333, pas besoin de forcer avec 1/3.0. Infinity: 1/0. NaN: 0/0. NaN is sticky. typeof

Slide 26

Slide 26 text

Number 10 -10 0.1 10e6 0x10 018 - 010 10 Pas de float / int, mais représentation interne float => erreurs d’approximation classiques, mais pas de problème pour comparer 1 et 1.0. Division : 1/3 => 0.333, pas besoin de forcer avec 1/3.0. Infinity: 1/0. NaN: 0/0. NaN is sticky. typeof

Slide 27

Slide 27 text

Number 10 -10 0.1 10e6 0x10 018 - 010 Infinity 10 Pas de float / int, mais représentation interne float => erreurs d’approximation classiques, mais pas de problème pour comparer 1 et 1.0. Division : 1/3 => 0.333, pas besoin de forcer avec 1/3.0. Infinity: 1/0. NaN: 0/0. NaN is sticky. typeof

Slide 28

Slide 28 text

Number 10 -10 0.1 10e6 0x10 018 - 010 Infinity NaN 10 Pas de float / int, mais représentation interne float => erreurs d’approximation classiques, mais pas de problème pour comparer 1 et 1.0. Division : 1/3 => 0.333, pas besoin de forcer avec 1/3.0. Infinity: 1/0. NaN: 0/0. NaN is sticky. typeof

Slide 29

Slide 29 text

Boolean 11 typeof

Slide 30

Slide 30 text

Boolean true false 11 typeof

Slide 31

Slide 31 text

Boolean true false “falsy” '' 0 null undefined NaN 11 typeof

Slide 32

Slide 32 text

Object 12 Accès : peut renvoyer undeﬁned. typeof

Slide 33

Slide 33 text

Object { propriete : 'valeur', 'une autre' : 1, "c'est la folie": true } 12 Accès : peut renvoyer undeﬁned. typeof

Slide 34

Slide 34 text

Object { propriete : 'valeur', 'une autre' : 1, "c'est la folie": true } .propriete 12 Accès : peut renvoyer undeﬁned. typeof

Slide 35

Slide 35 text

Object { propriete : 'valeur', 'une autre' : 1, "c'est la folie": true } .propriete ['une autre'] 12 Accès : peut renvoyer undeﬁned. typeof

Slide 36

Slide 36 text

Object { propriete : 'valeur', 'une autre' : 1, "c'est la folie": true } .propriete ['une autre'] [prop] 12 Accès : peut renvoyer undeﬁned. typeof

Slide 37

Slide 37 text

Object 13 On peut réassigner une propriété d'un objet. Passage par référence, JAMAIS par copie.

Slide 38

Slide 38 text

Object var telephone = { }; 13 On peut réassigner une propriété d'un objet. Passage par référence, JAMAIS par copie.

Slide 39

Slide 39 text

Object var telephone = { }; var toi = { la: true }; 13 On peut réassigner une propriété d'un objet. Passage par référence, JAMAIS par copie.

Slide 40

Slide 40 text

Object var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; 13 On peut réassigner une propriété d'un objet. Passage par référence, JAMAIS par copie.

Slide 41

Slide 41 text

Object var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; 13 On peut réassigner une propriété d'un objet. Passage par référence, JAMAIS par copie.

Slide 42

Slide 42 text

Object var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true 13 On peut réassigner une propriété d'un objet. Passage par référence, JAMAIS par copie.

Slide 43

Slide 43 text

Object var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; 13 On peut réassigner une propriété d'un objet. Passage par référence, JAMAIS par copie.

Slide 44

Slide 44 text

Object var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false 13 On peut réassigner une propriété d'un objet. Passage par référence, JAMAIS par copie.

Slide 45

Slide 45 text

Object var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undefined 13 On peut réassigner une propriété d'un objet. Passage par référence, JAMAIS par copie.

Slide 46

Slide 46 text

Object telephone.valueOf; 14 Mais on n'a rien déﬁni dedans ?!

Slide 47

Slide 47 text

15 var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 48

Slide 48 text

15 telephone var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 49

Slide 49 text

15 telephone true var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 50

Slide 50 text

15 telephone toi true var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 51

Slide 51 text

15 telephone toi true la var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 52

Slide 52 text

15 telephone false toi true la var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 53

Slide 53 text

15 telephone false toi pleure true la var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 54

Slide 54 text

15 telephone false toi pleure pour true la var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 55

Slide 55 text

15 telephone false toi pleure pour true la false var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 56

Slide 56 text

15 telephone false toi pleure pour true la a-un false var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 57

Slide 57 text

15 Object telephone est-un false toi pleure pour true la a-un false var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 58

Slide 58 text

15 Object telephone est-un false toi pleure pour true la a-un valueOf valueOf false var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 59

Slide 59 text

15 Object telephone prototype est-un false toi pleure pour true la a-un valueOf valueOf false var telephone = { }; var toi = { la: true }; telephone.pleure = ! toi.la; telephone.pour = toi; telephone.pour.la; // true toi.la = false; telephone.pour.la; // false telephone.rose; // undeﬁned

Slide 60

Slide 60 text

16 telephone iPhone prototype Object prototype Héritage. En lecture seule. “orienté prototype” “prototype” proche de “classe”, mais pas de distinction classe / objet : tout est objet, modiﬁer le prototype “modiﬁe” toutes les instances.

Slide 61

Slide 61 text

16 telephone iPhone prototype Object prototype iPhone.valueOf var val = Héritage. En lecture seule. “orienté prototype” “prototype” proche de “classe”, mais pas de distinction classe / objet : tout est objet, modiﬁer le prototype “modiﬁe” toutes les instances.

Slide 62

Slide 62 text

16 telephone iPhone prototype Object prototype iPhone.valueOf valueOf ? var val = Héritage. En lecture seule. “orienté prototype” “prototype” proche de “classe”, mais pas de distinction classe / objet : tout est objet, modiﬁer le prototype “modiﬁe” toutes les instances.

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Slide 65

Slide 65 text

16 telephone iPhone prototype Object prototype iPhone.valueOf valueOf var val = Héritage. En lecture seule. “orienté prototype” “prototype” proche de “classe”, mais pas de distinction classe / objet : tout est objet, modiﬁer le prototype “modiﬁe” toutes les instances.

Slide 66

Slide 66 text

16 telephone iPhone prototype Object prototype valueOf var val = Héritage. En lecture seule. “orienté prototype” “prototype” proche de “classe”, mais pas de distinction classe / objet : tout est objet, modiﬁer le prototype “modiﬁe” toutes les instances.

Slide 67

Slide 67 text

17 telephone iPhone prototype Object = Object.create(telephone) prototype Comment créer cette relation ? On ne peut pas accéder à la relation “prototype”.

Slide 68

Slide 68 text

18 telephone iPhone prototype Object hasOwnProperty prototype Faire rajouter propriété dans iPhone. Faire rajouter propriété de même nom que dans telephone. Faire accéder aux valeurs. delete pour éviter shadowing.

Slide 69

Slide 69 text

18 telephone iPhone prototype Object . (key) hasOwnProperty prototype Faire rajouter propriété dans iPhone. Faire rajouter propriété de même nom que dans telephone. Faire accéder aux valeurs. delete pour éviter shadowing.

Slide 70

Slide 70 text

18 telephone iPhone prototype Object . (key) hasOwnProperty for (key in iPhone) { prototype Faire rajouter propriété dans iPhone. Faire rajouter propriété de même nom que dans telephone. Faire accéder aux valeurs. delete pour éviter shadowing.

Slide 71

Slide 71 text

18 telephone iPhone prototype Object . (key) hasOwnProperty for (key in iPhone) { ); } console.log(key, prototype Faire rajouter propriété dans iPhone. Faire rajouter propriété de même nom que dans telephone. Faire accéder aux valeurs. delete pour éviter shadowing.

Slide 72

Slide 72 text

Object 19 hashtable : très performant en accès ; une seule propriété

Slide 73

Slide 73 text

Object 19 • tout est (relié au prototype de) object hashtable : très performant en accès ; une seule propriété

Slide 74

Slide 74 text

Object 19 • tout est (relié au prototype de) object • Hash / Object hashtable : très performant en accès ; une seule propriété

Slide 75

Slide 75 text

20 . (key) hasOwnProperty for (key in phone) { ); } console.log(key, phone Function -> Function.prototype -> Object.prototype typeof Invocation. Ce sont des *objets* (first-class), rien de magique. Leur seule spécificité est d'être invocables (callable) et de pouvoir obtenir de l'extérieur des valeurs de variables locales. - valeurs par défaut : ES6, pattern - paramètres non obligatoires : undefined - àrguments`

Slide 76

Slide 76 text

20 . (key) hasOwnProperty for (key in phone) { ); } console.log(key, phone var listPhoneKeys = function(phone) { } Function -> Function.prototype -> Object.prototype typeof Invocation. Ce sont des *objets* (first-class), rien de magique. Leur seule spécificité est d'être invocables (callable) et de pouvoir obtenir de l'extérieur des valeurs de variables locales. - valeurs par défaut : ES6, pattern - paramètres non obligatoires : undefined - àrguments`

Slide 77

Slide 77 text

20 . (key) hasOwnProperty for (key in phone) { ); } console.log(key, phone var listPhoneKeys = function(phone) { } listPhoneKeys(iPhone); Function -> Function.prototype -> Object.prototype typeof Invocation. Ce sont des *objets* (first-class), rien de magique. Leur seule spécificité est d'être invocables (callable) et de pouvoir obtenir de l'extérieur des valeurs de variables locales. - valeurs par défaut : ES6, pattern - paramètres non obligatoires : undefined - àrguments`

Slide 78

Slide 78 text

20 . (key) hasOwnProperty for (key in phone) { ); } console.log(key, phone var listPhoneKeys = function(phone) { } listPhoneKeys(iPhone); listPhoneKeys(telephone); Function -> Function.prototype -> Object.prototype typeof Invocation. Ce sont des *objets* (first-class), rien de magique. Leur seule spécificité est d'être invocables (callable) et de pouvoir obtenir de l'extérieur des valeurs de variables locales. - valeurs par défaut : ES6, pattern - paramètres non obligatoires : undefined - àrguments`

Slide 79

Slide 79 text

20 . (key) hasOwnProperty for (key in phone) { ); } console.log(key, phone var listPhoneKeys = function(phone) { } listPhoneKeys(iPhone); listPhoneKeys(telephone); listPhoneKeys(); Function -> Function.prototype -> Object.prototype typeof Invocation. Ce sont des *objets* (first-class), rien de magique. Leur seule spécificité est d'être invocables (callable) et de pouvoir obtenir de l'extérieur des valeurs de variables locales. - valeurs par défaut : ES6, pattern - paramètres non obligatoires : undefined - àrguments`

Slide 80

Slide 80 text

Propriétés des Function 21 ⾠ bien différencier nom de la variable et nom de la fermeture. Possibilité de déclarer la fonction seule. Hoisting. Object.deﬁneProperty(telephone, 'pleure', { get: function() { return ! toi.la } }) => caractérisation d'une fonction : nom, paramètres, corps… et contexte

Slide 81

Slide 81 text

Propriétés des Function var pleure = function pleure() { return ! toi.la; } 21 ⾠ bien différencier nom de la variable et nom de la fermeture. Possibilité de déclarer la fonction seule. Hoisting. Object.deﬁneProperty(telephone, 'pleure', { get: function() { return ! toi.la } }) => caractérisation d'une fonction : nom, paramètres, corps… et contexte

Slide 82

Slide 82 text

Propriétés des Function var pleure = function pleure() { return ! toi.la; } console.log(pleure.name); 21 ⾠ bien différencier nom de la variable et nom de la fermeture. Possibilité de déclarer la fonction seule. Hoisting. Object.deﬁneProperty(telephone, 'pleure', { get: function() { return ! toi.la } }) => caractérisation d'une fonction : nom, paramètres, corps… et contexte

Slide 83

Slide 83 text

Propriétés des Function var pleure = function pleure() { return ! toi.la; } console.log(pleure.name); console.log(pleure.length); 21 ⾠ bien différencier nom de la variable et nom de la fermeture. Possibilité de déclarer la fonction seule. Hoisting. Object.deﬁneProperty(telephone, 'pleure', { get: function() { return ! toi.la } }) => caractérisation d'une fonction : nom, paramètres, corps… et contexte

Slide 84

Slide 84 text

“Méthodes” 22 this : paramètre particulier. Écrire revenir(). Expérimenter avec le log. Bonne pratique : chaînabilité.

Slide 85

Slide 85 text

“Méthodes” telephone.pleure = pleure; 22 this : paramètre particulier. Écrire revenir(). Expérimenter avec le log. Bonne pratique : chaînabilité.

Slide 86

Slide 86 text

“Méthodes” telephone.pleure = pleure; console.log(telephone.pleure()); 22 this : paramètre particulier. Écrire revenir(). Expérimenter avec le log. Bonne pratique : chaînabilité.

Slide 87

Slide 87 text

“Méthodes” telephone.pleure = pleure; console.log(telephone.pleure()); toi.partir = function partir() { this.la = false; 22 this : paramètre particulier. Écrire revenir(). Expérimenter avec le log. Bonne pratique : chaînabilité.

Slide 88

Slide 88 text

“Méthodes” telephone.pleure = pleure; console.log(telephone.pleure()); toi.partir = function partir() { this.la = false; return this; } 22 this : paramètre particulier. Écrire revenir(). Expérimenter avec le log. Bonne pratique : chaînabilité.

Slide 89

Slide 89 text

Fermeture 23 Attention au `;` après {}. Ressemble à un scope. Bonne pratique : result. Devrait toujours y avoir `return this` ou `return result`. Encapsulation des variables. Fonctionnement du scope : recherche en montant, **jusqu'à la première var** => leak global ! Callback : passer une fermeture en paramètre.

Slide 90

Slide 90 text

Fermeture toi.transmettre = function transmettre() { 23 Attention au `;` après {}. Ressemble à un scope. Bonne pratique : result. Devrait toujours y avoir `return this` ou `return result`. Encapsulation des variables. Fonctionnement du scope : recherche en montant, **jusqu'à la première var** => leak global ! Callback : passer une fermeture en paramètre.

Slide 91

Slide 91 text

Fermeture toi.transmettre = function transmettre() { var maman = {}; 23 Attention au `;` après {}. Ressemble à un scope. Bonne pratique : result. Devrait toujours y avoir `return this` ou `return result`. Encapsulation des variables. Fonctionnement du scope : recherche en montant, **jusqu'à la première var** => leak global ! Callback : passer une fermeture en paramètre.

Slide 92

Slide 92 text

Fermeture toi.transmettre = function transmettre() { var maman = {}; var result = { 23 Attention au `;` après {}. Ressemble à un scope. Bonne pratique : result. Devrait toujours y avoir `return this` ou `return result`. Encapsulation des variables. Fonctionnement du scope : recherche en montant, **jusqu'à la première var** => leak global ! Callback : passer une fermeture en paramètre.

Slide 93

Slide 93 text

Fermeture toi.transmettre = function transmettre() { var maman = {}; var result = { dire: function dire(message) { maman.oreille = message; }, recu: function recu() { return maman.oreille; } 23 Attention au `;` après {}. Ressemble à un scope. Bonne pratique : result. Devrait toujours y avoir `return this` ou `return result`. Encapsulation des variables. Fonctionnement du scope : recherche en montant, **jusqu'à la première var** => leak global ! Callback : passer une fermeture en paramètre.

Slide 94

Slide 94 text

Fermeture toi.transmettre = function transmettre() { var maman = {}; var result = { dire: function dire(message) { maman.oreille = message; }, recu: function recu() { return maman.oreille; } }; 23 Attention au `;` après {}. Ressemble à un scope. Bonne pratique : result. Devrait toujours y avoir `return this` ou `return result`. Encapsulation des variables. Fonctionnement du scope : recherche en montant, **jusqu'à la première var** => leak global ! Callback : passer une fermeture en paramètre.

Slide 95

Slide 95 text

Fermeture toi.transmettre = function transmettre() { var maman = {}; var result = { dire: function dire(message) { maman.oreille = message; }, recu: function recu() { return maman.oreille; } }; return result; } 23 Attention au `;` après {}. Ressemble à un scope. Bonne pratique : result. Devrait toujours y avoir `return this` ou `return result`. Encapsulation des variables. Fonctionnement du scope : recherche en montant, **jusqu'à la première var** => leak global ! Callback : passer une fermeture en paramètre.

Slide 96

Slide 96 text

Fermeture toi.transmettre = function transmettre() { var maman = {}; var result = { dire: function dire(message) { maman.oreille = message; }, recu: function recu() { return maman.oreille; } }; return result; } var transmetteur = toi.transmettre(); 23 Attention au `;` après {}. Ressemble à un scope. Bonne pratique : result. Devrait toujours y avoir `return this` ou `return result`. Encapsulation des variables. Fonctionnement du scope : recherche en montant, **jusqu'à la première var** => leak global ! Callback : passer une fermeture en paramètre.

Slide 97

Slide 97 text

Fermeture toi.transmettre = function transmettre() { var maman = {}; var result = { dire: function dire(message) { maman.oreille = message; }, recu: function recu() { return maman.oreille; } }; return result; } var transmetteur = toi.transmettre(); transmetteur.dire("c'est quelqu'un pour toi"); 23 Attention au `;` après {}. Ressemble à un scope. Bonne pratique : result. Devrait toujours y avoir `return this` ou `return result`. Encapsulation des variables. Fonctionnement du scope : recherche en montant, **jusqu'à la première var** => leak global ! Callback : passer une fermeture en paramètre.

Slide 98

Slide 98 text

Fermeture toi.transmettre = function transmettre() { var maman = {}; var result = { dire: function dire(message) { maman.oreille = message; }, recu: function recu() { return maman.oreille; } }; return result; } var transmetteur = toi.transmettre(); transmetteur.dire("c'est quelqu'un pour toi"); console.log(transmetteur.recu); 23 Attention au `;` après {}. Ressemble à un scope. Bonne pratique : result. Devrait toujours y avoir `return this` ou `return result`. Encapsulation des variables. Fonctionnement du scope : recherche en montant, **jusqu'à la première var** => leak global ! Callback : passer une fermeture en paramètre.

Slide 99

Slide 99 text

new 24 Sans new : écriture dans global ! new : return alors que non écrit !

Slide 100

Slide 100 text

new var Person = function Person(name) { this.name = name || 'Toto'; } 24 Sans new : écriture dans global ! new : return alors que non écrit !

Slide 101

Slide 101 text

new var Person = function Person(name) { this.name = name || 'Toto'; } Person(); 24 Sans new : écriture dans global ! new : return alors que non écrit !

Slide 102

Slide 102 text

new var Person = function Person(name) { this.name = name || 'Toto'; } Person(); new Person(); 24 Sans new : écriture dans global ! new : return alors que non écrit !

Slide 103

Slide 103 text

.prototype 25 **Propriété** prototype ≠ **lien** prototype !!! Faire assigner une Person avant d'ajouter dans prototype. Propriété pour Function, “fonction constructeur”.

Slide 104

Slide 104 text

.prototype Person.prototype.say = function() { console.log("Hi, I'm " + name); } 25 **Propriété** prototype ≠ **lien** prototype !!! Faire assigner une Person avant d'ajouter dans prototype. Propriété pour Function, “fonction constructeur”.

Slide 105

Slide 105 text

.prototype Person.prototype.say = function() { console.log("Hi, I'm " + name); } new Person().say(); 25 **Propriété** prototype ≠ **lien** prototype !!! Faire assigner une Person avant d'ajouter dans prototype. Propriété pour Function, “fonction constructeur”.

Slide 106

Slide 106 text

Array 26 0-based Can be sparse. Pas de déclaration de taille, non typés. typeof => ce sont des objets ! Essayer d'accéder via [0]. Via ['0']. Essayer d'accéder au-delà des bounds.

Slide 107

Slide 107 text

Array [] 26 0-based Can be sparse. Pas de déclaration de taille, non typés. typeof => ce sont des objets ! Essayer d'accéder via [0]. Via ['0']. Essayer d'accéder au-delà des bounds.

Slide 108

Slide 108 text

Array [] [ 1, 2, 3, 'nous irons au bois' ] 26 0-based Can be sparse. Pas de déclaration de taille, non typés. typeof => ce sont des objets ! Essayer d'accéder via [0]. Via ['0']. Essayer d'accéder au-delà des bounds.

Slide 109

Slide 109 text

Array [] [ 1, 2, 3, 'nous irons au bois' ] var deuxiemeCouplet = [ 4, 5, 6, {cueillir: 'cerises'} ]; 26 0-based Can be sparse. Pas de déclaration de taille, non typés. typeof => ce sont des objets ! Essayer d'accéder via [0]. Via ['0']. Essayer d'accéder au-delà des bounds.

Slide 110

Slide 110 text

Array [] [ 1, 2, 3, 'nous irons au bois' ] var deuxiemeCouplet = [ 4, 5, 6, {cueillir: 'cerises'} ]; deuxiemeCouplet[0]; 26 0-based Can be sparse. Pas de déclaration de taille, non typés. typeof => ce sont des objets ! Essayer d'accéder via [0]. Via ['0']. Essayer d'accéder au-delà des bounds.

Slide 111

Slide 111 text

Array [] [ 1, 2, 3, 'nous irons au bois' ] var deuxiemeCouplet = [ 4, 5, 6, {cueillir: 'cerises'} ]; deuxiemeCouplet[0]; deuxiemeCouplet[3]['cueillir']; 26 0-based Can be sparse. Pas de déclaration de taille, non typés. typeof => ce sont des objets ! Essayer d'accéder via [0]. Via ['0']. Essayer d'accéder au-delà des bounds.

Slide 112

Slide 112 text

Array [] [ 1, 2, 3, 'nous irons au bois' ] var deuxiemeCouplet = [ 4, 5, 6, {cueillir: 'cerises'} ]; deuxiemeCouplet[0]; deuxiemeCouplet[3]['cueillir']; [1, 2, 3].forEach(function(val) { … }); 26 0-based Can be sparse. Pas de déclaration de taille, non typés. typeof => ce sont des objets ! Essayer d'accéder via [0]. Via ['0']. Essayer d'accéder au-delà des bounds.

Slide 113

Slide 113 text

RegExp 27 Dans quel cas utiliser laquelle : équivalent ' / " en shell. Debuggex.

Slide 114

Slide 114 text

RegExp /S[ou]me?thing?/ 27 Dans quel cas utiliser laquelle : équivalent ' / " en shell. Debuggex.

Slide 115

Slide 115 text

RegExp /S[ou]me?thing?/ /S[ou]me?thing?/igm 27 Dans quel cas utiliser laquelle : équivalent ' / " en shell. Debuggex.

Slide 116

Slide 116 text

RegExp /S[ou]me?thing?/ /S[ou]me?thing?/igm new RegExp('s[ou]me?' + thing) 27 Dans quel cas utiliser laquelle : équivalent ' / " en shell. Debuggex.

Slide 117

Slide 117 text

Opérateurs “booléens” 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

Slide 118

Slide 118 text

Opérateurs “booléens” || 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

Slide 119

Slide 119 text

Opérateurs “booléens” || function(arg) { arg = arg || 'default'; …} 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

Slide 120

Slide 120 text

Opérateurs “booléens” || function(arg) { arg = arg || 'default'; …} var MyLib = MyLib || {}; 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

Slide 121

Slide 121 text

Opérateurs “booléens” || function(arg) { arg = arg || 'default'; …} var MyLib = MyLib || {}; && 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

Slide 122

Slide 122 text

Opérateurs “booléens” || function(arg) { arg = arg || 'default'; …} var MyLib = MyLib || {}; && myObj && myObj.prop && myObj.prop.far 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

Slide 123

Slide 123 text

Opérateurs “booléens” || function(arg) { arg = arg || 'default'; …} var MyLib = MyLib || {}; && myObj && myObj.prop && myObj.prop.far == 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

Slide 124

Slide 124 text

Opérateurs “booléens” || function(arg) { arg = arg || 'default'; …} var MyLib = MyLib || {}; && myObj && myObj.prop && myObj.prop.far == '', 0, '0', [], ' \n\t', undefined, null 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

Slide 125

Slide 125 text

Opérateurs “booléens” || function(arg) { arg = arg || 'default'; …} var MyLib = MyLib || {}; && myObj && myObj.prop && myObj.prop.far == '', 0, '0', [], ' \n\t', undefined, null if (! myVar) 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

Slide 126

Slide 126 text

Script 29 - `node` : pas besoin d'être exécutable - non autofermant ! - shebang compatible avec `node`, pas avec navigateur ?

Slide 127

Slide 127 text

Script 29 { baseURL: 'https:// duckduckgo.com/', // see all allowed values at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'ﬁrefox' } } sbradaradjan.js - `node` : pas besoin d'être exécutable - non autofermant ! - shebang compatible avec `node`, pas avec navigateur ?

Slide 128

Slide 128 text

Script 29 node { baseURL: 'https:// duckduckgo.com/', // see all allowed values at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'ﬁrefox' } } sbradaradjan.js - `node` : pas besoin d'être exécutable - non autofermant ! - shebang compatible avec `node`, pas avec navigateur ?

Slide 129

Slide 129 text

! index.html Script 29 node { baseURL: 'https:// duckduckgo.com/', // see all allowed values at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'ﬁrefox' } } sbradaradjan.js - `node` : pas besoin d'être exécutable - non autofermant ! - shebang compatible avec `node`, pas avec navigateur ?

Slide 130

Slide 130 text

! index.html Script 29 node { baseURL: 'https:// duckduckgo.com/', // see all allowed values at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'ﬁrefox' } } sbradaradjan.js #!/usr/bin/env node - `node` : pas besoin d'être exécutable - non autofermant ! - shebang compatible avec `node`, pas avec navigateur ?

Slide 131

Slide 131 text

Dangers pasBien = 'du tout !'; 30 Globals. À cause du fonctionnement du scope. Attention, si pas dans fonction, crée une globale même avec var.

Slide 132

Slide 132 text

Leaking globals!! Dangers pasBien = 'du tout !'; 30 Globals. À cause du fonctionnement du scope. Attention, si pas dans fonction, crée une globale même avec var.

Slide 133

Slide 133 text

Leaking globals!! Dangers pasBien = 'du tout !'; 30 var Globals. À cause du fonctionnement du scope. Attention, si pas dans fonction, crée une globale même avec var.

Slide 134

Slide 134 text

Dangers if (…) { var local = 'a'; // … } local; // surprise ! 31 No block scope.

Slide 135

Slide 135 text

No block scope!! Dangers if (…) { var local = 'a'; // … } local; // surprise ! 31 No block scope.

Slide 136

Slide 136 text

Dangers … return { trala: 'la', tra : 'lalère' } 32 No block scope.

Slide 137

Slide 137 text

Automatic semicolon insertion! Dangers … return { trala: 'la', tra : 'lalère' } 32 No block scope.

Slide 138

Slide 138 text

Automatic semicolon insertion! Dangers … return { trala: 'la', tra : 'lalère' } 32 ; No block scope.

Slide 139

Slide 139 text

Dangers var js = { super: 'délire', trop : 'fun' } [ 'super', 'trop' ].forEach(…); 33 'undeﬁned' has no method `forEach`.

Slide 140

Slide 140 text

Objects need ;! Dangers var js = { super: 'délire', trop : 'fun' } [ 'super', 'trop' ].forEach(…); 33 'undeﬁned' has no method `forEach`.

Slide 141

Slide 141 text

Objects need ;! Dangers var js = { super: 'délire', trop : 'fun' } [ 'super', 'trop' ].forEach(…); 33 ; 'undeﬁned' has no method `forEach`.

Slide 142

Slide 142 text

Fausses bonnes idées 34 typeof null, typeof array… Surtout, mauvaise pratique : faiblement typé, pas à raisonner sur les types !

Slide 143

Slide 143 text

Fausses bonnes idées typeof 34 typeof null, typeof array… Surtout, mauvaise pratique : faiblement typé, pas à raisonner sur les types !

Slide 144

Slide 144 text

Fausses bonnes idées typeof if (typeof myVar === 'undefined') 34 typeof null, typeof array… Surtout, mauvaise pratique : faiblement typé, pas à raisonner sur les types !

Slide 145

Slide 145 text

Fausses bonnes idées typeof if (typeof myVar === 'undefined') if (! myVar) // beware of 0! if (typeof myVar != 'number') 34 typeof null, typeof array… Surtout, mauvaise pratique : faiblement typé, pas à raisonner sur les types !

Slide 146

Slide 146 text

Fausses bonnes idées typeof if (typeof myVar === 'undefined') if (! myVar) // beware of 0! if (typeof myVar != 'number') snake_case_vars 34 typeof null, typeof array… Surtout, mauvaise pratique : faiblement typé, pas à raisonner sur les types !

Slide 147

Slide 147 text

Fausses bonnes idées typeof if (typeof myVar === 'undefined') if (! myVar) // beware of 0! if (typeof myVar != 'number') snake_case_vars snake_case.with_method().toLowerCase() 34 typeof null, typeof array… Surtout, mauvaise pratique : faiblement typé, pas à raisonner sur les types !

Slide 148

Slide 148 text

Fausses bonnes idées 35 Les VM sont beaucoup plus optimisées qu'on ne le croit. Très bons outils de proﬁling. Apprendre à maîtriser les bases de JS avant d'utiliser CS. Maintenabilité pas certaine.

Slide 149

Slide 149 text

Fausses bonnes idées • faire conﬁance à un navigateur 35 Les VM sont beaucoup plus optimisées qu'on ne le croit. Très bons outils de proﬁling. Apprendre à maîtriser les bases de JS avant d'utiliser CS. Maintenabilité pas certaine.

Slide 150

Slide 150 text

Fausses bonnes idées • faire conﬁance à un navigateur • optimisation prémature 35 Les VM sont beaucoup plus optimisées qu'on ne le croit. Très bons outils de proﬁling. Apprendre à maîtriser les bases de JS avant d'utiliser CS. Maintenabilité pas certaine.

Slide 151

Slide 151 text

Fausses bonnes idées • faire conﬁance à un navigateur • optimisation prémature • [troll] CoffeeScript 35 Les VM sont beaucoup plus optimisées qu'on ne le croit. Très bons outils de proﬁling. Apprendre à maîtriser les bases de JS avant d'utiliser CS. Maintenabilité pas certaine.

Slide 152

Slide 152 text

Bonnes pratiques (function() { // IEFE var notLeaking; })(); 36 ⾠ ne dispense pas de l'usage du mot-clé `var`.

Slide 153

Slide 153 text

Bonnes pratiques function name() { var result = {}, firstLocal, secondLocal; } 37 - nommer fonctions (debug) - définir result, définir son type en attribution par défaut - définir toutes les variables locales

Slide 154

Slide 154 text

Bonnes pratiques function doSomething(mandatory) { if (! mandatory) return; // standard treatment } 38 - validation par “early return”

Slide 155

Slide 155 text

Bonnes pratiques var callback = function() { // … } $.ajax({ success: callback }); 39 - déﬁnir les fermetures indépendamment dès qu'elles dépassent une instruction

Slide 156

Slide 156 text

Bonnes pratiques • maîtriser les outils développeur de WebKit 40 - déﬁnir les fermetures indépendamment dès qu'elles dépassent une instruction

Slide 157

Slide 157 text

Merci ! • Références • Documentation : MDN https://developer.mozilla.org/fr/docs/ JavaScript/Référence_JavaScript (ou Google "mdn ") • API Node : http://nodejs.org/api/ • WebKit Developer Tools : https://developers.google.com/ chrome-developer-tools/ • http://stackoverﬂow.com/ ? ;) • Crédits images • Document : Apple • All software icons © their respective owners • Remerciements • Organisateurs ! • Anouchka Labonne • Nicolas Dupont 41 Matti Schneider — @matti_sg