El DHTML

Un explorador como sabes muestra en pantalla páginas con información, documentos escritos con un lenguaje de etiquetas denominado HTML. Elementos imprescindibles en este tipo de documentos son los enlaces o hipervínculos que permiten acceder a recursos en cualquier lugar de la red: imágenes, video, otras páginas. Los enlaces y formularios son los únicos elementos qeu le dan algo de interactividad.

Para mostrarse adecuadametne y mejorar la usabilidad por parte del usuario, se utlizan las hojas de estilo CSS, un lenguaje que permite diseñar el modo en que las páginas web muestran su contenido.

Para lograr que las páginas sean más interactivas, que respondan a las acciones del usuario y que se adapten al contexto de visualización se usan programas o scripts escritos con el lenguaje de programación Javascript.

Es decir, el papel de Javascript en la página web es conseguir que estos documetnos presenten su contenido de manera más eficaz y cómoda para el usuario y lograr acciones que sin un programa no serían posibles

Todos estos elementos juntos componen lo que se llama DHTML: Dynamic HTML.   Actualmente al hablar de páginas escritas en HTML, realmente se habla de documentos DHTML. Es casi imposible pensar en una página web que no utilize reglas de estilo o scripts programados.

Esta interconexión con HTML y CSS hace necesario conocer también estos lenguajes de desarrollo web (no son lenguajes de programación, más bien son leguajes descriptores)

Quizás hayas leído o escuchado sobre los motores javascript que incorporan los navegadores. No son otra cosa que intérpretes para el lenguaje Javascript. Se encargan de leer las instrucciones de un programa, traducirlos y ejecutarlos. Sin los intérpretes los código Javascript solo serían texto dentro de la página.

Actualmente existe un alto grado de estandarización y los intérpretes de Javascript no muestran grandes diferencias, quizás Safari de Apple se sale un poco de la norma. Esta estandarizaicón permite que al ejecutar un mismo script en distintos navegadores se obtenga el mismo resultado.

Los programas Javascript por tanto se ejecutan en el ordenador del usuario. Pueden almacenar y leer información el el ordenador del usuario en forma de cookies.

Las versones más recietnes de HTML ofrece una interfaz API que permite a Javascript el manejo de ficheros y almacenamiento y lectura de datos en el ordenador del usuario.

Javacript también provee mecanismos para ejecutar código de manera asíncrona, como la lectura de ficheros o el intercambio de información con el servidor mediante AJAX.

Este procesamiento asíncrono supone una especie de ejecución en paralelo. Por ejemplo un programa puede seguir ejecutándose mientras al mismo tiempo se está cargando información desde el servidor. Al finalizar el proceso en espera (la carga en el ejemplo) el código atiende al proceso asíncrono (por ejemplo actualziar parte de la página web).

El lenguaje de marcas HTML posee una etiqueta que permite incrustrar en las páginas web fragmentos de código ejecutable, es decir: programas o scripts. Se ejecutan a medida que se cargan en el explorador.

Los scripts también pueden importarse desde archivos externos que son incluidos en la página cuano es cargada y mostrada por el explorador. Estos scripts también se ejecutan en el momento de ser cargados.

En general y como regla básica los scripts se colocan en la sección head de la página web, pero esto no es un regla obligatoria. A veces esto va contra la experiencia de usuario.

Por contra un archivo Javascript puede perjudicar a la página web. Esto es debido a que cuando el navegador necesita cargar recursos externos, la carga del resto de la página se detiene hasta que esos recursos están disponibles. Esto ocurre así cuando el navegador carga recursos en forma síncrona.

Para evitar este efecto negativo se puede usar el método carga asíncrono. En la importación asíncrona el explorador no se detiene en espera del recurso, sino que continua cargando el resto de la página web. Cuando el recurso está ya disponible lo incorpora al documento.

En el caso de Javascript, si el código que se importa no es imprescindible para la presentación de la página, se puede usar el método asíncrono. Para activar este método de carga la etiqueta script usa el argumento async.

También para mejorar la velocidad de la carga, es una buena idea colocar el bloque script al final del código HTML siempre que sea posible.

Hay que tener en cuenta que cuano la pagina termina de cargar el script va a intentar ejecutarse, y esto puede ocurrir sin que la página esté cargada completamente y puede dar lugar a errores.

Por tanto es necesario asegurarse que el DOM está disponible antes de ejecutar el script. Esto puede lograrse usando el atributo defer, con el que el archivo de script se carga de manera asíncrona y no se ejecuta hasta que el DOM está dispnible, es decir, hasta que la página está totalmetne cargada.