Ejercicio resuelto

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:

¿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…

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:

¿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…