Unidad 10. Avanzado: JavaScript. Objetos del navegador

Jerarquía

Cuando nuestro navegador abre una página web, su motor JavaScript la analiza, y crea una estructura de objetos, ordenados jearárquicamente de la siguiente forma:

window		document		form		textarea
		frame		layer		text
		location		link		fileupload
		history		image		password
				area		hidden
				anchor		submit
				applet		reset
				plugin		radio
						checkbox
						button
						select

Según esta jerarquía, tenemos un objeto principal window (la ventana del navegador). Dentro de window podemos encontrar otros objetos: document, frame, location e history. A su vez, dentro document, encontramos otros objetos, como los enlaces de la página (links), las imágenes (image) o los formularios (form). Por último, dentro del formulario, podemos encontrar sus elementos.

Todos los objetos tienen propiedades, a las que podemos acceder como nombre_objeto.nombre_propiead. Las propiedades son valores del objeto, por ejemplo, color de fondo.

Por tanto, podemos considerar a document como una propiead de window, y a link como una propiedad de document, etc...

Podemos ver el valor de las propieadedes, o asignarles un valor nuevo.

Todos los objetos tienen métodos, acccesibles como nombre_objeto.nombre_metodo('parametro'). Los métodos son funciones o procesos del objeto, que realizan acciones. Por ejemplo, mover una ventana o abirla. Los parámetros dependeránd el método.

Algunos objetos o propiedadades son arrays. Por ejemplo, el objeto image de document es un array con todas las imágenes. Para cada una, tenemos sus propiedades, como el src, con el nombre del archivo.

Recuerda, que podemos recorrer una array fácilmente con la estructura for in:

for (variable in objeto_array) {
   bloque de sentencias;
}

 

 

Cada objeto tiene muchos métodos y propiedades, más o menos utilizadas. Vamos a ver sólo las que nos han parecido más útiles.

El objeto window

El objeto window se refiere a la ventana actual del naegador, por lo que es el más alto en la jerarquía, ya que todos lo demás objetos están dentro de la ventana.

Veamos algunas propiedades. Junto a cada una, tienes un enlace que muestra la propiedad, con el código alert(window.propiedad);.

• location. URL de la dirección actual. Ver. Si la cambiamos, redirigimos a otra página. Por ejemplo, window.location='https://www.aulaclic.es'; cambiaría la página actual por la de aulaclic.
• history. Es un array con las páginas visitadas en la ventana actual.

Veamos ahora algunos de sus métodos:

• close(). Cierra la ventana.
• moveBy(x, y). Mueve la ventana, x píxeles en horizontal, y y píxeles en vertical.
• moveTo(x, y). Mueve la ventana a las coordenadas dadas.
• open(URL, nombre, características). Abre una ventana con la URL indicada, el nombre que le demos, y las carácterísticas, por ejemplo si muestra la barra de menús, la abrra de herramientas, el alto y ancho, etc... Los parámetros son opcionales.
• back(), forward(), navega hacia atrás o hacia alante en el historial.

El objeto document

El objeto document es el que contiene todos los elementos de nuestra página, por lo que es desde éste desde el que podemos cambiarlos.

Muchas de sus propiedades son arrays de elementos de la página:

• bgColor, color de fondo.
• fgColor, color del texto.
• forms, array con los formularios.
• images, array con las imágenes.
• links, array con los enlaces externos.
• tittle, título de la página.

Métodos:

• clear(), limpia el documento.
• open(), abre la escritura del documento.
• write('texto'), escribe el texto que le pasemos como parámetro en el documento.
• writeln('texto'), escribe el texto, pero además añade uns alto de línea al final.
• close(), cierra la escritura del documento.
• getElementById(), nos permite encontrar un elemento utilizando su ID.