Usar el operador condicional en JavaScript

Introducción

En este laboratorio, los estudiantes explorarán el uso del operador condicional en JavaScript a través de un ejemplo práctico. El laboratorio guía a los aprendices en la creación de un archivo HTML, la definición de variables de comparación, la implementación de la lógica del operador condicional y la visualización de resultados mediante document.write.

Los participantes comenzarán configurando una estructura HTML básica con una etiqueta de script incrustada, luego definirán variables como edad, estado de estudiante y país. Aprenderán a usar el operador condicional para realizar evaluaciones condicionales concisas, comprendiendo su sintaxis y aplicación práctica en la realización de asignaciones basadas en decisiones rápidas dentro del código JavaScript.

Crear un archivo HTML para el ejemplo del operador condicional

En este paso, crearás un archivo HTML para demostrar el uso del operador condicional en JavaScript. Los archivos HTML proporcionan un excelente entorno para escribir y probar código JavaScript.

Abre el WebIDE y navega hasta el directorio ~/project. Crea un nuevo archivo llamado conditional-operator.html haciendo clic derecho en el explorador de archivos y seleccionando "Nuevo archivo".

Aquí está la estructura básica de HTML que usarás para explorar el operador condicional:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo del operador condicional</title>
  </head>
  <body>
    <h1>Demostración del operador condicional de JavaScript</h1>

    <script>
      // El código JavaScript se agregará aquí en pasos subsiguientes
    </script>
  </body>
</html>

Este archivo HTML proporciona una estructura simple con una etiqueta de script donde escribirás código JavaScript para demostrar el operador condicional. La etiqueta <script> te permite incrustar JavaScript directamente en el documento HTML.

Salida de ejemplo cuando abres este archivo en un navegador web:

Demostración del operador condicional de JavaScript

Asegúrate de guardar el archivo en el directorio ~/project. En los siguientes pasos, agregarás código JavaScript para explorar la funcionalidad del operador condicional.

Definir variables para comparación

En este paso, aprenderás a definir variables para comparación utilizando el operador condicional. Abre el archivo conditional-operator.html que creaste en el paso anterior y agrega el siguiente código JavaScript dentro de la etiqueta <script>:

<script>
  // Define variables for comparison
  let age = 20;
  let isStudent = true;
  let country = "USA";
</script>

Analicemos las variables:

age es un número que representa la edad de una persona
isStudent es un valor booleano que indica el estado de estudiante
country es una cadena que representa el país de la persona

Estas variables se utilizarán para demostrar cómo funciona el operador condicional para realizar comparaciones y tomar decisiones. En los siguientes pasos, usarás estas variables para crear lógica condicional.

Salida de ejemplo de los valores de las variables:

age: 20
isStudent: true
country: "USA"

Asegúrate de guardar el archivo después de agregar estas variables. Las variables ya están listas para ser utilizadas con el operador condicional en los pasos siguientes.

Implementar la lógica del operador condicional

En este paso, aprenderás a usar el operador condicional (ternario) para implementar una lógica simple basada en las variables que definiste anteriormente. El operador condicional ofrece una forma concisa de escribir declaraciones if-else en una sola línea.

Actualiza la sección <script> en tu archivo conditional-operator.html con el siguiente código:

<script>
  // Variables definidas anteriormente
  let age = 20;
  let isStudent = true;
  let country = "USA";

  // Ejemplos del operador condicional
  let canVote = age >= 18 ? "Eligible to vote" : "Not eligible to vote";

  let studentStatus = isStudent
    ? "Student discount applies"
    : "No student discount";

  let travelMessage =
    country === "USA" ? "Domestic travel" : "International travel";
</script>

Analicemos la sintaxis del operador condicional:

condition? value_if_true : value_if_false
El primer ejemplo verifica si la persona tiene 18 años o más
El segundo ejemplo verifica el estado de estudiante
El tercer ejemplo verifica el país para determinar el tipo de viaje

Salida de ejemplo de los resultados del operador condicional:

canVote: "Eligible to vote"
studentStatus: "Student discount applies"
travelMessage: "Domestic travel"

El operador condicional ofrece una forma compacta de tomar decisiones y asignar valores basados en condiciones. Es una alternativa más concisa a las declaraciones if-else tradicionales.

Mostrar el resultado usando document.write

En este paso, aprenderás a mostrar los resultados de la lógica de tu operador condicional utilizando document.write(). Este método te permite enviar texto directamente al documento HTML.

Actualiza la sección <script> en tu archivo conditional-operator.html con el siguiente código:

<script>
  // Variables y operadores condicionales definidos anteriormente
  let age = 20;
  let isStudent = true;
  let country = "USA";

  let canVote = age >= 18 ? "Eligible to vote" : "Not eligible to vote";
  let studentStatus = isStudent
    ? "Student discount applies"
    : "No student discount";
  let travelMessage =
    country === "USA" ? "Domestic travel" : "International travel";

  // Mostrar resultados utilizando document.write()
  document.write("<h2>Resultados del operador condicional</h2>");
  document.write("<p>Estado de votación: " + canVote + "</p>");
  document.write("<p>Descuento para estudiantes: " + studentStatus + "</p>");
  document.write("<p>Tipo de viaje: " + travelMessage + "</p>");
</script>

Cuando abres este archivo HTML en un navegador web, verás los resultados mostrados en la página. El método document.write() te permite enviar contenido HTML directamente.

Salida de ejemplo en el navegador:

Resultados del operador condicional
Estado de votación: Eligible to vote
Descuento para estudiantes: Student discount applies
Tipo de viaje: Domestic travel

Nota: Aunque document.write() es fácil de usar, generalmente se recomienda utilizar métodos más modernos como innerHTML o textContent en aplicaciones del mundo real.

Comprender la sintaxis del operador condicional

En este paso, profundizarás en la sintaxis y el uso del operador condicional (ternario) en JavaScript. Actualiza la sección <script> en tu archivo conditional-operator.html con el siguiente ejemplo completo:

<script>
  // Sintaxis básica del operador condicional
  // condition? expression_if_true : expression_if_false

  // Ejemplo 1: Comparación simple
  let age = 20;
  let canDrive = age >= 16 ? "Can drive" : "Cannot drive";

  // Ejemplo 2: Operador condicional anidado
  let score = 75;
  let grade =
    score >= 90
      ? "A"
      : score >= 80
        ? "B"
        : score >= 70
          ? "C"
          : score >= 60
            ? "D"
            : "F";

  // Ejemplo 3: Operador condicional con llamadas a funciones
  function isEven(num) {
    return num % 2 === 0;
  }
  let number = 10;
  let evenOddMessage = isEven(number) ? "Even number" : "Odd number";

  // Mostrar resultados
  document.write("<h2>Ejemplos de sintaxis del operador condicional</h2>");
  document.write("<p>Elegibilidad para conducir: " + canDrive + "</p>");
  document.write("<p>Calificación: " + grade + "</p>");
  document.write("<p>Tipo de número: " + evenOddMessage + "</p>");
</script>

Puntos claves sobre la sintaxis del operador condicional:

Formato básico: condition? value_if_true : value_if_false
Puede anidarse para múltiples condiciones
Puede incluir llamadas a funciones o expresiones complejas
Proporciona una alternativa compacta a las declaraciones if-else

Salida de ejemplo en el navegador:

Ejemplos de sintaxis del operador condicional
Elegibilidad para conducir: Can drive
Calificación: C
Tipo de número: Even number

Resumen

En este laboratorio, los participantes aprenden a usar el operador condicional en JavaScript creando un archivo HTML e implementando lógica de comparación práctica. El laboratorio guía a los aprendices para configurar una estructura HTML básica con una etiqueta de script incrustada, definir variables para comparación y explorar la sintaxis del operador condicional.

El enfoque paso a paso permite a los estudiantes entender cómo crear comparaciones dinámicas usando variables como edad, estado de estudiante y país. Al demostrar la funcionalidad del operador condicional en un contexto de desarrollo web, el laboratorio proporciona un método práctico para entender esta técnica esencial de programación de JavaScript, lo que permite a los aprendices escribir declaraciones condicionales más concisas y eficientes.