JavaScript: Extensión para el cliente

La extensión para cliente permite acceder a los objetos que utiliza el navegador y al DOM (Document Object Model), la jerarquía de objetos de un documento HTML:

Estos objetos los crea el motor JavaScript del navegador (o al menos están disponibles para dicho motor) a partir de la página HTML abierta por el propio navegador.

El proceso comienza cuando el navegador abre una página HTML (por ejemplo solicitándola a un servidor web o directamente del sistema de ficheros local).

La información contenida en dicha página constituye una corriente de datos con un inicio y un final.

El analizador sintáctico (parser) del navegador lee esa corriente de datos de forma secuencial, extrayendo (y mostrando en pantalla si es necesario) los distintos elementos HTML. Estos elementos también son convertidos a objetos que formarán parte de la estructura del documento (DOM) y que estarán disponibles para la propia funcionalidad del navegador y para los scripts y objetos (plugins) incluidos en la página.

De hecho, los programas JavaScript del lado del cliente pueden interactuar de dos formas con las páginas de las que forman parte:

1.- Durante la carga del documento, es decir, durante el análisis de la corriente de datos, pueden incorporar a dicha corriente expresiones HTML que serán aceptadas por el parser HTML y convertidas en los elementos necesarios. Habitualmente se utiliza este método para añadir información dinámica (fecha, hora, etc…) o para mostrar información en función de alguna condición (tipo de navegador que utiliza el usuario, resolución, etc…).

El proceso se muestra, de forma aproximada, en la siguiente figura:

2.- Una vez cargada la página, el documento HTML está reflejado en la estructura de objetos construida por el navegador. Los programas JavaScript pueden acceder a esta estructura para recoger información o incluso para modificarla de forma dinámica. La interactividad con el usuario se consigue a través del mecanismo de captura y tratamiento de eventos.

El acceso a los distintos objetos y sus propiedades se lleva a cabo recorriendo la jerarquía:

<html>
<body>
<form name=’form1′>
<input type=’text’ name=’nombre’>
</form>

window.document.form1.nombre.value = «Este es el nombre»;

Artículo (C) Epsilon Eridani.