El DHTML

El contexto de Javascript

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

Resumen

Una página web presetna un mínimo de interactividad con los usuarios por medio de enlaces y formularios

Los scripts contribuyen a aumentar la interactividad con el usuario y con el contexto donde se visualiza la página web. Los scripts son obligatorios para tener páginas interactivas.

También las reglas de estilos CSS actúan para mejorar la usabilidad y ayudar así a mejorar la interactividad.

Estos tres elementos son los soporte del DHTML.

Las etiquetas <script></script> de HTML son las que permiten incorporar scripts a la página.

Los scripts perciben la páginas web como un conjunto de objetos, el DOM: Document Object Module. Da acceso a toda la página web. Y es dinámico, es decir, modificable on line.

Actualmente hablar de HTML es hablar de DHTML. Una página web sin Javascript ni CSS es una rara avis.

HTML+JS+CSS: DHTML

 

Javascript y HTML

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 terina de cargar el script va a intentar ejecutarlo, y esto puede ocurrir sin que la página esté cargado completamente.

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.

En detalle

Este ejemplo muestra como escribir código incrustrado en la página web

<script>

  var hola;

  hola = "Hola mundo";

  window.alert(hola)

</script>

En este otro ejemplo se muestra como incorporar a una página web un archivo externo con el código de programa en su interior

<script src="programa.js">

</script>

La carga del archivo javascript en forma asíncrona pueden mejorar los tiempos de carga de la página

<script src="programa.js" async="aync">
</script>
Y por úlitmo la carga en forma asíncrona con el seguro de ejecución con elDOM disponible, el atributo defer
<script src="programa.js" defer>
</script>

La forma de importar a la página web los archivos Javascript va en función de como se va a usar. Para archivos poco pesados probablemente no veas diferencias.

En caso de duda prueba las tres y compara los tiempos de carga.