J1
Programmation objet en JavaScript
Intérêts pour le développeur et les projets (lisibilité, maintenance, évolutions, etc.)
Les concepts de base (classe, méthode, propriété, objet)
Créer ses propres objets et utiliser des objets existants
Exemples concrets en JavaScript
Constructeur et Prototype
Contexte (this)
Mise en œuvre de l’héritage en JavaScriptTravaux pratiquesObjectif : Comprendre et appliquer les principes de la programmation objet en JavaScript
Description : Réflexion sur le modèle de classes nécessaire pour programmer une calculatrice graphique.Aller plus loin en POO avec JavaScript…
Les classes natives : String, Array, Object, etc.
Augmenter ou réécrire ?
Visibilité : propriétés publiques / privées
Visibilité : méthodes publiques / privées / privilégiées
Les différentes formes d'héritage
Appels parents : call / apply / bind
Méthodes et propriétés statiques
Méthodes abstraites et interfaces
Duck Typing et JavaScript
Programmation objetTravaux pratiquesObjectif : Appliquer des concepts avancés de la POO à JavaScript (visibilité, héritage, méthodes statiques, appels parentaux…)
Description : Développement d'une calculatrice graphique en JavaScript permettant de mettre en œuvre les concepts objetsMaîtriser le langage JavaScript
Types de données et subtilités (constantes, variables, énumération, etc.)
Les différentes formes d'incrémentation
Manipulation de flux binaire
Arrays : manipulation avancée
Règles de transtypage et comparaisons
Savoir utiliser les expressions régulières
Aspects avancés des fonctions en Javascript (contrôle des paramètres, etc.)
Gestion des erreurs : exceptionsTravaux pratiquesObjectif : Appliquer les aspects avancés du langage JavaScript
Description : Compléter l'atelier précédent : validation des entrées utilisateur via des expressions régulières, Gestion des exceptions, utilisation d'énumération, librairie mathématiqueJ2EcmaScript et TypeScript
Vocabulaire et normes (Ecma, typescript, Ecmascript, Javascript, ES10/ES2019, etc.)
Les changements nets apportés de la version ES6
Les apports de TypeScript
Les Types et types spéciaux
Les interfaces, les classes, les fonctions, les mixins
Les génériques
Types avancésTravaux pratiquesObjectif : Comprendre les apports concrets de TypeScript
Description : Migration vers TypeScript du TP précédent. Utilisation de l'assistance dans VSCode.Présentation de JavaScript avec HTML5
Géolocalisation HTML5
Glisser-déposer (Drag & Drop)
Envoi de fichiers multiples (multi-upload)
Manipulation de l’historique avec pushState
Accès à la webcam et au microphone
Smartphone : Utilisation du gyroscope, de la vibration, et du détecteur de proximité
Gestion du mode plein écran
Web RTC pour les communications audio/vidéo en temps réel
Web GL pour le rendu graphique 3D
Encapsulation de composants avec le Shadow DOM
PerspectivesTravaux pratiquesObjectif : Découvrir et expérimenter les principales API HTML5 et JavaScript
Description : Développement d’une application simple exploitant plusieurs fonctionnalités natives du navigateur : géolocalisation, accès à la webcam, upload de fichiers, gestion de l’historique, activation du mode plein écran et vibration (ou simulation)Manipulation moderne du DOM avec JavaScript
Sélection et manipulation d’éléments (querySelector, querySelectorAll)
Ajout, suppression et modification d’éléments (append, remove, classList, dataset)
Modification des contenus (textContent, innerHTML, attributes)
Gestion des événements, Prévention du comportement par défaut et propagation
Manipulation de classes CSS pour gérer les effets (entrées/sorties, transitions)
Gestion de l’état via le DOM ou des structures JavaScriptTravaux pratiquesObjectif : Mettre en pratique la manipulation du DOM
Description : Développement d’une application web qui affiche une liste de données récupérées dynamiquement (via un mock). Implémentation du filtrage, tri et paginationJ3Échange de données avec le serveur (Node.js)
Vocabulaire lié aux échanges (Ajax, JSON, Web services, APIs, …)
JSON et (dé)sérialisation
Traitements asynchrones (promesses, fetch, async/await, etc.)
Consommer des web services en Javascript
Un exemple de Javascript côté serveur avec Node.js
Les différentes formes de stockage des données (Local, Cookies, SQLLite, etc.)
Mise à jour du DOM après appel réseau (ex. : affichage de données récupérées via une API)Travaux pratiquesObjectif : Mettre en œuvre les échanges de données entre le navigateur et un serveur Node.js, en manipulant JSON, les appels asynchrones
Description : Développement d’une mini application web incluant le back-end et le front-end. Affichage de listes, accès au détailPerformances, tests et débogage
Goulot d’étranglement des phases de chargement d’une page Web
Analyse fine des performances de bout en bout avec Navigation Timing API
Rendre votre code Javascript plus efficace avec Closure Compiler
Gestion mémoire et Garbage collector
Synthèse des outils de tests (JsUnit, SugarTest, etc.)
Tester efficacement la compatibilité multi navigateurs
Debugger avec Chrome Devtools et Firefox DeveloperTravaux pratiquesObjectif : Savoir profiler une application
Description : Écriture d’un test unitaire avec JTest. Identification des goulots d’étranglement et axes d’optimisation avec les ChromesDevTools. Vérification de la compatibilité. Utilisation d’un outil de minification/optimisationIndustrialisation du développement
Gestion de paquets et dépendances
Comment gérer les nombreuses librairies externes ?
Bien comprendre Node et NPM
L’outil yarn
Gérer son projet et ses paquets en ligne de commande
Construire son application et automatiser l'installation de dépendances
Industrialiser les process de compilation et mise en production de ses applicationsTravaux pratiquesObjectif : Structurer proprement un projet en gérant les dépendances avec NPM
Description : À partir du projet existant mise en place d’une structure de travail standard : initialisation projet, gestion des dépendances, script de démarrage
