JAVASCRIPT - Initiation (4-042)
Lot 4 - Développement - Développement Internet- Référence 4-042
Formation créée le 10/12/2024. Dernière mise à jour le 30/03/2026.Version du programme : 1
Type de formation
PrésentielDurée de formation
24 heures (4 jours)JAVASCRIPT - Initiation (4-042)
Lot 4 - Développement - Développement Internet- Référence 4-042
Objectif général: À l’issue de la formation, les participants seront capables de développer des scripts JavaScript pour manipuler le DOM, gérer des événements et effectuer des échanges asynchrones pour enrichir des pages web dynamiques. Modalité : Toutes les modalités (présentiel, classe virtuelle et hybride) sont possibles Lieu possible de réalisation : Locaux du bénéficiaire ou locaux d’Ascent Formation, en France métropolitaine et dans les DROM-COM Nombre maximal de participants : 20 Niveau SAME visé : Application (A) Compétences visées: Comprendre et utiliser la syntaxe JavaScript. Manipuler et interagir avec le DOM et le CSS. Gérer des événements utilisateurs et des échanges Ajax asynchrones.
Objectifs de la formation
- Écrire du code JavaScript valide et structuré.
- Manipuler dynamiquement les éléments du DOM
- Gérer les événements utilisateurs pour enrichir les interactions
- Effectuer des appels asynchrones pour actualiser les données
Profil des bénéficiaires
- Développeurs débutants souhaitant maîtriser les bases de JavaScript
- Intégrateurs web souhaitant dynamiser leurs pages web.
- Tout professionnel débutant en développement web
- Connaissances de base en HTML et CSS.
- Familiarité avec l’utilisation d’un éditeur de code.
Contenu de la formation
Jour 1 : Introduction à JavaScript et bases syntaxiques (6 heures)
- Présentation du langage JavaScript (1 heure) Historique et rôle de JavaScript dans le développement web. Environnement d'exécution et outils (navigateur, console).
- Bases syntaxiques (2 heures) Variables, types de données, opérateurs. Structures de contrôle : boucles et conditions. Travaux pratiques : Écrire un script simple manipulant des variables et des conditions.
- Fonctions et portée des variables (2 heures) Création et appel de fonctions. Portée locale et globale, closures. Travaux pratiques : Développer des fonctions réutilisables.
- Introduction à la manipulation du DOM (1 heure) Concepts de base du DOM (éléments, nœuds). Sélecteurs et navigation dans le DOM.
Jour 2 : Manipulation avancée du DOM et interaction CSS (6 heures)
- Sélection et modification des éléments du DOM (2 heures) Méthodes querySelector, getElementById. Modification de contenu et d’attributs. Travaux pratiques : Dynamiser une page web en modifiant son contenu.
- Interaction avec les styles CSS (1,5 heure) Ajout, modification, suppression de styles. Gestion des classes CSS. Travaux pratiques : Modifier dynamiquement l’apparence d’un site web.
- Introduction à la gestion des événements (2,5 heures) Écouteurs d’événements (addEventListener). Gestion des clics, survols, formulaires. Travaux pratiques : Créer des interactions utilisateur dynamiques.
Jour 3 : Programmation événementielle et échanges Ajax (6 heures)
- Gestion avancée des événements (2 heures) Propagation, délégation, événements par défaut. Travaux pratiques : Implémenter une navigation basée sur les événements.
- Introduction aux échanges asynchrones (2 heures) API fetch, introduction à Ajax. Analyse des requêtes HTTP et traitement des réponses. Travaux pratiques : Charger dynamiquement du contenu via Ajax.
- Interfaçage avec des API externes (2 heures) Consommation d’API REST. Gestion des erreurs et des promesses. Travaux pratiques : Récupérer et afficher des données provenant d’une API.
Jour 4 : Projet pratique et révision des acquis (6 heures)
- Mise en œuvre d’un projet pratique (4 heures) Scénario : Développer une page dynamique (exemple : catalogue de produits). Intégration : DOM, CSS, événements, API Ajax. Travaux pratiques : Réalisation complète d’un projet sous la supervision du formateur.
- Révision et évaluation finale (2 heures) Quiz interactif sur les notions clés. Débriefing et amélioration du projet pratique.