📘 Chapitre 3 – Affichage conditionnel & logique d’affichage

1. 🎯 Objectif pédagogique

Apprendre à afficher ou masquer des informations en fonction de conditions ou de filtres, afin de rendre une page plus dynamique et interactive.

2. 📚 Concepts abordés

  • Utiliser des conditions pour contrôler l’affichage (avec if, else, switch)
  • Modifier le contenu du DOM selon des critères
  • Gérer des états d’affichage (exemple : afficher un message si la liste est vide)
  • Techniques de filtrage simples (par prix, par catégorie)

3. 🧠 Explication théorique

L’affichage conditionnel consiste à montrer ou cacher certains éléments en fonction de règles définies.

Exemple simple :

let age = 18;
let message = document.getElementById("message");

if (age >= 18) {
  message.innerText = "Vous êtes majeur.";
} else {
  message.innerText = "Vous êtes mineur.";
}

On peut aussi filtrer des données avant affichage :

let produits = [
  { nom: "PC portable", prix: 900 },
  { nom: "Souris", prix: 25 },
  { nom: "Clavier", prix: 40 }
];

let produitsFiltres = produits.filter(p => p.prix < 100);
console.log(produitsFiltres);

4. 🛠 Tutoriel pratique

Résumé

Nous allons afficher uniquement les produits dont le prix est inférieur à 100€ dans une liste HTML.

Arborescence du projet 

mon_projet/
├── index.html
└── script.js

Étape 1 : Fichier HTML 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Affichage conditionnel</title>
</head>
<body>
  <h1>Produits en promotion</h1>
  <ul id="produits"></ul>
  <script src="script.js"></script>
</body>
</html>

Étape 2 : Code JavaScript 

let produits = [
  { nom: "PC portable", prix: 900 },
  { nom: "Souris", prix: 25 },
  { nom: "Clavier", prix: 40 },
  { nom: "Écran", prix: 150 }
];

let liste = document.getElementById("produits");

// Filtrer les produits à moins de 100€
let produitsFiltres = produits.filter(p => p.prix < 100);

// Si aucun produit ne correspond, afficher un message
if (produitsFiltres.length === 0) {
  liste.innerHTML = "<li>Aucun produit en promotion.</li>";
} else {
  produitsFiltres.forEach(p => {
    let li = document.createElement("li");
    li.textContent = `${p.nom} – ${p.prix} €`;
    liste.appendChild(li);
  });
}

Étape 3 : Test

Ouvre la page et vérifie que seuls les produits à moins de 100€ sont affichés.

5. 🧾 Résumé et points-clés

  • L’affichage conditionnel utilise if/else ou des filtres pour déterminer ce qui doit être visible.
  • La méthode .filter() permet de sélectionner uniquement les données qui répondent à un critère.
  • Cela permet de créer des interfaces plus dynamiques et personnalisées.