Vamos a ver ahora los distintos métodos que tiene el objeto window. Muchos de estos métodos habrá que verlos por separado porque son muy útiles y aun no los hemos utilizado, ahora vamos a listarlos y ya veremos algunos ejemplos.

alert(texto)

Presenta una ventana de alerta donde se puede leer el texto que recibe por parámetro

back()

Ir una página atrás en el historial de páginas visitadas. Funciona como el botón de volver de la barra de herramientas. (Javascript 1.2)

blur()

Quitar el foco de la ventana actual. (Javascript 1.1)

captureEvents(eventos)

Captura los eventos que se indiquen por parámetro (Javascript 1.2).

clearInterval()

Elimina la ejecución de sentencias asociadas a un intervalo indicadas con el método setInterval().(Javascript 1.2)

clearTimeout()

Elimina la ejecución de sentencias asociadas a un tiempo de espera indicadas con el método setTimeout().

close()

Cierra la ventana. (Javascript 1.1)

confirm(texto)

Muestra una ventana de confirmación y permite aceptar o rechazar.

find()

Muestra una ventanita de búsqueda. (Javascript 1.2 para Netscape)

focus()

Coloca el foco de la aplicación en la ventana. (Javascript 1.1)

forward()

Ir una página adelante en el historial de páginas visitadas. Como si pulsásemos el botón de adelante del navegador. (Javascript 1.2)

home()

Ir a la página de inicio que haya configurada en el explorador. (Javascript 1.2)

moveBy(pixelsX, pixelsY)

Mueve la ventana del navegador los pixels que se indican por parámetro hacia la derecha y abajo. (Javascript 1.2)

moveTo(pixelsX, pixelsY)

Mueve la ventana del navegador a la posición indicada en las coordenadas que recibe por parámetro. (Javascript 1.2)

open()

Abre una ventana secundaria del navegador. Se puede aprender a utilizarla en el reportaje de cómo abrir ventanas secundarias.

print()

Como si pulsásemos el botón de imprimir del navegador. (Javascript 1.2)

prompt(pregunta,inicializacion_de_la_respuesta)

Muestra una caja de diálogo para pedir un dato. Devuelve el dato que se ha escrito.

releaseEvents(eventos)

Deja de capturar eventos del tipo que se indique por parámetro. (Javascript 1.2)

resizeBy(pixelsAncho,pixelsAlto)

Redimensiona el tamaño de la ventana, añadiendo a su tamaño actual los valores indicados en los parámetros. El primero para la altura y el segundo para la anchura. Admite valores negativos si se desea reducir la ventana. (Javascript 1.2)

resizeTo(pixelsAncho,pixelsAlto)

Redimensiona la ventana del navegador para que ocupe el espacio en pixels que se indica por parámetro (Javascript 1.2)

routeEvent()

Enruta un evento por la jerarquía de eventos. (Javascript 1.2)

scroll(pixelsX,pixelsY)

Hace un scroll de la ventana hacia la coordenada indicada por parámetro. Este método está desaconsejado, pues ahora se debería utilizar scrollTo()(Javascript 1.1)

scrollBy(pixelsX,pixelsY)

Hace un scroll del contenido de la ventana relativo a la posición actual. (Javascript 1.2)

scrollTo(pixelsX,pixelsY)

Hace un scroll de la ventana a la posición indicada por el parámetro. Este método se tiene que utilizar en lugar de scroll. (Javascript 1.2)

setInterval()

Define un script para que sea ejecutado indefinidamente en cada intervalo de tiempo. (Javascript 1.2)

setTimeout(sentencia,milisegundos)

Define un script para que sea ejecutado una vez después de un tiempo de espera determinado.

stop()

Como pulsar el botón de stop de la ventana del navegador. (Javascript 1.2)

Para ilustrar un poco mejor el funcionamiento de alguno de estos métodos -los más extraños-, hemos creado una página web que los utiliza. El código de la página se muestra a continuación.

