Errores típicos en Javascript

septiembre 12, 2007 at 5:03 pm 8 comentarios

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 VideosTe VerdeVideos 3GP3GPsomos tu y yo

Entry filed under: JavaScript - AJAX, Programación. Tags: .

Buenas prácticas al programar 145 Sistemas Operativos en PC

8 comentarios Add your own

  • 1. maceda  |  octubre 17, 2007 a las 9:24 am

    quisiera suscribirme porque tengo muchas dudas respecto a java script, como hago para suscribirme

    Responder
  • 2. Victor San Martin  |  octubre 17, 2007 a las 9:39 am

    Puedes hacerlo haciendo click en el icono grandote que esta sobre el menú derecho.

    Saludos

    Responder
  • 3. Mauricio  |  octubre 31, 2007 a las 10:44 am

    tengo el siguiente codigo javascript, funciona perfecto en firefox pero en internet explorer no, y no se cual es el error, si puedes ayudarme, gracias

    function Plantilla(form){
    document.write(”);
    document.write(”);

    var ruta = new String(form.txtfile.value);
    var pos = ruta.indexOf(“imagenes”);
    ruta2 = “juan”;
    alert(‘maurci’);

    //se carga la ruta de la carpeta donde se encuentran las imagenes de los pacientes
    for (i=pos;i<ruta.length; i++)
    ruta2 = ruta2 + ruta[i];

    for (i=1; i<=9; i++){
    ruta2 = ruta2.substr(0, ruta2.length – 5);
    if (i5){
    arc = i-1;
    ruta2 = ruta2 + arc + ‘.jpg’;
    }else{
    ruta2 = ruta2 + ‘l.png’;
    document.write(”);
    document.write(‘‘);
    document.write(‘Paciente: ‘+form.txtNombre.value);
    document.write(‘Tel: ‘ + form.txtTelefono.value);
    document.write(‘Dirección: ‘ + form.txtDir.value);
    document.write(‘Odontologo: ‘ + form.txtOdon.value);
    document.write(‘
    ‘);
    }
    if (i!=5)
    document.write(”);
    if ( (i%3) == 0)
    document.write(”);
    }

    document.write(”);
    }

    no se que es lo que sucede con el objeto String, ahi no muestra nada el IE, pero el firefox perfecto.

    Responder
  • 4. Victor San Martin  |  octubre 31, 2007 a las 11:12 am

    @Mauricio: fijate en el primer if, esta mal, tu tienes if (i5) y deberia ser if (i == 5), además no encuentro la necesidad de usar new String, si el valor es texto siempre sera string.

    Saludos y espero sea eso.

    Responder
  • […] 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 […]

    Responder
  • 6. Edgar Riquelme  |  mayo 23, 2008 a las 11:01 am

    como puede validar el valor ingresado por el usuario al crear formulario dinamico
    document.body.appendChild(myInput);

    Responder
  • 7. I needd help!!!! por favor si alguien sabe!!!  |  marzo 5, 2010 a las 10:56 am

    No se por que y no he podido encontrar el error me arroja este error cuando me carga la web:

    “This page […] is null or not an object motols.js

    line: 21
    char: 63”

    Busqué en la línea 21, caracter 63, pero me aparece esto:

    lo raro es que me aparece ese error en estos navegadores:

    Explorer, Acoo browser, Google Chrome

    En firefox se ve bien y no me arroja un leve error abajo en la esquina inferior izq, donde aparece la carga en las webs…

    Gracias!!!!

    Responder
  • 8. Lanora  |  marzo 19, 2013 a las 4:30 pm

    Mix pure turmeric powder in coconut oil and massage your skin with this oil before taking bath.
    This remedy is helpful for reducing the dark circles and fine lines around eyes.
    com, who also provides free of cost consultancy to patients and
    advise on various topics like turmeric benefits for
    skin by visiting the site, you can read articles on how to get softer lips
    and benefits of eating almonds and for more information click the Hyperlink.

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed



A %d blogueros les gusta esto: