Description
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 pédagogiques
- É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
Public concerné
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
Prérequis
Connaissances de base en HTML et CSS.
Familiarité avec l’utilisation d’un éditeur de code.
Déroulé du programme
1
Jour 1 : Introduction à JavaScript et bases syntaxiques (6 heures)
6h
- Présentation du langage JavaScript (1 heure)
2
Historique et rôle de JavaScript dans le développement web.
3
Environnement d'exécution et outils (navigateur, console).
- Bases syntaxiques (2 heures)
4
Variables, types de données, opérateurs.
5
Structures de contrôle : boucles et conditions.
6
Travaux pratiques : Écrire un script simple manipulant des variables et des conditions.
- Fonctions et portée des variables (2 heures)
7
Création et appel de fonctions.
8
Portée locale et globale, closures.
9
Travaux pratiques : Développer des fonctions réutilisables.
- Introduction à la manipulation du DOM (1 heure)
10
Concepts de base du DOM (éléments, nœuds).
11
Sélecteurs et navigation dans le DOM.
12
Jour 2 : Manipulation avancée du DOM et interaction CSS (6 heures)
6h
- Sélection et modification des éléments du DOM (2 heures)
13
Méthodes querySelector, getElementById.
14
Modification de contenu et d’attributs.
15
Travaux pratiques : Dynamiser une page web en modifiant son contenu.
- Interaction avec les styles CSS (1,5 heure)
16
Ajout, modification, suppression de styles.
17
Gestion des classes CSS.
18
Travaux pratiques : Modifier dynamiquement l’apparence d’un site web.
- Introduction à la gestion des événements (2,5 heures)
19
Écouteurs d’événements (addEventListener).
20
Gestion des clics, survols, formulaires.
21
Travaux pratiques : Créer des interactions utilisateur dynamiques.
22
Jour 3 : Programmation événementielle et échanges Ajax (6 heures)
6h
- Gestion avancée des événements (2 heures)
23
Propagation, délégation, événements par défaut.
24
Travaux pratiques : Implémenter une navigation basée sur les événements.
- Introduction aux échanges asynchrones (2 heures)
25
API fetch, introduction à Ajax.
26
Analyse des requêtes HTTP et traitement des réponses.
27
Travaux pratiques : Charger dynamiquement du contenu via Ajax.
- Interfaçage avec des API externes (2 heures)
28
Consommation d’API REST.
29
Gestion des erreurs et des promesses.
30
Travaux pratiques : Récupérer et afficher des données provenant d’une API.
31
Jour 4 : Projet pratique et révision des acquis (6 heures)
6h
- Mise en œuvre d’un projet pratique (4 heures)
32
Scénario : Développer une page dynamique (exemple : catalogue de produits).
33
Intégration : DOM, CSS, événements, API Ajax.
34
Travaux pratiques : Réalisation complète d’un projet sous la supervision du formateur.
- Révision et évaluation finale (2 heures)
35
Quiz interactif sur les notions clés.
36
Débriefing et amélioration du projet pratique.
Informations
Durée
4 jour(s)
24h
Tarif
2850 € HT
HT
