Une introduction à Javascript et ECMAScript 6

Qu’est-ce que Javascript ?
Source : OpenClassRooms
• JavaScript est un langage de programmation interprété, c'est-à-dire qu'il a besoin d'un interpréteur pour pouvoir être
exécuté.
• JavaScript est utilisé majoritairement au sein des pages Web mais aussi en guise de serveur ou d'application.
• Tout comme HTML, le JavaScript est exécuté par le navigateur de l'internaute : on parle d'un comportement client-
side, par opposition au server-sidelorsque le code est exécuté par le serveur.
• JavaScript est standardisé par l'ECMA International sous le nom d'ECMAScript qui constitue la référence du langage.

ECMAScript
ECMAScript
JavaScript
E4X
(Gecko)
JScript
(IE≤9)
JScript.NET
ActionScript
(Flash)
V8
(Chrome,
NodeJS)
Konqueror
Standard
Implémentation
Moteur

Utilisations de Javascript
Client-side Server-side
Tools

Javascript pour la plupart
des développeurs…

Types primitifs
Type Description Exemples
string chaîne de caractère "a", "Hello World !", ‘Bonjour’…
number nombre (réel / entier) 1, 2, 1.0, 3.14, NaN, Infinity…
boolean booléen true,false
null nul
La variable n’a pas été initialisée
null
undefined non défini
La variable n’a pas été définie
undefined
Différences entre null et undefined : https://bit.ly/2zFGUG8
Pour obtenir le type d’une variable : typeof(maVariable)

Types standards
Type Description Exemples
Object Objet {}, {name:"Dupont", firstName: "Jean"}…
Function Fonction sayHello(), replace(), setTimeout()…
Array Tableau [],[1,2, 3],["a","b"]…
Date Date Mon Oct 09 201721:57:53GMT+0200(CentralEuropeDaylight Time)
RegExp Regex
Expression régulière
new RegExp(/ab+c/i), new RegExp('w+')
…

Variables
var age = 18; // age est un number
age = ’19’; // désormais, c’est un string

Variables
var b;
var b = undefined; //Identique à la ligne au-dessus
// Initialisationd’une variable nulle
var a = null;
var date = new Date(); // Date du jour

Variables
varpersonne ={
nom:"Dupont",
prenom:"Jean",
age:18
};
console.log(personne);
console.log(personne.nom);
console.log(personne["nom"]);// Identique àla ligne dudessus

let / var / const ?
• L'instruction let permet de déclarer une variable dont la portée est
celle du bloc courant, éventuellement en initialisant sa valeur.
• Disponible à partir de ES 6.
• Ex: let age = 18;

let / var / const ?
• L'instruction const permet de déclarer une constante avec sa valeur
dont la portée est celle du bloc courant.
• Disponible à partir de ES 6.
• Ex: const PI = 3.14;

let / var / const ?
• L'instruction var permet de déclarer une variable dont la portée est
vraie pour la fonction qui la comporte, éventuellement en initialisant
sa valeur.
• Ex: varnom= ‘Dupont’;
Elles sont traitées avant que n'importe quel autre code soit exécuté. Ainsi, déclarer
une variable n'importe où dans le code équivaut à la déclarer au début de son
contexte d'exécution.
Cela signifie qu'une variable peut également apparaître dans le code avant d'avoir
été déclarée.
On appelle ce comportement la « remontée » (ou hoisting en anglais)

Fonctions
• Déclarer une fonction
functionecrireNom(nom) {
console.log("Je m’appelle"+ nom);
}
• ou une expression de fonction
varecrireNom=function(nom){
console.log("Je m’appelle"+ nom);
};

Opérateurs
• Affectation : =, +=,-=,*=,/=, &=,…
• Arithmétiques : +,-,*, /, …
• Logiques : && (et),|| (ou),! (not)
• Comparaison :
• Simple* : ==,!=, >,<,>=,<=
• Stricte, avec vérification du type : ===, !==
* pour == et !=, JS essaie trouver un point commun entre les 2 valeurs à l’aide notamment des méthodes
valueOf() et toString(). Détails sur https://mzl.la/2mJnkRT

Reproches faits à Javascript (ES 5)
• Sa syntaxe faisant penser que c’est un langage « brouillon »
• Trop permissif
• Code complexe et illisible
• Un typage statique optionnel des variables et des fonctions
• Pas de documentation officielle
• Des performances laissant à désirer
• Faible implémentation objet : pas de classes ni d’interfaces
• Pas d’import de modules
Pour un peu plus de lecture : https://bit.ly/2xqZW2W

Solutions
• Passez à une version supérieure (ES ≥ 6)
• Oui mais tous les navigateurs ne sont pas compatibles (IE notamment)…
• Utiliser un outil de transpilation
• Le code est écrit en ES ≥ 6 ou plus puis converti en ES 5
Ex : Traceur, BabbelJS, etc.
• Utilisez un langage intermédiaire
• Le code est écrit dans un autre langage pour compilé en Javascript
Ex : TypeScript, CoffeeScript

Bonnes pratiques
• Ecrivez votre code dans des fichiers .js séparés
• Déclarez vos variables en début de script (pour le rendre plus lisible)
• Apprenez à vous servir de la console et du debugger de votre navigateur
• Utilisez des frameworks et des bibliothèques (Angular, React, Moment.js…)
• Séparez la présentation de la logique métier
• Utilisez le mode strict (‘use strict’)
• Le code Javascript doit être « statique » (et non généré côté serveur)
• Evitez l’utilisation de la fonction eval()
• Couvrez votre code Javascript avec des tests unitaires

Un peu de lecture
• Documentation non officielle maintenue par Mozilla et la communauté
https://developer.mozilla.org/fr/docs/Web/JavaScript
• Tutoriel Javascript sur OpenClassRooms
https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript
• TypeScript : https://www.typescriptlang.org/
• CoffeeScript : http://coffeescript.org/

Une introduction à Javascript et ECMAScript 6

Contenu connexe

Tendances (20)

Similaire à Une introduction à Javascript et ECMAScript 6 (20)

Plus de Jean-Baptiste Vigneron (9)

Dernier (7)

Une introduction à Javascript et ECMAScript 6