Curso de Javascript 1.2

En esta página:


Objeto Window

Es el objeto principal. Define la ventana sobre la que estamos trabajando e incluye los objetos referentes a la barra de tareas, el documento o la secuencia de direcciones de la última sesión. En este capítulo veremos los métodos y propiedades más utilizadas, al menos por mí, dejando el estudio de dichos objetos para sus capítulos correspondientes.

Aún cuando el objeto se llame Window, disponemos siempre de una referencia a él llamada window (recordad que Javascript distingue entre mayúsculas y minúsculas). Será con esa referencia con la que trabajemos. Este hecho será común a todos los objetos del DOM.

Por último, indicar que en Javascript, se supone que todas las propiedades y métodos que llamamos sin utilizar ninguna referencia, en realidad se hacen utilizando utilizando esa referencia window. Así, por ejemplo, cuando ejecutamos el método alert en realidad lo que estamos haciendo es ejecutar el método window.alert.
[Variable=][window.]open(URL, nombre, propiedades)

Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella desde la ventana donde la creamos deberemos asignarle una variable, si no simplemente invocamos el método: el navegador automáticamente sabrá que pertenece al objeto window. El parámetro URL es una cadena que contendrá la dirección de la ventana que estamos abriendo: si está en blanco, la ventana se abrirá con una página en blanco. El nombre será el que queramos que se utilize como parámetro de un TARGET y las propiedades son una lista separada por comas de algunos de los siguientes elementos:
  • toolbar[=yes|no]
  • location[=yes|no]
  • directories[=yes|no]
  • status[=yes|no]
  • menubar[=yes|no]
  • scrollbars[=yes|no]
  • resizable[=yes|no]
  • width=pixels
  • height=pixels

Debemos tener cuidado con las propiedades que modifiquemos, es posible que algunas combinaciones de los mismos no funcionen en todos los navegadores. El Explorer 4, por ejemplo, da error ante la combinación toolbar=no, directories=no, menubar=no. Veamos un ejemplo:

 ventanas.html 
<HTML>
<HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    function AbrirVentana() {
      MiVentana=open("","MiPropiaVentana",
        "toolbar=no,directories=no,menubar=no,status=yes");
      MiVentana.document.write(
        "<HEAD><TITLE>Una nueva ventana</TITLE></HEAD>");
      MiVentana.document.write("<CENTER><H1><B>" +
        "Esto puede ser lo que tu quieras</B></H1></CENTER>");
    }
  </SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton1" VALUE="Abreme, Sésamo"
  onClick="AbrirVentana()">
</FORM>
</BODY>
</HTML>

Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador con JavaScript. Se llama a la función AbrirVentana desde el evento onClick, como ya sabemos hacer desde el primer ejemplo. Esta función crea la nueva ventana MiVentana y escribe en ella por medio del objeto Document (tranquilos, en el próximo capítulo se estudiará este objeto) todo el código HTML de la página. Aquí debajo podéis probarlo.
close()

Cierra la ventana. A no ser que hayamos acabado de abrirla nosotros mostrará al usuario una ventana de confirmación para que decida él si quiere o no cerrarla. Esto se hace por motivos de seguridad, ya que sería demasiado fácil hacer un script de esos mal intencionados que nos cerrase la ventana del navegador, con lo que fastidia eso.
alert(mensaje)

Muestra una ventana de diálogo con el mensaje especificado.
confirm(mensaje)

Muestra una ventana de diálogo con el mensaje especificado y dos botones. Si el usuario pulsa OK, el método devuelve true. Si, en cambio, pulsa Cancelar, devolverá false.
prompt(mensaje, sugerencia)

Muestra una ventana de diálogo con el mensaje especificado y un campo de texto en el que el usuario pueda teclear, cuyo valor inicial será igual a sugerencia. Si el usuario pulsa OK, el método devuelve la cadena introducida en el campo de texto. Si, por el contrario, pulsa Cancelar, devolverá el valor null. Dado que este valor se considera igual a false, podemos comprabarlo directamente en una condición para ver que ha hecho el usuario.

Por ejemplo, el siguiente código muestra un saludo sólo si el usuario ha pulsado el botón de Aceptar:

 
var contestacion = prompt("¿Cómo te llamas, criatura?", "");
if (contestacion)
  alert("Hola, " + contestacion);
status

Define la cadena de caracteres que saldrá en la barra de estado en un momento dado.
defaultStatus

Define la cadena de caracteres que saldrá por defecto en la barra de estado. Cuando no la especificamos, defaultStatus será igual al último valor que tomó status.
setTimeout("función",tiempo)

Llama a función cuando hayan pasado tiempo milisegundos. Imprescindible a la hora de realizar cualquier rutina que deba ejecutarse a cierta velocidad.

La barra de estado

En muchas páginas web se puede observar cómo sus creadores controlan por completo la barra de estado del navegador. Quizá también hayas visto esos scrolls tan bonitos, y que tan rápido cansan. Ahora voy a explicar cómo se hacen ambas cosas, utilizando los que ya hemos visto del objeto Window.

Para empezar vamos con lo más sencillito: escribir mensajes diversos en la barra de estado. En el capítulo en que hablábamos sobre los objetos predefinidos aparecía el objeto window. En este objeto se definían dos atributos: status y defaultStatus. Para poner un mensaje en la barra de estado nada más cargar el documento y que se mantenga ahí mientras no haya otro más importante (un sustituto del famoso Document: Done del Netscape, vamos) haremos: 

<BODY onLoad=
  "window.defaultStatus='El documento ya se ha leído';return true">

El código lo único que hace es modificar defaultStatus y devolver true como resultado del controlador de eventos. Por alguna misteriosa razón es obligatorio hacer esto cuando modificas algo de la barra de estado. No me preguntéis por qué, al parecer no es más que una convención.

Ahora veremos cómo se puede definir el valor de la barra de estado cuando el ratón pasa por encima de un elemento <A>:

 
<A HREF="MiPagina.html" onMouseOver=
  "window.status='Vente a mi pásgina';return true">

¿Fácil, no? Bueno, ahora vamos a ver cómo se hacen scrolls, que es mas chulo todavía.

 scrolls.html 
<HTML>
<HEAD>
  <TITLE>Ejemplo</TITLE> 
  <SCRIPT LANGUAGE="JavaScript">
    var texto="   Aquí está el mensaje que espero " +
      "observes y leas con suma atención   ";
    var longitud=texto.length;
    function scroll() {
      texto=texto.substring(1,longitud-1)+texto.charAt(0);
      window.status = texto;
      setTimeout("scroll()",150);
      }
  </SCRIPT>
</HEAD>
<BODY onLoad="scroll();return true;">
Esta es la mejor pásgina del mundo conocido.
</BODY>
</HTML>

Como podéis ver, la cosa no es ni más larga ni más compleja que los ejemplos anteriores. Simplemente escribe el texto en la barra de estado y luego coge el caracter más a la izquierda del mismo y lo pone a la derecha, para después volver a escribirlo. La única pega que tiene es cómo demonios hago para que la función se llame cada cierto tiempo predeterminado para ir desplazando el texto a una velocidad constante. Y la respuesta esta en el método setTimeout.

Marcos (o frames)

Uno de los problemas más frecuentes a los que se enfrenta un programador de Javascript es el manejo de marcos. Es decir, ¿cómo accedo yo al código o a objetos como Window o Document de otros marcos? Javascript propone una manera bastante sencilla de hacerlo.

Javascript considera el documento de declaración de marcos (es decir, aquel en el que escribimos las etiquetas FRAME y FRAMESET) como un objeto Window normal y corriente. Permite acceder a los marcos que hemos declarado en él por medio del vector frames. Es decir, si en nuestro documento estuviera la siguiente línea:

 
<FRAME NAME="principal" SRC="MiPagina.html">

Podríamos acceder a su objeto Window por medio de la referencia window.frames["principal"].

A su vez, desde el documento "hijo", es decir, desde el documento que está encerrado en un marco, podemos acceder al padre por medio de la referencia parent. También podemos acceder al documento que esté arriba del todo en esta jerarquía por medio de top. Por ejemplo:

 
window == window.top

Esta igualdad comprobará si nuestro documento está en la ventana principal o en un marco. Comprueba si la ventana en la que está (window) es igual a la ventana principal (window.top). Mediante esta sencilla comprobación podemos crear fácilmente (toda vez que conozcamos el manejo del objeto Location), rutinas que aseguren que nuestra ventana es la principal, o que recarguen nuestra estructura de marcos si algún usuario pretende acceder a un marco específico, etc..