Apuntes Curso Web

HTML, CSS y JavaScript

Uso de expresiones booleanas en JavaScript

Qué es un valor Booleano

Un valor booleano es un valor lógico expresado en términos de verdadero (true) o falso (false), que sirve principalmente para plantear disyuntivas a nivel de código.

Se puede entender como un interruptor, que pasa de encendido a apagado (on y off), o en su representación númerica, como cero y uno.

Vamos a hacer un ejemplo con un botón que funcione a modo de interruptor, si lo pulsamos una vez mostrará un texto como "encendido", y en la siguiente vez que pulsemos lo cambiará a "Apagado"

  1. Declarar una variable booleana fuera de la función
  2. Hacer una función con un if else que compruebe el valor de la variable anterior
  3. Si el valor de la variable es true hará que muestre el texto "Apagado" y cambiará la variable a false
  4. Si el valor es false mostrará el texto "Encendido" y cambiará su valor a true 

let encendido = false;
function interruptorBombilla() {
    if (encendido == true) {
        document.getElementById('bombilla').textContent = "Apagada";
        encendido = false;
    } else {
        document.getElementById('bombilla').textContent = "Encendida";
        encendido = true;
    }
}

Apagada

Usando funciones asociadas para casos más complejos

En este caso queremos un interruptor que no solo cambie el texto del párrafo, además cambiará el formato de su contenedor, y el texto del propio botón.

El planteamiento es igual que antes, usamos una variable booleana junto a un if else, pero lo que tenemos que hacer en cada caso lo desarrollamos en dos funciones adicionales.

  1. Definimos una variable booleana con el estado inicial
  2. Por comodidad, definimos variables con los elementos del DOM a modificar en ambos modos
  3. Definimos la función que hace de conmutador
  4. Definimos 2 funciones, una para cada modo, con lo que cambia en cada caso

let modo_claro = true;
const BOTON = document.getElementById('btn_modo');
const TITULO = document.getElementById('titulo_modo');
const VENTANA = document.getElementById('ventana_modo');
function controlModo() {
    if (modo_claro == true) {
        modoOscuro();
    } else {
        modoClaro();
    }
}
function modoOscuro() {
    TITULO.textContent = 'Modo Oscuro Activado';
    VENTANA.className = 'modo-oscuro';
    BOTON.textContent = 'Modo Claro';
    BOTON.style.color = 'chocolate';
    BOTON.style.backgroundColor = 'wheat';
    modo_claro = false;
}
function modoClaro() {
    TITULO.textContent = 'Modo Claro Activado';
    VENTANA.className = 'modo-claro';
    BOTON.textContent = 'Modo Oscuro';
    BOTON.style.color = 'lightblue';
    BOTON.style.backgroundColor = 'black';
    modo_claro = true;
}

Estamos usando el modo luminoso

Uso de atributos data- para almacenar información que podamos recuperar y modificar en el script

Los atributos data- pueden funcionar como variables que nos permiten almacenar información en los nodos del documento, para ser usada y modificada cuando necesitemos.

La forma de declararlas es con la raíz "data-" seguida del nombre que vayamos a usar para guardar el dato y a continuación el signo igual y entre comillas el valor asignado, por ejemplo data-modo="oscuro"

La forma a acceder a estos datos desde JavaScript es usando la propiedad dataset del nodo donde se ha definido, seguido del nombre que pusimos después del guión, por ejemplo let tipo = nodo.dataset.modo.

Y la forma de modificar su valor desde JavaScript es de la misma forma que se modifica cualquier otra propiedad de un elemento, por ejemplo: nodo.dataset.modo = "claro".

Hay que tener en cuenta que todos los atributos HTML se almacenan como tipo de datos texto, por lo tanto data-precio="500" al pasarlo como variable al script será de tipo texto y no número, y data-encendido="true" tampoco será un booleano en el script. En ambos casos será necesario convertir el tipo de datos si los necesitamos de ese modo.

Vamos a repetir el ejemplo de la bombilla, pero en este caso el estado de la propia bombilla se almacena en el botón interruptor, en lugar de en una variable booleana externa.

  1. Para trabajar de este modo el botón incorpora ahora un elemento data-encendido que establecemos como "true"
  2. La función asociada al botón recupera en primer lugar el valor de ese data, y en función de lo que sea aplicará el if o el else correspondiente
  3. Y por último guardará el nuevo estado en el mismo data del botón, para que al pulsar de nuevo comience todo el ciclo otra vez

function dataBooleano() {
    const PARR = document.getElementById('data_bombilla');
    let encendida = this.dataset.encendida;
    if (encendida == 'true') {
        PARR.textContent = "Apagada"
        this.dataset.encendida = 'false';
    } else {
        PARR.textContent = "Encendida"
        this.dataset.encendida = 'true';
        
    }
}

nada