- Cours pratique
- Informatique
Formation Maîtriser JavaScript
HTML dynamique, Formulaires, Jquery, DOM, JSON, XML, Ajax, EcmaScript
- Durée
- 4 jours
- Niveau
- Intermédiaire
- Modalités
- Présentiel / Distanciel
Description de la formation JavaScript
Le web est devenu très dynamique et interactif. Des interfaces utilisateurs (UI) riches sont désormais nécessaires à la fois pour les back-offices et le côté front. JavaScript, avec sa composante AJAX, est donc aujourd'hui devenu incontournable dans le développement d'un site ou d’une application web et même une sérieuse alternative dans le développement mobile mutliplateformes.
La connaissance du langage Javascript constitue avec le couple HTML/CSS les bases des connaissances pour tout développeur Web côté front.
Cette formation Maîtriser Javascript vous permettra de devenir un développeur Javascript avec de solides bases pour débuter avec ce langage ou vous préparer à une spécialisation sur l’un des nombreux frameworks Javascritp du moment (Angular, React, Node, etc.) y compris dans le monde mobile (Cordova). Une initiation à Jquery vous permettra d’en comprendre le confort pour manipuler le DOM et ajouter de l'interactivité à votre site.
Objectifs pédagogiques
À l'issue de cette formation Maîtriser JavaScript vous aurez acquis les connaissances et compétences nécessaires pour :
- Comprendre les briques d’une application ou d’un site Web ainsi que leurs échanges entre elles (http, xml, json, Javascript, Ajax, etc.)
- Connaître la syntaxe du langage Javascript
- Savoir utiliser les objets prédéfinis du langage
- Manipuler le contenu d’une page Web
- Animer son aspect graphique
- Mettre en place l'aspect interactif grâce aux événements déclenchés par l'utilisateur
- Bien comprendre les concepts asynchrones de JavaScript et la communication serveur (Ajax)
- Savoir utiliser les nouveautés apportées par le HTML5 comme l’utilisation de la géolocalisation ou le stockage de données hors ligne depuis un programme Javascript.
- Comprendre les bases de Jquery et en quoi il facilite le travail du développeur Javascript (DOM, effet, etc.)
- Respecter les bonnes pratiques du développeur Javascript et veiller aux performances
- Réaliser toute la partie Front End d’une application Web
- Débuguer en toute sérénité vos applications
- Découvrir les nouveautés du langage avec EcmaScript
Objectifs opérationnels
Savoir développer avec JavaScript avec de solides bases.
Programme
Contenu du cours, module par module
9 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'appels 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
- Evolutions attendues …
- Qu’est-ce que Jquery ?
- Chargement de Jquery dans la page ou via un CDN
- Bases syntaxiques de jQuery
- Effets
- Evènements
- Manipulation DOM
- AJAX
Travaux pratiques
Ce cours est ponctué de nombreux Travaux Pratiques pour une meilleure assimilation de la théorie:
- Manipuler le DOM avec Javascript:
Modifier des éléments de la page en les ciblant - Js Interactif:
Création d’un système de bulle de texte qui apparaît au survol d’un mot
Création d’un menu déroulant JS
Création d’une barre de progression de lecture de l’article
Création d’un système d’onglet - Js Mini Application:
Création d’une mini application de gestion de tâches (sans partie backend)
Sauvegarde des données en Local Storage - Js et formulaires:
Reprise du formulaire vu en HTML/CSS et ajout de validation temps réel - JS et Ajax:
Réalisation d’un Live sportif : mise à jour asynchrone d’une page avec Ajax
Comprendre le chargement « intelligent » de la page - JS et HTML 5:
Géolocalisation et affichage sur une Google Map
Enregistrement des données en local storage
Mise en œuvre du Drag and Drop
Création d’un chat temps réel - JS et mobile:
Utilisation des APIS mobiles comme le gyroscope - Librairies JS et Jquery:
Réalisation d’une table avec tri temps réel via librairie Js
Ajout d’un diaporama d'images animées, des infobulles, et un système de filtrage
Gestion d’un formulaire en Jquery
Programme mis à jour le 29/04/2026
Public concerné
Cette formation s'adresse aux développeurs et chefs de projets.
Prérequis
La connaissance des langages HTML, CSS ainsi que les bases de la programmation (variables, tests, boucles, fonctions) sont des prérequis indispensables.
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,7/5
43 avis
« Mon avis sur le contenu du stage : "Le support de cours est très (voire trop pour la durée !) fourni mais comporte malheureusement de nombreuses fautes d'orthographe-grammaire et d'accents. De nombreux exercices / travaux pratiques, dont le très drôle dessin en SVG d'une émoticône, nous ont été donnés." Mon avis sur le formateur : "Le formateur est très bon techniquement et a de l'expérience dans de nombreux langages de programmation, frameworks et questions d'actualité informatique. C'est très motivant quand on est curieux. Il est également très disponible et a répondu à toutes mes questions, même à la fin du cours." Ce que j'ai le plus apprécié : "Panier de fruits et légumes en début de semaine. Jus de fruit, eau fraîche." Ce que j'ai le moins apprécié : "Le panier de fruits et légumes est vide en 3 jours, voire 2. Dommage qu'il ne soit pas "rechargé" en cours de semaine. Le jus de fruit est rarement frais." »
VL « Mon avis sur le contenu du stage : "Le contenu est riche mais en distanciel la navigation entre les fichiers est parfois contraignante (entre exemple et stagiaire). on en a "fait les frais" lorsqu'on cherchait des erreurs alors qu'au final nous n'étions pas dans le bon fichier. Un petit plus serais de lier un "projet fil rouge" qui soit implémenté au fur et à mesure des items vus pendant la formation." Mon avis sur le formateur : "+ : Disponibilité, les astuces et outils connexes (captcha, fontello, svgporn...) - : il y a une passe rapide sur beaucoup de petits sujet. Du coup, l'apprentissage se fera en revenant dessus." Ce que j'ai le plus apprécié : "plein d'exemples" Ce que j'ai le moins apprécié : "Quelques exemples non ouvert. Est-ce que tout est utile? (Cela peut être par manque de temps)" »
DPMINISTÈRE DE L'EDUCATION NATIONALE « Mon avis sur le contenu du stage : "Bon cours, bon tempo sur le cours et son avancement. Toutes les bases sont vues, c est très bien !" Mon avis sur le formateur : "Super formateur ! Bonne explication, toujours disponible pour explication, bonne humeur, tres pédagogique ! Et il maitrise parfaitement son sujet. On sent qu'on est avec la bonne personne pour apprendre et mieux comprendre javascript." Mon avis sur la salle de formation : "Pas grand chose a dire, c était très bien !" Ce que j'ai le plus apprécié : "Formateur, support de cours & bonus" Ce que j'ai le moins apprécié : "pas de clim les premiers jours :p" »
JACQUARD JordanINFOTEM
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
- Next.js : L'essentiel du framework Next.jsRéf. NXJS3 joursFondamentalProchaine session : 2 déc.2 090 €
- Node.js : Développer des Web Services en JavaScript Réf. INOJ3 joursFondamentalProchaine session : 14 oct.2 090 €
- Nuxt.JS : Architecture, Performances et DéploiementRéf. NUXT3 joursIntermédiaire2 090 €
- Polymer JS v3Réf. PJS33 joursIntermédiaire