Les instructions conditionnelles sont utilisées pour effectuer différentes actions en fonction de différentes conditions.
Très souvent, lorsque vous écrivez du code, vous souhaitez effectuer différentes actions pour différentes décisions.
Vous pouvez utiliser des instructions conditionnelles dans votre code pour ce faire.
En JavaScript, nous avons les instructions conditionnelles suivantes :
Utilisez if
pour spécifier un bloc de code à exécuter, si une condition spécifiée est vraie
Utilisez else
pour spécifier un bloc de code à exécuter, si la même condition est FAUX
Utilisez else if
pour spécifier une nouvelle condition à tester, si la première condition est fausse
Utilisez switch
pour spécifier de nombreux blocs de code alternatifs à exécuter
L'instruction switch
est décrite dans le chapitre suivant.
if
Utilisez l'instruction if
pour spécifier un bloc de code JavaScript à être exécuté si une condition est vraie.
if (condition) {
// block of code to be executed if the condition is true
}
Notez que if
est en lettres minuscules. Les lettres majuscules (If ou IF) généreront une erreur JavaScript.
Faites un message d'accueil « Bonne journée » si l'heure est inférieure à 18h00 :
if (hour < 18) {
greeting = "Good day";
}
Le résultat du message d'accueil sera :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if</h2>
<p>Display "Good day!" if the hour is less than 18:00:</p>
<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}
</script>
</body>
</html>
else
Utilisez l'instruction else
pour spécifier un bloc de code à exécuté si la condition est FAUX.
if (condition) {
// block of code to be executed if the condition is true
}
else {
// block of code to be executed if the condition is false
}
Si l'heure est inférieure à 18 heures, créez un "Bonne journée" salutation, sinon "Bonsoir" :
if (hour < 18) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Le résultat du message d'accueil sera :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p>A time-based greeting:</p>
<p id="demo"></p>
<script>
const hour = new Date().getHours();
let greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
else if
Utilisez l'instruction else if
pour spécifier une nouvelle condition si la première condition est fausse.
if (condition1) {
// block of code to be executed if condition1 is true
}
else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
S'il est moins de 10h00, créez un "Bon matin" salutation, sinon, mais qu'il est moins de 20h00, créez un message d'accueil "Bonne journée", sinon un "Bonsoir" :
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
Le résultat du message d'accueil sera :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p>A time-based greeting:</p>
<p id="demo"></p>
<script>
const time = new Date().getHours();
let greeting;
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
Lien aléatoire
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p id="demo"></p>
<script>
let text;
if (Math.random() < 0.5) {
text = "<a href='https://w3schools.com'>Visit W3Schools</a>";
} else {
text = "<a href='https://wwf.org'>Visit WWF</a>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>