Anterior
Uso de Javascript
Objetos de una página Siguiente
Obj. de un documento

En esta sección:
  1. Objetos creados automáticamente.
  2. El objeto window.
  3. El objeto navigator.
  4. El objeto frame.
  5. Referenciar una ventana.
  6. El objeto history.
  7. El objeto location.
  8. El objeto document.


Como en cualquier lenguaje orientado o basado en objetos, cada objeto es propietario de una serie de variables de instancia y de unos métodos. En JavaScript, las variables de instancia se denominan propiedades, mientras que los métodos no cambian de nombre aunque a menudo se les llama simplemente funciones.

Las propiedades son las que hacen que cada objeto tenga sus propias características. Cada tipo de objeto tiene unas ciertas propiedades que no tienen los demás, aunque hay propiedades que tienen todos los objetos, como por ejemplo la propiedad name. Y dos objetos del mismo tipo se diferenciarán en el valor que tengan sus propiedades, siendo éstas las mismas para ambos. Por ejemplo, un objeto de tipo form tendrá propiedades como name o action, y a la vez tendrá métodos como submit o reset.

Además de propiedades y métodos, los objetos son capaces de provocar eventos. Para cada objeto que hay en una página HTML existen asociados una serie de eventos a los que, además, puede responder. Gran parte de la programación en JavaScript consiste en crear código de respuesta a estos eventos. En dicho código se asignan valores a las propiedades de otros objetos o se modifican mediante los métodos del objeto.


1. Objetos creados automáticamente Indice 

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 usados al programar en JavaScript. De entre los distintos objetos generados automáticamente destacan los siguientes:

Las propiedades del objeto document están en función de los objetos que hayamos insertado en la página. Cada objeto que incluyamos en la página será una propiedad del objeto document, pero a su vez estará compuesto de otros objetos que serán propiedades de él.

Cada vez que se desea acceder a una propiedad o un método de un objeto, hemos de detallar cuales son sus padres mediante el uso de puntos. Así, un la propiedad value de un botón de un formulario se llamaría en realidad window.document.form.button.value. Aunque el padre, window, se puede quitar si es la misma ventana en la que está el formulario.

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.


2. El objeto window. Indice

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, 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.

2.1. Apertura de una ventana

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");

Es necesario 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 parámetros que se pasan a una ventana al crearla:

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

donde:

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 "kal-el.ugr.es" y la vamos a llamar "segundaPag"; la altura será de 200 pixeles.

nuevaVentana=window.open("http://kal-el.ugr.es", "segundaPag", "toolbar=yes, location=no, resizable=no, height=200" );

2.2. Cerrar ventanas

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

nuevaVentana.close()

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

window.close(), o simplemente , close();

Ha de tenerse cuidado al cerrar una ventana dentro de un elemento de un formulario ya que si es la propia ventana la que queremos cerrar habremos de especificar window.close(); y no solo close(); esto es así porque dentro de los formularios el objeto por defecto es document no window, por ello, close() solamente cerraría el documento, no la ventana.

He aquí un pequeño ejemplo.

EJEMPLO 3.2.2.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 Título</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>
      

2.3. Mensajes de error, 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 error aparecen con el método

alert( mensaje )

El parámetro mensaje es la cadena que queremos que se visualice. En realidad se utiliza para cualquier tipo de mensaje, no solo de error, sino también de ayuda o de información sobre el autor.

EJEMPLO 3.2.3.1:
      <HTML>
      <HEAD>
      <TITLE>Ejemplo de uso de alert</TITLE>
      <SCRIPT>
      alert("Que pasa en tu casa, coleguita?");
      </SCRIPT>
      </HEAD>
      <BODY>
      Hola!
      </BODY>
      </HTML>
       
      

Para una confirmación de alguna opción, habremos de utilizar el método

confirm( mensaje );

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

EJEMPLO 3.2.3.2:
      <HTML>
      <HEAD>
      <TITLE>Ejemplo de uso de confirm</TITLE>
      <SCRIPT>
      if ( confirm("Pulsa OK si eres un tío machote")) {
         document.write ("Nos tomamos unas birras, colega??");
      } else {
        document.write("Podíamos ir al cine, si quieres." );
      }
      </SCRIPT>
      </HEAD>
      <BODY>
      Hola
      </BODY>
      </HTML>
      

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

prompt( mensaje, valor_por_defecto)

El parámetro mensaje es obligatorio, pero el valor_por_defecto es opcional. He aquí un ejemplo:

EJEMPLO 3.2.3.3:
      <HTML>
      <HEAD>
      <TITLE>Ejemplo de uso de prompt</TITLE>
      <SCRIPT>
      var cadena=prompt( "Escribe tu nombre");
      document.write ("Esta pagina está optimizada para "+cadena );
      </SCRIPT>
      </HEAD>
      <BODY>
      Hola, 
      <SCRIPT>
      document.write(cadena+"<p>");
      </SCRIPT>
      </BODY>
      </HTML>
      

2.4. Temporizadores.

Los temporizadores son sin duda de los elementos más sorprendentes que podremos utilizar. Su uso se consigue gracias a los métodos:

setTimeout( instrucciones, tiempo, parametros );

y

clearTimeout( variable_de_temporizador );

Ambos métodos pertenecen al objeto window.

El parámetro instrucciones con que se llama al método setTimeout() inidica 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 nbecesitará (en forma de cadena). No osbatnte, dichos 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 solo 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ódicamente (esto se ha mejorado desde la versión 1.2 de Javascript mediante la introducción de los métodos setInterval y clearInterval).

He aquí dos ejemplos, 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 solo se saca un mensaje de alerta, en el segundo se saca un mensaje cada 5 segundos (hast 3 como máximo).

EJEMPLO 3.2.4.1:
      <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>
      </HTML>
      

He aquí el segundo ejemplo:

EJEMPLO 3.2.4.2:
      <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.

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. A este método ha de pasársele un identificador conteniendo un objeto temporizador. Este objeto se crea al lanzar el temporizador por lo que asignaremos a una variable el resultado de lanzar el temporizador con setTimeout. De esta forma podríamos poner:

...
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.

Un ejemplo de lo que se puede hacer con los métodos setTimeout() y clearTimeout() lo encontramos en http://kal-el.ugr.es/~victor/java3.html

2.5. Barra de estado

La barra de estado es la que nos informa de la dirección de un enlace cuando pasamos por encima de ella. Esa es su misión por defecto, pero nosotros podemos cambiársela si así lo deseamos.

Básicamente solo necesitamos dos propiedades del objeto window, que son status y defaultStatus.

A defaultStatus se le asigna una cadena que se visualizará cada vez que el ratón este en una posición en la que no haya un enlace. Por ejemplo:

window.defaultStatus="A ver dónde pones el ratón.";

Se suele poner al principio de la página de modo que esté activo desde que la misma se carga.

El funcionamiento de status es similar, pero se suele ubicar en el evento onMouseOver de los enlaces, de la siguiente forma:

<A HREF="http://kal-el.ugr.es/" onMouseOver="window.status='Pedaso de página la que hay ahí'; return true;">Ven a esta página </A>

Es imprescindible poner return true; tras modificar este valor.

EJEMPLO 3.2.5.1:
      <HTML>
      <HEAD>
      <TITLE>Cambiando la barra de Status</TITLE>
      <SCRIPT>
      window.defaultStatus="A ver dónde vas a pinchar...";
      </SCRIPT>
      </HEAD>
      <BODY onLoad="mensaje();">
      Por defecto pone que <EM>a ver dónde vas a pinchar</EM>... pero pasa por 
      encima de <A HREF="http://kal-el.ugr.es" 
      onMouseOver="window.status='Hombre, parece que te decides'; return true;">
      este enlace</A>...
      </BODY>
      </HTML>
      


3. El objeto navigator. Indice

Guarda información sobre el navegador que se está utilizando. En el ordenador en el que se ejecuta ahora mismo el Netscape 3.01 para Windows 95, dicha información es la siguiente:

Como se puede observar, las dos últimas propiedades (plugins y mimeTypes) son sendas matrices en las que se nos informa de los plugins que están conectados y de los tipos MIME que están disponibles.

He aquí un pequeño programa que nos muestra todos estos datos:

EJEMPLO 3.3.1:
      <HTML>
      <HEAD>
      <TITLE>El objeto Navigator</TITLE>
      </HEAD>
      <BODY>
      <SCRIPT>
      <!--
      document.write("<H1>Valores de las propiedades del objeto Navigator</H1>\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>
      


4. El objeto frame. Indice

Frame es un objeto que a pesar de pertenecer a window posee muchas de sus propiedades y métodos. De hecho, la única diferencia entre un marco y una ventana es su visualización (dentro de una sola ventana en el primer caso, o en una ventana distinta en el segundo). Por lo demás, un marco posee la mismas funcionalidades y características que una ventana salvo la función close().

Para llamarlo habremos de decir el nombre de la ventana que lo contiene, y a continuación el nombre del marco, o bien utilizar la matriz de marcos que se crea al cargar una página cuyo nombre es frames. De esta forma podemos modificar las propiedades de un marco desde otro, esto es, podemos desde cualquier marco modificar formularios de otro marco que pertenezca a su misma página, o utilizar los valores de las variables de otro marco para hacer cualquier cosa.

He aquí una pequeña muestra. Tendremos una página que carga dos marcos y cada uno de ellos puede interactuar con el otro.

EJEMPLO 3.4.1:

Página principal:

  <HTML>
  <TITLE>Ejemplo de manejo de Frames en JavaScript</TITLE>
  <FRAMESET ROWS="50%,50%">
  <FRAME SRC="frame1.html" NAME="frame1">
  <FRAME SRC="frame2.html" NAME="frame2">
  </FRAMESET>
  <HEAD>
  <BODY>
  </BODY>
  </HTML>
	

Página con el Frame 1

  <HTML>
  <HEAD>
  <TITLE>Frame numero 1</TITLE>
  <BODY>
  <FORM NAME="form1">
    <INPUT TYPE="text" NAME="Nombre" SIZE="40">
    <INPUT TYPE="button" VALUE="Escibe tu nombre y pulsa" 
        onClick="parent.frame2.document.form1.nombre.value=document.form1.Nombre.value;">
  </FORM>
  </BODY>
  </HTML>
	

Página con el Frame 2

  <HTML>
  <HEAD>
  <TITLE>Frame numero 2</TITLE>
  <BODY>
  <FORM NAME="form1">
    <INPUT TYPE="text" NAME="nombre" SIZE="40">
  </FORM>
  </BODY>
  </HTML>
	


5. Referenciar una ventana Indice 

Para nombrar o hacer referencia a un objeto window se pueden utilizar varias técnicas:


6. El objeto history. Indice

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 esta matriz, de modo que podemos utilizarla 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 solo las puede saber el usuario.

Propiedades como next y previous que almacenan, respectivamente, el URL posterior y anterior. Y métodos como back, forward y go.

EJEMPLO 3.4.1:

Página principal:

      <HTML>
      <HEAD>
      <TITLE>Ejemplos en JavaScript</TITLE>
      <BODY>
      <FORM>
        <input type="button" value="Atras" onClick="history.back();">
        <input type="button" value="2 Atras" onClick="history.go(-2);">
      </FORM>
      </BODY>
      </HTML>
      


7. El objeto location. Indice

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). Cuando se desea cambiar la URL de una ventana hemos de especificar, especialmente en eventos, que se trata de la propiedad window.location ya que location por separado en un evento indica la propiedad document.location que no es exactamente igual y que además ha sido reemplazada por document.URL.

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.


8. El objeto document. Indice

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 los capítulos sucesivos. Aquí nos vamos a encargar de hablar de las propiedades y métodos específicos de este objeto.

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

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

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

Por último, otra información contenida en el objeto document es:

En cuanto a los métodos, destacamos:

Hay que reseñar que los eventos a los que responde se han de poner en el tag <BODY>, y que son load (cuando acaba de cargarse la página) y unload (cuando se especifícia un nuevo URL para cargar una nueva página).

En el siguiente capítulo vamos a ver más detenidamente cada uno de estos objetos.