Étape 3 - JavaScript

Liens utiles

MDN - Ajouter de l’interactivité avec JavaScript
Pour revoir le rôle de JavaScript dans une page web.
MDN - addEventListener
Pour comprendre les événements.
MDN - querySelector
Pour retrouver un élément HTML depuis JavaScript.
MDN - classList
Pour ajouter, retirer ou inverser une classe CSS.

1. Comprendre le rôle de JavaScript

HTML donne le contenu, CSS donne l’apparence, JavaScript ajoute le comportement. Un comportement peut être : “quand je clique sur ce bouton, alors le texte change”.

Exemple générique : modifier le texte d’un élément.

const element = document.querySelector("#message");
element.textContent = "Texte modifié";

Dans le projet, tu utiliseras JavaScript pour créer un compteur, masquer des détails et filtrer des cartes.
Avant de coder, repère les éléments HTML qui devront être contrôlés par JavaScript.

2. Relier JavaScript à la page

Il existe plusieurs façons d’écrire du JavaScript dans une page web.

Dans un attribut HTML : par exemple onclick="...". C’est possible, mais ce n’est pas très propre car le HTML et le JavaScript sont mélangés.
Dans une balise <script> : le code est dans la page HTML. C’est acceptable pour un mini test, mais la page devient vite longue.
Dans un fichier séparé : c’est la meilleure pratique pour ce TP. Le HTML reste la structure, le CSS reste le style, et JavaScript reste dans son propre fichier.

On va donc créer un fichier JavaScript séparé et le relier avec defer. defer permet d’attendre que le HTML soit chargé avant d’exécuter le script.

<script src="script.js" defer></script>

Crée un fichier JavaScript séparé.
Relie-le dans le <head> avec une balise <script>.
Écris temporairement console.log("JavaScript chargé"); pour vérifier que le fichier est lu.

3. Ajouter des repères dans le HTML

JavaScript doit retrouver certains éléments dans le HTML. Pour cela, on utilise des id, des class et des attributs data-.... Les data-attributs servent à stocker une petite information directement sur un élément HTML. Dans ce TP, chaque carte peut stocker sa note dans data-rating.

Exemple générique : stocker une information sur un élément.

<article class="product-card" data-price="25">
    ...
</article>

Ajoute un id sur le bouton qui servira au compteur.
Ajoute un id sur l’élément qui affichera la valeur du compteur.
Ajoute une classe commune sur les détails que tu veux masquer ou afficher.
Ajoute un data-rating sur chaque carte de jeu.
Ajoute un id sur la case à cocher du filtre.
Ajoute un id sur le bouton qui affichera ou masquera les détails.

4. Retrouver des éléments et les garder en constante

En programmation, une constante sert à stocker une information en mémoire pendant l’exécution du programme. Ici, on stocke surtout des références vers des éléments HTML. Ces informations vivent dans la mémoire du navigateur : si la page est rechargée, elles sont recréées.

Pour conserver une information après fermeture ou rechargement, il faudrait la stocker ailleurs, par exemple dans une base de données. Ce sera seulement une idée à retenir pour plus tard.

Exemple générique : retrouver un élément unique et plusieurs éléments.

const mainButton = document.querySelector("#main-button");
const cards = document.querySelectorAll(".card");

Crée une constante pour chaque élément unique à contrôler.
Crée une constante avec querySelectorAll pour les listes d’éléments, comme les cartes ou les détails.

5. Créer le compteur de like

Une variable sert à stocker une valeur qui peut changer. C’est la différence avec une constante : une constante garde la même référence, alors qu’une variable peut être modifiée pendant l’exécution.

Un compteur utilise une variable, car sa valeur augmente à chaque clic.

Exemple générique : modifier un nombre.

let count = 0;
count = count + 1;

Les opérations arithmétiques de base sont :

Addition : total = total + 1
Soustraction : total = total - 1
Multiplication : total = total * 2
Division : total = total / 2

