Cursos online y materiales digitales para estudiantes y desarrolladores web

Ada

Reto: Los Hombres de Paco hacen DNIs

Publicado el por 8 Comments

Los Hombres de Paco

Los hombres de Paco

Programación

Eventos y cálculos

Acceder al reto en formato vídeo

Quién nos iba a decir que los intrépidos Hombres de Paco iban a acabar en la oficina de expedición de DNIs y pasaportes de la Comisaría de San Antonio.

Fue Paco Miranda quien contactó con nosotros para pedirnos una funcionalidad más que evidente en una delegación como la suya: necesitaba hacer una calculadora de la letra del NIF y del NIE, algo que nos pareció muy útil para cualquier página web que necesitara almacenar este tipo de información. El mensaje decía así:

¡Hola, Ada y Edu!
Soy Paco Miranda, inspector jefe en la Comisaría de San Antonio.
Estamos implementando una funcionalidad en nuestra aplicación de creación de NIFs y NIEs y necesitamos una calculadora de la letra de control. Pero es importante que entendáis la diferencia entre un NIF y un NIE.
– Los NIFs están formados por 8 dígitos y una letra de control.
– Los NIEs están formados por una letra (X, Y o Z), 7 dígitos y una letra de control. Estas letras iniciales equivalen a 0, 1 o 2 respectivamente de cara a hacer los cálculos.
Te facilito un enlace donde se explica cómo calcular ese dígito de control.
Necesitamos un formulario con dos campos: en el primero se introduce los dígitos del NIF o NIE y en el segundo debería aparecer automáticamente la letra correspondiente. ¿Nos echáis una mano?

Edu puso la puntilla sobre el mensaje de Paco, como siempre:

Necesitarás una expresión regular para validar los datos del input, ¿verdad? ¿Qué evento utilizarás para comprobar que el campo de los dígitos está completo? ¿Vas a utilizar un array o una cadena para almacenar las letras? Mmmmmm… ¿crees que Sara Miranda seguirá con Lucas?

La verdad es que me hizo pensar: tendría que darle una vuelta al tema de los eventos asociados al input, ¿al levantar una tecla? ¿al perder el foco? ¿al hacer click?

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

¡Error! Colocar mal el punto y coma

Publicado el por 2 Comments

¡Veamos otro error en esta serie de artículos sobre errores comunes en Javascript! ¡El típico, el inigualable, el clásico error de colocar mal el punto y coma!

Ya vimos en la lección Javascript – #1.04. Sentencias en Javascript que es recomendable, aunque no obligatorio, finalizar las sentencias con un punto y coma. Sin embargo, colocar erróneamente un punto y coma puede tener consecuencias inesperadas.

¿A qué me refiero? Muy sencillo: a poner un punto y coma entre los paréntesis de una estructura de control (if, while, for, etc.) y las llaves o la siguiente sentencia. “¡Pero eso da error!” pensaréis… ¡nada más lejos de la realidad!

Y es que, en Javascript, es posible crear bloques de código independientes entre llaves sin que les preceda una estructura de control. Veamos un ejemplo:

let numero = 3;
if (numero !=3); // Esta sentencia no hace nada
{
  alert("Hola, caracola");
}
// Al haber puesto un ";" después del if, finaliza la estructura de control if
// A continuación se ejecuta el alert porque el bloque de las llaves es independiente

Así que, recuerda, ¡después de los paréntesis de las estructuras de control (if, for, while, do, etc.) no coloques un punto y coma!

¡Recuerda! Si ponemos un punto y coma entre una estructura de control (if, while, for…) y las llaves, lo que haya dentro de las llaves SIEMPRE se ejecutará.

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

Reto resuelto: Un cronómetro para Forrest Gump

Publicado el por 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
[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? ¡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…

Reto: Julio Cesar 007

Publicado el por 17 Comments

Julio César 007

Julio César 007

Criptografía

Cifrado César

Acceder al reto en formato vídeo

Nunca hasta ahora habíamos recibido un mensaje de una época tan remota: del siglo I antes de Cristo. ¡Como lo lees! Desde la mismísima Roma, Julio César nos mandó un mensaje escrito en un pergamino que recibimos esta misma mañana.

Al parecer, además de emperador y militar, Julio César hizo sus pinitos con la criptografía. De hecho, ha inventado un sistema de cifrado bastante rudimentario que, fíjate por dónde, ha llegado hasta nuestros días (dos milenios después) bautizado como Cifrado César.

Pues bien, necesita que le hagamos un codificador / decodificador de mensajes porque dice que lo de hacerlo a mano le parece un rollo. Así nos contaba:

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?

¡Bueno! No esperábamos menos de Julio César, que contribuyó a la historia de la criptografía con su sistema de cifrado. Si quieres leer más, te dejo el enlace a la Wikipedia sobre el Cifrado César donde se explica el método y la historia.

Edu, una vez más, contribuyó a que me planteara ciertas cuestiones:

Necesitaremos dos campos: uno para el mensaje y otro para el desplazamiento; y dos botones, para codificar y decodificar, ¿verdad? ¿Vas a hacerlo con un bucle o utilizando lambdas y funciones flecha? ¿Vas a mezclar todo o a crear un método de codificación y otro de decodificación? A este señor se lo cargaron en alguna peli, ¿no?

No lo tenía claro aún, pero alguna de las preguntas de Edu me hicieron plantearme el problema dos veces.

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

¡Error! Utilizar comparación regular en lugar de estricta

Publicado el por Leave a Comment

¡Damos comienzo a esta serie de artículos sobre errores comunes en Javascript! Y lo hacemos con uno de los más comunes: utilizar una comparación regular en lugar de una comparación estricta.

Como vimos 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. Sin embargo la diferencia es muy grande.

En una comparación regular (doble igual), el tipo de dato no importa. Veamos un ejemplo:

let x=5; // x toma el valor numérico 5
let y="5"; // y toma el valor de una cadena que contiene un 5
if (x==y) // Esta sentencia devolverá un valor true (verdadero) porque considera igual un 5 numérico que un 5 contenido en una cadena

Sin embargo, en una comparación estricta (triple igual), el tipo de dato sí que importa. 

let x=5; // x toma el valor numérico 5
let y="5"; // y toma el valor de una cadena que contiene un 5
if (x===y) // Esta sentencia devolverá un valor false (falso) porque los tipos de las variables son diferentes.

Y al hilo de esto, un error muy común es olvidar que una sentencia switch utiliza una comparación estricta. Por tanto, no es lo mismo este código, que sí ejecutará el alert:

var x = 10;
switch (x) {
case 10: alert("Hola, caracola"); // Este alert sí se ejecuta
}

Que este código, que no lo hará.

var x = 10;
switch (x) {
case "10": alert("Hola, caracola"); // Este alert no se ejecuta
}

Por tanto es muy importante asegurarnos el tipo de dato que le pasamos a la sentencia switch y el tipo de dato que comparamos en cada case coinciden.

¡Recuerda este error común en Javascript! ¡No es lo mismo utilizar una comparación regular que una comparación estricta!

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

Reto resuelto: Programando el Delorean de Marty McFly

Publicado el por 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
[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…