Cursos online y materiales digitales para estudiantes y desarrolladores web

javascript

5 errores comunes que no debes cometer en Javascript

Publicado el por Leave a Comment

Logotipo de Javascript

He estado dándole vueltas a cuáles son los errores más comunes al programar en Javascript que me encuentro en los ejercicios de mi alumnado y en algunos de los códigos que me envíais algunos/as codelovers y hay al menos cinco se repiten una y otra vez: declaración de variables con var, no entender la asincronía de Javascript y volverse locos/as con el orden de ejecución de las instrucciones, no mirar la consola cuando algo falla…

¿Quieres saber cuáles son en detalle? ¡Echa un ojo a este vídeo y te los cuento!

¿Cuáles son los tuyos? ¡Déjamelos en los comentarios! 😊

Qué es async/await y cómo usarlo correctamente

Publicado el por Leave a Comment

Async/await es una de las características más poderosas de Javascript que entró en la especificación de EcmaScript2017. A lo largo de esta lección te explicaré cómo usarla y qué problemas podemos encontrarnos.

Y si eres de los que prefieren vídeos, te dejo la colaboración que he hecho con Garage de ideas para que no te pierdas nada:

Promesas

Antes de meternos en harina con async-await, tenemos que entender los conceptos básicos de las promesas en JavaScript. Las promesas son una forma de manejar tareas asíncronas y, junto con async-await, nos permiten escribir un código más claro y legible.

¿Que no sabes lo que es una promesa?

Muy sencillo: una promesa es un objeto que representa el resultado de una operación asíncrona y se suele usar en tareas que toman cierto tiempo de procesamiento (por ejemplo, acceder a una API o leer un archivo) de manera ordenada y estructurada.

Es decir, creamos una promesa que tiene la lógica de la operación asíncrona y luego podemos encadenar métodos como then() o catch() para manejar la promesa en función de su estado, que puede ser pendiente, cumplida (then) o rechazada (catch). Así, entre otras cosas, evitamos anidar callbacks continuamente.

Las promesas han sido adoptadas en Javascript ampliamente y son la base de async-await.

imagen.png

¡Veamos cómo trabajar con ello!

Sintaxis de async/await

La sintaxis es muy sencilla. Usamos la palabra “async” antes de una función para decir que es asíncrona y la palabra “await”, que pausa la ejecución de la función a la espera de que se obtengan todos los datos y siempre debe estar dentro de la función async.

async function fetchData() {
    try {
        const response = await fetch("https://randomuser.me/api");
        const data = await response.json();
        console.log(data);
        document.getElementById("contenido").innerHTML = `
            <img src="${data.results[0].picture.large}" width="200px"/>
            <p>Nombre: ${data.results[0].name.first} ${data.results[0].name.last}
            `;
    }

    catch (error) {
        console.log("Error: " + error);
    }
}
fetchData();

En este ejemplo, podemos ver varias cosas:

  • La función que hemos llamado fetchData es asíncrona (por eso ponemos delante async), por lo que no bloquea la ejecución de otras tareas mientras espera a que se resuelva la promesa. Es decir, podríamos realizar otras tareas mientras se termina de ejecutar la función.
  • Luego usamos await a la espera de que la llamada a la API se resuelva y nos devuelva los datos en formato JSON.
  • Y además, hemos añadido un bloque catch que nos sirve para capturar errores en caso de que se produzcan.

Problemas en el uso de async/await

Como te comentaba al principio, es habitual que el uso de async/await de lugar a despistes o errores más comunes de lo que crees. Aquí tienes algunos de ellos:

  1. El primer problema que podemos encontrar es el olvido de marcar una función como “async” al usar “await” dentro de ella. Esto puede conducir a errores difíciles de depurar, ya que el código puede parecer correcto, pero no se comportará como esperamos.
  2. Otro problema que puede surgir es la falta de manejo adecuado de errores al utilizar async-await. Si no envolvemos nuestras operaciones asincrónicas en bloques “try-catch”, es posible que los errores pasen desapercibidos y no se manejen correctamente.
  3. Además, debemos tener en cuenta que el uso excesivo de async-await puede llevar a un código poco eficiente. Si tenemos múltiples operaciones asincrónicas y las esperamos una tras otra con await, estaremos bloqueando la ejecución de otras tareas y perdiendo el beneficio de la programación asíncrona.
  4. Debemos recordar que async-await solo funciona dentro de funciones marcadas como “async”. Si intentamos utilizar await fuera de una función asíncrona, nos encontraremos con errores de sintaxis.

