Cursos online y materiales digitales para estudiantes y desarrolladores web

Tips & Tricks

¿Es seguro validar un formulario con Javascript?

Publicado el por 6 Comments

A veces pensamos que con hacer una buena validación con HTML5 e incluso con Javascript es suficiente para hacer un formulario seguro… ¡nada más lejos de la realidad!

En el vídeo de esta lección podrás ver con detalle por qué es necesario validar del lado del cliente, y por qué no es suficiente.

Tipos de validación

En primer lugar tenemos que tener en cuenta que hay dos tipos de validación:

  • Validación del lado del cliente: podemos realizarla, a su vez, con la validación incorporada de las etiquetas HTML5, y personalizarla a nuestro gusto con Javascript.
  • Validación del lado del servidor: que debemos hacerla desde el lenguaje de programación de servidor (PHP, ASP, JSP, etc.) y desde las propias restricciones de la base de datos.

Por qué validar desde el lado del cliente

Hay dos razones básicas por las que la validación del lado del cliente es necesaria:

  • Mejora la experiencia de usuario, algo esencial en el desarrollo web. (¿Que qué es eso? ¡Echa un ojo al vídeo y te lo explico!).
  • Evita los retrasos de la comunicación entre el cliente y servidor.

Estamos rodeados de buenos y malos ejemplos de experiencia de usuario todos los días. En el vídeo vemos cómo Amazon y el Ministerio de Educación y Formación Profesional son dos muestras de ello… ¿cuál es cuál?

Por qué NO solo validar desde el lado del cliente

Ya está claro por qué la validación del lado del cliente es necesaria. Ahora debemos saber que la validación solo desde el lado del cliente es una práctica muy arriesgada porque evitarla es tan fácil como hacer un par de clicks.

En este vídeo verás en qué consisten cada una de las validaciones que he mencionado, las razones por las que la validación del lado del cliente es necesaria y por qué es insegura. ¿Quieres verlo? ¡A qué esperas! 😊

5 consejos para empezar a programar en Javascript

Publicado el por Leave a Comment

El mundo del desarrollo web no es fácil (y quien diga lo contrario, miente).

Esto no es una película en la que te comes una pastilla o te enchufas a una máquina y en cinco minutos sabes hablar 10 idiomas y programas en COBOL, Javascript y Ada (sí, es un lenguaje de programación) sin olvidar un punto y coma.

Lo sé porque yo también, en algún momento, empecé a aprender a programar. Y lo sé mucho más porque mis alumnos y alumnas empiezan cada año conmigo y otros docentes de cero, sin saber qué es un editor de código, una variable ni por qué hay que acabar las sentencias con punto y coma.

Pero además, lo sé porque me lo habéis contado a través de correo electrónico y me habéis pedido consejo: ¿qué me recomiendas para empezar a programar en Javascript?

Así que he decidido elaborar un pequeño vídeo con recomendaciones que intento trasladar cada año a mi alumnado: 5 consejos imprescindibles para empezar a programar en Javascript.

¿Y tú qué le recomendarías a alguien que quiere aprender a programar?

¡Error! No usar las llaves en estructuras de control

Publicado el por Leave a Comment

Seguimos con la serie de artículos sobre errores comunes en Javascript, aunque este error es un clásico de todos los lenguajes de programación: ¡lo veo prácticamente tooooooodos los días!

Como sabes, las estructuras de control suelen ir seguidas de bloques de código delimitados por llaves. Supongamos un ejemplo en el que queremos llevar la cuenta de las personas cuya edad es menor de 18 utilizando una estructura de control condicional if:

if (edadPersona < 18) {
  contadorMenores++;
}

También sabrás que, cuando dentro del bloque anterior solamente va una sentencia, puedes eliminar las llaves porque el resultado es el mismo (podrías incluso dejarlo en la misma línea):

if (edadPersona < 18)
  contadorMenores++;

Imagina que quieres añadir una sentencia más dentro de esa estructura de control. Algo inofensivo: un pequeño mensaje en la consola para saber el nombre de esas personas que son menores de 18. Y haces lo siguiente:

if (edadPersona < 18)  
  console.log("La persona " + nombrePersona + " es menor de edad");
  contadorMenores++;

Con el código así indentado, da la sensación de que ambas instrucciones se encuentran dentro del bloque de la estructura de control if. ¡Nada más lejos de la realidad! Lo que estás haciendo es lo siguiente:

if (edadPersona < 18)  
  console.log("La persona " + nombrePersona + " es menor de edad");
contadorMenores++;

Es decir, mostrar por consola el nombre de los menores de 18 años, pero incrementar SIEMPRE el valor de la variable contadorMenores, independientemente de que la edad de la persona sea mayor, menor o igual a 18. ¿La razón? Al eliminar las llaves de la estructura de control únicamente se ejecuta la primera sentencia después del if.

Así que, por precaución, te recomiendo:

  • Utilizar las llaves para delimitar los bloques de sentencias que se ejecutan en una estructura de control, aunque solamente haya una sentencia dentro de ese bloque.
  • En caso de que quieras prescindir de las llaves porque solamente vas a ejecutar una sentencia, escríbela en la misma línea o asegúrate de que la indentación es correcta.
  • Utiliza linters para asegurarte de que estás escribiendo el código correctamente.

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

Snippet: cambiar el texto de un botón al hacer click

Publicado el por Leave a Comment

Os traigo un sencillo snippet que nos permite modificar el texto de un botón al hacer click sobre él, en respuesta a la duda que nos planteó Cristian en el canal de Youtube:

Duda Yutube - Cambiar texto botón al hacer click
Duda en Youtube – Cambiar texto de un botón al hacer click sobre él

La solución es muy sencilla: simplemente hay que asociar una función al evento “click” del botón en la que cambiamos el valor de su atributo “value” al que necesitemos.

¡Os dejo el snippet donde podéis verlo!

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