Les principaux apports de la norme ECMAScript 6

La norme ECMAScript

ECMAScript est un ensemble de normes de programmation recommandées pour les langages de script et standardisées par Ecma International dans le cadre de la spécification ECMA-262. Ces normes sont principalement appliquées par les interpréteurs JavaScript.

Ces recommandations étant très nombreuses, nous ne détaillerons que quelques-unes de celles définies en 2015 (norme ECMAScript 6) :

  • le mot réservé let ;
  • les paramètres par défaut ;
  • les classes.
  • l’interpolation des variables dans les chaînes de caractères ;
  • la structure itérative for (… of …)… ;
  • la manipulation plus confortable des listes avec :
  • l’utilisation des fat arrows pour simplifier l’écriture des fonctions de callback ;
  • la méthode includes() pour tester la présence d’un élément ;

Le mot réservé let

Le mot réservé let limite la portée de la variable qu’il introduit au bloc d’instructions courant.

Il est, par exemple, systématiquement utilisé pour les variables locales aux structures itératives :

Les paramètres par défaut

Lors de la définition d’une fonction, des valeurs par défaut de paramètres optionnels peuvent être définies :

L’interpolation de variables dans les chaînes

Pour manipuler des chaînes de caractères s’étendant sur plusieurs lignes et/ou interpolant des variables, il est désormais possible d’utiliser les backquotes et ainsi de créer des templates strings.

En voici un exemple :

Une manipulation plus confortable des listes

La structure for (… of …) …

La structure itérative for (let <variable> of <liste>) { ... } permet d’accéder directement aux éléments d’une liste alors que la structure for (let <variable> in <liste>) { ... } n’instancie la variable locale à la boucle qu’avec les indices des éléments de la liste.

La méthode includes()

La méthode includes() permet de tester si une liste contient un élément particulier (la méthode indexOf() ne permettant que de connaître l’indice de l’élément) :

L’opérateur « fat arrow » (=>)

Non seulement la fat arrow (=>) est un raccourci syntaxique pour les fonctions de callback, mais elle permet aussi de conserver le contexte de l’objet courant (this) dans la fonction de callback.

Par exemple, l’écriture syntaxique de la fonction de callback passée en paramètre de la méthode forEach() peut être simplifiée.

Devient :

voire dans ce cas-ci (un seul paramètre) :

Attention, l’implémentation de cette fonctionnalité dépend de la version de votre interpréteur JavaScript

Les classes

ECMAScript 6 définit les classes (via le mot-clé class) et un héritage simple.

La classe possède un constructeur défini par la fonction constructor() et invoqué par l’instruction new.

 

Qu’est-ce que Javascript?

Qu’est-ce que Javascript?

JavaScript est un langage de programmation créé en 1995 par Brendan Eich qui travaillait pour la société Netscape. Le but originel du langage est de créer des scripts, c’est-à-dire des programmes interprétés, qui sont exécutés par un navigateur, principalement pour manipuler les données du DOM (Document Object Model), c’est-à-dire les objets représentant les éléments du document balisé (par exemple, une page HTML) et alloués en mémoire du navigateur.

JavaScript a ensuite beaucoup évolué fonctionnellement (par exemple, en permettant l’accès asynchrone à des données fournies par le serveur) et a même récemment investi le « côté serveur » avec l’environnement Node.js.

JavaScript n’a rien à voir avec Java (seulement quelques structures syntaxiques qui proviennent en fait du langage C).

Le DOM représente la hiérarchie des objets créés par les balises (HTML…) en mémoire du navigateur.

Panorama de l’utilisation de JavaScript

Utilisation de JavaScript coté client:

  • Gérer l’événementiel lié à une page HTML
  • Accéder aux éléments du DOM et, le cas échéant, les modifier avec l’API DOM de JavaScript ou avec des bibliothèques de plus haut niveau comme JQuery.
  • Gérer des flux de données asynchrones avec le serveur via l’architecture AJAX
  • Mettre en œuvre un stockage de données sur le système de fichiers local via les objets JavaScript sessionStorage et localStorage.

Utilisation de JavaScript coté serveur

Les codes JavaScript mis en œuvre du côté serveur sont non seulement utilisés pour gérer des web sockets, mais surtout pour créer des serveurs HTTP très réactifs, car fondés sur l’architecture événementielle de JavaScript. Le principal environnement JavaScript permettant de créer de tels serveurs est Node.js

Où coder du code JavaScript ?

Pour une utilisation côté client hors « bundlelisation », les codes JavaScript doivent être externalisés dans des fichiers d’extension .js et liés aux codes HTML via la balise <script>, comme dans l’exemple ci-après.

Soit le script JavaScript nommé main.js :

Et la page HTML index.html mettant en œuvre ce script :

Cet exemple de code est exécuté en étant chargé dans votre navigateur.

Les messages générés par la méthode log() de l’objet console.

L’objet History

L’objet History :

L’objet History représente un tableau d’URLs visitées par l’utilisateur. En utilisant cet objet, vous pouvez naviguer entre les pages, par exemple(aller à la page précédente, suivante, etc…).

N.B : vous pouvez accéder à l’objet History soit en utilisant l’objet window ou bien directement, ci-dessous un exemple :

– Les propriétés de l’objet History : en fait on a qu’une seule propriété, c’est la propriété length, cette dernière nous permet de retourner la longueur des URLs.

– Les méthodes de l’objet History :

  • back(); : la méthode back nous permet d’aller à la page précédente.

  •  forward(); : cette méthode nous permet d’aller à la page suivante.

  • go(3); : si cette méthode prend un nombre positif, par exemple 3 dans ce cas, on va aller à la page suivante numéro 3.

  • go(-3); : si cette méthode prend un nombre négatif, par exemple 3 dans ce cas, on va aller à la page précédente numéro 3.

 

L’objet Window

L’objet Window

Window est un objet qui correspond à la fenêtre dans laquelle s’affiche une page Web. Un objet window est créé automatiquement par le navigateur. Notez qu’un objet window est un objet du navigateur et non un objet javascript(les objets javascript sont : array, date, string, number…).

Nous allons voir certaines méthodes de l’objet window  :

Alert

Affiche un texte dans un message d’alerte u d’information, la boite de message n’est pas modifiable.

  • Exemple :

Confirm

Affiche le paramètre texte dans un message d’alerte avec 2 boutons de confirmation. Retourne true si l’utilisateur clique sur Ok, retourne false si l’utilisateur clique sur Annuler ou appuye sur la touche Echap.

  • Exemple :

Open

Ouvrir une nouvelle fenêtre.

  • Exemple :

Close

Fermer les fenêtres. Si la fenêtre est ouverte par la méthode open aucune confirmation ne sera demandée pour fermer la page sinon une demande de confirmation vous sera demandée.

  • Exemple :

Prompt

Une boite de dialogue est affichée avec une zone de texte saisissable, et deux boutons valider et annuler, si l’utilisateur clique sur valider la méthode retourne le texte saisi et si on clique sur annuler elle retourne null.

  • Exemple :

 

Les fonctions JS

Les fonctions JS :

javascript2

Les fonctions en général sont utilisées pour éviter la redondance et avoir un code bien structuré et organisé, du coup on aura deux principaux avantages : la réutilisation du code et ne pas avoir beaucoup de lignes de code.

Syntaxe (fonction sans paramètres) :

Exemple :

Syntaxe (fonction avec paramètres) :

Exemple :