|
|
# Notions de base en JavaScript : Prendre des décisions
|
|
|
|
|
|
|
|
|
|
|
|
> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title Votre aventure de prise de décision en JavaScript
|
|
|
section Fondation
|
|
|
Valeurs booléennes: 5: You
|
|
|
Opérateurs de comparaison: 4: You
|
|
|
Raisonnement logique: 5: You
|
|
|
section Décisions de base
|
|
|
Instructions If: 4: You
|
|
|
Logique If-Else: 5: You
|
|
|
Instructions Switch: 4: You
|
|
|
section Logique avancée
|
|
|
Opérateurs logiques: 5: You
|
|
|
Conditions complexes: 4: You
|
|
|
Expressions ternaires: 5: You
|
|
|
```
|
|
|
Vous êtes-vous déjà demandé comment les applications prennent des décisions intelligentes ? Comme comment un système de navigation choisit le chemin le plus rapide, ou comment un thermostat décide quand allumer le chauffage ? C’est le concept fondamental de la prise de décision en programmation.
|
|
|
|
|
|
Tout comme la machine analytique de Charles Babbage était conçue pour suivre différentes séquences d’opérations selon des conditions, les programmes modernes en JavaScript doivent faire des choix en fonction des circonstances. Cette capacité à bifurquer et à prendre des décisions transforme un code statique en applications réactives et intelligentes.
|
|
|
|
|
|
Dans cette leçon, vous apprendrez à implémenter une logique conditionnelle dans vos programmes. Nous explorerons les instructions conditionnelles, les opérateurs de comparaison et les expressions logiques qui permettent à votre code d’évaluer des situations et de répondre de manière appropriée.
|
|
|
|
|
|
## Quiz pré-conférence
|
|
|
|
|
|
[Quiz pré-conférence](https://ff-quizzes.netlify.app/web/quiz/11)
|
|
|
|
|
|
La capacité à prendre des décisions et à contrôler le flux d’un programme est un aspect fondamental de la programmation. Cette section couvre comment contrôler le chemin d’exécution de vos programmes JavaScript en utilisant des valeurs booléennes et une logique conditionnelle.
|
|
|
|
|
|
[](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
|
|
|
|
|
|
> 🎥 Cliquez sur l’image ci-dessus pour une vidéo sur la prise de décisions.
|
|
|
|
|
|
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon) !
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((Prise de décision))
|
|
|
Boolean Logic
|
|
|
vrai/faux
|
|
|
Résultats de comparaison
|
|
|
Expressions logiques
|
|
|
Conditional Statements
|
|
|
instructions if
|
|
|
Condition unique
|
|
|
Exécution de code
|
|
|
if-else
|
|
|
Deux chemins
|
|
|
Actions alternatives
|
|
|
switch
|
|
|
Options multiples
|
|
|
Structure claire
|
|
|
Operators
|
|
|
Comparison
|
|
|
=== !== < > <= >=
|
|
|
Relations de valeur
|
|
|
Logical
|
|
|
&& || !
|
|
|
Combiner les conditions
|
|
|
Advanced Patterns
|
|
|
Ternary
|
|
|
syntaxe ? :
|
|
|
Décisions en ligne
|
|
|
Complex Logic
|
|
|
Conditions imbriquées
|
|
|
Critères multiples
|
|
|
```
|
|
|
## Bref rappel sur les booléens
|
|
|
|
|
|
Avant d’explorer la prise de décision, revenons sur les valeurs booléennes vues dans notre leçon précédente. Nommées d’après le mathématicien George Boole, ces valeurs représentent des états binaires – soit `true` soit `false`. Il n’y a pas d’ambiguïté, pas de milieu.
|
|
|
|
|
|
Ces valeurs binaires forment la base de toute logique informatique. Chaque décision prise par votre programme se ramène en fin de compte à une évaluation booléenne.
|
|
|
|
|
|
Créer des variables booléennes est simple :
|
|
|
|
|
|
```javascript
|
|
|
let myTrueBool = true;
|
|
|
let myFalseBool = false;
|
|
|
```
|
|
|
|
|
|
Cela crée deux variables avec des valeurs booléennes explicites.
|
|
|
|
|
|
✅ Les booléens tirent leur nom du mathématicien, philosophe et logicien anglais George Boole (1815–1864).
|
|
|
|
|
|
## Opérateurs de comparaison et booléens
|
|
|
|
|
|
En pratique, vous ne levez rarement les booléens manuellement. Vous les générez plutôt en évaluant des conditions : « Ce nombre est-il plus grand que cet autre ? » ou « Ces valeurs sont-elles égales ? »
|
|
|
|
|
|
Les opérateurs de comparaison permettent ces évaluations. Ils comparent des valeurs et retournent des résultats booléens selon la relation entre les opérandes.
|
|
|
|
|
|
| Symbole | Description | Exemple |
|
|
|
| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
|
|
|
| `<` | **Inférieur à** : compare deux valeurs et renvoie un booléen `true` si la valeur à gauche est inférieure à celle de droite | `5 < 6 // true` |
|
|
|
| `<=` | **Inférieur ou égal à** : compare deux valeurs et renvoie un booléen `true` si la valeur à gauche est inférieure ou égale à celle de droite | `5 <= 6 // true` |
|
|
|
| `>` | **Supérieur à** : compare deux valeurs et renvoie un booléen `true` si la valeur à gauche est supérieure à celle de droite | `5 > 6 // false` |
|
|
|
| `>=` | **Supérieur ou égal à** : compare deux valeurs et renvoie un booléen `true` si la valeur à gauche est supérieure ou égale à celle de droite | `5 >= 6 // false` |
|
|
|
| `===` | **Égalité stricte** : compare deux valeurs et renvoie un booléen `true` si les valeurs à droite et gauche sont égales ET du même type | `5 === 6 // false` |
|
|
|
| `!==` | **Inégalité** : compare deux valeurs et renvoie la valeur booléenne opposée à ce qu’un opérateur d’égalité stricte renverrait | `5 !== 6 // true` |
|
|
|
|
|
|
✅ Vérifiez vos connaissances en écrivant quelques comparaisons dans la console de votre navigateur. Certains résultats vous surprennent-ils ?
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["🔢 Valeurs"] --> B["⚖️ Comparaison"]
|
|
|
B --> C["✅ Résultat Booléen"]
|
|
|
|
|
|
D["5"] --> E["< 6"]
|
|
|
E --> F["vrai"]
|
|
|
|
|
|
G["10"] --> H["=== '10'"]
|
|
|
H --> I["faux"]
|
|
|
|
|
|
J["'bonjour'"] --> K["!== 'monde'"]
|
|
|
K --> L["vrai"]
|
|
|
|
|
|
M["📋 Types d'Opérateurs"] --> M1["Égalité: === !=="]
|
|
|
M --> M2["Relationnel: < > <= >="]
|
|
|
M --> M3["Strict vs Souple"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style C fill:#e8f5e8
|
|
|
style M fill:#fff3e0
|
|
|
```
|
|
|
### 🧠 **Maîtrise de la comparaison : Comprendre la logique booléenne**
|
|
|
|
|
|
**Testez votre compréhension des comparaisons :**
|
|
|
- Pourquoi pensez-vous que `===` (égalité stricte) est généralement préféré à `==` (égalité lâche) ?
|
|
|
- Pouvez-vous prédire ce que retourne `5 === '5'` ? Et `5 == '5'` ?
|
|
|
- Quelle est la différence entre `!==` et `!=` ?
|
|
|
|
|
|
```mermaid
|
|
|
stateDiagram-v2
|
|
|
[*] --> Comparison: Deux valeurs
|
|
|
Comparison --> StrictEqual: === ou !==
|
|
|
Comparison --> Relational: < > <= >=
|
|
|
|
|
|
StrictEqual --> TypeCheck: Vérifier type ET valeur
|
|
|
Relational --> NumberCompare: Convertir en nombres
|
|
|
|
|
|
TypeCheck --> BooleanResult: vrai ou faux
|
|
|
NumberCompare --> BooleanResult
|
|
|
|
|
|
note right of StrictEqual
|
|
|
Approche préférée
|
|
|
Pas de conversion de type
|
|
|
end note
|
|
|
|
|
|
note right of Relational
|
|
|
Utile pour les plages
|
|
|
Comparaisons numériques
|
|
|
end note
|
|
|
```
|
|
|
> **Astuce de pro** : Utilisez toujours `===` et `!==` pour les tests d’égalité, sauf si vous avez besoin spécifiquement de conversions de types. Cela évite des comportements inattendus !
|
|
|
|
|
|
## L’instruction If
|
|
|
|
|
|
L’instruction `if` est comme poser une question dans votre code. « Si cette condition est vraie, alors fais ceci. » C’est probablement l’outil le plus important que vous utiliserez pour prendre des décisions en JavaScript.
|
|
|
|
|
|
Voici comment cela fonctionne :
|
|
|
|
|
|
```javascript
|
|
|
if (condition) {
|
|
|
// La condition est vraie. Le code dans ce bloc s'exécutera.
|
|
|
}
|
|
|
```
|
|
|
|
|
|
La condition se place entre parenthèses, et si elle vaut `true`, JavaScript exécute le code dans les accolades. Si elle vaut `false`, JavaScript saute tout ce bloc.
|
|
|
|
|
|
Vous utiliserez souvent des opérateurs de comparaison pour créer ces conditions. Voyons un exemple concret :
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney = 1000;
|
|
|
let laptopPrice = 800;
|
|
|
|
|
|
if (currentMoney >= laptopPrice) {
|
|
|
// La condition est vraie. Le code dans ce bloc sera exécuté.
|
|
|
console.log("Getting a new laptop!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Puisque `1000 >= 800` évalue à `true`, le code dans le bloc s’exécute et affiche « Getting a new laptop! » dans la console.
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["🚀 Début du programme"] --> B{"💰 currentMoney >= prixOrdinateur?"}
|
|
|
B -->|true| C["🎉 'Acheter un nouvel ordinateur !'"]
|
|
|
B -->|false| D["⏭️ Passer le bloc de code"]
|
|
|
C --> E["📋 Continuer le programme"]
|
|
|
D --> E
|
|
|
|
|
|
F["📊 Structure de l'instruction if"] --> F1["if (condition) {"]
|
|
|
F1 --> F2[" // code à exécuter si vrai"]
|
|
|
F2 --> F3["}"]
|
|
|
|
|
|
style B fill:#fff3e0
|
|
|
style C fill:#e8f5e8
|
|
|
style D fill:#ffebee
|
|
|
style F fill:#e3f2fd
|
|
|
```
|
|
|
## Instruction If..Else
|
|
|
|
|
|
Mais que faire si vous voulez que votre programme fasse quelque chose de différent quand la condition est fausse ? C’est là qu’intervient `else` – c’est comme un plan B.
|
|
|
|
|
|
L’instruction `else` vous permet de dire « si cette condition n’est pas vraie, fais plutôt ceci. »
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney = 500;
|
|
|
let laptopPrice = 800;
|
|
|
|
|
|
if (currentMoney >= laptopPrice) {
|
|
|
// La condition est vraie. Le code dans ce bloc s'exécutera.
|
|
|
console.log("Getting a new laptop!");
|
|
|
} else {
|
|
|
// La condition est fausse. Le code dans ce bloc s'exécutera.
|
|
|
console.log("Can't afford a new laptop, yet!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Ici, comme `500 >= 800` est `false`, JavaScript saute le premier bloc et exécute celui de `else`. Vous verrez dans la console « Can't afford a new laptop, yet! ».
|
|
|
|
|
|
✅ Testez votre compréhension de ce code et du code suivant en l’exécutant dans la console d’un navigateur. Modifiez les valeurs des variables currentMoney et laptopPrice pour changer le message retourné par `console.log()`.
|
|
|
|
|
|
### 🎯 **Test de logique If-Else : chemins conditionnels**
|
|
|
|
|
|
**Évaluez votre compréhension de la logique conditionnelle :**
|
|
|
- Que se passe-t-il si `currentMoney` est exactement égal à `laptopPrice` ?
|
|
|
- Pouvez-vous imaginer un scénario réel où la logique if-else serait utile ?
|
|
|
- Comment pourriez-vous étendre ceci pour gérer plusieurs plages de prix ?
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["🔍 Évaluer la condition"] --> B{"Condition vraie ?"}
|
|
|
B -->|Oui| C["📤 Exécuter le bloc SI"]
|
|
|
B -->|Non| D["📥 Exécuter le bloc SINON"]
|
|
|
|
|
|
C --> E["✅ Un chemin pris"]
|
|
|
D --> E
|
|
|
|
|
|
F["🌐 Exemples réels"] --> F1["Statut de connexion de l'utilisateur"]
|
|
|
F --> F2["Vérification de l'âge"]
|
|
|
F --> F3["Validation du formulaire"]
|
|
|
F --> F4["Changements de l'état du jeu"]
|
|
|
|
|
|
style B fill:#fff3e0
|
|
|
style C fill:#e8f5e8
|
|
|
style D fill:#e3f2fd
|
|
|
style F fill:#f3e5f5
|
|
|
```
|
|
|
> **Insight clé** : If-else garantit qu’un seul chemin est pris. Cela garantit que votre programme a toujours une réponse à toute condition !
|
|
|
|
|
|
## L’instruction Switch
|
|
|
|
|
|
Parfois, vous devez comparer une valeur à plusieurs options. Bien que vous puissiez enchaîner plusieurs instructions `if..else`, cette méthode devient rapidement lourde. L’instruction `switch` offre une structure plus propre pour gérer plusieurs valeurs discrètes.
|
|
|
|
|
|
Le concept est semblable aux systèmes de commutateurs mécaniques utilisés dans les premières centrales téléphoniques – une valeur d’entrée détermine le chemin spécifique que l’exécution doit suivre.
|
|
|
|
|
|
```javascript
|
|
|
switch (expression) {
|
|
|
case x:
|
|
|
// bloc de code
|
|
|
break;
|
|
|
case y:
|
|
|
// bloc de code
|
|
|
break;
|
|
|
default:
|
|
|
// bloc de code
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Voici comment elle est structurée :
|
|
|
- JavaScript évalue l’expression une fois
|
|
|
- Il regarde chaque `case` pour trouver une correspondance
|
|
|
- Lorsqu’il en trouve une, il exécute ce bloc de code
|
|
|
- Le `break` ordonne à JavaScript d’arrêter et de sortir du switch
|
|
|
- Si aucune correspondance n’est trouvée, il exécute le bloc `default` (s’il y en a un)
|
|
|
|
|
|
```javascript
|
|
|
// Programme utilisant une instruction switch pour le jour de la semaine
|
|
|
let dayNumber = 2;
|
|
|
let dayName;
|
|
|
|
|
|
switch (dayNumber) {
|
|
|
case 1:
|
|
|
dayName = "Monday";
|
|
|
break;
|
|
|
case 2:
|
|
|
dayName = "Tuesday";
|
|
|
break;
|
|
|
case 3:
|
|
|
dayName = "Wednesday";
|
|
|
break;
|
|
|
default:
|
|
|
dayName = "Unknown day";
|
|
|
break;
|
|
|
}
|
|
|
console.log(`Today is ${dayName}`);
|
|
|
```
|
|
|
|
|
|
Dans cet exemple, JavaScript voit que `dayNumber` vaut `2`, trouve le `case 2` correspondant, assigne « Tuesday » à `dayName`, puis sort du switch. Le résultat ? « Today is Tuesday » est affiché dans la console.
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["📥 switch(expression)"] --> B["🔍 Évaluer une fois"]
|
|
|
B --> C{"Correspond au cas 1 ?"}
|
|
|
C -->|Oui| D["📋 Exécuter le cas 1"]
|
|
|
C -->|Non| E{"Correspond au cas 2 ?"}
|
|
|
E -->|Oui| F["📋 Exécuter le cas 2"]
|
|
|
E -->|Non| G{"Correspond au cas 3 ?"}
|
|
|
G -->|Oui| H["📋 Exécuter le cas 3"]
|
|
|
G -->|Non| I["📋 Exécuter par défaut"]
|
|
|
|
|
|
D --> J["🛑 break"]
|
|
|
F --> K["🛑 break"]
|
|
|
H --> L["🛑 break"]
|
|
|
|
|
|
J --> M["✅ Sortir du switch"]
|
|
|
K --> M
|
|
|
L --> M
|
|
|
I --> M
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style B fill:#fff3e0
|
|
|
style M fill:#e8f5e8
|
|
|
```
|
|
|
✅ Testez votre compréhension de ce code et du code suivant en l’exécutant dans la console du navigateur. Modifiez la valeur de la variable a pour changer la sortie du `console.log()`.
|
|
|
|
|
|
### 🔄 **Maîtrise de l'instruction Switch : multiples options**
|
|
|
|
|
|
**Testez votre compréhension du switch :**
|
|
|
- Que se passe-t-il si vous oubliez un `break` ?
|
|
|
- Quand utiliseriez-vous `switch` plutôt que plusieurs `if-else` ?
|
|
|
- Pourquoi le cas `default` est-il utile même si vous pensez avoir couvert toutes les possibilités ?
|
|
|
|
|
|
```mermaid
|
|
|
pie title "Quand utiliser chaque structure de décision"
|
|
|
"If-else simple" : 40
|
|
|
"Chaînes if-else complexes" : 25
|
|
|
"Instructions switch" : 20
|
|
|
"Opérateurs ternaires" : 15
|
|
|
```
|
|
|
> **Bonne pratique** : Utilisez `switch` quand vous comparez une variable à plusieurs valeurs spécifiques. Utilisez `if-else` pour des plages ou des conditions complexes !
|
|
|
|
|
|
## Opérateurs logiques et booléens
|
|
|
|
|
|
Les décisions complexes nécessitent souvent d’évaluer plusieurs conditions en même temps. Tout comme l’algèbre booléenne permet aux mathématiciens de combiner des expressions logiques, la programmation propose des opérateurs logiques pour connecter plusieurs conditions booléennes.
|
|
|
|
|
|
Ces opérateurs permettent une logique conditionnelle sophistiquée en combinant des évaluations simples vrai/faux.
|
|
|
|
|
|
| Symbole | Description | Exemple |
|
|
|
| ------- | ------------------------------------------------------------------------------------------------| ----------------------------------------------------------------------- |
|
|
|
| `&&` | **ET logique** : compare deux expressions booléennes. Renvoie true **seulement** si les deux côtés sont vrais | `(5 > 3) && (5 < 10) // Les deux côtés sont vrais. Renvoie true` |
|
|
|
| `\|\|` | **OU logique** : compare deux expressions booléennes. Renvoie true si au moins un côté est vrai | `(5 > 10) \|\| (5 < 10) // Un côté est faux, l’autre est vrai. Renvoie true` |
|
|
|
| `!` | **NON logique** : renvoie la valeur opposée d’une expression booléenne | `!(5 > 10) // 5 n’est pas supérieur à 10, donc "!" en fait true` |
|
|
|
|
|
|
Ces opérateurs vous permettent de combiner les conditions de façon utile :
|
|
|
- ET (`&&`) signifie que les deux conditions doivent être vraies
|
|
|
- OU (`||`) signifie qu’au moins une condition doit être vraie
|
|
|
- NON (`!`) inverse vrai en faux (et vice versa)
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["🔗 Opérateurs Logiques"] --> B["&& ET"]
|
|
|
A --> C["|| OU"]
|
|
|
A --> D["! NON"]
|
|
|
|
|
|
B --> B1["Les deux doivent être vrais"]
|
|
|
B --> B2["vrai && vrai = vrai"]
|
|
|
B --> B3["vrai && faux = faux"]
|
|
|
|
|
|
C --> C1["Au moins un vrai"]
|
|
|
C --> C2["vrai || faux = vrai"]
|
|
|
C --> C3["faux || faux = faux"]
|
|
|
|
|
|
D --> D1["Inverse la valeur"]
|
|
|
D --> D2["!vrai = faux"]
|
|
|
D --> D3["!faux = vrai"]
|
|
|
|
|
|
E["🌍 Exemples Réels"] --> E1["Âge >= 18 && aPermis"]
|
|
|
E --> E2["estWeekend || estFérié"]
|
|
|
E --> E3["!estConnecté"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style B fill:#e8f5e8
|
|
|
style C fill:#fff3e0
|
|
|
style D fill:#f3e5f5
|
|
|
style E fill:#e0f2f1
|
|
|
```
|
|
|
## Conditions et décisions avec opérateurs logiques
|
|
|
|
|
|
Voyons ces opérateurs logiques en action avec un exemple plus réaliste :
|
|
|
|
|
|
```javascript
|
|
|
let currentMoney = 600;
|
|
|
let laptopPrice = 800;
|
|
|
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Prix de l'ordinateur portable avec 20 pour cent de réduction
|
|
|
|
|
|
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
|
|
|
// La condition est vraie. Le code dans ce bloc s'exécutera.
|
|
|
console.log("Getting a new laptop!");
|
|
|
} else {
|
|
|
// La condition est fausse. Le code dans ce bloc s'exécutera.
|
|
|
console.log("Can't afford a new laptop, yet!");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Dans cet exemple : nous calculons un prix avec une remise de 20 % (640), puis évaluons si nos fonds disponibles couvrent soit le prix plein OU le prix remisé. Comme 600 satisfait au seuil du prix avec remise de 640, la condition évalue à vrai.
|
|
|
|
|
|
### 🧮 **Test des opérateurs logiques : combiner les conditions**
|
|
|
|
|
|
**Testez votre compréhension des opérateurs logiques :**
|
|
|
- Dans l’expression `A && B`, que se passe-t-il si A est faux ? Est-ce que B est même évalué ?
|
|
|
- Pouvez-vous imaginer une situation où il faudrait les trois opérateurs (&&, ||, !) ensemble ?
|
|
|
- Quelle est la différence entre `!user.isActive` et `user.isActive !== true` ?
|
|
|
|
|
|
```mermaid
|
|
|
stateDiagram-v2
|
|
|
[*] --> EvaluateA: A && B
|
|
|
EvaluateA --> CheckB: A est vrai
|
|
|
EvaluateA --> ReturnFalse: A est faux
|
|
|
CheckB --> ReturnTrue: B est vrai
|
|
|
CheckB --> ReturnFalse: B est faux
|
|
|
|
|
|
[*] --> EvaluateC: A || B
|
|
|
EvaluateC --> ReturnTrue: A est vrai
|
|
|
EvaluateC --> CheckD: A est faux
|
|
|
CheckD --> ReturnTrue: B est vrai
|
|
|
CheckD --> ReturnFalse: B est faux
|
|
|
|
|
|
note right of EvaluateA
|
|
|
Évaluation à court-circuit:
|
|
|
Si A est faux, B n'est jamais vérifié
|
|
|
end note
|
|
|
```
|
|
|
> **Astuce performance** : JavaScript utilise l'« évaluation en court-circuit » - dans `A && B`, si A est faux, B n’est même pas évalué. Profitez-en !
|
|
|
|
|
|
### Opérateur de négation
|
|
|
|
|
|
Parfois, il est plus facile de penser à quand quelque chose N’EST PAS vrai. Plutôt que demander « L’utilisateur est-il connecté ? », vous pourriez vouloir demander « L’utilisateur n’est-il PAS connecté ? ». L’opérateur point d’exclamation (`!`) inverse la logique pour vous.
|
|
|
|
|
|
```javascript
|
|
|
if (!condition) {
|
|
|
// s'exécute si la condition est fausse
|
|
|
} else {
|
|
|
// s'exécute si la condition est vraie
|
|
|
}
|
|
|
```
|
|
|
|
|
|
L’opérateur `!` est comme dire « l’opposé de... » – si quelque chose est `true`, `!` le rend `false`, et inversement.
|
|
|
|
|
|
### Expressions ternaires
|
|
|
|
|
|
Pour les affectations conditionnelles simples, JavaScript propose l’**opérateur ternaire**. Cette syntaxe concise vous permet d’écrire une expression conditionnelle en une seule ligne, pratique quand il faut assigner une valeur parmi deux selon une condition.
|
|
|
|
|
|
```javascript
|
|
|
let variable = condition ? returnThisIfTrue : returnThisIfFalse;
|
|
|
```
|
|
|
|
|
|
Cela se lit comme une question : « Cette condition est-elle vraie ? Si oui, utilise cette valeur. Sinon, utilise cette autre valeur. »
|
|
|
|
|
|
Voici un exemple plus concret :
|
|
|
|
|
|
```javascript
|
|
|
let firstNumber = 20;
|
|
|
let secondNumber = 10;
|
|
|
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
|
|
|
```
|
|
|
|
|
|
✅ Prenez un moment pour lire ce code plusieurs fois. Comprenez-vous le fonctionnement de ces opérateurs ?
|
|
|
|
|
|
Cette ligne signifie : « Est-ce que `firstNumber` est supérieur à `secondNumber` ? Si oui, mets `firstNumber` dans `biggestNumber`. Sinon, mets `secondNumber` dans `biggestNumber`. »
|
|
|
|
|
|
L’opérateur ternaire est juste un raccourci pour écrire cette structure traditionnelle if..else :
|
|
|
|
|
|
```javascript
|
|
|
let biggestNumber;
|
|
|
if (firstNumber > secondNumber) {
|
|
|
biggestNumber = firstNumber;
|
|
|
} else {
|
|
|
biggestNumber = secondNumber;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
Les deux méthodes produisent le même résultat. L’opérateur ternaire offre de la concision, tandis que la structure if-else traditionnelle peut être plus lisible pour des conditions complexes.
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["🤔 Opérateur ternaire"] --> B["condition ?"]
|
|
|
B --> C["valeurSiVrai :"]
|
|
|
C --> D["valeurSiFaux"]
|
|
|
|
|
|
E["📝 If-Else traditionnel"] --> F["if (condition) {"]
|
|
|
F --> G[" return valeurSiVrai"]
|
|
|
G --> H["} else {"]
|
|
|
H --> I[" return valeurSiFaux"]
|
|
|
I --> J["}"]
|
|
|
|
|
|
K["⚡ Quand utiliser"] --> K1["Affectations simples"]
|
|
|
K --> K2["Conditions courtes"]
|
|
|
K --> K3["Décisions inline"]
|
|
|
K --> K4["Instructions return"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style E fill:#fff3e0
|
|
|
style K fill:#e8f5e8
|
|
|
```
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 Challenge
|
|
|
|
|
|
Créez un programme écrit d’abord avec des opérateurs logiques, puis réécrivez-le en utilisant une expression ternaire. Quelle syntaxe préférez-vous ?
|
|
|
|
|
|
---
|
|
|
|
|
|
## Défi GitHub Copilot Agent 🚀
|
|
|
|
|
|
Utilisez le mode Agent pour relever le défi suivant :
|
|
|
|
|
|
**Description :** Créez un calculateur de notes complet qui démontre plusieurs concepts de prise de décision vus dans cette leçon, incluant les instructions if-else, switch, les opérateurs logiques et les expressions ternaires.
|
|
|
|
|
|
**Consigne :** Écrivez un programme JavaScript qui prend la note numérique d’un étudiant (0-100) et détermine sa mention selon les critères suivants :
|
|
|
- A : 90-100
|
|
|
- B : 80-89
|
|
|
- C : 70-79
|
|
|
- D : 60-69
|
|
|
- F : en-dessous de 60
|
|
|
|
|
|
Exigences :
|
|
|
1. Utilisez une instruction if-else pour déterminer la mention
|
|
|
2. Utilisez des opérateurs logiques pour vérifier si l’étudiant réussit (note >= 60) ET a des mentions (note >= 90)
|
|
|
3. Utilisez une instruction switch pour fournir des retours spécifiques pour chaque note en lettre
|
|
|
4. Utilisez un opérateur ternaire pour déterminer si l’étudiant est éligible au cours suivant (note >= 70)
|
|
|
5. Incluez une validation d’entrée pour garantir que le score est entre 0 et 100
|
|
|
|
|
|
Testez votre programme avec diverses notes incluant des cas limites comme 59, 60, 89, 90, ainsi que des entrées invalides.
|
|
|
|
|
|
En savoir plus sur le [mode agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ici.
|
|
|
|
|
|
|
|
|
## Quiz post-conférence
|
|
|
|
|
|
[Quiz post-conférence](https://ff-quizzes.netlify.app/web/quiz/12)
|
|
|
|
|
|
## Revue & Auto-apprentissage
|
|
|
|
|
|
Lisez davantage sur les nombreux opérateurs disponibles pour l’utilisateur [sur MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
|
|
|
|
|
|
Parcourez le magnifique [répertoire des opérateurs](https://joshwcomeau.com/operator-lookup/) de Josh Comeau !
|
|
|
|
|
|
## Devoir
|
|
|
|
|
|
[Opérateurs](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🧠 **Résumé de votre boîte à outils de prise de décision**
|
|
|
|
|
|
```mermaid
|
|
|
graph TD
|
|
|
A["🎯 Décisions JavaScript"] --> B["🔍 Logique booléenne"]
|
|
|
A --> C["📊 Instructions conditionnelles"]
|
|
|
A --> D["🔗 Opérateurs logiques"]
|
|
|
A --> E["⚡ Modèles avancés"]
|
|
|
|
|
|
B --> B1["valeurs true/false"]
|
|
|
B --> B2["Opérateurs de comparaison"]
|
|
|
B --> B3["Concepts de vérité"]
|
|
|
|
|
|
C --> C1["instructions if"]
|
|
|
C --> C2["chaînes if-else"]
|
|
|
C --> C3["instructions switch"]
|
|
|
|
|
|
D --> D1["&& (ET)"]
|
|
|
D --> D2["|| (OU)"]
|
|
|
D --> D3["! (NON)"]
|
|
|
|
|
|
E --> E1["Opérateur ternaire"]
|
|
|
E --> E2["Évaluation en court-circuit"]
|
|
|
E --> E3["Conditions complexes"]
|
|
|
|
|
|
F["💡 Principes clés"] --> F1["Conditions claires et lisibles"]
|
|
|
F --> F2["Style de comparaison cohérent"]
|
|
|
F --> F3["Priorité correcte des opérateurs"]
|
|
|
F --> F4["Ordre d'évaluation efficace"]
|
|
|
|
|
|
style A fill:#e3f2fd
|
|
|
style B fill:#e8f5e8
|
|
|
style C fill:#fff3e0
|
|
|
style D fill:#f3e5f5
|
|
|
style E fill:#e0f2f1
|
|
|
style F fill:#fce4ec
|
|
|
```
|
|
|
---
|
|
|
|
|
|
## 🚀 Votre calendrier de maîtrise de la prise de décision en JavaScript
|
|
|
|
|
|
### ⚡ **Ce que vous pouvez faire dans les 5 prochaines minutes**
|
|
|
- [ ] Pratiquer les opérateurs de comparaison dans la console de votre navigateur
|
|
|
- [ ] Écrire une simple instruction if-else qui vérifie votre âge
|
|
|
- [ ] Essayer le défi : réécrire un if-else avec un opérateur ternaire
|
|
|
- [ ] Tester ce qui se passe avec différentes valeurs "truthy" et "falsy"
|
|
|
|
|
|
### 🎯 **Ce que vous pouvez accomplir cette heure-ci**
|
|
|
- [ ] Compléter le quiz post-leçon et revoir les concepts confus
|
|
|
- [ ] Construire le calculateur de notes complet issu du défi GitHub Copilot
|
|
|
- [ ] Créer un arbre décisionnel simple pour un scénario réel (comme choisir quoi porter)
|
|
|
- [ ] Pratiquer la combinaison de plusieurs conditions avec des opérateurs logiques
|
|
|
- [ ] Expérimenter avec des instructions switch pour différents cas d’utilisation
|
|
|
|
|
|
### 📅 **Maîtrise logique sur une semaine**
|
|
|
- [ ] Compléter le devoir sur les opérateurs avec des exemples créatifs
|
|
|
- [ ] Construire une mini-application de quiz utilisant diverses structures conditionnelles
|
|
|
- [ ] Créer un validateur de formulaire qui vérifie plusieurs conditions d’entrée
|
|
|
- [ ] Pratiquer les exercices de [répertoire des opérateurs](https://joshwcomeau.com/operator-lookup/) de Josh Comeau
|
|
|
- [ ] Refactoriser du code existant pour utiliser des structures conditionnelles plus appropriées
|
|
|
- [ ] Étudier l’évaluation à court-circuit et les implications sur les performances
|
|
|
|
|
|
### 🌟 **Transformation sur un mois**
|
|
|
- [ ] Maîtriser les conditions imbriquées complexes tout en maintenant la lisibilité du code
|
|
|
- [ ] Construire une application avec une logique décisionnelle sophistiquée
|
|
|
- [ ] Contribuer à l’open source en améliorant la logique conditionnelle dans des projets existants
|
|
|
- [ ] Enseigner à quelqu’un d’autre les différentes structures conditionnelles et leur usage approprié
|
|
|
- [ ] Explorer les approches de programmation fonctionnelle appliquées à la logique conditionnelle
|
|
|
- [ ] Créer un guide de référence personnel des meilleures pratiques conditionnelles
|
|
|
|
|
|
### 🏆 **Vérification finale du champion de la prise de décision**
|
|
|
|
|
|
**Célébrez votre maîtrise de la pensée logique :**
|
|
|
- Quelle est la logique décisionnelle la plus complexe que vous ayez réussie à implémenter ?
|
|
|
- Quelle structure conditionnelle vous paraît la plus naturelle et pourquoi ?
|
|
|
- Comment l’apprentissage des opérateurs logiques a-t-il changé votre approche de résolution de problèmes ?
|
|
|
- Quelle application réelle bénéficierait d’une logique décisionnelle sophistiquée ?
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title Votre Évolution de la Pensée Logique
|
|
|
section Aujourd'hui
|
|
|
Confusion Booléenne: 3: You
|
|
|
Compréhension If-Else: 4: You
|
|
|
Reconnaissance des Opérateurs: 5: You
|
|
|
section Cette Semaine
|
|
|
Conditions Complexes: 4: You
|
|
|
Maîtrise du Switch: 5: You
|
|
|
Combinaisons Logiques: 5: You
|
|
|
section Le Mois Prochain
|
|
|
Modèles Avancés: 5: You
|
|
|
Sensibilisation à la Performance: 5: You
|
|
|
Enseigner aux Autres: 5: You
|
|
|
```
|
|
|
> 🧠 **Vous avez maîtrisé l’art de la prise de décision numérique !** Chaque application interactive repose sur la logique conditionnelle pour répondre intelligemment aux actions des utilisateurs et aux conditions changeantes. Vous comprenez maintenant comment faire penser vos programmes, évaluer et choisir des réponses appropriées. Cette base logique alimentera chaque application dynamique que vous développerez ! 🎉
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**Clause de non-responsabilité** :
|
|
|
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source officielle. Pour les informations critiques, il est recommandé de faire appel à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou de mauvaises interprétations résultant de l’utilisation de cette traduction.
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
