Está en la página 1de 10

Curso online

Programacin Web con Javascript

Tema 3. Objeto Window y


sus propiedades

Autor: Vctor M. Rivas Santos


(EPSJ- Universidad de Jan)
Versin 1.0
Fecha: 28/09/2012

Programacin Web con Javascript

http://www.digitallearning.es

Autor: Vctor M. Rivas

NDICE DE CONTENIDOS
Introduccin y objetivos
3.1 El objeto window
3.1.1 Apertura de una ventana
3.1.2 Cerrar ventanas
3.1.3 Mensajes de alerta, confirmaciones, entradas de datos
3.1.4 Temporizadores
3.2 El objeto navigator
3.3 El objeto history
3.4 El objeto location
3.5 El objeto document

Programacin Web con Javascript

http://www.digitallearning.es

Autor: Vctor M. Rivas

3. El objeto Window
Introduccin y objetivos
Cada vez que se carga una pgina en el navegador, el intrprete de Javascript crea automticamente una serie
de objetos que pueden ser directamente usados en nuestros programas. De entre los distintos objetos
generados automticamente destacan los siguientes:

Window: es el objeto principal del cual "cuelgan" los dems como si fueran propiedades suyas.
Se crea un objeto de este tipo para cada ventana que pueda ser lanzada desde una pgina
Web.
Navigator: contiene informacin acerca del navegador, tal como nombre, versin, tipos MIME
soportados por el cliente y plugs-in instalados.
Location: con informacin 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 pgina web:
enlaces, formularios, imgenes o marcos.
El siguiente cuadro muestra la jerarqua de objetos creados por el navegador al cargar una pgina Web:

Hemos de tener en cuenta, que el navegador va creando los objetos en el momento que los lee, y que la
pgina la lee desde arriba hacia abajo. Por ello, no debemos usar objetos antes de su creacin. Solo al definir
funciones en la cabecera podemos romper esta regla, ya que la definicin de las funciones no implica su uso
en el momento que se leen, sino que se llaman despus desde el cuerpo de la pgina. Por tanto, en la
definicin de las funciones s podremos hacer referencia a objetos an no creados (que son todos los de
document) aunque no podremos usar tales funciones hasta que dichos objetos no estn creados.
Los objetivos de este tema son:

Conocer el objeto window y alguno de los mtodos y propiedades asociados al mismo


Utilizar el mecanismo de generacin automtica de eventos de Javascript
Detectar, entre otra informacin, en qu navegador se est visualizando una pgina 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 "Atrs" y "Adelante" del navegador mediante el
objeto History.

Programacin Web con Javascript

http://www.digitallearning.es

Autor: Vctor M. Rivas

3. El objeto Window
3.1 El objeto window
Como se ha dicho, el objeto window es el ms importante. A partir de l se pueden crear nuevos objetos

window que sern nuevas ventanas ejecutando el navegador. Tales ventanas se pueden controlar desde la
ventana padre. Adems permite cerrar ventanas, acta sobre los marcos, puede sacar mensajes (de error u
otro tipo), confirmacin 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, imgenes 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 configuracin del navegador para permitir las ventanas emergentes.
Abrir una ventana a travs de Javascript es tan simple como pasar a una instruccin una direccin URL para
que la localice y la cargue:
nuevaVentana=window.open( "direccin 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">Pulsa</a>

no funcionar.
En realidad, son varios los parmetros que se pasan a una ventana al crearla:
variable=window.open("direccin URL", "nombre de la Ventana","parmetros de apertura" );

donde:

direccin URL es la pgina 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.
parmetros 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.
Adems, 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"

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 direccin y que
no sea redimensionable. En ella vamos a cargar la pgina "geneura.ugr.es" y la vamos a llamar "segundaPag";
la altura ser de 200 pixeles.
nuevaVentana=window.open("http://www.digitallearning.es", "segundaPag", "toolbar=yes,location=no,resizable=no,height=200" );

Programacin Web con Javascript

http://www.digitallearning.es

Autor: Vctor M. Rivas

3. El objeto Window
3.1 El objeto window
3.1.2. Cerrar ventanas
Para cerrar una ventana se utiliza el mtodo close() de las mismas:
variable_de_ventana.close()

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


window.close()

He aqu un pequeo ejemplo que pemite abrir una ventana y escribir en ella.
Ejemplo 5.1
<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.document.write("<HTML><HEAD><TITLE>"+
"Sin Ttulo</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>

Programacin Web con Javascript

http://www.digitallearning.es

Autor: Vctor M. Rivas

3. El objeto Window
3.1 El objeto window
3.1.3. Mensajes de alerta, confirmaciones y entradas
de datos.
Aunque para cada una de estas tareas se utiliza un mtodo distinto, las veremos juntas ya que son muy
similares.
Los mensajes de alerta aparecen con el mtodo :
alert( mensaje )

El parmetro mensaje es la cadena que queremos que se visualice. Se puede usar para sacar mensajes de
error, de ayuda, alertar sobre ciertos eventos, etc.
Ejemplo 3.2
<HTML>
<HEAD>
<TITLE>Ejemplo de uso de alert</TITLE>
<SCRIPT>
alert("Bienvenido a mi pgina web!");
</SCRIPT>
</HEAD>
<BODY>
Soy una pgina web
</BODY>
</HTML>

Ilustracin Ejemplo 5.2

Para obtener una confirmacin sobre alguna accin a realizar por el usurario podemos utilizar el mtodo :
confirm( mensaje );

Este mtodo devuelve un valor lgico true o false por lo que puede usarse en una sentencia de asignacin o
tambin en una expresin lgica.
Ejemplo 3.3
<HTML>
<HEAD>
<TITLE>Ejemplo de uso de confirm</TITLE>
<SCRIPT>
if ( confirm("Pulsa OK si eres mayor de edad")) {
alert( "Ya tienes edad para poder conducir un coche!" );

Programacin Web con Javascript


} else {

http://www.digitallearning.es

Autor: Vctor M. Rivas

} else {
alert("An tendrs que conformarte con conducir tu motocicleta!" );
}
</SCRIPT>
</HEAD>
<BODY>
Hola
</BODY>
</HTML>

Por ltimo, la adquisicin de datos desde teclado se hace a travs del mtodo
prompt( mensaje, valor_por_defecto)

El parmetro mensaje es obligatorio, y aunque el valor_por_defecto es opcional es recomendable ponerlo


siempre, aunque sea como la cadena vaca. He aqu un ejemplo de pgina que pide el nombre al usuario:
Ejemplo 5.4
<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>
</HEAD>
<BODY>
Hola,
<SCRIPT>
document.write(cadena+"<p>");
</SCRIPT>
</BODY>
</HTML>

Ilustracin Ejemplo 3.4

Programacin Web con Javascript

http://www.digitallearning.es

Autor: Vctor M. Rivas

3. El objeto Window
3.1 El objeto window
3.1.4. Temporizadores.
Los temporizadores son sin duda uno de los elementos a los que ms juego podemos sacer. Su uso se
consigue gracias a dos mtodos: setTimeout y clearTimeout
// Para lanzar el temporizador:
var v_temporizador = setTimeout( instrucciones, tiempo, parametros );
// Para detenerlo en caso de que sea necesario
clearTimeout( v_temporizador );

Ambos mtodos, setTimeout y clearTimeout, pertenecen al objeto window.


En realidad, el encargado de lanzar el temporizador y ejecutar alguna accin es setTimeout, por lo que usando
slo este ya podremos generar eventos automticos. No obstante, si antes de que termine el temporizador (y
por tanto salte el evento) deseamos anularlo podremos hacerlo con clearTimeout
El parmetro instrucciones con que se llama al mtodo setTimeout indica la(s) accin(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 funcin, en el tercer parmetro 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 funcin, por lo que solo son obligatorios al llamar a setTimeout los dos
primeros parmetros.
Ha de tenerse en cuenta que el temporizador slo se ejecuta una vez, salvo que una de las sentencias a
ejecutar sea otro setTimeout. Es decir, para provocar un evento peridicamente hemos de hacer una llamada a

setTimeout de forma peridica o bien utilizar dos mtodos muy similares a los vistos:
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 , slo que el primero
es ms trabajoso aunque va a funcionar con navegadores antiguos (3.x y anteriores), mientras que setInterval
es ms cmodo pero slo 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 funcin de respuesta al evento creado por el temporizador. En el primer caso slo se saca un
mensaje de alerta, en el segundo se saca un mensaje cada 5 segundos (hasta 3 como mximo porque si no
sera imposible parar la cadena de mensajes).

Ejemplo 3.5
<HTML>
<HEAD>
<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();">
Hola
</BODY>

Programacin
</HTML> Web con Javascript

http://www.digitallearning.es

Autor: Vctor M. Rivas

He aqu el segundo ejemplo:


Ejemplo 5.6
<HTML>
<HEAD>
<TITLE>Segundo ejemplo de uso de temporizadores</TITLE>
<SCRIPT>
var numMensaje=0;
function mensaje() {
if( numMensaje<3 ) {
setTimeout("alert('mensaje numero '+numMensaje);mensaje();",5000);
numMensaje++;
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="mensaje();">
Hola
</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 atrs de un temporizador, esto es, de anularlo.
Esta forma consiste en usar el mtodo clearTimeout (o bien clearInterval si el temporizador se lanz son

setInterval ). A este mtodo ha de pasrsele un identificador conteniendo la variable en la que se almacen


temporizador al lanzarlo el temporizador.
De esta forma podramos poner:
...
var tempor;
function activa() {
...
tempor=setTimeout("alert('Hola');",1000);
...
}
...
...
function desactiva() {
...
clearTimeout( Tempor );
...
}
...

Como se ve, si estos mtodos 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 cmo se puede mostrar la hora del sistema actualizada con los mtodos

setTimeout y clearTimeout:
Ejemplo 5.7
<HTML>
<HEAD>
<SCRIPT>
// La funcin 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 );

Programacin Web con Javascript


}

http://www.digitallearning.es

Autor: Vctor M. Rivas

</SCRIPT>
</HEAD>
<BODY>
<FORM name="f1">
Hora: <INPUT TYPE="text" NAME="hora" SIZE="8"><BR>
</FORM>
<SCRIPT>hora()</SCRIPT>
</BODY>
</HTML>

Ilustracin Ejemplo 3.7

Programacin Web con Javascript

http://www.digitallearning.es

Autor: Vctor M. Rivas