S.E.P. S.E.I.T. D.G.I.T.

INSTITUTO TECNOLGICO
Del Istmo.
MATERIA:
PROGRAMACION WEB
TEMA:
Browser Object Model (BOM)
TITULAR:
Ing. Jos Antonio Lpez Posada
PRESENTA:
Castillejos Gallegos Griselda
Martnez Endolay Karina
Santos Cuevas Lizbeth
Melndez Tern Otniel

ESPECIALIDAD:
Lic. Informtica

Heroica ciudad de Juchitn de Zaragoza, Oaxaca, Marzo 2010.

5.1. Introduccin a BOM

Las versiones 3.0 de los navegadores Internet Explorer y Netscape Navigator
introdujeron el concepto de Browser Object Model o BOM, que permite acceder
y modificar las propiedades de las ventanas del propio navegador.
Mediante BOM, es posible redimensionar y mover la ventana del navegador,
odificar el texto que se muestra en la barra de estado y realizar muchas otras
manipulaciones no relacionadas con el contenido de la pgina HTML.
El mayor inconveniente de BOM es que, al contrario de lo que sucede con
DOM, ninguna entidad se encarga de estandarizarlo o definir unos mnimos de
interoperabilidad entre navegadores.
Algunos de los elementos que forman el BOM son los siguientes:
Crear, mover, redimensionar y cerrar ventanas de navegador.
Obtener informacin sobre el propio navegador.
Propiedades de la pgina actual y de la pantalla del usuario.
Gestin de cookies.
Objetos ActiveX en Internet Explorer.
El BOM est compuesto por varios objetos relacionados entre s. El siguiente
esquema muestra los objetos de BOM y su relacin:
Figura 5.1. Jerarqua de objetos que forman el BOM
En el esquema anterior, los objetos mostrados con varios recuadros
superpuestos son arrays. El resto de objetos, representados por un rectngulo
individual, son objetos simples. En cualquier caso, todos los objetos derivan del
objeto window.

5.2. El objeto window

El objeto window representa la ventana completa del navegador. Mediante este
objeto, es posible mover, redimensionar y manipular la ventana actual del
navegador. Incluso es posible abrir y cerrar nuevas ventanas de navegador.
Si una pgina emplea frames, cada uno de ellos se almacena en el array
frames, que puede ser accedido numricamente (window.frames[0]) o, si se ha
indicado un nombre al frame, mediante su nombre (window.frames["nombre del
frame"]).

Como todos los dems objetos heredan directa o indirectamente del objeto
window, no es necesario indicarlo de forma explcita en el cdigo JavaScript.
En otras palabras:
window.frames[0] == frames[0]
window.document == document
BOM define cuatro mtodos para manipular el tamao y la posicin de la
ventana:
moveBy(x, y) desplaza la posicin de la ventana x pxel hacia la derecha y y
pxel hacia abajo. Se permiten desplazamientos negativos para mover la
ventana hacia la izquierda o hacia arriba.
moveTo(x, y) desplaza la ventana del navegador hasta que la esquina
superior izquierda se encuentre en la posicin (x, y) de la pantalla del usuario.
Se permiten desplazamientos negativos, aunque ello suponga que parte de la
ventana no se visualiza en la pantalla.
resizeBy(x, y) redimensiona la ventana del navegador de forma que su nueva
anchura sea igual a (anchura_anterior + x) y su nueva altura sea igual a
(altura_anterior + y). Se pueden emplear valores negativos para reducir la
anchura y/o altura de la ventana.
resizeTo(x, y) redimensiona la ventana del navegador hasta que su anchura
sea igual a x y su altura sea igual a y. No se permiten valores negativos.
Los navegadores son cada vez menos permisivos con la modificacin mediante
JavaScript de las propiedades de sus ventanas. De hecho, la mayora de
navegadores permite a los usuarios bloquear el uso de JavaScript para realizar
cambios de este tipo. De esta forma, una aplicacin nunca debe suponer que
este tipo de funciones estn disponibles y funcionan de forma correta.
A continuacin se muestran algunos ejemplos de uso de estas funciones:
// Mover la ventana 20 pxel hacia la derecha y 30 pxel hacia abajo
window.moveBy(20, 30);
// Redimensionar la ventana hasta un tamao de 250 x 250
window.resizeTo(250, 250);
// Agrandar la altura de la ventana en 50 pxel
window.resizeBy(0, 50);
// Colocar la ventana en la esquina izquierda superior de la ventana
window.moveTo(0, 0);

5.3 El objeto Document

E objeto document es el unico que pertenece tanto al DOM como al DOM.
Desde el punto de vista de BOM, el objeto document proporciona informacin
sobre la propia pagina HTML.

Algunas de las propiedades ms importantes definidas por el objeto document
son:


Propiedad Descripcin
lastModified La fecha de la ltima modificacin de
la pgina
referrer La URL desde la que se accedi a la
pgina (es decir, la pgina anterior en
el array
history)
title El texto de la etiqueta <title>
URL La URL de la pgina actual del
navegador



Las propiedades title y URL son de lectura y escritura, por lo que adems de
obtener su valor, se puede establecer de forma directa:

// modificar el ttulo de la pgina
document.title = "Nuevo titulo";

// llevar al usuario a otra pgina diferente
document.URL = "http://nueva_pagina";


Adems de propiedades, el objeto document contiene varios arrays con
informacin sobre
algunos elementos de la pgina:

Array

Descripcin
anchors Contiene todas las "anclas" de la pgina
(los enlaces de tipo <a
name="nombre_ancla"></a>)
applets Contiene todos los applets de la pgina

embeds Contiene todos los objetos embebidos en
la pgina mediante la etiqueta <embed>

forms Contiene todos los formularios de la pgina

images Contiene todas las imgenes de la pgina

Links

Contiene todos los enlaces de la pgina
(los elementos de tipo <a href
="enlace.html"></a>)



Los elementos de cada array del objeto document se pueden acceder mediante
su ndice
numrico o mediante el nombre del elemento en la pgina HTML. Si se
considera por ejemplo la siguiente pgina HTML:


Primero TITLE

<html>

<head>
<title>Ejemplo de TITLE</title>

<script type="text/javascript">
document.title = "con el document. title....";


</script>
</head>

<body>
</body>

</html>

Segundo URL

<html>

<head>
<title>Ejemplo de url</title>

<script type="text/javascript">
document.URL = "http://www.google.com";


</script>
</head>

<body>
</body>

</html>


Para acceder a los elementos de la pgina se pueden emplear las funciones
DOM o los objetos de BOM:

Prrafo: document.getElementsByTagName("p")
Enlace: document.links[0]
Imagen: document.images[0] o document.images["logotipo"]
Formulario: document.forms[0] o document.forms["consultas"]


Una vez obtenida la referencia al elemento, se puede acceder al valor de sus
atributos HTML utilizando las propiedades de DOM. De esta forma, el mtodo
del formulario se obtiene mediante document.forms["consultas"].method y la
ruta de la imagen es document.images[0].src.




5.4 El Objeto Location


El objeto location es uno de los objetos ms tiles del BOM. Debido a la falta
de estandarizacin, location es una propiedad tanto del objeto window como
del objeto document.

El objeto location representa la URL de la pgina HTML que se muestra en la
ventana del
navegador y proporciona varias propiedades tiles para el manejo de la URL:


Propiedad Descripcin
hash El contenido de la URL que se encuentra despus del signo #
(para los enlaces de las anclas)
http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion
hash = #seccion
host El nombre del servidor
http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion
host = www.ejemplo.com
hostname La mayora de las veces coincide con host, aunque en
ocasiones, se eliminan las www del principio
http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion
hostname = www.ejemplo.com
href La URL completa de la pgina actual
http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion
URL=http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion
pathname Todo el contenido que se encuentra despus del host
http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion
pathname = /ruta1/ruta2/pagina.html
port Si se especifica en la URL, el puerto accedido
http://www.ejemplo.com:8080/ruta1/ruta2/pagina.html#seccion
port = 8080
La mayora de URL no proporcionan un puerto, por lo que su
contenido es vaco
http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion
port = (vaco)
protocol El protocolo empleado por la URL, es decir, todo lo que se
encuentra antes de las dos barras inclinadas //
http://www.ejemplo.com/ruta1/ruta2/pagina.html#seccion
protocol = http:
search Todo el contenido que se encuentra tras el smbolo ?, es decir, la
consulta o "query string"
http://www.ejemplo.com/pagina.php?variable1=valor1&variable2=
valor2
search = ?variable1=valor1&variable2=valor2


De todas las propiedades, la ms utilizada es location.href, que permite obtener
o establecer la direccin de la pgina que se muestra en la ventana del
navegador.

Adems de las propiedades de la tabla anterior, el objeto location contiene
numerosos mtodos y funciones. Algunos de los mtodos ms tiles son los
siguientes:

// Mtodo assign()
location.assign("http://www.ejemplo.com");
// Equivalente a location.href = http://www.ejemplo.com

// Mtodo replace()
location.replace("http://www.ejemplo.com");
// Similar a assign(), salvo que se borra la pgina actual del array history del
navegador

// Mtodo reload()
location.reload(true);
/* Recarga la pgina. Si el argumento es true, se carga la pgina desde el
servidor.
Si es false, se carga desde la cache del navegador */


Primero assign
<html>

<head>
<title>Ejemplo de Operadores logios</title>

<script type="text/javascript">
location.assign("http://www.google.com");


</script>
</head>

<body>
</body>

</html>

Segundo replace

<html>

<head>
<title>Ejemplo replace</title>

<script type="text/javascript">
location.replace("http://www.hotmail.com");


</script>
</head>

<body>
</body>

</html>



Tercero reload

<html>

<head>
<title>Ejemplo de reload</title>

<script type="text/javascript">


location.reload(false);


</script>
</head>

<body>
</body>

</html>


5.5 El objeto navigator
Este objeto permite obtener datos del navegador que est visualizando un
documento. Mediante sus propiedades podremos saber el tipo de navegador,
su versin, bajo qu sistema operativo trabaja, etc. Su sintaxis es la siguiente:

navigator.propiedad
Veamos a continuacin sus propiedades:
appCodeName Devuelve el nombre codificado dado al navegador.

apneme Nombre del navegador.

appVersion Facilita la versin del navegador.

BrowserLanguag el idioma del navegador.

CookieEnabled Informa si el navegador tiene activadas las cookies

CpuClass Facilita el tipo de CPU del sistema


Language idioma del mismo.

Platform Plataforma donde est ejecutndose.

SysternLanguage Devuelve el idioma del sistema.

UserAgent Encabezado enviado como parte del protocolo HTTP.

UserLanguage Devuelve el idioma actual.


Las propiedades del objeto navigator son de lectura, es decir, no podrn
modificar o asignar valor a ninguna de ellas.
Este objeto dispone adems de dos mtodos:
taintEnabled () Devuelve false y se incluye en Internet Explorer por
compatibilidad con Netscape.
javaEnabled () Devuelve true si el intrprete de lava est activado.

Ejemplo:
<-html->
<-head->
<-title->LEjemplo del objeto navigator<-/title->
<-/head->
<-body->
<-script language="JavaScript"->
Msg=("Navegador;" +navigator.appName + "\n" + "Codigo:" +
navigator.appCodeName);
msg1= ("\n" + "Version:" + navigator.appVersion + "\n" + "Idioma:" +
navigator.browserLanguage);
msg2= ("\n" + "Sistema:" + navigator.platform + "\n" + "CPU:" +
navigator.cpuClass);
Alert (msg+msg1+msg2+msg3);
<-/script->
<-body->
<-/body->
<-/html->;





5.6 El Objeto Screen

El objeto screen se utiliza para obtener informacin sobre la pantalla del
usuario. Uno de los datos ms importantes que proporciona el objeto screen es
la resolucin del monitor en el que se estn visualizando las pginas.

El objeto screen suele contar con las siguientes propiedades
availHeight: Especfica la altura de la pantalla (en pxeles) que pueden
utilizar las ventanas
availWidth: La anchura de la pantalla (en pxeles) disponibles para
utilizar con las ventanas.
colorDepth: El nmero de bit utilizado para representar colores por
pantalla.
height: La altura de la pantalla de pxeles.
width: La anchura de la pantalla en pxeles.

Las propiedades del objeto screen se utilizan por ejemplo para determinar
cmo y cuanto se puede redimensionar una ventana y para colocar una
ventana centrada en la pantalla del usuario.

El siguiente ejemplo redimensiona una nueva ventana al tamao mximo
posible segn la pantalla del usuario:

<html>
<head>
<title>Abriendo y cerrando ventanas con Javascript</title>
<script>
<!--
var nuevaVentana;

function doble( x ) {
return 2*x;
}

function nueva() {
nuevaVentana=nuevaVentana=window.open("", "segundaPag",
"toolbar=yes,location=no,menubar=yes,resizable=yes,"+
"width=30,height=30" );

/*nuevaVentana.window.moveTo(0, 0);
nuevaVentana.window.resizeTo(screen.availWidth,
screen.availHeight); */

nuevaVentana.document.write("<html><head><title>"+
"Ventana creada con el objeto Window</title></head>\n");
nuevaVentana.document.write("<body><form>\n");
nuevaVentana.document.write("<input type='button' "+
"value='Cerrar' onClick='window.close();'>\n");
nuevaVentana.document.write("</form>\n");


nuevaVentana.document.write("</body></html>\n");
nuevaVentana.document.close();
}
// -->
</script>
<body>
<form>
<input type="button" value="Abrir" onClick="nueva();"><br>
</form>
</body>
</html>