Numérique et Sciences Informatiques > Internet et le Web > Langages du Web (HTML, CSS, JavaScript - Notions de Base) > JavaScript : interactivité côté client (événements, manipulation du DOM)

JavaScript : Interactivité côté client (Événements et Manipulation du DOM)

Apprenez à rendre vos pages web dynamiques et interactives grâce à JavaScript. Ce guide complet couvre les événements, la manipulation du DOM, et vous fournit des exemples concrets pour maîtriser l'interactivité côté client.

Introduction à l'interactivité avec JavaScript

JavaScript permet d'ajouter de l'interactivité à vos pages web. Sans JavaScript, les pages seraient statiques, c'est-à-dire qu'elles afficheraient simplement du contenu sans possibilité d'interaction de la part de l'utilisateur. JavaScript, en revanche, permet de réagir aux actions de l'utilisateur, de modifier le contenu de la page dynamiquement, et de créer des expériences utilisateur riches et engageantes.

L'interactivité en JavaScript repose principalement sur deux concepts clés : les événements et la manipulation du DOM (Document Object Model).

  • Les événements sont des actions qui se produisent dans le navigateur, comme un clic de souris, un appui sur une touche du clavier, ou le chargement d'une page. JavaScript permet de détecter ces événements et d'exécuter du code en réponse.
  • Le DOM est une représentation de la structure HTML d'une page web sous forme d'arbre. JavaScript peut manipuler le DOM pour modifier le contenu, le style, et la structure de la page en temps réel.

Les Événements en JavaScript

Les événements sont des actions ou des occurrences qui se produisent dans le navigateur web. Il existe de nombreux types d'événements différents, chacun correspondant à une action spécifique de l'utilisateur ou du navigateur.

Exemples d'événements courants :

  • click : Se produit lorsqu'un élément est cliqué avec la souris.
  • mouseover : Se produit lorsque le curseur de la souris survole un élément.
  • mouseout : Se produit lorsque le curseur de la souris quitte un élément.
  • keydown : Se produit lorsqu'une touche du clavier est enfoncée.
  • keyup : Se produit lorsqu'une touche du clavier est relâchée.
  • submit : Se produit lorsqu'un formulaire est soumis.
  • load : Se produit lorsqu'une page web est complètement chargée.

Pour utiliser un événement, il faut l'attacher à un élément HTML spécifique et lui associer une fonction JavaScript (appelée gestionnaire d'événement) qui sera exécutée lorsque l'événement se produira.

Exemple :

HTML

<button id="monBouton">Cliquez ici</button>

JavaScript

<script> const monBouton = document.getElementById('monBouton'); monBouton.addEventListener('click', function() { alert('Le bouton a été cliqué !'); }); </script>

Dans cet exemple, on sélectionne l'élément button avec l'id 'monBouton' et on attache un événement 'click' à cet élément. Lorsque l'utilisateur clique sur le bouton, la fonction anonyme (le gestionnaire d'événement) est exécutée, affichant une boîte de dialogue d'alerte.

Manipulation du DOM (Document Object Model)

Le DOM (Document Object Model) est une représentation arborescente de la structure d'une page HTML. Il permet à JavaScript d'accéder et de modifier le contenu, la structure et le style des éléments HTML de la page.

Méthodes courantes pour manipuler le DOM :

  • document.getElementById(id) : Sélectionne un élément HTML en fonction de son attribut id.
  • document.querySelector(selector) : Sélectionne le premier élément qui correspond à un sélecteur CSS spécifié.
  • document.querySelectorAll(selector) : Sélectionne tous les éléments qui correspondent à un sélecteur CSS spécifié (retourne une NodeList).
  • element.innerHTML : Permet d'accéder ou de modifier le contenu HTML d'un élément.
  • element.style.property : Permet d'accéder ou de modifier le style CSS d'un élément.
  • element.setAttribute(attribute, value) : Permet de définir la valeur d'un attribut d'un élément.
  • element.getAttribute(attribute) : Permet de récupérer la valeur d'un attribut d'un élément.
  • element.appendChild(node) : Ajoute un nouveau nœud (élément HTML) comme enfant d'un élément existant.
  • element.removeChild(node) : Supprime un nœud enfant d'un élément existant.

Exemple :

HTML

<div id="monDiv">Ceci est un paragraphe.</div>

JavaScript

<script> const monDiv = document.getElementById('monDiv'); monDiv.innerHTML = '<p>Ceci est un nouveau paragraphe.</p>'; monDiv.style.color = 'blue'; </script>

Dans cet exemple, on sélectionne l'élément div avec l'id 'monDiv'. Ensuite, on modifie son contenu HTML avec la propriété innerHTML et on change sa couleur de texte en bleu avec la propriété style.color.

Exemple : Ajout d'un élément

<script> const monDiv = document.getElementById('monDiv'); const nouveauParagraphe = document.createElement('p'); nouveauParagraphe.textContent = 'Voici un nouveau paragraphe crée par javascript.'; monDiv.appendChild(nouveauParagraphe); </script>

Exemple concret : Un compteur de clics

Pour illustrer l'utilisation combinée des événements et de la manipulation du DOM, créons un simple compteur de clics.

HTML

<button id="compteurBouton">Cliquez ici</button> <p id="compteurAffichage">Nombre de clics : 0</p>

JavaScript

<script> let compteur = 0; const compteurBouton = document.getElementById('compteurBouton'); const compteurAffichage = document.getElementById('compteurAffichage'); compteurBouton.addEventListener('click', function() { compteur++; compteurAffichage.textContent = 'Nombre de clics : ' + compteur; }); </script>

Explication :

  • On initialise une variable compteur à 0.
  • On sélectionne le bouton et l'élément p qui affichera le nombre de clics.
  • On attache un événement click au bouton.
  • À chaque clic sur le bouton, on incrémente la variable compteur et on met à jour le contenu de l'élément p avec la nouvelle valeur du compteur.

Ce qu'il faut retenir

  • JavaScript permet d'ajouter de l'interactivité aux pages web en réagissant aux événements et en manipulant le DOM.
  • Un événement est une action qui se produit dans le navigateur (clic, survol, frappe clavier, etc.).
  • Le DOM (Document Object Model) est une représentation arborescente de la structure HTML d'une page web, permettant à JavaScript d'accéder et de modifier les éléments HTML.
  • Pour utiliser un événement, il faut l'attacher à un élément HTML et lui associer un gestionnaire d'événement (une fonction JavaScript).
  • Les méthodes courantes pour manipuler le DOM incluent document.getElementById(), document.querySelector(), element.innerHTML, element.style.property, element.setAttribute(), element.appendChild(), et element.removeChild().

← Exemple Concret : Architecture Client-Serveur d'un Site de E-commerce La Structure Essentielle d'une Page Web en HTML →

FAQ

  • Quelle est la différence entre innerHTML et textContent ?

    innerHTML permet de modifier le contenu HTML d'un élément, y compris les balises HTML. textContent permet de modifier le contenu textuel d'un élément, en ignorant les balises HTML.
  • Comment puis-je empêcher un formulaire de se soumettre par défaut lors d'un événement submit ?

    Vous pouvez utiliser la méthode event.preventDefault() dans le gestionnaire d'événement du formulaire.