javascript-corrections-tps/tp08/tp08-operation.js at master · DiginamicFormation/javascript-corrections-tps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
// ===== EXERCICE Operation (TP8) =====
// Description : Calculatrice avec 4 opérations arithmétiques (+, -, *, /)
// Concepts : querySelector, select, validation, switch/case, manipulation DOM

/**
 * Fonction appelée lors du clic sur le bouton "Calculer"
 * Elle effectue l'opération sélectionnée par l'utilisateur
 */
function calculerOperation() {
    console.log("=== EXERCICE Operation ===\n");

    // --- ETAPE 1 : Récupérer les éléments du DOM ---
    const champNombre1 = document.getElementById("nombre1");
    const champNombre2 = document.getElementById("nombre2");
    const selectOperateur = document.getElementById("operateur");
    const spanResultat = document.getElementById("resultat");

    // --- ETAPE 2 : Récupérer les valeurs saisies ---
    const valeur1 = champNombre1.value;
    const valeur2 = champNombre2.value;
    // Pour un select, .value donne la valeur de l'option sélectionnée
    const operateur = selectOperateur.value;

    console.log("Valeur 1 :", valeur1);
    console.log("Valeur 2 :", valeur2);
    console.log("Opérateur :", operateur);

    // --- ETAPE 3 : Validation des saisies ---
    if (valeur1 === "" || valeur2 === "" || isNaN(valeur1) || isNaN(valeur2)) {
        console.log("Erreur : Les valeurs saisies ne sont pas valides");

        spanResultat.textContent = "Vous devez saisir un nombre";
        spanResultat.className = "erreur";

        return;
    }

    // --- ETAPE 4 : Conversion en nombres ---
    const nombre1 = parseFloat(valeur1);
    const nombre2 = parseFloat(valeur2);

    console.log("Nombre 1 :", nombre1);
    console.log("Nombre 2 :", nombre2);

    // --- ETAPE 5 : Calcul en fonction de l'opérateur ---
    // On utilise une structure switch pour gérer les différents cas
    let resultat;
    let nomOperation;

    switch (operateur) {
        case "+":
            resultat = nombre1 + nombre2;
            nomOperation = "l'addition";
            break;
        case "-":
            resultat = nombre1 - nombre2;
            nomOperation = "la soustraction";
            break;
        case "*":
            resultat = nombre1 * nombre2;
            nomOperation = "la multiplication";
            break;
        case "/":
            // ⭐ Cas particulier : division par zéro
            if (nombre2 === 0) {
                spanResultat.textContent = "Erreur : Division par zéro impossible";
                spanResultat.className = "erreur";
                console.log("Erreur : Division par zéro");
                return;
            }
            resultat = nombre1 / nombre2;
            nomOperation = "la division";
            break;
        default:
            spanResultat.textContent = "Erreur : Opérateur inconnu";
            spanResultat.className = "erreur";
            return;
    }

    console.log("Résultat :", resultat);

    // --- ETAPE 6 : Affichage du résultat ---
    spanResultat.textContent = "Le résultat de " + nomOperation + " est : " + resultat;
    spanResultat.className = "succes";

    console.log("\n" + "=".repeat(40));
}

// ⚠️ NOTE PÉDAGOGIQUE : Élément <select>
//
// Pour récupérer la valeur sélectionnée dans un <select> :
//
// 1. Récupérer l'élément select
//    const select = document.getElementById("operateur");
//
// 2. Obtenir la valeur de l'option sélectionnée
//    const valeur = select.value;
//
// 3. Obtenir le texte de l'option sélectionnée
//    const texte = select.options[select.selectedIndex].text;
//
// Dans notre cas, on utilise simplement .value pour obtenir "+", "-", "*" ou "/"

// ⚠️ NOTE PÉDAGOGIQUE : Switch vs If/Else
//
// Le switch est recommandé quand on a plusieurs valeurs possibles à tester :
//
// switch (operateur) {
//     case "+":
//         // Code pour l'addition
//         break;
//     case "-":
//         // Code pour la soustraction
//         break;
//     default:
//         // Code si aucun cas ne correspond
// }
//
// Équivalent avec if/else (moins lisible) :
// if (operateur === "+") {
//     // Code pour l'addition
// } else if (operateur === "-") {
//     // Code pour la soustraction
// } else {
//     // Code par défaut
// }
//
// Le mot-clé "break" est IMPORTANT : il arrête l'exécution du switch.
// Sans break, le code continuerait à exécuter les cas suivants !

// ⚠️ NOTE PÉDAGOGIQUE : Cas particuliers mathématiques
//
// Certaines opérations nécessitent des vérifications :
//
// 1. Division par zéro : toujours vérifier que le diviseur n'est pas 0
//    if (nombre2 === 0) { return; }
//
// 2. Racine carrée d'un nombre négatif : vérifier que le nombre est positif
//    if (nombre < 0) { return; }
//
// 3. Dépassement de capacité : les très grands nombres peuvent donner Infinity
//    if (resultat === Infinity) { return; }