Utiliser l'opérateur conditionnel en JavaScript

Introduction

Dans ce laboratoire, les étudiants exploreront l'utilisation de l'opérateur conditionnel en JavaScript à travers un exemple pratique. Le laboratoire guide les apprenants dans la création d'un fichier HTML, la définition de variables de comparaison, la mise en œuvre de la logique de l'opérateur conditionnel et l'affichage des résultats à l'aide de document.write.

Les participants commenceront par configurer une structure HTML de base avec une balise de script intégrée, puis définiront des variables telles que l'âge, le statut d'étudiant et le pays. Ils apprendront à utiliser l'opérateur conditionnel pour effectuer des évaluations conditionnelles concises, en comprenant sa syntaxe et son application pratique dans la réalisation d'assignations basées sur des décisions rapides dans le code JavaScript.

Créer un fichier HTML pour l'exemple d'opérateur conditionnel

Dans cette étape, vous allez créer un fichier HTML pour démontrer l'utilisation de l'opérateur conditionnel en JavaScript. Les fichiers HTML offrent un excellent environnement pour écrire et tester du code JavaScript.

Ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier nommé conditional-operator.html en cliquant avec le bouton droit dans l'explorateur de fichiers et en sélectionnant "Nouveau fichier".

Voici la structure HTML de base que vous utiliserez pour explorer l'opérateur conditionnel :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Exemple d'opérateur conditionnel</title>
  </head>
  <body>
    <h1>Démonstration de l'opérateur conditionnel JavaScript</h1>

    <script>
      // Le code JavaScript sera ajouté ici dans les étapes suivantes
    </script>
  </body>
</html>

Ce fichier HTML fournit une structure simple avec une balise de script où vous écrirez du code JavaScript pour démontrer l'opérateur conditionnel. La balise <script> vous permet d'incorporer directement du JavaScript dans le document HTML.

Sortie d'exemple lorsque vous ouvrez ce fichier dans un navigateur web :

Démonstration de l'opérateur conditionnel JavaScript

Assurez-vous d'enregistrer le fichier dans le répertoire ~/projet. Dans les étapes suivantes, vous ajouterez du code JavaScript pour explorer la fonctionnalité de l'opérateur conditionnel.

Définir des variables pour la comparaison

Dans cette étape, vous allez apprendre à définir des variables pour la comparaison en utilisant l'opérateur conditionnel. Ouvrez le fichier conditional-operator.html que vous avez créé dans l'étape précédente et ajoutez le code JavaScript suivant à l'intérieur de la balise <script> :

<script>
  // Définir des variables pour la comparaison
  let age = 20;
  let isStudent = true;
  let country = "USA";
</script>

Analysons les variables :

age est un nombre représentant l'âge d'une personne
isStudent est une valeur booléenne indiquant le statut d'étudiant
country est une chaîne de caractères représentant le pays de la personne

Ces variables seront utilisées pour démontrer comment l'opérateur conditionnel fonctionne pour effectuer des comparaisons et des décisions. Dans les étapes suivantes, vous utiliserez ces variables pour créer une logique conditionnelle.

Sortie d'exemple des valeurs des variables :

âge : 20
isStudent : vrai
pays : "USA"

Assurez-vous d'enregistrer le fichier après avoir ajouté ces variables. Les variables sont maintenant prêtes à être utilisées avec l'opérateur conditionnel dans les étapes suivantes.

Mettre en œuvre la logique de l'opérateur conditionnel

Dans cette étape, vous allez apprendre à utiliser l'opérateur conditionnel (ternaire) pour implémenter une logique simple basée sur les variables que vous avez définies précédemment. L'opérateur conditionnel offre un moyen concis d'écrire des instructions if-else sur une seule ligne.

Mettez à jour la section <script> de votre fichier conditional-operator.html avec le code suivant :

<script>
  // Variables définies précédemment
  let age = 20;
  let isStudent = true;
  let country = "USA";

  // Exemples d'opérateur conditionnel
  let canVote = age >= 18 ? "Éligible à voter" : "Non éligible à voter";

  let studentStatus = isStudent
    ? "Remise étudiante applicable"
    : "Aucune remise étudiante";

  let travelMessage =
    country === "USA" ? "Voyage intérieur" : "Voyage international";
</script>

Analysons la syntaxe de l'opérateur conditionnel :

condition? valeur_si_vraie : valeur_si_fausse
Le premier exemple vérifie si la personne a 18 ans ou plus
Le second exemple vérifie le statut d'étudiant
Le troisième exemple vérifie le pays pour le type de voyage

Sortie d'exemple des résultats de l'opérateur conditionnel :

canVote: "Éligible à voter"
studentStatus: "Remise étudiante applicable"
travelMessage: "Voyage intérieur"

L'opérateur conditionnel offre un moyen compact de prendre des décisions et d'assigner des valeurs en fonction de conditions. C'est une alternative plus concise aux instructions if-else traditionnelles.

Afficher le résultat à l'aide de document.write

Dans cette étape, vous allez apprendre à afficher les résultats de votre logique d'opérateur conditionnel à l'aide de document.write(). Cette méthode vous permet d'afficher du texte directement dans le document HTML.

Mettez à jour la section <script> de votre fichier conditional-operator.html avec le code suivant :

<script>
  // Variables et opérateurs conditionnels définis précédemment
  let age = 20;
  let isStudent = true;
  let country = "USA";

  let canVote = age >= 18 ? "Éligible à voter" : "Non éligible à voter";
  let studentStatus = isStudent
    ? "Remise étudiante applicable"
    : "Aucune remise étudiante";
  let travelMessage =
    country === "USA" ? "Voyage intérieur" : "Voyage international";

  // Afficher les résultats à l'aide de document.write()
  document.write("<h2>Résultats de l'opérateur conditionnel</h2>");
  document.write("<p>Statut de vote : " + canVote + "</p>");
  document.write("<p>Remise étudiante : " + studentStatus + "</p>");
  document.write("<p>Type de voyage : " + travelMessage + "</p>");
</script>

Lorsque vous ouvrez ce fichier HTML dans un navigateur web, vous verrez les résultats affichés sur la page. La méthode document.write() vous permet d'afficher directement du contenu HTML.

Sortie d'exemple dans le navigateur :

Résultats de l'opérateur conditionnel
Statut de vote : Éligible à voter
Remise étudiante : Remise étudiante applicable
Type de voyage : Voyage intérieur

Note : Bien que document.write() soit simple à utiliser, il est généralement recommandé d'utiliser des méthodes plus modernes telles que innerHTML ou textContent dans les applications du monde réel.

Comprendre la syntaxe de l'opérateur conditionnel

Dans cette étape, vous approfondirez la syntaxe et l'utilisation de l'opérateur conditionnel (ternaire) en JavaScript. Mettez à jour la section <script> de votre fichier conditional-operator.html avec l'exemple complet suivant :

<script>
  // Syntaxe de base de l'opérateur conditionnel
  // condition? expression_si_vraie : expression_si_fausse

  // Exemple 1 : Comparaison simple
  let age = 20;
  let canDrive = age >= 16 ? "Peut conduire" : "Ne peut pas conduire";

  // Exemple 2 : Opérateur conditionnel imbriqué
  let score = 75;
  let grade =
    score >= 90
      ? "A"
      : score >= 80
        ? "B"
        : score >= 70
          ? "C"
          : score >= 60
            ? "D"
            : "F";

  // Exemple 3 : Opérateur conditionnel avec des appels de fonction
  function isEven(num) {
    return num % 2 === 0;
  }
  let number = 10;
  let evenOddMessage = isEven(number) ? "Nombre pair" : "Nombre impair";

  // Afficher les résultats
  document.write("<h2>Exemples de syntaxe de l'opérateur conditionnel</h2>");
  document.write("<p>Éligibilité à la conduite : " + canDrive + "</p>");
  document.write("<p>Note : " + grade + "</p>");
  document.write("<p>Type de nombre : " + evenOddMessage + "</p>");
</script>

Points clés sur la syntaxe de l'opérateur conditionnel :

Format de base : condition? valeur_si_vraie : valeur_si_fausse
Peut être imbriqué pour plusieurs conditions
Peut inclure des appels de fonction ou des expressions complexes
Fournit une alternative compacte aux instructions if-else

Sortie d'exemple dans le navigateur :

Exemples de syntaxe de l'opérateur conditionnel
Éligibilité à la conduite : Peut conduire
Note : C
Type de nombre : Nombre pair

Résumé

Dans ce laboratoire, les participants apprennent à utiliser l'opérateur conditionnel en JavaScript en créant un fichier HTML et en mettant en œuvre une logique de comparaison pratique. Le laboratoire guide les apprenants dans la configuration d'une structure HTML de base avec une balise de script intégrée, la définition de variables pour la comparaison et l'exploration de la syntaxe de l'opérateur conditionnel.

L'approche étape par étape permet aux étudiants de comprendre comment créer des comparaisons dynamiques à l'aide de variables telles que l'âge, le statut d'étudiant et le pays. En démontrant la fonctionnalité de l'opérateur conditionnel dans un contexte de développement web, le laboratoire fournit une méthode pratique pour comprendre cette technique essentielle de programmation JavaScript, permettant aux apprenants d'écrire des instructions conditionnelles plus concises et efficaces.