Cursos online y materiales digitales para estudiantes y desarrolladores web

Tips & Tricks

¡Error! Undefined no es null

Publicado el por Leave a Comment

Volvemos a la carga con la serie de artículos sobre errores comunes en Javascript. Esta vez con un error súper habitual, y es confundir undefined con null. ¡Algo que no solo ocurre en Javascript, sino también en muchos otros lenguajes de programación!

Comencemos por la base:

  • En Javascript, los objetos, las variables, las propiedades y los métodos pueden ser undefined.
  • Además, los objetos vacíos en Javascript pueden contener el valor null.
  • Por tanto, a veces no sabemos si un objeto es vacío o no está definido.

Podemos comprobar si un objeto existe comprobando si el tipo es indefinido:

if (typeof miObjeto === "undefined"); //true

Pero no podemos comprobar si el objeto es nulo, porque arrojará un error si el objeto es indefinido:

if (myObj === null); //Error

Podríamos, entonces, comprobar si un objeto no es null y no es undefined:

if (myObj !== null && typeof myObj !== "undefined"); //Error

Pero el error se mantendría. Por tanto, lo que debemos hacer es comprobar primero si el objeto no es undefined, y después comprobar si el objeto no es nulo:

if (typeof myObj !== "undefined" && myObj !== null)

De esta manera, en caso de que el objeto sea no definido, no continúa con la comprobación, mientras que en el caso anterior podría darse el caso.

Así que, recuerda:

  • No es lo mismo undefined que nulo.
  • El orden de los operadores en una condición en la que está el operador AND (&&) es muy importante y puede dar lugar a resultados totalmente diferentes según cómo los ordenemos.

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

Cómo deshabilitar Javascript en todos los navegadores

Publicado el por Leave a Comment

A estas alturas ya tenemos claro que realizar una validación de un formulario únicamente utilizando HTML5 y Javascript no es seguro, y que la finalidad de este tipo de validación es otra.

Y de hecho, hemos aprendido a saltarnos la validación HTML5 de un formulario únicamente con un par de palabras reservadas en el código HTML de la página mediante la consola del navegador.

Pues bien, en este post le toca el turno a Javascript. Y es que podemos evitar toda ejecución de código Javascript deshabilitándolo en el navegador.

¿Quieres saber cómo hacerlo en Mozilla Firefox, Chrome, Safari o Edge? ¡Te lo cuento!

Y tú, ¿conoces otras maneras de saltarte la validación de un formulario del lado del cliente?

Cómo saltarse la validación HTML5 de un formulario

Publicado el por Leave a Comment

En un post anterior explicaba lo poco seguro que es realizar la validación de un formulario únicamente utilizando HTML5 y Javascript.

De hecho, saltarse la validación HTML5 es tan sencillo como introducir un par de palabras reservadas en el código HTML utilizando la consola del desarrollador de nuestro navegador.

¿No te lo crees? ¡Echa un ojo al vídeo!

Y tú, ¿conoces otras maneras de saltarte la validación de un formulario del lado del cliente?

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