oujood.com

Le test conditionnel if …else de javascript

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.

chercher |

La condition if …else de javascript

Une instruction conditionnelle est un jeu de commandes qui s'exécute si une condition indiquée est réalisée (vrai).

Instructions conditionnelles

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 :

  • Condition if – Utilisée pour exécuter une instruction seulement si une condition est réalisée.
  • 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).
  • Condition if...elseif....else - utilisé pour sélectionner l'un des nombreux blocs de code à exécuter
  • Condition switch - utilisez cette commande pour sélectionner l'un des nombreux blocs de code à exécuter

La condition If de javascript

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.

Condition If...else

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 »

Condition If...elseif...else

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

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.




Par carabde 30 mars 2014 - mis à jour le 29 Janvier 2022



Voir aussi nos tutoriel :

Balise saut de ligne

Définit un saut de ligne simple

Base de données MySQL UPDATE

Base de données MySQL UPDATE

glisser et déplacer

Glisser et Déplacer