UA 4 : PROGRAMMATION EN HTML (partie 2/2)

## Objectifs et prérequis À la fin de ce chapitre, l’élève sera capable de : - organiser logiquement les fichiers d’un site web en respectant une arborescence claire et des conventions de nommage ; - utiliser des chemins relatifs pour lier HTML, CSS et JavaScript sans erreur ; - écrire un script JavaScript de base, manipuler le DOM et répondre à un événement utilisateur ; - déboguer simplement un script en console et expliquer le rôle de chaque instruction. **Prérequis** : maîtriser la syntaxe HTML de base (balises, attributs, imbrication), connaître la notion de fichier et de dossier sur un système d’exploitation, savoir ouvrir un éditeur de texte et enregistrer avec l’extension appropriée (.html, .css, .js). > **>** Un site web bien structuré facilite la maintenance, le référencement et le travail en équipe. --- ## Introduction contextualisée Dans le monde professionnel, un site web n’est jamais un seul fichier HTML isolé. Il s’agit d’un ensemble de ressources (pages, feuilles de style, scripts, images, polices) qui doivent être retrouvées rapidement par le navigateur et par les développeurs. Une mauvaise organisation entraîne des liens brisés, du temps perdu en débogage et des difficultés à faire évoluer le projet. Parallèlement, JavaScript est le langage qui donne vie aux pages statiques : il permet de réagir aux actions de l’utilisateur, de modifier le contenu dynamique et de communiquer avec des serveurs. Le programme officiel du Probatoire insiste donc sur deux compétences complémentaires : savoir ordonner les dossiers d’un site et savoir écrire un premier script JavaScript interactif. --- ## I. Organisation des dossiers d’un site web ### A. Arborescence d’un site web Une arborescence est la représentation hiérarchique des dossiers et fichiers qui composent un projet. Elle se lit de la racine (dossier principal) vers les feuilles (fichiers). Une structure typique pour un petit site scolaire est : ``` /mon-site /css style.css /js script.js /images logo.png photo.jpg index.html à-propos.html contact.html ``` Chaque dossier regroupe un type de ressource afin de faciliter les recherches et d’éviter les noms de fichiers dupliqués. > **>** La racine du site contient généralement le fichier d’accueil `index.html`. ### B. Bonnes pratiques de nommage - Utiliser uniquement des lettres minuscules, des chiffres et le tiret bas `_` ou le tiret `-`. - Éviter les espaces, les accents et les caractères spéciaux (`?`, `&`, `%`, …). - Donner des noms explicites : `style.css` plutôt que `s1.css`. - Respecter la casse : sur certains serveurs Linux, `Image.JPG` et `image.jpg` sont deux fichiers différents. ### C. Chemins relatifs vs chemins absolus Un **chemin relatif** indique la position d’une ressource par rapport au fichier HTML qui l’appelle. Un **chemin absolu** part de la racine du serveur (`/css/style.css`) ou utilise une URL complète (`https://exemple.com/css/style.css`). En développement local, les chemins relatifs sont préférables car ils rendent le projet portable. > **>** Pour remonter d’un niveau dans l’arborescence, on utilise `../`. Pour descendre dans un sous‑dossier, on indique simplement le nom du dossier suivi de `/`. ### D. Démonstration : résolution d’un chemin relatif Supposons que le fichier `index.html` se trouve à la racine `/mon-site`. Il contient la ligne : ```html <link rel="stylesheet" href="css/style.css"> ``` Le navigateur part de `index.html`, voit le dossier `css` au même niveau, puis charge `style.css`. Si au contraire on écrit dans `à-propos.html` (situé aussi à la racine) : ```html <link rel="stylesheet" href="css/style.css"> ``` Le chemin relatif `css/style.css` indique de descendre dans le dossier `css` situé au même niveau que le fichier HTML, puis de charger `style.css`. Ainsi, le même résultat que pour `index.html` est obtenu. > **>** Un chemin relatif mal formé produit une erreur 404 (ressource non trouvée) visible dans la console du navigateur. ### E. Exemple 1 – Création d’une arborescence simple **Objectif** : créer un site comportant une page d’accueil, une feuille de style et une image. 1. Créer le dossier racine `site-exo`. 2. À l’intérieur, créer les sous‑dossiers `css` et `images`. 3. Placer `index.html` à la racine. 4. Placer `style.css` dans `css`. 5. Placer `photo.png` dans `images`. 6. Dans `index.html`, ajouter : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Mon site</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>Bienvenue</h1> <img src="images/photo.png" alt="Photo d'illustration"> </body> </html> ``` **Résultat** : le navigateur applique les styles de `style.css` et affiche l’image sans erreur. ### F. Exemple 2 – Gestion de plusieurs niveaux de sous‑dossiers **Objectif** : ajouter une page `blog/article1.html` située deux niveaux sous la racine, tout en liant la même feuille de style. Arborescence : ``` /site-exo /css style.css /images photo.png index.html /blog article1.html ``` Dans `blog/article1.html` : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Article 1</title> <link rel="stylesheet" href="../css/style.css"> </head> <body> <h1>Premier article</h1> <p>Contenu de l'article.</p> <img src="../images/photo.png" alt="Illustration"> </body> </html> ``` **Explication** : le `../` remonte d’un niveau depuis `blog` vers la racine, puis descend dans `css` ou `images`. Le même principe s’applique pour chaque niveau supplémentaire. --- ## II. Introduction au JavaScript ### A. Pourquoi JavaScript ? JavaScript est le seul langage exécuté nativement par tous les navigateurs modernes. Il permet : - de modifier le contenu HTML après le chargement de la page (DOM) ; - de réagir aux événements utilisateur (clic, saisie, déplacement de la souris) ; - de réaliser des vérifications côté client avant l’envoi d’un formulaire ; - d’échanger des données avec un serveur via AJAX ou Fetch API. > **>** Un script JavaScript placé dans une balise `<script>` est interprété ligne par ligne, du haut vers le bas. ### B. Syntaxe de base #### Variables On déclare une variable avec `let` (bloc portée) ou `const` (valeur constante). ```javascript let message = "Bonjour"; // peut être réaffecté const PI = 3.14159; // ne peut pas être changé ``` #### Types de données primitifs - `Number` : entier ou flottant (`42`, `3.14`) - `String` : chaîne de caractères entre guillemets simples ou doubles (`"texte"`) - `Boolean` : vrai (`true`) ou faux (`false`) - `undefined` : variable déclarée mais non initialisée - `null` : valeur volontairement vide #### Opérateurs - Arithmétiques : `+`, `-`, `*`, `/`, `%` (modulo) - Comparaison : `==` (égalité de valeur), `===` (égalité de valeur et de type), `<`, `>`, `<=`, `>=` - Logiques : `&&` (ET), `||` (OU), `!` (NON) > **>** L’opérateur `===` est à privilégier car il évite les conversions de type imprévues. ### C. Manipulation du DOM Le Document Object Model (DOM) représente la page sous forme d’arbre d’objets. On y accède via `document`. - Sélection d’un élément : `document.getElementById("id")` ou `document.querySelector("sélecteur CSS")`. - Lecture/écriture du contenu texte : `element.textContent`. - Lecture/écriture du contenu HTML : `element.innerHTML`. - Modification d’un attribut : `element.setAttribute("attribut", "valeur")`. #### Exemple de changement de texte HTML : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Demo JS</title> </head> <body> <h1 id="titre">Titre initial</h1> <button id="btn">Changer le titre</button> <script src="script.js"></script> </body> </html> ``` JavaScript (`script.js`) : ```javascript // Attente du chargement complet du DOM document.addEventListener("DOMContentLoaded", function () { const btn = document.getElementById("btn"); const titre = document.getElementById("titre"); // Gestion du clic btn.addEventListener("click", function () { titre.textContent = "Titre modifié !"; titre.style.color = "darkgreen"; }); }); ``` **Résultat** : au chargement, le titre affiche « Titre initial ». Après un clic sur le bouton, il devient « Titre modifié ! » et passe en vert foncé. > **>** Placer le script à la fin du `<body>` ou utiliser l’événement `DOMContentLoaded` garantit que les éléments du DOM existent avant d’être manipulés. ### D. Événements simples Les événements les plus utilisés en première sont : | Événement | Description | |--------------------|------------------------------------------| | `click` | Utilisateur clique sur l’élément | | `mouseover` | Curseur entre dans la zone de l’élément | | `mouseout` | Curseur quitte la zone de l’élément | | `keydown` | Touche enfoncée sur le clavier | | `submit` | Formulaire soumis (avant envoi) | On les associe avec `element.addEventListener("type", fonctionCallback)`. ### E. Exemple complet – Bouton bascule (toggle) Objectif : afficher/masquer un paragraphe à chaque clic sur un bouton. HTML : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Toggle</title> <style> #cache { display: none; } </style> </head> <body> <button id="toggleBtn">Afficher/Masquer</button> <p id="cache">Ce texte apparaît et disparaît.</p> <script src="toggle.js"></script> </body> </html> ``` JavaScript (`toggle.js`) : ```javascript document.addEventListener("DOMContentLoaded", function () { const btn = document.getElementById("toggleBtn"); const para = document.getElementById("cache"); btn.addEventListener("click", function () { if (para.style.display === "none" || para.style.display === "") { para.style.display = "block"; // montre le paragraphe } else { para.style.display = "none"; // le cache } }); }); ``` **Explication pas à pas** : 1. Le script attend que le DOM soit prêt. 2. Il récupère les références du bouton et du paragraphe. 3. Au clic, il teste la propriété `display` du paragraphe : si elle vaut `"none"` (ou est vide, état initial), il la met à `"block"` pour le rendre visible ; sinon, il la remet à `"none"` pour le cacher. 4. Le changement est immédiat dans le navigateur. > **>** Utiliser une classe CSS (ex. `.visible {display:block;}`) et la toggler avec `classList.toggle` est souvent plus propre que de manipuler directement le style en ligne. --- ## Synthèse du chapitre - **Arborescence** : séparer les ressources par type (css, js, images) facilite la maintenance. - **Nommage** : minuscules, pas d’espaces, noms descriptifs, éviter les accents. - **Chemins relatifs** : `../` pour remonter, `nom/` pour descendre ; toujours tester l’accès. - **JavaScript** : langage côté client, manipule le DOM, réagit aux événements. - **Variables** : `let` (modifiable), `const` (constante), types primitifs. - **Sélection DOM** : `getElementById`, `querySelector`. - **Événements** : `addEventListener("type", fonction)`. - **Debug** : ouvrir la console (`F12`) pour voir les erreurs et utiliser `console.log`. > **>** Un site bien organisé + un script JavaScript de base = une page interactive prête à être enrichie. --- ## Glossaire - **Arborescence** : représentation hiérarchique des dossiers et fichiers d’un projet. - **Chemin relatif** : adresse d’une ressource exprimée par rapport au fichier qui la référence. - **DOM (Document Object Model)** : modèle objet qui représente la structure d’une page HTML pouvant être manipulé par JavaScript. - **Événement** : action de l’utilisateur (clic, frappe, etc.) détectable par un écouteur JavaScript. - **Feuille de style (CSS)** : fichier contenant les règles de présentation appliquées aux éléments HTML. - **Fonction de rappel (callback)** : fonction passée en argument à une autre fonction et exécutée plus tard (ex. gestionnaire d’événement). - **Let / Const** : mots‑clés de déclaration de variables en JavaScript ES6 (`let` mutable, `const` immuable). - **Modulo (%)** : opérateur qui renvoie le reste d’une division entière. - **QuerySelector** : méthode qui sélectionne le premier élément correspondant à un sélecteur CSS. - **Console** : outil de développement du navigateur permettant d’afficher des messages, d’exécuter du code et de déboguer. --- ## Exercices d'application corrigés ### Exercice 1 – Arborescence basique **Consigne** : Créez un dossier `mon-site` contenant un fichier `index.html` à la racine, un sous‑dossier `style` avec `style.css`, et un sous‑dossier `img` avec `logo.png`. Dans `index.html`, liez la feuille de style et affichez le logo. **Corrigé** : 1. `mkdir mon-site` 2. `cd mon-site` 3. `mkdir style img` 4. Créez `index.html` : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Mon site</title> <link rel="stylesheet" href="style/style.css"> </head> <body> <h1>Mon site</h1> <img src="img/logo.png" alt="Logo"> </body> </html> ``` 5. Créez `style/style.css` (ex. `body {font-family:Arial;}`) et placez une image quelconque dans `img/logo.png`. **Résultat** : le titre apparaît avec la police définie et le logo s’affiche. --- ### Exercice 2 – Chemins relatifs multiples niveaux **Consigne** : Dans la même arborescence que l’exercice 1, ajoutez un dossier `pages` contenant `galerie.html`. Cette page doit utiliser la même feuille de style et afficher une image `photos/pic1.jpg` située dans un sous‑dossier `photos` à la racine. **Corrigé** : 1. `mkdir pages photos` 2. Placez une image dans `photos/pic1.jpg`. 3. Créez `pages/galerie.html` : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Galerie</title> <link rel="stylesheet" href="../style/style.css"> </head> <body> <h1>Galerie</h1> <img src="../photos/pic1.jpg" alt="Photo 1"> </body> </html> ``` **Explication** : depuis `pages/`, `../style/style.css` remonte d’un niveau puis entre dans `style`; de même pour l’image. --- ### Exercice 3 – Variable et affichage en console **Consigne** : Écrivez un script `script.js` qui déclare deux variables `a` et `b`, leur affecte les valeurs 7 et 3, calcule leur somme, leur produit et le reste de la division de `a` par `b`, puis affiche chaque résultat dans la console. **Corrigé** : ```javascript let a = 7; let b = 3; let somme = a + b; let produit = a * b; let reste = a % b; console.log("a =", a); console.log("b =", b); console.log("Somme :", somme); console.log("Produit :", produit); console.log("Reste de a / b :", reste); ``` **Résultat dans la console** : ``` a = 7 b = 3 Somme : 10 Produit : 21 Reste de a / b : 1 ``` --- ### Exercice 4 – Manipulation du DOM – changement de couleur **Consigne** : À partir du fichier HTML suivant, écrivez un script qui, au double‑clic sur le paragraphe, change sa couleur de texte en bleu et son fond en jaune. HTML de base : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>DOM couleur</title> </head> <body> <p id="msg">Cliquez deux fois ici</p> <script src="couleur.js"></script> </body> </html> ``` **Corrigé** (`couleur.js`) : ```javascript document.addEventListener("DOMContentLoaded", function () { const p = document.getElementById("msg"); p.addEventListener("dblclick", function () { p.style.color = "blue"; p.style.backgroundColor = "yellow"; }); }); ``` **Résultat** : un double‑clic sur le texte le rend bleu sur fond jaune. --- ### Exercice 5 – Bouton bascule avec classe CSS **Consigne** : Reprenez l’exemple du toggle (Exercice 4 du cours) mais cette fois utilisez une classe CSS `.visible {display:block;}` et la méthode `classList.toggle`. **Corrigé** : HTML : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Toggle classe</title> <style> .cache {display:none;} .visible {display:block;} </style> </head> <body> <button id="btn">Afficher/Masquer</button> <p id="texte" class="cache">Texte à basculer.</p> <script src="toggle2.js"></script> </body> </html> ``` JavaScript (`toggle2.js`) : ```javascript document.addEventListener("DOMContentLoaded", function () { const btn = document.getElementById("btn"); const texte = document.getElementById("texte"); btn.addEventListener("click", function () { texte.classList.toggle("visible"); texte.classList.toggle("cache"); }); }); ``` **Résultat** : chaque clic alterne l’affichage du paragraphe. --- ### Exercice 6 – Formulaire simple – validation de champ **Consigne** : Créez un formulaire avec un champ `nom` (type text) et un bouton `Envoyer`. À la soumission, si le champ est vide, affichez un message d’erreur en rouge sous le champ ; sinon, effacez le message et affichez une alerte `Bonjour, [nom] !`. **Corrigé** : HTML : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Validation formulaire</title> <style> .erreur {color:red; font-size:0.9em;} </style> </head> <body> <form id="monForm"> <label for="nom">Nom :</label> <input type="text" id="nom" name="nom"> <div id="msgErreur" class="erreur"></div> <br> <button type="submit">Envoyer</button> </form> <script src="form.js"></script> </body> </html> ``` JavaScript (`form.js`) : ```javascript document.addEventListener("DOMContentLoaded", function () { const form = document.getElementById("monForm"); const nomInput = document.getElementById("nom"); const erreurDiv = document.getElementById("msgErreur"); form.addEventListener("submit", function (e) { e.preventDefault(); // empêcher l’envoi réel const valeur = nomInput.value.trim(); if (valeur === "") { erreurDiv.textContent = "Le champ nom ne peut pas être vide."; } else { erreurDiv.textContent = ""; alert(`Bonjour, ${valeur} !`); } }); }); ``` **Résultat** : si le champ est vide, un message rouge apparaît ; sinon, une alerte salue l’utilisateur. --- ## Erreurs fréquentes | # | Erreur fréquente | Pourquoi elle se produit | Comment l’éviter | |---|------------------|--------------------------|------------------| | 1 | Oublier le `./` ou `../` dans un chemin relatif | Le navigateur interprète le chemin comme relatif à la racine du serveur, pas au fichier courant. | Toujours compter les niveaux depuis le fichier HTML et vérifier avec la barre d’adresse du navigateur. | | 2 | Utiliser des majuscules dans les noms de fichiers sous Linux alors que le serveur est case‑sensible | `Image.JPG` ≠ `image.jpg` → erreur 404. | Adopter une convention de nommage en minuscules uniquement. | | 3 | Placer le script `<script>` dans le `<head>` sans attendre le chargement du DOM | Les éléments n’existent pas encore → `null` références. | Soit mettre le script juste avant `</body>`, soit utiliser `document.addEventListener("DOMContentLoaded", …)`. | | 4 | Confondre `=` (affectation) et `==` / `===` (comparaison) dans une condition | `if (x = 5)` affecte 5 à x et retourne toujours vrai. | Utiliser `===` pour les comparaisons et relire les conditions. | | 5 | Oublier `e.preventDefault()` dans un gestionnaire de soumission de formulaire | Le formulaire se recharge la page avant que le script ne s’exécute. | Toujours appeler `e.preventDefault()` lorsqu’on veut gérer la soumission en JS. | | 6 | Négliger de déclarer une variable avec `let`/`const` et créer accidentellement une variable globale | Cela peut écraser une variable existante ou provoquer des effets de bord. | Toujours déclarer explicitement chaque variable. | --- *Fin du cours.*