Description

Cette formation permet d’acquérir tous les fondamentaux du JavaScript moderne pour être autonome.

À qui s'adresse cette formation ?

Pour qui ?

Cette formation JavaScript s’adresse aux développeurs connaissant déjà un autre langage (PHP, Java, C#, etc.) ou au moins les bases de la programmation (via jQuery par exemple).

Elle peut être accessible aux intégrateurs, graphistes et débutants en programmation à condition de vous préparer à l’algorithmique avant la formation.

Prérequis

connaissance en language web

Les objectifs de la formation

Maîtriser le JavaScript moderne : l’ES6+, le nouveau standard

Suivre les bonnes pratiques (compatibilité, qualité, performances)

Maîtriser la programmation objet en JavaScript.

Savoir utiliser et créer des composants réutilisables (qui remplacent les plugins jQuery)

Comprendre les besoins d’aujourd’hui pour savoir choisir les bons outils et frameworks

Programme de la formation

• Bonnes pratiques JavaScript
  • Après avoir mis en contexte les rôles de JavaScript, nous prenons en main les bons outils pour travailler efficacement, et nous mettons tout de suite en place les bonnes pratiques.
  • Compatibilité : le point sur le standard et les navigateurs actuels
  • Gestion des packages : npm
  • Console et debugger
  • Conventions de codage (eslint…)
• Nouveautés ECMAScript 6 (ES6+)
  • Nous faisons ensuite le tour des nouveautés du dernier standard JavaScript.
  • Constantes et portée locale à un bloc
  • Nouveaux strings : template literals
  • Objets : nouvelles syntaxes
  • Set et Map : les nouvelles collections
  • Valeurs par défaut par défaut des paramètres, rest
  • Spread operator
  • Fonctions fléchées (arrow functions)
  • Optional chaining et nullish coalescing operators
  • Destructuring
• DOM et événements
  • On passe ensuite au rôle principal de JavaScript : manipuler et animer la page suite à une action de l’utilisateur. Vous serez surpris·e de découvrir qu’aujourd’hui jQuery n’est plus nécessaire, le JavaScript natif s’est amélioré et simplifié.
  • Manipulation du HTML/CSS : querySelectorAll, classList…
  • Gestion des interactions : addEventListener…
  • Transitions pour des animations rapides
  • DOM4 : nouveautés
• AJAX et asynchronisme
  • Gérer les traitements asynchrones, notamment l’AJAX, est une des grandes difficultés de JavaScript, qui le rende plus compliqué qu’un langage comme PHP. De nouvelles APIs sont disponibles pour simplifier cela.
  • Promise ES6
  • API fetch & JSON
  • Fonctions asynchrones
• TypeScript
  • Dans une application, la moindre erreur peut signifier un plantage. Le JavaScript étant trop permissif par défaut, il faut se diriger vers un typage statique. Nous vous expliquons pourquoi TypeScript dans un article dédié, et nous vous garantissons que non seulement vous allez adorer, mais aussi que vous ne pourrez plus vous en passer.
  • JSDoc : documentation normalisée
  • TypeScript : typage statique
  • Assistance et typings
• Programmation Orientée Objet en ES6
  • L’ES6 permet de se mettre facilement à la programmation orientée objet, avec la même syntaxe que dans les autres langages (PHP, Java, C#…).
  • Classes et héritage
  • Gestion du contexte
  • Getters / setters
  • Méthodes statiques
  • Private / public
  • Abstract
  • Interfaces
  • Modules
• Mise en prod : compatibilité et performances
  • Il y a aujourd’hui beaucoup de choses à gérer lors de la mise en production, pour que vos scripts se chargent rapidement. Heureusement, les outils se sont simplifiés et unifiés.
  • Compatibilité : polyfills + transpilation (babel et TypeScript)
  • Bundle et compression : webpack
  • Scripts npm pour automatiser
  • HTTP/2
• Web Components
  • C’est le prolongement de la programmation orientée objet appliquée à une page web. Vous pouvez maintenant créer de vrais modules web. Tous les frameworks actuels (Angular, React…) fonctionnent autour de ce principe de composant, et cela est aussi possible en JavaScript natif.
  • Custom elements
  • Shadow DOM
  • <template>
• APIs pour les applications
  • Dans une application, JavaScript a de nouveaux rôles, que de nouvelles APIs viennent remplir. Ce chapitre y sensibilise, mais un framework est nécessaire si vous souhaitez développer une application.
  • Navigation et historique
  • localStorage
  • Progressive Web App & service workers
  • Web manifest
  • Web sockets pour du temps réel
• Le choix du framework
  • Le choix d’un framework est évidemment très important. En ayant bien compris les besoins d’aujourd’hui, nous pourrons comparer rationnellement les différentes possibilités.
  • Angular / React / Vue : comparatif