ECMAScript 6 FORMATION
Objectifs :
Découvrir l’univers JavaScript
Découvrir les nouveautés de la 6ème édition de la spécification de langage
ECMAScript. Maîtriser les nouvelles APIs
Pré-requis :
Bonnes connaissances en JavaScript
Aymen HARBAOUI / Consultant - Formateur
1
BIBLIOGRAPHIE
Understanding Ecmascript 6: The Definitive Guide for Javascript Developers
(Anglais) Broché – 16 septembre 2016
de Nicholas C. Zakas
Learning ECMAScript 6 (Anglais) Broché – 28 août 2015
de Narayan Prusty
2
[Link] - reproduction interdite sans autorisation - © DAWAN 2016 - [Link] - [Link].73
PLAN
- Introduction
- Les nouveautés
- Base et évolutions du langage
- Modules
- Paquetage du code et déploiement
3
[Link] - reproduction interdite sans autorisation - © DAWAN 2016 - [Link] - [Link].73
Introduction
4
JavaScript (1)
• Est un langage de script, multiplateforme et orienté objet
• Contient une bibliothèque standard d’objets tels que ARRAY, DATE et MATH
• Il est traité lors de l’exécution
• Utilise un modèle basé sur les prototypes ( lien entre les objets et héritage
dynamique)
5
JavaScript (2)
• Aucune distinction entre les types et les objets
• Le type de données n’est pas déclaré ( typage dynamique )
• JavaScript n’a pas de classes, remplacés prototypes par la notion de l’objet
6
ECMAScript 2015 (ES6)
• L'ECMAScript est un standard édité par Ecma International qui permet de
définir le fonctionnement de différents langages de programmation dont le
JavaScript
• ECMAScript 2015(ES6) est une norme ECMAScript qui a été validé et publié
en Juin 2015
• ES2015 est une mise à jour importante du langage, et la première mise
à jour majeure du langage depuis ES5 a été normalisée en 2009.
• ES6 inclut les nouvelles fonctionnalités ( arrows, classes, modules…)
7
ECMAScript 2015 (ES6) (2)
• le JavaScript est donc un langage qui implémente les spécifications définies
dans l'ECMAScript.
• ce standard apporte de nouvelles fonctionnalités pour le langage
• le support des navigateurs n'évolue pas aussi vite
• possible d'utiliser les nouveautés proposées par l'ES2015 grâce à des
transpilers tel que babel.
• Babel permettra de convertir du code ES2015(ES6) en code compatible avec
les navigateurs actuels
8
ECMAScript 2015 (ES6) (3)
[Link]
[Link]
9
ECMAScript 2015 (ES6) (4)
[Link]
10
ECMAScript 2015 (ES6) (5)
ES6 sans configuration via CDN
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
<script src="[Link]
[Link]"></script>
<script type="text/babel">
// Votre code ES6 ici
</script>
[Link]
11
Nouveautés
12
ECMASCRIPT 2015 (ES6)
• Les classes ES6 sont une grosse nouveautés.
• Chaînes de caractères sur plusieurs lignes
• Unicode
• Les ARROWS
• Destructuring
• Les fonctions ( fonctions internes dans des blocs)
13
JavaScript- Rappel
• Il existe 3 types de déclarations en JavaScript :
var : déclaration de variable avec initialisation de valeur
const : déclaration de constante, accessible en lecture seule
let (*): déclaration de variable dont la portée est celle du bloc
courant en initialisant sa valeur
* let introduite avec ECMASCRIPT 2015 ( ES6)
14
JavaScript- Rappel (2)
• La programmation orienté objet avec le JavaScript ( ES5 ) :
programmation orientée prototype
utilisation des fonctions ( function ) : structure
// Création d'une structure
function Toto (arg1){
/* *** ATTRIBUTS *** */
this.attr1 = "lolo";
this.attr2 = arg1;
this.method1 = function(param1){
[Link](this.attr1 + " " + this.attr2 + " " + param1); };
}
// Instanciation de l'objet
var instance = new Toto("lili");
// Exécuter une méthode
instance.method1("kiki");
15
JavaScript- Rappel (3)
• le mot-clé class est utilisé pour créer... des classes !
• en JavaScript ES5 nous avons créé une "fonction constructeur".
• le mot-clé this pour déclarer nos attributs dans le constructeur.
• ce mot-clé this est aussi utilisé pour appeler les attributs à l'intérieur des
fonctions membres (ou "méthode" )
• Tous les éléments déclarés avec le mot-clé this ont une visibilité public par
défaut. ( pas de visibilité private, protected , public en JavaScript )
16
JavaScript- Rappel (4)
Exemple :
// Création d'une structure
function Toto (arg1){
/* *** Attributs*** */
this.attr1 = "Un";
this.attr2 = arg1;
this.method1 = function(param1){ICI
[Link](this.attr1 + " " + this.attr2 + " " + param1); };
}
// Déclaration de vos méthodes avec prototype ici
// Instanciation de l'objet
var instance = new Toto("Deux");
// Exécuter une méthode
instance.method1("Trois");
[Link].method1 = function(param1){
[Link](this.attr1 + " " + this.attr2 + " " + param1);
};
17
JavaScript- Rappel (5)
Exemple héritage par prototype ES5 :
// Création d'une structure enfant
function ChildToto(arg1, arg2){
[Link](this, arg1); // Appel du constructeur parent
this.attr3 = arg2; }
/* *** HERITAGE PAR PROTOTYPE *** */
[Link] = [Link]([Link]);
/* *** DEFINITION DES METHODES DE LA STRUCTURE ENFANT *** */
[Link].method2 = function(param1, param2){
[Link](this.attr1 + " " + this.attr2 + " " + this.attr3 + " " + param1 + " " + param2);
};
// Instanciation de l'objet
var c = new ChildToto("Deux", "Trois");
// Exécuter une méthode
c.method1("Trois"); // Hérité de Toto
c.method2("Quatre", "Cinq");
18
Base et évolutions du langage
19
Let
• Let permet de définir une variable avec une portée limité au block
• Eviter des conflits potentiels de variables avec var
if(false){
var a = 1;
let b = 2;
}
[Link](a) // undefined
[Link](b) // erreur b is not defined
une variable déclaré via var se retrouve au niveau du scope global, ce qui n'est pas le cas de let.
20
Const
• Const permet de faire référence à une valeur en lecture seule
const PI = 3.1415
PI = 2 // erreur : PI est en lecture seule
21
Fonction raccourci =>
• => la flèche est un raccourci qui permet de définir une fonction
// ES5
var toto = function(){
[Link]("Un grand salut à vous tous");
}
toto();
// ES6 utilisation de la flèche: fat arrow
var toto = ()=>{
[Link]("Un grand salut à vous tous");
}
toto();
22
Fonction raccourci => (2)
//ES5
var voiture= {
marque: "citroen",
finition : ["coupé", "berline"],
getVoiture : function(){
var self = this;
[Link](function(f){
var m = [Link] + "existe en finition"+f;
[Link](m);
});
}
}
23
Fonction raccourci => (3)
Avec => le mot clé this reste celui du parent
//ES6
var voiture= {
marque: "citroen",
finition : ["coupé", "berline"],
getVoiture : function(){
[Link]((f)=>{
var m = [Link] + "existe en finition"+f;
[Link](m);
});
}
}
24
Guillemet : backtick ` `
Créer des chaînes de caractères et d’utiliser l’interpolation
let texte = ` salut à tous nous sommes heureux de vous montrer les nouveautés
de ECMASCRIPT 2015 `
25
Template strings:
utilisation de ${ }
let theme = "ECMASCRIPT 2015" ;
let texte = ` salut à tous nous sommes heureux de vous montrer les nouveautés
de ${theme}`;
26
Syntaxe pour les objets:
raccourcis pour créer des objets
let theme = "ECMASCRIPT 2015" ;
let prix= 33 ;
let objet = {theme, prix} // équivalent à {theme: "ECMASCRIPT 2015", prix:33}
let objet = {
theme,
methode(){
}
}
27
Paramètres par défaut:
les paramètres de fonctions peuvent prendre des valeurs par défaut
function Vitesse(v=100){
}
Vitesse(); // 100
28
Spread operator (…) : (1)
(…) :permet de concaténer facilement les objets d’un tableau
var fruits = [" fraises ", " poires "];
var legumes = [" tomates ", " poireaux " ];
var alimentaire = [fruits, legumes];
[Link](alimentaire);
29
Spread operator (…) : (2)
(…) :permet de concaténer facilement les objets d’un tableau
var fruits = [" fraises ", " poires "];
var legumes = [" tomates ", " poireaux " ];
var alimentaire = […fruits, …legumes];
[Link](alimentaire);
30
Spread operator (…) : (3)
(…) : utilisation dans le paramètre d’ une fonction
var mixer = function(p1,p2,p3){
[Link](p1 + "se mixe avec" +p2;
}
var ingredients= [" tomates ", " poireaux "];
mixer(…ingredients);
31
Spread operator (…) : (4)
(…) : utilisation dans le paramètre d’ une fonction
var mixer = function(…ingredients){
[Link]([Link]("-");
}
mixer("Pommes", "Cerises");
32
Classes
une seule forme déclarative simplifie de fait l’utilisation des modèles
class MaClasse {
constructor(a,b){
this.a = a ;
this.b = b;
}
methode(){
[Link]("Hello Class ES6!");
}
}
let monInstance = new MaClasse("Pommes", "Cerises");
[Link]();
33
Classes - héritage
une seule forme déclarative simplifie de fait l’utilisation des modèles
class MaClasseFille extends MaClasse {
constructor(a1,b2){
super(a,b);
this.b2 = b2;
}
methode(){
[Link]("Hello Class ES6!");
}
}
let monInstanceFille = new MaClasseFille("Pommes", "Cerises");
[Link]();
34
destructuring(1)
Affectation par décomposition permet d’extraire des données d’un tableau
var toto= ["un", "deux", "trois"];
// sans utiliser la décomposition
var un = toto[0];
var deux = toto[1];
var trois = toto[2];
// en utilisant la décomposition
var [un, deux, trois] = toto;
35
destructuring(2)
// en utilisant la décomposition
var [un, deux, trois] = ["one", "two", "three"];
[Link](un);
36
SET
• SET un type de données permet de stocker n’importe quelle valeur de façon
unique.
var marques = new Set();
[Link]("renault");
[Link] ("peugeot");
37
SET (2)
• SET : un type de données permet de stocker n’importe quelle valeur de
façon unique.
var TabMarques = ["citroen", "renault", "bmw", "bmw", "audi",]
var marques = new Set(TabMarques);
[Link](marques);
38
SET (3)
• Utilisation des méthodes has(), clear(), delete() et forEach avec le SET
var TabMarques = ["citroen", "renault", "bmw", "bmw", "audi",]
var marques = new Set(TabMarques);
[Link]([Link]("renault")); // renvoi true
[Link]([Link]("renault")); // supprime renault du tableau
[Link]([Link]()); // supprime tous le tableau SET
[Link](function(val1,val2,Set){
[Link](val1);
[Link](val2);
[Link](Set);
});
39
MAP
• MAP un nouveau type de structure de données permet de stocker
clé / valeur.
var marques = new Map();
[Link]("renault", "clio");
[Link](marques);
[Link]("citroen", "c4");
[Link]([Link]);
[Link](marques);
[Link](function(val, key, Map) {
[Link](val);
[Link](key);
[Link](Map);
});
40
Modules
41
Définition
• Ensemble de briques
• Répartition du code en module
• Maintenir son code proprement
• Séparation de la logique
42
Usages
• Maintenance
• Espace de nom ( namespacing)
• Réutilisation
43
Module: Export
Fichier [Link]
function CalculerSomme(a,b){
return a+b;
}
function GenererRandom(){
return [Link]();
}
export { CalculerSomme, GenererRandom}
// Ou bien
export { CalculerSomme as somme , GenererRandom as random}
44
Module: Import
Fichier [Link]
import { CalculerSomme, GenererRandom} from 'module';
[Link](GenererRandom()); // afficher nombre aleatoire
[Link](CalculerSomme(1, 2)); //3
45
Module: Import(2)
Fichier [Link]
import 'module' as mod;
[Link]([Link]()); // afficher nombre aleatoire
[Link]([Link](1, 2)); //3
46
[Link]
47
Ressources utiles :
• [Link]
• [Link]
• [Link]
48