← Retour aux formations

Développement Web & No-Code

JavaScript et HTML dynamique : DOM, événements, CSS et échanges AJAX

Intermédiaire
Développement Web & No-Code

À propos de cette formation

JavaScript est devenu incontournable dans le développement web, aussi bien pour piloter l'interface graphique que pour gérer les échanges client/serveur. Cette formation de 4 jours couvre la syntaxe complète du langage, la manipulation de la structure DOM, la programmation événementielle, l'interaction avec les feuilles de style CSS, la gestion des formulaires et les échanges asynchrones AJAX. Chaque module est illustré par des exercices pratiques progressifs.

Objectifs de la formation

  • check_circleMaîtriser la syntaxe du langage JavaScript
  • check_circleManipuler la structure DOM d'une page HTML
  • check_circleGérer la programmation événementielle
  • check_circleInteragir avec les feuilles de style CSS
  • check_circleMettre en place des échanges asynchrones AJAX

Programme détaillé

Module 1 — Les technologies du web

  • Types de navigateurs et impact sur la portabilité des programmes JavaScript
  • Versions de JavaScript et norme ES6+
  • Composants web : HTML, XHTML, CSS, JavaScript — protocoles HTTP/HTTPS
  • Impact de JavaScript sur l'accessibilité et le référencement
  • Outils de développement : éditeur et débogueur
  • Positionnement des technologies DHTML

Module 2 — Le langage JavaScript

  • Déclaration et portée des variables
  • Types de données : Number, Boolean, Date, Math, String, Array
  • Conversion de type et détection avec typeof
  • Gestion des tableaux, opérateurs logiques, arithmétiques et boucles (for, while...)
  • Création de fonctions avec paramétrage variable
  • Gestion des erreurs et des exceptions
  • Développement objet : classes, constructeur, surcharge, prototype, this
  • Utilisation du format JSON pour la création de classes
  • Objets prédéfinis du langage (Array, Date, String, Regexp...) et leur extension
  • Exercice : mise en œuvre des fonctionnalités JavaScript au travers de travaux pratiques

Module 3 — Événements et données

  • Organisation des événements et impact selon les navigateurs
  • Positionner des écouteurs par programme et via les balises HTML
  • Créer et détruire des écouteurs d'événements
  • Gestionnaires : clavier, souris, formulaires, rollover, menus dynamiques
  • L'objet Event et son utilisation
  • Manipulation des objets du DOM (window, document...)
  • Gestion des URL (redirections HTTP) et des cookies (lecture et écriture)
  • Exercice : programmation d'événements multiples sur les éléments formulaire, souris et clavier

Module 4 — Gestion de formulaires HTML

  • Accès et modification dynamique des composants de formulaire : zone de saisie, cases à cocher, options
  • Fonctions de validation de formulaire
  • Événements liés aux éléments de formulaire : changement, initialisation, clic
  • Exercice : conception de fonctions personnalisées contrôlant les interactions de l'utilisateur

Module 5 — Interaction avec les feuilles de style CSS

  • Implémentation des CSS comme propriétés des objets du DOM
  • Modification directe des propriétés CSS des objets du DOM
  • Modification de l'objet CSS stylesheets
  • Rendre la page dynamique via le changement des propriétés de style
  • Exercice : pages exploitant la manipulation des feuilles de style via JavaScript

Module 6 — Manipulation du DOM XML

  • Présentation du langage XML : éléments et attributs
  • Implémentation des parseurs XML et variantes entre navigateurs
  • Manipulation des objets du DOM : lecture, ajout, suppression et modification de nœuds
  • Exercice : construction d'un chemin d'accès à un élément du DOM

Module 7 — Ajax

  • Présentation d'AJAX (Asynchronous JavaScript And XML) : enjeux, solutions et alternatives
  • Les bibliothèques disponibles sur le marché
  • HTTP et Ajax : échanges HTTP et l'objet XMLHttpRequest
  • Exercice : récupération et affichage de données XML, interrogation d'une base de données, formulaire de connexion

Prérequis

Maîtriser HTML. Avoir des bases en programmation.