• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 22/11/2017

Conclusion et perspectives

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

 

Même les meilleures choses ont une fin... Hé oui, ce cours est terminé ! :p

Bilan récapitulatif

Voici une petite synthèse de ce que vous venez d'apprendre.

  • Une page web est un document structuré contenant à la fois du texte et des balises HTML. Grâce à JavaScript, on peut accéder à la structure d'une page affichée dans un navigateur, et même la modifier.

  • Le DOM, ou Document Object Model, est une manière de représenter un document web sous forme d'une hiérarchie d'éléments appelés des noeuds. Certains noeuds ont des noeuds enfants, d'autres non.

  • Le DOM est aussi une API (Application Programming Interface) permettant d'interagir avec la page en utilisant les propriétés et les méthodes des noeuds.

  • Lorsqu'un code JavaScript s'exécute dans le navigateur web, la variablewindowreprésente le navigateur et la variabledocumentreprésente l'élément<html>de la page, autrement dit la racine de la hiérarchie du DOM.

  • Les principales méthodes pour parcourir le DOM sontgetElementsByTagName,getElementsByClassName,getElementById,querySelectoretquerySelectorAll.

  • Pour modifier le contenu d'un noeud du DOM, on utilise le plus souvent les propriétésinnerHTMLettextContent. Pour créer de nouveaux noeuds, on utilise le plus souvent les méthodescreateElement,createTextNodeetappendChild.

  • On interagit avec le style des éléments grâce à la propriétéstyleet la fonctiongetComputedStyle.

  • Les événements permettent de réagir aux actions de l'utilisateur, et de rendre la page interactive. De nombreux types d'événements (click,keypress,load,submit, etc.) peuvent être gérés avec JavaScript.

  • On peut utiliser JavaScript pour valider les données d'un formulaire, pendant la saisie ou au moment de sa soumission. L'objetFormDatasimplifie leur envoi au serveur.

  • Les éléments de la page peuvent être animés grâce aux fonctions  setInterval,setTimeoutetrequestAnimationFrame. Une autre possibilité consiste à utiliser les animations CSS.

  • Le protocole HTTP est le socle technique du Web. En utilisant l'objetXMLHttpRequest, on peut effectuer des requêtes HTTP asynchrones, appelées appels AJAX, pour interroger un serveur web. Cela permet de modifier dynamiquement des parties de la page sans devoir la recharger entièrement.

  • JSON est un format de données textuel dont la syntaxe se rapproche de celle des objets JavaScript. Il est souvent utilisé pour échanger des informations structurées avec les serveurs web.

  • Un nombre toujours croissant de sites et de services en ligne publient des API web qu'on peut consommer avec JavaScript pour enrichir ses propres pages, après une éventuelle authentification.

Et maintenant ?

Vous avez acquis les connaissances nécessaires pour faire vos premières armes de développeur/euse web, mais il vous reste cependant beaucoup de choses à découvrir.

En complément de mes précédents conseils, voici quelques idées pour aller encore plus loin.

 

Approfondissez votre connaissance du langage

Vous avez certes déjà beaucoup appris, mais sachez que JavaScript est un langage très riche qui vous réserve encore de nombreuses surprises ! Consultez les ressources suivantes pour découvrir des aspects plus avancés :

Enfin, ma collection Pearltrees sur JavaScript rassemble de nombreuses ressources sur le langage.‌

Intéressez-vous à une librairie ou à un framework

De nombreux outils ont été créés pour faciliter la vie du développeur JavaScript et éviter de réinventer la roue à chaque nouveau projet. On peut grosso modo classer ces outils en deux catégories :

  • Les librairies (ou bibliothèques), qui complètent le langage standard pour faire gagner du temps ou améliorer la qualité du code.

  • Les frameworks, qui fournissent un ensemble de services de base formant le squelette de l'application.

La librairie JavaScript la plus connue est sans aucun doute jQuery. Créée à une époque où les divergences entre navigateurs étaient bien plus nombreuses qu'aujourd'hui, elle reste utilisée dans de très nombreux projets web. Pour découvrir jQuery, vous pouvez suivre les cours Introduction à jQuery et Simplifiez vos développements JavaScript avec jQuery.

L'utilisation d'un framework devient véritablement intéressante à partir d'un certain niveau de complexité de l'application. Lorsque vous aurez atteint ce stade, il vous restera à décider lequel choisir. Parmi la pléthore de frameworks JavaScripts existants, citons AngularEmber ou encore React (qui est plutôt une librairie qu'un framework, mais jouit d'une popularité croissante à l'heure actuelle).

Lancez-vous dans des projets

C'est sans aucun doute le conseil le plus important. En programmation comme ailleurs, rien n'est plus formateur que de faire les choses par soi-même. Réaliser des projets est la solution idéale pour renforcer vos connaissances et concrétiser tout ce que vous avez appris. C'est la suite naturelle de votre parcours.

Le site Codecademy propose une série de projets web réalisables avec JavaScript et parfois jQuery.

Plus fondamentalement, je vous encourage à débuter dès maintenant un projet web personnel en JavaScript. C'est de loin la solution la plus motivante pour progresser en tant que développeur/euse web. Peut-être avez vous déjà une idée en tête pour ce projet. Sinon, voici quelques suggestions :

  • Un outil de quiz interactif (QCM en ligne).

  • Un client utilisant l'API de votre réseau social favori (Twitter, Instagram, etc).

  • Un gestionnaire de contacts ou de choses à faire (todo list).

  • Un jeu simple, par exemple un Puissance 4 (exemple de contexte et de solution).

Quelle que soit la suite de votre parcours, je vous souhaite bonne continuation dans le monde merveilleux de JavaScript !

Remerciements

Pour construire ce cours, j'ai bénéficié des conseils et des idées de mes collègues enseignants en BTS SIO, notamment ceux du lycée La Martinière Duchère de Lyon. Merci à eux.

J'ai beaucoup utilisé les livres Eloquent JavaScript, You Don't Know JS ainsi que le site youmightnotneedjquery.

Enfin, je tiens également à remercier l'équipe d'OpenClassrooms, et notamment Laurène Gibaud pour son suivi attentif et sa relecture.

 

Exemple de certificat de réussite
Exemple de certificat de réussite