JavaScript 8

[Indice]

El objeto window

Es el objeto básico, y representa en sí mismo al propio navegador. Al ser el elemento principal del modelo de objetos, para referirse a sus propiedades, métodos o eventos, no es necesario referenciarlo específicamente. Como puedes ver en el esquema de objetos, hay cuatro sub-objetos que pueden considerarse como sinónimos del objeto window: frames, top, self y parent que suelen utilizarse en lugar de window. Por ejemplo, es lo mismo window.close() que self.close(). En JavaScript un frame es también una ventana (window), pero con la particularidad de que está contenida dentro de otra ventana (es decir, el objeto window. En realidad todo está dentro de window). top hace referencia a la posición más alta en la lista de ventanas abiertas, es decir, la primera de todas. parent se refiere a una ventana que contiene un elemento frameset. Los cuatro, además, son considerados propiedades del objeto window. Si... esto es algo complicado. Este objeto, como todos, tiene métodos, propiedades y eventos. Veamos los más usuales:

MÉTODOS

open('url', 'name', ['features'] ) Permite abrir una nueva ventana en la que se está ejecutando una nueva instancia del navegador (o simple ventana sin una nueva instancia, depende del navegador de que se trate). Opcionalmente, también permite definir las características que tendrá la nueva ventana, como son qué página mostrará, el nombre de la ventana y el aspecto que ofrecerá el navegador. En el siguiente ejemplo se captura el evento onClick del botón de un formulario para crear una nueva ventana:


<HTML>
<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>

<FORM NAME="Formulario1">
    <INPUT TYPE="Button" NAME="Boton1" VALUE="Abrir" 
   onClick="window.open('http://sestud.uv.es/manual.esp/', 'Prueba', 
         'top=100, left=100, width=300, height=300, location=no, status=yes, ' +
         'toolbar=no, menubar=no, scrollbars=no, resizable=no')">
</FORM>

</BODY>
</HTML>

Y después de pulsar el botón "Abrir" del formulario, obtendremos una nueva ventana con esta apariencia:

Fíjate en las dos últimas líneas, las que corresponden al parámetro "features":


   onClick="window.open('http://sestud.uv.es/manual.esp/', 'Prueba', 
         'top=100, left=100, width=300, height=300, location=no, status=yes,' +
         'toolbar=no, menubar=no, scrollbars=no, resizable=no')">

Como puedes ver, estan concatenadas por el signo +. En efecto, esto es javaScript, y no se pueden truncar líneas ni dejar espacios innecesarios entre valores. Los valores de estos parámetros, además de con yes/no, se pueden escribir con 0/1.
Por ejemplo: scrollbars=0. Por defecto, todos los valores son yes. El nombre de las ventanas creadas no pueden contener espacios en blanco ni caracteres distintos de letras y/o números. Se admite el signo de subrayado ( _ ) pero no el guión ( - )

close() Cierra una ventana. Por ejemplo:


<HTML>
<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>

<FORM NAME="Formulario2">
    <INPUT TYPE="Button" NAME="Boton2" VALUE="Cerrar" 
   onClick="prueba.close()">
</FORM>

</BODY>
</HTML>

Este método no funciona igual en todos los navegadores. Si escribes una página con el ejemplo anterior y éste juntos, al pulsar el botón "Abrir" se abre una ventana llamada "prueba", y al pulsar el botón "Cerrar" se cerrará la ventana "prueba", permaneciendo el navegador abierto con la página inicial con los dos botones. Esto funciona correctamente con los navegadores Opera, Netscape y Mozilla, pero falla con el IE. Esto se debe a que los tres primeros navegadores, aunque se abran disferentes ventanas, solamente mantienen una instancia de programa ejecutándose en el sistema, pero el IE ejecuta una nueva instancia de programa con cada ventana, lo que impide que la primera conozca el nombre de las otras ventanas que hay abiertas. Para cerrar una ventana con el IE hay que escribir:

onClick="window.close()">

Lo que provocará el cierre de la ventana donde estan los dos botones, pero permanecerá abierta la ventana "prueba" que era la que se pretendía cerrar. Para conseguir lo mismo que los otros navegadores, con el IE hay que esribir un complicado script en VBScript.

alert('mensaje') Muestra un mensaje de alerta que no ofrece respuesta alternativa del usuario, sino solamente darse por enterado. Por ejemplo:


<HTML>
<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>
<BODY>

<FORM NAME="Formulario">
    <INPUT TYPE="Button" NAME="Boton" VALUE="Prueba" 
   onClick="alert('Esto es una prueba')">
</FORM>

</BODY>
</HTML>

Y después de pulsar el botón "Prueba" del formulario, obtendremos el mensaje:

