Jerarquía de objetos JavaScript. forms, elements, images... Navigator: useragent, geolocation, online (CU01170E)

Codificación aprenderaprogramar.com: CU01170E

JERARQUÍA DE OBJETOS JAVASCRIPT

Recordemos que window, el objeto global en JavaScript, tiene sus propiedades y métodos. La función que venimos usando para mostrar mensajes por pantalla, alert, es un método de window. Cuando escribimos alert('Hola'); en realidad estamos invocando window.alert('Hola');

Es decir, alert y window.alert son lo mismo para el navegador. El hecho de que no sea necesario escribir window cuando escribimos alert obedece a que si se invoca una función que no ha sido definida de otra manera, se considera que es un método del objeto global, es decir, un método de window.

JavaScript define una jerarquía de objetos que podemos reflejar de forma aproximada en un esquema similar al siguiente:

En estas jerarquía podemos pensar en objetos predefinidos de JavaScript (como Math, Date, String, RegExp, etc., incluido el objeto window).

También podemos pensar en el objeto document que contiene toda la información relativa a la estructura del documento HTML, lo que hemos llamado el DOM. No obstante, debemos diferenciar entre la jerarquía del DOM, teniendo en cuenta que el DOM existe de forma independiente a JavaScript, y la jerarquía de objetos JavaScript, aunque guarden cierta similitud organizativa.

Podemos ver una página web como una colección de objetos. Por ejemplo, para JavaScript un formulario es un objeto, una imagen es un objeto, etc.

Los objetos tienen propiedades, métodos y eventos asociados.

Los objetos se organizan conforme a una jerarquía de forma que heredan métodos o propiedades de sus objetos padre, e incluso el nombre de un objeto se crea a partir de sus objetos padre.

Todo documento HTML dispone de los siguientes objetos en la jerarquía de objetos JavaScript:

navigator: tiene propiedades relacionadas con el nombre y la versión del navegador, protocolos de transferencia permitidos por el navegador (mime types) y sobre plugins instalados.

window: considerado habitualmente el objeto global o de máximo nivel. Tiene propiedades relacionadas con la ventana del navegador. En caso de uso de frames (“subventanas”) hay un objeto window por cada “ventana hija” que exista.

document: tiene propiedades relacionadas con el documento como título, links, formularios, etc.

location: tiene propiedades relacionadas con la URL actual.

history: tiene propiedades relacionadas con URLs previamente visitadas.

Además de estos objetos en el documento HTML existirán más objetos según su contenido: objetos imágenes, objetos link, objetos formulario, etc.

CÓMO SE NOMBRAN LOS OBJETOS EN LA JERARQUÍA JAVASCRIPT

Para nombrar los objetos en la jerarquía de objetos JavaScript debemos tener en cuenta las siguientes reglas:

1) El nombre de un objeto que desciende de otro en la jerarquía JavaScript incluye el nombre de los objetos padre de la jerarquía. Por ejemplo el objeto document podemos nombrarlo como window.document. Un objeto hijo es a su vez un objeto y una propiedad del objeto padre. document es a su vez un objeto y una propiedad de window.

2) Dado que todos los objetos que podemos usar en el código descienden de window, normalmente omitiremos el uso de window a la hora de nombrar un objeto. Por eso escribiremos por ejemplo document.body en lugar de window.document.body, aunque ambas formas son válidas.

3) JavaScript organiza de forma automática ciertos objetos de naturaleza “múltiple” en arrays. Por ejemplo, una página web puede contener varios formularios. JavaScript, de forma automática, crea un array de objetos cuyo nombre es forms, siendo el primer formulario el de índice 0 y sucesivamente el 1, 2, etc. representan los siguientes formularios que aparezcan en el documento HTML por orden de aparición. Nos podemos referir a un formulario como window.document.forms[0], o más frecuentemente: document.forms[0]

Entre los arrays de objetos que crea JavaScript automáticamente tenemos:

forms: array con todos los formularios existentes en el documento HTML.

elements: array para cada formulario con los objetos que conforman dicho formulario (esto comprende objetos text, button, checkbox, hidden, radio, textarea, etc.). Si el primer formulario de una web tiene 3 input de tipo texto nos podemos referir al último de ellos como forms[0].elements[2]

images: array con todas las imágenes existentes en el documento HTML.

links: array con todos los links (tag HTML a) existentes en el documento HTML.

Para comprobar cómo podemos acceder a los objetos en la jerarquía de JavaScript escribe este código y comprueba los resultados (hemos incluido la ruta de dos imágenes, cámbiala si es necesario):

El resultado esperado es que al pulsar sobre el texto “Probar”, la primera imagen adquiere un borde azul de 10 píxeles de grosor, la segunda imagen un borde rojo del mismo grosor y el texto del link queda de color gris. La sintaxis window.document.images[1] o simplemente document.images[1] nos da acceso a la segunda imagen existente en el documento HTML.

A través de la jerarquía de objetos de JavaScript podemos acceder a las propiedades de cada objeto por separado. En el ejemplo anterior hemos visto cómo cambiar propiedades de estilo CSS, pero también podríamos acceder y modificar otras propiedades. Por ejemplo, introduce estas líneas y comprueba el resultado: