Certains d’entre nous utilisent cet outil magique qu’est le langage de script Javascript. JavaScript est un langage dynamique orienté objet ; il dispose de différents types, opérateurs, objets natifs et méthodes. Sa syntaxe s’inspire des langages Java et C comme beaucoup d’autres langages. À la différence de ces langages, JavaScript n’a pas de classes, remplacés prototypes par la notion de d’objet. Autre différence : les fonctions sont des objets qui contiennent du code exécutable, et sont transmises comme n’importe quel objet. Javascript manipule des variables :
- Les nombres :
Number - Les chaînes de caractères :
String - Les booléens :
Boolean - Les fonctions :
Function - Les objets :
Object - Les symboles :
Symbol
On aura également undefined et null, qui sont relativement étranges.
Les tableaux ou Array permettent d’organiser des séries d’objets au sein d’un même objet.
Les dates et les expressions rationnelles ou RegExp
Pour aller plus loin, n’hésitez-pas à visiter l’introduction à javascript qui vous sera une mine d’information précieuse pour comprendre les principales fonctionnalités de ce langage.
Mise à jour à l’aube du web mobile
ECMAScript 6 est la prochaine version de la norme ECMAScript. Cette norme vise la ratification en Juin 2015. ES6 est une mise à jour importante à la langue, et la première mise à jour de la langue depuis ES5 a été standardisée en 2009. La mise en œuvre de ces caractéristiques dans les principaux moteurs JavaScript est actuellement en cours.
Voir le projet de norme ES6 pour les spécifications détaillées de la langue ECMAScript 6.
Pourquoi une mise à jour ? L’objectif est de transformer ce langage pour améliorer son fonctionnement lors de la création d’applicatifs complexes, pour l’utilisation des librairies et la gestion du DOM :
(Le Document Object Model (ou DOM1,2) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d’accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML3 et XML4. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu’il sera présenté.)
IL est amélioré aussi dans son utilisation conjointe avec d’autres langage de programmation (C, Python, Java, etc…) dans son rôle de cible de ces langages.
Son design a été perfectionné par une équipe de ‘champions’ et la communauté des utilisateurs expert.
Dans les fait, le moteur de javascript 6 à été mis a jour de façon à ce que d’ancienne version (5 et inférieures) puissent continuer à fonctionner, alors que pour les nouvelles une mise à jour sera obligatoire.
Le code, lui, et optimisé pour tourner sur la plupart des machines utilisés. Dans le cas de non-fonctionnement, il sera possible de faire une compilation du langage vers la version 5 (actuelle), s’il n’est pas possible d’attendre la mise à jour des moteur de rendu.
Les fonctions
Il est maintenant possible de définir des variables locales à un bloc (let, const), ce qui évite des conflits potentiels de variables déclarées avec var.
function Variablea() {
let VariableBloc = "Chat"
}
// VariableBloc is not defined
// VariableBloc n'est pas défini en dehors de la fonction
Destructuring
Il est possible avec JS6 de destructurer les données, c’est à dire de les faire correspondre avec une structure de données non instanciée. C’est une particularité qui améliore la gestion des données et leur assignation
let obj = { first: 'Jane', last: 'Doe' };
let { first: f, last: l } = obj; // (A)
// f = 'Jane'; l = 'Doe'
let [a, b, c] = [1, 2, 3, 4] // a == 1 // b == 2 // c == 3 let [a, b, ...c] = [1, 2, 3, 4] // a == 1 // b == 2 // c == [3, 4]
L’utilisation de valeur par défaut simplifie la gestion des fonctions
function func1(x, y=3) {
return [x,y]
}
// Interaction :
# func1 (1,2)
[1,2]
# func1 (1)
[1,3]
#func1 ()
[undefined,3]
// En cas de non affectation de valeur, la fonction garde sa valeur définie par défaut
Il est possible de définir des plages d’argument des fonctions avec …
function func2(arg0, …others) {
return others;
}
# func2(0,1,2,3)
[1,2,3]
# func2(0)
[]
# func2()
[]
Les ARROWS
Les flèches sont un raccourci de fonction utilisant la syntaxe => . Elles sont similaire à la même fonction en C #, Java 8 et CoffeeScript. Elles prennent en charge les organes d’expression et du compte. Contrairement aux fonctions, les flèches partagent la même lexicale ce que leur code environnant. Cela simplifie grandement la lecture du code et permet une ecriture plus rapide
// Expression bodies var odds = evens.map(v => v + 1); var nums = evens.map((v, i) => v + i); var pairs = evens.map(v => ({even: v, odd: v + 1})); // Statement bodies nums.forEach(v => { if (v % 5 === 0) fives.push(v); }); // Lexical this var bob = { _name: "Bob", _friends: [], printFriends() { this._friends.forEach(f => console.log(this._name + " knows " + f)); } }
Les classes ES6 sont une grosse nouveautés. Avoir une seule forme déclarative simplifie de fait l’utilisation des modèles de classe, et encourage l’interopérabilité entre le langages. Classes utilise l’héritage basé sur les prototypes, les supper calls, les instances, les méthodes statiques et les constructeurs.
class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) {
super(geometry, materials);
this.idMatrix = SkinnedMesh.defaultMatrix();
this.bones = [];
this.boneMatrices = [];
//...
}
update(camera) {
//...
super.update();
}
get boneCount() {
return this.bones.length;
}
set matrixType(matrixType) {
this.idMatrix = SkinnedMesh[matrixType]();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}
Un exemple de définition d’une classe:
class Point extends Base {
constructor(x,y) {
super();
this[px] = x, this[py] = y;
this.r = function() { return Math.sqrt(x * x + y * y); }
}
get x() { return this[px]; }
get y() { return this[py]; }
}
Structure de données
ECMAScript 6 offre la possibilité de définir ses propres structures de données, en utilisant des données binaires.
const Point2D = new StructType({ x: uint32, y: uint32 });
const Color = new StructType({ r: uint8, g: uint8, b: uint8 });
const Pixel = new StructType({ point: Point2D, color: Color });
Color, Pixel et Point2D agissent tous les 3 comme des objets. Ils permettent de définir le cadre des futures instances.
Unicode
AS6 permet l’utilisation intégrale d’Unicode, y compris la nouvelle forme littérale Unicode dans les chaînes de caractère et le nouveau RegExp u pour gérer les points de code, ainsi que de nouvelles API pour traiter les chaînes en code 21bit. Ces ajouts autorise la création d’applications mondiales en JavaScript et la gestion des event et fonctions basés sur le texte dans les ePub dans toute les langues.
Chaînes de caractères sur plusieurs lignes
Les utilisateurs d’azerty risquent de ticker devant le caractère choisi (backtick), mais ce sera une excellente raison de passer au bépo.
var str = `hello i'm talking to you. `
Conclusion
Voici un léger aperçu de quelques nouvelles fonctions javascript 6 prévues pour cette année.
ES6 inclut les nouvelles fonctionnalités suivantes:
- arrows
- classes
- enhanced object literals
- template strings
- destructuring
- default + rest + spread
- let + const
- iterators + for..of
- generators
- unicode
- modules
- module loaders
- map + set + weakmap + weakset
- proxies
- symbols
- subclassable built-ins
- promises
- math + number + string + object APIs
- binary and octal literals
- reflect api
- tail calls
Et voici quelques liens vers des sites ressources indispensable pour aller plus loin
Button Text Button Text Button Text Button Text Button Text Button Text Button Text
