Explora los operadores lógicos en JavaScript

Introducción

En este laboratorio, los participantes explorarán los operadores lógicos fundamentales en JavaScript a través de un ejercicio práctico de desarrollo web. El laboratorio guía a los aprendices para crear un archivo HTML e implementar demostraciones prácticas de los operadores lógicos AND (&&), OR (||) y NOT (!), brindando una comprensión integral de cómo estos operadores funcionan en la programación de JavaScript.

Siguiendo un enfoque paso a paso, los estudiantes configurarán una página web interactiva que muestra los resultados de diversas operaciones lógicas, lo que les permitirá entender cómo estos operadores evalúan condiciones y devuelven valores booleanos. El laboratorio enfatiza el aprendizaje práctico al utilizar escenarios del mundo real como la elegibilidad para conducir y la autenticación de usuarios para ilustrar la aplicación de los operadores lógicos en JavaScript.

Configurar el archivo HTML para la demostración de operadores lógicos

En este paso, crearás un archivo HTML básico que servirá como base para demostrar los operadores lógicos de JavaScript. Configuraremos una estructura simple de página web con una sección de script donde exploraremos las operaciones lógicas.

Abre el WebIDE y navega hasta el directorio ~/project. Crea un nuevo archivo llamado logical-operators.html utilizando la interfaz del WebIDE.

Aquí está la estructura HTML inicial que utilizarás:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
  </head>
  <body>
    <h1>Explorando operadores lógicos en JavaScript</h1>

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

    <script>
      // Aquí agregaremos nuestros ejemplos de operadores lógicos de JavaScript
    </script>
  </body>
</html>

Analicemos los componentes clave de este archivo HTML:

La declaración <!DOCTYPE html> especifica que este es un documento HTML5
Hemos agregado un título y un encabezado para describir la página
El <div id="output"> se utilizará para mostrar los resultados de nuestros operadores lógicos
La etiqueta <script> es donde escribiremos nuestro código JavaScript

Salida de ejemplo cuando abres este archivo en un navegador:

Explorando operadores lógicos en JavaScript

Implementar la operación lógica AND (&&)

En este paso, aprenderás sobre el operador lógico AND (&&) en JavaScript. El operador AND devuelve true solo cuando ambos operandos son verdaderos, de lo contrario devuelve false.

Abre el archivo logical-operators.html que creaste en el paso anterior. Dentro de la etiqueta <script>, agrega el siguiente código JavaScript para demostrar el operador AND:

// Demostración del operador lógico AND (&&)
function demonstrateAndOperator() {
  let output = document.getElementById("output");

  // Ejemplo 1: AND booleano simple
  let isAdult = true;
  let hasLicense = true;
  let canDrive = isAdult && hasLicense;
  output.innerHTML += `¿Puede conducir? ${canDrive}<br>`;

  // Ejemplo 2: AND de comparación
  let age = 25;
  let hasValidLicense = age >= 18 && age <= 65;
  output.innerHTML += `¿Edad de conducción válida? ${hasValidLicense}<br>`;

  // Ejemplo 3: Múltiples condiciones
  let isMember = true;
  let hasDiscount = true;
  let canGetSpecialOffer = isMember && hasDiscount;
  output.innerHTML += `¿Oferta especial disponible? ${canGetSpecialOffer}<br>`;
}

// Llama a la función cuando la página se carga
demonstrateAndOperator();

Analicemos el operador AND (&&):

Devuelve true solo si ambas condiciones son true
En el primer ejemplo, canDrive es true solo si tanto isAdult como hasLicense son true
El segundo ejemplo utiliza operadores de comparación con AND
El tercer ejemplo muestra cómo AND puede combinar múltiples condiciones booleanas

Salida de ejemplo en el navegador:

¿Puede conducir? true
¿Edad de conducción válida? true
¿Oferta especial disponible? true

Implementar la operación lógica OR (||)

En este paso, aprenderás sobre el operador lógico OR (||) en JavaScript. El operador OR devuelve true si al menos uno de los operandos es verdadero, de lo contrario devuelve false.

Abre el archivo logical-operators.html y agrega una nueva función para demostrar el operador OR dentro de la etiqueta <script>:

// Demostración del operador lógico OR (||)
function demonstrateOrOperator() {
  let output = document.getElementById("output");

  // Ejemplo 1: OR booleano simple
  let isWeekend = false;
  let isHoliday = true;
  let canRelax = isWeekend || isHoliday;
  output.innerHTML += `¿Puede relajarse? ${canRelax}<br>`;

  // Ejemplo 2: OR de comparación
  let age = 16;
  let hasParentalConsent = true;
  let canAttendEvent = age >= 18 || hasParentalConsent;
  output.innerHTML += `¿Puede asistir al evento? ${canAttendEvent}<br>`;

  // Ejemplo 3: Múltiples condiciones
  let hasCoupon = false;
  let isNewCustomer = true;
  let canGetDiscount = hasCoupon || isNewCustomer;
  output.innerHTML += `¿Es elegible para un descuento? ${canGetDiscount}<br>`;
}

// Llama a la función cuando la página se carga
demonstrateOrOperator();

Analicemos el operador OR (||):

Devuelve true si al menos una condición es true
En el primer ejemplo, canRelax es true porque isHoliday es true
El segundo ejemplo muestra cómo OR se puede utilizar con condiciones de comparación y booleanas
El tercer ejemplo demuestra la combinación de múltiples condiciones

Salida de ejemplo en el navegador:

¿Puede relajarse? true
¿Puede asistir al evento? true
¿Es elegible para un descuento? true

