• 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

5 consejos para empezar a programar en Javascript

Publicado el 17/11/2020 por Ada Leave a Comment

El mundo del desarrollo web no es fácil (y quien diga lo contrario, miente).

Esto no es una película en la que te comes una pastilla o te enchufas a una máquina y en cinco minutos sabes hablar 10 idiomas y programas en COBOL, Javascript y Ada (sí, es un lenguaje de programación) sin olvidar un punto y coma.

Lo sé porque yo también, en algún momento, empecé a aprender a programar. Y lo sé mucho más porque mis alumnos y alumnas empiezan cada año conmigo y otros docentes de cero, sin saber qué es un editor de código, una variable ni por qué hay que acabar las sentencias con punto y coma.

Pero además, lo sé porque me lo habéis contado a través de correo electrónico y me habéis pedido consejo: ¿qué me recomiendas para empezar a programar en Javascript?

Así que he decidido elaborar un pequeño vídeo con recomendaciones que intento trasladar cada año a mi alumnado: 5 consejos imprescindibles para empezar a programar en Javascript.

¿Y tú qué le recomendarías a alguien que quiere aprender a programar?

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

¡Error! No usar las llaves en estructuras de control

Publicado el 14/11/2020 por Ada Leave a Comment

Seguimos con la serie de artículos sobre errores comunes en Javascript, aunque este error es un clásico de todos los lenguajes de programación: ¡lo veo prácticamente tooooooodos los días!

Como sabes, las estructuras de control suelen ir seguidas de bloques de código delimitados por llaves. Supongamos un ejemplo en el que queremos llevar la cuenta de las personas cuya edad es menor de 18 utilizando una estructura de control condicional if:

if (edadPersona < 18) {
  contadorMenores++;
}

También sabrás que, cuando dentro del bloque anterior solamente va una sentencia, puedes eliminar las llaves porque el resultado es el mismo (podrías incluso dejarlo en la misma línea):

if (edadPersona < 18)
  contadorMenores++;

Imagina que quieres añadir una sentencia más dentro de esa estructura de control. Algo inofensivo: un pequeño mensaje en la consola para saber el nombre de esas personas que son menores de 18. Y haces lo siguiente:

if (edadPersona < 18)  
  console.log("La persona " + nombrePersona + " es menor de edad");
  contadorMenores++;

Con el código así indentado, da la sensación de que ambas instrucciones se encuentran dentro del bloque de la estructura de control if. ¡Nada más lejos de la realidad! Lo que estás haciendo es lo siguiente:

if (edadPersona < 18)  
  console.log("La persona " + nombrePersona + " es menor de edad");
contadorMenores++;

Es decir, mostrar por consola el nombre de los menores de 18 años, pero incrementar SIEMPRE el valor de la variable contadorMenores, independientemente de que la edad de la persona sea mayor, menor o igual a 18. ¿La razón? Al eliminar las llaves de la estructura de control únicamente se ejecuta la primera sentencia después del if.

Así que, por precaución, te recomiendo:

  • Utilizar las llaves para delimitar los bloques de sentencias que se ejecutan en una estructura de control, aunque solamente haya una sentencia dentro de ese bloque.
  • En caso de que quieras prescindir de las llaves porque solamente vas a ejecutar una sentencia, escríbela en la misma línea o asegúrate de que la indentación es correcta.
  • Utiliza linters para asegurarte de que estás escribiendo el código correctamente.

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

Filed Under: Tips & Tricks Tagged With: estructuras de control, javascript

Reto resuelto: Las redes sociales de Mark Zuckerberg

Publicado el 31/10/2020 por Ada 3 Comments

Redes sociales

Las redes sociales de Mark Zuckerberg

Javascript y JQuery

Eventos


La semana pasada recibíamos un reto de Mark Zuckerberg en el que nos pedía una pequeña funcionalidad para controlar la edad de los nuevos usuarios de sus redes sociales. Podéis consultar los detalles del reto aquí.

Enunciado del reto:

La carta de Mark decía así:

¡Hola, chicos!
Necesito vuestra ayuda para implementar un pequeño código en mis formularios de creación de cuentas para que, cuando un usuario indique que es mayor de edad (de momento, 18 años), introduzca además su fecha de nacimiento para comprobar que es cierto.
Como me corre bastante prisa, únicamente quiero que el formulario haga dos cosas muy simples:
1. Al marcar el checkbox se mostrará un pequeño mensaje, un campo de fecha y un botón que inicialmente estará deshabilitado.
2. Si el usuario introduce correctamente la fecha y realmente tiene 18 años o más, se habilitará el botón Enviar.
Una vez que implementéis esto os pediré una segunda funcionalidad para diferenciar entre las redes sociales que manejo y sus diferentes mayorías de edad. Pero eso será en otro momento…
Os dejo el código fuente del formulario. ¡Gracias por todo!

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.
  • En ambos casos utilizo la misma función de comprobar la edad de la persona a partir de su fecha de nacimiento.

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

En este vídeo veremos:

  • La diferencia entre visibility:hidden y display:none;
  • Cómo hacer referencia a elementos del DOM utilizando Vanilla Javascript y JQuery.
  • Cómo utilizar la función toggle de JQuery.
  • Cómo calcular el tiempo transcurrido entre una fecha y el día de hoy.
  • Qué es un operador ternario y cómo utilizarlo.

Vídeo y código fuente

¡¿A qué esperas?! ¡Echa un ojo al 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]

¿Tú cómo lo habrías hecho? ¡Deja tus ideas 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: Ejercicio resuelto, Reto Tagged With: eventos, javascript

Reto: Las redes sociales de Mark Zuckerberg

Publicado el 20/10/2020 por Ada 3 Comments

Redes sociales

Las redes sociales de Mark Zuckerberg

Javascript y JQuery

Eventos


Acceder al reto en formato vídeo

A Mark Zuckerberg, creador y fundador de Facebook, ha tenido un encontronazo con las leyes españolas en las que se regula la mayoría de edad para acceder a ciertas redes sociales (entre ellas, las suyas: Facebook, Instagram o Whatsapp).

Mark está muy liado con su bufete de abogados y ha decidido contar con nosotros para que implementemos la funcionalidad que controle la edad de las personas que se inscriben a su red social.

El mensaje que nos envió decía lo siguiente:

¡Hola, chicos!
Necesito vuestra ayuda para implementar un pequeño código en mis formularios de creación de cuentas para que, cuando un usuario indique que es mayor de edad (de momento, 18 años), introduzca además su fecha de nacimiento para comprobar que es cierto.
Como me corre bastante prisa, únicamente quiero que el formulario haga dos cosas muy simples:
1. Al marcar el checkbox se mostrará un pequeño mensaje, un campo de fecha y un botón que inicialmente estará deshabilitado.
2. Si el usuario introduce correctamente la fecha y realmente tiene 18 años o más, se habilitará el botón Enviar.
Una vez que implementéis esto os pediré una segunda funcionalidad para diferenciar entre las redes sociales que manejo y sus diferentes mayorías de edad. Pero eso será en otro momento…
Os dejo el código fuente del formulario. ¡Gracias por todo!

Como siempre, Edu se puso a darle vueltas al reto:

En realidad, esto de algoritmia tiene poco, ¿verdad? Únicamente es una gestión de eventos con Javascript. ¿Utilizamos el modelo de eventos del W3C? ¿Qué propiedades habría que tocar, visibility o display? ¿Y cómo sé yo qué fecha es el límite de los 18 años? Oye, ¿y si lo hacemos con JQuery?

¡Mmmmmm, buena idea! Podíamos probar con Vanilla Javascript y con JQuery y así comparar…

¿Tú cómo lo harías? ¡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: eventos, javascript

Snippet: cambiar el texto de un botón al hacer click

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

Os traigo un sencillo snippet que nos permite modificar el texto de un botón al hacer click sobre él, en respuesta a la duda que nos planteó Cristian en el canal de Youtube:

Duda Yutube - Cambiar texto botón al hacer click
Duda en Youtube – Cambiar texto de un botón al hacer click sobre él

La solución es muy sencilla: simplemente hay que asociar una función al evento “click” del botón en la que cambiamos el valor de su atributo “value” al que necesitemos.

¡Os dejo el snippet donde podéis verlo!

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

Reto resuelto: Un contador de “Me gusta” para Mutiny

Publicado el 14/10/2020 por Ada 4 Comments

Halt and catch fire

Halt and catch fire

Programación

Template strings


Desde mediados de los años 80, Cameron Howe contactó con nosotros para crear un contador de Me gusta para su nueva red social, Mutiny. Podéis consultar todos los detalles del reto aquí.

Enunciado del reto:

El mensaje de Cameron decía así:

¡Hey, Ada y Edu! ¿Cómo os va?
Veréis, Donna y yo necesitamos un sistema de votaciones que permitan que, cuando alguien publique algo en nuestra comunidad, el resto de usuarios puedan indicar que les gusta.
No queremos un simple contador de “me gustas”, si no que debería mostrarse lo siguiente:
– Si nadie ha indicado que le gusta, aparecerá el mensaje “Nadie ha dicho que le gusta esto”.
– Si una persona ha indicado que le gusta, “A -nombre- le gusta esto”.
– Si son dos personas, “A -nombre1- y -nombre2- les gusta esto”.
– Si son tres personas, “A -nombre1-, -nombre2- y -nombre3- les gusta esto”.
– Si son más de tres personas, “A -nombre1-, -nombre2- y a otros -numeropersonas- les gusta esto”.
No necesitamos que nos implementéis un botón o enlace para hacerlo funcionar. Simplemente una función que, al recibir una lista de nombres, nos devuelva el mensaje correspondiente. ¿Podríais ayudarnos?

Soluciones al reto

Una vez más, os presento varias soluciones al reto:

  • La clásica, utilizando un switch en el que cada case muestra una opción.
  • La nueva, con template strings, que evita tener que alternar continuamente variables con literales utilizando las comillas `. Además, almaceno los pares clave-valor en un objeto y selecciono el tamaño correspondiente al array utilizando la función Math.min.
  • La mezcla, utilizando un switch e incluyendo template strings en cada case en lugar de utilizar un objeto. Además, incluyo un operador de propagación (…) para almacenar todos los nombres a partir del cuarto.

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

En este vídeo veremos:

  • Cómo utilizar un switch (normal y corriente).
  • Cómo utilizar template strings incluyendo elementos de un array.
  • Cómo crear un objeto con diferentes pares clave:valor y seleccionar uno de ellos utilizando corchetes y la función Math.min.
  • Cómo utilizar el operador de propagación para asignar un array a otro.

Vídeo y código fuente

¡¿A qué esperas?! ¡Echa un ojo al vídeo de la solución!

Y cómo no, el código fuente:

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]

¿Tú cómo lo habrías hecho? ¡Deja tus ideas 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: Ejercicio resuelto, Reto Tagged With: javascript, template strings

  • « Go to Previous Page
  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Go to page 4
  • Go to page 5
  • 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.