Description
Le langage JavaScript est au fil des années sorti de l’ombre pour devenir aujourd’hui un langage incontournable dans la conception d’applications web riches, de Progressive Web App. L’explosion des frameworks « client » comme jQuery, ReactJS, Angular, ou d’environnements de développement JavaScript côté « serveur » comme NodeJS, témoignent de l’engouement des développeurs pour la technologie JavaScript.
Cette formation présente les concepts de base de JavaScript, en balayant les nouveautés ES6, l’approche du développement en modèle « non bloquant », NodeJS et Express pour l’exploitation de JavaScript côté Serveur, les manipulations du DOM (Document Object Model) par l’intermédiaire de jQuery ainsi que les outils de « build » facilitant le déploiement de vos applications, et facilitant l’écriture de CSS au travers de LESSCSS et SASS.
A l’issue de la formation, le stagiaire sera capable de développer des sites et applications web riches à partir de concepts avancés dans la dernière version de Javascript.
Objectifs
- 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
Récapitulatif
Public
Développeurs Web, architectes web, chefs de projet, webmasters…
Prérequis
Avoir des connaissances pratiques en JavaScript, HTML et CSS. Posséder des connaissances de base de XML.
Méthodes et modalités pédagogiques
Formation réalisée en Présentiel, Distanciel ou Dual-Learning selon la formule retenue.
Moyens et supports pédagogiques
Mise à disposition d'un poste de travail sur nos formations en Présentiel.
Mise à disposition de nos environnements de visio sur nos formations en Distanciel
Remise d'une documentation pédagogique numérique pendant la formation
La formation est constituée d'apports théoriques, d'exercices pratiques et de réflexions
Dans le cas d'une formation sur site Entreprise, le client s'engage à avoir toutes les ressources pédagogiques nécessaires (salle, équipements, accès internet, TV ou Paperboard...) au bon déroulement de l'action de formation conformément aux prérequis indiqués dans le programme de formation
Modalités de suivi et d'évaluations
Auto-positionnement des stagiaires avant la formation
Émargement des stagiaires et formateur par 1/2 journée
Exercices de mise en pratique ou quiz de connaissances tout au long de la formation permettant de mesurer la progression des stagiaires
Auto-évaluation des acquis de la formation par les stagiaires
Questionnaire de satisfaction à chaud et à froid à l'issue de la formation
Programme détaillé
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.
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
- Syntaxes de bases d'écriture du langage
- 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).
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.