martes, 20 de noviembre de 2007

Taller de JavaScript: Ajax y manipulación del DOM

Estas diapositivas muestran paso a paso los conceptos resumidos y prácticos de JavaScript, Ajax, DOM y jQuery (en inglés).


Aplicaciones AJAX interesantes

Algunas de las aplicaciones AJAX más interesantes que circulan por internet:

Kiko: Calendario online. Están preparando una API.
Backbase’s RSS Reader: Buen diseño, posibilidad de descargar la aplicación
BackPack: Gestor de proyectos (con un todo-list)
Writely: Un procesador de textos online, podemos exportar a formatos word y están pendientes de añadir funcionalidades para blogs y API.
Amazon Zuggest: Una especie de Google Suggest pero con Amazon.
Time Tracker: Gestor de tiempo
Del.icio.us Director: Gestor de links en del.icio.us
Backbase’s Information Portal: Portal tipo página de inicio, con noticias, el tiempo, etc…
Protopage: Otro portal similar al anterior, con posibilidad de agregar feeds.
Periodic Table of the Elements: Tabla periódica de elementos para estudiantes de química.
AJAX IM: Cliente tipo messenger vía web.
Tadalist: Otro todo list (cosas pendientes de hacer), lista de tareas pendientes.
24SevenOffice: un ERP/CRM impresionante, aunque de pago y solo via online. Podemos verlo funcionar aquí

También podemos encontrar algunos otros en: Ajaxian, Techcrunch o en Readwriteweb.

JavaScript: Compatibilidad de Firefox con IExplorer

Firefox tiende a cumplir con alegría la especificación de JavaScript actual (la 1.8 y en breve la 2.0, también llamada ECMAScript pues ECMA es la entidad encargada de estandarizar JavaScript), mientras que IE, como todo lo de Microsoft, se escora hacia lo propietario, utilizando formas de acceso a propiedades no estandarizadas o, incluso, inventándose nuevas. De hecho, la versión de JavaScript de Microsoft se llama JScript, siendo diferentes el conjunto de objetos y propiedades accesibles desde JavaScript y desde JScript (distintos árboles DOM).

Si se programa únicamente pensando en IE (JScript) queda en el aire qué pasaría con navegadores que, siendo compatibles con JavaScript, no lo sean con JScript: Opera, Safari, Netscape, Konkeror,... y un largo etcétera de los mackeros y linuxeros.

Sin embargo, si se lleva todo hacia JavaScript perdemos al navegador potencialmente más frecuente, el IE.

Solución: de compromiso, como siempre.

Se coge el Firefox y se le instala un parseador o intérprete de JavaScript con consola de errores (recomiendo la extensión Firebug, habilitando la detección de todos los errores posibles, incluso warnings). Ejecutamos la web en cuestión y vamos comprobando los fallos.

Por cada uno se ve la llamada equivalente estándar que debería funcionar y se ponen las dos opciones, con un if-then-else.

EJEMPLO (no funcionaría en Firefox):

var obj = null;

obj = document.all("nombreelemento");


document.all NO funciona en Firefox, pero sí en IE. Es común que la gente copie y pegue este código desde cualquier ejemplo de Internet. (En realidad, las últimas versiones de Firefox sí que son compatibles con la llamada document.all(“nombrelemento”), pero al interrogar al browser por la existencia del método document.all devuelve “false”, precisamente por compatibilidad con los estándares de JavaScript.)

CÓMO RESOLVERLO:

var obj = null;

if (document.all){ /* Requiere que los IDs sean únicos en la página y que no coincidan con el atributo NAME de otros elementos. DOM de JScript, IE.*/

obj = document.all["nombreelemento"];
} else if (document.getElementById){

/* Para navegadores que soporten el DOM W3C. Firefox. */
obj = document.getElementById("nombreelemento");
}


MÁS RÁPIDO AÚN (usando la forma abreviada del if-else):

var obj = document.all ? document.all("nombreelemento") : document.getElementById("nombreelemento");


OTRA POSIBILIDAD: que haya propiedades sin correspondencia, por ejemplo:
La tecla pulsada en IE se recoge en event.keyCode y en Firefox (y demás W3C compatibles) en event.which.

if (((document.all) ? event.keyCode : event.which)==13)

IE leerá el event.keyCode y Firefox event.which.


Alfonso Diego de Gea García.
Ingeniero Informático.