Implementar la operación lógica NOT (!)

En este paso, aprenderás sobre el operador lógico NOT (!) en JavaScript. El operador NOT invierte el valor booleano de una expresión, convirtiendo true en false y false en true.

Abre el archivo logical-operators.html y agrega una nueva función para demostrar el operador NOT dentro de la etiqueta <script>:

// Demostración del operador lógico NOT (!)
function demonstrateNotOperator() {
  let output = document.getElementById("output");

  // Ejemplo 1: Operación NOT básica
  let isRaining = false;
  let isSunny = !isRaining;
  output.innerHTML += `¿Hace sol? ${isSunny}<br>`;

  // Ejemplo 2: NOT con comparación
  let age = 16;
  let isAdult = !(age < 18);
  output.innerHTML += `¿Es mayor de edad? ${isAdult}<br>`;

  // Ejemplo 3: Negando una condición compleja
  let hasTicket = true;
  let isCrowded = true;
  let canEnter = !(hasTicket && isCrowded);
  output.innerHTML += `¿Puede entrar? ${canEnter}<br>`;
}

// Llama a la función cuando la página se carga
demonstrateNotOperator();

Analicemos el operador NOT (!):

Invierte el valor booleano de una expresión
En el primer ejemplo, isSunny se convierte en true porque isRaining es false
El segundo ejemplo muestra NOT utilizado con una comparación
El tercer ejemplo demuestra NOT con una condición más compleja

Salida de ejemplo en el navegador:

¿Hace sol? true
¿Es mayor de edad? false
¿Puede entrar? false

Mostrar los resultados de las operaciones lógicas en la página web

En este paso, combinarás todos los operadores lógicos que has aprendido y crearás una demostración integral que muestre los resultados en la página web. Modificaremos el archivo HTML para incluir un enfoque más estructurado para mostrar los resultados de los operadores lógicos.

Actualiza el archivo logical-operators.html con el siguiente código completo:

<!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>Exploración de operadores lógicos en JavaScript</h1>

    <div id="andResults" class="result">
      <h2>Resultados del operador AND (&&)</h2>
    </div>

    <div id="orResults" class="result">
      <h2>Resultados del operador OR (||)</h2>
    </div>

    <div id="notResults" class="result">
      <h2>Resultados del operador NOT (!)</h2>
    </div>

    <script>
      // Función para mostrar resultados
      function displayResult(elementId, message) {
        const element = document.getElementById(elementId);
        const resultLine = document.createElement("p");
        resultLine.textContent = message;
        element.appendChild(resultLine);
      }

      // Demostración del operador AND (&&)
      function demonstrateAndOperator() {
        let isAdult = true;
        let hasLicense = true;
        let canDrive = isAdult && hasLicense;
        displayResult("andResults", `¿Puede conducir? ${canDrive}`);

        let age = 25;
        let hasValidLicense = age >= 18 && age <= 65;
        displayResult(
          "andResults",
          `¿Edad de conducción válida? ${hasValidLicense}`
        );
      }

      // Demostración del operador OR (||)
      function demonstrateOrOperator() {
        let isWeekend = false;
        let isHoliday = true;
        let canRelax = isWeekend || isHoliday;
        displayResult("orResults", `¿Puede relajarse? ${canRelax}`);

        let age = 16;
        let hasParentalConsent = true;
        let canAttendEvent = age >= 18 || hasParentalConsent;
        displayResult(
          "orResults",
          `¿Puede asistir al evento? ${canAttendEvent}`
        );
      }

      // Demostración del operador NOT (!)
      function demonstrateNotOperator() {
        let isRaining = false;
        let isSunny = !isRaining;
        displayResult("notResults", `¿Hace sol? ${isSunny}`);

        let age = 16;
        let isAdult = !(age < 18);
        displayResult("notResults", `¿Es mayor de edad? ${isAdult}`);
      }

      // Ejecuta todas las demostraciones cuando la página se carga
      function runAllDemonstrations() {
        demonstrateAndOperator();
        demonstrateOrOperator();
        demonstrateNotOperator();
      }

      // Llama a la función principal cuando la página se carga
      window.onload = runAllDemonstrations;
    </script>
  </body>
</html>

Mejoras clave en esta versión:

Se agregaron secciones de resultados con estilo para cada operador lógico
Se creó una función displayResult() para mostrar los resultados
Se implementó una función runAllDemonstrations() para ejecutar todas las demostraciones de operadores
Se agregó CSS básico para mejorar la legibilidad
Se utilizó window.onload para asegurar que todos los scripts se ejecuten después de que la página se cargue

La salida de ejemplo en el navegador mostrará los resultados de los operadores AND, OR y NOT en secciones separadas y con estilo.

Resumen

En este laboratorio, los participantes exploraron los operadores lógicos de JavaScript a través de un ejercicio práctico de desarrollo web. El laboratorio comenzó creando un archivo HTML con un div de salida dedicado, estableciendo un entorno estructurado para demostrar las operaciones lógicas. Los participantes aprendieron sobre los operadores AND (&&), OR (||) y NOT (!), implementando ejemplos prácticos que demuestran cómo estos operadores lógicos evalúan expresiones booleanas y controlan el flujo del programa.

El enfoque interactivo permitió a los aprendices entender el comportamiento de cada operador lógico escribiendo código JavaScript directamente dentro del archivo HTML. Al manipular valores booleanos y utilizar técnicas de comparación, los participantes obtuvieron una comprensión de cómo los operadores lógicos se pueden utilizar para tomar decisiones condicionales y crear evaluaciones lógicas más complejas en el programa de JavaScript.