Qui fait quoi

Une page web réunit trois langages, et chacun a un rôle précis :

Langage	Rôle	Question à laquelle il répond
HTML	le contenu et sa structure	qu'est-ce que c'est ?
CSS	l'apparence	à quoi ça ressemble ?
JavaScript	le comportement	que se passe-t-il quand... ?

Les mélanger rend un site difficile à faire évoluer : une couleur écrite dans le JavaScript, un texte fabriqué par le CSS, un bouton qui n'en est pas un. Les séparer permet de changer l'apparence sans toucher au comportement, et inversement.

Trois fichiers reliés

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Festival des jeux</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    ...
</body>
</html>

• <link rel="stylesheet"> charge la feuille de style.
• <script src="..." defer> charge le script ; defer attend que la page soit construite avant de l'exécuter, sans quoi querySelector ne trouverait encore rien.

Le contrat entre les trois : les classes

Le HTML porte des classes et des identifiants. Le CSS dit à quoi ressemble chaque classe ; le JavaScript ajoute ou retire des classes.

.cache { display: none; }

carte.classList.add("cache");

Le JavaScript ne dit pas comment masquer : il dit quoi masquer. Si le design change demain -- une animation, un fondu --, seul le CSS est modifié.

Le projet

Tout ce parcours construit une seule page : celle d'un festival de jeux de société. D'abord son HTML, puis son CSS, puis son JavaScript. Les exercices CSS et JavaScript s'appliquent à la page complète, telle que les premiers exercices l'ont construite.