Accueil/Informatique & Développement /Chapitre 04 /Exercices corrigés

JavaScript — exercices

Les quatre TP, corrigés et commentés — avec les pièges de conversion qui transforment 2 + 3 en 23.

🎯

Le réflexe permanent

Ouvrez la console (F12). Une page qui « ne fait rien » affiche presque toujours une erreur rouge qui dit exactement quelle ligne pose problème. Coder sans la console, c'est réparer un moteur les yeux fermés.

01Comparer deux valeurs (TP1 · ex. 1)

1La plus élevée des deux températures Facile

Demander deux températures, puis afficher la plus élevée — ou un message indiquant qu'elles sont identiques.

✅ Correction
javascript
let t1 = Number(prompt("Première température :"));
let t2 = Number(prompt("Deuxième température :"));

if (t1 > t2) {
    console.log("La plus élevée est : " + t1);
} else if (t2 > t1) {
    console.log("La plus élevée est : " + t2);
} else {
    console.log("Les deux températures sont identiques");
}
⚠️ Number() autour de prompt() : indispensable

prompt() renvoie toujours une chaîne. Sans conversion, la comparaison se ferait sur du texte, c'est-à-dire dans l'ordre alphabétique :

javascript
"9" > "10"     // true  ← faux mathématiquement : "9" vient après "1"
9 > 10         // false ← correct

Une température de 9 °C serait déclarée supérieure à 10 °C. Le même piège vaut pour .value d'un champ de formulaire.

02Nombre premier (TP1 · ex. 2)

2Tester la primalité Exigeant

Un nombre premier est un entier strictement supérieur à 1 qui n'a que deux diviseurs : 1 et lui-même. Exemples : 2, 3, 5, 7, 11 sont premiers ; 4, 6, 8, 9, 10 ne le sont pas.

Demander un entier et afficher « Le nombre est premier » ou « Le nombre n'est pas premier ».

✅ Correction
javascript
let n = Number(prompt("Entrez un nombre entier :"));
let estPremier = true;

if (n <= 1) {
    estPremier = false;                 // 0, 1 et les négatifs ne sont pas premiers
} else {
    for (let i = 2; i <= Math.sqrt(n); i++) {
        if (n % i === 0) {              // i divise n sans reste
            estPremier = false;
            break;                      // inutile de continuer
        }
    }
}

if (estPremier) {
    console.log("Le nombre est premier");
} else {
    console.log("Le nombre n'est pas premier");
}
🧰 Pourquoi s'arrêter à la racine carrée

Si n a un diviseur plus grand que √n, il en a forcément un plus petit — les diviseurs vont par paires autour de la racine. Pour 36 : 2×18, 3×12, 4×9, 6×6, puis 9×4, 12×3, 18×2 : la seconde moitié répète la première.

Tester jusqu'à √n suffit donc, et va beaucoup plus vite : pour un million, 1 000 tours au lieu d'un million. Une boucle allant jusqu'à n reste juste, mais montre qu'on n'a pas vu l'astuce.

⚠️ Les trois pièges de cet exercice
  • Oublier n <= 1 : sans ce test, 1 et 0 seraient déclarés premiers (la boucle ne tourne pas, estPremier reste true).
  • Démarrer la boucle à 1 : tout nombre est divisible par 1 — aucun nombre ne serait jamais premier. On commence à 2.
  • Confondre % et / : % donne le reste. « Divisible » signifie « reste nul », donc n % i === 0.

03Authentification (TP1 · ex. 3)

3Deux conditions à la fois Facile

Demander un nom d'utilisateur et un mot de passe. L'accès est autorisé si le nom est "admin" et le mot de passe "2024".

✅ Correction
javascript
let utilisateur = prompt("Nom d'utilisateur :");
let motDePasse  = prompt("Mot de passe :");

if (utilisateur === "admin" && motDePasse === "2024") {
    console.log("Accès autorisé");
} else {
    console.log("Accès refusé");
}
⚠️ Ici, on ne convertit surtout PAS

Le mot de passe est "2024" — une chaîne. Le comparer avec === 2024 (nombre) donnerait toujours false. À l'inverse de l'exercice des températures, on veut bien comparer du texte à du texte.

La règle n'est donc pas « convertir toujours », mais savoir quel type on manipule. === vous le rappelle en refusant les comparaisons entre types différents — c'est un avantage, pas une contrainte.

🌍 À ne jamais faire en vrai

Un mot de passe écrit en clair dans un fichier .js est visible par n'importe quel visiteur : il suffit d'ouvrir les outils développeur. C'est un exercice de syntaxe, pas un modèle d'authentification. En production, la vérification se fait côté serveur, sur un mot de passe haché — voir le chapitre cybersécurité.

04Supervision réseau (TP2 · fonctions)

4Cinq fonctions sur un parc de postes Moyen

Vous développez un outil de supervision analysant l'état des postes du réseau interne.

javascript — données
let postes = [
    {nom: "PC-01", ip: "192.168.0.10", enLigne: true,  ram: 8},
    {nom: "PC-02", ip: "192.168.0.11", enLigne: false, ram: 4},
    {nom: "PC-03", ip: "192.168.0.12", enLigne: true,  ram: 16},
    {nom: "PC-04", ip: "192.168.0.13", enLigne: false, ram: 2}
];
  1. Une fonction qui affiche === OUTIL DE SUPERVISION RÉSEAU ===.
  2. Une fonction qui prend nom et ip et affiche Poste : PC-01 | IP : 192.168.0.10.
  3. Une fonction qui prend un poste et retourne true s'il est en ligne.
  4. Une fonction qui parcourt tous les postes et affiche nom et IP de chacun.
  5. Une fonction qui compte et retourne le nombre de postes hors ligne.
✅ Correction
javascript
// 1. En-tête
function afficherEnTete() {
    console.log("=== OUTIL DE SUPERVISION RÉSEAU ===");
}
afficherEnTete();

// 2. Affichage d'un poste
function afficherPoste(nom, ip) {
    console.log(`Poste : ${nom} | IP : ${ip}`);
}
afficherPoste(postes[0].nom, postes[0].ip);

// 3. Prédicat : le poste est-il en ligne ?
function estEnLigne(poste) {
    return poste.enLigne;
}
console.log(estEnLigne(postes[1]));      // false

// 4. Parcours complet
function listerPostes(liste) {
    for (let i = 0; i < liste.length; i++) {
        console.log(`Nom : ${liste[i].nom} | IP : ${liste[i].ip}`);
    }
}
listerPostes(postes);

// 5. Comptage des postes hors ligne
function compterHorsLigne(liste) {
    let compteur = 0;
    for (let i = 0; i < liste.length; i++) {
        if (!liste[i].enLigne) {
            compteur++;
        }
    }
    return compteur;
}
console.log("Postes hors ligne : " + compterHorsLigne(postes));   // 2

Résultat : PC-02 et PC-04 sont hors ligne → 2.

🧰 Lire un objet dans un tableau

Deux niveaux d'accès se combinent :

javascript
postes[0]           // l'objet complet : {nom:"PC-01", ip:"192.168.0.10", …}
postes[0].nom       // "PC-01"        ← [indice] puis .propriété
liste.length        // 4              ← la taille, sans la coder en dur

Utiliser liste.length plutôt que 4 rend la fonction valable pour n'importe quel parc : ajoutez un poste, rien à changer.

⚠️ return n'est pas console.log

La question 5 demande de retourner le nombre. Une fonction qui se contente de l'afficher rend undefined : impossible de réutiliser le résultat ailleurs.

javascript
function compter(l) { console.log(2); }        // ✘ affiche, mais ne rend rien
function compter(l) { return 2; }              // ✔ rend une valeur exploitable

let n = compter(postes);
if (n > 0) { /* … */ }                         // possible seulement avec return

Afficher est pour l'humain, retourner est pour le programme.

05Manipuler le DOM (TP3)

5Une page qui réagit Moyen

À partir d'une page contenant un titre, un bouton et une liste, écrire le script qui permet :

  1. d'afficher un message dynamique au clic ;
  2. de modifier l'apparence (couleur, classe) ;
  3. d'ajouter et de supprimer des éléments de la liste.
✅ Correction
javascript
const titre    = document.getElementById("titre");
const btnAjout = document.getElementById("ajouter");
const liste    = document.getElementById("liste");

