Cursos online y materiales digitales para estudiantes y desarrolladores web

javascript

Reto resuelto: Un contador de «Me gusta» para Mutiny

Publicado el por 2 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

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

¡Error! Dividir una cadena con un salto de línea

Publicado el por Leave a Comment

¡Un error más en esta serie de artículos sobre errores comunes en Javascript! Esta vez vemos cómo se puede y cómo no se puede dividir una cadena con un salto de línea tanto en el editor de código como en la propia visualización.

En la lección Javascript – #1.04. Sentencias en Javascript vimos recomendaciones para escribir sentencias en Javscript. Y es que, en ocasiones, escribimos cadenas muy largas que nos obligan a hacer scroll horizontal en nuestro editor de código o bien necesitamos introducir un salto de línea en la visualización de la cadena. ¿Cuál es el modo correcto de dividirlas?

En primer lugar, podemos poner un salto de línea justo después del igual de asignación de la cadena. Por ejemplo:

let cadena = 
"Hola, caracola";

Sin embargo, no podemos dividir la cadena por la mitad, sin más, con un salto de línea.

let cadena = "Esta es una cadena muy larga 
que me gustaría dividir en dos";
// Obtendríamos un error de sintaxis: "String literal contains an unescaped line break"
// es decir, "El literal cadena contiene un salto de línea no escapado".

Para hacerlo, necesitamos utilizar el operador de escape barra invertida de la siguiente manera:

let cadena = "Esta es una cadena muy larga \
que me gustaría dividir en dos";
console.log (cadena); 
//El resultado sería "Esta es una cadena muy larga que me gustaría dividir en dos";

¡Ojo! No quiere decir que al mostrar la cadena vayamos a ver un salto de línea, si no que podemos escribirla dividida en nuestro editor de código sin hacer scroll horizontal.

Otra opción más laboriosa es utilizar el operador asignación de adición (+=) tal y como se ve en el ejemplo:

let cadena = "Esta es una cadena muy larga ";
cadena += "que me gustaría dividir en dos";
//El resultado sería igualmente "Esta es una cadena muy larga que me gustaría dividir en dos";

En cualquier caso, si lo que necesitas es que en la visualización de la cadena se muestre con un salto de línea dependerá del lugar en el que vayas a mostrarla:

  • Si es un diálogo modal (alert, prompt, confirm) o un console.log necesitarás utilizar \n para realizar el salto de línea.
  • Si la cadena se va a mostrar diréctamente sobre la página web deberás hacerlo con la etiqueta de HTML <br/>.
console.log ("Hola,\n caracola");
alert ("Hola,\n caracola");
let respuesta1 = confirm ("¿Deseas salir\n de esta página");
let respuesta2 = prompt ("Introduce una opción:\n a) Amarillo \n b) Azul \n c) Rojo
// En todos los casos anteriores se mostraría un salto de línea en el lugar que hay un \n

document.innerHTML = "<p>Esto es un párrafo <br/> dividido en dos líneas</p";
document.getElementById("miParrafo").innerHTML = "<p>Esto es un párrafo <br/> dividido en dos líneas</p";

¡Recuerda este error común en Javascript! Para dividir una cadena en el editor de código necesitaremos la barra invertida (\) y para dividirla en la visualización necesitaremos \n o <br/> dependiendo de dónde se muestre.

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

¡Error! Confundir adición y concatenación (signo +)

Publicado el por Leave a Comment

¡Seguimos con los errores comunes en Javascript! Y lo hacemos con un clásico: confundir adición y concatenación.

Como vimos en las lecciones Javascript – #1.07. Operadores aritméticos y Javascript – #1.09. Operadores de cadena, el signo + se puede utilizar indistintamente para hacer una operación suma y para concatenar dos cadenas.

Podríamos pensar que no hay lugar a dudas porque el primero lo utilizaríamos con dos variables de tipo numérico y el segundo con dos variables de tipo cadena. ¿Pero qué ocurre si las mezclamos? Veamos:

En este caso, sumamos dos valores numéricos:

let x = 3 + 4; // x almacenará un número con el valor 7

En este, concatenamos dos cadenas:

let x = "5" + "6"; // x almacenará una cadena con el valor "56"

En caso de sumar un número como cadena, el resultado sería como sumar dos cadenas:

let x = 7 + "8"; // x almacenará una cadena con el valor "78"

El mayor problema puede surgir si sumamos dos variables y no sabemos qué tipo de datos van a almacenar (un número o una cadena).

En el siguiente ejemplo obtendremos por consola el resultado de concatenar cuando es probable que necesitáramos la suma de ambos valores. Esto suele pasar cuando solicitamos datos al usuario con un prompt o desde un formulario y no los parseamos.


let x = prompt("Introduce un número"); // Introducimos un 3
let y = prompt("Introduce otro número"); // Introducimos un 7
console.log (x+y); // ¡El resultado es 37 en lugar de 10 porque x e y almacenan cadenas!

Para solucionar el problema del ejemplo anterior es muy importante parsear los valores al tipo de dato que necesitemos. ¿Cómo? ¡Muy sencillo!

let x = parseInt(prompt("Introduce un número")); // Introducimos un 3
let y = parseInt(prompt("Introduce otro número")); // Introducimos un 7
console.log (x+y); // Ahora sí, el resultado será 10 porque x e y almacenan enteros

¡Truco! Si queremos que una suma de valores numéricos se convierta en una concatenación podríamos hacerlo sumando la cadena vacía («») al comienzo de la operación. ¡Ojo! Si sumamos la cadena vacía al final no funcionaría porque primero realizaría la suma y luego la concatenación.

let x = "" + 10 + 3;
let y = 10 + 3 + "";
console.log (x); // El resultado será la cadena "103" porque primero detecta que estamos sumando cadenas
console.log (y); // El resultado será la cadena "13" porque primero hace la suma y luego lo pasa a cadena.

¡Recuerda este error común en Javascript! ¡El operador más (+) suma y concatena! Debemos asegurarnos del tipo de datos que utilizamos en la operación.

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

Reto resuelto: Julio Cesar 007

Publicado el por 2 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

¿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: 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?