L'essentiel de JavaScript

Aller plus loin en JavaScript

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Abordez ECMA script 6, la version suivante deJavaScript. L'objectif est de vous donner un petit avant goût de ce qui arrive dans un futur proche.

Transcription

Avant de se quitter, je voulais vous montrer un petit aperçu du futur de JavaScript. Et le futur de JavaScript, c'est ECMAScript 6. ECMAScript 6 a été formellement adopté en juin 2015 et est actuellement en cours d'implémentation dans les navigateurs. Alors, le site sur lequel je me trouve vous propose un tableau qui indique le support, par les différents navigateurs, des nouveautés introduites par ECMAScript 6. Alors, constatez que beaucoup de voyants sont déjà au vert. Donc, les constructeurs de navigateurs ont déjà bien travaillé, mais il reste de très nombreuses zones rouges également, spécialement quand on se dirige, ici, dans les navigateurs mobiles, là, l'ECMAScript 6 n'est pas encore très bien supporté, donc c'est peut-être encore un petit peu tôt pour utiliser cette version-là en production. Cela-dit, je dispose ici d'une version très récente de Google Chrome, c'est Google Chrome 49 qui est la dernière version disponible à l'heure de tourner ces vidéos et Google Chrome 49 a déjà implémenté par mal de fonctionnalités d'ECMAScript 6, donc je vais pouvoir vous en montrer quelques-unes. Alors, je vais prendre pour exemple cette simple page HTML dont voici le JavaScript. Alors, je commence par une toute simple fonction. Une fonction qui prend deux paramètres A et B et qui retourne l'addition de A et de B. Alors, si je fais un « console.log » de l'appel vers cette fonction, voyez que j'appelle « addNumbers » mais remarquez que je ne passe pas de paramètres à « addNumbers ». Alors, cela donne quoi ? Eh bien, vous le savez déjà, cela donne « NaN », « Not a Number ». Alors, la nouveauté d'ECMAScript 6, c'est que je vais pouvoir donner des valeurs par défaut, à ces paramètres, dans la signature de la fonction. Regardez, je vais faire A = 2, par exemple, B = 4, et maintenant, j'appelle ma fonction, je ne lui passe toujours pas de paramètres, eh bien, cela va me donner 6, parce que j'additionne les deux valeurs par défaut, 2 et 4. Je peux, bien sûr, passer les paramètres correctement. Donc, je mets 4, par exemple, et 8, mettons. Alors, j'obtiens 12, 4 + 8, puisque, là, je ne prends plus en compte les paramètres par défaut, mais bien ceux que je passe dans la fonction. Je peux également me contenter de ne passer que un des deux paramètres. Mettons que je passe, ici, pas 2 puisque c'est déjà la valeur par défaut, mais mettons 3, eh bien, dans ce cas-là, j'obtiens 7, parce que j'additionne 3, qui est la valeur de A et B, qui garde sa valeur par défaut, c'est-à-dire 4. Voilà une première petite nouveauté de l'ECMAScript 6, qui va s'avérer très pratique, dans bien des cas. Alors, la deuxième nouveauté, c'est l'opérateur « spread », vous allez voir que, ceci, j'aurais déjà pu en avoir bien besoin dans l'exemple précédent, quand on a augmenté et diminué la taille de texte. Alors, j'ai trois « arrays », une avec des couleurs, une avec des moyens de transport et une avec « entrée », « plat », « dessert » et puis je crée, ici, une autre « array », que j'appelle « arrayFull », j'ai envie de joindre mes trois « arrays » en une seule. Alors, cela donne quoi, pour le moment ? Eh bien, si je sauvegarde et que je reviens dans mon navigateur, cela me donne une « array » de trois éléments, et chacun de ces éléments est lui-même, une « array » de trois éléments. J'ai une « array d' arrays ». L'opérateur « spread », voilà ce qu'il va me permettre de faire. Alors, de retour dans mon éditeur, je vais, tout simplement, mettre « ... » ici, devant chacune de mes trois « arrays », c'est ça, l'opérateur « spread », c'est ces « ... », voilà, je sauvegarde, je reviens dans mon navigateur, je rafraîchis, et là, je n'ai plus une « array » de trois éléments, qui est une « array d'arrays », mais j'ai une seule « array » avec neufs éléments, j'ai joins ensemble les trois « arrays » que j'avais au départ pour en former une seule, que vous avez ici devant les yeux. Vous voyez, j'aurais bien eu besoin de ceci, dans l'exemple précédent. Alors, la dernière chose que je vais vous montrer, c'est ce qu'on appelle les « templates strings », alors j'ai quelque chose de très simple, ici, donc je déclare deux variables, Donc, mon « first name » : Damien, « last name » : Bruyndonckx et puis je fais un « console.log », qui est une concaténation de plusieurs choses, donc, vous voyez, le +, ici, qui est l'opérateur de concaténation et qui revient plusieurs fois, donc « mon prénom est », un espace avant le guillemet, « first name », puis un espace après le guillemet, et « mon nom de famille est », de nouveau un espace « last name » et puis le point dans ses propres guillemets, alors, cela marche très bien, vous allez voir dans la console, mon prénom est « Damien » et mon nom de famille est « Bruyndonckx », alors, au niveau maintenant, de ce « template string », je vais remplacer, mes guillemets par un autre caractère, d'ailleurs je n'ai plus besoin d'aucun guillemet, je vais tous les retirer, voilà, mais cet autre caractère, c'est un caractère un peu particulier qu'on appelle le « backtip », cette espèce d'apostrophe inversée comme ceci, voilà, je n'ai plus besoin non plus de mes opérateurs de concaténation, donc je n'ai plus besoin de mes +, je les retire tous et pour bien faire comprendre au JavaScript que ceci « first name » et ceci « last name », sont des variables, eh bien je vais mettre le symbole « $ » devant, et les placer dans ces accolades, comme ceci, je fais la même chose pour « last name », voilà, « $ », une accolade qui s'ouvre, une accolade qui se ferme, je sauvegarde, je reviens dans mon navigateur, je rafraîchis, et mon message est toujours le même, donc, vous voyez, ici, une autre façon de faire la concaténation, une façon beaucoup plus claire, beaucoup plus simple , on voit très bien à quoi servent, ici, ces espaces, c'est beaucoup plus direct, n'utilisez pas, par contre, les guillemets comme d'habitude, parce que sinon eh bien tout cela sera considéré comme une chaîne de caractères, et donc, vous voyez, ici, que les variables « first name » et « last name » ne sont plus évaluées. Donc, c'est bien ce petit caractère spécial du « backtip », cette apostrophe inversée, dont on a besoin ici. Voilà donc trois nouveautés d'ECMAScript 6, il y en a beaucoup d'autres, je vous invite, évidemment, à consulter une documentation et puis à surveiller de près ce tableau que je vous ai montré en début de vidéo qui va progressivement devenir vert, et quand il sera suffisamment vert, eh bien vous pourrez utiliser ses nouvelles fonctionnalités en production dans vos scripts JavaScript.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :26 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !