• 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

reto

Reto resuelto: Julio Cesar 007

Publicado el 24/06/2020 por Ada 6 Comments

Julio César 007

Julio César 007

Criptografía

Cifrado César


La semana pasada recibimos el reto más antiguo hasta la fecha: ¡desde el mismo Imperio Romano nos escribió Julio César (que, en sus ratos libres, se dedica a la criptografía… ¡de verdad!).

Necesitaba un programa que pudiera realizar un cifrado y descifrado utilizando lo que se denomina Cifrado César pero con la particularidad que la rotación de letras podía hacerse del número (positivo o negativo) que quisiéramos. Aquí podéis ver con todo detalle el reto.

Enunciado del reto:

El reto decía:

Queridos amigos:
Soy Cayo Julio César, emperador romano; pero me podéis llamar César. Desde hace tiempo envío mis mensajes sobre estrategia militar con un método que consiste en lo siguiente: escribo una frase y luego sustituyo cada letra por la letra correspondiente tres espacios más a la derecha. Por ejemplo, ADA lo sustituiría por DGD; y EDU por HGX. Pero cuando los mensajes son largos la codificación es un rollo, y además, hacerlo siempre con un desplazamiento de 3 espacios es poco seguro. Necesito un codificador y decodificador que, a partir de un mensaje y un número de desplazamiento (positivo o negativo) me devuelva el mensaje codificado o decodificado respectivamente. Solo trabajaré con letras mayúsculas, y los símbolos, números y espacios no necesito codificarlos ni decodificarlos. ¿Podríais ayudarme?

En este caso hicimos una única solución con dos versiones de una de las funciones de cifrado:

  • En primer lugar capturamos el mensaje a cifrar/descifrar y el número de letras de rotación.
  • Por otro lado, incluímos dos botones que se encargaban de cifrar o descifrar el mensaje.
  • Indicamos cómo resolver la función de cifrado utilizando un algoritmo “clásico” y con una función flecha (reduciendo la mayor parte del código a una sola línea).
  • Y la función de descifrado fue copiar y pegar… pero cambiando el sentido de la rotación.

Pero como siempre, recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

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

En este vídeo veremos:

  • Cómo asociar eventos a un elemento HTML y trabajar con la función asociada de manera anónima (en lugar de llamar a una función con nombre).
  • Cómo calcular la rotación para que sea menor a 26 (letras del alfabeto) independientemente de que el número sea positivo o negativo.
  • Cómo calcular las letras cifradas utilizando un bucle for y trabajando con el método indexOf sobre una cadena.
  • Cómo calcular las letras cifradas, pero esta vez utilizando el método replace sobre una función flecha.
  • Y cómo no, cómo calcular las letras descifradas utilizando el sistema anterior.

Vídeos y código fuente

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

Y por supuesto, cómo no:

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!

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

Reto resuelto: Un cronómetro para Forrest Gump

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

Forrest Gump

Forrest Gump

Javascript

Cronómetro avanzado


Nuestro amigo Forrest Gump, animado por su madre, nos propuso realizarle un cronómetro avanzado, con tres botones (inicio, pausa y reinicio) que permitiera controlar el tiempo en que estaba corriendo y descansando. Aquí podéis ver con detalle en qué consistía

Enunciado del reto:

El reto decía:

Ada y Edu:
Hola, soy Forrest, Forrest Gump. Mi mamá me ha dicho que os escriba para pediros que me hagáis un cronómetro para saber cuánto corro. Yo le he dicho que no necesito saberlo porque me da igual, pero ha insistido así que os lo digo.
Quiero que el cronómetro tenga un botón para arrancarlo, otro para pausarlo, otro para pararlo y otro para ponerlo a cero. Como todos los cronómetros. Y que cuando lo arranque y lo pause me muestre una línea en la página para saber en qué momento lo he pausado y en qué momento lo he vuelto a arrancar. Si paro y reinicio debe borrarse el registro de la página. Nada más. Gracias.

