Sauter les bases, je connais PHP
La base
Le JavaScript côté navigateur
Les librairies incontournables
Pour aller plus loin
Cas Pratiques (ES2015)

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. Une nouvelle version de ce standard a été publié en Juin 2015 : ECMAScript® 2015. Cette nouvelle version permet de combler les lacunes des versions précédentes et propose de nouvelles règles qui devront être implémentées par les langages de programmations.

Un petit peu d'histoire

Pour comprendre ce qu'est l'ECMAScript je vous propose de revenir dans le passé, vers 1995. A cette époque il y a 2 navigateurs principaux qui se battent pour dominer le marché : Netscape par Netscape (original hein) et Internet Explorer de Microsoft.

Netscape décide de mettre en place un langage côté client sur son navigateur. Brendan Eich crée ainsi le langage LiveScript. Mais, pour des raisons marketing, Netscape demande à Sun de leur permettre d'utiliser le nom JavaScript afin de faire penser qu'il y a un lien avec le langage Java. En mars 1996, le JavaScript fait donc son apparition dans Netscape 2.0 et est très rapidement adopté grâce à la popularité du navigateur.

En réponse à cela, Microsoft décide aussi de créer un langage côté client, le JScript, qui sera mis en place dans la version 3.0 d'Internet Explorer.

Vers 1996 Netscape décide de créer un standard qui permettra de guider les évolutions du JavaScript, et qui pourra aussi être implémenté par les autres navigateurs. Il soumet alors son langage à l'ECMA pour standardisation. Une première version du standard sera finalisé en 1997 sous le nom ECMAScript (Les spécifications se trouvant dans le document Standard ECMA-262). Plusieurs versions du standard s'enchaine jusqu'en 1999 avec l'ECMAScript 3. Pendant près de 10 ans, Microsoft dominera le marché mais ne fera pas évoluer leur produit et le standard n'évoluera donc pas non plus.

L'arrivée de Firefox fera sortir l'ECMAScript de son hibernation. Les travaux reprennent avec une version 4 de l'ECMAScript très critiquée car elle change en profondeur la nature du langage en le poussant vers un modèle plus traditionnel avec des classes à la Java / C++. Mécontent de cette évolution, plusieurs sociétés dont Yahoo, Microsoft et Google décident de développer en parallèle une mise à jour de l'ES3 moins brutale : l'ES3.1. Cette version sera plus tard renommée ES5 et sera finalement publiée en Juin 2005 (et entrainera de ce fait l'abandon de l'ES4).

Depuis 2009, l'utilisation du JavaScript a beaucoup évoluée aussi bien au niveau client qu'au niveau serveur (avec l'engouement autour de NodeJS). Afin de suivre ces évolutions une nouvelle version de l'ECMAScript a été ratifiée en Juin 2015 ; l'ECMAScript 2015 (aussi appellé ES6).

Quoi de neuf docteur ?

Vous l'aurez compris le JavaScript est donc un langage qui implémente les spécifications définies dans l'ECMAScript. La sortie d'un nouveau standard apporte de nouvelles fonctionnalités pour le langage, mais comme d'habitude, le support des navigateurs n'évolue pas aussi vite. Heureusement pour nous ! Il est possible d'utiliser les nouveautés proposées par l'ES2015 (et même l'ES2016 en préparation) gràce à des transpilers tel que babel. Cet outil vous permettra de convertir du code ES2015 en code compatible avec les navigateurs actuels et peut être utilisé avec Browserify ou Webpack.

Let & Const

Lorsque l'on souhaite définir une variable on utilise maintenant let qui permet de définir une variable avec une portée limitée au block

if (false) {
    var a1 = 1; 
    let a2  = 2; 
}
console.log(a1) // undefined
console.log(a2) // erreur: a2 is not defined

A cause du hoisting, une variable déclaré via var se retrouve au niveau du scope global, ce qui n'est pas le cas de let.

const permet de faire référence à une valeur en lecture seul.

const PI = 3.1415
PI = 2 // erreur: PI est en lecture seul

Fonction raccourcie : =>

La flêche est un racourci qui permet de définir une fonction. Son fonctionnement est similaire à celui du CoffeeScript.

let chiffres2 = chiffres.map(v => v * 2 );
eleves.forEach(eleve => {
    eleve.note = eleve.note + 1
});

