Les fondamentaux de JavaScript

JavaScript Les fondamentaux #JSweek 1 Matti Schneider @matti_sg

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

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.

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.

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 :)

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.

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

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

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

7 { baseURL: 'https:// duckduckgo.com/', // see all allowed values
at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'ﬁrefox' } } index.js <! DOCTYPE html> <html> <head> <title>Some text</title> <msta type=étext/css»> </head> <body> <title>Some text</title> <msta type=étext/css»> <title>Some text</title> <msta type=étext/css»> <title>Some text</title> <msta type=étext/css»> <title>Some text</title> <msta type=étext/css»> <title>Some text</title> <msta type=étext/css»> 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.

7 { baseURL: 'https:// duckduckgo.com/', // see all allowed values
at http://code.google.com/p/ selenium/wiki/DesiredCapabilities driverCapabilities: { browserName: 'ﬁrefox' } } index.js <! DOCTYPE html> <html> <head> <title>Some text</title> <msta type=étext/css»> </head> <body> <title>Some text</title> <msta type=étext/css»> <title>Some text</title> <msta type=étext/css»> <title>Some text</title> <msta type=étext/css»> <title>Some text</title> <msta type=étext/css»> <title>Some text</title> <msta type=étext/css»> 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Boolean 11 typeof

Boolean true false 11 typeof

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

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

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

la folie": true } .propriete 12 Accès : peut renvoyer undeﬁned. typeof

la folie": true } .propriete ['une autre'] 12 Accès : peut renvoyer undeﬁned. typeof

la folie": true } .propriete ['une autre'] [prop] 12 Accès : peut renvoyer undeﬁned. typeof

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

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

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.

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.

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.

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.

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.

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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

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

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`

} 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`

} 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`

} 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`

} 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`

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

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

! 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

! 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

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

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

“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é.

“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é.

“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é.

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.

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.

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.

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.

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

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

|| 'Toto'; } Person(); 24 Sans new : écriture dans global ! new : return alors que non écrit !

|| 'Toto'; } Person(); new Person(); 24 Sans new : écriture dans global ! new : return alors que non écrit !

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

.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”.

.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”.

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.

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.

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.

] 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.

] 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.

] 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.

] 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.

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

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

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

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.

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

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

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 `==`.

…} var MyLib = MyLib || {}; 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

…} var MyLib = MyLib || {}; && 28 En JS, tout est évaluable à une valeur booléenne (valeur de vérité). Transitivité sur le `==`.

…} 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 `==`.

…} 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 `==`.

…} 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 `==`.

…} 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 `==`.

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

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 - <script> non autofermant ! - shebang compatible avec `node`, pas avec navigateur ?

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 - <script> non autofermant ! - shebang compatible avec `node`, pas avec navigateur ?

<html> <body> <script src=" "></script> </body> </html> ! 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 - <script> non autofermant ! - shebang compatible avec `node`, pas avec navigateur ?

<html> <body> <script src=" "></script> </body> </html> ! 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 - <script> non autofermant ! - shebang compatible avec `node`, pas avec navigateur ?

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

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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 !

(! 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 !

(! 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 !

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.

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.

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.

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.

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

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

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

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

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

Merci ! • Références • Documentation : MDN https://developer.mozilla.org/fr/docs/ JavaScript/Référence_JavaScript
(ou Google "mdn <terme JS>") • 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

Les fondamentaux de JavaScript

Les fondamentaux de JavaScript

More Decks by Matti Schneider

Other Decks in Programming

Featured

Transcript