Curso JavaScript: el objeto Window y sus propiedades

Curso de JavaScript (y jQuery)

Cada vez que se carga una página en el navegador, el intérprete de Javascript crea automáticamente una serie de objetos que pueden ser directamente usados en nuestros programas. De entre los distintos objetos generados automáticamente destacan los siguientes:

Window	es el objeto principal del cual «cuelgan» los demás como si fueran propiedades suyas. Se crea un objeto de este tipo para cada ventana que pueda ser lanzada desde una página Web
Navigator	contiene información acerca del navegador, tal como nombre, versión, tipos MIME soportados por el cliente y plugs-in instalados
Location	con información acerca del URL que estemos visualizando
History	historial en el que se guardan los URL ya visitados
Document	es el contenedor de todos los objetos que se hayan insertado en la página web: enlaces, formularios, imágenes o marcos

El siguiente cuadro muestra la jerarquía de objetos creados por el navegador al cargar una página Web:

Hemos de tener en cuenta, que el navegador va creando los objetos en el momento que los lee, y que la página la lee desde arriba hacia abajo. Por ello, no debemos usar objetos antes de su creación. Solo al definir funciones en la cabecera podemos romper esta regla, ya que la definición de las funciones no implica su uso en el momento que se leen, sino que se llaman después desde el cuerpo de la página. Por tanto, en la definición de las funciones sí podremos hacer referencia a objetos aún no creados (que son todos los de document) aunque no podremos usar tales funciones hasta que dichos objetos no estén creados.

En este capítulo estudiamos también la forma en que desde Javascript podemos crear, modificar y eliminar cookies en el ordenador del usuario.

Las cookies nos van a permitir almacenar información textual en el ordenador del cliente; esta información puede ser recuperada por nuestra(s) página(s) web de modo que podemos realizar un pequeño seguimiento del uso de nuestra web por parte de ese usuario, o facilitarle un poco la vida recordando ciertos datos (como nombre de usuario, dirección, fechas, etc) de modo que no tenga que insertarlos cada vez que utiliza nuestra web.

Los objetivos de este tema son:

Conocer el objeto window y alguno de los métodos y propiedades asociados al mismo
Utilizar el mecanismo de generación automática de eventos de Javascript
Detectar, entre otra información, en qué navegador se está visualizando una página web mediante el objeto Navigator
Modificar la URL que se está visualizando en el navegador mediante el objeto Location.
Simular el funcionamiento de los botones «Atrás» y «Adelante» del navegador mediante el objeto History.
Utilizar cookies para almacenar y recuperar información del ordenador del usuario que ve nuestra página web.

3.1 El objeto window

Como se ha dicho, el objeto window es el más importante. A partir de él se pueden crear nuevos objetos window que serán nuevas ventanas ejecutando el navegador. Tales ventanas se pueden controlar desde la ventana padre. Además permite cerrar ventanas, actúa sobre los marcos, puede sacar mensajes (de error u otro tipo), confirmación y entrada de datos, y como se ha dicho, mantiene una matriz por cada tipo de elemento que puede haber en un documento, formularios, enlaces, imágenes y marcos.

3.1.1. Apertura de una ventana

Hay que tener en cuenta que los actuales navegadores tienen bastante restringida la apertura de ventanas desde Javascript por culpa de haber abusado para la publicidad mediante pop-ups, por lo que puede ser necesario tener que modificar la configuración del navegador para permitir las ventanas emergentes.

Abrir una ventana a través de Javascript es tan simple como pasar a una instrucción una dirección URL para que la localice y la cargue:

nuevaVentana = window.open( "dirección URL");

1	nuevaVentana = window.open( "dirección URL");

Es muy conveniente asignar la nueva ventana a una variable (en este caso a nuevaVentana) para poder operar posteriormente sobre ella. Sin embargo ese no es el nombre como tal de la ventana, por lo que si en un enlace ponemos:

<a href="direccion.html" target="nuevaVentana" data-mce-href="direccion.html">Pulsa</a>

1	<a href="direccion.html" target="nuevaVentana" data-mce-href="direccion.html">Pulsa</a>

no funcionará.

En realidad, son varios los parámetros que se pasan a una ventana al crearla:

variable = window.open("dirección URL", "nombre de la Ventana","parámetros de apertura" );

1	variable = window.open("dirección URL", "nombre de la Ventana","parámetros de apertura" );

donde:

dirección URL es la página que se va a cargar en la nueva ventana.
nombre de la ventana es el nombre que se podrá utilizar posteriormente en los target de los enlaces.
parámetros de apertura es una cadena que contiene los valores para ciertos atributos de la ventana, que son los siguientes: toolbar,location,directories,status,menubar, scrollbars,resizable.

Cada uno de estos atributos puede tomar los valores YES o NO, o bien, 1 ó 0, respectivamente.

Además, podemos darle la anchura y altura en pixels mediante los atributos : width,height.

Para ponerlos todos en la misma cadena se pone el atributo seguido del signo de igual y el valor que tiene. Los atributos se separan entre sí mediante comas. Por ejemplo:

"toolbar=0,location=1,directories=0,resizable=0,width=200,height=100"

1	"toolbar=0,location=1,directories=0,resizable=0,width=200,height=100"

Hay que tener cuidado de ponerlos en ese orden y de no dejar espacios entre ellos.

Por ejemplo, abramos una ventana con barra de herramientas, sin posibilidad de escribir una dirección y que no sea redimensionable. En ella vamos a cargar la página «www.vrivas.es» y la vamos a llamar «segundaPag»; la altura será de 200 pixeles.

nuevaVentana = window.open("http://www.vrivas.es/", "segundaPag", "toolbar=yes,location=no,resizable=no,height=200" );

1	nuevaVentana = window.open("http://www.vrivas.es/", "segundaPag", "toolbar=yes,location=no,resizable=no,height=200" );

3.1.2. Cerrar ventanas

Para cerrar una ventana se utiliza el método close() de las mismas:

variable_de_ventana.close()

1	variable_de_ventana.close()

Si la ventana a cerrar es la propia, entonces tendremos que usar:

window.close()

1	window.close()

He aquí un pequeño ejemplo que pemite abrir una ventana y escribir en ella.

<!-- Fichero: ej.3.1.1.html -->

<html> 
<head> 
<title>Abriendo y cerrando ventanas con Javascript</title>
<meta charset="UTF-8">

<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.document.write("<HTML><HEAD><TITLE>"+ 
           "Sin Título</TITLE></HEAD>"); 
  nuevaVentana.document.write("<BODY><form>"); 
  nuevaVentana.document.write("<input type='button' "+ 
           "value='Cerrar' onClick='window.close();'>"); 
  nuevaVentana.document.write("</form>"); 
  nuevaVentana.document.write("</BODY></HTML>"); 
  nuevaVentana.document.close(); 
} 
</script> 
</head>
<body> 
<form> 
  <input type="button" VALUE="Abrir" onClick="nueva();"><br> 
</form> 
</body> 
</html>

<html>

<head>

<title>Abriendo y cerrando ventanas con Javascript</title>

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.document.write("<HTML><HEAD><TITLE>"+

"Sin Título</TITLE></HEAD>");

nuevaVentana.document.write("<BODY><form>");

nuevaVentana.document.write("<input type='button' "+

"value='Cerrar' onClick='window.close();'>");

nuevaVentana.document.write("</form>");

nuevaVentana.document.write("</BODY></HTML>");

nuevaVentana.document.close();

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

3.2. Mensajes de alerta, confirmaciones y entradas de datos.

Aunque para cada una de estas tareas se utiliza un método distinto, las veremos juntas ya que son muy similares.

Los mensajes de alerta aparecen con el método:

 alert( mensaje )

1	alert( mensaje )

El parámetro mensaje es la cadena que queremos que se visualice. Se puede usar para sacar mensajes de error, de ayuda, alertar sobre ciertos eventos, etc.

<!-- Fichero: ej.3.2.1.html -->

<hmtl> 
<head> 
<title>Ejemplo de uso de alert</title>
<meta charset="UTF-8">

<script> 
 alert("Bienvenido a mi página web!"); 
</script> 

</head> 

<body> 
<p>Soy una página web</p>
</body> 
</html>

<hmtl>

<head>

<title>Ejemplo de uso de alert</title>

alert("Bienvenido a mi página web!");

</script>

</head>

<body>

<p>Soy una página web</p>

</body>

</html>

Para obtener una confirmación sobre alguna acción a realizar por el usurario podemos utilizar el método :

 confirm( mensaje );

1	confirm( mensaje );

Este método devuelve un valor lógico true o false por lo que puede usarse en una sentencia de asignación o también en una expresión lógica.

<!-- Fichero: ej.3.2.2.html -->
<hmtl> 
<head> 
<title>Ejemplo de uso de confirm</title>
<meta charset="UTF-8">

<script> 
if ( confirm("Pulsa OK si eres mayor de edad")) { 
    alert( "Ya tienes edad para poder conducir un coche!" ); 
} else { 
    alert("Aún tendrás que conformarte con conducir tu motocicleta!" ); 
} 
</script> 

</head> 
<body> 
<p>Hola</p> 
</body> 
</html>

<hmtl>

<head>

<title>Ejemplo de uso de confirm</title>

if ( confirm("Pulsa OK si eres mayor de edad")) {

alert( "Ya tienes edad para poder conducir un coche!" );

} else {

alert("Aún tendrás que conformarte con conducir tu motocicleta!" );

}

</script>

</head>

<body>

</body>

</html>

Por último, la adquisición de datos desde teclado se hace a través del método

 prompt( mensaje, valor_por_defecto)

1	prompt( mensaje, valor_por_defecto)

El parámetro mensaje es obligatorio, y aunque el valor_por_defecto es opcional es recomendable ponerlo siempre, aunque sea como la cadena vacía. He aquí un ejemplo de página que pide el nombre al usuario:

<!-- Fichero: ej.3.2.3.html -->

<html> 
<head> 
<title>Ejemplo de uso de prompt</title> 

<script> 
  var cadena=prompt( "Por favor, escribe tu nombre", "" ); 
  document.write ("Esta pagina está optimizada para "+cadena ); 
</script> 
<meta charset="UTF-8">
</head> 
<body> 
<p>Hola, 

<script> 
  document.write(cadena+"</p>"); 
</script> 

</body> 
</html>

<html>

<head>

<title>Ejemplo de uso de prompt</title>

var cadena=prompt( "Por favor, escribe tu nombre", "" );

document.write ("Esta pagina está optimizada para "+cadena );

</script>

</head>

<body>

<p>Hola,

document.write(cadena+"</p>");

</script>

</body>

</html>

3.3. Temporizadores.

Los temporizadores son sin duda uno de los elementos a los que más juego podemos sacar. Su uso se consigue gracias a dos métodos: setTimeout y clearTimeout

Video: al final del tema 4, tienes un video sobre los eventos en JavaScript donde en uno de los ejemplos que describimos se utilizan estos temporizadores.

// Para lanzar el temporizador:
var v_temporizador = setTimeout( instrucciones, tiempo, parametros ); 

// Para detenerlo en caso de que sea necesario
clearTimeout( v_temporizador );

// Para lanzar el temporizador:

var v_temporizador = setTimeout( instrucciones, tiempo, parametros );

// Para detenerlo en caso de que sea necesario

clearTimeout( v_temporizador );

Ambos métodos, setTimeout y clearTimeout, pertenecen al objeto window.

En realidad, el encargado de lanzar el temporizador y ejecutar alguna acción es setTimeout, por lo que usando sólo este ya podremos generar eventos automáticos. No obstante, si antes de que termine el temporizador (y por tanto salte el evento) deseamos anularlo podremos hacerlo con clearTimeout

El parámetro instrucciones con que se llama al método setTimeout indica la(s) acción(es) que se ha(n) de ejecutar cuando se cumpla el tiempo prefijado. La segunda es dicho tiempo expresado en milisegundos. En caso de que dichas acciones a realizar sean la llamada a una función, en el tercer parámetro se le puede pasar el conjunto de argumentos que necesitará (en forma de cadena). No obstante, los argumentos se pueden pasar directamente en la propia llamada a la función, por lo que solo son obligatorios al llamar a setTimeout los dos primeros parámetros.

Ha de tenerse en cuenta que el temporizador sólo se ejecuta una vez, salvo que una de las sentencias a ejecutar sea otro setTimeout. Es decir, para provocar un evento periódicamente hemos de hacer una llamada a setTimeout de forma periódica o bien utilizar dos métodos muy similares a los vistos:

var v_temporizador = setInterval( instrucciones, tiempo, parametros );
clearInterval( v_temporizador );

1 2	var v_temporizador = setInterval( instrucciones, tiempo, parametros ); clearInterval( v_temporizador );

Mientras setTimeout genera un único evento, setInterval genera un evento cada tiempo milisegundos sin necesidad de poner otro setInterval dentro de las instrucciones a ejecutar.

A fin de cuentas, se puede conseguir hacer lo mismo con setTimeout que con setInterval, sólo que el primero es más trabajoso aunque va a funcionar con navegadores antiguos (3.x y anteriores), mientras que setInterval es más cómodo pero sólo funciona con los navegadores 4.x en adelante.

He aquí dos ejemplos del uso de setTimeout; en ellos la única diferencia es la llamada al temporizador dentro de la propia función de respuesta al evento creado por el temporizador. En el primer caso sólo se saca un mensaje de alerta, en el segundo se saca un mensaje cada 5 segundos (hasta 3 como máximo porque si no sería imposible parar la cadena de mensajes).

<!-- Fichero: ej.3.3.1.html -->

<html> 
<head> 
<meta charset="UTF-8">
<title>Primer ejemplo de uso de temporizadores</title> 

<script> 
function mensaje() { 
  setTimeout("alert('Este mensaje ha salido a los 5 segundos');",5000); 
} 
</script> 

</head> 
<body onLoad="mensaje();"> 
<p>Hola</p> 
</body> 
</html>

<html>

<head>

<title>Primer ejemplo de uso de temporizadores</title>

function mensaje() {

setTimeout("alert('Este mensaje ha salido a los 5 segundos');",5000);

}

</script>

</head>

</body>

</html>

He aquí el segundo ejemplo:

<!-- Fichero: ej.3.3.2.html -->

<html> 
<head> 
<title>Segundo ejemplo de uso de temporizadores</title> 
<meta charset="UTF-8">

<script> 
var numMensaje=0; 
function mensaje() { 
  if( numMensaje<3 ) { 
    setTimeout("alert('mensaje numero '+numMensaje);mensaje();",5000); 
    numMensaje++; 
  } 
} 
</script> 

</head> 
<body onLoad="mensaje();"> 
<p>Hola</p> 
</body> 
</html>

<html>

<head>

<title>Segundo ejemplo de uso de temporizadores</title>

var numMensaje=0;

function mensaje() {

if( numMensaje<3 ) {

setTimeout("alert('mensaje numero '+numMensaje);mensaje();",5000);

numMensaje++;

}

</script>

</head>

</body>

</html>

Así pues, cada temporizador que se establezca con setTimeout se ejecuta una sola vez.

Como ya se ha indicado, existe una forma de parar la cuenta atrás de un temporizador, esto es, de anularlo. Esta forma consiste en usar el método clearTimeout (o bien clearInterval si el temporizador se lanzó son setInterval). A este método ha de pasársele un identificador conteniendo la variable en la que se almacenó temporizador al lanzarlo el temporizador.

De esta forma podríamos poner:

... 

var tempor; 
function activa() { 
  ... 
  tempor=setTimeout("alert('Hola');",1000); 
  ... 
} 

... 
... 

function desactiva() { 
  ... 
  clearTimeout( Tempor ); 
  ... 
} 

...

...

var tempor;

function activa() {

...

tempor=setTimeout("alert('Hola');",1000);

...

}

...

function desactiva() {

...

clearTimeout( Tempor );

...

}

...

Como se ve, si estos métodos son usados en la misma ventana en los que se van a visualizar los resultados, no es necesario poner que pertenecen al objeto window.

El siguiente ejemplo muestra cómo se puede mostrar la hora del sistema actualizada con los métodos setTimeout y clearTimeout:

<!-- Fichero: ej.3.3.3.html --> 

<html> 
<head> 
<meta charset="UTF-8">
<title>Ejemplo mostrar hora</title> 

<script> 
// La función hora toma la hora del sistema. Es actualizada cada segundo
function hora() { 
  var h=new Date(); 
  document.f1.hora.value=((h.getHours()<10)?"0":"")+h.getHours()+":"; 
  document.f1.hora.value+=((h.getMinutes()<10)?"0":"")+h.getMinutes()+":"; 
  document.f1.hora.value+=((h.getSeconds()<10)?"0":"")+h.getSeconds(); 
  setTimeout( "hora();", 1000 ); 
} 
</script> 

</head> 
<body> 
  <form name="f1"> 
    Hora: <input type="text" NAME="hora" size="8"><br> 
  </form> 

  <script>hora()</script> 
</body> 
</html>

<html>

<head>

<title>Ejemplo mostrar hora</title>

// La función hora toma la hora del sistema. Es actualizada cada segundo

function hora() {

var h=new Date();

document.f1.hora.value=((h.getHours()<10)?"0":"")+h.getHours()+":";

document.f1.hora.value+=((h.getMinutes()<10)?"0":"")+h.getMinutes()+":";

document.f1.hora.value+=((h.getSeconds()<10)?"0":"")+h.getSeconds();

setTimeout( "hora();", 1000 );

}

</script>

</head>

<body>

Hora: <input type="text" NAME="hora" size="8"><br>

</form>

</body>

</html>

3.4. El objeto navigator.

Este objeto guarda información sobre el navegador que se está utilizando.

Como ejempo, para el ordenador con el que creamos este curso, navigator contenía la siguiente información:

appCodeName: Mozilla
appName: Netscape
appVersion: 5.0 (X11; es-ES)
language: es-ES
mimeTypes: [object MimeTypeArray]
Tipo MIME numero 0
description VLC Multimedia Plugin
enabledPlugin [object Plugin]
suffixes
type application/x-vlc-plugin
Tipo MIME numero 1
description VLC Multimedia Plugin
enabledPlugin [object Plugin]
suffixes
type application/vlc
platform: Linux x86_64
oscpu: Linux x86_64
vendor: Ubuntu
vendorSub: 10.04
product: Gecko
productSub: 20110422
plugins: [object PluginArray]
description: The Totem 2.30.2 plugin handles video and audio streams.
filename: libtotem-cone-plugin.so
version:
name: VLC Multimedia Plugin (compatible Totem 2.30.2)
item: function item() { [native code] }
namedItem: function namedItem() { [native code] }
securityPolicy:
userAgent: Mozilla/5.0 (X11; U; Linux x86_64; es-ES; rv:1.9.2.17) Gecko/20110422 Ubuntu/10.04 (lucid) Firefox/3.6.17
cookieEnabled: true
onLine: true
buildID: xxxxxxxxxxxxx
javaEnabled: function javaEnabled() { [native code] }
taintEnabled: function taintEnabled() { [native code] }
preference: function preference() { [native code] }
geolocation: [object GeoGeolocation]
registerContentHandler: function registerContentHandler() { [native code] }
registerProtocolHandler: function registerProtocolHandler() { [native code] }
mozIsLocallyAvailable: function mozIsLocallyAvailable() { [native code] }

No vamos a entrar en el detalle de cada una de las propiedades, pero su propio nombre es un buen indicador del uso que de ellas se puede hacer.

He aquí el código en Javascript que nos muestra todos estos datos:

<!-- Fichero: ej.3.4.1.html -->

<html> 
<head> 
<title>El objeto Navigator</title> 
<meta charset="UTF-8">
</head> 

<body> 
<script> 
document.write("<H4>Valores de las propiedades del objeto Navigator</H4>\n"); 
document.write("<UL>\n"); 
for ( var prop in navigator ) { 
  document.write("<LI>"+prop+" "+navigator[prop]+"\n"); 
  if ( prop=="plugins" ) { 
    for ( var i=0; i<navigator.plugins.length; i++ ) { 
      document.write("Plug-in numero "+i+"<br><UL>\n"); 
      for ( var prop in navigator.plugins[i] ) { 
        document.write("<LI>"+prop+" "+navigator.plugins[i][prop]+"</LI>\n"); 
      } 
      document.write("</UL><LI>\n"); 
    } 
  } // if prop==plugins 

  if ( prop=="mimeTypes" ) { 
    document.writeln( "<P>" ); 
    for ( var i=0; i<navigator.mimeTypes.length; i++ ) { 
      document.write("Tipo MIME numero "+i+"<br><ul>\n"); 
      for ( var prop in navigator.mimeTypes[i] ) { 
        document.write("<LI>"+prop+" "+navigator.mimeTypes[i][prop]+"</LI>\n"); 
      } 
      document.write("</UL>\n"); 
    } 
  } // if prop==mimeTypes 

  document.write("</UL>\n"); 
} // for prop in navigator 
</script> 

</body> 
</html>

<html>

<head>

<title>El objeto Navigator</title>

</head>

<body>

document.write("<H4>Valores de las propiedades del objeto Navigator</H4>\n");

document.write("<UL>\n");

for ( var prop in navigator ) {

document.write("<LI>"+prop+" "+navigator[prop]+"\n");

if ( prop=="plugins" ) {

for ( var i=0; i<navigator.plugins.length; i++ ) {

document.write("Plug-in numero "+i+"<br><UL>\n");

for ( var prop in navigator.plugins[i] ) {

document.write("<LI>"+prop+" "+navigator.plugins[i][prop]+"</LI>\n");

}

document.write("</UL><LI>\n");

}

} // if prop==plugins

if ( prop=="mimeTypes" ) {

document.writeln( "<P>" );

for ( var i=0; i<navigator.mimeTypes.length; i++ ) {

document.write("Tipo MIME numero "+i+"<br><ul>\n");

for ( var prop in navigator.mimeTypes[i] ) {

document.write("<LI>"+prop+" "+navigator.mimeTypes[i][prop]+"</LI>\n");

}

document.write("</UL>\n");

}

} // if prop==mimeTypes

document.write("</UL>\n");

} // for prop in navigator

</script>

</body>

</html>

3.5. El objeto history.

Es bien sabido que el visualizador guarda un historial de los sitios que se han visitado en cada sesión, de modo que podemos utilizar los botones de anterior y siguiente para movernos por las páginas.

Todas las direcciones que se han visitado se guardan en este historial en forma de matriz. Desde Javascript, podemos utilizar este objeto para crear nuestros propios botones de retroceso y avance dentro de la páginas. Sin embargo, no podemos acceder a los nombres de las direcciones URL ya que son información privilegiada y sólo las puede saber el usuario.

Las características más importantes del objeto history son propiedades como next y previous (almacena el URL posterior y anterior, respectivamente). Y métodos como back, forward y go, que permiten cargar en el navegador las páginas que están en el historial del mismo.

<!-- Fichero: ej.3.5.1.html -->

<html> 
<head> 
<title>Ejemplos en Javascript con el objeto history</title>
<meta charset="UTF-8">
<body> 
<form> 
  <input type="button" value="Atras" onClick="history.back();"> 
  <input type="button" value="2 Atras" onClick="history.go(-2);"> 
</form> 
</body> 
</html>

<html>

<head>

<title>Ejemplos en Javascript con el objeto history</title>

<body>

<form>

</form>

</body>

</html>

3.6. El objeto location.

Contiene información acerca de las propiedades de la página que hemos cargado, en particular de su nombre. Así mantiene por separado las propiedades protocol, host, port, pathname, hash y search. Además de href (todas las anteriores concatenadas) y hostname (el nombre completo del host).

A continuación se muestran todas las propiedades de location y los valores que toman en una página ejemplo:

 https://www.digitallearning.es:80/modalidades-de-formacion.html?topic=cursos
host: www.digitallearning.es
hostname: www.digitallearning.es
href: https://www.digitallearning.es:80/modalidades-de-formacion.html?topic=cursos
pathname: https://www.digitallearning.es:80/modalidades-de-formacion.html
port: 80
protocol: http:
search: ?topic=cursos
reload: function reload() { [native code] }
replace: function replace() { [native code] }
assign: function assign() { [native code] }

Lo más interesante del objeto location es que si le asignamos un valor a su propiedad href conseguiremos que el navegador cargue la nueva página indicada en el valor que hemos asignado.

Por ejemplo, el siguiente trozo de código haría que tras 10 segundos, el navegador cargara una nueva página, en concreto saltará a http://www.nueva_direccion.com/inicio.html:

<!-- Fichero: ej.3.6.1.html -->

<html> 
<head> 
<meta charset="UTF-8">
<title>Ejemplos setTimeout</title> 
</head> 
 <body> 
 <p>Nuestra página ha cambiado.</p>

 <script> 
  setTimeout( "location='http://carga.otra.pagina/inicio.html';",10000 ); 
 </script> 

 <body> 
<html>

<html>

<head>

<title>Ejemplos setTimeout</title>

</head>

<body>

<p>Nuestra página ha cambiado.</p>

setTimeout( "location='http://carga.otra.pagina/inicio.html';",10000 );

</script>

<body>

<html>

El objeto location posee dos métodos: reload, que vuelve a traerse la página actual, y replace que trae una página nueva que se añade al historial sustituyendo a la actual.

El objeto location es muy útil para pasar información a nuestro programa cuando llamamos a la página que lo contiene. Así, si hacemos una llamada a la URL:

http://www.misitio.es/miPagina.html?nombre=Victor&apellidos=Rivas

podremos acceder, gracias a location.search a la cadena ?nombre=Victor&apellidos=Rivas y utilizar estos valores dentro de nuestro programa en Javascript.

3.7. El objeto document.

Por cada página cargada en una ventana hay un objeto document contenedor de todos los elementos visibles de la página. Estos elementos se tratan con más detalle en tema siguiente. Aquí nos vamos a encargar de hablar de las propiedades y métodos específicos de este objeto.

Propiedades color

En primer lugar destacaremos las propiedades relativas al color. Son las siguientes:

alinkColor	color para las anclas o enlaces al propio documento
bgColor	color de fondo
fgColor	color de primer plano
linkColor	color de los enlaces
vlinkColor	color para enlaces visitados

Ha de tenerse cuidado con poner correctamente las mayúsculas y minúsculas.

Matrices del objeto document

A continuación, se listan las matrices que contiene el objeto document:

anchors	Con los enlaces internos de la página
applets	Con los applets que incluya la página
embeds	Con los elementos incrustados manejados por los plugins
forms	Con los formularios
images	Con las imagenes
links	Con todos los enlaces externos

Métodos

En cuanto a los métodos, destacamos:

close	Cierra el documento de una ventana
open	Abre el documento de una ventana
write	Escribe en el documento de una ventana
writeln	como write, pero incluyendo un salto de línea al final (aunque no incluye el <BR>)

Eventos

En cuanto a los eventos más característicos a los que responde document, hay que reseñar que se han de poner en el tag <BODY>, y que son:

load	se lanza en el instante mismo en que acaba de cargarse la página
unload	se activa cuando se especifica un nuevo URL para cargar una nueva página

En el siguiente tema vamos a ver más detenidamente cada uno de los objetos almacenados en document.

<!-- Fichero: ej.3.7.1.html -->

<html> 
<head> 
<meta charset="UTF-8">
<title>Ejemplos de eventos para document</TITLE> 
</head> 

<body onLoad="nombre=prompt('','')" onUnLoad="alert( 'Adiós '+ nombre )"> 
<p>Página web</p>
</body> 
</html>

<html>

<head>

<title>Ejemplos de eventos para document</TITLE>

</head>

<p>Página web</p>

</body>

</html>