Explorer les opérateurs de comparaison en JavaScript

Introduction

Dans ce laboratoire, les étudiants exploreront les opérateurs de comparaison JavaScript à travers une activité pratique d'HTML et de JavaScript. Le laboratoire guide les participants dans la configuration d'un fichier HTML et démontre progressivement divers opérateurs de comparaison, y compris les opérateurs supérieur à, inférieur à, d'égalité et d'égalité stricte.

Les participants apprendront à utiliser les opérateurs de comparaison en écrivant du code JavaScript dans une balise de script HTML, en expérimentant différentes comparaisons numériques et de valeurs, et en observant les résultats dans la console du navigateur. À la fin du laboratoire, les étudiants comprendront comment appliquer les opérateurs de comparaison pour évaluer les relations entre les valeurs et comprendre leur comportement dans différents scénarios.

Configurez le fichier HTML pour les opérateurs de comparaison

Dans cette étape, vous allez configurer un fichier HTML de base pour explorer les opérateurs de comparaison JavaScript. Nous allons créer un fichier HTML avec un script JavaScript intégré qui nous aidera à comprendre comment fonctionnent les opérateurs de comparaison.

Ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé comparison-operators.html avec le contenu suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Comparison Operators</title>
  </head>
  <body>
    <h1>Exploration des opérateurs de comparaison</h1>
    <p>
      Ouvrez la console du navigateur pour voir les résultats de nos opérateurs
      de comparaison.
    </p>

    <script>
      // Nous ajouterons nos exemples d'opérateurs de comparaison ici
      console.log("Configuration du fichier HTML terminée!");
    </script>
  </body>
</html>

Analysons les composants clés de ce fichier HTML :

La déclaration <!DOCTYPE html> assure que le navigateur utilise le mode standard.
Nous avons inclus une simple balise <script> où nous écrirons notre code JavaScript.
L'instruction console.log() nous aidera à vérifier que le fichier fonctionne correctement.

Pour afficher le fichier, vous devriez généralement l'ouvrir dans un navigateur web et vérifier la console de développement du navigateur. Dans notre environnement LabEx, nous vérifierons la création et le contenu du fichier.

Montrez les opérateurs supérieur à et inférieur à

Dans cette étape, vous allez découvrir les opérateurs de comparaison supérieur à (>) et inférieur à (<) en JavaScript. Ouvrez le fichier comparison-operators.html de l'étape précédente et modifiez la section <script> pour explorer ces opérateurs.

Mettez à jour le script avec le code suivant :

<script>
  // Opérateur supérieur à (>)
  console.log("Exemples de l'opérateur supérieur à :");
  console.log(10 > 5); // true
  console.log(5 > 10); // false
  console.log(5 > 5); // false

  // Opérateur inférieur à (<)
  console.log("\nExemples de l'opérateur inférieur à :");
  console.log(5 < 10); // true
  console.log(10 < 5); // false
  console.log(5 < 5); // false

  // Comparaison de différents types
  console.log("\nComparaison de différents types :");
  console.log(5 < "10"); // true (coercition de type)
  console.log(10 > "5"); // true (coercition de type)
</script>

Ces exemples montrent les caractéristiques clés des opérateurs supérieur à et inférieur à :

Lorsque la valeur de gauche est plus grande, > renvoie true
Lorsque la valeur de gauche est plus petite, > renvoie false
Lorsque les valeurs sont égales, à la fois > et < renvoient false
JavaScript effectue une coercition de type lors de la comparaison de différents types

Ouvrez la console du navigateur pour voir les résultats de la comparaison. Chaque console.log() affichera le résultat de la comparaison.

Entraînez-vous avec les opérateurs d'égalité et d'inégalité

Dans cette étape, vous allez explorer les opérateurs d'égalité (==) et d'inégalité (!=) en JavaScript. Ouvrez le fichier comparison-operators.html et mettez à jour la section <script> avec le code suivant :

<script>
  // Opérateur d'égalité (==)
  console.log("Exemples de l'opérateur d'égalité :");
  console.log(5 == 5); // true
  console.log(5 == "5"); // true (coercition de type)
  console.log(5 == 10); // false

  // Opérateur d'inégalité (!=)
  console.log("\nExemples de l'opérateur d'inégalité :");
  console.log(5 != 10); // true
  console.log(5 != "5"); // false (coercition de type)
  console.log(5 != 5); // false

  // Comparaison de différents types
  console.log("\nComparaison de différents types :");
  console.log(0 == false); // true (coercition de type)
  console.log(1 == true); // true (coercition de type)
  console.log("" == false); // true (coercition de type)
</script>

Points clés sur les opérateurs d'égalité et d'inégalité :

