Cursos online y materiales digitales para estudiantes y desarrolladores web

Ada

Boleticode #05 – ¡Vuelta al cole!

Publicado el por Leave a Comment

¿Qué tal ha ido este verano atípico? ¡Espero que muy bien dentro de la “anormalidad”! Como sabrás, estos dos meses la web ha estado muy parada… al menos “de puertas para afuera”. Pero de puertas para dentro he estado haciendo muuuuuuchos cambios que me gustaría enseñarte cuanto antes.

Por eso, a partir de mañana y hasta que termine la migración, la web estará en modo mantenimiento (quiero comprobar que todo funciona correctamente antes de poner la nueva a andar). Así que ¡no preocuparse que en seguida volvemos a la carga!

Entre tanto, me gustaría hacer una pequeña consulta. Y es que he recibido muchos correos con pequeños problemas o dudas que con un minitutorial se solucionarían (configuración de XAMPP, recomendaciones sobre editores, consultas puntuales de programación…). ¿A ti también te ha pasado que te has enredado con algo mucho tiempo y que podrías haber solucionado con un pequeño tutorial? ¡Cuéntamelo! Seguro que a otros codelovers también les vendrá bien 😉

¡Síiii! ¡A mí me pasó esto!

Y si eres nuevo por aquí, o no curioseaste la última vez, recuerda que puedes consultar el Roadmap de Didacticode para saber lo que está por venir y dejar tus comentarios o escribirme un correo a ada@didacticode.com.

Una vez más, muchas gracias por leer. ¡Disfruta de septiembre y nos vemos MUY pronto!

Ada… ¡y Edu!

¡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?

Boleticode #04 – ¡Roadmap 2020!

Publicado el por 3 Comments

¡Hola, Codelover!

Hace unas semanas os pregunté qué cursos os gustaría ver en la web. ¡Mil gracias a todos los que respondisteis, especialmente a los que os explayasteis en el último apartado o me mandasteis un correo! Ha habido respuestas de lo más variopintas: muuuuucho JS y bastante de CSS, aunque React.js y Node.js están al pie del cañón. Así que me he puesto manos a la obra para preparar el material más solicitado… ¡os iré informando! 🙂

Entre tanto, he creado un roadmap que incluye los cambios en la web y cursos próximos que estoy desarrollando o desarrollaré a lo largo de este año siguiendo vuestras recomendaciones (¡iré incorporando más!). ¡Se agradecen los comentarios, respondiendo este correo/post o en el botón “Comments” de arriba a la derecha del roadmap).

¡A ver ese Roadmap!

Además, habréis visto que he creado una nueva sección de Tips&Tricks donde he compartido algunos errores súper comunes en Javascript (de momento)… ¡se aceptan sugerencias!

Y como imaginaréis, el verano viene con cambios de rutina, por lo que el ritmo será un poco más relajado (¡lo necesito!). ¡Pero no preocuparse! Aprovecharé para seguir puliendo la web y montando los nuevos cursos 😉

Vayamos al grano: ¿qué ha pasado estas semanas?

Retos de la semana:

Tips&Tricks

Cursos en proceso:

Minicurso de Javascript ES6 Esencial

¡EMPEZADO Y TERMINADO! Curso de Javascript III: Objetos de usuario y arrays

Y comenzaremos el Curso de Javascript IV: Interacción con el usuario. Eventos, formularios y cookies. ¡Posiblemente una de las partes máaaaas importantes de este lenguaje de programación!

Como siempre, de verdad, muchísimas gracias por leer. ¡Disfruta del verano (si es que es verano en tu país) y nos vemos pronto!

Ada… ¡y Edu!

Reto resuelto: Los Hombres de Paco hacen DNIs

Publicado el por 4 Comments

Los Hombres de Paco

Los hombres de Paco

Programación

Eventos y cálculos

Desde la comisaría de San Antonio nos llegó un reto del inspector Paco Miranda. Por lo visto, a él “y a sus hombres” los habían destinado a hacer NIFs y NIEs y lo del cálculo de la letra les traía un poco de cabeza. Aquí podéis ver con todo detalle el reto.

Enunciado del reto:

El reto decía:

¡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?

En este caso os presento una única solución:

  • En primer lugar hay que tener en cuenta que restringimos el campo donde introduciremos el NIF o NIE todo lo posible utilizando HTML5 e incluyendo un pattern.
  • Asignamos un evento de tipo keyup para comprobar, en cada pulsación, si ya están introducidos todos los dígitos esperados.
  • A continuación comprobamos si se trata de un NIF, un NIE o es un dato erróneo, y procedemos a hacer los cálculos correspondientes.
  • Por último mostramos la letra en el segundo campo de texto.

Como siempre, ya sabéis, ¡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 escribir una expresión regular completa que admita un NIF o un NIE.
  • Cómo asociar un evento de tipo keyup a un elemento HTML.
  • Cómo utilizar checkValidity para comprobar la validez de un campo de texto.
  • Cómo extraer caracteres a partir de posiciones de una cadena y sustituirlos utilizando replace.
  • Cómo realizar el cálculo utilizando la función módulo.
  • Cómo escribir el valor resultante en un campo de tipo texto.

Vídeo 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
[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…

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

Publicado el por 2 Comments

¡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 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
[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…