Module 5.2 – JavaScript & navigateur

Objectif

Comprendre le DOM, manipuler les éléments HTML avec JavaScript, gérer les événements et créer des interactions utilisateur.

Théorie

Qu'est-ce que le DOM ?

DOM signifie "Document Object Model" (Modèle d'Objet de Document).

Le DOM est une représentation de la page HTML sous forme d'objets JavaScript que l'on peut manipuler.

Structure :

• Chaque élément HTML est un nœud
• Les nœuds forment une arborescence
• On peut accéder, modifier, créer, supprimer des éléments

Sélectionner des éléments

Méthodes de sélection :

// Par ID
let element = document.getElementById('mon-id');

// Par classe (retourne une collection)
let elements = document.getElementsByClassName('ma-classe');

// Par balise
let paragraphes = document.getElementsByTagName('p');

// Sélecteurs CSS modernes (recommandé)
let element = document.querySelector('#mon-id');
let elements = document.querySelectorAll('.ma-classe');

Exemples :

// Sélectionner un élément
let titre = document.querySelector('h1');

// Sélectionner plusieurs éléments
let boutons = document.querySelectorAll('.btn');

// Sélectionner depuis un élément parent
let container = document.querySelector('.container');
let enfant = container.querySelector('.enfant');

Modifier le contenu

Modifier le texte :

let element = document.querySelector('#titre');
element.textContent = "Nouveau titre";
element.innerText = "Autre texte";
element.innerHTML = "<strong>Texte avec HTML</strong>";

Modifier les attributs :

let image = document.querySelector('img');
image.src = "nouvelle-image.jpg";
image.alt = "Nouvelle description";

let lien = document.querySelector('a');
lien.href = "https://nouveau-site.com";

Modifier les styles :

let element = document.querySelector('.box');
element.style.color = "blue";
element.style.backgroundColor = "yellow";
element.style.fontSize = "20px";

// Ou avec une classe CSS
element.classList.add('ma-classe');
element.classList.remove('autre-classe');
element.classList.toggle('active');

Créer et supprimer des éléments

Créer un élément :

// Créer
let nouveauParagraphe = document.createElement('p');
nouveauParagraphe.textContent = "Nouveau paragraphe";

// Ajouter au DOM
let container = document.querySelector('.container');
container.appendChild(nouveauParagraphe);

Supprimer un élément :

let element = document.querySelector('#a-supprimer');
element.remove();

// Ou depuis le parent
let parent = element.parentElement;
parent.removeChild(element);

Événements

Les événements permettent de réagir aux actions de l'utilisateur.

Ajouter un écouteur d'événement :

let bouton = document.querySelector('#mon-bouton');

bouton.addEventListener('click', function() {
    console.log('Bouton cliqué !');
});

Événements courants :

// Clic
element.addEventListener('click', function() {});

// Double-clic
element.addEventListener('dblclick', function() {});

// Souris
element.addEventListener('mouseenter', function() {});
element.addEventListener('mouseleave', function() {});

// Clavier
element.addEventListener('keydown', function() {});
element.addEventListener('keyup', function() {});

// Formulaire
element.addEventListener('submit', function() {});
element.addEventListener('change', function() {});
element.addEventListener('input', function() {});

Exemple complet :

let bouton = document.querySelector('#btn');
let compteur = 0;

bouton.addEventListener('click', function() {
    compteur++;
    let affichage = document.querySelector('#compteur');
    affichage.textContent = "Clics : " + compteur;
});

Prévenir le comportement par défaut

let formulaire = document.querySelector('form');

formulaire.addEventListener('submit', function(event) {
    event.preventDefault();  // Empêche l'envoi du formulaire
    // Votre code ici
});

Accéder aux données d'un événement

element.addEventListener('click', function(event) {
    console.log(event.target);        // Élément cliqué
    console.log(event.clientX);       // Position X de la souris
    console.log(event.clientY);       // Position Y de la souris
});

input.addEventListener('keydown', function(event) {
    console.log(event.key);          // Touche pressée
});

Interaction utilisateur - Exemples pratiques

Exemple 1 : Afficher/Masquer

let bouton = document.querySelector('#toggle');
let contenu = document.querySelector('#contenu');

bouton.addEventListener('click', function() {
    if (contenu.style.display === 'none') {
        contenu.style.display = 'block';
        bouton.textContent = 'Masquer';
    } else {
        contenu.style.display = 'none';
        bouton.textContent = 'Afficher';
    }
});

Exemple 2 : Formulaire interactif

let formulaire = document.querySelector('#mon-formulaire');
let inputNom = document.querySelector('#nom');
let message = document.querySelector('#message');

formulaire.addEventListener('submit', function(event) {
    event.preventDefault();
    
    let nom = inputNom.value;
    if (nom.length > 0) {
        message.textContent = "Bonjour " + nom + " !";
        message.style.color = "green";
    } else {
        message.textContent = "Veuillez entrer un nom";
        message.style.color = "red";
    }
});

Exemple 3 : Liste dynamique

let input = document.querySelector('#nouvel-element');
let boutonAjouter = document.querySelector('#ajouter');
let liste = document.querySelector('#liste');

boutonAjouter.addEventListener('click', function() {
    let texte = input.value;
    if (texte.length > 0) {
        // Créer un nouvel élément de liste
        let li = document.createElement('li');
        li.textContent = texte;
        
        // Bouton supprimer
        let btnSupprimer = document.createElement('button');
        btnSupprimer.textContent = "Supprimer";
        btnSupprimer.addEventListener('click', function() {
            li.remove();
        });
        
        li.appendChild(btnSupprimer);
        liste.appendChild(li);
        
        // Vider l'input
        input.value = "";
    }
});

Exercice

1. Sélectionner et modifier

   • Sélectionnez un élément par ID
   • Modifiez son texte
   • Modifiez sa couleur

2. Créer des éléments

   • Créez un nouveau paragraphe
   • Ajoutez-le à la page
   • Créez un bouton et ajoutez-le

3. Gérer les événements

   • Ajoutez un écouteur de clic sur un bouton
   • Affichez un message dans la console au clic
   • Modifiez le texte d'un élément au clic

4. Formulaire interactif

   • Créez un formulaire avec un champ texte
   • Au submit, affichez la valeur dans un élément
   • Empêchez l'envoi par défaut

5. Liste dynamique

   • Créez une liste vide
   • Ajoutez un input et un bouton
   • Au clic, ajoutez l'élément à la liste
   • Ajoutez un bouton supprimer à chaque élément

Quiz

1. Que signifie DOM ?

   • Document Online Model
   • Document Object Model
   • Data Object Management

2. Quelle méthode sélectionne un élément par ID ?

   • document.getElementsById
   • document.getElementById
   • document.querySelectorById

3. Que fait element.textContent ?

   • Sélectionne l'élément
   • Modifie le texte de l'élément
   • Supprime l'élément

4. Comment ajouter un écouteur d'événement ?

   • element.onClick = function()
   • element.addEventListener('click', function() )
   • element.click(function() )

5. Que fait event.preventDefault() ?

   • Empêche l'événement
   • Empêche le comportement par défaut
   • Supprime l'élément

Mini défi

Mission : Créer une application To-Do List

Créez une application complète de liste de tâches :

Fonctionnalités :

1. Ajouter une tâche

   • Input pour saisir la tâche
   • Bouton "Ajouter"
   • La tâche apparaît dans une liste

2. Afficher les tâches

   • Liste avec toutes les tâches
   • Chaque tâche affiche son texte
   • Style clair et lisible

3. Marquer comme terminée

   • Clic sur une tâche la marque comme terminée
   • Style visuel différent (barré, grisé)
   • Toggle : re-clic annule

4. Supprimer une tâche

   • Bouton "Supprimer" sur chaque tâche
   • Supprime la tâche de la liste

5. Compteur

   • Affiche le nombre de tâches totales
   • Affiche le nombre de tâches terminées
   • Met à jour automatiquement

Structure HTML de base :

<div class="todo-app">
    <h1>Ma To-Do List</h1>
    <div class="input-section">
        <input type="text" id="nouvelle-tache" placeholder="Nouvelle tâche">
        <button id="ajouter">Ajouter</button>
    </div>
    <div class="stats">
        <span>Total : <span id="total">0</span></span>
        <span>Terminées : <span id="terminees">0</span></span>
    </div>
    <ul id="liste-taches"></ul>
</div>

Critères :

• ✅ Toutes les fonctionnalités implémentées
• ✅ Code JavaScript organisé
• ✅ Gestion des événements correcte
• ✅ Interface utilisateur claire
• ✅ Pas d'erreurs dans la console

Objectif : Maîtriser le DOM et les événements pour créer des applications web interactives.

---

Validation : Vous pouvez passer au Parcours 6 quand vous êtes capable de manipuler le DOM et gérer les événements pour créer des interactions utilisateur.

Félicitations ! Vous avez terminé le Parcours 5 - JavaScript. Vous pouvez maintenant créer des pages web interactives !