• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Cursos online y materiales digitales para estudiantes y desarrolladores web

  • CURSOS
  • BLOG
  • QUIÉN SOY
  • FAQ
  • ACCEDER
  • CONTACTO

javascript

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

Publicado el 16/10/2021 por Ada 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
[restrict] [/restrict] [not_logged_in]¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!
[/not_logged_in]

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…

Filed Under: Tips & Tricks Tagged With: css, javascript, jquery, scss

¡Error! Operando con floats en Javascript

Publicado el 13/10/2021 por Ada 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?

Filed Under: Tips & Tricks Tagged With: error, float, javascript

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

Publicado el 15/02/2021 por Ada 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
[restrict] [/restrict] [not_logged_in]¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!
[/not_logged_in]

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…

Filed Under: Ejercicio resuelto, Reto Tagged With: css, javascript, jquery, scss

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

Publicado el 01/02/2021 por Ada 9 Comments

background

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

Javascript, jQuery y CSS

Estilos


El enunciado lo dice todo: la página tiene que tener una imagen de fondo con una capa de color superpuesta (lo que se denomina en jerga de diseño overlay) al 90%, de modo que dispongo de 12 imágenes en blanco y negro y 12 códigos de color, una imagen y un código para cada mes.

Necesito programar de algún modo que, en función del mes en el que nos encontremos, se modifique el fondo de la página y el color superpuesto.

Te dejo un par de pistas:

  • Clases CSS
  • linear-gradient

¿Te atreves a intentarlo? ¡Espero tus propuestas en los comentarios!

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

Filed Under: Reto Tagged With: css, javascript, jquery

¡Error! Undefined no es null

Publicado el 27/01/2021 por Ada Leave a Comment

Volvemos a la carga con la serie de artículos sobre errores comunes en Javascript. Esta vez con un error súper habitual, y es confundir undefined con null. ¡Algo que no solo ocurre en Javascript, sino también en muchos otros lenguajes de programación!

Comencemos por la base:

  • En Javascript, los objetos, las variables, las propiedades y los métodos pueden ser undefined.
  • Además, los objetos vacíos en Javascript pueden contener el valor null.
  • Por tanto, a veces no sabemos si un objeto es vacío o no está definido.

Podemos comprobar si un objeto existe comprobando si el tipo es indefinido:

if (typeof miObjeto === "undefined"); //true

Pero no podemos comprobar si el objeto es nulo, porque arrojará un error si el objeto es indefinido:

if (myObj === null); //Error

Podríamos, entonces, comprobar si un objeto no es null y no es undefined:

if (myObj !== null && typeof myObj !== "undefined"); //Error

Pero el error se mantendría. Por tanto, lo que debemos hacer es comprobar primero si el objeto no es undefined, y después comprobar si el objeto no es nulo:

if (typeof myObj !== "undefined" && myObj !== null) 

De esta manera, en caso de que el objeto sea no definido, no continúa con la comprobación, mientras que en el caso anterior podría darse el caso.

Así que, recuerda:

  • No es lo mismo undefined que nulo.
  • El orden de los operadores en una condición en la que está el operador AND (&&) es muy importante y puede dar lugar a resultados totalmente diferentes según cómo los ordenemos.

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

Filed Under: Tips & Tricks Tagged With: javascript, null, undefined

Cómo deshabilitar Javascript en todos los navegadores

Publicado el 16/12/2020 por Ada Leave a Comment

A estas alturas ya tenemos claro que realizar una validación de un formulario únicamente utilizando HTML5 y Javascript no es seguro, y que la finalidad de este tipo de validación es otra.

Y de hecho, hemos aprendido a saltarnos la validación HTML5 de un formulario únicamente con un par de palabras reservadas en el código HTML de la página mediante la consola del navegador.

Pues bien, en este post le toca el turno a Javascript. Y es que podemos evitar toda ejecución de código Javascript deshabilitándolo en el navegador.

¿Quieres saber cómo hacerlo en Mozilla Firefox, Chrome, Safari o Edge? ¡Te lo cuento!

Y tú, ¿conoces otras maneras de saltarte la validación de un formulario del lado del cliente?

Filed Under: Tips & Tricks Tagged With: formularios, javascript

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Interim pages omitted …
  • Go to page 7
  • Go to Next Page »

Footer

Didacticode

Cursos para estudiantes y docentes del mundo de la informática.
Retos: retos resueltos de programación.
Tips&Tricks: trucos y consejos.
Boleticodes: boletines de noticias.
Quiénes somos: Ada, Edu... y Laura.
Contacto¡Contacta conmigo!

Legal

Aviso legal
Política de privacidad
Cookies

Redes Sociales

Youtube
Twitter
Instagram
Facebook
Twitch
LinkedIn
Gitlab
Github

Didacticode © 2026

¡Cómo no! Este sitio también utiliza cookies para mejorar la experiencia de tu visita.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los .

Resumen de privacidad
Didacticode

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.