Al igual que en el reto anterior, únicamente os proponemos una solución… y una solución “pulida”:

  • Creamos dos variables para recoger, por un lado, el reloj que controla las horas; y por otro, el cronómetro. Estas dos variables podían iniciarse, pararse y actualizarse en el momento que necesitemos.
  • Creamos tres funciones asociadas a los tres botones que inician, paran y resetean el cronómetro. Las dos primeras, además, muestran el resultado en pantalla.
  • Creamos una función más que se encarga de poner en marcha el cronómetro y actualizar el campo correspondiente; a esta función la llamamos cada segundo.

Además, os ofrecemos un segundo vídeo donde se pulen todos los fallos de funcionalidad y se limpia un poco el código para que quede más modularizado.

Pero como siempre, recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

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

En este vídeo veremos:

  • Cómo trabajar con variables globales.
  • Cómo crear variables para controlar eventos de tiempo mediante setInterval y clearInterval.
  • Cómo mostrar un reloj en pantalla con la hora actual.
  • Cómo utilizar una variable de tipo Date para crear un cronómetro.
  • Cómo trabajar con la variable que controla el cronómetro para iniciarlo y pararlo.
  • Cómo reutilizar el código que se repite creando una función.
  • Cómo mostrar la información textual en una etiqueta HTML.

Vídeos y código fuente

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

Y aquí el código depurado y pulido 😉

Y por supuesto, cómo no:

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!

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

Reto resuelto: Programando el Delorean de Marty McFly

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

Regreso Al Futuro

Regreso al futuro

Programación

Cálculos con fechas


Fue Marty McFly quien se presentó en vivo y en directo subido a su monopatín en nuestra casa atemporal. Doc y él habían programado la máquina del tiempo pero necesitaban una pequeña funcionalidad para saber exactamente cuánto viajaban al futuro o al pasado y que os contaba en esta entrada.

Enunciado del reto:

El reto decía:

Tenemos los dos visores de las fechas destino y presente y sus valores pueden introducirse libremente por el usuario en cada uno de los campos.
Necesitamos que, al pulsar el botón de cálculo de viaje nos diga si vamos a viajar al futuro o al pasado, y cuántos años, días, minutos y segundos vamos a desplazarnos.
Ejemplo de entrada:
En los campos de presente: OCT 26 1985 01:21
En los campos de destino: JUN 01 2020 17:00
Ejemplo de salida: Vas a viajar al futuro 34 años, 227 días, 14 horas y 39 minutos.
Nota: no necesitamos los meses porque pueden tener 28, 30 o 31 días.

En este caso, pensamos que no había mucho donde rascar, y resolvimos el reto de una única manera:

  • En primer lugar definimos un array para colocar los meses en español.
  • A continuación extrajimos todos los campos de las fechas del formulario.
  • Convertimos los campos de fecha en un objeto de tipo Date.
  • Finalmente realizamos los cálculos para saber cuántos minutos, horas, días y años había entre las dos fechas y mostramos la información.

Pero como siempre, recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

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

En este vídeo veremos:

  • Cómo definir un array constante de cadenas de tres caracteres.
  • Cómo extraer la información de los campos de un formulario.
  • Cómo transformar datos numéricos en un objeto Date.
  • Cómo realizar cálculos para conocer el tiempo que transcurre entre dos fechas.
  • El procedimiento de transformación de milisegundos a otras unidades de tiempo (¡son operaciones aritméticas sin trampa ni cartón!).
  • Cómo mostrar la información textual en una etiqueta HTML.

Vídeo y código fuente

¡¿A qué esperas?! ¡Echa un ojo al vídeo!

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!

¿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: azul oscuro casi negro, cadenas, javascript, números, reto

Reto: Un cronómetro para Forrest Gump

Publicado el 08/06/2020 por Ada 13 Comments

Forrest Gump

Forrest Gump

Javascript

Cronómetro avanzado


Acceder al reto en formato vídeo

“Aquel día, sin ninguna razón en particular, decidí salir a correr. Corrí hasta el final del camino, y cuando llegué, pensé que tal vez podía correr hasta el final del pueblo. Y cuando llegué, pensé que tal vez podía correr hasta el condado de Greenbow. Noté que si había llegado tan lejos, tal vez podía correr a través del gran estado de Alabama. Corrí derecho hasta el océano. Y cuando llegué, noté que ya había llegado lejos, y que tal vez debía dar la vuelta y continuar corriendo. Y cuando llegué al otro océano, noté que debía dar la vuelta y continuar corriendo. Cuando tenía sueño, dormía. Cuando tenía hambre, comía. Cuando debía… tú sabes, iba.”

Forrest Gump se ha liado la manta a la cabeza y se ha puesto a correr sin parar de costa a costa. Pero como todo el mundo, tiene necesidades: comer, dormir… y lo que tú sabes. Por eso quiere controlar qué tiempo está realmente corriendo, y ha pensado hacerlo con un cronómetro insertado en una página web.

Desde Alabama nos llegó esta petición que me leyó Edu con mucha ilusión porque había pensado que no tenía mejor que hacer que acompañar a Forrest en su carrera:

Ada y Edu:
Hola, soy Forrest, Forrest Gump. Mi mamá me ha dicho que os escriba para pediros que me hagáis un cronómetro para saber cuánto corro. Yo le he dicho que no necesito saberlo porque me da igual, pero ha insistido así que os lo digo.
Quiero que el cronómetro tenga un botón para arrancarlo, otro para pausarlo, otro para pararlo y otro para ponerlo a cero. Como todos los cronómetros. Y que cuando lo arranque y lo pause me muestre una línea en la página para saber en qué momento lo he pausado y en qué momento lo he vuelto a arrancar. Si paro y reinicio debe borrarse el registro de la página. Nada más. Gracias.

¡Interesante reto! Solamente necesitábamos trabajar con las funciones de tiempo del objeto window… ¿sólo? Quizá también necesitaremos hacer algún que otro cálculo… Os dejo un par de lecciones que os vendrán bien:

Javascript – #1.07. Operadores aritméticos

Javascript – #2.16. Objetos del navegador (BOM). Window IV. Instrucciones de tiempo

¡Recuerda! La diferencia entre setTimeout y setInterval es que la segunda permite repetir una función en un intervalo de tiempo.

Tweet

Como siempre, Edu me planteó algunas cuestiones que tendríamos que tener en cuenta.

Para arrancar y parar funciones, ¿necesitarás asociar un evento de tiempo a una variable, no? ¿Si vas a trabajar con unidades de tiempo y todo se mide en milisegundos, deberás pasarlos a horas, minutos, segundos… ¿verdad? ¡No te olvides de poner el 0 delante de los minutos y los segundos! Oye, que me voy con Forrest de viaje por EEUU… ¡no me esperes despierta!

Anoté todas las cuestiones que me dijo Edu y me puse manos a la obra. ¿Te animas a hacerlo conmigo? ¡Así podrás poner en práctica los eventos de tiempo de Javascript! 🙂

¿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: bases, javascript, números, reto

Reto resuelto: #0000FF oscuro casi #000000

Publicado el 04/06/2020 por Ada Leave a Comment

Azul oscuro casi negro

Azul oscuro casi negro

Programación

Cambio de bases


La semana pasada el director de cine Daniel Sánchez Arévalo nos enviaba un reto en el que nos pedía que transformáramos colores en decimal a hexadecimal y que titulamos #0000FF oscuro casi #000000.

Enunciado del reto:

El reto decía:

Hola, Ada:
Necesito un programa sencillito que transforme un código en RGB en hexadecimal. La idea es que, a partir de tres variables (rojo, verde y azul) devuelva el código de color en hexadecimal.
Ejemplo de entrada: 0, 36, 255
Ejemplo de salida: #0024ff

En este caso dimos con cuatro maneras de resolverlo; o mejor dicho, dos, una de ellas con variaciones, que podrás ver en dos vídeos:

  • La primera, la más clásica, en la que no utilizamos funciones especiales de Javascript. Esta sería la versión que, desde el punto de vista algorítmico, podría trasladarse a otros lenguajes de programación de alto nivel cambiando detalles mínimos.
  • La segunda, en la que utilizamos una función de Javascript que nos permite parsear un número en binario a hexadecimal.
  • La tercera, similar a la anterior, pero con una comprobación un poco más sencilla para asegurarnos que los números recibidos están entre 0 y 255.
  • La última, una versión de la tercera utilizando una función flecha, o arrow function.

Pero como siempre, recordad, ¡no hay una única solución al problema; hay soluciones mejores y soluciones peores!

¿Qué aprenderás en los vídeos?

En este vídeo veremos:

  • Cómo seleccionar un elemento de un array constante.
  • Cómo trabajar con las operaciones división con decimales, división entera y módulo o resto.
  • La función toString para hacer una transformación entre bases.
  • La función slice para extraer un número de caracteres de una cadena.
  • La función toUpperCase para transformar una cadena a mayúsculas.
  • Un modo de reducir un número a un rango de valores con Math.max y Math.min.
  • Y por último, cómo transformar una función normal a una arrow function.

Vídeos y código fuente

¡¿A qué esperas?! ¡Echa un ojo a los vídeos vídeo!

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!

¿Tú cómo lo habrías hecho? ¡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: Ejercicio resuelto, Reto Tagged With: azul oscuro casi negro, cadenas, javascript, números, reto

Reto: Programando el Delorean de Marty McFly

Publicado el 01/06/2020 por Ada 17 Comments

Regreso al futuro

Regreso al futuro

Programación

Cálculos con fechas


Acceder al reto en formato vídeo

Marty McFly y Doc están a punto de probar su Delorean para viajar en el tiempo. De momento han implementado dos visores: uno con la fecha de destino y otra con la fecha actual.

El caso es que han pensado que les gustaría saber cuántos años, días, horas y minutos viajarían al pasado o al futuro a partir de los datos que metieran en el formulario. El mismo Marty se plantó ayer en nuestra casa con su monopatín volador para contarnos lo que necesitaban. El asunto viene a ser algo así:

Tenemos los dos visores de las fechas destino y presente y sus valores pueden introducirse libremente por el usuario en cada uno de los campos.
Necesitamos que, al pulsar el botón de cálculo de viaje nos diga si vamos a viajar al futuro o al pasado, y cuántos años, días, minutos y segundos vamos a desplazarnos.
Ejemplo de entrada:
En los campos de presente: OCT 26 1985 01:21
En los campos de destino: JUN 01 2020 17:00
Ejemplo de salida: Vas a viajar al futuro 34 años, 227 días, 14 horas y 39 minutos.
Nota: no necesitamos los meses porque pueden tener 28, 30 o 31 días.

Nos han facilitado el código del formulario para que no tengamos que preocuparnos de hacerlo nosotros. Tiene alguna validación sencilla en HTML5 y consideramos que no se van a meter datos erróneos. Los nombres de los meses contienen las tres primeras letras en español (ENE, FEB, MAR…).

Código fuente del formulario
You do not have access to this post.

¡Recuerda que puedes trabajar con fechas mediante el objeto Date, que almacena los milisegundos que pasan desde el 1 de enero de 1970 hasta la fecha elegida!

Tweet

Y, para no variar, Edu nos planteó alguna cuestión…

Si los meses van con letra, necesitarás algún tipo de estructura para guardarlos, ¿no? Si las fechas se almacenan en milisegundos, ¿has pensado cómo harás para transformarlos a otras unidades de tiempo? ¿Te has dado cuenta que el resultado varía si viajas al futuro o al pasado? Por cierto, ¿sabes si estará el monopatín de Marty en AliExpress?

Resignación… escuché las preguntas, anoté alguna cosa que se me ocurrió y le dije: “No sé si el patinete estará, pero la chaqueta fijo”.

¿Tú cómo lo harías? ¡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: Reto Tagged With: bases, javascript, números, reto

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • 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 © 2023

¡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 AJUSTES.

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.