TP 2 : Intégrer et déboguer du JavaScript dans une page HTML

Présentation du TP

• Chapitre : 02 – Environnement de travail, conventions et intégration du code.
• Durée conseillée : 3 heures.
• Prérequis : les 7 leçons du chapitre 02, VS Code avec Live Server, un compte GitHub.
• Contexte : un collègue a commencé une page « Bulletin de notes » qui affiche la moyenne et la décision (Admis / Ajourné) de chaque stagiaire. Son script contient des erreurs et des résultats faux. Vous devez intégrer correctement les scripts, utiliser la console, puis retrouver et corriger tous les problèmes avec les DevTools.

Objectifs :

• Organiser un projet JavaScript et le versionner sur GitHub.
• Intégrer des fichiers JavaScript externes au bon endroit, dans le bon ordre, avec defer.
• Utiliser les méthodes de la console pour suivre l'exécution d'un script.
• Lire les messages d'erreur et corriger le code.
• Utiliser les points d'arrêt pour trouver des bugs de logique.

Partie 1 Préparer le projet et le dépôt GitHub

1. Créez sur GitHub un dépôt public nommé tp2-integrer-deboguer-js, avec un fichier README.md.
2. Clonez-le sur votre ordinateur (git clone https://github.com/votre-compte/tp2-integrer-deboguer-js.git) et ouvrez le dossier dans VS Code.
3. Créez l'arborescence : dossiers css, js et captures, et les fichiers index.html, css/style.css, js/outils.js, js/app.js, js/notes-bug.js (vides pour l'instant).
4. Complétez le README.md: votre nom, votre groupe, la date et une phrase qui décrit le projet.
5. Faites votre premier commit et envoyez-le sur GitHub :

git add .
git commit -m "Partie 1 : structure du projet"
git push

Partie 2 Intégrer les scripts dans la page

2.1 – La page HTML. Copiez ce code dans index.html:

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TP 2 – Bulletin de notes</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.9/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/outils.js" defer></script>
  <script src="js/app.js" defer></script>
  <script src="js/notes-bug.js" defer></script>
</head>
<body class="container py-4">
  <h1 id="titre">Bulletin de notes</h1>
  <p>Nombre de stagiaires : <strong id="nb-stagiaires">0</strong></p>
  <button id="btn-afficher" class="btn btn-primary mb-3">Afficher le bulletin</button>
  <table class="table table-bordered">
    <thead class="table-primary">
      <tr><th>Nom</th><th>Moyenne</th><th>Décision</th></tr>
    </thead>
    <tbody id="corpsTableau"></tbody>
  </table>
  <noscript>
    <div class="alert alert-warning">Cette page nécessite JavaScript.</div>
  </noscript>
</body>
</html>

2.2 – Les scripts. Copiez ce code dans js/outils.js:

// Fonctions utilitaires utilisées par app.js et notes-bug.js
function dateDuJour() {
  return new Date().toLocaleDateString("fr-FR");
}

function formaterNote(note) {
  return `${note.toFixed(2)} / 20`;
}

Et ce code dans js/app.js:

// Partie 3 : travail avec la console
console.log(`Page chargée le ${dateDuJour()}`);

2.3 – Tests d'intégration. Lancez la page avec Live Server, ouvrez la console (F12), puis réalisez les tests suivants. Pour chacun, notez dans le README.md ce que vous observez et pourquoi, puis remettez le code d'origine.

1. Test A : le message « Page chargée le … » s'affiche-t-il dans la console ? Dans l'onglet Réseau, rechargez la page et vérifiez que les trois fichiers .js ont le statut 200.
2. Test B : inversez l'ordre des balises de outils.js et app.js. Quel message d'erreur apparaît ? Quel est son type ?
3. Test C : remplacez src="js/app.js" par src="script/app.js". Que montrent la console et l'onglet Réseau ?
4. Test D : dans app.js, ajoutez document.querySelector("#titre").textContent = "Bulletin du groupe DEV101";. Vérifiez que le titre change. Retirez ensuite l'attribut defer des balises de outils.js et de app.js. Que se passe-t-il ? Proposez deux corrections.
5. Test E : désactivez JavaScript dans les DevTools (Ctrl + Maj + P → « Disable JavaScript ») et rechargez : quel message s'affiche ? Réactivez JavaScript.

Commit : git commit -am "Partie 2 : intégration des scripts et tests" puis git push.

Partie 3 Suivre l'exécution avec la console

Complétez js/app.js (sous la ligne existante) pour réaliser les tâches suivantes. Chaque tâche doit produire un affichage dans la console.

1. Créez un tableau groupe de 4 objets { nom, ville, age } et affichez-le avec console.table.
2. Pour chaque stagiaire de moins de 18 ans, affichez un avertissement avec console.warn (« Stagiaire mineur : … »). Ajoutez au moins un stagiaire mineur pour tester.
3. Regroupez l'affichage des noms dans un groupe nommé « Liste des stagiaires » avec console.group / console.groupEnd.
4. Mesurez avec console.time / console.timeEnd le temps nécessaire pour trier le tableau par âge.
5. Vérifiez avec console.assert que le groupe contient bien 4 stagiaires.
6. Ajoutez un écouteur sur le titre #titre: à chaque clic, console.count("clic sur le titre").
7. Utilisez les filtres de la console pour n'afficher que les avertissements, et faites une capture d'écran (captures/partie3.png).

Commit : git commit -am "Partie 3 : utilisation de la console" puis git push.

Partie 4 Corriger les erreurs signalées par la console

Copiez dans js/notes-bug.js le script de votre collègue, sans le corriger:

// Bulletin de notes : version qui contient des erreurs
const stagiaires = [
  { nom: "Sami", notes: ["14", "15", "9"] },
  { nom: "Rim", notes: ["17", "16", "18"] },
  { nom: "Yassine", notes: ["8", "12", "10"] }
];

const SEUIL_ADMISSION = 10;

function calculerMoyenne(notes) {
  let total = 0;
  for (let i = 0; i <= notes.length; i++) {
    total += notes[i];
  }
  return total / notes.length;
}

function estAdmis(moyenne) {
  return moyenne > SEUIL_ADMISSION;
}

function afficherBulletin() {
  const corps = document.querySelector("#corps-tableau");
  corps.innerHTML = "";
  stagiaires.foreach((stagiaire) => {
    const moyenne = calculerMoyene(stagiaire.notes);
    const ligne = document.createElement("tr");
    ligne.innerHTML = `
      <td>${stagiaire.nom}</td>
      <td>${formaterNote(moyenne)}</td>
      <td>${estAdmis(moyenne) ? "Admis" : "Ajourné"}</td>`;
    corps.appendChild(ligne);
  });
  document.querySelector("#nb-stagiaires").textContent = stagiaires.length;
}

document.querySelector("#btn-afficher").addEventListener("click", afficherBulletin;

Rechargez la page, puis cliquez sur le bouton Afficher le bulletin. Le script contient 4 erreurs qui produisent un message rouge dans la console. Elles apparaissent une par une: chaque correction fait apparaître la suivante.

Pour chaque erreur, complétez ce tableau dans votre README.md:

Une fois les 4 erreurs corrigées, le tableau s'affiche… mais les moyennes sont fausses. C'est l'objet de la partie suivante.

Partie 5 Trouver les bugs de logique avec les points d'arrêt

Résultats attendus : Sami 12.67 Admis, Rim 17.00 Admis, Yassine 10.00 Admis (la moyenne de 10 suffit pour être admis). Le script contient encore 3 bugs de logique qui ne produisent aucune erreur dans la console.

1. Ouvrez l'onglet Sources et posez un point d'arrêt sur la ligne total += notes[i];. Cliquez sur le bouton de la page.
2. Avancez avec F8 et relevez, à chaque pause, la valeur de i, de notes[i] et de total (panneau Scope). Notez-les dans un tableau du README.
3. Ajoutez dans le panneau Watch les expressions typeof notes[i] et i < notes.length. Que constatez-vous au dernier tour de boucle ?
4. Corrigez le bug de la boucle. Rechargez : quelles moyennes obtenez-vous maintenant ? Pourquoi sont-elles encore fausses ?
5. Corrigez le bug du calcul en convertissant les notes en nombres.
6. Avec un point d'arrêt conditionnel dans estAdmis (condition : moyenne === 10), observez le cas de Yassine et corrigez le troisième bug.
7. Faites une capture de l'onglet Sources en pause (captures/partie5.png) et un commit par bug corrigé.

Partie 6 Aller plus loin (bonus)

1. Logpoint : remplacez vos console.log de débogage par un logpoint qui affiche "Moyenne de", stagiaire.nom, moyenne dans afficherBulletin.
2. Point d'arrêt sur événement : dans Sources, cochez Event Listener Breakpoints → Mouse → click, cliquez sur le bouton et indiquez dans quelle fonction l'exécution s'arrête.
3. debugger : ajoutez debugger; dans estAdmis uniquement quand la moyenne est inférieure à 10. Ajoutez un quatrième stagiaire ajourné pour tester. Retirez ensuite l'instruction.
4. Amélioration : affichez la décision avec un badge Bootstrap vert (text-bg-success) ou rouge (text-bg-danger) et la date du jour sous le titre avec dateDuJour().
5. Qualité : installez ESLint dans le projet (configuration de la leçon sur les conventions) et corrigez tous les messages.

Commit : git commit -am "Partie 6 : bonus" puis git push.

Livrables et barème

• Le lien de votre dépôt GitHub tp2-integrer-deboguer-js, à déposer sur la plateforme.
• Le README.md complété (observations de la partie 2, tableaux des parties 4 et 5).
• Les captures d'écran dans le dossier captures.