1. Introducción

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.

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:

El siguiente cuadro muestra la jerarquía de objetos creados por el navegador al cargar una página Web:

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

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 u otro tipo), 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:

Cada uno de estos atributos puede tomar los valores YES o NO, o bien, 1 ó 0, respectivamente.

Además, 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 dirección y que no sea redimensionable. En ella vamos a cargar la página "geneura.ugr.es" y la vamos a llamar "segundaPag"; la altura será de 200 pixeles.

nuevaVentana=window.open("http://geneura.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:

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

<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 alerta, 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 alerta aparecen con el método

alert( mensaje )

El parámetro mensaje es la cadena que queremos que se visualice. Se puede usar para sacar mensajes de error, de ayuda, alertar sobre ciertos eventos, etc.

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

<HTML>
<HEAD>
<TITLE>Ejemplo de uso de confirm</TITLE>
<SCRIPT>
if ( confirm("Pulsa OK si eres un tío machote")) {
    alert("Nos tomamos unas birras, colega??");
} else {
  alert("Podíamos ir al cine, vamos... si tú 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:

<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 dos métodos:

// v_temporizador será la variable en la que se almacene 
// el objeto "temporizador" devuelto por setTimeout
var v_temporizador = setTimeout( instrucciones, tiempo, parametros );
clearTimeout( v_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 necesitará (en forma de cadena). No obstante, los 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ódica.

Esto se ha mejorado en la versión 1.2 de Javascript mediante la introducción de los métodos:

var v_temporizador = setInterval( instrucciones, tiempo, parametros );
clearInterval( v_temporizador );
Mientras setTimeout genera un único evento (salvo que, como se ha dichio, pongamos otro setTimeout dentro de la función de respuesta a dicho 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 hacer lo mismo con setTimeout que con setInterval, solo que el primero es más trabajoso aunque va a funcionar con navegadores antiguos (3.x y anteriores), mientras que setInterval es más cómodo pero solo 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 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 (hasta 3 como máximo).

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

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

EL siguiente ejemplo muestra lo que se puede hacer con los métodos setTimeout() y clearTimeout():

<HTML>
<HEAD>
<SCRIPT>
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 );
}
var h_ini;
var crono;
function crono_start() {
  h_ini=new Date();
  crono_cuenta();
}
function crono_pon() {
  var h_act=new Date();
  milisec=(h_act-h_ini);
  h_crono=Math.floor( milisec/3600000 ) % 24;
  m_crono=Math.floor( milisec/60000 ) % 60;
  s_crono=Math.floor( milisec/1000 ) % 60;
  milisec=milisec%1000;
  h_crono=((h_crono<10)?"0":"")+h_crono;
  m_crono=((m_crono<10)?"0":"")+m_crono;
  s_crono=((s_crono<10)?"0":"")+s_crono;

  milisec=((milisec<100)?"0":"")+((milisec<10)?"0":"")+milisec;
  document.f1.crono.value=h_crono+":"+m_crono+":"+s_crono+"."+milisec;
}
function crono_cuenta() {
  crono_pon();
  crono=setTimeout( "crono_cuenta();",53 );
end;

function crono_stop() {
  clearTimeout( crono );
}
function crono_reset() {
  h_ini=new Date();
  crono_pon();
}
</SCRIPT>
</HEAD>
<BODY>
  <FORM name="f1">

    Hora: <INPUT TYPE="text" NAME="hora" SIZE="8"><BR>
    Crono: <INPUT TYPE="text" NAME="crono" SIZE="12" VALUE="00:00:00.000">
    <INPUT TYPE="button" VALUE="Start" onClick="crono_start();">
    <INPUT TYPE="button" VALUE="Stop" onClick="crono_stop();">
    <INPUT TYPE="button" VALUE="Reset" onClick="crono_reset();">
  </FORM>
  <SCRIPT>hora()</SCRIPT>
</BODY>
</HTML>

Y he aquí el resutado que dicho código produce:

Hora:
Crono:

3. El objeto navigator.

Guarda información sobre el navegador que se está utilizando. Para el ordenador en el que estás viendo ahora mismo estas páginas, navigator contiene la siguiente información: 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í el código en Javascript que nos muestra todos estos datos:

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

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

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

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

6. El objeto history.

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 este historial en forma de matriz. Desde Javascript, podemos utilizar este objeto 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.

Las caracterñisticas más importantes del objeto history son propiedades como next y previous (almacena nel URL posterior y anterior, respectivamente). Y métodos como back, forward y go, que permiten cargar en el navegador las páginas que están en el historial del mismo.

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.

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

A continuación se muestran todas las propiedades de location y los valores que toman en esta página:

Lo más interesante del objeto location es que si le asignamos un valor a su propiedad href conseguiremos que el navegador cargue la nueva página indicada en el valor que hemos asignado.

Por ejemplo, el siguiente trozo de código haría que tras 10 segundos, el navegador cargara una nueva página, en concreto saltará a http://www.nueva_direccion.com/inicio.html:

<HTML>
 <BODY>
 Nuestra página ha cambiado.
 
 <SCRIPT>
  setTimeout( "location='http://carga.otra.pagina/inicio.html';",10000 );
 </SCRIPT>
 
 <BODY>
<HTML>

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.

El objeto location es muy útil para pasar información a nuestro programa cuando llamamos a la página que lo contiene. Así, si hacemos una llamada a la URL http://www.misitio.es/miPagina.html?nombre=Victor&apellidos=Rivas podremos acceder, gracias a location.search a la cadena ?nombre=Victor&apellidos=Rivas y utilizar estos valores dentro de nuestro programa en Javascript.

8. El objeto document.

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.