14 - BOM

The Browser Object Model

1
Índice
 BOM
 El objeto window
 El objeto navigator
 El objeto screen
 El objeto history
 El objeto location

 Ejercicios

ALBERT BASSONS 2
BOM
• El BOM (Browser Object Model o Modelo de Objetos del
Navegador) permite a JavaScript comunicarse con el
navegador.

• No hay un estándar oficial para el Browser Object Model.

• Los navegadores modernos prácticamente implementan los

mismos métodos y propiedades para la interacción con
JavaScript, pero puede haber diferencias que impliquen que
una aplicación que funciona en un navegador no funcione en
otro.

ALBERT BASSONS 3
BOM
• Los objetos que debemos conocer son:

• El objeto window

• El objeto navigator
• El objeto screen
• El objeto history
• El objeto location

• El objeto window es el principal, los otros cuatro los

encontraremos como propiedades de éste (y también el
document object con toda la estructura del documento).

ALBERT BASSONS 4
El objeto window
• El objeto window está soportado por todos los navegadores, y
representa la ventana del navegador.

El objeto window

ALBERT BASSONS 5
El objeto window
 Todos los objetos globales de JavaScript, funciones y
variables, automáticamente se convierten en miembros del
objeto window.

 Las variables globales son propiedades del objeto window.

 Las funciones globales son métodos del objeto window.

 Incluso el document object del DOM es una propiedad del

objeto window.

ALBERT BASSONS 6
Ejemplo

ALBERT BASSONS 7
El objeto window
 Es decir, que en realidad:

ALBERT BASSONS 8
El objeto window
• En este enlace encontraréis las propiedades y métodos del
objeto window:

http://www.w3schools.com/jsref/obj_window.asp

• Id con cuidado porque no son estándar, con lo que no todo

funcionará en todos los navegadores.

ALBERT BASSONS 9
Propiedades de window
Propiedad Descripción
document Retorna el object document para la ventana actual
(Document object)
history Retorna el history object para la ventana actual
(History object)
location Retorna el location object para la ventana actual
(Location object)
navigator Retorna el navigator object para la ventana actual
(Navigator object)
screen Retorna el screen object para la ventana
actual (Screen object)

ALBERT BASSONS 10
Propiedades de window
Propiedad Descripción
closed Retorna si una ventana fue cerrada o no
defaultStatus Establece o retorna el texto por defecto en la barra de
status
frames Devuelve un array con todos los frames de la ventana
innerHeight Retorna el alto interno del área de contenido de la
ventana
innerWidth Retorna el ancho interno del área de contenido de la
ventana
length Retorna el número de frames de la ventana
name Establece o retorna el nombre de la ventana
opener Devuelve una referencia a la ventana que creó la
ventana actual

ALBERT BASSONS 11
Propiedades de window

Propiedad Descripción
outerHeight Retorna la altura exterior de una ventana, incluyendo
barras de herramientas y estado
outerWidth Retorna la anchura exterior de una ventana
pageXOffset Retorna los píxeles que se ha desplazado
horizontalmente el documento respecto a la esquina
superior izquierda
pageYOffset Retorna los píxeles que se ha desplazado
verticalmente el documento respecto a la esquina
superior izquierda

ALBERT BASSONS 12
Propiedades de window

Propiedad Descripción
parent Retorna la ventana padre de la ventana actual (para
frames)
self Retorna la ventana actual
status Establece o retorna el texto en la barra de estado de
una ventana
top Retorna la ventana de orden superior (para frames)

ALBERT BASSONS 13
Propiedades de window

Propiedad Descripción
screenX Devueve la coordenada X de la ventana relativa a la
pantalla
screenY Devueve la coordenada Y de la ventana relativa a la
pantalla

ALBERT BASSONS 14
Métodos de window

Método Descripción
alert() Muestra un mensaje de alerta con un botón de aceptar
atob() Decodifica una cadena de texto codificada en base-64
blur() Elimina el foco de la ventana
focus() Establece el foco en la ventana
btoa() Codifica una cadena de texto en base-64

ALBERT BASSONS 15
Métodos de window
Método Descripción
moveBy() Mueve la ventana en relación a su posición
moveTo() Mueve la ventana a una determinada posición
open() Abre una ventana del navegador (o una pestaña)
close() Cierra la ventana
print() Imprime el contenido de la ventana actual
prompt() Muestra un cuadro de diálogo que solicita un texto al
usuario, retorna el texto
resizeBy() Redimensiona la ventana relativamente al tamaño
actual
resizeTo() Redimensiona la ventana al tamaño indicado

ALBERT BASSONS 16
Ejemplo

ALBERT BASSONS 17
Ejemplo

ALBERT BASSONS 18
Métodos de window

Método Descripción
scrollBy() Desplaza el contenido un número determinado de píxeles
scrollTo() Desplaza el contenido a las coordenadas indicadas
stop() Detiene el proceso de carga de la ventana actual
confirm() Muestra un cuadro de diálogo con aceptar y cancelar
(retorna un boolean indicando la opción elegida)

ALBERT BASSONS 19
Métodos de window

Método Descripción
clearInterval() Elimina el intervalo de tiempo definido con
setInterval()
clearTimeout() Elimina un timeout establecido con setTimeout()
setInterval() Llama a una función o evalúa una expresión cada
cierto tiempo
setTimeout() Llama a una función o evalúa una expresión al
cumplirse un plazo de tiempo indicado (timeout)

ALBERT BASSONS 20
Ejemplo setInterval

ALBERT BASSONS 21
Ejemplo setTimeout

ALBERT BASSONS 22
Ejemplo

ALBERT BASSONS 23
Ejemplo (1 de 2)

ALBERT BASSONS 24
Ejemplo (2 de 2)

ALBERT BASSONS 25
El objeto navigator
 El objeto navigator contiene información respecto al
navegador en el que se está ejecutando el script.

 En este enlace encontraréis las propiedades y métodos del

objeto navigator:

http://www.w3schools.com/jsref/obj_navigator.asp

ALBERT BASSONS 26
Propiedades de navigator

Propiedad Descripción
appCodeName Devuelve el código del navegador
appName Retorna el nombre del navegador
appVersion Retorna la versión del navegador
cookieEnabled Indica si las cookies están activadas en el navegador

ALBERT BASSONS 27
Ejemplo

ALBERT BASSONS 28
Propiedades de navigator

Propiedad Descripción
language Retorna el lenguaje del navegador
onLine Determina si el navegador está en línea
platform Retorna con qué plataforma fue compilada el
navegador
product Retorna el nombre del motor del navegador
userAgent Retorna las cabeceras user-agent enviadas del
navegador al servidor.

ALBERT BASSONS 29
Métodos de navigator

Método Descripción
javaEnabled() Indica si Java está habilitado o no en el navegador

ALBERT BASSONS 30
El objeto screen
 El objeto screen contiene información respecto a la pantalla
del visitante de nuestra web.

 En este enlace encontraréis las propiedades y métodos del

objeto screen:

http://www.w3schools.com/jsref/obj_screen.asp

ALBERT BASSONS 31
Propiedades de screen
Propiedad Descripción
availHeight Retorna el alto de la pantalla (sin contar la barra de
Windows)
availWidth Retorna el ancho de la pantalla (sin contar la barra de
Windows)
colorDepth Retorna la profundidad de color para mostrar imágenes
height Retorna el alto total de la pantalla
pixelDepth Retorna la profundidad de color en bits por píxel
width Retorna el ancho total de la pantalla

ALBERT BASSONS 32
Ejemplo

ALBERT BASSONS 33
El objeto history
 El objeto history contiene información respecto a las páginas
visitadas por el usuario (en la ventana actual que se esté
utilizando).

 En este enlace encontraréis las propiedades y métodos del

objeto history:

http://www.w3schools.com/jsref/obj_history.asp

ALBERT BASSONS 34
El objeto history

Propiedad Descripción
length Retorna el número de elementos en el historial

Método Descripción
back() Carga la página anterior del historial
forward() Carga la siguiente página del historial
go() Carga una determinada página del historial

ALBERT BASSONS 35
Ejemplo

ALBERT BASSONS 36
El objeto location
 El objeto location contiene información respecto a la URL actual.

 En este enlace encontraréis las propiedades y métodos del objeto

location:

http://www.w3schools.com/jsref/obj_location.asp

ALBERT BASSONS 37
Propiedades de location

Propiedad Descripción
hash Establece o retorna la parte de ancla de una URL
(#xxxxx)
host Establece o retorna el nombre de host y el puerto de una
URL
hostname Establece o retorna el nombre de host de una url
href Establece o retorna la URL completa
origin Retorna el protocolo, nombre de host y número de puerto
de una URL

ALBERT BASSONS 38
Propiedades de location

Propiedad Descripción
pathname Establece o retorna la parte de la ruta en una URL
port Establece o retorna el número de puerto en una URL
protocol Establece o retorna el protocolo en una URL
search Establece o retorna la porción de query en la URL
(?name=pepito)

ALBERT BASSONS 39
Métodos de location

Método Descripción
assign() Carga un nuevo documento
reload() Recarga el documento
replace() Reemplaza el documento actual con otro

ALBERT BASSONS 40
Ejemplo

ALBERT BASSONS 41
Ejercicios
BOM
Ejercicios
HACIENDO PRUEBAS:

 Prueba los ejemplos de estas transparencias y también explora

las diferentes propiedades y métodos de los objetos
mencionados.

 Consulta la documentación tanto de la W3Schools como de la

MDN, realizando tus propias pruebas y experimentos.

ALBERT BASSONS 43
Ejercicios
1. Realiza una página web, con un texto cualquiera, que al verla
en Firefox o Chrome tenga el color de fondo rojo y al verla en
Explorer lo tenga azul.

ALBERT BASSONS 44
Ejercicios
2. Imagina que una sitio poco fiable está mostrando la información de
una de nuestras webs mediante un iframe y atribuyéndose el mérito.

Vamos a hacer un script para evitar que esto suceda, comparando si

la ventana de orden superior (window.top) es la nuestra
(window.self). Si esto no es cierto, entonces nuestra página se
encuentra en un iframe.

Para sacar nuestra página del iframe, debemos hacer que la URL de
la ventana top sea la URL de nuestra ventana: window.top.location =
window.self.location;

Para ve si funciona, crea una segunda página con un iframe e

inserta la primera, ésta debería salir de él.

ALBERT BASSONS 45
Ejercicios

ALBERT BASSONS 46
Ejercicios

3. Crea una web que, al pulsar un botón, muestre en una nueva

ventana toda la información posible sobre las características de
la pantalla y el navegador del usuario que la consulta.

4. Crea una web que abra una ventana a modo de popUp con
propaganda cada 15 segundos. Añade también un botón que al
presionarlo detenga la aparición de dicho popUp.

ALBERT BASSONS 47
Ejercicios
5. Crea una web con un cronómetro y dos botones para ponerlo en
marcha o detenerlo. Cuidado, porque a partir de 60 segundos se
debe indicar el número de minutos y segundos correctamente (y
lo mismo para las horas).

ALBERT BASSONS 48
Ejercicios

6. Crea una página que se recargue sola cada minuto (como por
ejemplo se hace en las páginas con transmisiones deportivas en
directo).

ALBERT BASSONS 49
Ejercicios
7. Crea una web que simule la venta de un artículo por subasta.
Contendrá una imagen y una descripción sobre el artículo, así
como un contador que bajará desde 60 segundos hasta 0 y un
botón de “pujar” (puedes también incluir un input para indicar el
importe de la puja si quieres).

Si se presiona el botón de “pujar” antes de que se agote el

tiempo, se mostrará un mensaje en la web indicando que eres el
máximo pujador. Cuando se acabe el tiempo se desactivará el
botón de pujar y se informará de que has ganado el artículo.

Si se agota el tiempo sin que hayas pujado, se desactiva el

botón de “pujar” y se indica que no has ganado el artículo.

ALBERT BASSONS 50