Errores típicos en Javascript

A quien no le ha pasado alguna vez que cuando programa en javascript al momento de ver funcionando, manda error, o que en un navegador funciona y en otro no, o peor aun a veces no funciona y no manda error. Bueno esos dolores de cabeza son debido a que a veces javascript es muy sensible o muy estricto en algunas cosas. En este artículo pretendo dar a conocer una serie de errores típicos y como los podemos solucionar.

Cuidado con la coma.

Este es un error un tanto típico, sobre todo cuando trabajamos con objetos o arreglos. Observen en el siguiente código.

<script type="text/javascript">
  var MyObj = {
        nombre : "Victor",
        pais : "Chile",
  }
</script>

Al esta todo correcto, pues no, la coma que esta el final, después de “Chile”, esta alterando el correcto funcionamiento, en algunos navegadores les va a mandar un error de sintaxis debido a un bug que traen consigo. Pues la solución es simplemente quitar esa coma.

“this” no siempre es esto, cambia según su lanzador.

Observemos un código de ejemplo.

<input type="button" value="Enviar" id="submit" />
<script type="text/javascript">
var myForm = function () {
    this.alert = "Hello world";
    this.onClickAction = function() {
        alert(this.alert );
    }
}();
document.getElementById("submit").onclick =  myForm.onClickAction;
</script>

Con el código anterior, asignamos al evento onclick sobre el button, la acción del objeto myForm, con el cual cuando hagamos clic en este debería aparecer un alert con el mensaje “Hello world”.

A su sorpresa no dice “Hello world”, dice “undefined”. Esto sucede porque “this” es sobreescrito por el objeto input, es decir si en vez de poner this.alert ponen this.value el mensaje seria “Enviar”. Bien para solucionar esto deben reemplazar “this” por “self” y agregar esta variable dentro del código, entonces el resultado final seria.

<input type="button" value="Enviar" id="submit" />
<script type="text/javascript">
var myForm = function () {
    var self = this;
    this.alert = "Hello world";
    this.onClickAction = function() {
        alert(self.value);
    }
}();
document.getElementById("submit").onclick =  myForm.onClickAction;
</script>

Nótese que se agrego var self, esto es porque si no lo agregamos IE manda un error.

Cuidado con el nombre de tus variables

Procure no asignar un nombre a una variable idéntico al de un ID en el documento.

<input type="button" id="ElBoton">
<script type="text/javascript">
    ElBoton = get("ElBoton");
</script>

En la mayoría de los navegadores este código no debería mandar error, pero en algunos manda un error del tipo “objeto indefinido”, simplemente como solución, sean creativos o en vez de una variable “ElBoton” pongan “_ElBoton”.

Replace, solo reemplaza la primera coincidencia

La función replace para los string en javascript, solo reemplaza la primera coincidencia, al contrario a funciones del tipo str_replace de PHP. Por ejemplo.

<script>
    var title = "Errores típicos en Javascript".replace(" ","_");
    alert(title);
</script>

El siguiente código arrojaría el siguiente resultado:

Errores_típicos en Javascript

Para solucionar esto y que replace funcione en todas las coincidencias, debemos recurrir a las expresiones regulares, de la siguiente forma.

<script>
     var title = "Errores típicos en Javascript".replace(/ /g,"_");
     alert(title);
 </script>

No siempre ParseInt da los resultados esperados.

ParseInt es una funciona bastante buena, con la que podemos transformar variables del tipo string al tipo int, por ejemplo.

dia = "09";
var  numdia = parseInt(dia);

Lo esperado de esa operación seria que numdia tenga como valor 9, pero para nuestra sorpresa es 0!!.

Bueno esto tiene una explicación lógica y matemática que no explicare mucho (mi matemática siempre ha sido pésima). Cuando el primer carácter de un String es cero, parseInt interpreta el valor en base a 8. Para solucionar este problema debemos cambiar su base a 10 de la siguiente manera:

 var  numdia = parseInt(dia, 10);

Ya con esto nuestro resultado es el esperado, obviamente 9.

Asignando Eventos

La forma típica de asignar un evento a algo es la siguiente:

windows.onclick = funcion_asociada;

Esta manera tiene dos grandes errores:

1. Sobreescribe otros eventos que se hagan creado.
2. Puede causar errores de memoria en ciertos navegadores en algunas circunstancias.

La solución, ocupa alguna librería que le permita asociar eventos, como por ejemplo Prototype. Es tan simple como esto:

Event.observer(window, load, funcion_asociada);

Cuidado con los tiempos

Cuando creamos un objeto y le asignamos un evento o queremos realizar una acción en este, hay que tener cuidado, ya que la creación de estos requiere de un tiempo, y una vez cumplido se puede trabajar en estos. Revisemos el siguiente ejemplo

var myInput = document.createElement('input');
document.body.appendChild(myInput);
myInput.focus();
myInput.select();

En el código anterior, simplemente creamos un elemento y lo insertamos en el cuerpo, una vez realizado, asignamos el curso al objeto creado y lo seleccionamos. Bien, a nuestra sorpresa el focus() y selec() no funcionaran en algunos navegadores, el problema esta en que Javascript tiene una ejecución linea, con esto quiero decir, que ejecuta todas lineas una tras otra sin esperar a que la anterior termine. En este caso el error se debe a que el objeto no se alcanzo a establecer bien antes de hacer el focus() y el select();. La solución a este problema seria algo así.

var myInput = document.createElement('input');
myInput.id = "newInput";
document.body.appendChild(myInput);
setTimeout("document.getElementById("newInput").focus(); document.getElementById("newInput").select()", 10);

Ahora si el input es creado y seleccionado.

El punto y coma (;) es importante

Este es un punto que encuentro importante. En todo lenguaje existe una forma de terminar una instrucción, por ejemplo el ; (punto y coma), en javascript este es opcional es decir.

var myName = "victor"
var myLastName = "san martin";

Ambos funcionan en la mayoría de los navegadores, pero se ha notado comportamientos extraños en ciertos navegadores. Conjunto a esto se ha vuelto bastante famoso el uso de compresores, pues estos su primera tarea es eliminar espacios y saltos de linea, punto importante que permitía que funcionase nuestro código anterior. Bien, imaginemos que pasamos por un compresor, esto nos dejaría algo así:

var myName = "Victor"var myLastName = "san martin";

Sin duda mandaría error, aunque en algunos compresores mas avanzados, encuentran este error y le asignan automáticamente el ; al final cuando falta, por ejemplo ShrinkSafe es un muy buen compresor y que identifica algunos errores como este.

Comentario

Estas son algunos de los problemas típicos en los que uno se puede enfrentar al momento de programar en Javascript, sin duda si de una vez por todas, se estableciera un poco el como un navegador interpreta algo, sin duda nos ahorrarian bastantes horas, con dolor de cabeza incluidos, pero se ve algo dificil.

Como sugerencia, les recomiendo instalar Firebug. Es una extensión muy buena, que funciona tanto en Firefox como en otros navegadores. Con esta extensión podemos identificar rápidamente nuestro error, además de ver como se comporta javascript, las peticiones realizadas por AJAX, etc y etc.

Obviamente dejo abierto el artículo, a comentarios, reclamos, etc., y si conocen algún error típico mas, no duden en comentarlo también.

Notas

No me referí a ningún navegador en si, siempre intente decir “en algunos navegadores”, claro que los entendidos en el tema saben a que navegador me refiero.
No porque haya hecho un comentario acerca de Prototype, quiere decir que lo ocupen, en lo personal lo recomiendo bastante, pero es a su elección. Tienen buenas opciones para elegir, como por ejemplo JQuery y Mootools.

Artículo inspirado y en parte basado en Nine Javascript Gotchas por Fitzblog.com
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo