const escritorio = {
   altura: "1 metro",
   peso: "30 libras",
   color: "marrón",
   material: "madera",
 };

Un objeto contiene propiedades, o pares de clave-valor. El objeto escritorio tiene cuatro propiedades. Cada propiedad tiene un nombre, que también se le llama clave y, además, tiene su valor correspondiente.

Por ejemplo, la clave altura tiene un valor de "1 metro". Juntos, la clave y el valor conforman una propiedad.

altura: "1 metro",

El objeto escritorio contiene datos sobre un escritorio. De hecho, esta es la razón por la cual usarías un objeto de JavaScript: para guardar datos. También es simple obtener los datos que se guardan en los objetos. Estos aspectos hacen que los objetos sean bastante útiles.

Este artículo te pondrá al día con los objetos en JavaScript:

• Cómo crear un objeto
• Cómo guardar datos en un objeto
• Y cómo obtener datos de dicho objeto

Empecemos por crear un objeto.

Cómo crear un objeto en JavaScript

Crearé un objeto llamado pizza  y le agregaré pares de clave-valor:

const pizza = {
   ingrediente: "queso",
   salsa: "marinara",
   tamaño: "pequeña"
};

Las claves se encuentran a la izquierda de los dos puntos : y los valores a su derecha. Cada par clave-valor es una propiedad. Hay tres propiedades en este ejemplo:

• La clave ingrediente tiene como valor “queso”
• La clave salsa tiene como valor “marinara”
• La clave tamaño tiene como valor “pequeña”

Cada propiedad se separa con una coma. Todas las propiedades se envuelven dentro de llaves {}.

Esta es la sintaxis básica de los objetos. Pero hay unas cuantas reglas que debes tener en cuenta al crear objetos en JavaScript.

Claves de los objetos en JavaScript

Cada clave en tu objeto de JavaScript debe ser una cadena de texto, símbolo o número.

Observa con detalle el ejemplo a continuación. Las claves nombradas 1 y 2 generan coerción a cadenas de texto.

const carritoDeCompras = {
   1: "manzana",
   2: "naranjas"
};

Es una diferencia que se hace clara cuando imprimes el objeto:

console.log(carritoDeCompras);
// Resultado: { '1': 'manzana', '2': 'naranjas' }

Hay otra regla a tener en cuenta sobre los nombres de las claves: si tu clave tiene espacios, debes envolverla dentro de comillas.

Observa el objeto programador a continuación. Notarás el nombre de la última clave, "nombre del proyecto actual". Esta clave tiene espacios, por lo que la envolví en comillas.

const programador = {
   primerNombre: "Phil",
   edad: 21,
   desarrolladorBackend: true,
   lenguajes: ["Python", "JavaScript", "Java", "C++"],
   "nombre del proyecto actual": "La aplicación asombrosa"
};

Valores de objetos en JavaScript

Por otra parte, un valor puede ser cualquier tipo de dato, incluyendo un arreglo, número o un booleano. Los valores en el ejemplo anterior son de los siguientes tipos: cadena de texto, número entero, booleano y un arreglo.

Puedes incluso usar una función como valor, caso en el cuál se le conoce como un método. sonidos(), en el objeto a continuación, es un ejemplo.

const animal = {
   tipo: "gato",
   nombre: "gatito",
   sonidos() { console.log("miau miau") }
};

Ahora digamos que quieres agregar o eliminar un par clave-valor. O simplemente quieres obtener el valor de un objeto.

Puedes hacer esto al usar notación por punto o notación por corchetes, que abordaremos a continuación.

Notación por punto y notación por corchetes en JavaScript

Las notaciones por punto y por corchetes son dos maneras de acceder y usar las propiedades de un objeto. Es probable que uses la notación por punto más seguido, así que empezaremos con esta.

Cómo agregar un par clave-valor con la notación por punto en JavaScript

Crearé un objeto vacío libro a continuación:

const libro = {};

Para agregar un par clave-valor usando la notación por punto, usa la siguiente sintaxis:

nombreDelObjeto.nombreDeLaClave = valor

Este sería el código para agregar la clave autor y el valor "Jane Smith" al objeto libro:

libro.autor = "Jane Smith";

Desglosando el código anterior, tenemos que:

• libro es el nombre del objeto
• . (punto)
• autor es el nombre de la clave
• = (igual a)
• "Jane Smith" es el valor

Al imprimir el objeto libro, veremos el par clave-valor recientemente agregado:

console.log(libro);
// Resultado: { autor: "Jane Smith" }

Agregaré otro par clave-valor al objeto libro.

libro.añoDePublicación = 2006;

El objeto libro ahora tiene 2 propiedades.

console.log(libro);
// Resultado: { autor: 'Jane Smith', añoDePublicación: 2006 }

Cómo acceder a los datos usando notación por punto en un objeto de JavaScript

También puedes usar notación por punto en una clave para acceder a su valor asociado.

Considera el objeto jugadorDeBaloncesto.

const jugadorDeBaloncesto = {
   nombre: "James",
   promedioDePuntosPorJuego: 20,
   estatura: "1 metro, 89 centímetros",
   posición: "escolta"
};

Digamos que quieres obtener el valor "escolta". La sintaxis a usar es la siguiente:

nombreDelObjeto.nombreDeLaClave

Hagamos uso de esta sintaxis para obtener e imprimir el valor "escolta".

console.log(jugadorDeBaloncesto.posición);
// Resultado: escolta

Desglosando el código anterior, tenemos que:

• jugadorDeBaloncesto es el nombre del objeto
• . (punto)
• posición es el nombre de la clave

Este es otro ejemplo:

console.log(jugadorDeBaloncesto.nombre);
// Resultado: James

Cómo eliminar un par clave-valor en JavaScript

Para eliminar en par clave-valor, usa el operador delete. Esta es la sintaxis:

delete nombreDelObjeto.nombreDeLaClave

Entonces, para eliminar la clave estatura y su valor del objeto jugadorDeBaloncesto, escribe el siguiente código:

delete jugadorDeBaloncesto.estatura;

Como resultado, el objeto jugadorDeBaloncesto ahora tiene 3 pares clave-valor.

console.log(jugadorDeBaloncesto);
// Resultado: { nombre: "James", promedioDePuntosPorJuego: 20, posición: "escolta" }

Lo más probable es que uses la notación por punto frecuentemente, pero existen ciertos requisitos que debes tener en cuenta.

Cuando usas la notación por punto, los nombres de las claves no pueden tener espacios, guiones o empezar con un número.

Por ejemplo, digamos que intentaré agregar una clave que contiene espacios usando la notación por punto. Obtendré un error.

jugadorDeBaloncesto.porcentaje de tiros = "75%";
// Resulta en un error

Esto quiere decir que la notación por punto no sirve en todas las situaciones. Por eso existe otra opción: notación por corchetes.

Cómo agregar un par clave-valor usando notación por corchetes en JavaScript

Así como la notación por punto, puedes usar notación por corchetes para agregar un par clave-valor a un objeto.

La notación por corchetes ofrece más flexibilidad que la notación por punto. Esto es porque los nombres de las claves pueden incluir espacios y guiones, así como empezar con números.

Crearé un objeto empleado a continuación.

const empleado = {};

Ahora quiero agregar un par clave-valor usando notación por corchetes. Esta es la sintaxis:

nombreDelObjeto[“nombreDeLaClave”] = valor

[!] El párrafo a continuación tiene la clave y el valor invertidos en el original. Corregido:

Entonces, de esta manera agregaría la clave ocupación y el valor "ventas" al objeto empleado.

empleado["ocupación"] = "ventas";

Desglosando el código anterior, tenemos que:

• empleado es el nombre del objeto
• "ocupación" es el nombre de la clave
• = (igual a)
• "ventas" es el valor

A continuación encontramos muchos más ejemplos que usan la flexibilidad de la notación por corchetes para agregar una variedad de pares clave-valor.

//Agrega clave con múltiples palabras
empleado["viaja frecuentemente"] = true;
 
//Agrega clave que empieza con un número y contiene un guión
empleado["1er-territorio"] = "Chicago";
 
//Aagrega clave que empieza con un número
empleado["25"] = "clientes totales";

Cuando imprimo el objeto empleado, se ve de la siguiente manera:

{
  '25': "clientes totales",
  ocupación: "ventas",
  "viaja frecuentemente": true,
  "1er-territorio": "Chicago"
}

Con esta información en mente, podemos agregar la clave "porcentaje de tiros" al objeto jugadorDeBaloncesto del ejemplo anterior.

const jugadorDeBaloncesto = {
   nombre: "James",
   promedioDePuntosPorJuego: 20,
   estatura: "1 metro, 89 centímetros",
   posición: "escolta"
};

Si lo recuerdas, la notación por punto nos arrojaba un error cuando intentamos agregar una clave que incluye espacios.

jugadorDeBaloncesto.porcentaje de tiros = "75%";
// Resulta en un error

Pero la notación por corchetes nos libera de errores, como puedes ver aquí:

jugadorDeBaloncesto["porcentaje de tiros"] = "75%";

Este es el resultado que obtengo cuando imprimo el objeto:

{
  nombre: "James",
  promedioDePuntosPorJuego: 20,
  estatura: "1 metro, 89 centímetros",
  posición: "escolta"
  "porcentaje de tiros": "75%"
}

Como acceder a los datos en un objeto de JavaScript usando notación por corchetes

También puedes usar notación por corchetes en una llave para acceder al valor asociado.

Recuerda el objeto animal al comienzo del artículo.

const animal = {
   tipo: "gato",
   nombre: "gatito",
   sonidos() { console.log("miau miau") }
};

Obtengamos el valor asociado con la clave nombre. Para hacer esto, envuelve dentro de corchetes la clave entre comillas. Esta es la sintaxis:

nombreDelObjeto[“nombreDeLaClave”]

Y este es el código que escribirías con notación por corchetes: animal["nombre"];.

Desglosando el código de arriba, tenemos que:

• animal es el nombre del objeto
• ["nombre"] es la clave entre comillas dentro de los corchetes

A continuación otro ejemplo.

console.log(animal["sonidos"]());

// Resultado: 
miau miau
undefined

Ten en cuenta que sonidos() es un método, razón por la cual agregué los paréntesis al final para invocarlo.

Para invocar un método usando la notación por punto sería:

console.log(animal.sonidos());

// Resultado: 
miau miau
undefined

Métodos de objetos en JavaScript

Sabes como acceder propiedades específicas. Pero ¿qué pasaría si quieres todas las claves o todos los valores de un objeto?

Existen dos métodos que te darán la información que necesitas.

const corredora = {
   nombre: "Jessica",
   edad: 20,
   kilómetrosPorSemana: 64,
   carrera: "maratón"
};

Usa el método Object.keys() para obtener todos los nombres de las claves en un objeto.

Esta es la sintaxis:

Object.keys(nombreDelObjeto)

Podemos usar este método sobre el objeto corredora.

Object.keys(corredora);

Si imprimes el resultado, obtendrás un arreglo con las claves del objeto.

console.log(Object.keys(corredora));
// Resultado: [ 'nombre', 'edad', 'kilometrosPorSemana', 'carrera' ]

De la misma forma, puedes usar el método Object.values() para obtener todos los valores de un objeto. Esta es la sintaxis:

Object.values(nombreDelObjeto)

Ahora obtendremos todos los valores del objeto corredora.

console.log(Object.values(corredora));
// Resultado: [ 'Jessica', 20, 64, 'maratón' ]

Hemos cubierto bastante terreno. He aquí un resumen de las ideas clave:

Objetos:

• Usa objetos para almacenar datos como propiedades (pares clave-valor).
• Los nombres de las claves deben ser cadenas de texto, símbolos o números.
• Los valores pueden ser de cualquier tipo.

Acceder a las propiedades de los objetos:

• Notación por punto: objectName.nombreDeLaClave
• Notación por corchetes: objectName[“nombreDeLaClave”]

Eliminar una propiedad:

• delete objectName.nombreDeLaClave

Es mucho lo que puedes hacer con los objetos. Ahora que tienes algunas bases, puedes sacar ventaja de este poderoso tipo de dato de JavaScript.

Escribo sobre aprender a programar y las mejores maneras de hacerlo en amymhaddad.com. También escribo en Twitter sobre programación, aprendizaje y productividad: @amymhaddad.

Traducido del artículo de Amy Haddad - JavaScript Object Keys Tutorial – How to Use a JS Key-Value Pair

Existen dos funciones nativas en la librería de JavaScript para lograr estas tareas: setTimeout() y setInterval().

setTimeout

setTimeout() es usada para retrasar la ejecución de la función pasada como argumento por un periodo de tiempo determinado.

Hay dos parámetros que se pasan a setTimeout(): la función que quieres llamar y el tiempo (expresado en milisegundos) a retrasar la ejecución de la función.

Recuerda que hay 1000 milisegundos (ms) en 1 segundo, entonces 5000 ms equivale a 5 segundos y así sucesivamente.

setTimeout() ejecutará la función del primer argumento una vez, tan pronto como haya transcurrido el tiempo especificado.

Ejemplo:

let identificadorTiempoDeEspera;

function temporizadorDeRetraso() {
  identificadorTiempoDeEspera = setTimeout(funcionConRetraso, 3000);
}

function funcionConRetraso() {
  alert("Han pasado 3 segundos.");
}

Cuando la función temporizadorDeRetraso es llamada, ejecutará setTimeout. Luego que pasen 3 segundos (3000 ms), ejecutará funcionConRetraso que mostrará una alerta.

setInterval

Usa setInterval() para hacer que una función se repita con un tiempo de retraso entre cada ejecución.

Una vez más, se pasan dos parámetros a setInterval(): la función que quieres llamar y el tiempo en milisegundos a retrasar cada ejecución de la función.

setInterval() continuará ejecutándose hasta que sea borrada.

Ejemplo:

let identificadorIntervaloDeTiempo;

function repetirCadaSegundo() {
  identificadorIntervaloDeTiempo = setInterval(mandarMensaje, 1000);
}

function mandarMensaje() {
  console.log("Ha pasado 1 segundo.");
}

Cuando tu código llama a la función repetirCadaSegundo, ejecutará setInterval. setInterval correrá la función mandarMensaje cada segundo (1000 ms).

clearTimeout y clearInterval

También existen funciones nativas correspondientes para detener los eventos de tiempo: clearTimeout() y clearInterval().

Como has podido observar, cada función de temporizador setTimeout() y setInterval(), en los ejemplos anteriores, han sido guardadas en una variable. Cuando alguna de estas funciones se ejecuta, le es asignada un número (identificador), el cual es guardado en dicha variable. Ten en cuenta que JavaScript hace todo esto en segundo plano.

El número generado es único para cada instancia de los temporizadores. Este número también es la manera como los temporizadores son identificados cuando quieres detenerlos. Por esta razón, deberás siempre asignar el temporizador a una variable.

Para que tu código sea entendible, deberías siempre emparejar:

• clearTimeout() con setTimeout() y
• clearInterval() con setInterval().

Para detener un temporizador, llama a la correspondiente función para borrarlo y pásale la variable identificadora que corresponde al temporizador que quieres detener. La sintaxis para clearInterval() y clearTimeout() son la misma.

Ejemplo:

let identificadorDeTemporizador;

function temporizadorDeRetraso() {
  identificadorDeTemporizador = setTimeout(funcionConRetraso, 3000);
}

function funcionConRetraso() {
  alert("Three seconds have elapsed.");
}

function borrarAlerta() {
  clearTimeout(identificadorDeTemporizador);
}

Traducido del artículo JavaScript Timing Events: setTimeout and setInterval

Por ejemplo,

• Si quieres obtener todos los elementos del arreglo que cumplen una condición específica, o
• Simplemente quieres saber si al menos uno de los elementos cumple dicha condición.
• Si quieres saber si un valor específico hace parte del arreglo, o
• Quieres obtener el índice de tal valor.

Para todos estos casos de uso, los métodos de JavaScript Array.prototype te ayudarán. En este artículo, discutiremos cuatro métodos que podemos usar para buscar un elemento dentro de un arreglo. Estos métodos son:

1. Filter (filtro)
2. Find (encuentra)
3. Includes (incluye)
4. IndexOf (índice de)

Veamos cada uno de ellos.

Array.filter()

Podemos usar el método Array.filter() para encontrar los elementos dentro de un arreglo que cumplan con cierta condición. Por ejemplo, si queremos obtener todos los elementos de un arreglo de números que sean mayores a 10, podemos hacer lo siguiente:

let arreglo = [10, 11, 3, 20, 5];

let mayorQueDiez = arreglo.filter(element => element > 10);

console.log(mayorQueDiez) // [11, 20]

La sintaxis para usar el método array.filter() es la siguiente:

let nuevoArreglo = arreglo.filter(callback);

Donde:

• nuevoArreglo es el nuevo arreglo devuelto
• arreglo es el arreglo sobre el cual se llama el método filter
• callback es la función Callback que se aplica a cada uno de los elementos del arreglo

Si ninguno de los elementos del arreglo cumple con la condición, se devuelve un arreglo vacío. Puedes leer más sobre este método aquí.

Hay ocasiones en las que no necesitamos todos los elementos que cumplen una condición. Solo queremos saber si hay al menos un elemento que la cumpla. En ese caso, necesitas el método find().

Array.find()

Usamos el método Array.find() para encontrar el primer elemento que cumple cierta condición. Tal como el método anterior, toma un Callback como argumento y devuelve el primer elemento que cumpla la condición establecida.

Usemos el método find en el arreglo de nuestro ejemplo anterior.

let arreglo = [10, 11, 3, 20, 5];

let existeElementoMayorQueDiez = arreglo.find(element => element > 10);

console.log(existeElementoMayorQueDiez) // 11

La sintaxis de array.find() es:

let primerElementoEncontrado = arreglo.find(callback);

Callback es la función que se ejecuta sobre cada uno de los valores del arreglo y recibe tres argumentos:

• element el elemento sobre el cual se está iterando (requerido)
• index - el índice/posición del elemento actual (opcional)
• array - el arreglo sobre el que se llamó find (opcional)

Toma nota que si ninguno de los elementos del arreglo cumple con la condición, devuelve undefined.

Ahora, ¿qué pasaría si quieres comprobar que un elemento específico existe dentro del arreglo? ¿cómo haríamos esto?

Array.includes()

El método includes() determina si un arreglo incluye un valor específico y devuelve verdadero o falso según corresponda.

En el ejemplo anterior, si queremos revisar si 20 es uno de los elementos del arreglo, podemos hacer lo siguiente:

let arreglo = [10, 11, 3, 20, 5];

let incluyeVeinte = arreglo.includes(20);

console.log(incluyeVeinte) // true

Notarás la diferencia entre este y los anteriores métodos que hemos visto. Este método acepta como argumento un valor en vez de un Callback.

La sintaxis de array.includes() es:

let incluyeValor = arreglo.includes(valorAEncontrar, aPartirDelIndice)

Donde

• valorAEncontrar es el valor que estás buscando dentro del arreglo (requerido)
• aPartirDelIndice es el índice o la posición en el arreglo desde la que deseas empezar tu búsqueda (opcional)

Para entender mejor el concepto del índice, repasemos nuestro ejemplo una vez más. Si queremos verificar que el arreglo contenga 10 partiendo desde la segunda posición, podemos hacer lo siguiente:

let arreglo = [10, 11, 3, 20, 5];

let incluyeDiezDosVeces = arreglo.includes(10, 1);

console.log(incluyeDiezDosVeces) //falso

Nota: recuerda que los índices de los elementos se cuentan desde cero, por lo que debes restar 1 a la posición con la que quieras empezar.

Array.indexOf()

El método indexOf() devuelve el primer índice encontrado de un elemento específico. Devuelve -1 si el elemento no existe en el arreglo.

Volvamos a nuestro ejemplo. Encontremos el índice de 3 en el arreglo.

let arreglo = [10, 11, 3, 20, 5];

let indiceDeTres = arreglo.indexOf(3);

console.log(indiceDeTres) // 2

Su sintaxis es similar al médoto includes:

let indiceDeElemento = arreglo.indexOf(elemento, aPartirDelIndice)

Donde:

• elemento es el elemento que estás buscando dentro del arreglo (requerido)
• aPartirDelIndice es el índice o la posición en el arreglo desde la que deseas empezar tu búsqueda (opcional)

Es importante mencionar que los métodos includes e indexOf usan igualdad estricta ( '===' ) para buscar dentro de un arreglo. Si los valores son de distinto tipo (por ejemplo '4' y 4), devolverán false y -1 respectivamente.

Resumen

Con estos métodos para arreglos, no necesitas usar un bucle para buscar dentro de estos. Dependiendo de lo que necesites, puedes decidir cuál de todos estos métodos es el mejor de acuerdo a tu caso de uso.

A continuación un resumen de cuándo usar cada método:

• Usa filter si quieres encontrar todos los elementos que cumplan con una condición específica.
• Usa find si quieres saber si al menos uno de los elementos cumple una condición específica.
• Usa includes si quieres saber si tu arreglo contiene un valor específico.
• Usa indexOf si quieres encontrar el índice de un elemento particular dentro del arreglo.

¿Quieres recibir notificaciones cuando publique un artículo? Haz clic aquí.

Traducido del artículo de Sarah Chima Atuonwu - Four Different Ways to Search an Array in JavaScript

Con la llegada de JavaScript, se abrió un mundo de posibilidades para crear páginas interactivas que respondiesen a acciones como dar clic en un botón o tener una animación de desplazamiento.

Existen múltiples eventos del DOM (Document Object Model) que se pueden "escuchar" en JavaScript, pero onclick y onload están dentro de los más populares.

Evento onclick

El evento onclick en JavaScript te permite ejecutar una función cuando se hace clic en un elemento.

Ejemplo

<button onclick="miFuncion()">Dame clic</button>

<script>
  function miFuncion() {
    alert('¡El botón fue presionado!');
  }
</script>

En el ejemplo anterior, cuando un usuario da clic en el botón, aparece una alerta en el navegador que muestra ¡El botón fue presionado!.

Agregar onclick dinámicamente

El ejemplo anterior funciona, pero generalmente se considera una mala práctica. En vez de hacer eso, es mejor separar el contenido de la página (HTML) de la lógica (JS).

Para lograrlo, el evento onclick puede ser agregado programáticamente a cualquier elemento usando el siguiente código:

<p id="foo">Da clic en este elemento</p>

<script>
  const p = document.getElementById("foo"); // Encuentra el elemento de párrafo en la página a través de su id "foo"
  p.onclick = mostrarAlerta; // Agrega la función onclick al elemento
    
  function mostrarAlerta(evento) {
    alert("¡Evento onclick activado!");
  }
</script>

Nota

Es importante mencionar que al usar onclick, solo podemos agregar una función Listener. Si quieres agregar más, usa addEventListener(). Esta es la manera preferible de agregar eventos.

En el ejemplo anterior, cuando un usuario da clic en el elemento p en el html, verán una alerta que muestra ¡Evento onclick activado!.

Prevenir acciones por defecto

Si agregamos onclick a enlaces (Es decir, el tag a en HTML), es posible que queramos prevenir que ocurran acciones por defecto:

<a id="bar" href="https://www.freecodecamp.org/espanol/news/">Guías</a>

<script>
  const enlace = document.getElementById("bar"); //  Encuentra el elemento de enlace con id "bar"
  enlace.onclick = miAlerta; // Agrega la función onclick al elemento

  function miAlerta(evento) {
    evento.preventDefault();
    alert("Se dio clic al enlace pero no se abrió la página");
  }
</script>

En el anterior ejemplo, impedimos el comportamiento por defecto del elemento  a (abrir un enlace) al usar evento.preventDefault() dentro de nuestra función Callbak onclick.

Evento onload

El evento onload se usa para ejecutar una función de JavaScript tan pronto como una página haya cargado.

Ejemplo:

const cuerpoDelDocumento = document.body;
cuerpoDelDocumento.onload = miFuncion;

function miFuncion() {
  alert('La página terminó de cargar');
}

Que puede ser abreviado a:

document.body.onload = function() {
  alert('La página terminó de cargar');
}

En el ejemplo anterior, tan pronto como la página es cargada, la función miFuncion será llamada, y mostrará la alerta La página terminó de cargar al usuario.

El evento onload es usualmente añadido al elemento <body>. Entonces, tan pronto el cuerpo (<body>) del documento haya cargado — incluyendo imágenes, archivos de CSS y JavaScript, tu script se ejecutará.

Más información:

Estos son solo dos de los muchos eventos del DOM que puedes manipular con JavaScript, aunque son de los más usados.

Sin embargo, algunas veces no necesitarás "escuchar" eventos del DOM y querrás usar un evento de tiempo como lo es un conteo regresivo. Si te interesa un tutorial rápido sobre este tema, visita este artículo.

Traducido del artículo JavaScript DOM Events: Onclick and Onload

Booleanos

Los booleanos son un tipo de dato primitivo comúnmente usado en lenguajes de programación. Por definición, un booleano tiene 2 posibles valores: true (verdadero) o false (falso).

En JavaScript, frecuentemente se genera de manera implícita la coerción de tipos a booleano. Si, por ejemplo, tienes una sentencia if que evalúa cierta expresión, esa expresión genera coerción a booleano:

const a = 'una cadena';
if (a) {
  console.log(a); // arroja 'una cadena'
}

En el ejemplo anterior, la sentencia if evalúa a la constante a. Dado que el valor de a no es de tipo booleano, JavaScript genera coerción de tipo para poder evaluar la sentencia y concluir si se trata de un valor Truthy (verdadero) o Falsy (falso). Obtenemos como resultado 'una cadena' debido a que las cadenas de texto en JavaScript son un valor verdadero.

Solo hay unos cuantos valores que generan coerción a falso:

• false (en realidad no genera coerción porque ya es falso)
• null
• undefined
• NaN
• 0
• -0
• 0n, -0n (BigInt)
• " ", ' ', ` ` (cadena de texto vacía)
• document.all

Cualquier otro valor diferente de los anteriores generan coerción a verdadero.

Una manera en que se usa la coerción de tipos es con el uso del operador o (||) y del operador y (&&):

const a = 'palabra';
const b = false;
const c = true;
const d = 0
const e = 1
const f = 2
const g = null

console.log(a || b); // 'palabra'
console.log(c || a); // true
console.log(b || a); // 'palabra'
console.log(e || f); // 1
console.log(f || e); // 2
console.log(d || g); // null
console.log(g || d); // 0
console.log(a && c); // true
console.log(c && a); // 'palabra'

En el ejemplo anterior, el operador o (||) verifica el primer operando. Si dicho operando es el valor booleano verdadero (true) o pertenece a lista de los evaluados como verdaderos, JavaScript arroja el resultado inmediatamente sin necesidad de verificar el segundo operando. A esto se le llama una evaluación cortocircuito. Por tal razón, obtenemos 'palabra' en el primer caso y true en el segundo caso. Sin embargo, cuando el primer operando no es verdadero, devuelve el segundo operando. Entonces obtenemos 'palabra' en el tercer caso.

El operador  y (&&) funciona de manera similar. Sin embargo, para que la operación sea verdadera, ambos operandos deben ser verdaderos. Devolverá siempre el segundo operando si ambos son verdaderos. De lo contrario, devolverá falso. Por tal razón, obtenemos true en el penúltimo caso y 'palabra' en el último caso.

El objeto Boolean

También existe un objeto nativo de JavaScript. El valor pasado como primer parámetro es convertido a un valor booleano si es necesario. Si el valor es omitido, 0, -0, 0n, -0n (BigInt), null, false, NaN, undefined, document.all, o una cadena vacía (" ", ' '. ` `), el objeto tiene valor inicial de falso. Cualquier otro valor, incluidos cualquier objeto o la cadena de texto "false", crean un objeto de valor inicial verdadero.

No confundas los valores booleanos primitivos verdadero y falso con los valores verdaderos y falsos del objeto Boolean.

Más detalles

Cualquier objeto que no tenga como valor undefined o null, incluyendo cualquier objeto Boolean que tenga como valor falso, será evaluado como verdadero cuando se pase por una sentencia condicional. Al ser verdadero, ejecutará la función. Por ejemplo, la condición en la siguiente sentencia if es evaluada como verdadera:

const x = new Boolean(false);
if (x) {
  // este código se ejecuta
}

Este comportamiento no aplica a los valores booleanos primitivos. Por ejemplo, la condición en la siguiente sentencia if es evaluada como falsa:

const x = false;
if (x) {
  // este código no se ejecuta
}

No uses un objeto Boolean para convertir un valor no booleano a uno booleano. En cambio, usa Boolean como función para realizar esta tarea:

const x = Boolean(expresión);     // preferido
const x = new Boolean(expresión); // no lo uses

Si especificas un objeto (incluyendo un objeto Boolean que tenga valor falso) como valor inicial de un objeto Boolean, este nuevo objeto tendrá valor verdadero.

const myFalse = new Boolean(false);   // valor inicial falso
const g = new Boolean(myFalse);       // valor inicial verdadero
const myString = new String('Hello'); // objeto de cadena
const s = new Boolean(myString);      // valor inicial verdadero

No uses un objeto Boolean como si fuesen los valores booleanos primitivos. Estos no son lo mismo y, por lo tanto, no son intercambiables.

Traducido del artículo - JavaScript Booleans Explained – How to use Booleans in JavaScript

Bien, en resumen: == convierte el tipo inherentemente y === no convierte tipo.

Doble igual (==) solo verifica igualdad de valores. Hace coerción de tipos inherentemente. Esto significa que antes de verificar los valores, convierte los tipos de las variables para que coincidan.

Por el otro lado, Triple igual (===) no hace coerción de tipos. Este verificará que las variables que estén siendo comparadas tengan el mismo valor Y el mismo tipo de variable.

Bien - te ayudaré a que entiendas mejor la diferencia a través de algunos ejemplos. Para cada uno, considera qué arrojaría cada sentencia.

Ejemplo 1:

const foo = "prueba" 
const bar = "prueba"  

console.log(foo == bar) //true
console.log(foo === bar) //true

El valor y el tipo de foo y bar son los mismos. Por lo tanto, el resultado es true (verdadero) en ambos.

Ejemplo 2:‌

const numero = 1234 
const numeroComoCadenaDeTexto = '1234'  

console.log(numero == numeroComoCadenaDeTexto) //true
console.log(numero === numeroComoCadenaDeTexto)  //false

El valor de numero y numeroComoCadenaDeTexto se ven similares aquí. Sin embargo, el tipo de numero es Numero y el tipo de numeroComoCadenaDeTexto es Cadena. Incluso si los valores son el mismo, el tipo no es el mismo. De ahí que una verificación con == devuelva true, pero cuando se comprueba tanto el valor y el tipo, arroja false (falso).

Ejemplo 3:

console.log(0 == false) //true
console.log(0 === false) //false                  

Razón: mismo valor, diferente tipo. Coerción de tipos.

Este es un caso interesante. El valor de 0 cuando se verifica con false es el mismo. Lo es porque 0 y false tienen el mismo valor para JavaScript, pero cuando se verifica el tipo y el valor, arroja falso porque 0 es un numero y false es de tipo Booleano.

Ejemplo 4:

const str = ""

console.log(str == false) //true
console.log(str === false) //false

El valor de la cadena de texto vacía y false es el mismo en JavaScript. De ahí que == devuelva verdadero. Sin embargo, el tipo es diferente, por lo que === devuelve falso.

¿Cuándo debes usar == y cuando ===?

Si tienes dudas, usa ===. Esto te salvará de muchos errores potenciales.

Si estás trabajando en un caso de uso donde puedes ser un poco permisivo respecto al tipo de datos entrantes, entonces usa ==. Por ejemplo, si una API le acepta ambos "true" y true al cliente, usa ==. En resumen, no uses == a no ser que tengas un caso de uso bastante sólido.

Aquí te presento una útil tabla de verdad de JavaScript para tu referencia y también quiero mostrarte lo complicado que es la igualdad en JavaScript:

Si disfrutaste este artículo, asegúrate de seguirme en mi Twitter.

Traducido del artículo - JavaScript Triple Equals Sign VS Double Equals Sign – Comparison Operators Explained with Examples de Shruti Kapoor

Puedes usar la consola para verificar esto:

Nota: void, independientemente del valor que se le pase, *siempre devuelve undefined como se muestra arriba*. Pero, es preferible usar void con el operando 0.

Hay dos maneras de usar el operando 0: void(0) ó void 0. Cualquiera de las dos está bien.

Cuando usar JavaScript void(0)

Usa javaScript:void(0) si, al hacer clic en un enlace, no quieres que el navegador abra una nueva página o refresque la página actual (dependiendo de la URL especificada).

En cambio, solo ejecutará el JavaScript que esté adjunto a ese enlace.

Ejemplo 1 con JavaScript void(0):

<html>
<body>
<a href="javascript:void(0);alert('¡Hola! Estoy aquí')">Aceptar</a>
</body>
</html>

Resultado:

Cuando alguien da clic en el enlace Dame clic, aparecerá una alerta como se muestra a continuación:

Ejemplo 2 con JavaScript void(0):

<html>
<body>
    <a href="javascript:void(0)" ondblclick="alert('Hola, no refresqué la página')" )>Aceptar</a>
</body>
</html>

Resultado:

Cuando le das doble clic al enlace, aparecerá una alerta sin actualizar la página.

Ejemplo 3 con JavaScript void(0):

<html>
<body>
    <a href="javascript:void(0);https://www.google.com/" 
    ondblclick="alert('¡Hola! Me verás y no te redirigiré a google.com')">Aceptar</a>
</body>
</html>

Resultado:

Cuando le das doble clic al enlace, aparecerá una alerta. Cerrándola tampoco te redirigirá a google.com.

Ejemplo 4 sin JavaScript void(0):

<html>
<body>
    <a href="https://www.google.com/" ondblclick="alert('¡Hola! Me verás y te redirigiré a google.com incluso si no lo necesitas')">Aceptar</a>
</body>
</html>

Resultado:

Cuando le das doble clic al enlace, aparecerá una alerta, pero al cerrarla te redirigirá a google.com.

Conclusión

El operador void es útil cuando quieres evitar cualquier actualización o redirecciones de página no deseadas. En vez de eso, ejecuta alguna operación de JavaScript.

Más información:

1. Documento de Mozilla

Traducido del artículo - What Does JavaScript:Void(0) Mean?

Aquí está el teclado de piano en JavaScript que hice si quieres ver el producto terminado primero.

Este tutorial asume que tienes un entendimiento básico de JavaScript como lo son las funciones y manejadores de eventos, así como también familiaridad con HTML y CSS. De lo contrario, es totalmente amigable con principiantes y está dirigido a aquellos que quieren mejorar sus habilidades de JavaScript a través del aprendizaje basado en proyectos (¡o si quieres hacer un proyecto genial!).

El teclado de piano que haremos para este proyecto está basado en el teclado sintético dinámicamente generado hecho por Keith William Horwood. Extenderemos el número de teclas disponibles a 4 octavas y asignaremos nuevos atajos de teclado.

Si bien su teclado puede reproducir sonidos de otros instrumentos, nosotros mantendremos las cosas simples y usaremos solo sonidos de piano.

A continuación los pasos a seguir para abordar este proyecto:

1.      Obtén los archivos de trabajo

2.      Asigna atajos de teclado

3.      Genera el teclado

4.      Maneja presiones de teclas

¡Empecemos!

1. Obtén los archivos de trabajo

Este tutorial usará los siguientes archivos:

·        audiosynth.js

·        playKeyboard.js

Como mencioné, basaremos nuestro teclado de piano en el que fue hecho por Keith. Naturalmente, también usaremos parte de su código, que amablemente ha permitido usar con audiosynth.js.

Incorporamos audiosynth.js en playKeyboard.js (mi versión modificada del código de Keith), el cual maneja todo nuestro JavaScript. Este tutorial da una explicación detallada en las siguientes secciones sobre los puntos clave acerca de cómo el código en este archivo crea un teclado de piano que funcione completamente.

Dejamos el archivo audiosynth.js intacto debido a que es solamente responsable de la generación de sonido.

El código en este archivo distingue este teclado de piano de otros encontrados en línea porque usa JavaScript para generar el sonido apropiado dinámicamente cuando el usuario presiona una tecla. Por lo tanto, el código no tiene que cargar archivos externos de audio.

Keith ya nos proporciona una explicación de cómo funciona la generación de sonido en su sitio web, así que no entraremos en detalle aquí.

En pocas palabras, implica usar la función Math.sin() en JS para crear formas de onda sinusoidal y transformarlas para que suenen más como instrumentos reales a través de matemáticas elegantes.

Crea un archivo HTML index y enlaza los archivos JS en la cabecera:

<script src="audiosynth.js"></script>
<script src="playKeyboard.js"></script>

En el cuerpo, podemos crear un elemento <div> vacío para que sirva como "contenedor" del teclado:

<div id="keyboard"></div>

Le damos un nombre de id para poder referenciarlo más adelante cuando creemos el teclado usando JS. Podemos ejecutar nuestro código JS llamándolo en el cuerpo del documento también:

<script type="text/javascript">playKeyboard()</script>

Usamos playKeyboard.js como una función grande. Se ejecutará tan pronto como el navegador llegue a esa linea de código y genere un teclado que funcione completamente en el elemento <div> con id = “keyboard”.

Las primeras líneas de playKeyboard.js configuran la funcionalidad para dispositivos móviles (opcional) y crea un nuevo objeto AudioSynth(). Usamos este objeto para llamar los métodos de audiosynth.js que enlazamos anteriormente. Usamos uno de estos métodos en el inicio para ajustar el volumen del sonido.

En la línea 11, establecemos la posición de C central a la 4ta octava.

2. Asigna atajos de teclado

Antes que generemos el teclado, debemos asignar los atajos de teclado dado que estos determinan cuantas teclas deberán ser generadas.

Originalmente quería tocar las notas de apertura de ‘Für Elise’ así que escogí un rango de 4 octavas para un total de 48 teclas negras y blancas. Esto requirió casi que todas las teclas en mi teclado (de PC) y tú eres libre de incluir menos.

Nota de precaución: No tengo los mejores atajos de teclado así que podría sentirse poco intuitivo cuando realmente intentes tocar. Tal vez este sea el precio de intentar crear un teclado de 4 octavas.

Para asignar los atajos de teclado, primero crea un objeto que use los códigos de tecla como su clave y la nota a tocar como el valor de dicha clave (empezando en la línea 15):

var keyboard = {
	/* ~ */
	192: 'C,-2',
	/* 1 */
	49: 'C#,-2',
	/* 2 */
	50: 'D,-2',
	/* 3 */
	51: 'D#,-2',
    //...y el resto de las teclas
}

Los comentarios denotan las teclas que el usuario podría presionar en el teclado del computador. Si un usuario presiona la tecla virgulilla, el código de teclado correspondiente es 192. Puedes obtener los códigos de tecla usando herramientas como keycode.info.

El valor de la clave es la nota a tocar que está escrita en el formato 'nota, modificador de octava' donde el modificador de octava representa la posición de octava relativa en relación con la octava que contiene a C central. Por ejemplo, 'C, -2' es la nota C 2 octavas más abajo del C central.

Ten en cuenta que no hay teclas 'bemol'. Cada nota es representada por un 'sostenido'.

Para hacer nuestro teclado de piano funcional, tenemos que preparar una tabla de búsqueda en reversa donde cambiamos los pares clave: valor de tal manera que la nota a tocar se convierta la clave y el código de tecla se convierta en el valor.

Necesitamos dicha tabla porque queremos que itere sobre las notas musicales para generar el teclado fácilmente.

Aquí es donde las cosas podrían volverse complicadas: en realidad necesitamos 2 tablas de búsqueda en reversa.

Usamos una para buscar la etiqueta que queremos mostrar para la tecla del computador que presionamos al tocar una nota (declarada como reverseLookupText en la línea 164) y la segunda para buscar la tecla que fue presionada (declarada como reverseLookup en la línea 165).

Los astutos se darán cuenta de que ambas tablas de búsqueda tienen códigos de tecla como valores, entonces ¿cuál es la diferencia entre estas?

Resulta que (por razones que desconozco) cuando obtienes un código de tecla que corresponde a una tecla y tratas de usar el método String.fromCharCode() en ese código de tecla, no siempre te devuelve la misma cadena de texto que representa la tecla presionada.

Por ejemplo, presionar el corchete izquierdo abierto resulta en el código de tecla 219, pero cuando tratas de convertir el código a una cadena de texto usando String.fromCharCode(219) te devuelve "Û". Para obtener "[", debes usar el código de tecla 91. Reemplazamos los códigos incorrectos empezando desde la línea 168.

Inicialmente, obtener el código de tecla correcto implicó un poco de ensayo y error, pero luego me di cuenta de que simplemente se puede usar otra función (getDispStr() en la línea 318) para forzar que se muestre la cadena de texto correcta.

La mayoría de las teclas se comportan correctamente, pero puedes escoger empezar con un teclado más pequeño para que no tengas que lidiar con códigos de tecla incorrectos.

3. Genera el teclado

Comenzamos el proceso de generación del teclado seleccionando nuestro elemento <div> contenedor del teclado con document.getElementById('keyboard') en la línea 209.

En la siguiente linea, declaramos el objeto selectSound y ponemos la propiedad value en cero para que audioSynth.js cargue el perfil de sonido para piano. Tu podrías querer ingresar un valor diferente (puede ser 0-3) si quieres probar otros instrumentos. Observa la línea 233 de audioSynth.js con Synth.loadSoundProfile para más detalles.

En la línea 216 con var notes, nos traemos las notas disponibles de una octava (C, C#, D...B) desde audioSynth.js.

Generamos nuestro teclado con el bucle que pasa por cada octava y luego por cada nota en dicha octava. Para cada nota, creamos un elemento <div> que represente la tecla adecuada usando document.createElement('div').

Para distinguir si necesitamos crear una tecla negra o blanca, echamos un vistazo al largo del nombre de la nota. Agregar un signo de sostenido hace que el largo del nombre de la nota sea mayor que uno (ex. ‘C#’) lo que indica una tecla negra y viceversa para teclas blancas.

Para cada tecla podemos establecer un ancho, alto y un offset desde la izquierda basada en la posición de la tecla. También podemos crear clases apropiadas para usar con CSS más adelante.

Siguiente, usamos label para etiquetar la tecla con la tecla del computador que necesitamos presionar para tocar la nota y la guardamos en otro elemento <div>. Aquí es donde reverseLookupText es de ayuda. Dentro del mismo <div>, también mostramos el nombre de la nota. Logramos todo esto al colocar la propiedad de label, innerHTML y añadiendo el label a la tecla (líneas 240-242).

label.innerHTML = '<b class="keyLabel">' + s + '</b>' + '<br /><br />' + n.substr(0,1) + 
'<span name="OCTAVE_LABEL" value="' + i + '">' + (__octave + parseInt(i)) + '</span>' + 
(n.substr(1,1)?n.substr(1,1):'');

Similarmente, agregamos un listener de evento a la tecla para manejar los clicks del ratón (line 244):

thisKey.addEventListener(evtListener[0], (function(_temp) { return function() { fnPlayKeyboard({keyCode:_temp}); } })(reverseLookup[n + ',' + i]));

El primer parámetro evtListener[0] es un evento mousedown declarado mucho más atrás en la línea 7. El segundo parámetro es una función que devuelve una función. Necesitamos reverseLookup para obtener el código de tecla correcto y pasar ese valor como parámetro _temp a la función de adentro. No necesitaremos reverseLookup para manejar los eventos keydown.

Este código es pre-ES2015 (o ES6) y el actualizado, que espero sea el equivalente más claro, es el siguiente:

const keyCode = reverseLookup[n + ',' + i];
thisKey.addEventListener('mousedown', () => {
  fnPlayKeyboard({ keyCode });
});

Después de crear y añadir todas las teclas necesarias a nuestro teclado, necesitaremos manejar el hecho de tocar una nota.

4. Maneja presiones de teclas

Manejamos el presionar de las teclas en la misma manera en que el usuario da click en la tecla o presiona la tecla correspondiente del computador a través de la función fnPlayKeyboard en la línea 260. La única diferencia es el tipo de evento que usamos en addEventListener para detectar el presionado de la tecla.

Creamos un arreglo llamado keysPressed en la línea 206 para detectar qué teclas se están presionando o se les está haciendo click. Para simplificar, asumiremos que el presionar de una tecla incluye también que a esta se le haga click.

Podemos dividir el proceso de manejar el presionado de las teclas en 3 pasos: agregar el código de tecla de la tecla presionada en keysPressed, tocar la nota apropiada y quitar el código de tecla de keysPressed.

El primer paso de agregar un código de tecla es fácil:

keysPressed.push(e.keyCode);

donde e es el evento detectado por addEventListener.

Si el código de tecla agregado es uno de los atajos de teclado que asignamos, entonces llamamos a fnPlayNote() en la línea 304 para tocar la nota asociada con esa clave.

En fnPlayNote(), primero creamos un nuevo elemento container de Audio() para nuestra nota usando el método generate() de audiosynth.js. Cuando el audio carga, entonces podremos tocar la nota.

Las líneas 308-313 son código heredado y al parecer pueden simplemente ser reemplazadas por container.play(), sin embargo no he hecho pruebas exhaustivas para ver cuál es la diferencia.

Quitar el presionado de una tecla también es simple, dado que puedes quitar la tecla del arreglo keysPressed con el método splice en la línea 298. Para más detalle, observa la función llamada fnRemoveKeyBinding().

Lo único a lo que tenemos que estar atentos es cuando el usuario mantiene presionada la tecla o presiona varias. Tenemos que asegurarnos que la nota solo se toque una sola vez mientras se mantiene presionada (líneas 262-267):

var i = keysPressed.length;
while(i--) {
	if(keysPressed[i]==e.keyCode) {
		return false;	
    }
}

Devolver false evita que el resto de fnPlayKeyboard() se ejecute.

Resumen

¡Hemos creado un teclado de piano completamente funcional usando Vanilla JavaScript!

Para recapitular, aquí están los pasos que tomamos:

1. Configuramos nuestro archivo HTML para que cargue los archivos apropiados de JS y ejecute playKeyboard() en <body> para generar y hacer que el teclado sea funcional. Tenemos un elemento <div> con id= "keyboard" donde se mostrará el teclado en la página.
2. En nuestro archivo de JavaScript playKeyboard.js, asignamos nuestros atajos de teclado con códigos de tecla como clave y las notas musicales como valor. También creamos dos tablas de búsqueda en reversa en donde una es responsable de buscar el label de tecla apropiado basado en la nota y el otro de buscar el código de tecla correcto.
3. Generamos el teclado dinámicamente con un bucle que pasa por cada nota en el rango de cada octava. Cada tecla es creada como un propio elemento <div>. Usamos las tablas de búsqueda en reversa para generar el label y el código de tecla correcto de cada tecla. Luego un eventListener de mousedown lo usa para llamar a fnPlayKeyboard() para que toque la nota. El evento keydown llama a la misma función, pero no necesita una tabla de búsqueda en reversa para obtener el código de tecla.
4. Manejamos el presionado de las teclas resultantes de clics del ratón o presionando el teclado del computador en 3 pasos: agregamos el código de tecla a un arreglo, tocamos la nota apropiada y quitamos el código de tecla de dicho arreglo. Debemos tener cuidado de no tocar una nota repetidamente (desde el inicio) mientras el usuario mantiene alguna tecla presionada continuamente.

El teclado ahora es completamente funcional, pero puede que se vea un poco aburrido. ¿Te dejo la parte de CSS a tí?

De nuevo, aquí está el teclado de piano de JavaScript que hice para tu referencia.

Si quieres aprender más sobre Desarrollo Web y ver otros proyectos prolijos, visita mi blog en 1000 Mile World.

¡Gracias por leer y feliz programación!

Traducido del artículo How to Build a Piano Keyboard Using Vanilla JavaScript de Joe Liang

Math es uno de los objetos globales u objeto incorporado estándar de JavaScript y puede ser utilizado en cualquier lugar donde puedas usar JavaScript. Contiene constantes útiles como π y el número de Euler, además de funciones como floor(), round() y ceil().

En este artículo, veremos ejemplos de muchas de esas funciones. Pero primero, aprendamos más sobre el objeto Math.

Ejemplo

El siguiente ejemplo muestra como usar el objeto Math para escribir una función que calcula el área de un circulo:

function calcularAreaDeCirculo(radio) {
  return Math.PI * Math.pow(radio, 2);
}

calcularAreaDeCirculo(1); // 3.141592653589793

Math Max

Math.max() es una función que devuelve el valor mayor de una lista de valores numéricos pasados como parámetros. Si se pasa un valor no numérico como parámetro, Math.max() devolverá NaN.

Un arreglo de valores numéricos puede ser pasado como un solo parámetro a Math.max() usando spread (...) o apply. Cualquiera de estos métodos puede, sin embargo, fallar cuando la cantidad de números en el arreglo es muy grande.

Sintaxis

Math.max(valor1, valor2, valor3, ...);

Parámetros

Números, o una cantidad limitada de números en un arreglo.

Valor de retorno

El mayor valor numérico entre los números dados, o NaN si alguno de los valores no es numérico.

Ejemplos

Números como parámetros

Math.max(4, 13, 27, 0, -5); // devuelve 27

Parámetro inválido

Math.max(4, 13, 27, 'ocho', -5); // devuelve NaN

Arreglo como parámetro, usando Spread (…)

let numeros = [4, 13, 27, 0, -5];

Math.max(...numeros); // devuelve 27

Arreglo como parámetro, usando .apply()

let numeros = [4, 13, 27, 0, -5];

Math.max.apply(null, numeros); // devuelve 27

Math Min

La función Math.min() devuelve el menor valor de cero o más números.

Le puedes pasar cualquier cantidad de argumentos.

Math.min(7, 2, 9, -6);
// devuelve -6

Math PI

Math.PI es una propiedad estática del objeto Math y corresponde al número Pi, que se define como la relación entre la longitud de la circunferencia de un círculo respecto a su diámetro. El número Pi es aproximadamente 3.14149 y se representa comúnmente con la letra griega π.

Ejemplo

Math.PI \\ 3.141592653589793

Más información:

MDN

Math Pow

Math.pow() devuelve el valor de un número elevado a otro número.

Sintaxis

Math.pow(base, exponente), donde base es el número base y exponente es el número al que se eleva la base.

pow() es un método estático de Math, por lo tanto, siempre es llamado como Math.pow() en vez de un método en otro objeto.

Ejemplos

Math.pow(5, 2); // 25
Math.pow(7, 4); // 2401
Math.pow(9, 0.5); // 3
Math.pow(-8, 2); // 64
Math.pow(-4, 3); // -64

Math Sqrt

La función Math.sqrt() devuelve la raíz cuadrada de un número.

Si se ingresa un número negativo, te devuelve NaN.

sqrt() es un método estático de Math, por lo tanto, siempre es llamado como Math.sqrt() en vez de un método en otro objeto.

Sintaxis

Math.sqrt(x), donde x es un número.

Ejemplos

Math.sqrt(25); // 5
Math.sqrt(169); // 13
Math.sqrt(3); // 1.732050807568
Math.sqrt(1); // 1
Math.sqrt(-5); // NaN

Math Trunc

Math.trunc() es un método del objeto estándar Math que devuelve sólo la parte entera de un número dado, simplemente quitando las unidades fraccionarias. Esto resulta en hacer un redondeo de la parte decimal a 0. Cualquier valor ingresado que no sea un número devolverá como resultado NaN.

Cuidado: este método es una característica de ECMAScript 2015 (ES6) y no tiene soporte en los navegadores antiguos.

Ejemplos

Math.trunc(0.1)   //  0
Math.trunc(1.3)   //  1
Math.trunc(-0.9)  // -0
Math.trunc(-1.5)  // -1
Math.trunc('foo') // NaN

Math Ceil

Math.ceil() es un método del objeto estándar Math que redondea un número dado hacia el siguiente número entero. Toma nota que para los números negativos, esto significa que el número será redondeado "hacia 0" en vez de el número de mayor valor absoluto (ve los ejemplos a continuación).

Ejemplos

Math.ceil(0.1)  //  1
Math.ceil(1.3)  //  2
Math.ceil(-0.9) // -0
Math.ceil(-1.5) // -1

Math Floor

Math.floor() es un método del objeto estándar Math que redondea un número dado hacia el número entero anterior. Toma nota que para los números negativos esto significa que el número será redondeado "lejos de 0" en vez de el número de menor valor absoluto debido a que Math.floor() devuelve el número entero que sea menor o igual al número dado.

Ejemplos

Math.floor(0.9)  //  0
Math.floor(1.3)  //  1
Math.floor(0.5)  //  0
Math.floor(-0.9) // -1
Math.floor(-1.3) // -2

Aplicando math.floor: Cómo crear una Máquina Tragamonedas de JavaScript

Para este ejercicio, tenemos que generar tres números al azar usando una fórmula específica y no la fórmula general. Math.floor(Math.random() * (3 - 1 + 1)) + 1;

puestoUno = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
puestoDos = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
puestoTres = Math.floor(Math.random() * (3 - 1 + 1)) + 1;

Otro ejemplo: Encontrando el residuo

5 % 2 = 1 porque
Math.floor(5 / 2) = 2 (Cociente)
2 * 2 = 4
5 - 4 = 1 (Residuo)

Uso

En matemáticas, se puede verificar si un número es par o impar viendo el residuo de dividir dicho número entre 2.

17 % 2 = 1 (17 es impar)
48 % 2 = 0 (48 es par)

Nota No confundas que el operador Resto % no funciona bien con números negativos.

Más artículos relacionados con Math:

• Convertir un reloj de 12 horas a uno de 24 horas
• Regla de Simpson

Traducido del artículo JavaScript Math Functions Explained

En este artículo, aprenderás por qué usamos variables, cómo usarlas y las diferencias entre const, let y var.

¿Para qué se usan las variables en JavaScript?

En el contexto de la programación, los datos son información que usamos en nuestros programas informáticos. Por ejemplo, tu nombre de usuario en Twitter es un dato.

Gran parte de la programación se trata de manipular o mostrar datos. Para hacer esto, los programadores necesitan alguna manera de guardar y registrar datos. Vamos a demostrar esto con un ejemplo.

Primero abriremos nuestra consola de JavaScript. Para abrir tu consola de JavaScript en Chrome, puedes usar el atajo Ctrl + Shift + J en Windows y Linux. Para Mac, usa Cmd + Option + J.

Una vez la consola esté abierta, piensa en la edad actual de tu perro o gato (o cualquier número similar si no tienes mascotas) y digítalo en la consola.

4

Ahora, ¿qué pasa si queremos referirnos a ese número otra vez? Tendríamos que escribirlo por segunda vez.

Necesitamos una manera de referirnos a este dato en particular para que podamos reusarlo a lo largo de nuestro programa.

Introduciendo variables en JavaScript

Una analogía útil es pensar en las variables como etiquetas para nuestros valores. Piensa en un contenedor de arándanos con una etiqueta que dice 'arándanos'. En este ejemplo, la variable arándanos, señala hacia un valor, que son los mismos arándanos.

Declaremos una variable, edad, y usemos el operador de asignación (signo igual) para asignar nuestro valor, 4, a esta variable. Usaremos la palabra clave var.

var edad = 4

Las variables son la manera como los programadores le dan nombre a un valor para poder reusarlo, actualizarlo o simplemente registrarlo. Las variables se pueden usar para guardar cualquier tipo de dato en JavaScript.

Ahora que hemos asignado este valor a la variable edad, podremos referirnos a este más adelante. Si escribes ahora la variable edad en tu consola, esta te devolverá el valor de 4.

Cómo usar la palabra clave var en JavaScript

Las palabras clave en JavaScript son palabras reservadas. Cuando usas la palabra clave var, le estás diciendo a JavaScript que vas a declarar una variable.

Al usar var, las variables pueden ser reasignadas. Demostraremos esto primeramente declarando una nueva variable, nombre, y asignándole el valor de Madison.

var nombre = 'Madison'

Luego, reasignaremos esta variable para que apunte al valor de un nombre diferente, Ben.

nombre = 'Ben'

Ahora, si ejecutas console.log(nombre), obtendrás el resultado Ben.

Al usar la palabra clave var, las variables también pueden ser declaradas sin valor inicial.

var año

Aquí hemos definido la variable año, pero esta no apunta hacia ningún valor. Más adelante, si queremos que apunte hacia algún valor, podemos usar el operador de asignación para lograrlo.

año = 2020

Ahora nuestra variable año apuntará al valor 2020.

Cuando JavaScript fue creado por primera vez, la única manera de declarar una variable era con la palabra clave var.

En las actualizaciones recientes a JavaScript (ECMAScript2015), const y let fueron creadas como otras palabras clave para declarar variables.

Para explicar por qué eran necesarias, veremos los problemas que tiene var. Con el objetivo de observar estos problemas, aprenderemos lo que es el Scope.

¿Qué es el Scope?

El ámbito (Scope) se refiere a los lugares dentro de nuestro código en donde las variables están disponibles para su uso. Cuando una variable tiene un ámbito global, significa que está disponible en cualquier lugar de tu programa. Veamos un ejemplo.

Toma el siguiente bloque de código y pégalo en tu consola.

var nombre = 'Madison'
function imprimirNombre() {
    console.log(nombre)
}
imprimirNombre()

Aquí hemos creado y llamado una función, imprimirNombre, que imprimirá el valor de la variable nombre, Madison. Verás eso impreso en tu consola.

Debido a que nuestra variable fue creada por fuera de la función, tiene alcance global. Esto significa que está disponible en cualquier parte de tu código, incluyendo dentro de cualquier función. Es por eso que la función, imprimirNombre, tiene acceso a la variable nombre.

Vamos ahora a crear una variable que tenga alcance de función. Esto significa que la variable solo se puede acceder dentro de la función en la que fue creada. Este siguiente ejemplo será muy similar al código anterior, pero con un posicionamiento diferente de la variable.

function imprimirAño() {
 var año = 2020
}
console.log(año)

Ahora nos saldrá un error en la consola: año is not defined (año no está definida). Esto es porque la variable año tiene alcance de función. Es decir, solo existe dentro de la función dentro de la cuál fue creada. Al ejecutar console.log, hemos intentado acceder a la variable desde afuera de la función, donde no tenemos acceso.

Las variables con alcance de función son útiles a los programadores porque frecuentemente queremos crear variables que sólo sirvan o sean necesarias dentro de cierta función. Crear variables globales también nos puede generar errores o fallos.

Ahora que tenemos un entendimiento básico de lo que es el alcance, podemos volver a nuestra discusión acerca de los problemas que tiene la palabra clave var.

Problemas con la palabra clave var en JavaScript

Veamos otro ejemplo.

Crearemos una variable, edad. Luego escribiremos una sentencia if que verifique si edad tiene algún valor y, si lo tiene, que devuelva un console.log del número que sea el doble de la edad.

Este es un ejemplo simplificado, pero primero revisaremos si edad tiene un valor porque queremos asegurarnos que estamos sumando valores válidos.

var edad = 27
if (edad) {
 var dobleDeEdad = edad + edad
 console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

Ahora en la consola verás El doble de tu edad actual es 54.

Nuestra variable, dobleDeEdad, es ahora una variable global. Si ingresas dobleDeEdad en tu consola, verás que tienes acceso a ella.

dobleDeEdad
54

Como podemos observar, dobleDeEdad está ahora disponible en cualquier parte de nuestro código. La variable dobleDeEdad no fue declarada dentro de ninguna función. En consecuencia, ha sido creada con alcance global.

El problema es que dobleDeEdad solo es una variable que usamos una vez dentro de nuestra sentencia if, la cuál no necesitamos que esté disponible en todo nuestro código. Se ha 'filtrado' fuera de la sentencia en la que fue creada, incluso si no necesitábamos que eso sucediera.

var edad = 27
if (edad) {
 //Necesitamos que var dobleDeEdad exista solamente en este bloque de código dentro de las llaves 
    var dobleDeEdad = edad + edad
    console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

dobleDeEdad
54
//Nuestra var dobleDeEdad está disponible por fuera de estas llaves, en el ámbito global

Sería bueno que tuviésemos una manera de crear una variable que *solo* exista dentro de la sentencia if en donde fue creada. En otras palabras, el bloque de código que existe dentro de las llaves.

var edad = 27
if (edad) {
 //Queremos que nuestra variable solo exista aquí, donde la usaremos
 var dobleDeEdad = edad + edad
 console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

Para ayudar a resolver este problema, las palabras clave const y let fueron introducidas a JavaScript.

Cómo usar la palabra clave const en JavaScript

const funciona similar a var, pero con unas cuantas diferencias grandes.

Primero, const tiene alcance de bloque, mientras que var tiene alcance de función.

¿Qué es un bloque?

Un bloque se refiere a cualquier espacio que esté entre llaves de apertura y cierre. Esto puede parecer confuso al principio. Escribamos nuestro ejemplo anterior, pero esta vez usando const en vez de var al declarar nuestra variable dobleDeEdad.

var edad = 27
if (edad) {
 const dobleDeEdad = edad + edad
 console.log(`El doble de tu edad actual es ${dobleDeEdad}`)
}

Ahora escribe dobleDeEdad en tu consola y presiona Enter. Te debería arrojar un error, dobleDeEdad is not defined ( dobleDeEdad no está definida). Esto es porque const tiene alcance de bloque: solo existe dentro del bloque donde fue definida.

La variable dobleDeEdad está 'atrapada' dentro de las dos llaves de apertura y cierre. El código que está dentro de dichas llaves si puede acceder a dobleDeEdad, pero ningún código fuera de estas lo puede hacer.

Al usar const en vez de var, nuestro problema anterior es solucionado. Nuestra variable dobleDeEdad ya no se está 'filtrando' en nuestro ámbito global innecesariamente. En cambio, solo está disponible dentro del bloque de código donde fue creada.

¿Cómo funcionan las variables con ámbito de bloque dentro del contexto de las funciones? Para aprender sobre esto, vamos a crear y luego llamar a una función, devuelveX.

function devuelveX() {
 const x = 1
 return x
}
devuelveX()

Al llamar a la función devuelveX, podemos ver que esta devuelve el valor de x, que es 1.

Si luego escribimos x, la consola arrojará referenceError: x is not defined (Error de referencia: x no está definida). Esto es porque las funciones también con consideradas como bloques, lo que quiere decir que nuestra const x solo existirá dentro de la función.

Lo siguiente que debes saber sobre const es que solo se puede declarar una sola vez. Escribe este código en la consola:

const y = 1
const y = 2

Deberías ver un error,  Identifier 'y' has already been declared (El identificador 'y' ya ha sido declarado).

Esta es la diferencia entre var y const. Mientras que const arroja un error, haciéndote saber que ya has declarado esta variable, la palabra clave var no.

var x = 1
var x = 2

La variable x señalará hacia el valor 2 sin errores. Esto puede causar errores para ti como programador, siendo que a lo mejor no quisiste asignarle un nuevo valor a tu variable. Entonces, usar const te puede ayudar, dado que recibirás un error si tratas de reasignar la variable accidentalmente.

Esta es una fortaleza de la palabra clave const que fue introducida como una mejor manera de crear variables en JavaScript. Sin embargo, ¿qué pasa en los casos cuando sí quieres actualizar el valor de tu variable?

Veamos un ejemplo en donde querríamos hacer eso.

Declaremos una variable adulto, con valor false. También crearemos una variable edad con valor  20.

const adulto = false

const edad = 20

Digamos que queremos revisar la edad del usuario y cambiar el valor de nuestra variable adulto a verdadero si la edad está por encima de 18. Podemos escribir una sentencia para hacerlo.

if (edad > 18) {
 adulto = true   
}

¿Qué pasa cuando ejecutamos este código?

Aquí veremos Error: Assignment to constant variable (Error: asignación a variable constante).

Esto es porque, en concordancia con las reglas de const, no podemos volver a declarar esta variable. Debido a que nuestra variable adulto ya está apuntando al valor false, no podemos hacerle apuntar a algo más.

Si imprimimos adulto de nuevo, podemos ver que se mantuvo igual y contiene el mismo valor de false.

No podemos reasignar nuestra variable adulto, lo que significa que const está funcionando de la manera esperada. Sin embargo, ¿qué pasa si queremos reasignar esta variable?

Frecuentemente los programadores querrán poder volver a declarar sus variables.

Aquí es donde nuestra tercera palabra clave, let, surge.

Cómo usar la palabra clave let en JavaScript

Primero revisemos como let es similar a const.

Let, como const, tiene alcance de bloque. Si reemplazas const por let en nuestro ejemplo previo de dobleDeEdad, funcionaría igual.

Sin embargo, let es diferente de const de un modo fundamental. Las variables declaradas con la palabra clave let pueden volver a ser declaradas, a diferencia de const. Repasemos un ejemplo.

Usando nuestro mismo ejemplo previo, reemplaza const por let. Mantendremos nuestra variable edad como una const con el valor de 20.

let adulto = false
const edad = 20
if (edad > 18) {
    adulto = true
}

Ahora si escribimos adulto, en vez de recibir un error como se generó anteriormente, ahora veremos el resultado true.

Al usar la palabra clave let, hemos actualizado nuestra variable para que apunte al valor de true como queríamos. Algunas veces en programación, necesitaremos actualizar una variable dependiendo de ciertos datos que recibamos. Podemos usar let para lograr esto.

Conclusión

En resumen, hemos aprendido que las variables son usadas para registrar y reusar datos en nuestros programas informáticos. El alcance (Scope) se refiere al lugar en nuestro código donde las variables están disponibles para su uso.

Las variables se pueden declarar usando var, const, o let. var tiene alcance de función, mientras que const y let tienen alcance de bloque. Las variables const no pueden ser reasignadas, mientras que las variables let si pueden serlo.

var, const, y let pueden ser confusas al principio. Puede ayudar que leas varios tutoriales al respecto, así como también poner tu propio código a prueba de diferentes maneras para fortalecer tu entendimiento.

Tener una base sólida de var, const y let te ayudará no solo al principio de tu carrera de JavaScript, sino también a lo largo de esta.

¡Gracias por leer!

Si te gustó esta publicación, suscríbete a mi lista de correo donde envió mis últimos artículos y anuncio meetups para mi club de libros de código.

Si tienes feedback o preguntas sobre este post, puedes twittearme a @madisonkanna.

Traducido del artículo JavaScript Variables – A Beginner's Guide to var, const, and let de Madison Kanna

Por ejemplo, si tuvieses tu propio archivo personalizado de JavaScript llamado ‘script.js’ y quisieras agregar su funcionalidad a tu página HTML, lo agregarías de la siguiente manera:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ejemplo de atributo de script Src</title>
  </head>
  <body>

  <script src="./script.js"></script>
  </body>
</html>

Esto apuntaría a un archivo llamado ‘script.js’ que está en el mismo directorio del archivo .html. También puedes enlazar otros directorios usando ’..’ en la ruta del archivo.

<script src="../public/js/script.js"></script>

Esto salta un nivel arriba del directorio, luego a un directorio 'público', luego a un directorio llamado ‘js’ y luego al archivo ‘script.js’.

También puedes usar el atributo ‘src’ para enlazar archivos ".js" externos alojados por un tercero. Esto se usa si no quieres descargar una copia local del archivo. Solo ten en cuenta que si el enlace cambia o si el acceso de red está caído, el archivo externo que estás enlazando no funcionará.

Este ejemplo enlaza un archivo jQuery.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

Traducido del artículo Link JavaScript to HTML with the script src Attribute

Este artículo está dirigido a desarrolladores que tienen un entendimiento promedio de HTML, CSS y JavaScript. Traté de hacerlo lo más limpio posible, pero no me enfocaré mucho en los detalles. Espero que lo disfruten.

Capturas

Así es como se ve el resultado del código:

Pantalla inicial:

Menú desplegable abierto:

Menú desplegable con opción seleccionada:

HTML:

En esta sección, abordaremos la implementación del código HTML del demo de la página. Para empezar, veamos el código <head>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Ejemplo Desplegable</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="styles.css">
</head>

Esto es prácticamente HTML la sección repetitiva de "head", con la excepción de las etiquetas link  que cargan los dos archivos CSS a usar en este tutorial: los estilos de Font Awesome y el archivo styles.css, donde definiremos los estilos de esta página.

Luego, tenemos el resto del archivo HTML, el body:

<body>
	<div class='dropdown'>
		<div class='title pointerCursor'>Seleccione una opción <i class="fa fa-angle-right"></i></div>
		
		<div class='menu pointerCursor hide'>
			<div class='option' id='option1'>Opcion 1</div>
			<div class='option' id='option2'>Opcion 2</div>
			<div class='option' id='option3'>Opcion 3</div>
			<div class='option' id='option4'>Opcion 4</div>
		</div>

	</div>
	<span id='result'>El resultado es: </span>
	<script>
	  ...
	</script>
</body>
</html>

Esta sección puede ser dividida en 3 partes principales:

• El div .dropdown, donde la estructura del elemento desplegable será definida.
• El elemento #result, que contendrá la opción seleccionada por el usuario, obtenido del elemento desplegable.
• El script escrito dentro del tag <script>. Su implementación está escondida porque los detalles serán explicados en la última sección de este tutorial.

El menú desplegable es un div que contiene los elementos  title y menu. El primero define el texto que se mostrará en el elemento antes que se elija una opción y el segundo definirá las opciones que podrán ser seleccionadas por el elemento.

El elemento result está allí solo para mostrarte cuál de las opciones está seleccionada actualmente.

Estilos:

A continuación podrás revisar el código CSS completo. Como puedes ver, hace uso de las propiedades CSS3 transition y transform.

Por favor pon atención en las definiciones de clases de .dropdown. Estas son usadas para definir el diseño del componente contenedor del desplegable y también los elementos internos, como el .title (título) y sus .option‘s.

body{
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.hide {
    max-height: 0 !important;
}

.dropdown{
	border: 0.1em solid black;
	width: 10em;
	margin-bottom: 1em;
}

.dropdown .title{
	margin: .3em .3em .3em .3em;	
	width: 100%;
}

.dropdown .title .fa-angle-right{
	float: right;
	margin-right: .7em;
	transition: transform .3s;
}

.dropdown .menu{
	transition: max-height .5s ease-out;
	max-height: 20em;
	overflow: hidden;
}

.dropdown .menu .option{
	margin: .3em .3em .3em .3em;
	margin-top: 0.3em;
}

.dropdown .menu .option:hover{
	background: rgba(0,0,0,0.2);
}

.pointerCursor:hover{
	cursor: pointer;
}

.rotate-90{
	transform: rotate(90deg);
}

JavaScript:

Ahora veremos como la parte de JavaScript es implementada. Primero recorreremos las definiciones de funciones y luego el código que llama a dichas funciones para hacer que las acciones desplegables sucedan.

En resumen, son 3 acciones que ocurren dependiendo de cual sea la interacción del usuario, dado que los "listeners" sean agregados a los elementos del DOM.

1. Dar clic en el elemento desplegable
2. Seleccionar una de las opciones del desplegable
3. Cambiar la opción actualmente seleccionada

Me gustaria aclarar que estamos usando funciones flecha (arrow functions) ( () => {} ) y la palabra clave const, que son características de ES6. Probablemente esté todo bien si estás usando una versión actualizada de tu navegador, pero ten esto en cuenta.

1. Dar clic en el elemento desplegable

function toggleClass(elem,className){
	if (elem.className.indexOf(className) !== -1){
		elem.className = elem.className.replace(className,'');
	}
	else{
		elem.className = elem.className.replace(/\s+/g,' ') + 	' ' + className;
	}
	
	return elem;
}

function toggleDisplay(elem){
	const curDisplayStyle = elem.style.display;			
				
	if (curDisplayStyle === 'none' || curDisplayStyle === ''){
		elem.style.display = 'block';
	}
	else{
		elem.style.display = 'none';
	}
}


function toggleMenuDisplay(e){
	const dropdown = e.currentTarget.parentNode;
	const menu = dropdown.querySelector('.menu');
	const icon = dropdown.querySelector('.fa-angle-right');

	toggleClass(menu,'hide');
	toggleClass(icon,'rotate-90');
}

Al dar clic en el menú desplegable, éste se abre (si está cerrado) o se cierra (si está abierto). Esto sucede vinculando toggleMenuDisplay al Listener del evento clic en el elemento desplegable. Esta función alterna la visibilidad de su elemento menu haciendo uso de las funciones toggleDisplay y toggleClass.

2. Seleccionar una de las opciones del desplegable

function handleOptionSelected(e){
	toggleClass(e.target.parentNode, 'hide');			

	const id = e.target.id;
	const newValue = e.target.textContent + ' ';
	const titleElem = document.querySelector('.dropdown .title');
	const icon = document.querySelector('.dropdown .title .fa');


	titleElem.textContent = newValue;
	titleElem.appendChild(icon);
	
	//Activa evento personalizado
	document.querySelector('.dropdown .title').dispatchEvent(new Event('change'));
	//setTimeout se usa para que la transición se muestre correctamente
	setTimeout(() => toggleClass(icon,'rotate-90',0));
}

3. Cambiar la opción actualmente seleccionada

function handleTitleChange(e){
	const result = document.getElementById('result');

	result.innerHTML = 'The result is: ' + e.target.textContent;
}

La función handleTitleChange está sujeta al evento personalizado change en el elemento .title, para cambiar el contenido del elemento #result cada vez que el elemento del título cambie. La activación del evento se da en la sección anterior.

Código principal

//obtiene elementos
const dropdownTitle = document.querySelector('.dropdown .title');
const dropdownOptions = document.querySelectorAll('.dropdown .option');

//vincula listeners a estos elementos
dropdownTitle.addEventListener('click', toggleMenuDisplay);
dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected));
document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);

En la sección principal solo hay código simple para obtener el título de la sección desplegable y para vincular cada opción a los eventos discutidos en la última sección.

Demo

El código completo y el demo de esta aplicación puede ser encontrados aquí.

Traducido del artículo How to Create a Dropdown Menu with CSS and JavaScript

Hasta hace poco, el término “desarrollo web responsive” era inexistente. Actualmente la mayoría de nosotros hemos tenido que adoptarlo de alguna manera.

De acuerdo a Statista, desde el 2019, 61% de todas las visitas a la búsqueda de Google se realizan desde un dispositivo móvil. En septiembre de 2020, Google cambió su algoritmo de búsqueda para priorizar sitios web que sean amigables con la navegación desde dispositivos móviles.

En este post abordaré lo siguiente:

• ¿Qué es el diseño web responsive?
• El meta tag viewport y lo que hace
• Técnicas efectivas usadas en el diseño web responsive para adaptarse a dispositivos móviles y tabletas
• Herramientas que ayudan a simular y monitorear la experiencia del usuario en dispositivos móviles y tabletas

¿Qué es el Diseño Web Responsive? (RWD)

El diseño web responsive es un enfoque que se centra en el entorno del usuario dentro de un sitio web. El entorno del usuario dependerá del dispositivo que tenga conectado a internet.

Existen múltiples características de un dispositivo que brindan oportunidades para hacer un enfoque centrado en el usuario. Algunas de estas incluyen:

• Conexión de red
• Tamaño de la pantalla
• Tipos de interacción (pantallas táctiles, track pads)
• Resolución gráfica.

Antes que el diseño web responsive fuese popular, muchas compañías manejaban un sitio web completamente separado, el cual recibía tráfico reenviado basándose en el agente de usuario (user-agent).

Pero en el diseño web responsive, el servidor siempre manda el mismo código HTML a todos los dispositivos y se hace uso de CSS para alterar la renderización de la página en el dispositivo.

Independientemente de las dos estrategias previas, el primer paso en la creación un sitio web para teléfonos o tabletas, es asegurarse que el navegador conozca la intención. Aquí es donde el meta tag viewport entra en juego.

El Meta Tag Viewport para identificar un sitio web móvil

El meta tag viewport le indica al navegador cómo ajustar la página al ancho de cada dispositivo.

Cuando el elemento meta viewport está ausente, los navegadores móviles mostrarán las páginas con su configuración de escritorio por defecto. Esto resulta en una experiencia que parece ser no responsive y de vista reducida.

A continuación una implementación estándar:

<meta name="viewport" content="width=device-width,initial-scale=1"/>

Ahora que el navegador sabe lo que está pasando, podemos utilizar técnicas populares para hacer que nuestro sitio web sea responsive.

Media Queries de CSS para Tamaños de Pantalla y Orientaciones Diferentes

Si eres nuevo al diseño web responsive, las Media Queries son la primera y más importante característica de CSS por aprender. Las Media Queries te permiten estilizar elementos basado en el ancho del viewport (área visible de un navegador). Una estrategia popular de CSS consiste en escribir los estilos móviles primero y construir sobre estos los estilos más complejos, específicos de escritorio.

Las Media Queries son una parte importante del diseño web responsive comúnmente usadas para grid layouts, tamaños de texto, márgenes y padding que difieren según el tamaño de pantalla y la orientación.

A continuación un ejemplo de un caso de uso común en estilización Mobile First, en donde una columna tiene 100% de ancho para dispositivos pequeños, pero en viewports más amplios tiene un 50% de ancho.

.column {
  width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 50%;
  }
}

El código anterior es un ejemplo simple, pero lo que realmente hace es bastante interesante.

1. Considerando Mobile First, el elemento "column" se le definió un ancho de 100%;
2. Usando una Media Query min-width, definimos reglas específicamente para viewports con un ancho mínimo de 600px (área visible más anchas que 600px). De esta manera, para viewports más anchos que 600px, nuestro elemento "column" tendrá un ancho correspondiente al 50% de su elemento padre.

Si bien, las Media Queries son esenciales para el diseño web responsive, muchas otras características de CSS también están siendo adoptadas a gran escala y reciben soporte en los navegadores. Caja Flexible (Flexbox) es una de esas nuevas e importantes características de CSS cuando de diseño web responsive se trata.

¿Qué es Flexbox?

Te estarás preguntando — "¿Qué hace Flexbox?" La mejor pregunta sería — "¿Hay algo que Flexbox no pueda hacer?" ¿Cuál es la manera más fácil de centrar verticalmente con CSS? La respuesta: Flexbox. ¿Cómo se crea un diseño de cuadrícula (grid layout) responsive? Flexbox.

El módulo Diseño de Caja Flexible (Flexible Box Layout) proporciona una manera más eficiente de diseñar, alinear y distribuir espacio entre los ítems en un contenedor, incluso cuando su tamaño es dinámico — De ahí la palabra "flex".

En el ejemplo a continuación, combinamos Media Queries como se explica arriba para crear un Grid responsive.

<style>
  main {
    background: #d9d7d5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  div {
    background: #767775;
    flex-basis: 100%;
    height: 100px;
    margin-bottom: 0.5rem;
  }

  @media (min-width: 600px) {
    main {
      flex-wrap: nowrap;
    }

    div {
      flex-basis: 33%;
    }
  }
</style>
<main>
  <div></div>
  <div></div>
  <div></div>
</main>

Con este código logramos lo siguiente:

1. Establecer un diseño Flexbox con display: flex en nuestro elemento contenedor llamado main.
2. Estilizar para Mobile First. Definimos  flex-wrap: wrap al elemento main que permite a los elementos hijo acomodarse dentro de nuestro diseño Flexbox como se ilustra en la Figura 1. Definimos flex-basis: 100% en nuestro elemento div para asegurarnos que ocupe el 100% del ancho del elemento padre en el diseño Flexbox (Figura 1).
3. Estilizar para dispositivos más grandes como las tabletas y computadores de escritorio. Utilizamos una Media Query similar a nuestro ejemplo en la sección anterior para establecerle flex-wrap: nowrap a nuestro elemento contenedor  main. Esto asegura que los elementos hijo no fluyan y el diseño se mantenga como columnas dentro de una sola fila. Al definir  flex-basis: 33% a div dentro de la Media Query — establecemos columnas que corresponden al 33% de ancho del elemento padre.
4. En este ejemplo, la magia se vería en dispositivos más grandes con reglas combinadas de las Media Query y de Flexbox. Debido a que definimos  display: flex y, además, no anulamos la regla dentro de la Media Query, tenemos un diseño Flexbox para móviles, tabletas y escritorio. La Media Query flex-basis: 33% y la regla heredada display: flex nos da un diseño Flexbox reconocible como se puede observar en la Figura 2. En el pasado, hacer este tipo de diseño de columna era trabajo duro, siendo necesario escribir muchos enredos en CSS para lograrlo.

Flexbox proporciona una buena manera de lograr diseños variados y fluidos. En algunos casos, puede que no tengamos este tipo de libertad en espacios verticales. Es posible que sea necesario adaptar un elemento a un valor de alto fijo. En dicha situación, existe otra técnica a nuestra disposición — desplazamiento horizontal.

Desplazamiento horizontal con Overflow Scroll

Podría llegar el momento en donde haya contenido se desborda del viewport sin una manera atractiva de resolverlo. He aquí... ¡Overflow Scroll al rescate!

Los usos comunes de esta técnica incluyen menús desplegables y tablas. A continuación un ejemplo de un menú desplazable.

<style>
  menu {
    background: #d9d7d5;
    padding: 0.25rem;
    overflow-y: scroll;
    white-space: nowrap;
  }

  span {
    background: #767775;
    color: #ffffff;
    display: inline-block;
    margin: 0.25rem;
    padding: 0.5rem;
  }
</style>
<menu>
  <span>Deseño Responsive Web</span>
  <span>RWD</span>
  <span>menú Responsive</span>
  <span>Ejemplo Overflow scroll</span>
  <span>¡Esto es mucho contenido!</span>
  <span>Si</span>
  <span>Nosotros</span>
  <span>tenemos</span>
  <span>otro</span>
  <span>elemento</span>
</menu>

¿¡Pero cómo hiciste eso!? Profundicemos:

• overflow-y: scroll es el ingrediente clave de esta receta. Al definirlo, los elementos hijo se desbordarán sobre el eje horizontal con comportamiento de desplazamiento.
• ¡No tan rápido! Aunque pienses que  overflow-y es suficiente, también debemos hacerle saber al navegador que no envuelva a los elementos hijos con  white-space: nowrap.

Ahora que tenemos unas cuantas técnicas de RWD bajo nuestra manga, veamos elementos que suponen retos específicos por su naturaleza visual — imágenes y videos.

Imágenes Responsive

Al usar atributos de tag modernos para imágenes, podemos acomodar un rango de dispositivos y resoluciones. A continuación, un ejemplo de una imagen responsive.

<style>
  img {
    max-width: 100%;
  }
</style>

<picture>
  <source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
  <source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
  <img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>

Esto hace bastantes cosas. Vamos a desglosarlo:

1. Al definir max-width: 100% la imagen se va a ampliar o reducir basada en el ancho de su contenedor.
2. Al usar la combinación de los tags  picture, source e img, en realidad estamos renderizando solo una imagen y cargando la que mejor se adapte al dispositivo del usuario.
3. WebP es un formato de imagen moderno que brinda compresión superior para imágenes en la web. Al utilizar  source podemos hacer referencia a una imagen WebP para usar en navegadores que cuenten con el soporte y agregar otro tag  source para referenciar una versión PNG de las imágenes que no tienen soporte WebP.
4. srcset es usado para decirle al navegador qué imagen utilizar basada en la resolución del dispositivo.
5. Establecemos native lazy loading (carga diferida nativa) mediante el uso del par atributo / valor (attribute / value)  loading="lazy".

Videos Responsive

El video Responsive es otro tema que ha inspirado un gran número de artículos y documentación.

Una estrategia clave para establecer imágenes, videos, iframes responsive y otros elementos implica el uso de relación de aspecto (aspect-ratio). La caja de relación de aspecto no es una técnica nueva y además es muy útil de tener bajo la manga para los Desarrolladores Web.

Este artículo brinda una demostración sólida acerca de cómo lograr vídeos de ancho "fluido". Veamos el código y desglosemos:

<style>
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }

  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

En este ejemplo tenemos un video embebido de YouTube cómo iframe y un contenedor div con la clase videoWrapper. Este código está haciendo bastante... profundicemos:

• position: relative en el elemento contenedor le permite a los elementos hijos utilizar la posición absoluta, que es relativa a dicho elemento contenedor.
• height: 0 combinado con padding-bottom: 56.25% es el ingrediente clave aquí, el cual establece un comportamiento dinámico, aplicando la relación de aspecto  16:9.
• position: absolute, top: 0 y left: 0 definidos en el iframe, crean un comportamiento en el que los elementos se posicionan absolutamente relativos a su padre... fijándose en la parte superior izquierda.
• Finalmente, width: 100% y height: 100%  hace que el elemento hijo iframe sea el 100% de su padre. El padre  .videoWrapper toma control completo de establecer la relación de aspecto.

Lo sé... es bastante. Hay más que podemos hacer para lograr que videos e imágenes se vean lo mejor posible en teléfonos y tabletas. Les animo a que investiguen estos temas por su cuenta en adición a esto.

Bien, ahora que somos los amos del diseño web responsive, ¿cómo podemos poner a prueba lo que hemos hecho? Afortunadamente, tenemos un número de herramientas para simular y monitorear la experiencia de usuario en una variedad de dispositivos.

Herramientas para simular y monitorear sitios web responsive

Existe una variedad de herramientas útiles para ayudarnos a crear sitios web con diseño responsive. A continuación encontramos un par de estas que me parecen especialmente útiles.

Emulación móvil en Chrome DevTools

Las Chrome DevTools (Herramientas para Desarrolladores de Chrome) proporcionan emulación móvil para un rango de tabletas y dispositivos móviles. También ofrece una opción "Responsive" que te permite definir un tamaño personalizado del viewport.

Monitoreando el desempeño de un Sitio Web Móvil con Foo

Lighthouse es una herramienta de código abierto (open-source) que brinda una manera de analizar el desempeño de un sitio específico a cada dispositivo.

Foo usa Lighthouse detrás de escena para monitorear el desempeño de un sitio web y brindar feedback para su análisis. Se puede configurar el monitoreo para ambos escritorio y dispositivos móviles y obtener feedback continuo acerca de qué tan responsive es tu sitio web.

Por ejemplo, un reporte de Lighthouse mostrará las imágenes que son cargadas inapropiadamente basada en el dispositivo.

Conclusión

El diseño web responsive continuará evolucionando rápidamente, pero si nos mantenemos al tanto de las tendencias actuales, podremos brindar la mejor experiencia para nuestros usuarios. ¡Espero que estas herramientas y técnicas sean de gran utilidad!

No solo nuestros usuarios se beneficiarán de un diseño versátil, también los motores de búsqueda le darán a nuestra página una clasificación superior.

Traducido del artículo Responsive Web Design – How to Make a Website Look Good on Phones and Tablets de Adam Henson