¿Te ha quedado claro el uso de async/await? ¡Espero que sí! Y si tienes dudas o quieres comentar cualquier cosa al respecto, deja tu comentario 😉

¿Qué diferencia hay entre querySelector y querySelectorAll?

Publicado el por Leave a Comment

A la hora de seleccionar elementos del DOM, hay muchos modos de hacerlo. Si bien ya hemos hablado de los clásicos getElementById, getElementsByTagName o getElementsByClassName, hay un modo muy sencillo de hacerlo si conocemos los selectores CSS: los métodos querySelector y querySelectorAll.

A continuación, te cuento en detalle la diferencia entre ellos y algunas aplicaciones prácticas.

querySelector

El método querySelector se utiliza para seleccionar el primer elemento del DOM que coincida con un selector CSS.

Por ejemplo, si queremos seleccionar el primer elemento <p> en un documento HTML y almacenarlo en la variable primerParrafo, podemos utilizar el siguiente código:

let primerParrafo = document.querySelector("p");

querySelectorAll

Por otro lado, querySelectorAll se utiliza para seleccionar todos los elementos del DOM que coincidan con un selector CSS.

Por ejemplo, si queremos seleccionar todos los elementos <p> en un documento HTML y almacenarlos en la variable todosLosParrafos, podemos utilizar el siguiente código:

let todosLosParrafos = document.querySelectorAll("p");

En este caso, y a diferencia del ejemplo anterior, si hay varios elementos <p> en el documento, querySelectorAll seleccionará todos ellos.

Es importante destacar que el método querySelectorAll devuelve una colección de elementos, no un solo elemento. Esto significa que, para acceder a los elementos de la colección, es necesario utilizar un bucle “for” o un método similar.

Un ejemplo en el que recorremos todos los párrafos de la página y les modificamos el fondo podría hacerse así:

let todosLosParrafos = document.querySelectorAll("p");
for (let i=0; 0<todosLosParrafos.lenght; i++) {
  todosLosParrafos[i].style.backgroundColor = "yellow";
}

Por tanto, la diferencia fundamental entre ambos métodos es que querySelector devuelve el primer elemento que cumple con el selector indicado entre paréntesis; mientras que querySelectorAll devuelve una colección con todos los elementos que cumplen con el selector.

Aplicación práctica de querySelector y querySelectorAll

Podríamos utilizar querySelector(“h1”) para elegir el primer encabezado de primer nivel de una página que, en general, suele ser único y representa el título de la misma; y podríamos utilizar querySelectorAll(“a”) para elegir todos los enlaces de la página y procesarlos de algún modo: por ejemplo, para quitarles el subrayado.

A pesar de que los ejemplos que te he propuesto solamente hacen referencia a un elemento definido por su etiqueta, podríamos seleccionar elementos de manera tan compleja como quisiéramos utilizando selectores CSS avanzados.

Un ejemplo podría ser el siguiente, en el que seleccionamos todos los elementos párrafo que son descendientes directos de elementos con clase contenido:

let parrafosContenido = document.querySelectorAll(".contenido > p");

Fácil, ¿no? ¿Conocías estos dos métodos? 😉

¿Qué diferencias hay entre defer y async?

Publicado el por Leave a Comment

Hay dos atributos que nos permiten decidir el momento de carga de nuestros scripts. Son los atributos defer y async, y se indican en la propia etiqueta de <script> de nuestra página web.

¡Vamos a verlos!

Defer

El atributo defer es un atributo booleano que indica que el script se ejecuta cuando la página ha terminado de analizarse.

Es muy importante tener en cuenta que solamente se puede utilizar en scripts externos, es decir, en los que indicamos la ruta a través del atributo scr.

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

Async

El atributo async tiene muchas similitudes con el atributo defer. También es booleano, y solamente se puede utilizar en scripts externos.

La diferencia fundamental con respecto al anterior es que el script se carga en paralelo al análisis de la página y se ejecuta tan pronto como esté disponible, de manera que si el script está descargado por completo, el análisis de la página se interrumpe, se ejecuta el script y luego continúa el resto de la página.

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

Modos de ejecutar un script externo

Podemos encontrarnos varios modos de ejecutar un script externo:

  • Si en la etiqueta <script> aparece el atributo async, la secuencia de comandos se ejecuta mientras la página está analizando, es decir, de manera asíncrona.
  • Si en la etiqueta <script> aparece el atributo defer, el script se ejecuta cuando la página ha terminado de analizarse.
  • Si no hay ninguno de los dos, el script se ejecuta inmediatamente, antes de que el navegador analice la página.

Y para verlo de una manera super gráfica os dejo este gráfico de la web https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html que no tiene desperdicio:

Fuente: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

¿Conocías estos dos atributos? 😉

¡Error! Utilizar un igual (asignación) en lugar del doble igual (comparación) en estructuras de control

Publicado el por 2 Comments

Hacía tiempo que no escribía sobre errores clásicos de estudiantes de Javascript, pero esta semana no he podido por menos porque me he encontrado este error no una ni dos: tres veces.

Como ya se trabajé en la lección Javascript – #1.10. Operadores de comparación, a la hora de comparar dos valores podemos utilizar un doble o un triple igual.

En ningún caso debemos utilizar para comparar un signo igual.

Sobre este tema trabajamos en Javascript – #1.08. Operadores de asignación.

Y es que si utilizamos un único signo igual no estamos comparando, sino realizando una asignación, es decir, dándole un valor a una variable.

Veamos un ejemplo:

let x=5; // x toma el valor numérico 5
if (x=7) { console.log("La x vale " + x); }// Esta sentencia se ejecutará siempre ya que no comprueba si x es igual a 7, sino que le asigna a x el valor y, y devolverá un 7.

Por tanto, lo que deberíamos hacer en este caso sería lo siguiente:

let x=5; // x toma el valor numérico 5
if (x==7) { console.log("La x vale" + x); } // Esta sentencia no llegará a ejecutarse porque la x vale 5.

Recuerda que es muy importante asegurarnos de que cuando trabajamos con estructuras de control en las que se comprueba una condición (if, while, do while…), debemos realizar las comparaciones de igualdad con el doble o el triple igual; en ningún caso con un igual, ya que estaríamos asignando el valor en lugar de comparándolo.

¡Recuerda este error común en Javascript! ¡No es lo mismo utilizar un doble igual (comparación) que un igual (asignación)!

Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?

Snippet: hacer una ventana modal (modal box) con Javascript

Publicado el por Leave a Comment

Una ventana modal o modal box es un recuadro que aparece sobre la página, con la particularidad de que bloquea todas las funciones y concentra el foco en una acción particular, de modo que el usuario solamente puede hacer esa acción o cerrar la ventana.

Las ventanas modales se activan cuando el usuario hace clic en un botón, un link, etc. (si apareciera automáticamente se consideraría un pop-up).

Hay mil maneras de crear una ventana modal: sólo con CSS, con CSS y Javascript, con librerías…

En esta ocasión os traigo un snippet para crear una ventana modal, o modal box, utilizando HTML, CSS y Javascript.

Comenzamos por el HTML, que será el siguiente:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h2>Ventana modal</h2>

  <button id="abrirModal">Abrir Modal</button>

  <!-- Ventana modal, por defecto no visiblel -->
  <div id="ventanaModal" class="modal">
    <div class="modal-content">
        <span class="cerrar">&times;</span>
        <h2>Ventana modal</h2>
        <p>Esto es el texto de la ventana</p>
    </div>
  </div>
</body>
</html>

Como puedes comprobar, tenemos un botón con un identificador abrirModal que nos permitirá utilizarlo en Javascript para asociarle el evento que abrirá la ventana modal.

Y, además, tenemos la ventana modal que, por defecto, no será visible, ya que en CSS hemos utilizado la propiedad correspondiente para ocultarla.

El primer div, llamado ventanaModal, lo utilizaremos para ocultar toda la página principal con un fondo negro con opacidad del 50%; el segundo, llamado contenidoModal, hace referencia a la ventana o caja, propiamente dicha.