confirm('mensaje') Muestra un cuadro de diálogo con dos botones que devuelven un valor booleano cada uno (true o false) dependiendo del botón pulsado por el usuario. Por ejemplo:


<HTML>
<HEAD>
<TITLE>Prueba de mensaje</TITLE>
</HEAD>
<BODY>

<FORM NAME="Formulario1">
    <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
         onClick="this.form.Campo1.value=confirm('¿Quieres continuar?')">>

    <INPUT TYPE="Text" NAME="Campo1">
</FORM>

</BODY>
</HTML>

Después de pulsar el botón "Prueba" del formulario tendremos esto:

Y después de pulsar el botón "Aceptar" del cuadro de diálogo tendremos esto:

Fíjate en que, en este caso, el valor devuelto es "Verdadero" en lugar de "true". Para capturar los valores booleanos no se deben utilizar las frases que aparecen aquí, que han sido convertidas, sino que se debe evaluar directamente el valor booleano devuelto por el objeto, sin conversiones que dependan de la lengua utilizada por el navegador o configuraciones personales. Así:


       if confirm('Quieres continuar?') {
           this.form.Campo1.value='Ha pulsado Aceptar'}
          else {
           this.form.Campo1.value='Ha pulsado Cancelar'}

prompt('mensaje', ['propuesta']) Muestra un cuadro de diálogo con dos botones y un campo de texto que, opcionalmente, puede tener una propuesta predefinida. Su funcionamiento es muy parecido al método confirm(). Sea por ejemplo:


<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
</HEAD>
<BODY>

<FORM NAME="Formulario1">
    <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
         onClick="this.form.Campo1.value=prompt('Escribir un valor', '')">>

    <INPUT TYPE="Text" NAME="Campo1">
</FORM>

</BODY>
</HTML>

Después de pulsar el botón "Prueba" del formulario tendremos esto:

En el ejemplo, después de escribir un texto cualquiera y pulsar el botón "Aceptar", lo escrito será recibido por Campo1, pero si se pulsa Cancelar, a diferencia del método confirm() que devolvería false, lo que se recibe es null

setTimeout('instrucciones', espera) Evalua y ejecuta el código JavaScript contenido en 'instrucciones' después de transcurrido el tiempo, en milisegundos, indicado por espera. La evaluación de las instrucciones solamente la hará una vez. Sea por ejemplo:


<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
   alert('Esto es una prueba')
}
</SCRIPT>
</HEAD>
<BODY>

<FORM NAME="Formulario1">
    <INPUT TYPE="Button" NAME="Boton1" VALUE="Prueba"
         onClick="setTimeout('mensaje()', 2000)">
</FORM>

</BODY>
</HTML>

Después de pulsar el botón "Prueba" del formulario, y transcurridos dos segundos, obtendremos:

clearTimeout(identificador) Después de haber utilizado el método setTimeout() anterior, JavaScript mantiene memorizada la evaluación que realizó del parámetro 'instrucciones'. Si en algun punto del programa es necesario repetir esa evaluación en lugar de utilizar la ya realizada, es preciso inicializarla previamente. Para ello se utiliza clearTimeout(identificador). Para poder hacerlo, es necesario que el método setTimeout() haya sido invocado mediante un identificador. Así, y refiriéndonos al ejemplo anterior:

identificador=setTimeout('mensaje()', 2000)">

Y para inicializar la evaluación y poder realizarla de nuevo:

clearTimeout(identificador)

Evidentemente en este ejemplo no tiene sentido inicializar nada, ya que se trata de un mensaje fijo, pero este método es imprescindible si las instrucciones ejecutadas por setTimeout() son expresiones numéricas variables o contadores de tiempo.

elemento.focus() Fija el enfoque en un elemento de los contenidos en la ventana o en la propia ventana. Habitualmente el enfoque se fija en los objetos creados con las instrucciones HTML, como los formularios y todos sus sub-objetos (botones, listas, etc.). Hay que tener presente que una ventana que está en primer plano puede no tener el enfoque, aunque lo normal es que lo tenga. Excepto en el objeto window, generalmente el enfoque se fija en un objeto cuando éste es tocado con el puntero del ratón (tocado, no pasado por encima) o bien al tabular desde el teclado. El objeto window puede recibir el enfoque automáticamente nada más ser abierto, sin necesidad de pulsación del ratón. Un objeto puede tener el enfoque y no parecerlo visualmente, por ejemplo los distintos frames de una página, y en la que cada uno de ellos tiene el rango de window. El método contrario de focus() es blur()

eval() scroll() toString()

Estos son los tres métodos comunes de todos los objetos de javaScript, y ya se describieron en ese apartado.

moveBy(x,y) moveTo(x,y) Estos dos métodos sirven para mover una ventana, previamente abierta, un número determinado de píxels hasta una determinada posición. Por ejemplo:


<HTML>
<HEAD>
<TITLE>Ventanas en movimiento</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Mover()
{
	Ventana.moveBy(5,5);
	i++;
	if (i<20) 
		setTimeout('Mover()',100);
	else
		Ventana.close();
}
</SCRIPT>
</HEAD>
<BODY>

 <script LANGUAGE="JavaScript">
	var dimensiones="left=100,top=100,width=100,height=100";
        var i=0;
	Ventana = window.open("","",dimensiones);
	Ventana.document.write("Ventanas en movimiento");
	Ventana.moveTo(400,100);
	Mover();
 </script>

</BODY>
</HTML>

EVENTOS

Mientras estas navegando por el ciberespacio, en la ventana de tu navegador van ocurriendo ciertos sucesos o eventos que pueden ser capturados. Por ejemplo, cuando el navegador carga una página se está produciendo un evento, cuando carga la siguiente se producen dos: uno al descargar la antigua y otro al cargar la nueva, etc. Cada objeto tiene sus propios eventos. Para poder capturar un evento es necesario un manejador de eventos. El objeto window tiene los siguientes manejadores de eventos:

onLoad Como su nombre indica, se produce cuando el navegador carga una página. Por ejemplo:


<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
   document.write('Prueba de evento onLoad')
}
</SCRIPT>
</HEAD>
<BODY onLoad="mensaje()">

</BODY>
</HTML>

Y este sería el resultado:

Prueba de evento OnLoad

onUnload Funciona justo al contrario que el anterior: se activa cuando el navegador descarga la página actual, por ejemplo al intentar ir a otra. En ese momento se produce el evento. El siguiente ejemplo abre una ventana predeterminada siempre que se abandona la página activa:


<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
   window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onUnload="abrir()">

</BODY>
</HTML>

onFocus Este manejador de eventos controla el evento focus que se produce cuando un objeto window, frame o form recibe el enfoque como consecuencia de una pulsación del ratón o por ser invocado el método correspondiente. Por ejemplo:


<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
   window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onFocus="abrir()">

</BODY>
</HTML>

onBlur Es el inverso del anterior. Este manejador de eventos controla el evento blur que se produce cuando un objeto window, frame o form pierde el enfoque. En el siguiente ejemplo la función abrir() será invocada al abandonar la página:


<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function abrir() {
   window.open('http://sestud.uv.es/manual.esp/')
}
</SCRIPT>
</HEAD>
<BODY onBlur="abrir()">

</BODY>
</HTML>

onError Este manejador controla el evento error. El error puede producirse mientras el navegador está cargando una página. Durante el proceso de carga el navegador verifica la sintaxis del código JavaScript y carga las imágenes que indique el código HTML. Un error de sintaxis HTML no producirá un error de carga. Tampoco es un error capturable el que un enlace a otra página falle, ya que eso es un error de navegador (o de navegación). El siguiente ejemplo muestra un mensaje al cargar una página que intenta mostrar un gráfico que no existe:


<HTML>
<HEAD>
<TITLE>Prueba de entrada</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mensaje() {
  mensaje('Se ha producido un error de carga')
}
</SCRIPT>
</HEAD>
<BODY>
   <IMG SRC="noexiste.gif" onError="mensaje()">
</BODY>
</HTML>

No hay que confundir estos mensajes controlados con los que produce la consola javaScript del navegador cuando detecta un error en los programas que se estan cargando.

PROPIEDADES

name Es un string que contiene el nombre de la ventana. El nombre de la ventana se establece en el momento de abrirla mediante el método window.open('url', 'name') y una vez abierta no puede cambiarse. Recuerda que por defecto las ventanas abiertas directamente, como por ejemplo ésta que estás leyendo, no tienen nombre definido.

status String que aparece en la linea de estado del navegador (al pie de la ventana, a la izquierda). Suele utilizarse para mostrar mensajes informativos, normalmente de errores de proceso. Por ejemplo:


<HTML>
<HEAD>
<TITLE>Prueba de status</TITLE>
</HEAD>
<BODY onLoad="window.status='Esto es una prueba de status'">
   
</BODY>
</HTML>

Se obtiene:

Esto funciona con todos los navegadores, excepto Firefox.

defaulStatus Funciona igual que el anterior, pero es el valor por defecto de la línea de estado inmediatamente después de cargar la página.


<HTML>
<HEAD>
<TITLE>Prueba de status</TITLE>
</HEAD>
<BODY onLoad="window.defaultStatus='Esto es una prueba de status por defecto'">
   
</BODY>
</HTML>

parent

self

top

opener

closed

length