LabEx
Se connecterInscription gratuite

Explorer les opérateurs logiques en JavaScript

JavaScriptJavaScriptBeginner
Pratiquer maintenant

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire, les participants exploreront les opérateurs logiques fondamentaux en JavaScript grâce à une activité pratique de développement web. Le laboratoire guide les apprenants dans la création d'un fichier HTML et la mise en œuvre de démonstrations pratiques des opérateurs logiques ET (&&), OU (||) et NON (!), fournissant une compréhension complète de la manière dont ces opérateurs fonctionnent en programmation JavaScript.

En suivant une approche étape par étape, les étudiants créeront une page web interactive qui affichera les résultats de diverses opérations logiques, leur permettant de comprendre la manière dont ces opérateurs évaluent les conditions et renvoient des valeurs booléennes. Le laboratoire met l'accent sur l'apprentissage pratique en utilisant des scénarios du monde réel tels que l'éligibilité au permis de conduire et l'authentification d'utilisateur pour illustrer l'application des opérateurs logiques en JavaScript.

Configurez le fichier HTML pour la démonstration des opérateurs logiques

Dans cette étape, vous allez créer un fichier HTML de base qui servira de base pour démontrer les opérateurs logiques en JavaScript. Nous allons configurer une structure simple de page web avec une section de script où nous explorerons les opérations logiques.

Ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé logical-operators.html à l'aide de l'interface de l'IDE Web.

Voici la structure HTML initiale que vous utiliserez :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
  </head>
  <body>
    <h1>Exploring Logical Operators in JavaScript</h1>

    <div id="output"></div>

    <script>
      // We'll add our JavaScript logical operator examples here
    </script>
  </body>
</html>

Analysons les composants clés de ce fichier HTML :

  • La déclaration <!DOCTYPE html> spécifie que ceci est un document HTML5
  • Nous avons ajouté un titre et un en-tête pour décrire la page
  • Le <div id="output"> sera utilisé pour afficher les résultats de nos opérateurs logiques
  • La balise <script> est où nous écrirons notre code JavaScript

Exemple de sortie lorsque vous ouvrez ce fichier dans un navigateur :

Exploring Logical Operators in JavaScript

Implémentez l'opération logique ET (&&)

Dans cette étape, vous allez découvrir l'opérateur logique ET (&&) en JavaScript. L'opérateur ET renvoie true seulement lorsque les deux opérandes sont vraies, sinon il renvoie false.

Ouvrez le fichier logical-operators.html que vous avez créé dans l'étape précédente. Dans la balise <script>, ajoutez le code JavaScript suivant pour démontrer l'opérateur ET :

// AND (&&) Logical Operator Demonstration
function demonstrateAndOperator() {
  let output = document.getElementById("output");

  // Example 1: Simple boolean AND
  let isAdult = true;
  let hasLicense = true;
  let canDrive = isAdult && hasLicense;
  output.innerHTML += `Can drive? ${canDrive}<br>`;

  // Example 2: Comparison AND
  let age = 25;
  let hasValidLicense = age >= 18 && age <= 65;
  output.innerHTML += `Valid driving age? ${hasValidLicense}<br>`;

  // Example 3: Multiple conditions
  let isMember = true;
  let hasDiscount = true;
  let canGetSpecialOffer = isMember && hasDiscount;
  output.innerHTML += `Special offer available? ${canGetSpecialOffer}<br>`;
}

// Call the function when the page loads
demonstrateAndOperator();

Analysons l'opérateur ET (&&) :

  • Il renvoie true seulement si les deux conditions sont true
  • Dans le premier exemple, canDrive est true seulement si isAdult et hasLicense sont tous les deux true
  • Le deuxième exemple utilise des opérateurs de comparaison avec ET
  • Le troisième exemple montre comment ET peut combiner plusieurs conditions booléennes

Exemple de sortie dans le navigateur :