// Le this du => a le contexte du code qui l'entoure
let classe = {
  nom: "CM1",
  eleves: [],
  printFriends() {
    this.eleves.forEach(eleve =>
      console.log(eleve + " est dans la classe " + this.nom));
  }
};

Un nouveau guillemet

Il est possible de créer des chaines de caractère et d'utiliser l'interpolation gràce au backtick :

`Je fais une chaine de caractère
MULTILIGNE !!! Such modern !
Wow évolution !`

`J'interpole des variable comme mon nom : ${nom}`

Variables depuis des objets / tableaux

Il est possible de déclarer un groupe de variable depuis un tableau ou un objet

// Pour les tableaux
let [a, , b] = [1, 2, 3]
a // 1
b // 3

// Pour les objets
let classe = {
  nom: "CM1",
  eleves: 12
};
let {nom, eleves } = classe
nom // CM1
eleves // 12

// En paramètre de fonction (et en assignant des valeur par défaut)
function r({x, y, w = 10, h = 10}) {
  return x + y + w + h;
}
r({x:1, y:2}) === 23

// En cas d'erreur
let [a] = []
a // undefined

Nouvelle syntaxe pour les objets

On dispose aussi de quelques racourcis pour créer des objets

let a = 1
let b = 2 

let obj = { a, b } // équivalent à {a: a, b: b}

// De la même manière 
let obj = {
    a, // équivalent à a: a
    // équivalent à methode: function methode() {
    methode () { 

    }
}

Paramètre par défaut

Les paramètres de fonctions peuvent maintenant prendre des valeurs par défaut

function demo(a = 1){
    return a
}
demo() // 1

Spread operator

Les paramètres d'une fonction peuvent être convertis en tableau et vice-versa

function showEleves(...eleves){
    console.log(eleves); 
}
showEleves('marc','jean') // ['marc', 'jean']

// Et inversément
function demo(x, y, z){
    console.log(x + y + z);
}
demo(...[1,2,3]) // 6

// Le spread peut aussi être utilisé pour fusionner des tableaux
[1, 2, ...[3, 4, 5]] // [1, 2, 3, 4, 5]

les Classes

On le sait tous créer des classes instanciables en Javascript n'a jamais été vraiment "naturel"... Maintenant on peut créer des classes simplement :

class Animal {

    constructor () {
        this.pattes = 4 
    }

    cri (message) {
        console.log(message);
    }

}

// On peut extends, et override le constructeur
class Araigne extends Animal {
    constructor () {
        super()
        this.pattes = 8
    }
}

// Mais aussi n'importe quelle méthode
class Chat extends Animal {
    cri (message) {
        console.log('miaou'); 
        super.cri(message)
        console.log('miaou'); 
    }
}

let c = new Chat();
c.cri('je veux du lait! '); // miaou je veux du lait miaou 

La gestion des modules

On a tendance à séparer notre code en plusieurs fichier afin de mieux organiser notre code. C'est quelquechose de naturel avec NodeJS et son require()mais qui n'a pas d'équivalent côté langage.

// module1.js
const PI = 3.1415
export default PI

// module-obj.js
let obj = {a: 1, b: 3}
export obj

import PI from 'module1'
import {a, b} from 'module-obj'
import {a, b as demo} from 'module-obj'

Les promesses

Les promesses sont très utilisées dans les frameworks JavaScript mais l'implémentation pouvait légèrement différer d'un framework à l'autre. Elles font maintenant partie du langage :

function attendre(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}

let p = attendre(1000).then(() => {
    return attendre(2000); // On peut enchainer les promesses
}).then(() => {
    // La promesse s'est résolue via le resolve
}).catch(err => {
    // La promesse a été rejetée
})

De nouvelles méthodes

De nouvelles méthodes sont aussi disponibles dans les spécifications

let obj = {
  a: 1,
  f () { return 2 }
};

let copie = Object.assign({}, obj)
// On peut aussi modifier un objet
Object.assign(obj, {a: 3, b: 5})

"aazezeteemo".includes('teemo') // true
[1,2,3].findIndex(x => x == 2) // 1
Number.isInteger("lol") // false
Array.from(document.querySelectorAll("*")) // Crée un tableau
Array.of(1, 2, 3)