// 1. Message dynamique + 2. apparence
btnAjout.addEventListener("click", function () {
    titre.textContent = "Élément ajouté !";
    titre.classList.add("actif");

    // 3. Création d'un élément
    const li = document.createElement("li");
    li.textContent = "Élément " + (liste.children.length + 1);

    // suppression au clic sur l'élément lui-même
    li.addEventListener("click", function () {
        li.remove();
    });

    liste.appendChild(li);
});

Le même principe, en fonctionnement :

javascript
const btn   = document.getElementById("ajouter");
const liste = document.getElementById("liste");

btn.addEventListener("click", function () {
    const li = document.createElement("li");
    li.textContent = "Élément " + (liste.children.length + 1);
    li.style.cursor = "pointer";
    li.title = "Cliquez pour supprimer";
    li.addEventListener("click", function () {
        li.remove();
    });
    liste.appendChild(li);
});
⚠️ Le script doit s'exécuter APRÈS le HTML

Si getElementById("titre") renvoie null, c'est presque toujours que le script s'est exécuté avant que l'élément existe. L'erreur en console est caractéristique :

console
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

La parade : <script src="script.js" defer></script> dans le <head>, ou la balise en fin de <body>.

06Valider un formulaire (TP4)

6Inscription contrôlée Exigeant

Valider un formulaire d'inscription avant son envoi : nom obligatoire, email au bon format, mot de passe d'au moins 8 caractères, et confirmation identique. Les messages d'erreur doivent s'afficher dans la page, pas dans un alert().

✅ Correction
javascript
const form  = document.getElementById("inscription");
const regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

form.addEventListener("submit", function (e) {
    e.preventDefault();                 // on garde la main
    let erreurs = 0;

    const nom   = document.getElementById("nom").value.trim();
    const email = document.getElementById("email").value.trim();
    const mdp   = document.getElementById("mdp").value;
    const mdp2  = document.getElementById("mdp2").value;

    // on efface les messages précédents
    document.querySelectorAll(".erreur").forEach(function (s) {
        s.textContent = "";
    });

    if (nom === "") {
        document.getElementById("errNom").textContent = "Le nom est obligatoire";
        erreurs++;
    }
    if (!regexEmail.test(email)) {
        document.getElementById("errEmail").textContent = "Format d'email invalide";
        erreurs++;
    }
    if (mdp.length < 8) {
        document.getElementById("errMdp").textContent = "8 caractères minimum";
        erreurs++;
    }
    if (mdp !== mdp2) {
        document.getElementById("errMdp2").textContent = "Les mots de passe diffèrent";
        erreurs++;
    }

    if (erreurs === 0) {
        console.log("Formulaire valide — envoi possible");
        form.submit();                  // envoi réel
    }
});
🧰 Les quatre points qui font la différence
  • e.preventDefault() — sans lui, la page se recharge et aucune vérification ne sert à rien.
  • Un compteur d'erreurs plutôt qu'un return au premier problème : l'utilisateur voit toutes ses erreurs d'un coup, au lieu de les découvrir une par une.
  • Effacer les anciens messages au début, sinon une erreur corrigée reste affichée.
  • .trim() sur le nom et l'email — mais jamais sur un mot de passe : une espace peut en faire légitimement partie.
⚠️ Et toujours : cela ne sécurise rien

Ce script s'exécute chez l'utilisateur, qui peut le désactiver. La validation côté client sert le confort. La sécurité se joue côté serveur, où l'on revérifie tout.

⚡ Les erreurs qui coûtent le plus de points

  • Oublier Number() sur un prompt() ou un .value → comparaisons alphabétiques, additions qui concatènent.
  • Utiliser == au lieu de ===.
  • Script exécuté avant le HTML → null et TypeError. Utiliser defer.
  • Oublier e.preventDefault() dans un submit.
  • Confondre return et console.log.
  • Passer maFonction() au lieu de maFonction à addEventListener.
  • Boucle sans condition qui évolue → l'onglet se fige.

Sources exploitées

  • TP1 — Opérateurs & conditions · TP2 — Fonctions · TP3 — DOM · TP4 — Validation (le professeur)
  • comptes rendus d'élève (TP2, TP3 DOM, TP4 validation)