Les Opérateurs JavaScript

Manipuler et comparer des valeurs

Utilisez les flèches, cliquez ou glissez pour naviguer

Objectifs d'apprentissage

1. Opérateurs arithmétiques

Calculer avec +, -, *, /, %, **

2. Opérateurs de comparaison

Comparer avec ===, ==, <, >

3. Opérateurs logiques

Combiner avec &&, ||, !

4. Concaténation & Templates

Assembler des chaînes de caractères

Plan de la présentation

Module 1

Opérateurs arithmétiques

Module 2

Opérateurs de comparaison

Module 3

Opérateurs logiques

Module 4

Concaténation & Template literals

Module 1

Opérateurs arithmétiques

Effectuer des calculs mathématiques

Les 5 opérateurs de base

+

Addition

-

Soustraction

*

Multiplication

/

Division

%

Modulo

**

Puissance

Addition et soustraction

Addition (+)

let a = 10 + 5;

// a = 15

let b = 7.5 + 2.5;

// b = 10

let prix = 20;

let total = prix + 5;

// total = 25

Soustraction (-)

let a = 20 - 8;

// a = 12

let b = 100 - 50.5;

// b = 49.5

let solde = 500;

let reste = solde - 150;

// reste = 350

Multiplication et division

Multiplication (*)

let a = 6 * 7;

// a = 42

let b = 3.5 * 2;

// b = 7

let prix = 15;

let total = prix * 3;

// total = 45

Division (/)

let a = 20 / 4;

// a = 5

let b = 7 / 2;

// b = 3.5

let note = 85 / 20;

// note = 4.25

Attention : Division par 0 donne Infinity

Modulo et puissance

Modulo (%) - Reste de division

Très utile pour tester la parité !

let a = 17 % 5;

// a = 2 (17 = 3×5 + 2)

let b = 10 % 2;

// b = 0 (nombre pair)

let c = 7 % 2;

// c = 1 (nombre impair)

Puissance (**)

Élever un nombre à une puissance

let a = 2 ** 3;

// a = 8 (2³)

let b = 5 ** 2;

// b = 25 (5²)

let c = 10 ** 0;

// c = 1 (règle mathématique)

Raccourcis d'assignation

Écrire plus rapidement les opérations courantes

+=

x += 5 équivaut à x = x + 5

-=

x -= 3 équivaut à x = x - 3

*=

x *= 2 équivaut à x = x * 2

/=

x /= 4 équivaut à x = x / 4

let score = 100;

score += 50;

// score = 150

score -= 20;

// score = 130

Incrémentation et décrémentation

Incrémentation (++)

let compteur = 0;

compteur++;

// compteur = 1

compteur++;

// compteur = 2

Ajoute 1 à la variable

Décrémentation (--)

let vies = 3;

vies--;

// vies = 2

vies--;

// vies = 1

Soustrait 1 à la variable

Module 2

Opérateurs de comparaison

Comparer des valeurs et obtenir un booléen

⚠️ == vs === : La différence critique

==

Égalité "lâche"

Convertit les types automatiquement

5 == "5"

// true ⚠️

0 == false

// true ⚠️

===

Égalité stricte

Compare valeur ET type

5 === "5"

// false ✓

5 === 5

// true ✓

Règle d'or : Utilisez toujours === sauf si vous avez une raison précise d'utiliser ==

Pourquoi === est plus sûr

// Avec == (conversion automatique)

null == undefined

// true - peut causer des bugs !

"10" == 10

// true - la chaîne devient nombre

1 == true

// true - true devient 1

// Avec === (strict)

null === undefined

// false - types différents

"10" === 10

// false - string vs number

1 === true

// false - number vs boolean

Autres opérateurs de comparaison

<

Plus petit que

5 < 10 // true

>

Plus grand que

15 > 10 // true

<=

Plus petit ou égal

5 <= 5 // true

>=

Plus grand ou égal

10 >= 10 // true

!=

Différent (lâche)

5 != "5" // false

!==

Différent (strict)

