JavaScript avancé : Maîtriser les techniques modernes pour des applications full-stack Mixte : présentiel / à distance

• Découvrir les dernières évolutions de Javascript
• Manipuler les fonctions avancées de Javascript (le code, le modèle objet, les modules, les itérations, etc.)

• Maîtriser la syntaxe moderne
• Sécuriser son site
• Choisir la version la plus adaptée à son besoin

• Développeurs
• Architectes web
• Chefs de projet techniques
• Webmasters

• Avoir des connaissances pratiques en JavaScript, HTML et CSS
• Posséder des connaissances de base de XML
• Un questionnaire de positionnement sera réalisé au préalable pour adapter la formation à vos besoins

Jour 1 :

Découvrir les dernières évolutions de Javascript et choisir la version la plus adaptée à son besoin

• Principes et nouveautés de ES2024
  • Syntaxes de bases d'écriture du langage
  • Mots-clés (let, const)
  • Fonctions
  • Les fonctions fléchées
  • Les fonctions de manipulation de données : map, filter, forEach…
  • La programmation orientée objet
  • Définition des classes
  • L'opérateur new
  • Modification d'un objet : getter / setter
• Autres nouveautés et rétrocompatibilité (compiliers, polyfills)
• Exemples de travaux pratiques : le formateur montre la création d'une page HTML simple (ou page/site existant) avec l'utilisation de balises, d'éléments de style (CSS). Une touche de javascript permet d'identifier le rôle du langage et son utilisation, ainsi que sa relation avec le DOM.

Maîtriser la syntaxe moderne

• Gestionnaires de builds et dépendances
  • Npm et npm install
  • Le cycle de vie de npm
  • Utilisation des scripts npm
• Les outils de haut niveau vite, webpack, babel
• Les outils de débogage
• Exemple de travaux pratiques : le formateur initialise un projet avec npm auquel il ajoute des commandes de build et des dépendances. Il utilise les outils de débogage. Les participants reproduisent la manipulation pour comprendre le fonctionnement et la syntaxe. Le formateur peut vérifier le résultat obtenu par les participants pour valider l'exercice.

Jour 2 :

Manipuler les fonctions avancées de Javascript (le code, le modèle objet, les modules, les itérations, etc.)

• Principes et nouveautés de ES2024
  • Syntaxes de bases d'écriture du langage
    • Mots-clés (let, const)
    • Fonctions
    • Les fonctions fléchées
    • Les fonctions de manipulation de données : map, filter, forEach…
  • La programmation orientée objet
    • Définition des classes
    • L'opérateur new
    • Modification d'un objet : getter / setter
    • Héritage
    • Rétrocompatibilité
    • Table des compatibilités
    • Polyfills
    • Compilateurs
• Exemples de travaux pratiques : le formateur réalise et explique différentes syntaxes que les participants reproduisent et exécutent sur leur poste de travail.

Sécuriser son site

• Les technologies de rendu côté client
  • Graphisme avec Canvas
  • La 3D avec WebGL et js
  • La dataviz avecjs
• Le traitement de données côté Client
  • Le stockage local : SessionStorage, LocalStorage, IndexedDB
  • Les traitements en arrière-plan : Web Workers, Service Workers
• Exemple de travaux pratiques : le formateur utilise l'API Three.JS pour afficher un modèle 3D simple, ou un modèle plus complexe issu d'un logiciel de modélisation 3D comme Blender. Les participants réalisent une page HTML qui intègre une technologie de rendu avancée (3D ou datavisualisation).

Jour 3 :

Mettre en pratique la Programmation Orientée Objet avec les Web Components

• La notion de SPA (Single Page Application)
• Les problématiques de structure des applications HTML modernes avec les SPA
• L'utilisation de l'API Custom Elements pour créer des composants réutilisables
• Exemple de travaux pratiques : le formateur utilise l'API DOM Custom Elements pour un composant simple (par exemple un composant pour l'affichage de données météo). Le composant peut être réutilisé (par exemple afficher les prévisions météo sur une semaine avec 5 à 7 occurrences du composant). Les participants réalisent une nouvelle page HTML ou complètent leur page précédente en intégrant des composants.

Mettre en œuvre la librairie JQuery

• Les limites du Javascript natif
• Identifier et utiliser les librairies utiles
• Identifier le rôle des principaux frameworks
• Exemple de travaux pratiques : en fonction des attentes et des échanges avec les participants, le formateur présente l'utilisation d'une ou deux librairies JS. Les participants reproduisent les interactions présentées sur leur poste de travail.

Appréhender la notion de Javascript côté serveur avec Node.js

• Introduction à js
• L'environnement js
• Le temps réel avec les websockets et la librairie io
• Exemple de travaux pratiques : le formateur initialise un projet Node.JS et installe la librairie Socket.IO (web sockets). Il crée ensuite le client websocket et teste la communication temps réel client-serveur. Les participants créent une application Node.JS pour mettre en place une communication temps réel avec une application JS. Les participants peuvent tenter de réaliser un tchat ou un mini jeu pour mettre en place des interactions côté client et appliquer les connaissances JS acquises tout au long de la session de formation.

• Exercices concrets
• Cas pratiques
• Quiz d'évaluation des connaissances

• Mise à disposition de postes de travail
• Vidéoprojecteur, tableau blanc, supports numériques
• Documentation pédagogique numérique

• Positionnement en amont de la formation :
• Un quiz de consolidation des pré-requis sera administré en amont de la formation
• Suivi « pendant » :
• Feuilles de présence
• Exercices pratiques
• Évaluation « fin de formation »
• Évaluation des acquis en fin de formation
• Formulaires d'évaluation de la formation
• Évaluation à froid :
• Suivi post-formation : Questionnaire de satisfaction à j+30

• Utiliser les fonctionnalités avancées de JavaScript moderne (ES6+)
• Mettre en place et exploiter des modules JavaScript et des structures objets
• Manipuler des APIs avancées côté client (stockage, Workers, Canvas/WebGL)
• Créer et réutiliser des Web Components modulaires
• Comparer et utiliser des bibliothèques ou frameworks selon les besoins
• Configurer un environnement de build avec npm, webpack ou babel
• Déboguer du code JavaScript dans différents navigateurs ou outils de dev
• Appréhender l’utilisation de Node.js pour des applications serveur

Délais d'accès à la formation

Le délai d'accès à la formation est variable en fonction du dispositif de financement utilisé, du planning des formateurs et des contraintes du client. Pour les formations inter-entreprises, vous pouvez consulter notre calendrier en ligne ou prendre contact avec nous. Nous traitons vos demandes sous 48 heures

Accessibilité

Si vous êtes en situation de handicap, merci de nous en informer afin de vous accompagner, vous orienter, et étudier les compensations nécessaires pour répondre au mieux à votre demande de formation. Certaines formations peuvent nécessiter une adaptation pour les personnes en fonction de leur handicap. Nous restons disponibles pour échanger ensemble et nous pourrons vous orienter vers un de nos partenaires : Agefiph, Cap Emploi

Contactez-nous pour échanger sur vos besoins !

Rachel Girardeau

✉️ formation@napsia.com

📞 05 62 84 10 13