L'opérateur == effectue une coercition de type avant la comparaison
== renvoie true si les valeurs sont les mêmes après la conversion de type
L'opérateur != vérifie si les valeurs ne sont pas égales, également avec coercition de type
La coercition de type peut entraîner des résultats inattendus

Ouvrez la console du navigateur pour voir les résultats de la comparaison. Chaque console.log() affichera le résultat des comparaisons.

Comprenez les opérateurs d'égalité stricte et d'inégalité stricte

Dans cette étape, vous allez découvrir les opérateurs d'égalité stricte (===) et d'inégalité stricte (!==) en JavaScript. Ouvrez le fichier comparison-operators.html et mettez à jour la section <script> avec le code suivant :

<script>
  // Opérateur d'égalité stricte (===)
  console.log("Exemples de l'opérateur d'égalité stricte :");
  console.log(5 === 5); // true
  console.log(5 === "5"); // false (pas de coercition de type)
  console.log(0 === false); // false
  console.log(1 === true); // false

  // Opérateur d'inégalité stricte (!==)
  console.log("\nExemples de l'opérateur d'inégalité stricte :");
  console.log(5 !== 10); // true
  console.log(5 !== "5"); // true (pas de coercition de type)
  console.log(0 !== false); // true
  console.log(1 !== true); // true

  // Comparaison avec coercition de type vs. comparaison stricte
  let num = 5;
  let strNum = "5";
  console.log("\nComparaison avec == vs. ===:");
  console.log(num == strNum); // true (coercition de type)
  console.log(num === strNum); // false (comparaison stricte)
</script>

Différences clés entre la comparaison flexible et la comparaison stricte :

=== vérifie à la fois la valeur et le type sans coercition de type
!== est l'opérateur d'inégalité stricte
Les opérateurs stricts empêchent la conversion de type inattendue
Prenez toujours === et !== pour des comparaisons plus prévisibles

Ouvrez la console du navigateur pour voir les résultats de la comparaison. Chaque console.log() affichera le résultat des comparaisons.

Expérimentez avec les résultats des opérateurs de comparaison

Dans cette étape, vous allez explorer des scénarios plus complexes avec les opérateurs de comparaison et apprendre comment ils interagissent avec différents types de valeurs. Ouvrez le fichier comparison-operators.html et mettez à jour la section <script> avec le code suivant :

<script>
  // Comparaison de différents types et de scénarios complexes
  console.log("Scénarios de comparaison complexes :");

  // Comparaison de null et undefined
  console.log(null == undefined); // true (coercition de type)
  console.log(null === undefined); // false (comparaison stricte)

  // Comparaison avec NaN
  console.log(NaN == NaN); // false (cas spécial)
  console.log(NaN === NaN); // false

  // Comparaison d'objets
  let obj1 = { value: 5 };
  let obj2 = { value: 5 };
  let obj3 = obj1;
  console.log("\nComparaisons d'objets :");
  console.log(obj1 == obj2); // false (références différentes)
  console.log(obj1 === obj2); // false (références différentes)
  console.log(obj1 === obj3); // true (même référence)

  // Comparaisons chaînées
  let x = 5;
  console.log("\nComparaisons chaînées :");
  console.log(1 < x && x < 10); // true
  console.log(1 < x < 10); // AVERTISSEMENT : Cela ne fonctionne pas comme prévu!
</script>

Idées clés issues de ces expériences :

null et undefined se comportent différemment avec l'égalité flexible et stricte
NaN n'est jamais égal à lui-même
Les comparaisons d'objets dépendent de la référence, pas du contenu
Les comparaisons chaînées peuvent être difficiles et ne fonctionner pas comme prévu

Ouvrez la console du navigateur pour voir les résultats de la comparaison et comprendre le comportement nuancé des opérateurs de comparaison.

Sommaire

Dans ce laboratoire, les participants explorent les opérateurs de comparaison en JavaScript grâce à une activité pratique combinant HTML et JavaScript. Le laboratoire commence par la création d'un fichier HTML de base avec un script intégré, permettant aux apprenants de comprendre et de pratiquer diverses techniques de comparaison telles que les opérateurs supérieur à, inférieur à, d'égalité et d'égalité stricte.

En travaillant sur des exemples pratiques dans la console du navigateur, les étudiants obtiennent des informations sur la manière dont les opérateurs de comparaison fonctionnent, apprenant à évaluer différents types de comparaisons numériques et de valeurs. Le laboratoire propose une approche structurée pour comprendre ces opérateurs fondamentaux de JavaScript, permettant aux participants d'expérimenter différents scénarios et d'observer les résultats booléens obtenus.