Cursos online y materiales digitales para estudiantes y desarrolladores web

javascript

¿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 Leave a Comment

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!

Snippet: acordeón desplegable con HTML, CSS y Javascript

Publicado el por Leave a Comment

Un acordeón es un elemento web que se suele utilizar para alternar entre ocultar y mostrar una gran cantidad de contenido.

Es muy común utilizarlo para crear secciones de FAQ (Preguntas Frecuentes) en las que se visualiza la pregunta, y al hacer click sobre ella, se despliega la respuesta en la parte inferior, a modo de acordeón.

En este vídeo vamos a ver cómo crear un acordeón utilizando únicamente HTML, CSS y Javascript; es decir, sin bibliotecas externas como JQuery o Bootstrap.

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

  • Cómo convertir un botón en la parte superior de las secciones del acordeón con CSS.
  • Cómo cambiar el fondo de esta sección al situarnos encima con el ratón.
  • Cómo dar estilo a los paneles que se muestran y ocultan de cada acordeón.
  • Cómo asignar un evento a todos los elementos del acordeón de una sola vez utilizando Javascript.
  • Cómo asignar y desasignar una clase utilizando .toggle con Javascript.
  • Cómo acceder a un elemento hermano de otro para cambiar su estilo con Javascript..
  • Cómo visualizar u ocultar un elemento mediante Javascript.

Vídeo y código fuente

¿Quieres saber cómo lo he hecho paso a paso? ¡Aquí tienes el código fuente y el vídeo de la solución!

Código fuente de la solución
You do not have access to this post. ¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!

Y si quieres compartir tu propuesta, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

¡Error! Operando con floats en Javascript

Publicado el por Leave a Comment

Javascript, como muchos otros lenguajes de programación, tiene problemas para trabajar con los números en “punto flotante”, o números reales (no enteros). Podríamos decir que es una de las pocas veces en las que podemos pensar que las matemáticas “no funcionan”.

¿Quieres ver un ejemplo de ello?

let a = 0.1;
let b = 0.2;
let c = a + b;
console.log(c); //¡Ojo! Este resultado no dará un 0.3 como esperas, si no algo así como 0.30000000000000004

¿Cómo podemos evitar algo así? Pues muy sencillo: podemos multiplicar y dividir por una potencia de 10 en función de los decimales que necesitemos mostrar de la siguiente manera:

let c = (a * 10 + b * 10) / 10;      
console.log(c); //Aquí sí, obtendremos un 0.3

Y tú, cuéntanos, ¿sabías esta peculiaridad de los números en coma flotante?

Reto resuelto: cambiar fondo de página en función del mes

Publicado el por Leave a Comment

background

Cambiar la imagen y el color de fondo de una página en función del mes

Javascript, jQuery y CSS

Estilos

La semana pasada nos enfrentábamos a un nuevo reto: cambiar el fondo de una página de manera que tuviera una imagen de fondo con una capa de color superpuesta (lo que se denomina en jerga de diseño overlay) al 90%, partiendo de 12 imágenes en blanco y negro y 12 códigos de color, una imagen y un código para cada mes.

Soluciones al reto

En esta ocasión os traigo dos soluciones al reto:

  • La primera, utilizando Vanilla Javascript para hacer referencia a los elementos.
  • La segunda, utilizando JQuery, lo que nos reduce sustancialmente el código.
  • Además vemos brevemente cómo trabajar con .scss para generar el .css resultante.

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

  • Cómo utilizar variables en .scss para indicar la ruta de partida, colores e imágenes.
  • Cómo resulta el código .css transpilado.
  • Qué estilo utilizar para crear una imagen con un overlay de color.
  • Cómo ejecutar una función después de cargar el DOM de una página con Javascript puro y con jQuery.
  • Cómo crear una función que devuelva una cadena en función de un número.
  • Cómo extraer el mes actual a partir de la fecha actual.
  • Cómo seleccionar el body de una página con Javascript puro y con jQuery y aplicarle una clase en función de la fecha actual.

Vídeo y código fuente

¿Quieres saber cómo lo solucioné paso a paso? (salvando pequeñas diferencias…). ¡Aquí tienes el código fuente y el vídeo de la solución!

Código fuente de la solución
You do not have access to this post. ¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!

Y si quieres compartir tu propuesta, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…