- Cours pratique
- Informatique
Formation Développement d’applications web front-end avec JavaScript - Présentation des frameworks Open Source
Angular et React
- Durée
- 5 jours
- Niveau
- Intermédiaire
- Modalités
- Présentiel / Distanciel
Description de la formation Developpeur Front End
Cette formation Développement d'applications web front-end JavaScript vous propose de vous apprendre le langage JavaScript en profondeur pour la création de vos sites Internet, applications web et mobiles.
Gestion d’événements, manipulation du DOM, programmation orientée objet, nouveautés du langage et histoire du JS sont au programme.
Nous verrons également les outils permettant de maintenir plus facilement son code et les librairies dépendantes afin d’augmenter la productivité et diminuer la dette technique.
La deuxième partie présente les différents Framework et librairies essentielles du développeur JS comme React, Vue ou encore Angular en s’attardant sur le Framework de Facebook : React.
Objectifs pédagogiques
À l'issue de cette formation Développement d'applications web front-end JavaScript vous aurez acquis les connaissances et les compétences nécessaires pour :
- Le fonctionnement de JavaScript et son utilité dans le navigateur
- Créer des scripts permettant de rendre interactives vos pages et applications
- Manipuler le contenu et le rendu de la page au travers de gestionnaires d’événements
- Faire de la Programmation Objet en JavaScript
- Coder avec les bonnes pratiques et les bons outils pour un code plus facile à maintenir
- Connaître les principes généraux de VueJS et Angular
- Connaitre l'architecture d'une application web basée sur ReactJS
- Intégrer les nouveautés du langage dans vos programmes avec EcmaScript 6/7
Objectifs opérationnels
Savoir maîtriser les langage JavaScript relatif à la création de vos sites Internet, vos applications web et mobiles.
Programme
Contenu du cours, module par module
13 modules
- Le modèle client/serveur dans le contexte du Web
- Positionnement et complémentarité des différentes briques (HTML, CSS, JavaScript, Java, PHP, etc.)
- Protocoles et formats d’échange entre ces briques (HTTP, XML, JSON, WebServices, Ajax, etc.)
- Mode d'appel des scripts depuis les pages HTML
- Comment créer une zone de saisie?
- Les différents modes de saisie HTML
- Introduction aux navigateurs, au JavaScript et au DOM
- Les principes d'utilisation des DOM
- Les différences principales entre les navigateurs
- L'interpréteur JavaScript : entrées/sorties des programmes
- Introduction au langage JavaScript
- Présentation d'exemples simples
- Les versions de JavaScript
- JavaScript embarqué dans les pages HTML
- La grammaire du langage
- Les variables
- Les types de données
- Les opérateurs
- Les instructions
- Les structures de programmation
- La définition et l'utilisation de fonctions
- Les objets et leurs utilisations en JavaScript (méthodes, propriétés)
- Les dialogues avec l'utilisateur
- Les tableaux
- Les pièges classiques en JavaScript
- Liens entre Ecmascript et Javascript
- Clarification du vocabulaire (ES6, ES2015, ES7, ES2017, ES20, etc.)
- Exemples de nouveautés apportées par les évolutions de Ecmascript (Arrow function, Promise, etc.)
- Compatibilité avec les navigateurs et les frameworks
- Module import
- Les évènements gérés par JavaScript (survol, clic, clavier, etc.)
- Propagation des évènements
- L’objet Event
- Les pop-ups
- Le fonctionnement de l'objet document. Interactivité, contrôle et transformation des pages HTML
- Manipulation de la page (DOM)
- Manipulation des URL et des redirections
- Sélection d'éléments
- Modification du contenu HTML
- Modification du graphisme CSS
- Gestion des chaînes de caractères à travers l'objet String
- Les principales fonctions mathématiques dans l'objet Math
- Manipulation des dates via l'objet Date
- Manipulation des tableaux via l'objet Array
- Les expressions régulières dans le JavaScript
- Règles de transtypage et comparaisons
- Paramètres obligatoires / facultatifs / indéfinis des fonctions
- Quelques outils pour tester, debugger et mesurer les performances de vos programmes JavaScript
- Composants d’un formulaire (checkbox, textbox, list, button, etc.)
- Manipulation de l'objet form
- Contrôle des données saisies dans un formulaire
- Le formulaire dynamique
- Liens entre évènements et formulaire (chargement, modification, validation, etc.)
- Pourquoi AJAX (Asynchronous JavaScript And Xml) ?
- Mise en œuvre avec l’objet XMLHttpRequest
- Méthodes de requête http (GET, POST, etc.)
- Récupération de contenus HTML, XML ou JSON
- Géolocalisation
- Glisser / Déposer
- Multi upload
- Historique (pushstate)
- Local Storage
- Web GL
- Web RTC
- Fullscreen
- API branchées mobile
- Détecteur de proximité
- Vibration API
- Utilisation du gyroscope du smartphone
- Accès à la webcam, au micro
- Shadow DOM
- Évolutions attendues …
- Qu’est-ce que jQuery ?
- Chargement de jQuery dans la page ou via un CDN
- Bases syntaxiques de jQuery
- Effets
- Évènements
- Manipulation DOM
- AJAX
- Limites du JavaScript natif
- Comprendre le rôle des principaux frameworks et les technologies associées : Angular, Vue, React, Node
- Exemples de bases avec Angular
- React, philosophie et principes de fonctionnement
- Les tendances du marché et des projets
- Principes généraux d'Angular
- Templates, nouvelles syntaxes
- Cycle de vie des composants
- Principe de l’injection de dépendances
- Les formulaires Angular (template driven, model-driven, etc.)
- Le routage
- Les tests
- Écosystème des frameworks JavaScript
- Différentes approches du data-binding
- Philosophie de React
- Environnement de développement
- Outils de debug
- Création d’un composant
- La syntaxe JSX
- JSX vs JavaScript
- Comprendre JSX en détails
- Gestion du « state » du composant
- Les méthodes du cycle de vie
Travaux pratiques
Tout au long de la formation des ateliers pratiques seront mis en place, suivant un scénario global permettant la création d’une application web de gestion de tâche (Todo List)
Atelier 1 :
Création de l’interface de l’application en HTML et CSS. Modification des éléments à la volée via JS
Atelier 2 :
Gestion d’événements : création et suppression d’éléments grâce à des boutons ajouter / modifier / supprimer
Atelier 3 :
Réécriture du code en jQuery, simplification
Atelier 4 :
Refactorisation : création de fonctions destinées au traitement des données et au comptage des tâches faites / restantes
Atelier 5 :
Stockage des données grâce au Local Storage HTML5. Géolocalisation des tâches. Enregistrement de préférences en Cookies.
Atelier 6 :
Point sur les éléments bloquants de JS natif et jQuery : répétitions de codes, nécessité de penser à appeler dynamiquement des fonctions
Atelier 7 :
Réécriture de l’application en React
Atelier 8 :
Ajout d’une gestion temps réel de l’application et collaboration à plusieurs.
Programme mis à jour le 23/02/2026
Public concerné
Cette formation s'adresse aux développeurs et chefs de projets.
Prérequis
Il est indispensable de connaître les bases du développement (variables, boucles, fonctions, ...). Le participant devra également avoir des bases en HTML et CSS et une bonne compréhension des navigateurs Internet ainsi que du fonctionnement d’Internet (HTTP) même si un bref rappel sera fait sur ces technologies.
J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Faire le testFinancement
Cette formation peut être prise en charge par votre entreprise, seule ou avec l’appui de son opérateur de compétences. Nous fournissons le devis et les pièces attendues par l’OPCO.
4,6/5
34 avis
« Mon avis sur le contenu du stage : "Même si le temps de formation ne permet pas de rentrer dans le détail des différentes notions abordées, le contenu présente les principales fonctionnalités / possibilités offertes par la technologie. Contenu dense sur une période de 5 jours." Mon avis sur le formateur : "Formateur très à l'écoute, s'adapte au niveau des stagiaires, et n'hésite pas à passer du temps pour résoudre les problèmes individuels, ou a répondre à des questions sortant du périmètre de la formation. Merci" Ce que j'ai le plus apprécié : "Pas de problème particulier rencontré au niveau logiciel." Ce que j'ai le moins apprécié : "La qualité du son qui par moment se dégrade." »
BA « Mon avis sur le contenu du stage : "+ : chaque participant trouve selon son niveau technique ce qu'il est venu chercher. + : De très bons TP qu'on a envie de faire et qui nous démontrent la puissance du javascript + : un support de cours au format web, des vidéos a venir => c'est génial !! " Mon avis sur le formateur : "Michael maîtrise son sujet et le déroulé du stage, il s'adapte aisément au niveau de chacun et sait nous mettre à l'aise face à nos difficultés auxquelles il réponds avec toute son aisance pédagogique." Ce que j'ai le plus apprécié : "Bonne ambiance de travail dans le groupe. On s'en sort pas si mal avec Teams finalement :)" Ce que j'ai le moins apprécié : "ras" »
LIETART Sébastien « Mon avis sur le contenu du stage : "Super grace au formateur !" Mon avis sur le formateur : "Meilleur formation et formateur que j'ai eu. Superbe pédagogie. Enfin une formation qui réponds aux besoins. Le formateur est très pro et connais parfaitement le sujet, prends bien en considération les besoins des stagiaires, pendant la formation et au delà ! Le cours est très très bien structuré et les supports pendant et après le cours sont incroyable ( que de travail de la part du formateur , c'est incroyable)" Ce que j'ai le plus apprécié : "Bonne coopération du groupe aidé en grande partie par le formateur." »
HK
Les avis figurant ci-dessus sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions.
Formations liées
- Electron : Développer des applications de bureau multi-plateformes avec le framework ElectronRéf. ELCT2 joursIntermédiaire
- HTMX & Alpine.js : Développement web moderne sans complexitéRéf. HTAL3 joursIntermédiaireProchaine session : 18 nov.2 090 €
- JavaScript, les fondamentauxRéf. IJDH3 joursIntermédiaireProchaine session : 12 oct.2 090 €
- JavaScript, programmation avancéeRéf. IJDA3 joursAvancéProchaine session : 26 oct.2 090 €