Arithmétique JavaScript
Tu as déjà la carte des familles d’opérateurs. Cette leçon plonge dans la famille arithmétique — des symboles qui travaillent surtout avec des nombres et renvoient une nouvelle valeur. Tu vas pratiquer + - * / %, contrôler l’ordre avec des parenthèses, faire bouger un compteur avec ++ et --, élever à une puissance avec opérateur puissance, et corriger le piège classique : quand + colle du texte au lieu d’additionner.
Que sont les opérateurs arithmétiques ?
Les opérateurs arithmétiques disent à JavaScript de calculer. Les valeurs restent des opérandes. Dans 12 / 4, / est l’opérateur, 12 et 4 les opérandes. Tu peux stocker le résultat, l’afficher dans la console ou sur la page.
Les cinq opérateurs du quotidien
📊 Opérateurs arithmétiques courants
| Opérateur | Rôle | Exemple de résultat |
|---|---|---|
+ |
additionner | 7 + 3 → 10 |
- |
soustraire | 7 - 3 → 4 |
* |
multiplier | 7 * 3 → 21 |
/ |
diviser | 7 / 2 → 3.5 |
% |
reste après division | 7 % 3 → 1 |
Garde ce tableau sous la main. / peut renvoyer une décimale. % n’est pas « pour cent » — c’est le reste.
console.log(20 + 4);
console.log(20 - 4);
console.log(20 * 4);
console.log(20 / 4);
console.log(20 % 4);
console.log(20 / 3);
Motifs de reste avec %
% répond : « que reste-t-il après la division ? » Ce reste sert pour pair/impair et la logique « un élément sur N ».
console.log(8 % 2);
console.log(9 % 2);
console.log(15 % 5);
console.log(17 % 5);
let n = 12;
console.log(n % 2 === 0);
8 % 2 vaut 0 (pair). 9 % 2 vaut 1 (impair). Test courant de parité : n % 2 === 0. Plus tard tu utiliseras le reste dans les boucles ; ici, lis simplement le reste.
Priorité et parenthèses
JavaScript n’évalue pas toujours de gauche à droite. Multiplication et division passent en général avant addition et soustraction. Les parenthèses imposent l’ordre voulu — lis d’abord l’intérieur de (…).
console.log(2 + 3 * 4);
console.log((2 + 3) * 4);
console.log(10 - 6 / 2);
console.log((10 - 6) / 2);
Sans parenthèses, 2 + 3 * 4 vaut 14 (multiplication d’abord). Avec (2 + 3) * 4 tu obtiens 20. Quand l’ordre compte pour un prix ou une formule, écris les parenthèses exprès.
++ -- et opérateur puissance
++ ajoute un à une variable numérique. -- retire un. opérateur puissance est l’exponentiation. Une ligne claire n = n + 1 reste correcte ; tu verras beaucoup ++ dans les boucles.
let lives = 3;
lives++;
console.log(lives);
lives--;
console.log(lives);
console.log(2 ** 3);
console.log(5 ** 2);
Après lives++, la valeur est 4. 2 à la puissance 3 vaut 8. 5 à la puissance 2 vaut 25. Les raccourcis comme += appartiennent à la leçon d’affectation — ici on reste sur les symboles de calcul.
Quand + colle au lieu d’additionner
Si un côté de + est une chaîne, JavaScript concatène souvent. Convertis avec Number(...) quand tu voulais additionner.
console.log("5" + 2);
console.log(Number("5") + 2);
console.log(5 + Number("2"));
let a = "10";
let b = "3";
console.log(Number(a) + Number(b));
"5" + 2 devient "52". Number("5") + 2 devient 7. Même idée que la conversion de type — très fréquente dans les formulaires et le texte de page.
Afficher un total sur la page
Calcule une petite facture, utilise le reste comme indice, et écris le résultat dans la page.
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic — page total</title>
</head>
<body>
<p id="out">…</p>
<script>
let price = 12;
let qty = 3;
let shipping = 4;
let total = price * qty + shipping;
let leftover = total % 5;
let box = document.getElementById("out");
box.textContent = "total=" + total + " · rem5=" + leftover;
</script>
</body>
</html>
Ici * s’exécute avant +, donc 12 * 3 + 4 → 40. 40 % 5 vaut 0. Change price, qty ou shipping, rafraîchis, et vérifie les deux nombres.
À toi de jouer
- Affiche
14 + 5,14 - 5,14 * 5,14 / 5et14 % 5. - Vérifie si
22est pair avec%et=== 0. - Compare
1 + 2 * 3et(1 + 2) * 3. - Pars de
let c = 0, faisc++deux fois, puis affichec. - Affiche 3 à la puissance 3 et
Number("8") + 1. - Dans la démo HTML, change seulement
qty, rafraîchis, et lis le nouveau total et reste.
Erreurs fréquentes
- Lire
%comme « pour cent » — c’est le reste - Croire que
+additionne toujours — un côté chaîne colle souvent - Oublier les parenthèses quand
*//ne doivent pas gagner - Confondre
++(changer d’un) et=(stocker n’importe quelle valeur) - Calculer sur des chaînes d’affichage au lieu des nombres bruts
Résumé
- Opérateurs arithmétiques :
+-*/% %est le reste — utile pour pair/impair et « un sur N »- Les parenthèses contrôlent la priorité ; en général
*/avant+- ++/--changent d’un ; opérateur puissance élève à une puissance- Utilise
Number()quand+concatène - Ensuite : affectation — stocker et mettre à jour avec
=et ses amis
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut