Juan Manuel 21 de febrero de 2008 a las 11.59
   Imprimir artículo
elWebmaster.com

Los 8 errores más comunes al comenzar a programar en Javascript


Leyendo el blog de Víctor San Martín Medina me encuentro con algo muy pero muy interesante: los errores típicos que se cometen al programar en Javascript. Realmente es algo que todos deberíamos tener en cuenta, sobre todo los que recién comienzan.

¿Cuántas veces nos pasó que por una coma o un punto nos “tirara error” un documento o aplicación generada en Javascript? O también el típico caso de que funcione en un navegador y no en otro. Veamos qué errores son los más comunes y cómo solucionarlos.

Los 8 errores más comunes al comenzar a programar en Javascript

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>

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”.

Para 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 sería “Enviar”. Bien para solucionar esto deben reemplazar “this” por “self” y agregar esta variable dentro del código, entonces el resultado final sería:

<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 agregó var self, esto es porque si no lo agregamos IE manda un error.

Cuidado con el nombre de tus variables

Procura 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, sólo reemplaza la primera coincidencia

La función replace para los String en Javascript, sólo reemplaza la primera coincidencia, al contrario de 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 función 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 sería 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 explicaré 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 hayan 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.observe(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 recién 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, para nuestra sorpresa el focus() y select() no funcionarán en algunos navegadores, el problema está en que Javascript tiene una ejecución lineal, con esto quiero decir que ejecuta todas las líneas una tras otra sin esperar a que la anterior termine. En este caso el error se debe a que el objeto no se alcanzó a establecer bien antes de hacer el focus() y el select();. La solución a este problema sería 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 sí, 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 que identifica algunos errores como este.

También a modo de conclusión final nos recomienda instalar Firebug una extensión para varios navegadores que permite encontrar rápidamente los errores y ver cómo trabaja nuestro código, qué peticiones AJAX realiza y mucho más.

Muchos de estos errores se cometen por la falta de estandarización de los diferentes navegadores a la hora de interpretar el código. Esperemos que esto cambie algún día.

Fuente: Quest’s Blog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. andres descalzo dice:

    En “Cuidado con los tiempos”, tene en cuenta que tiene que se:
    setTimeout(“document.getElementById(‘newInput’).focus(); document.getElementById(‘newInput’).select();”, 10);

    Las tiene que haber comillas simples adentro o al revés, y falta un “;” (punto y coma) al final de select().

  2. Ricardo Ramirez dice:

    Eso si pone cabezon a uno, errores pequeños que no dejan correr nada. Definitivamente hay que tener mucho cuidado al momento de tirar codigo.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder