Los formularios HTML son componentes esenciales de la mayoría de los sitios web y aplicaciones web. Permiten la interacción entre los usuarios y esos sitios web y son un concepto clave que deben comprender los desarrolladores web.

Esta guía completa cubre varios aspectos de los formularios HTML, desde cómo crear y estructurar formularios hasta la interacción de JavaScript y la validación de formularios.

Comprender cómo trabajar con formularios mediante programación le permite validar y capturar las entradas del usuario, gestionar los envíos y mejorar la experiencia general del usuario.

Si sigue los ejemplos y las mejores prácticas proporcionados en esta guía, obtendrá el conocimiento necesario para crear formularios web sólidos que mejoren la experiencia del usuario y faciliten la recopilación y el envío de datos sin problemas.

Ya sea un desarrollador principiante o experimentado, esta guía constituye un recurso valioso para comprender e implementar formularios HTML de manera efectiva en sus proyectos web.

Requisitos previos:

Se recomienda una comprensión básica de los fundamentos de JavaScript para comprender completamente los conceptos discutidos en este tutorial. La familiaridad con los formularios HTML también será beneficiosa para comprender y aplicar el material cubierto.

Si es nuevo en JavaScript, le recomendamos que se familiarice con las variables, los tipos de datos, las funciones, los bucles y las técnicas básicas de manipulación de DOM antes de sumergirse en este tutorial. Este conocimiento fundamental facilitará una experiencia de aprendizaje más fluida a medida que exploramos temas más avanzados relacionados con el manejo de formularios en JavaScript.

Nota inicial: Para su comodidad, se puede acceder a todos los ejemplos y códigos analizados aquí en GitHub .

Tabla de contenido

1. Comprensión de los formularios HTML
   – Introducción a los elementos del formulario HTML
   – JavaScript y manejo de formularios
   – Acceso a los campos del formulario
   – Ejemplo: formulario de registro
2. Cómo crear botones de opción
   – JavaScript para manejar la selección de botones de opción
   – Evento de cambio de botón de opción
3. Casillas de verificación
   – Cómo comprobar si una casilla de verificación está marcada
   – Cómo obtener valores de casilla de verificación
   – Cómo manejar varias casillas de verificación
   – Cómo marcar/desmarcar todas las casillas de verificación
   – Cómo generar casillas de verificación dinámicamente
4. Seleccionar elemento
   – Cómo interactuar con un elemento de selección
   – Cómo acceder a opciones con JavaScript
   – Cómo manejar selecciones múltiples
   – Ejemplo: Administrador de tareas
5. Diferencia entre cambio y evento de entrada
6. Conclusión

Antes de comenzar, aquí hay algo a tener en cuenta:

Este es un blog de seguimiento de este Manual de eventos y DOM y no cubre la comunicación del lado del servidor ni el manejo de formularios del lado del servidor en este blog, ya que involucra temas avanzados como AJAX (JavaScript asíncrono y XML), promesas, manejo de errores y manejo. Operaciones asincrónicas en JavaScript.

En este tutorial, nos centraremos en cómo trabajar con varios elementos de formulario, incluidos botones de opción, casillas de verificación y elementos de selección, así como en cómo generarlos e interactuar dinámicamente con ellos usando JavaScript.

Profundizar en la comunicación del lado del servidor iría más allá del alcance de este artículo, cuyo objetivo es proporcionar una comprensión integral de la manipulación DOM y el manejo de eventos dentro del contexto de los elementos de formulario.

Comprender los formularios HTML

Los formularios HTML son elementos fundamentales que se utilizan para recopilar y enviar datos de los usuarios en la web. Permiten la interacción entre los usuarios y los sitios web al permitirles ingresar información, realizar selecciones y enviar datos a servidores para su procesamiento.

Introducción a los elementos de formulario HTML

Los formularios HTML se crean utilizando el <form>elemento, que actúa como contenedor para varios elementos de entrada. Los elementos de formulario comunes incluyen campos de texto, casillas de verificación, botones de opción, menús desplegables y botones.

Para hacer referencia a un formulario en JS, puede utilizar métodos DOM como getElementById()o document.forms. document.formsdevuelve una colección de formularios y puede acceder a un formulario específico utilizando un índice, nombre o identificación.

const form = document.getElementById('signup');
const firstForm = document.forms[0]; // accessing first form
const formByName = document.forms['formName']; // accessing form by name
const formById = document.forms['formId']; // accessing form by id

Veamos un ejemplo básico de un formulario HTML:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="Submit">
</form>

En este ejemplo, tenemos un formulario con dos campos de entrada para nombre de usuario y contraseña, junto con un botón de envío.

Estructura y atributos del formulario

Los formularios HTML pueden tener varios atributos que controlan su comportamiento y apariencia. Algunos atributos comunes incluyen:

• acción: Especifica la URL donde se deben enviar los datos del formulario.
• método: especifica el método HTTP utilizado para enviar datos del formulario ( posto get).
• objetivo : especifica dónde mostrar la respuesta después del envío del formulario (por ejemplo, _self, _blank, _parent) _top.
• nombre : Asigna un nombre al formulario con fines de identificación.

A continuación se muestra un ejemplo de un formulario con atributos de acción, método y destino:

<form action="/submit-form" method="POST" name="myForm" target="_blank">
  <!-- Form elements go here -->
</form>

JavaScript y manejo de formularios

JavaScript usa el HTMLFormElementobjeto para representar un formulario. Este objeto tiene propiedades correspondientes a los atributos HTML actiony method.

Métodos como submit()y reset()se utilizan para enviar y restablecer formularios.

const form = document.getElementById('signup');
form.action; // returns the action attribute
form.method; // returns the method attribute
form.submit(); // submits the form

JavaScript proporciona controladores de eventos para agregar interactividad a los formularios HTML. Al aprovechar estos eventos, puede ejecutar scripts personalizados en respuesta a las acciones del usuario dentro del formulario:

Enviar evento : un formulario generalmente tiene un botón de envío que, al hacer clic, envía los datos del formulario al servidor. Esto se logra usando un elemento <input>o <button>con type="submit".

<input type="submit" value="Sign Up">
// or
<button type="submit">Sign Up</button>

Para adjuntar un detector de eventos al evento de envío, utilice el addEventListener()método. He aquí un ejemplo:

const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
    // Custom validation and submission logic here
});

En muchos casos, es posible que desee interceptar el comportamiento de envío de formulario predeterminado y ejecutar una lógica personalizada antes de permitir que el formulario se envíe al servidor. Puedes usar preventDefault()para esto. Ejemplo:

const form = document.getElementById('signup');
form.addEventListener('submit', (event) => {
    event.preventDefault(); // Prevents the default form submission
    // Custom validation and submission logic here
});

Sin event.preventDefault(), cualquier lógica de envío y validación personalizada aún se ejecutaría dentro del detector de eventos, pero no se impediría el comportamiento de envío de formulario predeterminado.

Restablecer evento : el resetevento se activa cuando el formulario se restablece mediante un botón de reinicio o mediante programación. Usamos reset()un método para borrar todos los campos del formulario y restablecerlos a sus valores predeterminados.

document.querySelector('form').addEventListener('reset', function(event) {
    // Custom form reset logic here
});

Cómo acceder a los campos del formulario

Puede acceder a los campos del formulario utilizando métodos DOM como getElementsByName(),,, etc.getElementById()querySelector()

La form.elementspropiedad almacena una colección de elementos de formulario. Puede acceder a estos Elementos por índice, identificación o nombre. He aquí un ejemplo:

const form = document.getElementById('signup');
const nameField = form.elements['name']; // accessing element by name
const emailField = form.elements['email']; // accessing element by name
const firstElement = form.elements[0]; // accessing first element by index no.

Una vez que haya accedido a un campo de formulario, puede usar la valuepropiedad para acceder a su valor. He aquí un ejemplo:

const nameValue = nameField.value;
const emailValue = emailFieldByName.value;

Validación de formulario

La validación de formularios es un aspecto esencial del desarrollo web que garantiza que los datos enviados por los usuarios sean precisos y cumplan con los criterios específicos antes de ser procesados ​​por el servidor. Las validaciones comunes incluyen la verificación de campos vacíos, formatos de correo electrónico válidos, etc.

Validación de formulario HTML

HTML5 proporciona validación de formularios integrada a través de varios atributos:

• obligatorio : Especifica que se debe completar un campo.
• patrón : especifica un patrón de expresión regular que el valor de entrada debe coincidir.
• min y max : especifique los valores mínimo y máximo para un campo de entrada.
• maxlength y minlength : especifican la longitud máxima y mínima de la entrada
• tipo : especifica el tipo de entrada esperada (por ejemplo, correo electrónico, número, fecha).

A continuación se muestra un ejemplo de validación de formulario HTML utilizando estos atributos:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="15"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="99"><br>

  <input type="submit" value="Submit">
</form>

Validación de formularios JavaScript

JavaScript permite a los desarrolladores realizar una lógica de validación más sofisticada más allá de lo que ofrecen los atributos HTML. Los detectores de eventos se pueden adjuntar a elementos de formulario para manejar la validación dinámicamente.

A continuación se muestra un ejemplo básico de validación de formularios JavaScript:

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission

    // Perform custom validation logic
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    if (!emailIsValid(email)) {
        alert('Please enter a valid email address.');
        return;
    }

    if (password.length < 6) {
        alert('Password must be at least 6 characters long.');
        return;
    }

    // If validation passes, submit the form
    form.submit();
});

function emailIsValid(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

En este ejemplo, la función JavaScript emailIsValid()utiliza una expresión regular para validar el formato del correo electrónico. El submitdetector de eventos evita que se envíe el formulario si falla la validación y se muestran mensajes de error personalizados al usuario.

Veamos un ejemplo: Formulario de registro

Ahora, combinemos todos los conceptos que hemos cubierto en un ejemplo completo de un formulario de registro con validación del lado del cliente usando JavaScript:

<!DOCTYPE html>
<html>
  <body>
    <h2>User Registration</h2>
    <form id="registrationForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" />
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" />
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
      </div>
      <div>
        <input type="submit" value="Register" />
      </div>
    </form>

    <div id="errorMessages"></div>
    <script src="script.js"></script>
  </body>
</html>

Estructura HTML : Tenemos un formulario de registro simple con campos para nombre de usuario, correo electrónico, contraseña y un botón de envío. También hay un contenedor div ( errorMessages) para mostrar mensajes de error de validación.

Ahora escribamos código JavaScript para manejar el envío de formularios y realizar la validación del lado del cliente:

const registrationForm = document.getElementById("registrationForm");
const errorMessages = document.getElementById("errorMessages");

registrationForm.addEventListener("submit", function (event) {
  event.preventDefault();

  const { username, email, password } = registrationForm.elements;

  errorMessages.innerHTML = "";

  if (!username.value.trim()) {
    displayError("Username is required.");
    return;
  }

  if (!email.value.trim() || !isValidEmail(email.value)) {
    displayError("Please enter a valid email address.");
    return;
  }

  if (!password.value.trim() || !isStrongPassword(password.value)) {
    displayError(
      "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character."
    );
    return;
  }

  alert("Registration successful!");
  registrationForm.reset();
});

function displayError(message) {
  errorMessages.innerHTML += `<div class="error">${message}</div>`;
}

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function isStrongPassword(password) {
  return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/.test(password);
}

Manejo de JavaScript : Seleccionamos el formulario y el contenedor del mensaje de error usando getElementById. Adjuntamos un detector de eventos al evento de envío del formulario. Cuando se envía el formulario, evitamos su comportamiento predeterminado utilizando event.preventDefault()para manejar el envío del formulario manualmente.

Validación de formulario : Recuperamos los valores de nombre de usuario, correo electrónico y contraseña.

Realizamos una validación básica: el nombre de usuario no debe estar vacío, el correo electrónico debe tener un formato válido, la contraseña debe tener al menos 8 caracteres y contener al menos una letra mayúscula, una letra minúscula, un dígito y un carácter especial.

Manejo de errores : si alguna validación falla, mostramos el mensaje de error correspondiente. Los mensajes de error se muestran en el errorMessagesdiv.

Restablecer formulario : tras el registro exitoso (en este caso, una alerta simple), restablecemos el formulario usandoregistrationForm.reset()

Actualmente, el código utiliza un alertpara indicar un registro exitoso. En un escenario real, es posible que desee implementar una llamada AJAX para enviar los datos a un servidor para su procesamiento y manejar la respuesta en consecuencia. Pero eso no es lo que vamos a discutir, como se mencionó al comienzo de este tutorial.

En general, este ejemplo cubre la creación de formularios, el manejo de formularios con JavaScript, la validación de formularios mediante expresiones regulares y la visualización dinámica de mensajes de error personalizados, lo que demuestra un formulario de registro de usuario básico con validación del lado del cliente.

Botones de radio

Los botones de opción son un elemento de formulario común que se utiliza para seleccionar una opción de un conjunto de opciones. En JavaScript, puede manipular botones de opción para recuperar selecciones de usuario y realizar acciones basadas en esas selecciones.

Cómo crear botones de radio

Puede utilizar botones de opción para que los usuarios seleccionen solo una opción de un conjunto de opciones. En HTML, puede crear botones de opción utilizando el <input>elemento con el typeatributo establecido en "radio". Un grupo de botones de opción con el mismo nameatributo forma un grupo de opción.

He aquí un ejemplo:

<!DOCTYPE html>
<html>
  <body>
    <form id="languageForm">
      <p>Select your favorite programming language:</p>
      <div>
        <input type="radio" name="language" value="JavaScript" id="js" />
        <label for="js">JavaScript</label>
      </div>
      <div>
        <input type="radio" name="language" value="Python" id="python" />
        <label for="python">Python</label>
      </div>
      <div>
        <input type="radio" name="language" value="Java" id="java" />
        <label for="java">Java</label>
      </div>
      <!-- More language options can be added here -->
    </form>
  </body>
</html>

Utilice los atributos idy forpara accesibilidad, vinculando la etiqueta al botón de opción correspondiente.

Cómo recuperar el valor del botón de opción seleccionado

Ahora, analicemos cómo recuperar el valor del botón de opción seleccionado usando JavaScript.

    <!-- HTML -->
    <button id="btn">Show Selected Language</button>
    <p id="output"></p>

    <script>
      const btn = document.querySelector("#btn");
      const radioButtons = document.querySelectorAll('input[name="language"]');
      const output = document.getElementById("output");

      btn.addEventListener("click", () => {
        let selectedLanguage;
        for (const radioButton of radioButtons) {
          if (radioButton.checked) {
            selectedLanguage = radioButton.value;
            break;
          }
        }
        // Displaying the output:
        output.innerText = selectedLanguage
          ? `You selected ${selectedLanguage}`
          : `You haven't selected any language`;
      });
    </script>

Así es como funciona el código: el código JavaScript se inicializa seleccionando el botón, los botones de opción y los elementos de salida del documento HTML. Agregamos un detector de eventos de clic al elemento del botón. Cuando se hace clic en el botón, se ejecuta la función dentro del detector de eventos.

Dentro del detector de eventos de clic, iteramos sobre todos los botones de opción de la radioButtonscolección. Verificamos si un botón de opción está marcado usando su checkedpropiedad. Si un botón de opción está marcado, asignamos su valor a la selectedLanguagevariable y salimos del bucle usando break.

Actualizamos el contenido del elemento de salida ( <p>etiqueta con id output) en función de si se selecciona un idioma. Si se selecciona un idioma ( selectedLanguagees veraz), mostramos un mensaje indicando el idioma seleccionado. De lo contrario, le solicitamos al usuario que seleccione un idioma.

Evento de cambio de botón de opción

Cuando un botón de opción está marcado o desmarcado, activa un changeevento. Puedes escuchar este evento usando addEventListener(). Dentro del controlador de eventos, puede acceder al estado marcado y al valor del botón de opción usando this.checkedy this.value.

radioButton.addEventListener('change', function (e) {
  if (this.checked) {
    console.log(this.value);
  }
});

Cómo generar dinámicamente botones de radio

Ahora, exploremos cómo generar dinámicamente botones de opción usando JavaScript. Esto es útil cuando desea crear opciones de botones de opción dinámicamente según ciertos criterios o datos.

Supongamos que tenemos una variedad de idiomas y queremos generar dinámicamente botones de opción para cada opción de idioma:

<!DOCTYPE html>
<html>
  <body>
    <div id="languages"></div>

    <script>
      const languageOptions = ["Python", "Javascript", "C++", "Java"];

      // Generate the radio buttons
      const languages = document.querySelector("#languages");
      languages.innerHTML = languageOptions.map((language) => `
          <div>
              <input type="radio" name="language" value="${language}" id="${language}">
              <label for="${language}">${language}</label>
          </div>`).join(' ');
    </script>
  </body>
</html>

Genera dinámicamente botones de opción basados ​​en la languageOptionsmatriz y los inserta en el elemento contenedor ( <div id="languages"></div>). Cada botón de opción tiene una identificación única y un valor correspondiente al nombre del idioma, y ​​las etiquetas están asociadas con sus respectivos botones de opción mediante el foratributo.

Después de generar dinámicamente los botones de opción, ahora agreguemos changedetectores de eventos para manejar los cambios en la selección.

    <!-- HTML -->
    <div id="languages"></div>
    <div id="languageOutput"></div> // we create this one to fetch our selected language output
    
    <!-- Generate the radio buttons -->

// Attaching Change Event Listeners
const radioButtons = document.querySelectorAll('input[name="language"]');
for (const radioButton of radioButtons) {
    radioButton.addEventListener('change', showSelectedlanguage);
}        

// Handling the Change Event
function showSelectedlanguage() {
    if (this.checked) {
        document.querySelector('#languageOutput').innerText = `You selected ${this.value}`;
    }
}

Esto es lo que está pasando:

• Seleccionamos todos los botones de opción con el nameatributo establecido en "language".
• Usamos un for...ofbucle para iterar sobre cada botón de opción y agregamos un changedetector de eventos a cada botón de opción. Este oyente escucha los cambios en el estado de los botones de opción, es decir, cuando se selecciona o deselecciona un botón de opción.
• Definimos una función nombrada showSelectedLanguagepara manejar el evento de cambio desencadenado al seleccionar un botón de opción.
• Dentro de la showSelectedLanguagefunción, primero verificamos si el botón de opción actual ( this) está marcado usando la checkedpropiedad. Si el botón de opción está marcado, actualizamos el contenido de texto de un elemento con la identificación languageOutputusando document.querySelector('#languageOutput'). Este elemento sirve como marcador de posición para mostrar el idioma seleccionado.

Esta configuración garantiza que los botones de opción generados dinámicamente tengan changedetectores de eventos adjuntos, lo que permite el manejo dinámico de las selecciones del usuario.

Casillas de verificación

Cómo crear una casilla de verificación HTML

Primero creemos una casilla de verificación usando el <input>elemento y escriba el atributo establecido en "casilla de verificación". asociémoslo con la etiqueta para una mejor accesibilidad.

<label for="agree">
   <input type="checkbox" id="agree" name="agree" value="yes"> I agree to the terms
</label>

Cómo comprobar si una casilla de verificación está marcada

Una casilla de verificación en HTML puede existir en dos estados: marcada y sin marcar. Y podemos determinar cuál está activo usando checkedla propiedad. Si es así true, la casilla de verificación está marcada; de lo contrario, no está marcada. Ejemplo:

<!DOCTYPE html>
<html>
<body>
    <label for="agree">
        <input type="checkbox" id="agree" name="agree"> I agree to the terms
    </label>

    <script>
        const checkbox = document.getElementById('agree');
        console.log(checkbox.checked);
    </script>
</body>
</html>

Cómo obtener valores de casilla de verificación

En los formularios HTML, cuando se marca una casilla de verificación y se envía el formulario, el navegador incluye la casilla de verificación en los datos del formulario con su nameatributo como clave y el valueatributo (si se especifica) como valor. Pero si la casilla de verificación no está marcada, no se incluye en absoluto en los datos del formulario.

<label for="agree">
    <input type="checkbox" id="agree" name="agree"> I agree to the terms
</label>

<button id="btn">Show Value</button>
<script>
    const checkbox = document.querySelector('#agree');
    const btn = document.querySelector('#btn');
    btn.onclick = () => {
       alert(checkbox.value);
    };
</script>

Básicamente, el punto es: cuando se marca una casilla de verificación y se incluye en los envíos de formularios, el navegador envía 'on'de forma predeterminada el valor si no valuese define explícitamente ningún atributo para el elemento de entrada de la casilla de verificación. Para manejar con precisión el estado marcado de una casilla de verificación usando JavaScript, use la checkedpropiedad en lugar de confiar únicamente en el valueatributo.

Cómo manejar varias casillas de verificación

A veces, es posible que necesite trabajar con varias casillas de verificación con el mismo nombre y desee recuperar los valores de las casillas de verificación seleccionadas. He aquí un ejemplo:

<!DOCTYPE html>
<html>
  <body>
    <p>Select your preferred languages:</p>
    <label for="l1">
      <input type="checkbox" name="language" value="C++" id="l1" />C++
    </label>
    <label for="l2">
      <input type="checkbox" name="language" value="Python" id="l2" />Python
    </label>
    <label for="l3">
      <input type="checkbox" name="language" value="Java" id="l3" />Java
    </label>
    <p>
      <button id="btn">Get Selected Languages</button>
    </p>

    <script>
      const btn = document.querySelector("#btn");
      btn.addEventListener("click", () => {
        const checkboxes = document.querySelectorAll(
          'input[name="language"]:checked'
        );
        const selectedLanguages = Array.from(checkboxes).map(
          (checkbox) => checkbox.value
        );
        alert("Selected Languages: " + selectedLanguages.join(", "));
      });
    </script>
  </body>
</html>

En este ejemplo, tenemos casillas de verificación para seleccionar lenguajes de programación preferidos.

• Cuando se hace clic en el botón, se activa un detector de eventos. Dentro del detector de eventos, seleccionamos todas las casillas con el atributo de nombre "idioma" que estén marcadas.
• Luego convertimos la NodeList devuelta por querySelectorAll()en una matriz usando Array.from().
• Finalmente, asignamos la matriz para recuperar los valores de las casillas de verificación seleccionadas y mostrarlos usando alert().

Cómo marcar/desmarcar todas las casillas de verificación

Ahora, creemos una funcionalidad para marcar o desmarcar todas las casillas a la vez:

<!DOCTYPE html>
<html>
  <body>
    <p>
      <button id="btn">Check / Uncheck All</button>
    </p>
    <p>Select your preferred languages:</p>
    <label for="l1">
      <input type="checkbox" name="language" value="C++" id="l1" />C++
    </label>
    <label for="l2">
      <input type="checkbox" name="language" value="Python" id="l2" />Python
    </label>
    <label for="l3">
      <input type="checkbox" name="language" value="Java" id="l3" />Java
    </label>
    <script src="script.js"></script>
  </body>
</html>

Código javascript:

// function to check or uncheck all checkboxes
function check(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="language"]');

  // Iterate through each checkbox
  checkboxes.forEach((checkbox) => {
    // Set the checked property of each checkbox to the value of the 'checked' parameter
    checkbox.checked = checked;
  });
}

// function to check all checkboxes and change button behavior to uncheck all
function checkAll() {
  check();
  this.onclick = uncheckAll;
}

// function to uncheck all checkboxes and change button behavior to check all
function uncheckAll() {
  check(false);
  this.onclick = checkAll;
}

const btn = document.querySelector("#btn");

btn.onclick = checkAll;

En este ejemplo, tenemos un botón llamado "Marcar/Desmarcar todo".

• Cuando se hace clic en el botón por primera vez, se pretende marcar todas las casillas de verificación. Por lo tanto, checkAllse asigna la función para manejar esta acción ( const btn = document.querySelector("#btn");).
• Si se vuelve a hacer clic en el botón, se desmarcan todas las casillas de verificación. Definimos funciones check(), checkAll()y uncheckAll()para manejar la marcación y desmarcación de casillas de verificación.
• Inicialmente asignamos checkAll()el evento del botón onclicky luego cambiamos entre checkAll()y uncheckAll()según el estado actual de las casillas de verificación.

El enfoque alternativo podría ser:

function checkAll(checked = true) {
  const checkboxes = document.querySelectorAll('input[name="language"]');
  checkboxes.forEach((checkbox) => {
    checkbox.checked = checked;
  });
}

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  // Find the first checkbox with the name attribute set to 'language'
  const firstCheckbox = document.querySelector('input[name="language"]');
  // Check if the first checkbox is checked
  const isChecked = firstCheckbox.checked;
  // Call the checkAll function with the opposite state of the first checkbox
  checkAll(!isChecked);
});

Aquí, seleccionamos la primera casilla de verificación con el nombre "idioma" para determinar su estado actual marcado. Luego llamamos checkAll()con el estado opuesto.

Cómo generar casillas de verificación dinámicamente

<!DOCTYPE html>
<html>
  <body>
    <div id="languages"></div>

    <script>
      const languageOptions = ["Python", "Javascript", "C++", "Java"];

      // Generate the checkboxes
      const html = languageOptions
        .map(
          (language) => `<label for="language-${language}">
                <input type="checkbox" name="language" id="language-${language}" value="${language}"> ${language}
            </label>`
        )
        .join(" ");
      document.querySelector("#languages").innerHTML = html;
    </script>
  </body>
</html>

Así es como funciona:

• Definimos una matriz languageOptionsque contiene nombres de idiomas.
• Usamos el map()método para recorrer la languageOptionsmatriz y generar una matriz de cadenas HTML para cada idioma.
• Cada cadena HTML comprende un labelelemento asociado con una inputcasilla de verificación. La inputcasilla de verificación incluye atributos apropiados como type, name, idy value, derivados dinámicamente del nombre del idioma.
• Unimos la matriz de cadenas HTML en una sola cadena usando join(' ').
• Finalmente, configuramos la innerHTMLpropiedad del <div>elemento raíz con la identificación languagesde la cadena HTML generada, representando así casillas de verificación para cada lenguaje de programación.

Seleccionar elemento:

El <select>elemento en HTML proporciona una lista desplegable de opciones para que los usuarios elijan. Permite selecciones únicas o múltiples. Ejemplo:

<select id="cities">
    <option value="JAI">Jaipur</option>
    <option value="DEL">New Delhi</option>
    <option value="UDR">Udaipur</option>
    <option value="MUM">Mumbai</option>
</select>

Por defecto, un <select>elemento permite una única selección. Para habilitar selecciones múltiples, agregue el multipleatributo.

<select id="cities" multiple>

Los usuarios ahora pueden seleccionar varias frutas manteniendo presionada la tecla Ctrl (o Cmd en Mac) mientras hacen clic.

Cómo interactuar con un elemento seleccionado:

Para interactuar con un <select>elemento usando JavaScript, usamos el HTMLSelectElementtipo, que proporciona propiedades útiles como selectedIndexy value. Ejemplo:

<script>
const selectElement = document.getElementById('cities');
console.log(selectElement.selectedIndex); // Returns the index of the selected option
console.log(selectElement.value); // Returns the value of the selected option
console.log(selectElement.multiple); // Returns true if multiple selections are allowed
</script>

JavaScript le permite manejar eventos en el <select>elemento, como cuando un usuario selecciona una opción. Ejemplo:

<button id="btn">Get Selected City</button>
    <script>
      const btn = document.querySelector("#btn");
      const selectElement = document.getElementById("cities");
      btn.onclick = (event) => {
        event.preventDefault();
        const selectedCity =
          selectElement.options[selectElement.selectedIndex].text;
        alert(`Selected city: ${selectedCity}, 
        Index: ${selectElement.selectedIndex}`);
      };
    </script>

Usando la valuepropiedad: La valuepropiedad representa el valor de la opción seleccionada. Entendámoslo con el ejemplo:

<select id="cities">
    <option value="">Jaipur</option> 
    <option value="DEL">New Delhi</option>
    <option value="UDR">Udaipur</option>
    <option>Mumbai</option>
</select>

const btn = document.querySelector("#btn");
const selectElement = document.querySelector("#cities");

btn.onclick = (event) => {
    event.preventDefault();
    alert(selectElement.value);
};

• Si se selecciona "Jaipur", esto significa que tenemos una cadena vacía ya que el atributo de valor está vacío en nuestro HTML.
• Si una opción carece de un atributo de valor, la propiedad de valor del cuadro de selección se convierte en el texto de la opción seleccionada. Ejemplo: si se selecciona "Mumbai", la propiedad de valor es "Mumbai".
• Si se seleccionan varias opciones, la valuepropiedad del cuadro de selección se deriva de la primera opción seleccionada según las reglas anteriores.

Cómo acceder a las opciones con JavaScript

El HTMLOptionElementtipo representa <option>elementos individuales dentro de un <select>elemento en JavaScript. Proporciona propiedades como index, selected, texty valuepara acceder a información sobre cada opción.

const selectElement = document.getElementById('cities');
const secondOptionText = selectElement.options[1].text; // Accessing text of the second option
const secondOptionValue = selectElement.options[1].value; // Accessing value of the second option

Cómo manejar selecciones múltiples:

Cuando un <select>elemento permite selecciones múltiples, puede recorrer sus opciones para encontrar cuáles están seleccionadas y recuperar sus valores de texto.

const selectElement = document.getElementById('cities');
const selectedOptions = Array.from(selectElement.options).filter(option => option.selected);
const selectedValues = selectedOptions.map(option => option.text); 

El resultado será una matriz que contiene texto de las opciones seleccionadas. En su lugar, podemos usarlo option.valuepara obtener una matriz de valores. Ejemplo:

<!DOCTYPE html>
<html>
  <body>
    <select id="cities" multiple>
      <option value="JAI">Jaipur</option>
      <option value="DEL">New Delhi</option>
      <option value="UDR">Udaipur</option>
      <option value="MUM">Mumbai</option>
    </select>

    <button id="btn">Get Selected Cities</button>
    <script>
      const btn = document.querySelector("#btn");
      const selectElement = document.querySelector("#cities");

      btn.onclick = (event) => {
        event.preventDefault();
        const selectedOptions = Array.from(selectElement.options)
          .filter((option) => option.selected)
          .map((option) => option.text);
        alert("Selected City: " + selectedOptions.join(", "));
      };
    </script>
  </body>
</html>

• Cuando se hace clic en el botón, el script recopila las opciones seleccionadas filtrando las opciones según la selectedpropiedad. Luego asigna las opciones seleccionadas para recuperar su contenido de texto.
• Finalmente, muestra los idiomas seleccionados en un mensaje de alerta.

Veamos un ejemplo: Administrador de tareas (Agregar y quitar tareas)

<!DOCTYPE html>
<html>
  <style>
    #container {
      max-width: 540px;
      margin: 50px auto;
    }

    form {
      display: flex;
      flex-direction: column;
    }
  </style>
  <body>
    <div id="container">
      <form>
        <label for="task">Task:</label>
        <input
          type="text"
          id="task"
          placeholder="Enter a task"
          autocomplete="off"
        />

        <button id="btnAdd">Add Task</button>

        <label for="taskList">Task List:</label>
        <select id="taskList" name="taskList" multiple></select>

        <button id="btnRemove">Remove Selected Tasks</button>
      </form>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Esta estructura HTML incluye campos de entrada para ingresar descripciones de tareas, botones para agregar y eliminar tareas y un <select>elemento para mostrar la lista de tareas. Agregamos un poco de CSS para mayor claridad. Veamos el código Javascript ahora:

const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const taskList = document.querySelector('#taskList');
const taskInput = document.querySelector('#task');

btnAdd.onclick = (e) => {
    e.preventDefault();

    // Validate the task input
    if (taskInput.value.trim() === '') {
        alert('Please enter a task description.');
        return;
    }

    // Create a new task option
    const option = new Option(taskInput.value, taskInput.value);
    taskList.add(option, undefined);

    // Reset the task input
    taskInput.value = '';
    taskInput.focus();
};

btnRemove.onclick = (e) => {
    e.preventDefault();

    // Save the selected tasks
    let selectedTasks = [];

    for (let i = 0; i < taskList.options.length; i++) {
        selectedTasks[i] = taskList.options[i].selected;
    }

    // Remove selected tasks
    let index = taskList.options.length;
    while (index--) {
        if (selectedTasks[index]) {
            taskList.remove(index);
        }
    }
};

Explicación: seleccionamos los elementos necesarios del HTML y adjuntamos detectores de eventos a los botones "Agregar tarea" y "Eliminar tareas seleccionadas". Cuando se hace clic en el botón "Agregar tarea", creamos una nueva opción de tarea basada en el valor del campo de entrada y la agregamos al <select>elemento. Cuando se hace clic en el botón "Eliminar tareas seleccionadas", eliminamos las tareas seleccionadas del <select>elemento.

Diferencia entre cambio y evento de entrada

El evento de entrada en JavaScript se activa cada vez que cambia el valor de una entrada, <select>o <textarea>elemento. A diferencia del evento de cambio, que espera a que se confirme un valor (por ejemplo, cuando una entrada pierde el foco), el evento de entrada se activa continuamente a medida que cambia el valor. El evento de entrada básicamente proporciona una forma de responder a la entrada del usuario en tiempo real. Ejemplo:

<!DOCTYPE html>
<html>
<body>
    <label for="userInput">Enter Your Name:</label>
    <input type="text" id="userInput" placeholder="Your name">
    <p>Your name is: <span id="displayName"></span></p>
</body>
</html>

<script>
    const userInput = document.getElementById('userInput');
    const Name = document.getElementById('displayName');

    userInput.addEventListener('input', function() {
        Name.textContent = userInput.value || 'Guest!';
    });
</script>

• Este código JavaScript selecciona el campo de entrada con el ID "userInput" y el elemento span con el ID "displayName".
• Se adjunta un detector de eventos al evento de entrada del campo userInput.
• Cuando se activa el evento de entrada (por ejemplo, al escribir en el campo de entrada), el controlador de eventos actualiza el contenido de texto del displayNameintervalo dinámicamente para reflejar el nombre ingresado, o muestra "Anónimo" si el campo de entrada está vacío.
• Ahora, si cambia 'entrada' por 'cambiar' aquí userInput.addEventListener('input', function()de esta manera: userInput.addEventListener('change', function(), el detector de eventos se activará solo cuando el campo de entrada pierda el foco después de que se haya ingresado un valor (en lugar de hacerlo continuamente mientras el valor se cambia en realidad). tiempo).

Conclusión

Al comprender los fundamentos de los elementos, atributos y eventos de los formularios HTML, puede crear formularios web dinámicos y fáciles de usar que mejoran la experiencia del usuario.

JavaScript juega un papel crucial en el manejo de envíos de formularios, validar las entradas de los usuarios y proporcionar comentarios en tiempo real a los usuarios.

A través de ejemplos prácticos y explicaciones detalladas, en esta guía ha aprendido a trabajar con botones de opción, casillas de verificación, elementos de selección y a manejar selecciones múltiples.

Continúe explorando y experimentando con los conceptos presentados aquí para crear formularios sólidos e intuitivos para sus aplicaciones web.

¿Estás cansado de declaraciones voluminosas sí o si no? El operador ternario de JavaScript ofrece una solución poderosa. Esta práctica herramienta le permite condensar lógica condicional compleja en una sola línea, haciendo que su código sea más limpio, elegante y eficiente.

En este artículo, profundizaremos en el operador ternario, comprenderemos su sintaxis y mostraremos ejemplos del mundo real para ayudarlo a comprender cómo funciona para aprovechar todo su potencial.

Esto es lo que cubriremos:

1. ¿Qué es un operador ternario?
2. Cómo utilizar el operador ternario
3. Cómo refactorizar declaraciones if-else al operador ternario
4. Cómo encadenar operadores ternarios
5. Mejores prácticas al utilizar el operador ternario
6. Conclusión

¿Qué es un operador ternario?

Un operador ternario es un operador condicional en JavaScript que evalúa una expresión condicional y devuelve un valor verdadero o falso.

Para entender cómo funciona esto, echemos un vistazo más de cerca a su sintaxis a continuación:

conditionalExpression ? truthyValue : falsyValue

Según la sintaxis anterior, es condionalExpressionla expresión que sirve como punto de evaluación, determinando un valor verdadero o falso.

Después del ?(signo de interrogación), se devuelve el valor proporcionado en caso de que la expresión se evalúe como verdadera, mientras que el valor que sigue a :(dos puntos) se devuelve si la expresión da como resultado un resultado falso.

El truthyValuey falsyValuepuede ser cualquier cosa en JavaScript. Puede abarcar varias entidades como funciones, valores almacenados en variables, objetos, números, cadenas y más. El operador ternario le otorga la flexibilidad de devolver cualquier valor deseado, ofreciendo versatilidad en su código.

Cómo utilizar el operador ternario

Ahora que hemos examinado la sintaxis y su funcionalidad, exploremos cómo utilizar el operador ternario para profundizar nuestra comprensión.

Considere este escenario: estamos creando una plataforma de juegos que solo permite usuarios mayores de 18 años. Diseñaremos una función para comprobar la edad de un usuario. Si son menores de 18 años, se les negará el acceso; de lo contrario, podrán acceder a la plataforma.

function canAccessPlatform(age) {
  const shouldAccess = age >= 18 ? true : false;

  return shouldAccess;
}

A partir del fragmento de código anterior, creamos una función, canAccessPlatformque evalúa si un usuario, representado por su age parámetro, cumple con el requisito para acceder a la plataforma.

Utiliza un operador ternario para determinar si la edad es 18 o más, asignando truesi shouldAccessse cumple la condición y falseen caso contrario. Finalmente, devuelve el valor de shouldAccess, indicando si el usuario puede acceder a la plataforma o no.

Si la edad es 18 años o más, la expresión se vuelve verdadera, por lo que el operador devuelve verdadero después de ?. De lo contrario, devuelve falso. Este resultado se guarda en una variable y luego se devuelve desde la función.

Si bien este caso de uso básico simplifica el código y mejora la legibilidad al reemplazar bloques if-else innecesarios, es importante usarlo con moderación para evitar saturar y complicar el código. Más adelante, analizaremos las mejores prácticas para utilizar el operador ternario.

Aquí hay otro ejemplo que ilustra el uso del operador ternario. Crearemos una función para determinar si un número es par o impar. Consulte el fragmento de código a continuación:

function checkEvenOrOdd(number) {
  const result = number % 2 === 0 ? "even" : "odd";
  return result;
}

// Usage:
console.log(checkEvenOrOdd(4)); // Output: "even"
console.log(checkEvenOrOdd(7)); // Output: "odd"

Del fragmento de código anterior:

• Definimos una función checkEvenOrOddque toma un numberparámetro.
• Dentro de la función usamos el operador ternario para comprobar si el número es par o impar.
• Si el número módulo 2 es igual a 0 (lo que significa que es divisible por 2 sin resto), entonces la condición se evalúa como verdadera y la cadena "par" se asigna a la resultvariable.
• Si la condición se evalúa como falsa (lo que significa que el número es impar), se asigna la cadena "impar" result.
• Finalmente, la función devuelve el valor de result, que indica si el número es par o impar.

Este código muestra cómo el operador ternario verifica rápidamente si un número es par o impar, lo que hace que el código sea más fácil de leer y comprender.

Cómo refactorizar declaraciones if-else al operador ternario

Una ventaja del operador ternario es evitar bloques if-else innecesarios, que pueden complicar la legibilidad y el mantenimiento del código. En esta sección, refactorizaremos algunas declaraciones if-else en operaciones ternarias, brindando una comprensión más clara de cómo usar operadores ternarios de manera efectiva.

Comencemos con nuestro primer ejemplo:

function decideActivity(weather) {
  let activity;

  if (weather === "sunny") {
    activity = "go out";
  } else {
    activity = "stay in";
  }

  console.log(activity);
}

// Usage
console.log(decideActivity("raining")); // Output: "stay in"
console.log(decideActivity("snowing")); // Output: "stay in"
console.log(decideActivity("sunny")); // Output: "go out"

Esta función, decideActivitytoma un weatherparámetro y determina la actividad adecuada en función de las condiciones climáticas.

Si el tiempo es "soleado", sugiere "salir". En caso contrario, aconseja "quedarse en casa". Cuando llamamos a la función con diferentes condiciones climáticas como "lloviendo" o "nevando", genera la recomendación de actividad correspondiente usando console.log().

Por ejemplo, al llamar decideActivity("raining")se obtendrá "permanecer en". Del mismo modo, decideActivity("snowing")también genera "permanecer en". Cuando decideActivity("sunny")se llama, el resultado es "salir". Esta sencilla función ayuda a decidir actividades en función de las condiciones climáticas proporcionadas.

Ahora podemos refactorizar estos bloques de código para que parezcan más simples y ordenados. Veamos cómo hacerlo a continuación:

function decideActivity(weather){
   const activity = weather === "sunny" ? "go out" ? "stay in";
   
   console.log(activity)

}

// Usage
console.log(decideActivity("raining")); // Output: "stay in"
console.log(decideActivity("snowing")); // Output: "stay in"
console.log(decideActivity("sunny")); // Output: "go out"

Del ejemplo de código anterior, esta función decideActivityutiliza el operador ternario para determinar rápidamente la actividad en función de las condiciones climáticas. Comprueba si el tiempo es "soleado" y asigna "salir" si es cierto, en caso contrario "quedarse dentro".

Hemos simplificado las declaraciones if-else en un operador ternario de una sola línea. Esto hace que nuestro código sea más limpio, claro y fácil de leer.

Echemos un vistazo a otro ejemplo:

function checkNumber(number) {
  let result;
  if (number > 0) {
    result = "positive";
  } else {
    result = "non-positive";
  }
  return result;
}

// Usage
console.log(checkNumber(5)); // Output: "positive"
console.log(checkNumber(-2)); // Output: "non-positive"

Expliquemos qué está haciendo el código anterior:

• Definición de función : Comenzamos definiendo una función llamada checkNumberque toma un único parámetro llamado number.
• Declaración de variable : dentro de la función, declaramos una variable nombrada resultsin asignarle ningún valor todavía. Esta variable almacenará el resultado de nuestra verificación.
• Declaración condicional (if-else) : tenemos una declaración condicional que verifica si el numberparámetro es mayor que 0.
• Si la condición es verdadera (lo que significa que el número es positivo), asignamos la cadena "positiva" a la resultvariable.
• Si la condición es falsa (lo que significa que el número no es positivo (lo que significa que es negativo o cero), asignamos la cadena "no positivo" a la resultvariable.
• Declaración de devolución : finalmente, devolvemos el valor almacenado en la resultvariable.
• Llamadas a funciones : luego llamamos a la checkNumberfunción dos veces con diferentes argumentos: 5 y -2.

Cuando llamamos checkNumber(5), la función devuelve "positivo", que luego se registra en la consola.

De manera similar, cuando llamamos checkNumber(-2), la función devuelve "no positivo", que nuevamente se registra en la consola.

Esta función determina de manera eficiente si un número es positivo o no positivo y proporciona el resultado apropiado según la condición.

Simplifiquemos y mejoremos el código reescribiéndolo usando un operador ternario.

function checkNumber(number) {
  const result = number > 0 ? "positive" : "non-positive";
  return result;
}

// Usage
console.log(checkNumber(5)); // Output: "positive"
console.log(checkNumber(-2)); // Output: "non-positive"

¡Gran trabajo! Al refactorizar la función y utilizar el operador ternario para la evaluación condicional, logramos un código más limpio, conciso y legible.

Este código, que utiliza el operador ternario, parece más conciso y elegante. Determina de manera eficiente si un número es positivo o no positivo, lo que hace que el código sea más limpio y fácil de entender. Cuando llamamos checkNumber(5), devuelve "positivo", mientras que checkNumber(-2)devuelve "no positivo". En general, el operador ternario mejora la legibilidad del código.

Cómo encadenar operadores ternarios

Cuando se trata de controles condicionales, a veces una sola condición no es suficiente. En tales casos, utilizamos declaraciones 'else-if' junto con 'if/else' para incorporar múltiples condiciones.

Echemos un vistazo a la sintaxis:

function exampleFn() {
  return conditionalExpression1
    ? value1
    : conditionalExpression2
    ? value2
    : conditionalExpression3
    ? value3
    : value4;
}

Esto se puede traducir en una cadena if/else:

function exampleFn() {
  if (conditionalExpression1) {
    return value1;
  } else if (conditionalExpression2) {
    return value2;
  } else if (conditionalExpression3) {
    return value3;
  } else {
    return value4;
  }
}

Exploremos un ejemplo a continuación:

function checkNumber(number) {
  let message;

  if (number > 0) {
    message = "Positive";
  } else if (number === 0) {
    message = "Zero";
  } else {
    message = "Negative";
  }

  return message;
}

// Usage
console.log(checkNumber(5)); // Output: "Positive"
console.log(checkNumber(0)); // Output: "Zero"
console.log(checkNumber(-3)); // Output: "Negative"

Este código anterior define una función llamada checkNumberque toma un numberparámetro y determina su estado (positivo, cero o negativo). Utiliza un bloque if-else con una declaración else-if para evaluar el valor del número. Si el número es mayor que 0 se considera positivo y si es igual a 0 es cero. De lo contrario, es negativo. La función devuelve el resultado.

Refactoricemos este código usando un operador ternario para lograr la misma funcionalidad.

function checkNumber(number) {
  return number > 0 ? "Positive" : number === 0 ? "Zero" : "Negative";
}

// Usage
console.log(checkNumber(5)); // Output: "Positive"
console.log(checkNumber(0)); // Output: "Zero"
console.log(checkNumber(-3)); // Output: "Negative"

¡Eso es todo! Hemos refactorizado la función y, tras un examen más detenido, podemos observar que los operadores están encadenados. Ahora, exploremos cómo funciona el operador ternario encadenado en la checkNumberfunción.

En el primer operador ternario:

• La primera parte number > 0comprueba si el número es mayor que 0.
• Si es verdadero, la expresión devuelve "Positivo".

En el segundo operador ternario (encadenado):

• Si la primera condición es falsa (lo que significa que el número no es mayor que 0), pasa a la siguiente parte de la expresión: number === 0.
• Esta parte comprueba si el número es igual a 0.
• Si es verdadera, la expresión devuelve "Cero".

Y el valor predeterminado:

• Si ninguna de las condiciones anteriores es verdadera (lo que significa que el número no es mayor que 0 ni igual a 0), el valor predeterminado es la última parte de la expresión: "Negative".
• Esta parte actúa como valor predeterminado si no se cumple ninguna de las condiciones anteriores.

En resumen, el operador ternario encadenado evalúa múltiples condiciones en una sola línea de código. Comprueba cada condición secuencialmente y la primera condición que se evalúa como verdadera determina el resultado de toda la expresión. Esto permite una lógica condicional concisa y eficiente.

Examinemos otro ejemplo de operador ternario encadenado.

function getDrink(age) {
  return age >= 21
    ? "Enjoy a cocktail"
    : age >= 18
    ? "Have a beer"
    : age >= 16
    ? "Grab a soft drink"
    : "Sorry, you're too young to drink";
}

// Usage
console.log(getDrink(25)); // Output: "Enjoy a cocktail"
console.log(getDrink(19)); // Output: "Have a beer"
console.log(getDrink(16)); // Output: "Grab a soft drink"
console.log(getDrink(10)); // Output: "Sorry, you're too young to drink"

En el ejemplo de código proporcionado, los operadores ternarios están encadenados para proporcionar diferentes sugerencias de bebidas según la edad proporcionada. Cada expresión condicional de la cadena evalúa un rango de edad específico.

Si la primera condición es verdadera (verdadera), devuelve 'Disfruta de un cóctel'. Si es falso (falso), pasa a la siguiente expresión condicional, y así sucesivamente. Este proceso de encadenamiento continúa hasta que una condición se evalúa como verdadera. Si ninguna de las condiciones de la cadena es verdadera, el último valor se devuelve como alternativa, similar al bloque "else" en una declaración if/else.

El concepto de "encadenar" operadores ternarios implica vincular expresiones condicionales en función del valor de la expresión anterior. Esto se puede comparar con la else ifestructura de una if/elsedeclaración, lo que proporciona una forma concisa de manejar múltiples condiciones en JavaScript.

Mejores prácticas al utilizar el operador ternario

El uso eficiente del operador ternario puede mejorar significativamente la legibilidad y la concisión del código. En esta sección, exploraremos las mejores prácticas clave para utilizar el operador ternario de manera efectiva.

1. Manténgalo simple y legible : escriba expresiones concisas que sean fáciles de entender de un vistazo. Evite anidar demasiados operadores ternarios o escribir condiciones demasiado complejas.
2. Úselo para asignaciones simples: los operadores ternarios son ideales para asignaciones simples donde solo hay dos resultados posibles según una condición. Para escenarios más complejos, considere usar if/elsedeclaraciones.
3. Sepa cuándo usarlo : use el operador ternario cuando necesite realizar una verificación condicional simple y asignar un valor según el resultado. Es particularmente útil para asignar valores predeterminados o determinar el valor de una variable en función de una condición.
4. Pruebe minuciosamente : pruebe su código minuciosamente para asegurarse de que el operador ternario se comporte como se espera en diferentes condiciones. Verifique casos extremos y valide la exactitud de los valores asignados.
5. Evite los ternarios anidados: si bien es posible encadenar ternarios, el anidamiento excesivo puede generar código difícil de leer. Prefiera claridad y considere usarlo if/elsepara condiciones complejas.
6. Mantenga los ternarios breves: intente mantener las expresiones ternarias breves y concisas. Los ternarios largos pueden ser difíciles de leer y comprender, lo que genera desafíos de mantenimiento del código.

Estas mejores prácticas describen pautas para utilizar eficazmente el operador ternario. Si bien no son reglas estrictas, ofrecen información valiosa para mejorar la claridad y legibilidad de su código.

Conclusión

Al concluir este artículo, obtendrá una comprensión integral del operador ternario: su aplicación en tareas diarias de codificación, conversión de declaraciones if/else, operadores de encadenamiento y mejores prácticas. Estoy seguro de que ha adquirido conocimientos valiosos que mejorarán sus prácticas de codificación utilizando el operador ternario.

¡Gracias por leer y hasta la próxima!

Información del contacto

¿Quieres ponerte en contacto conmigo? No dudes en comunicarte a través de cualquiera de los siguientes canales:

• Twitter / X: @developeraspire
• Correo electrónico: desarrolladoraspire5@gmail.com

¿Cómo se puede detectar el modo oscuro en CSS y JavaScript? ¿Cómo puedes anularlo manualmente con un botón de alternancia? ¿Y cómo se puede crear un ícono de sol y luna con SVG?

En este tutorial, aprenderá cómo detectar el modo oscuro en CSS y JavaScript, y creará un botón de alternancia con SVG para anular el comportamiento predeterminado. Utilizará HTML, CSS y JavaScript sin formato, por lo que no necesita ningún requisito preliminar antes de comenzar.

También puedes ver este artículo como vídeo en YouTube.

Tabla de contenido

• Cómo manejar el modo oscuro con CSS
• Cómo codificar un icono de sol con SVG
• Cómo detectar el modo oscuro en JavaScript
• Cómo codificar un icono de luna con SVG
• Cómo alternar el modo oscuro con JavaScript
• Próximos pasos

Cómo manejar el modo oscuro con CSS

Supongamos que tiene un sitio web sencillo con algo de texto. De forma predeterminada, configura el color del texto en negro y el color de fondo en blanco. Implementar el modo oscuro para este sitio con CSS es muy sencillo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Dark Mode</title>
    <link rel="stylesheet" href="index.css" />
    <script src="index.js" defer></script>
  </head>

  <body>
    <p>
      How to detect dark mode in CSS and in JavaScript? How can we override it
      manually with a toggle button? In this quick tutorial, we look into
      detecting dark mode in CSS and JavaScript, and then we create a toggle
      button with SVG to override the default behavior.
    </p>
  </body>
</html>

Todo lo que necesitas hacer es agregar una consulta de medios y establecer una condición. Con esta condición, configura las siguientes declaraciones CSS para que solo sean válidas si el esquema de color preferido es oscuro.

Dentro de esta consulta de medios, puede definir los colores para el modo oscuro. En este caso, inviertes los colores y estableces el color del texto en blanco y el color de fondo en negro:

body {
  font-family: Montserrat;
  margin: 50px;
  max-width: 500px;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Esto tomará la configuración de su sistema operativo o configuración del navegador. De forma predeterminada, proviene del sistema operativo, pero el navegador puede decidir anularlo. En Google Chrome, puede encontrar esta configuración en "Apariencia". De forma predeterminada, sigue la configuración del dispositivo.

Lo bueno de la solución CSS es que si cambia esta configuración mientras visita el sitio web, el estilo se actualizará automáticamente.

De esta manera, puede establecer un estilo personalizado para el elemento del cuerpo y también para cualquier otro elemento.

Sin embargo, en un caso no funciona. No puedes diseñar lo que hay dentro de un elemento HTML Canvas con CSS. Si creaste un juego completamente desde JavaScript usando Canvas API o Three.js, también debes configurar los colores para el modo oscuro en JavaScript.

En los próximos pasos, cubriremos esto y veremos cómo crear un botón de alternancia SVG para cambiar entre los modos claro y oscuro.

Cómo codificar un icono de sol con SVG

Antes de aprender a manejar el modo oscuro en JavaScript, hagamos un desvío rápido y veamos cómo codificar un botón de alternancia del modo oscuro con SVG. Detectar el modo oscuro es una cosa, pero debes permitir al usuario alternar manualmente entre los modos claro y oscuro.

Consulte mi tutorial anterior si necesita una introducción rápida a la codificación de iconos SVG . Contiene muchos ejemplos excelentes, desde niveles principiantes hasta avanzados. Y si eres nuevo en los SVG, no te preocupes. Estos son ejemplos muy simples.

Entonces, comencemos con el svgelemento. Esto servirá como contenedor para todos los elementos de la imagen. Establezca su tamaño en 30 por 30:

Luego, agrega un círculo. Para un circleelemento, debes establecer las coordenadas centrales del círculo y su radio. Las coordenadas centrales son 15 y el radio es 6. Luego, establece un color con la fillpropiedad:

<svg width="30" height="30">
  <circle cx="15" cy="15" r="6" fill="currentColor" />
</svg>

Para establecer el color, puede utilizar la currentColorpropiedad que asume la colorconfiguración actual de CSS. Esto será útil más adelante cuando alterne los modos oscuro y claro. El icono cambiará de color automáticamente.

Luego, agrega los rayos del sol. Debe usar el lineelemento para esto, donde debe establecer las coordenadas inicial y final. También puede establecer el color del trazo con la strokepropiedad stroke-widthpara agregar grosor y la stroke-linecappropiedad para redondear los extremos de las líneas:

<svg width="30" height="30">
  <circle cx="15" cy="15" r="6" fill="currentColor" />

  <line
    id="ray"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    x1="15"
    y1="1"
    x2="15"
    y2="4"
  ></line>
</svg>

Ahora, una vez que tengas un rayo, puedes reutilizar el mismo rayo para dibujar los demás.

Puedes darle a este rayo idy reutilizarlo con el useelemento. Para los elementos reutilizados, puede establecer una rotación. Establezca el ángulo de rotación y el centro de rotación. Quieres rotar los rayos alrededor del centro del sol, así que configúralo en 15,15. Luego, incrementa la rotación en 45 grados para cada rayo:

<svg width="30" height="30">
  <circle cx="15" cy="15" r="6" fill="currentColor" />

  <line
    id="ray"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    x1="15"
    y1="1"
    x2="15"
    y2="4"
  ></line>

  <use href="#ray" transform="rotate(45 15 15)" />
  <use href="#ray" transform="rotate(90 15 15)" />
  <use href="#ray" transform="rotate(135 15 15)" />
  <use href="#ray" transform="rotate(180 15 15)" />
  <use href="#ray" transform="rotate(225 15 15)" />
  <use href="#ray" transform="rotate(270 15 15)" />
  <use href="#ray" transform="rotate(315 15 15)" />
</svg>

Cómo detectar el modo oscuro en JavaScript

Antes de llegar al ícono de la luna, veamos cómo detectar el modo oscuro en JavaScript. Esto puede ser útil al crear un juego, como lo hicimos hace un par de semanas en el tutorial del juego Gorilas JavaScript .

En ese juego, estábamos dibujando en un elemento HTML Canvas con JavaScript. Configuramos todos los colores con JavaScript. Si queremos admitir el modo oscuro, podemos configurar los colores en función de una darkModevariable. Pero ¿cómo detectamos si estamos en modo oscuro? ¿Cómo establecemos el valor de esta variable?

El siguiente código es un fragmento de ejemplo del tutorial del juego anterior. Aquí configuramos el color de relleno antes de dibujar un rectángulo en el lienzo.

Detectar el modo oscuro en JavaScript también es muy sencillo. Curiosamente, esta solución también depende de los selectores de consultas CSS que usaste antes.

Puedes crear un matchMediaobjeto con la misma condición que usamos en CSS. Este método puede comprobar si el documento coincide con una consulta de medios. Pasar prefers-color-scheme: darkcomo argumento:

const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

let darkMode = darkModeMediaQuery.matches;

. . .

function drawBuildings() {
  state.buildings.forEach((building) => {
    ctx.fillStyle = darkMode ? "#254D7E" : "#947285";
    ctx.fillRect(building.x, 0, building.width, building.height);
  });
}

Luego, puede verificar la matchespropiedad de este objeto. Si es cierto, entonces estás en modo oscuro. Puede guardar esto en una variable y, luego, puede usar esta variable para decidir qué colores debe usar al pintar en el elemento del lienzo.

Esta variable, sin embargo, no se actualiza automáticamente cuando cambia entre el modo claro y el modo oscuro. Debe agregar un detector de eventos que detecte si la configuración cambia.

Aquí, definimos una función que verifica la matchespropiedad del objeto entrante para decidir si acaba de cambiar al modo brillante u oscuro:

const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

let darkMode = darkModeMediaQuery.matches;

darkModeMediaQuery.addEventListener("change", (e) => {
  if (e.matches) {
    darkMode = true;
  } else {
    darkMode = false;
  }
});

. . .

function drawBuildings() {
  state.buildings.forEach((building) => {
    ctx.fillStyle = darkMode ? "#254D7E" : "#947285";
    ctx.fillRect(building.x, 0, building.width, building.height);
  });
}

Ahora, si configuras los colores según esta darkModevariable, deberías ver que la apariencia del juego cambia una vez que cambias entre el modo claro y oscuro en la configuración del sistema operativo. Mira esta demostración para verlo en acción.

Cómo codificar un icono de luna con SVG

Antes de discutir la anulación de la configuración predeterminada del sistema operativo con un botón de alternancia, examinemos la otra mitad de nuestro ícono de alternancia: Dibujemos una luna.

Comience con un svgelemento del mismo tamaño y defina una ruta dentro de él. Puede definir un pathelemento estableciendo su datributo. En este atributo, construyes una ruta a partir de una serie de comandos:

Comienza con el comando mover a para ir a la posición inicial. Este comando consta de la letra My la coordenada inicial:

Luego, usa un comando de arco para dibujar el arco exterior de la luna. Este comando puede dar un poco de miedo porque tiene varias propiedades. Veamos que tenemos:

Un comando siempre continúa el comando anterior, por lo que este arco dibujará el arco a partir de las coordenadas del comando de desplazamiento. Los comandos también terminan con las coordenadas del punto final.

Aquí estableces dónde termina el arco. El resto de las propiedades tratan sobre cómo dibujar un arco desde el punto inicial hasta el punto final:

Las dos primeras propiedades son el radio horizontal y vertical de nuestro arco. En nuestro caso, queremos tener el arco de un círculo, por lo que establecemos el mismo valor para ambos. Con el tercer argumento, puedes establecer una rotación. Cuando ambos radios son iguales, esta propiedad no hace diferencia. Puedes dejarlo en cero:

Luego, tenemos la propiedad de bandera de arco grande. Con esto, podrás decidir si ir por el camino largo o corto hasta nuestra coordenada final. Puedes ver que puedes llegar al punto final de múltiples maneras, incluso con los mismos radios.

Hay dos arcos: en el caso del primero, irás por el camino largo y en el caso del segundo, irás por el camino corto. Esta es una bandera, por lo que el valor aquí puede ser 0 o 1:

Finalmente, está la bandera de barrido. Básicamente, esto establece si debes dibujar el arco en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj. Las dos opciones se reflejan entre sí. En el primer caso, lo configuras en cero; en el segundo, lo configuras en uno:

Ahora que tienes un arco, configuras el otro. Aquí, establece el punto final al principio. A las mismas coordenadas que utilizó para el comando de desplazamiento.

Luego puedes usar los mismos radios, pero tienes que cambiar la bandera de arco grande y la bandera de barrido para terminar con una luna:

<svg width="30" height="30">
  <path
    fill="currentColor"
    d="
      M 23, 5
      A 12 12 0 1 0 23, 25
      A 12 12 0 0 1 23, 5"
  />
</svg>

¿Cómo puedes usar estos dos íconos en un botón para alternar el modo claro y el modo oscuro en JavaScript?

Cómo alternar el modo oscuro con JavaScript

Si desea anular la configuración del sistema o del navegador para el modo oscuro con un cambio manual, ya no puede confiar en la consulta de medios CSS. Esto funciona para representar la interfaz de usuario según la configuración, pero no puede anularla desde JavaScript.

En su lugar, puede definir una dark-modeclase y alternarla desde JavaScript.

En CSS, defina una clase que cambiará la misma configuración que hizo antes la consulta de medios. Luego, en JavaScript, puedes usar la misma lógica que tenías antes para obtener la configuración predeterminada y luego agregar o eliminar esta clase.

Puede configurar esta clase en la carga de nuestra página inicial y alternarla si hace clic en un botón:

body {
  font-family: Montserrat;
  margin: 50px;
  max-width: 500px;
}

.dark-mode {
  background-color: black;
  color: white;
}

Ahora, ¿cómo se alterna esto con un botón? En su archivo HTML, agregue un elemento de botón con un controlador de eventos. Luego, mueva ambos SVG dentro de este elemento de botón y asígneles ID. Alternará la visibilidad de estos íconos desde JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Dark Mode</title>
    <link rel="stylesheet" href="index.css" />
    <script src="index.js" defer></script>
  </head>

  <body>
    <p>
      How to detect dark mode in CSS and in JavaScript? How can we override it
      manually with a toggle button? In this quick tutorial, we look into
      detecting dark mode in CSS and JavaScript, and then we create a toggle
      button with SVG to override the default behavior.
    </p>

    <button onclick="toggleDarkMode()">
      <svg width="30" height="30" id="light-icon">
        <circle cx="15" cy="15" r="6" fill="currentColor" />

        <line
          id="ray"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          x1="15"
          y1="1"
          x2="15"
          y2="4"
        ></line>

        <use href="#ray" transform="rotate(45 15 15)" />
        <use href="#ray" transform="rotate(90 15 15)" />
        <use href="#ray" transform="rotate(135 15 15)" />
        <use href="#ray" transform="rotate(180 15 15)" />
        <use href="#ray" transform="rotate(225 15 15)" />
        <use href="#ray" transform="rotate(270 15 15)" />
        <use href="#ray" transform="rotate(315 15 15)" />
      </svg>
      <svg width="30" height="30" id="dark-icon">
        <path
          fill="currentColor"
          d="
          M 23, 5
          A 12 12 0 1 0 23, 25
          A 12 12 0 0 1 23, 5"
        />
      </svg>
    </button>
  </body>
</html>

También puede desarmar la apariencia predeterminada del elemento del botón en CSS, excepto la propiedad del cursor. Deberías tener eso como puntero:

. . .

button {
  all: unset;
  cursor: pointer;
}

. . .

Ahora, implementemos el controlador de eventos en JavaScript. Primero necesitas acceder a los íconos SVG por ID:

const lightIcon = document.getElementById("light-icon");
const darkIcon = document.getElementById("dark-icon");

. . .

Luego, agregue la dark-modeclase al bodyelemento en caso de que esté en modo oscuro y oculte uno de los íconos SVG según la darkModevariable. Detectas el modo oscuro como lo hiciste antes:

. . .

// Check if dark mode is preferred
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
let darkMode = darkModeMediaQuery.matches;

// Set dark-mode class on body if darkMode is true and pick icon
if (darkMode) {
  document.body.classList.add("dark-mode");
  darkIcon.setAttribute("display", "none");
} else {
  lightIcon.setAttribute("display", "none");
}

. . .

Y finalmente, podemos implementar la función que invierte la darkModepropiedad. Esta función alterna la dark-modeclase en el elemento del cuerpo y alterna los íconos SVG:

. . .

// Toggle dark mode on button click
function toggleDarkMode() {
  // Toggle darkMode variable
  darkMode = !darkMode;

  // Toggle dark-mode class on body
  document.body.classList.toggle("dark-mode");

  // Toggle light and dark icons
  if (darkMode) {
    lightIcon.setAttribute("display", "block");
    darkIcon.setAttribute("display", "none");
  } else {
    lightIcon.setAttribute("display", "none");
    darkIcon.setAttribute("display", "block");
  }
}

Ahora, esto funciona: de forma predeterminada, todavía tienes la configuración del sistema operativo o del navegador. Pero una vez que haga clic en este botón, lo anulará manualmente.

Próximos pasos

Con todo esto en su lugar, tiene una funcionalidad que toma la configuración del modo oscuro del navegador o del sistema operativo de forma predeterminada, y puede anularla con un atractivo botón de alternancia. En la versión de YouTube de este tutorial , también puede aprender cómo localStorageguardar esta configuración para la próxima sesión.

Si desea obtener más información sobre los SVG, consulte SVG-tutorial.com , donde puede obtener más información sobre los SVG desde niveles principiantes hasta avanzados con muchos ejemplos excelentes.

Si desea utilizar este comportamiento en un juego, consulta el tutorial del juego Gorillas JavaScript , donde creamos el juego completo desde cero. Es un enorme tutorial de dos horas que cubre el dibujo en un elemento Canvas con JavaScript y toda la lógica del juego con JavaScript simple.