Can drive? true
Valid driving age? true
Special offer available? true

Implémentez l'opération logique OU (||)

Dans cette étape, vous allez découvrir l'opérateur logique OU (||) en JavaScript. L'opérateur OU renvoie true si au moins l'une des opérandes est vraie, sinon il renvoie false.

Ouvrez le fichier logical-operators.html et ajoutez une nouvelle fonction pour démontrer l'opérateur OU dans la balise <script> :

// OR (||) Logical Operator Demonstration
function demonstrateOrOperator() {
  let output = document.getElementById("output");

  // Example 1: Simple boolean OR
  let isWeekend = false;
  let isHoliday = true;
  let canRelax = isWeekend || isHoliday;
  output.innerHTML += `Can relax? ${canRelax}<br>`;

  // Example 2: Comparison OR
  let age = 16;
  let hasParentalConsent = true;
  let canAttendEvent = age >= 18 || hasParentalConsent;
  output.innerHTML += `Can attend event? ${canAttendEvent}<br>`;

  // Example 3: Multiple conditions
  let hasCoupon = false;
  let isNewCustomer = true;
  let canGetDiscount = hasCoupon || isNewCustomer;
  output.innerHTML += `Eligible for discount? ${canGetDiscount}<br>`;
}

// Call the function when the page loads
demonstrateOrOperator();

Analysons l'opérateur OU (||) :

  • Il renvoie true si au moins une condition est true
  • Dans le premier exemple, canRelax est true car isHoliday est true
  • Le deuxième exemple montre comment l'opérateur OU peut être utilisé avec des conditions de comparaison et booléennes
  • Le troisième exemple démontre la combinaison de plusieurs conditions

Exemple de sortie dans le navigateur :

Can relax? true
Can attend event? true
Eligible for discount? true

Implémentez l'opération logique NON (!)

Dans cette étape, vous allez découvrir l'opérateur logique NON (!) en JavaScript. L'opérateur NON inverse la valeur booléenne d'une expression, transformant true en false et false en true.

Ouvrez le fichier logical-operators.html et ajoutez une nouvelle fonction pour démontrer l'opérateur NON dans la balise <script> :

// NOT (!) Logical Operator Demonstration
function demonstrateNotOperator() {
  let output = document.getElementById("output");

  // Example 1: Basic NOT operation
  let isRaining = false;
  let isSunny = !isRaining;
  output.innerHTML += `Is it sunny? ${isSunny}<br>`;

  // Example 2: NOT with comparison
  let age = 16;
  let isAdult = !(age < 18);
  output.innerHTML += `Is an adult? ${isAdult}<br>`;

  // Example 3: Negating a complex condition
  let hasTicket = true;
  let isCrowded = true;
  let canEnter = !(hasTicket && isCrowded);
  output.innerHTML += `Can enter? ${canEnter}<br>`;
}

// Call the function when the page loads
demonstrateNotOperator();

Analysons l'opérateur NON (!) :

  • Il inverse la valeur booléenne d'une expression
  • Dans le premier exemple, isSunny devient true car isRaining est false
  • Le deuxième exemple montre l'utilisation de NON avec une comparaison
  • Le troisième exemple démontre l'utilisation de NON avec une condition plus complexe

Exemple de sortie dans le navigateur :

Is it sunny? true
Is an adult? false
Can enter? false

Affichez les résultats des opérations logiques sur la page web

Dans cette étape, vous allez combiner tous les opérateurs logiques que vous avez appris et créer une démonstration complète qui affiche les résultats sur la page web. Nous allons modifier le fichier HTML pour inclure une approche plus structurée pour afficher les résultats des opérateurs logiques.

Mettez à jour le fichier logical-operators.html avec le code complet suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      .result {
        margin: 10px 0;
        padding: 10px;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript Logical Operators Exploration</h1>

    <div id="andResults" class="result">
      <h2>AND (&&) Operator Results</h2>
    </div>

    <div id="orResults" class="result">
      <h2>OR (||) Operator Results</h2>
    </div>

    <div id="notResults" class="result">
      <h2>NOT (!) Operator Results</h2>
    </div>

    <script>
      // Function to display results
      function displayResult(elementId, message) {
        const element = document.getElementById(elementId);
        const resultLine = document.createElement("p");
        resultLine.textContent = message;
        element.appendChild(resultLine);
      }

      // AND (&&) Operator Demonstration
      function demonstrateAndOperator() {
        let isAdult = true;
        let hasLicense = true;
        let canDrive = isAdult && hasLicense;
        displayResult("andResults", `Can drive? ${canDrive}`);

        let age = 25;
        let hasValidLicense = age >= 18 && age <= 65;
        displayResult("andResults", `Valid driving age? ${hasValidLicense}`);
      }

      // OR (||) Operator Demonstration
      function demonstrateOrOperator() {
        let isWeekend = false;
        let isHoliday = true;
        let canRelax = isWeekend || isHoliday;
        displayResult("orResults", `Can relax? ${canRelax}`);

        let age = 16;
        let hasParentalConsent = true;
        let canAttendEvent = age >= 18 || hasParentalConsent;
        displayResult("orResults", `Can attend event? ${canAttendEvent}`);
      }

      // NOT (!) Operator Demonstration
      function demonstrateNotOperator() {
        let isRaining = false;
        let isSunny = !isRaining;
        displayResult("notResults", `Is it sunny? ${isSunny}`);

        let age = 16;
        let isAdult = !(age < 18);
        displayResult("notResults", `Is an adult? ${isAdult}`);
      }

      // Run all demonstrations when page loads
      function runAllDemonstrations() {
        demonstrateAndOperator();
        demonstrateOrOperator();
        demonstrateNotOperator();
      }

      // Call the main function when the page loads
      window.onload = runAllDemonstrations;
    </script>
  </body>
</html>

Améliorations clés dans cette version :

  • Ajout de sections de résultats stylisées pour chaque opérateur logique
  • Création d'une fonction displayResult() pour afficher les résultats
  • Implémentation d'une fonction runAllDemonstrations() pour exécuter toutes les démonstrations d'opérateurs
  • Ajout de CSS de base pour améliorer la lisibilité
  • Utilisation de window.onload pour s'assurer que tous les scripts s'exécutent après le chargement de la page

La sortie de l'exemple dans le navigateur montrera les résultats des opérateurs AND, OR et NOT dans des sections stylisées distinctes.

Sommaire

Dans ce laboratoire, les participants ont exploré les opérateurs logiques de JavaScript à travers une activité pratique de développement web. Le laboratoire a commencé par la création d'un fichier HTML avec une div de sortie dédiée, en configurant un environnement structuré pour démontrer les opérations logiques. Les participants ont appris sur les opérateurs ET (&&), OU (||) et NON (!), en mettant en œuvre des exemples pratiques qui montrent comment ces opérateurs logiques évaluent les expressions booléennes et contrôlent le flux du programme.

L'approche interactive a permis aux apprenants de comprendre le comportement de chaque opérateur logique en écrivant directement du code JavaScript dans le fichier HTML. En manipulant les valeurs booléennes et en utilisant des techniques de comparaison, les participants ont acquis des connaissances sur la manière dont les opérateurs logiques peuvent être utilisés pour prendre des décisions conditionnelles et créer des évaluations logiques plus complexes dans la programmation JavaScript.

Connexe JavaScript Cours
Démarrage rapide avec JavaScript

Démarrage rapide avec JavaScript

JavaScript
Débutant
Créer une extension VSCode avec ChatGPT

Créer une extension VSCode avec ChatGPT

GitJavaScriptTypeScript
Débutant
Construire une application web Tic-Tac-Toe

Construire une application web Tic-Tac-Toe

HTMLCSSJavaScript
Débutant