<form> 
<input type="button" value="Ventana de búsqueda (Solo Netscape)" onClick="window.find()"> 
<br> 
<br> 
<input type="button" value="Mover la ventana 10 derecha,10 abajo" onClick="moveBy(10, 10)"> 
<br> 
<br> 
<input type="button" value="Mover la ventana al punto (100,10)" onClick="moveTo(100, 10)"> 
<br> 
<br> 
<input type="button" value="Imprimir esta página" onClick="print()"> 
<br> 
<br> 
<input type="button" value="Aumenta la ventana 10 ancho,10 largo" onClick="resizeBy(10, 10)"> 
<br> 
<br> 
<input type="button" value="Fija el tamaño de la ventana en 400 x 200" onClick="resizeTo(400, 200)"> 
<br> 
<br> 
<input type="button" value="Scroll arriba del todo" onClick="scroll(0,0)"> 
<br> 
<br> 
<input type="button" value="Scroll arriba 10 pixels" onClick="scrollBy(0,-10)"> 
</form>

Estos ejemplos son muy simples, aunque poco prácticos. Únicamente se trata de una serie de botones que, al pulsarlos, llaman a otros tantos métodos del objeto window. En el atributo onclick de la etiqueta del botón se indican las sentencias Javascript que queremos que se ejecuten cuando se pulsa sobre dicho botón.

En el capítulo siguiente veremos otros ejemplos realizados con métodos del objeto window de Javascript, un poco más detallados.

Ejemplos de métodos de window

Ahora vamos a realizar algún ejemplo de utilización de los métodos de la ventana (objeto window). Nos vamos a centrar en los ejemplos que sirven para sacar cajas de diálogo, que son muy útiles y nos permtirán hacer más adelante otros ejercicios donde el usuario pueda realizar entrada de datos o mostrar feedback al usuario al realizar acciones en la página.

Caja de alerta

Podemos usar el método window.alert() para sacar un texto en una ventanita con un botón de aceptar. Recibe el texto por parámetro.

window.alert("Este es el texto que sale")

Como el objeto window se sobreentiende podemos escribirlo así.

alert("Este es el texto que sale")

Saca una ventana como la que se puede ver en esta imagen.

Caja de confirmación

El método window.confirm() muestra una caja de diálogo con un texto indicado por parámetro y un botón de aceptar y otro de rechazar. Dependiendo del botón que se pulsa devuelve un true (si se pulsa aceptar) o un false (si se pulsa rechazar).

<script> 
var respuesta = confirm("Aceptame o rechazame") 
alert ("Has pulsado: " + respuesta) 
</script>

Este script muestra una caja de diálogo confirm y luego muestra en otra caja de diálogo alert el contenido de la variable que devolvió la caja de diálogo.

El aspecto de una caja confirm lo podemos ver en la siguiente imagen:

La verdad es que estas cajas de diálogo no son las más bonitas y tampoco las recomendaríamos mucho para aplicaciones web donde nos preocupe especialmente dar una buena experiencia de usuario. Si queremos otros tipos de cajas con diseños más personalizados podemos usar plugins de jQuery o componentes en librerías como React o Lit.

Caja de introducción de un dato

La tercera y última caja de diálogo que nos permite realizar un método de window la generamos con window.confirm(). Muestra una caja de diálogo donde se formula una pregunta y hay un campo de texto para escribir una respuesta. El campo de texto aparece relleno con lo que se escriba en el segundo parámetro del método. También hay un botón de aceptar y otro de cancelar. En caso de pulsar aceptar, el método devuelve el texto que se haya escrito. Si se pulsó cancelar devuelve null.

El ejemplo siguiente sirve para pedir el nombre de la persona que está visitando la página y luego mostrar en la página un saludo personalizado. Utiliza un bucle para repetir la toma de datos siempre que el nombre de la persona sea null (porque pulsó el botón de cancelar) o sea un string vacío (porque no escribió nada).

<script> 
var nombre = null 
while (nombre == null || nombre == "") { 
   	nombre = prompt("Dime tu nombre:","") 
} 
document.write("<h1>Hola " + nombre + "</h1>") 
</script>

Si nos fijamos en la caja prompt veremos que recibe dos parámetros. El segundo era el texto por defecto que sale en la caja como respuesta. Lo hemos dejado como un string vacío para que no salga nada como texto por defecto.

Este es el aspecto de una caja de diálogo prompt como la que hemos usado en este ejemplo.

Hasta aquí los ejemplos de los métodos del objeto window. De todos modos, en el resto del manual tendremos ocasión de ver cómo trabajar con muchas propiedades y métodos de este objeto, ya que es esencial para el control de la ventana y el navegador en general.