¿Javascript para IE o javascript para todos?


Últimamente me ha tocado modificar el código de la Secretaría Virtual de MU para darle una apariencia más moderna y acorde con el estilo de la nueva web de la universidad, y hacer que funcione con todos los navegadores (por lo menos con los más extendidos).

En un primer momento, se especificó que la Secretaría Virtual debía funcionar con Internet Explorer. La empresa contratada para hacer el desarrollo utilizó código javascript que solo es válido para Internet Explorer, por lo que algunos apartados no funcionaban con otros navegadores.

Los problemas

El que haya hecho algún desarrollo de javascript, se ha encontrado con document.all. Es una colección de todos los elementos de la página, con lo que de una manera fácil podemos acceder a las propiedades de cada uno de ellos. Es una pena que no funcione en todos los navegadores.

Otra colección de elementos muy utilizada es document.formulario, donde formulario es el nombre de un elemento <form> de la página HTML. Esto tampoco lo soportan todos los navegadores.

Y por último, etiquetas <a> que contienen filas de tablas, formando una estructura como esta:

<a onclick=”ejecutame();”>
<tr>
<td>contenido celda</td>
<td>contenio de otra celda</td>
</tr>
</a>

Principalmente me he topado con estos 3 problemas a la hora de hacer funcionar la Secretaría Virtual con otros navegadores.

Las soluciones

document.all es una colección para acceder a los elementos de la página, por lo que las opciones lógicas para sustituir document.all.elemento son document.getElementById(“elemento”) o document.getElementsByName(“elemento”). La primera opción nos devuelve el elemento con el identificador que pasemos como parámetro. La segunda opción, nos devuelve un array con todos los elementos que tengan el nombre que pasemos como parámetro. Dependiendo de la situación, la solución elegida será una u otra.

Con document.formulario pasa algo parecido. Es una colección de todos los elementos que contiene un formulario. Las apariciones de document.formulario.elemento hay que sustituirlas por document.forms.formulario.elements[“elemento”]. Hay otro modo de uso, ya que document.forms es también un array con todos los formularios de la página, por lo que se puede referenciar el formulario como document.forms[0] o document.forms[1]. El array elements se puede utilizar como un array indexado por número o como un array indexado por valor (como en el ejemplo anterior).

Aunque en Internet Explorer la estructura

<a onclick=”ejecutame();”>
<tr>
<td>contenido celda</td>
<td>contenio de otra celda</td>
</tr>
</a>

genera una página que hace lo que queremos, en otros navegadores no funciona porque esa estructura no cumple las especificaciones de HTML (no puede haber un enlace fuera de una celda de una tabla, y mucho menos un enlace que contenga la fila entera de la tabla). En este caso la solución es muy sencilla: eliminar las etiquetas <a> y </a>, y pasar el evento onclick a la fila. El código correcto es algo así:

<tr onclick=”ejecutame();”>
<td>contenido celda</td>
<td>contenio de otra celda</td>
</tr>

Conclusiones

Mientras he ido haciendo este trabajo, me he dado cuenta de un par de cosas:

  1. Con un mejor diseño de la aplicación y un uso racional de funciones y procedimientos se simplifica el mantenimiento posterior.
  2. En lo que a javascript se refiere, es mejor hacer el desarrollo de javascript pensando en que se va a utilizar en múltiples navegadores y respetando las recomendaciones de los estándares, que adaptarlo más tarde.

Parafraseando al cerdito de los dibujos, “eso es to, eso es to, eso es to to todo, amigos”.

8 iruzkin daude

Zurea gehitu
  1. 1
    Ibai Jurado

    Buenas Mikel!

    buen artículo! hace poco me he tenido que pelear con la interacción de elementos DOM y lo que he utilizado ha sido jquery.

    Es una librería javascript/framework que simplifica muchísimo la interacción con los elementos HTML, además de otras funciones. Echarle un vistazo a su funcionamiento ya que quizás no en la secretaría virtual pero en nuevos proyectos le daréis un muy buen uso.

    http://jquery.com/

    Por otro lado, el principal problema que se tiene al desarrollar javascript para Internet Explorer es la falta de feedback. Si casca… no nos dice donde está el fallo. Sin embargo en Firefox tenemos herramientas como Firebug que nos hacen la vida mucho más fácil. Yo he estado utilizando un plugin para IExplorer llamado DebugBar.

    Espero que os sea de ayuda!

    • 2
      mkortabarria

      Gracias por la aportación, Ibai. Echaremos un vistazo a jquery.

      Tienes razón en lo de la falta de feedback de Internet Explorer. Parece que en la 9 se han puesto las pilas, y viene con unas “herramientas de desarrollo”. Tiene un interface parecido a Firebug. No me he metido a fondo con estas herramientas, por lo que no sé qué potencial tiene, pero siempre será mejor que no tener nada.

  2. 4
    Asier Galdos

    Estoy de acuerdo con Ibai. Trabajar con librerias/frameworks Javascript te permite orientarte al aplicativo y no al navegador. La compatibilidad con el navegador está siempre garantizada.

    Lo que sí te exigen estas librerias para un rendimiento óptimo, son navegadores de última generación: firefox 4, Chrome, IE 9, Safari, etc.,. De hecho, Google ya ha dicho que no va a soportar navegadores antiguos para sus aplicativos.

    Nosotros trabajamos tanto con JQuery como con Smartclient.

  3. 5
    Asier Galdos

    Respecto del debugging. Firebug está bien pero consume mucha memoria. Chrome tiene Developers Tools, y está muy bien. También existen plugins como Poster que te facilitan la vida al testear servicios web.

    ondo izan

  4. 6
    Franquicias rentables

    Javascript cada vez está evolucionando en la utilizacion de los codigos en los sitios web y los navegadores de hac 1 año atrás como IE 7 y Firefox 3 dejaron de funcionar correctamente (no asi chrome que se actualiza solo). Esto puede presentar problemas para los usuarios que no utilizan versiones recientes. Excelente blog, saludos desde Quito, Ecuador.

  5. 8
    izendegi

    Kaixo Asier,

    El filtro anti-spam requiere que aceptemos manualmente el primer comentario de cada usuario; en tu caso acabo de hacerlo, por lo que de aquí en adelante no tendrás problemas.

    Barkatu eragozpenak eta milesker iruzkinengatik.

+ Iruzkin bat laga