Veamos ahora el CSS, paso a paso:

body {font-family: Arial, Helvetica, sans-serif;}

/* Fondo modal: negro con opacidad al 50% */
.modal {
  display: none; /* Por defecto, estará oculto */
  position: fixed; /* Posición fija */
  z-index: 1; /* Se situará por encima de otros elementos de la página*/
  padding-top: 200px; /* El contenido estará situado a 200px de la parte superior */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Algura completa */
  overflow: auto; /* Se activará el scroll si es necesario */
  background-color: rgba(0,0,0,0.5); /* Color negro con opacidad del 50% */
}

Como puedes ver, inicialmente establecemos la fuente de la página en el body a Arial, Helvetica o cualquier fuente sin serifa en caso de que las dos anteriores no existieran.

Y seguidamente, creamos el modal, es decir, el color negro con opacidad que se superpone sobre la pantalla evitando hacer clic sobre nada que haya por debajo. Podrás ver que inicialmente está oculto mediante display: none; que cuando se visualice se situará por encima del resto de elementos de la pantalla gracias al z-index: 1; y que necesitaremos utilizar el modo rgba para indicar la opacidad en la propiedad background-color.

Veamos ahora la ventana o caja modal, propiamente dicha:

.contenido-modal {
  position: relative; /* Relativo con respecto al contenedor -modal- */
  background-color: white;
  margin: auto; /* Centrada */
  padding: 20px;
  width: 60%;
  -webkit-animation-name: animarsuperior;
  -webkit-animation-duration: 0.5s;
  animation-name: animarsuperior;
  animation-duration: 0.5s
}

Como puedes ver, se sitúa con una posición relativa sobre el contenedor, por lo que como hemos indicado anteriormente que tendrá un padding-top de 200px, esta ventana se verá 200px por debajo del borde.

Además, será de color blanco, centrada gracias al margin: auto, tendrá un padding en todos los bordes de 20px y un ancho con respecto al contenedor del 60%.

Por último, estamos incluyendo una pequeña animación llamada animarsuperior que tiene una duración de 0,5 segundos. Añadimos el prefijo -webkit- para navegadores basados en Chromium, como Chrome o Safari. Veamos esa animación:

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animarsuperior {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

Como puedes comprobar, para definir la animación utilizamos @keyframes, e indicamos que partiremos de una posición de -300 con opacidad 0, y terminaremos con una posición de 0 con opacidad 1. Utilizamos el mismo prefijo que en el caso anterior para asegurarnos que funciona en navegadores Chrome y Safari.

.close {
  color: black;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

En este último código CSS añadimos los estilos del elemento que contiene la X de cierre de la ventana: en color negro, alineado a la derecha… y cuando nos colocamos sobre ella o toma el foco, no tendrá subrayado y el cursor tomará el valor de una mano.

Visto esto, solamente nos queda la parte de Javascript. Comenzamos guardando en variables los tres elementos que utilizaremos: la ventana modal, el botón que la ejecuta y el span que la cierra.

// Ventana modal
var modal = document.getElementById("ventanaModal");

// Botón que abre el modal
var boton = document.getElementById("abrirModal");

// Hace referencia al elemento <span> que tiene la X que cierra la ventana
var span = document.getElementsByClassName("cerrar")[0];

A continuación puedes ver los tres eventos que vamos a ejecutar. Cuando el usuario hace clic en el botón, cambiamos el valor del display a block, mostrando la ventana modal.

Y en el caso de que el usuario haga clic en la X o en cualquier parte del fondo negro, la ventana volverá a ocultarse, ya que cambiamos el valor del display a none.

// Cuando el usuario hace clic en el botón, se abre la ventana
boton.addEventListener("click",function() {
  modal.style.display = "block";
});

// Si el usuario hace clic en la x, la ventana se cierra
span.addEventListener("click",function() {
  modal.style.display = "none";
});

// Si el usuario hace clic fuera de la ventana, se cierra.
window.addEventListener("click",function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

¡Y eso es todo! ¿A que es más sencillo de lo que parece? ¡Echa un ojo en el código fuente en funcionamiento!