5 !== "5" // true

Module 3

Opérateurs logiques

Combiner plusieurs conditions

AND logique (&&)

Les DEUX conditions doivent être vraies

Exemples

true && true

// true

true && false

// false

5 > 3 && 10 > 5

// true

Table de vérité

true && true = true

true && false = false

false && true = false

false && false = false

let age = 25;

let aPermis = true;

let peutConduire = age >= 18 && aPermis;

// peutConduire = true

OR logique (||)

Au moins UNE condition doit être vraie

Exemples

true || false

// true

false || false

// false

5 > 10 || 3 < 7

// true

Table de vérité

true || true = true

true || false = true

false || true = true

false || false = false

let weekend = true;

let vacances = false;

let repos = weekend || vacances;

// repos = true

NOT logique (!)

Inverse la valeur booléenne

!

Inverse la valeur

!true

// false

!false

// true

!(5 > 10)

// true

Table de vérité

!true = false

!false = true

let estConnecte = false;

let doitSeConnecter = !estConnecte;

// doitSeConnecter = true

Combiner les opérateurs

Expressions complexes avec parenthèses

// Vérifier si un utilisateur peut accéder

let estAdmin = true;

let estModerateur = false;

let estActif = true;

let aPaye = false;

let peutAcceder = (estAdmin || estModerateur) && estActif;

// peutAcceder = true

let aAccesPremium = (estAdmin || aPaye) && estActif;

// aAccesPremium = true

Astuce : Utilisez des parenthèses pour clarifier l'ordre des opérations

Module 4

Concaténation & Template Literals

Assembler des chaînes de caractères

Concaténation avec +

Assembler des chaînes avec l'opérateur +

let prenom = "Marie";

let nom = "Dupont";

let nomComplet = prenom + " " + nom;

// nomComplet = "Marie Dupont"

let age = 25;

let message = "J'ai " + age + " ans.";

// message = "J'ai 25 ans."

Note : Les nombres sont automatiquement convertis en chaînes lors de la concaténation

Template Literals (littéraux de gabarit)

Une façon moderne et lisible d'assembler les chaînes

❌ Ancienne méthode

let msg = "Bonjour " + nom +

", vous avez " + age + " ans.";

Difficile à lire, beaucoup de +

✓ Template Literal

let msg = `Bonjour ${nom},

vous avez ${age} ans.`;

Clair et élégant !

Syntaxe des Template Literals

` `

Backticks (accents graves)

${ }

Interpolation

↵

Sauts de ligne autorisés

let produit = "Stylo";

let prix = 2.50;

let quantite = 3;

let facture = `Produit: ${produit}

Prix unitaire: ${prix}€

Total: ${prix * quantite}€`;

Exemples pratiques

// Calculs dans l'interpolation

let a = 5, b = 3;

console.log(`${a} + ${b} = ${a + b}`);

// "5 + 3 = 8"

// Expressions conditionnelles

let majeur = true;

console.log(`Statut: ${majeur ? "Adulte" : "Mineur"}`);

// "Statut: Adulte"

// Appel de fonction

let nom = "Alice";

console.log(`Bonjour ${nom.toUpperCase()}!`);

// "Bonjour ALICE!"

Bonnes pratiques

✓

Utilisez === au lieu de ==

Évite les conversions implicites surprenantes

✓

Préférez les template literals

Plus lisibles que la concaténation avec +

✓

Utilisez des parenthèses pour les expressions complexes

(a || b) && c est plus clair que a || b && c

✗

Évitez de mélanger types avec +

1 + "2" donne "12", pas 3

Récapitulatif

Arithmétiques

+ - * / % **

+= -= *= /= ++ --

Comparaison

=== !== < > <= >=

Préférez === à ==

Logiques

&& (AND) || (OR) ! (NOT)

Combiner avec parenthèses

Chaînes

+ (concaténation)

`${}` template literals

Questions ?

Pratiquez ces opérateurs dans votre code !

La meilleure façon d'apprendre : expérimenter !