Le JavaScript moderne Online

Formation

En Ligne

Prix sur demande

Appeler le centre

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Description

  • Typologie

    Formation

  • Méthodologie

    En ligne

Nous vous proposons des cours ouverts pour se former autrement, pour devenir acteur de votre vie. Nous vous aidons à prendre votre envol, mais ça ne s'arrête pas là. Notre volonté est de vous accompagner tout au long de votre vie, dans votre parcours professionnel.Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Le programme

Introduction du cours

Ce cours a été écrit en mai 2012, et n'est donc plus entièrement à jour : JavaScript et les écosystèmes qui l'utilisent évoluent toujours plus vite.

Ces dernières années, l'utilisation de JavaScript a évolué jusqu'à en faire un incontournable du web. L'écrasante majorité des navigateurs supportent JavaScript, que ce soit pour les ordinateurs de bureau ou les téléphones portables. Les navigateurs web optimisent continuellement leurs moteurs JavaScript et les développeurs en profitent pour apporter des applications entières sur le web. Le succès de JavaScript est tel qu'il s'étend désormais à d'autres usages :

  • Node.js, CouchDB ou encore Meteor utilisent JavaScript pour créer des sites web, mais cette fois aussi du côté serveur ! Un seul langage est utilisé, ce qui facilite le développement.

  • Les applications de bureau ne sont pas en reste : JavaScript fera partie des langages supportés pour écrire des applications dans Windows 8 et Qt 5, deux mastodontes pour les interfaces utilisateur de demain.

Paradoxalement, la réputation de JavaScript a longtemps été mauvaise, et on n'imagine pas forcément au premier abord toutes les possibilités aujourd'hui offertes par JavaScript. Dans ce contexte, tout programmeur a intérêt à se pencher sur JavaScript pour comprendre ses origines, savoir ce qui est possible aujourd'hui et ce qu'on peut espérer du langage dans le futur. C'est dans cette optique que se place cette article : nous espérons qu'elle puisse vous être utile en tant que programmeur et/ou décideur pour mieux comprendre ce que peut vous apporter ce langage aujourd'hui et dans les années qui viennent.

L'utilisation principale de JavaScript reste aujourd'hui l'aide à la navigation sur un site web. L'idée est de proposer aux utilisateurs ayant activé JavaScript des petites fonctionnalités pratiques rendant la navigation plus rapide et plus confortable sans pour autant impacter les utilisateurs ne disposant pas de JavaScript (tels que les moteurs de recherche). Cette façon d'utiliser JavaScript s'inscrit dans le cadre plus général du progressive enhancement. On se contente initialement de HTML pour apporter les fonctionnalités de bases aux clients les plus basiques : moteurs de recherche, lecteurs d'écrans, navigateurs texte. On conçoit ensuite la présentation en CSS avec des techniques de responsive design : on pense d'abord aux petits écrans des smartphones, puis le rendu est adapté aux écrans plus larges via les media queries CSS3.

JavaScript permet ensuite de peaufiner l'expérience utilisateur par petites touches : nous prendrons pour exemple le Site du Zéro (l'ancêtre d'OpenClassrooms) qui a toujours suivi cette philosophie.  Par exemple, la speedbarre située en haut de chaque page permet d'accéder rapidement aux divers contenus du site : l'utilisation de JavaScript améliore ici l'ergonomie en respectant mieux la règle des trois clics. Nous ferons plus tard dans l'article un état des lieux plus complet de l'utilisation de JavaScript sur le Site du Zéro, qui se cache parfois où on ne l'attend pas.

L'histoire mouvementée de JavaScript

Il est important de réaliser que JavaScript et les bibliothèques telles que jQuery qui ont fait son succès ne sont pas apparues du jour au lendemain. Au contraire ! Cette section explique le long chemin parcouru depuis les années 1990.

La préhistoire

C'est en 1995 qu'a eu lieu sur le web le début de la guerre des navigateurs. Netscape Navigator 1 et Internet Explorer 1 étaient les deux navigateurs les plus populaires, et chacun se battait pour grappiller des parts de marché à l'autre. Une des stratégies les plus utilisées à l'époque était d'ajouter des améliorations propriétaires puis d'encourager les webmasters à s'en servir. Les sites web ainsi créés ne fonctionnant pas aussi bien chez le concurrent, les utilisateurs étaient ainsi encouragés à installer le navigateur prévu par le webmaster. Naturellement, dès qu'une fonctionnalité devenait populaire, le concurrent l'implémentait aussitôt, et le cycle pouvait recommencer.

C'est dans ce contexte que Brendan Eich a été recruté par Netscape, toujours en 1995. Sa mission était initialement d'intégrer le langage fonctionnel Scheme à Netscape 2 pour donner la possibilité à des personnes peu expérimentées d'ajouter des effets à leurs pages. La direction de Netscape a insisté pour que ce langage ressemble à Java, qui allait lui aussi être intégré pour rendre possible la création de composants plus sérieux, les applets Java. Le nom JavaScript viendrait d'ailleurs de la volonté d'attirer l'attention des médias sur ce nouveau langage, et d'entretenir la confusion avec Java. Néanmoins, ce sont deux langages très différents : Brendan Eich déclare s'être principalement inspiré de Scheme et Self pendant les 10 jours qu'il a eu pour concevoir un prototype. Au-delà du langage en lui-même, c'est à cette époque qu'est apparu DOM 0 qui permet d'utiliser JavaScript pour interagir avec une page web. Par exemple, ce code permet d'afficher une popup à l'utilisateur lors d'un clic sur un lien :

<a href="#clickme" onclick='alert("Vous avez cliqué !")'>Cliquez-moi !</a>

Au fil des années, de nombreuses versions de JavaScript sont apparues dans Netscape et Internet Explorer, apportant à chaque fois leur lot de nouveautés. À cette époque, l'utilisation de JavaScript dans des pages web s’appelait DHTML, et de nombreux mauvais livres en enseignaient les possibilités sans pour autant indiquer les bonnes pratiques. Les alert(), les curseurs personnalisés, les menus déroulants inaccessibles voire la neige sur les pages web étaient une plaie pour les utilisateurs. JavaScript était alors considéré comme un « langage pour amateurs ».

Redécouverte de JavaScript

Ce n'est que depuis le milieu des années 2000 que les développeurs ont compris que JavaScript pouvait être utilisé judicieusement afin d'améliorer l'expérience de certains utilisateurs sans pénaliser les autres. C'est aussi à cette époque que l'objet XMLHttpRequest a été rendu disponible sur les principaux navigateurs, ouvrant la voie à des sites web plus dynamiques, capables de ne recharger qu'une partie des pages web : cette technique est connue sous le nom d'AJAX. Ruby on Rails proposait dès 2005 l'utilisation d'AJAX de manière simple et transparente ; de nombreux frameworks ont suivi par la suite.

Cependant, écrire du JavaScript restait réservé à une certaine élite du fait des différences entre les navigateurs. Afin de gommer ces différences, des bibliothèques telles que jQuery, Prototype ou encore Mootols deviennent disponibles en 2005/2006. Elles offrent notamment la possibilité de sélectionner des éléments de la page en utilisant de simples sélecteurs CSS. Par exemple, si je veux afficher tous les éléments cachés d'une page ayant la classe secret, il me suffit d'écrire $('.secret[display="none"]').show(). Les apports de ces bibliothèques vont au-delà de ce simple exemple :

  • un simple appel de fonction permet de récupérer des données du serveur via AJAX ;

  • il est facile de réagir à des évènements tel qu'un clic ou une soumission de formulaire ;

  • de nombreuses animations tels que les fondus apportent des transitions plus douces ;

  • et de nombreuses autres fonctionnalités.

Contrairement à ce qu'on pourrait croire, ces bibliothèques ne dispensent pas de connaître et comprendre les concepts JavaScript utilisés. Quoiqu'il en soit, ces bibliothèques ont ouvert la voie à une utilisation massive de JavaScript en facilitant grandement l'écriture de nombreux programmes allant du petit script à l'application complète.

Normalisation

Source: Infinities Loop

Pour s'assurer que JavaScript soit implémenté de la même manière dans tous les navigateurs, un standard spécifiant en détail le fonctionnement du langage est une condition nécessaire, même si pas forcément suffisante. Le comité TC39 existe au sein d'ECMA depuis 1996 pour réaliser ce travail d'équilibriste : il s'agit à la fois d'incorporer les extensions les plus pertinentes et de proposer les évolutions les plus prometteuse pour le langage, le tout devant former un ensemble cohérent. Le langage ainsi spécifié se nomme ECMAScript. C'est d'ailleurs un abus de langage de parler de JavaScript qui n'est finalement que le nom de l'implémentation initialement proposée par Netscape et maintenant développée par Mozilla. Quand nous disons programmer en JavaScript, nous utilisons en fait une version spécifique d'ECMAScript.

Pendant longtemps, c'est ECMAScript 3 qui a été utilisé. Au début des années 2000, le comité s'est penché sur une mise à jour très ambitieuse : ECMAScript 4. Malheureusement, le langage était tellement complexe que les membres du comité n'ont pas réussi à se mettre d'accord et cette version a fini par être abandonnée. Les organisations n'étant pas favorables à ES4 (parmi lesquelles figuraient Microsoft, Google et Yahoo!) ont décidé de former leur propre comité pour proposer une mise à jour plus réaliste et moins ambitieuse. Le comité TC39 l'a finalement adoptée à la place d'ECMAScript 4, et c'est ainsi qu'ECMAScript 5 a été finalisé à la fin de l'année 2009.

Parmi les fonctionnalités apportées par ES5 figurent des fonctions capables d'opérer sur des collections. Par exemple, filter() prend en paramètre une fonction et retourne une nouvelle collection contenant les éléments que la fonction a choisi de conserver :

var ages = [12, 89, 23, 45, 5, 37]; var majeurs = ages.filter(function(age) { return age > 18; }); // Désormais, majeurs vaut [89, 23, 45, 37]

Le comité TC39 a décidé de ne pas s'arrêter avec ECMAScript 5 et travaille aujourd'hui sur ECMAScript Harmony, une nouvelle version prometteuse qui reprend certains éléments d'ECMAScript 4 et qui vise à faciliter l'utilisation de JavaScript dans des applications modernes. La dernière section de cette news vous présentera les nouveautés les plus intéressantes de cette nouvelle version d'ECMAScript.

L'assembleur du web

JavaScript a principalement évolué en tant que langage de script pour les navigateurs. Cependant, son utilisation dépasse aujourd'hui ce cadre, et cette section se propose aussi de vous introduire à d'autres possibilités qui n'auraient pas été imaginables il y a quelques années.

Si vous êtes intéressés par ces technologies, sachez que Nesquik69 et Thunderseb nous proposent deux tutoriels de qualité sur OpenClassrooms : Dynamisez vos sites web avec Javascript ! et AJAX et l'échange de données en JavaScript. Ils ne sont pas spécifiques à une bibliothèque telle que jQuery et constituent un excellent moyen de comprendre le fonctionnement de JavaScript tout en apprenant à l'utiliser au mieux : il est ensuite très facile d'utiliser jQuery, par exemple. Une autre excellente ressource est JavaScript: The Good Parts qui couvre en profondeur les bonnes pratiques à utiliser avec JavaScript.

Cas d'utilisation : OpenClassrooms

Pour rendre cet article plus concret, nous avons décidé de montrer comment est utilisé JavaScript dans un vrai site web : OpenClassrooms. Ce n'est pas le seul site à le faire : Google Search, Wikipédia, BaseCamp Next ou encore Trello sont d'autres exemples de site tirant profit intelligemment des possibilités de JavaScript. Néanmoins, il est intéressant de proposer un « instantané » de l'utilisation du JavaScript sur un site web donné qui a toujours déclaré utiliser JavaScript pour améliorer le confort des utilisateurs, et non pour céder à une quelconque mode. Sur OpenClassrooms, une lecture du code JavaScript indique qu'il y a trois grandes utilisations :

  • les publicités qui sont chargées en JavaScript après le reste de la page afin d’accélérer le chargement ;

  • les outils de mesure (activité de l'utilisateur, performance de la page) ;

  • les aides à la navigation.

Les publicités sont chargées une fois la page affichée pour ne pas ralentir l'utilisateur qui vient avant tout pour le contenu du site web : il n'y a rien de plus frustrant que d'attendre qu'une publicité s'affiche pour voir le contenu d'une page. Les publicités semblent être servies par Google AdSense, Smart AdServer ou parfois directement par le site pour le site : il s'agit alors d'auto-promotion pour des parties spécifiques du site (la boutique, par exemple). Il est intéressant de noter qu'OpenClassrooms n'impose pas les publicités à ses utilisateurs : il est possible de les désactiver complètement pour les utilisateurs qui le souhaitent. C'est exceptionnel sur le web et mérite d'être souligné.

Au niveau des mesures, il y a d'abord la performance côté client : diverses mesures dont le temps d'affichage sont effectuées via l'outil Real User Monitoring de New Relic. Cet outil permet aux développeurs de savoir ce qui prend du temps en pratique sur la page. Est-ce que c'est l'affichage des pubs ? Le téléchargement de jQuery ? Le traitement du JavaScript pour le navigateur ? C'est un outil précieux pour garder le site performant et rapide à utiliser.

Logo Chartbeat

Du point de vue de l'activité de l'utilisateur, une analyse des pages vues est faite via Google Analytics et XiTi. Au-delà du suivi des clics, l'activité sur chaque page est mesurée via Chartbeat. Êtes-vous en train de bouger la souris ou de faire défiler la page ? C'est ce qui indique à Chartbeat et à OpenClassrooms que vous êtes en train de lire ce cours. Si vous décidez de laisser un commentaire, les lettres tapées permettront de savoir que vous avez commencé à taper un message, avant même que vous ne décidiez de le soumettre. Ces statistiques ont de nombreuses utilités potentielles. Un exemple farfelu : elles pourraient être utilisées pour améliorer les articles. En effet, si tout le monde arrête sa lecture après ce passage, c'est peut-être qu'il était décourageant. :)

Enfin, la plus grande partie du JavaScript écrit sur OpenClassrooms concerne les aides à la navigation. Elles sont nombreuses, mais jamais obstrusives : il est possible d'utiliser les mêmes fonctionnalités sans JavaScript, c'est simplement moins agréable. Il y a plusieurs dizaines de telles fonctionnalités. Citons en quelques-unes :

  • tous les formulaires du site sont équipées d'aide à l'édition permettant d'écrire du contenu plus riche (liens, titres, mise en forme, etc.),

  • la sauvegarde automatique permettant de ne pas perdre le contenu écrit suite à une fausse manipulation,

  • le carrousel de la page d'accueil met en avant différents contenus les uns après les autres,

  • les spoilers ne sont affichés en JavaScript qu'à la demande de l'utilisateur,

  • l'auto-complétion lors de la recherche de membres,

  • l'affichage de la timeline twitter ou du flux RSS des membres directement sous leur avatar,

  • le calcul du prix total lors d'une commande de livres,

  • ou encore l'affichage des avatars des auteurs d'un tutoriel au survol de leur pseudo.

Certains ajouts ont une utilité limitée, d'autres comme la sauvegarde automatique sont rapidement devenus indispensables, mais rien de toute cela n'aurait été possible sans JavaScript.

Applications web Logo HTML5

Même si OpenClassrooms reste relativement conservateur dans son utilisation de JavaScript, il est possible de franchir un autre palier : écrire une véritable application avec JavaScript. La distinction entre une application web et un site web est très floue, mais reste un moyen rapide de désigner des sites faisant énormément appel à JavaScript tels que GMail, la version classique de Twitter, ou encore Facebook. Étant donné que JavaScript est le langage que les navigateurs savent interpréter rapidement, ces applications peuvent se permettre d'utiliser de...

Appeler le centre

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Le JavaScript moderne Online

Prix sur demande