Définit le bord de la marge de fond pour une boîte placée
Dans ce tutoriel, vous apprendrez à écrire le code qui permet de réaliser des taches conditionnelles en utilisant les instructions de conditions if...else...else en JavaScript
Condition if Utilisée pour exécuter une instruction seulement si une condition est réalisée.
Une instruction conditionnelle est un jeu de commandes qui s'exécute si une condition indiquée est réalisée (vrai).
Très souvent, lorsque vous écrivez du code, vous voulez effectuer des actions différentes pour différentes conditions. Pour ceci vous pouvez utiliser des instructions conditionnelles dans votre code.
En JavaScript, plusieurs instructions conditionnelles peuvent être utilisées :
La condition if est utilisée dans pour exécuter certaines instructions si une condition logique est vraie; (true).
Syntax :
if (condition)
{
code à exécuter si la condition est true (vrai)
}
Note : if écrit avec des les lettres minuscules. Si IF en majuscule est utilisée des erreurs sont générées par JavaScript !
Exemple: L'exemple suivant affichera " C'est le matin " si l'heure actuel est inferieur à 12 si non rien n'est affiché
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La condition if() dans JavaScript</title>
</head>
<body>
<script>
var d=new Date();
var time=d.getHours();
if (time<12)
{
document.write("<b>C’est le matin</b>");
}
</script>
</body>
</html>
Vous étudiez les dates dans des chapitres à venir de ce cours.
Note : Remarquez que le navigateur écrira « C’est le matin » seulement si l’heure actuelle est inférieur à 12 heure dans le cas contraire rien ne se passe.
Vous pouvez améliorer les capacités de prise de décision de votre programme JavaScript en fournissant un choix alternatif grâce à l'ajout d'une instruction else (si non) à l'instruction if.
La condition if....else Utilisée pour exécuter une instruction si une condition est true (vrai) et une autre instruction si la condition est false (fausse).
Syntax :
if (condition)
{
code à exécuter si la condition est réalisée c'est-à-dire renvoie true
}
else
{
code à exécuter si la condition n’est pas réalisée renvoie false
}
Example : Reprenons l'exemple précédent en y ajoutant l’instruction else
Exemple : Copier le code
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time < 12)
{
document.write("C’est le matin!");
}
else
{
document.write("Ce n’est pas le matin!");
}
</script>
Cette fois le code renvoie « C’est le matin » si l’heur est inférieur à 12 si non il renvoie « Ce n’est pas le matin »
La condition If...else if...else utilisée pour sélectionner l'un des nombreux blocs de code à exécuter
Syntax :
if (condition1)
{
code à exécuter si la condition1 est true
}
else if (condition2)
{
code à exécuter si la conditio21 est true
}
else
{
code à exécuter si aucune les condition1 et 2 ne sont pas réalisées
}
Exemple :
Exemple : Copier le code
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time >=0 && time<=12)
{
document.write("<b>C’est le matin</b>");
}
else if (time>12 && time<18)
{
document.write("<b>C’est l’après midi</b>");
}
else
{
document.write("<b>C'est le soir</b>");
}
</script>
D'autre part, il est autorisé d'utiliser l'imbrication de l'instruction if autant de fois qu'il est nécessaire dans l'énumération des conditions et instructions associées.
C'est-à-dire qu’on peut imbriquer des if les une dans les autres autant de fois qu’il est nécessaire.
Exemple :
Exemple : Copier le code
if (condition1)
{
if (condition11)
{
code à exécuter ;
}
}
else if (condition2)
{
if (condition21)
{
code à exécuter ;
} else {
code à exécuter ;
}
}
else
{
code à exécuter ;
}
</script>
L'opérateur ternaire fournit une façon abrégée d'écrire les instructions if...else. L'opérateur ternaire est représenté par le symbole du point d'interrogation ( ?) et il prend trois opérandes : une condition à vérifier, un résultat pour vrai et un résultat pour faux.
Sa syntaxe de base est la suivante
var result = (condition) ? valeur1 : valeur2
Si la condition est évaluée à true, la valeur1 sera retournée, sinon la valeur2 sera retournée.
Pour comprendre le fonctionnement de cet opérateur, examinez les exemples suivants :
Code
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>L'opérateur ternaire fournit une façon abrégée d'écrire les instructions if...else</title>
</head>
<body>
<script>
var userType="Vous êtes un " ;
var age = 16 ;
if(age < 18) {
userType +='enfant' ;
} else {
userType +='adulte ' ;
}
document.write(userType) ; // Affiche Adulte
</script>
</body>
</html>
En utilisant l'opérateur ternaire, le même code pourrait être écrit de manière plus compacte :
Code
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>L'opérateur ternaire fournit une façon abrégée d'écrire les instructions if...else</title>
</head>
<body>
<script>
var age=16;
var userType="Vous êtes un " ;
var userType = age < 18 ? userType+'enfant' : userType+'adulte';
document.write(userType) ; // Affiche Adulte
</script>
</body>
</html>
Conseil : Le code écrit à l'aide de l'opérateur ternaire peut parfois être difficile à lire. Cependant, il constitue un excellent moyen d'écrire des instructions if-else compactes.
|
Cours precedent: |
Sommaire : |
Cours suivant: |