- Durée
- 3 jours
- Niveau
- Intermédiaire
- Modalités
- Présentiel / Distanciel
Description de la formation JavaScript fondamentaux
Le JavaScript permet la manipulation interactive des éléments constituant une page web côté client (Frontend) même si on peut également l’utiliser côté serveur (Backend). Jadis considéré comme un « petit langage de programmation », il est devenu au fil du temps un véritable langage de programmation avec toutes les composantes propres aux langages de haut niveau et fort de son succès il sert de socle aujourd’hui à tous les standard Frontend du marché comme Vue.js, React, ou Angular.
Après avoir pris en main votre environnement de développement et les fondamentaux syntaxique du langage vous comprenez sous quelle forme une page HTML est manipulée dans un programme Javascript en termes de structure de données (objets HTML ou DOM) et comment Javascript interagit dynamiquement avec cette page au rythme des événements (modification d’un texte, clic sur un bouton, apparition d’un bloc d’information, survol d’une zone, saisie dans un formulaire, etc.). Puis vous comprenez comment Javascript à travers la technique AJAX (Asynchronous Javascript And XML) fluidifie les échanges entre un navigateur et un serveur Web en chargeant ou en envoyant des données en arrière-plan sans devoir recharger toute la page.
Enfin, vous comprenez comment Javascript gère le Responsive Design (adaptation aux différents écrans) explicitement ou indirectement via les CSS ou d’autres technologies.
Ce cours s'appuie sur de nombreux exemples concrets que vous mettrez en œuvre et pourrez réutiliser au quotidien.
Si vous souhaitez allez plus loin que la découverte du langage Javascript et de ses concepts, vous pouvez aussi choisir la formation Développement d’applications web front-end avec JavaScript et les Frameworks Open Source (IJSO1) qui présente en plus les frameworks React et Angular.
Objectifs pédagogiques
Objectifs pédagogiques :
À l'issue de cette formation JavaScript, vous aurez acquis les connaissances et compétences nécessaires pour :
- Appréhender Javascript dans la construction de sites et applications web
- Maîtriser les fonctionnalités essentielles
- Manipuler les pages et les rendre dynamiques
- Gérer les/Réagir aux événements et accroitre l'interactivité
- Développer en responsive design
Objectifs opérationnels
Objectif opérationnel :
Savoir développer des sites et des applications web avec le langage de programmation JavaScript.
Programme
Contenu du cours, module par module
7 modules
- Les principes de base des technologies clients serveurs
- Présentation des différentes possibilités avec illustration par des exemples complexes et concrets
- Mode d'appels des scripts depuis les pages HTML
- Comment créer une zone de saisie ?
- Les différents modes de saisie HTML
- La mise en page avec le CSS
- Introduction aux navigateurs, au JavaScript et au DOM
- Les principes d'utilisation des DOM, les différences principales entre les navigateurs et les conseils d'utilisation
- L'interpréteur JavaScript: entrées/sorties des programmes
- Présentation de la console
Travaux pratiques
Description : Création d’une petite page HTML contenant différents champs de saisie (texte, sélection, bouton) Gestion de l’interactivité avec JavaScript, affichage des évènements sur la console
- 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, les dialogues avec l'utilisateur, les tableaux, la gestion des événements et les différences selon les navigateurs, les objets prédéfinis
- Les pièges classiques en JavaScript
Travaux pratiques
Description : Création d’un premier script permettant de saisir des nombres et d’afficher en temps-réel la moyenne, le plus grand, le plus petit, etc.
- 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
Travaux pratiques
Description : Extraction de la date locale d’un visiteur pour effectuer des calculs sur les minutes et les jours. (getDate, getDay, getHours, etc. ) afin de présenter un compteur qui affiche des informations sur le temps passé sur une page (échéance de validation d’un caddie)
- L'objet Windows : gestion des fenêtres et de leur communication. Les popups
- L'objet Document : le fonctionnement de l'objet Document.
- Interactivité, contrôle et transformation des pages HTML
- L'objet Form
- Contrôle des données saisies dans un formulaire
- Gestion des contenus des champs de saisie
- Formulaire dynamique
Travaux pratiques
Description : Création de formulaire et de panier d’achat
- Sélection d'éléments
- Modification du contenu HTML
- Modification du graphisme CSS
Travaux pratiques
Description : On manipule le panier d’achat sous forme de tableau HTML géré via le DOM. On propose d’implémenter le Drag and Drop avec dans la fenêtre de gauche les titres des livres et dans la fenêtre de droite la panier d’achat. Si l’objet est mal centré lors du « drop » il retourne sur la fenêtre de gauche.
- Pourquoi AJAX (Asynchronous Javascript And Xml ) ?
- XMLHttpRequest
- Méthodes et en-têtes http
- Récupération de contenus HTML, XML ou JSON
- Consommer un web Service en Javascript
Travaux pratiques
Description : On alimente les titres des couvertures du TP précédent par un appel à un Web Service
- Les requêtes de média (Media Queries)
- Comment gérer les différences de taille des écrans ?
- Les grilles fluides
- Des images adaptatives
- Créer du design adaptatif
- Présentation de Bootstrap
- CSS et Responsive Design
Travaux pratiques
Description : À partir de l’application Web du TP adaptation de la mise en page afin qu’elle s’affiche correctement sur différents formats d’écran (desktop, tablette, mobile). Utilisation des media queries CSS, des unités flexibles (em, %, vh/vw), et des techniques de positionnement modernes comme Flexbox ou Grid.
Travaux pratiques
L’approche pédagogique repose sur un apprentissage par la pratique structurée autour d’un projet fil rouge parlant à tout le monde et décomposé en petits ateliers progressifs (site Web marchand proposant des produits, visiteur, panier d’achat, dates des visites du site, etc.).
Pédagogiquement le message important à faire passer est sur la structuration d’une page WEB (que l’on parle de site WEB ou d’application WEB) « vue par Javascript ». On fait donc réfléchir les participants sur le fait qu’une page HTML n’est pas « consommable » telle quelle dans un programme Javascript et on pose la problématique « En quoi le format texte brute d’une page Web au format HTML ne facilite pas sa gestion dans un programme informatique ? » avant même d’aborder le contexte Javascript. Nous adoptons la même démarche de pédagogie inductive pour tous les sujets conceptuels de la formation (DOM, programmation événementielle, responsive, etc.) que l’on valide sous forme de Quiz et nous réservons les ateliers pratiques pour valider les acquis opérationnels.
Programme mis à jour le 10/12/2025
Public concerné
Ce cours JavaScript s’adresse aux développeurs (back-end ou front-end) chargés de concevoir, d’organiser et d’animer l’interactivité d’un site ou d’une application web. Familiers du HTML et du CSS, ces développeurs sont sollicités pour apporter du dynamisme visuel et fonctionnel à une ou plusieurs briques de développement, tout en intégrant les considérations de responsive design, de performance et d’expérience utilisateur.
Prérequis
Les participants à cette formation JavaScript possèdent une bonne connaissance préalable du HTML, du CSS, d’un langage de programmation structurée et plus globalement de l’architecture d’une page web. Cette vue d’ensemble les prédispose à connaître les besoins et les enjeux soulevés par la programmation en JavaScript et les différents types d’évènements et de manipulations à prendre en compte.
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
45 avis
« Mon avis sur le contenu du stage : "Le support du cours est interessante et indisponsable, j'aurais peut etre apprecie plus de structure dans les exemples pour m'aider a referencer les parties que je n'ai pas reussi a completer. J'ai perdu du temps avec le machine virtuel, et finalement c' etait aussi simple de travailler en locale avec une editor et Mozilla" Mon avis sur le formateur : "Ca aller assez vite pour moi, surtout que je n'avais pas pu suivre le cours HTML/CSS par avant. J'avais besoin de plus d'interactivite et de repetition, meme si le methode pedagogique faisait le repetition des informations importante par les exemples. " Ce que j'ai le plus apprécié : "les examples construit par la formateurs en live. " Ce que j'ai le moins apprécié : "pas assez de discussion entre les participants avec les questions qui peut aider tout le monde, peut etre le formateur peux soliciter plus les personnes pour travailler directement avec eux sur leurs questions. Peut etre une methode pour poser les bonnes questions au debut (d'ou viens les inputs/outputs, quel sonts les functions...)" »
MJ « Mon avis sur le formateur : "L'animateur était très pédagogue et très à l'écoute de ses élèves. Le ton employé était très rassurant, même lorsque les élèves rencontraient des difficultés. Bien que la formation était en distanciel, il y avait beaucoup d’interactivité entre les élèves et l'animateur. Au delà du contenu de la formation, Michaël nous a fait part de ses retours d'expériences dans sa vie professionnelle qui pourront nous être très utiles. De plus, Michaël reste joignable même après la formation pour nous aider si besoin." Ce que j'ai le plus apprécié : "Le contenu du support de cours et des TP. Le fait d'avoir accès à ce support même après la formation et sans limite de temps. Les ressources supplémentaires (vidéos) mises à disposition après la formation. Le fait que l'animateur reste joignable même après la formation." »
DUFOUR FabriceCHAPSVISION « Mon avis sur le contenu du stage : "Heureusement que j'en avais fait auparavant tout de même. Je vais devoir digérer tout cela et expérimenter avant de me prétendre opérationnel. Cette formation me permet d'avoir une vision globale de ce qui a évolué fortement ces derniers temps. Cela me permet d'envisager plus sereinement le tournant technologique engagé dans mon service (angular)" Mon avis sur le formateur : "Un praticien expert, rien de tel. Normalement cette formation est impossible à faire tellement le sujet est foisonnant : good game :)" Mon avis sur la salle de formation : "Mauvais en raison de la connexion lamentable mais c'était notre problème. La prochaine formation à distance serait à mon domicile où ça fonctionne nickel (connexion normale et double écran)." »
Olivier
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
- JavaScript, programmation avancéeRéf. IJDA3 joursAvancéProchaine session : 26 oct.2 090 €
- JQuery : Développer en Javascript avec jQueryRéf. IJFJ2 joursIntermédiaire
- Maîtriser JavaScriptRéf. IJSO4 joursIntermédiaireProchaine session : 12 oct.2 490 €
- Next.js : L'essentiel du framework Next.jsRéf. NXJS3 joursFondamentalProchaine session : 2 déc.2 090 €