Crée une variable qui démarre à 0 pour le nombre de likes.
Prévois qu’elle augmentera de 1 au clic sur le bouton.

6. Créer une fonction pour mettre à jour un texte

Une fonction regroupe une action et lui donne un nom. Elle ne s’exécute pas toute seule : il faut l’appeler.

Exemple générique : déclarer puis appeler une fonction.

function showMessage() {
    console.log("Bonjour");
}

showMessage();

Pour fabriquer un texte avec une valeur, on peut concaténer, c’est-à-dire coller plusieurs morceaux de texte.

const name = "Alex";
const message = "Bonjour " + name;

Pour choisir entre deux cas, on utilise if et else.

const age = 14;

if (age >= 18) {
    console.log("Majeur");
} else {
    console.log("Mineur");
}

Crée une fonction qui met à jour le texte du compteur.
Utilise la concaténation pour construire le texte affiché.
Utilise une condition pour gérer le singulier et le pluriel.
Appelle cette fonction après chaque modification du compteur.

7. Réagir au clic avec un événement

Un événement est une action qui arrive dans la page : clic, changement de case, touche pressée. addEventListener permet de dire : “quand cet événement arrive, exécute cette fonction”.

Exemple générique : réagir au clic d’un bouton.

mainButton.addEventListener("click", function () {
    console.log("Bouton cliqué");
});

Ajoute un événement click sur le bouton de like.
Dans cet événement, augmente la variable du compteur.
Appelle la fonction qui met à jour le texte affiché.
Recharge la page et teste plusieurs clics.

8. Masquer les détails avec une classe CSS

Pour masquer un élément, il faut une classe CSS que JavaScript pourra ajouter ou retirer. Ce code CSS est donné directement car il est nécessaire pour la suite.

.is-hidden {
    display: none;
}

classList permet de manipuler les classes d’un élément.

classList.add : ajoute une classe.
classList.remove : retire une classe.
classList.toggle : ajoute la classe si elle est absente, la retire si elle est présente.

Exemples génériques :

element.classList.add("is-hidden");
element.classList.remove("is-hidden");
element.classList.toggle("is-hidden");

Ajoute la classe is-hidden dans le CSS.
Crée une fonction qui parcourt les éléments de détails.
Choisis toggle, add ou remove selon l’effet voulu.
Relie cette fonction au bouton “Afficher / masquer les détails”.

9. Répéter une action avec forEach

forEach permet d’exécuter la même action sur chaque élément d’une liste. C’est utile quand on a plusieurs cartes ou plusieurs descriptions.

Exemple générique :

items.forEach(function (item) {
    console.log(item);
});

Utilise forEach pour agir sur toutes les descriptions.
Tu réutiliseras aussi forEach pour filtrer toutes les cartes.

10. Filtrer les cartes avec une condition

La case à cocher indique si le filtre est actif ou non. La note de chaque carte peut être lue depuis son data-attribut.

Exemple générique : lire une information stockée dans le HTML.

const value = Number(element.dataset.price);

Une condition permet ensuite de choisir si l’élément doit être affiché ou masqué.

if (value > 10) {
    element.classList.add("is-hidden");
} else {
    element.classList.remove("is-hidden");
}

Crée une fonction pour filtrer les cartes.
Lis l’état de la case à cocher avec checked.
Parcours toutes les cartes avec forEach.
Lis la note de chaque carte depuis son data-rating.
Transforme la note en nombre avec Number.
Cache ou affiche la carte avec classList.
Relie cette fonction à l’événement change de la case à cocher.

11. Tester dans l’ordre

Le fichier JavaScript est bien chargé dans la console.
Le bouton de like augmente le compteur.
Le texte du compteur se met à jour avec le singulier ou le pluriel.
Le bouton de détails masque puis réaffiche les descriptions.
Le filtre cache les cartes avec une note inférieure à 8.
Le code contient des constantes, une variable, des fonctions, une condition, une boucle et des événements.