Aller au-dela des fondamentaux de JavaScript est essentiel pour developper des applications web robustes et maintenables. Cette formation avancee vous apprend a maitriser la programmation objet avec prototypes et heritage, la programmation fonctionnelle avec closures, et la gestion asynchrone avec Promises, async/await et Fetch. Vous structurerez votre code en modules ES, exploiterez les API HTML5 (LocalStorage, WebSockets, WebWorkers) et comprendrez les differences avec Node.js pour choisir la bonne approche selon le contexte.

Public visé

Développeurs, architectes et chefs de projets techniques.

Objectifs pédagogiques

À l’issue de cette formation, vous serez capable de :

Utiliser les fonctionnalités avancées de JavaScript jusqu’à la version ES14
Utiliser tous les outils de débogage à disposition
Décrire les contextes d’exécution
Structurer le code JavaScript en modules
Implémenter les concepts objets en JavaScript et les concepts fonctionnels
Identifier les aspects avancés des “closures” et les promises
Identifier les différences avec Node.js et expliquer le rôle de chacun

Programme

Jour 1 - Matin

Maîtrise des fonctions de “debug” dans les IDE et les navigateurs

Configuration de Visual Studio Code afin de déboguer depuis l’IDE
Accès aux fenêtres de débogage depuis les extensions des principaux navigateurs (Chrome, Edge, FireFox)

Travaux pratiques

Sur la base d’un programme intégrant les principales structures de JavaScript, utilisation des principaux outils de débogage

Rappels importants du langage

Les éléments de premier ordre dans JavaScript
La portée des données
Les fonctions
Objets ou fonctions ?
Le débogage avec les meilleurs outils actuels

Pièges du langage

Typage faible
“Hoisting”
Contexte et variables globales
Changement de contexte

Jour 1 - Après-midi

Programmation objet

Différentes façons de créer des objets
Constructeurs
Valeur de “this” dans un objet
Prototype et proto
Diverses façons d’hériter
Visibilité

Jour 2 - Matin

Travaux pratiques

Conception d’une application qui exploite les fonctions
Transformation de l’application, permettant d’exploiter les objets et l’héritage

Programmation fonctionnelle

Fonctions
- Anonymes
- Immédiates
- Internes
Redéfinition
Surcharge et mot-clé (arguments)
“Closure”

Programmation asynchrone

Avantages et problèmes liés
Promesses, await et async
Récupérer des données avec Fetch

Travaux pratiques

Réalisation d’un code asynchrone de récupération de données serveur

Jour 2 - Après-midi

Structuration et qualité du code

Séparation en multiple fichiers
Définition de modules
Création et utilisation des modules
Import et export
Impacts des “closures” sur la lisibilité
Qualité avec JSHint et JSLint

Travaux pratiques

Modularisation avec Require.js de l’application développée le jour précédent
Utilisation des outils de Lint

Jour 3 - Matin

Exploiter les API HTML 5 en JavaScript

Validation des formulaires en JavaScript
Solutions de stockage
- LocalStorage
- IndexedDB
JSON
WebSockets
WebWorkers

Jour 3 - Après-midi

JavaScript et Node.js

Différences dans les langages
Asynchronisme
REST serveur en Node.js et REST client en JavaScript
Présentation d’une solution Web 100% JavaScript

Travaux pratiques

Exploitation des API de HTML 5 depuis JavaScript
Utilisation des dernières fonctionnalités de ES 7 et 8, avec l’asynchronisme (Async/await), promises
Intégration d’un serveur simple Node.js dans la solution

Evolutions apportées par les récentes versions jusqu’à ES14

Nouvelles fonctionnalités apportées entre les versions 8 et 14

Modalités d’évaluation des acquis

En cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.

Pour aller plus loin

Cette formation donne accès aux formations suivantes :

Voir aussi

Vous serez peut-être intéressés par les formations suivantes :

Formation DEV-JS-200 — JavaScript - Avancé. Domaine : Développement. Niveau : Intermédiaire. Durée : 3 jours (21 heures). Mots-clés : javascript, développement, avancé. Cylian Formation, Dijon.