CURSO DE JAVASCRIPT
TERCERA PARTE

13. OBJETOS INCORPORADOS

JavaScript utiliza toda una serie de objetos que representan el navegador y sus elementos, el documento HTML, las imágenes, los enlaces, las tablas, etc. Cada uno de estos objetos está definido por sus propiedades, los datos que almacena en su interior y por sus métodos, es decir, las acciones que podemos hacer sobre ellos.

Jerarquía

Para comprender a fondo la programación en JavaScript, es imprescindible conocer la jerarquía de objetos que lo forman. Cada uno de estos objetos puede contener tres tipos de elementos, otros objetos de JavaScript, propiedades y métodos.

La jerarquía de los objetos JavaScript es la siguiente:

Para referirnos a cualquiera de estos elementos debemos usar siempre el signo ".". Por ejemplo con la sentencia

window.document.form

nos estamos refiriendo al objeto form que forma parte del objeto document y que, a su vez, forma parte del objeto window.

Muchos de estos objetos son, en realidad, arrays de objetos, es decir, listas con todos los elementos de este tipo que hay contenidos. En el ejemplo anterior el objeto form es un array con todos los formularios que hay dentro del documento. Nos podemos referir a cada uno de ellos utilizando la siguiente expresión

window.document.form[i]

donde i es el índice del formulario al cual nos referimos.

Cada vez que creemos un objeto dentro de un documento HTML es interesante utilizar el tag NAME, ya que de esta manera siempre podemos referenciar el objeto por el nombre asignado en el momento de su creación. Por ejemplo, si en el formulario anteriormente creado asocio el tag NAME="pedirproducto" podemos, posteriormente, referirnos a él utilizando la expresión

window.document.pedirproducto

13.1 OBJETO window

El objeto window ocupa el nivel superior en la jerarquía de objetos de JavaScript, pues, en cierto modo, es el contenedor de todo lo que se puede mostrar en una ventana del navegador Web. A través del objeto window se puede consultar y controlar la ventana del documento. También permite definir ventanas nuevas, asignando libremente las propiedades de ventana.

A la ventana principal del navegador, que no se puede crear, se puede acceder a través de los nombres reservados window o self. Los nombres de ventana window y self permiten utilizar todas las propiedades y métodos del objeto window.

Propiedades

closed

Indica si una ventana, abierta anteriormente con el método open(), está abierta a no, en caso de que la ventana se haya cerrado devuelve el valor true. Esta propiedad resulta muy útil para consultar si una ventana está abierta antes de introducir instrucciones para su modificación.

Ejemplo 13.1.1:. Abre una ventana y después analiza si está se cerró o no

<html>
<head>
<script language="JavaScript">
	nuevaVentana=window.open("Auxiliar1.htm", "Ventana1");	
	//también sería correcto: self.open("ventanaAux.htm", "Ventana1")
	function chequear(){
	  if (nuevaVentana.closed==true) alert ("La ventana se ha cerrado");
	  else alert ("La ventana sigue abierta");
	}
</script>
</head>
<body >
	<a href="javascript:chequear()">¿Está la ventana cerrada?</a>
</body>
</html>

[Ejecución]

defaultStatus

Almacena el contenido que se mostrará en la barra de estado. Esta propiedad puede ser consultada y modificada.

Ejemplo 13.1.2: Cambia la línea de estado y muestra en una ventana el cambio realizado.
window.defaultStatus="Esta línea de estado está cambiada";
alert ("La línea de estado contiene el siguiente texto\n"+window.defaultStatus);
[Ejecución]

name

Guarda el nombre de la ventana definida con el método open(). Este nombre es para uso interno.

Ejemplo 13.1.3: Abre una ventana y pide al usuario un nuevo nombre para ella.

ventana1=window.open("Auxiliar1.htm", "Venta_auxiliar", "width=200,height=200");
nuevonombre=prompt("Introduce un nuevo nombre para la ventana","");
ventana1.name=nuevonombre;
alert("El nuevo nombre de la ventana es: "+ventana1.name);

[Ejecución]

status

Guarda o define el contenido actual de la barra de estado. Se utiliza para visualizar un mensaje en la barra de estado mientras sucede un evento en un enlace. En este tipo de construcciones es importante añadir al final la instrucción return true. En el caso de que no esté definido la propiedad defaultStatus este mensaje se mantiene mientras no se vuelva a ejecutar la propiedad status, si hay definido un mensaje por defecto éste aparece en el momento en que finaliza el evento en que se define la propiedad.

Ejemplo 13.1.4: Cuando se sitúa la flecha del ratón sobre el vínculo aparece un mensaje en la barra de estado, en cualquier otro momento aparece el mensaje definido por defecto.
//Ejecuta el ejemplo 13.1.2 para fijar un mensaje por defecto en la barra de estado
<a href="tercera/Auxiliar1.htm" 
	onmouseover="status='Esto aparece cuando te sitúas sobre el vínculo'; return true;">
	[Ven aquí]</a>
[Ven aquí]

Métodos

*clearInterval(vble)*	Interrumpe un proceso infinito que se inició con setInterval(). Como parámetro se ha de transmitir la variable en la que se guardó la línea de activación de setInterval().
*setInterval(Código,Pausa***)	Ejecuta una instrucción o activa una función repetidamente en un ritmo determinado, hasta que clearInterval() pone fin al proceso. Se le deben transmitir dos parámetros: Código: es la instrucción *JavaScript* que se ha de ejecutar repetidamente. Suele ser casi siempre una activación de función. Pausa: Valor en milisegundos que ha de transcurrir entre ejecución y ejecución.

Ejemplo 13.1.6: La función Emitir()cambia el color de fondo del documento, por efecto de la ejecución de la función setInterval(), cada 1000 milisegundos se activa la función. Cuando el contador veces alcanza el valor 5, se ejecuta la función clearInterval() que detiene el proceso iniciado por setInterval.().
var veces=0, num_color=1;
activa_color=window.setInterval("Emitir()",1000);
function Emitir(){
  if (num_color==1) {
    document.bgColor="yellow"; num_color=2;
  }else{
    document.bgColor="aqua"; num_color=1;
  }
  veces+=1; 
  if (veces >= 5){
     window.clearInterval(activa_color);alert ("Finalizó el cambio de color");
  }
} 
[Ejecución]

close()

Este método se utiliza para cerrar ventanas. No utiliza ningún parámetro. Se puede cerrar la ventana actual u otra que haya sido abierta con el método open().

Ejemplo 13.1.7: El primer enlace permite cerrar la ventana actual y el segundo cierra una ventana abierta con el método open() en la variable ventanaNueva.
<a href="javascript:window.close()">Cerrar ventana actual</a> [Ejecución]
<a href="javascript:ventanaNueva.close()">Cerrar ventana nueva</a>

open(URL,nombre[,parámetros])

Este método abre una ventana nueva. Se le han de transmitir al menos dos parámetros, opcionalmente también se le pueden transmitir tres:

Dirección URL: Dirección de destino del archivo que se ha de cargar en la ventana nueva. Cuando el archivo se encuentra en el mismo directorio, es suficiente con indicar el nombre del archivo, en caso contrario deberá indicar toda la ruta de acceso relativa o la dirección http absoluta. Netscape permite introducir aquí una cadena vacía de caracteres (con lo cual se abre una ventana vacía), pero no así Internet Explorer, que devolvería en ese caso un mensaje de error.
Nombre de la ventana: el nombre puede contener letras, números y guiones de subrayado. Este nombre se puede utilizar por ejemplo, para que determinados vínculos carguen en la ventana nueva sus archivos de destino a través de la instrucción <a href="destino.htm" target="NombreDeLaVentana">.
Indicaciones sobre el aspecto de la ventana (parámetro opcional). Aquí se puede introducir una cadena de caracteres indicando el tamaño y diferentes propiedades de la ventana. Si indica varias cosas, deberá separarlas entre sí con una coma. Las indicaciones que funcionan en los dos navegadores (Netscape y IE) se describen a continuación:
- height: altura en pixeles de la nueva ventana.
- locationbar: cuando el valor es afirmativo (yes), la ventana obtiene una línea de dirección URL propia. Cuando el valor es negativo (no=predefinido), no obtiene ninguna línea de dirección.
- menubar: cuando el valor es afirmativo (yes), la ventana obtiene su propia barra de menús con comandos del navegador. Cuando el valor es negativo (no=predefinido), no obtiene ninguna barra de menús.
- resizable: cuando el valor es negativo (no), el usuario no puede modificar el tamaño de la ventana. En caso afirmativo (yes=predefinido), el usuario puede modificar le tamaño de la ventana.
- scrollbars: cuando el valor es afirmativo (yes), la ventana obtiene su propia barra de desplazamiento. Cuando el valor es negativo (no=predefinido), no obtiene ninguna barra de desplazamiento.
- status: cuando el valor es afirmativo (yes), la ventana obtiene su propia barra de estado. Cuando el valor es negativo (no=predefinido), no obtiene ninguna barra de estado.
- toolbar: cuando el valor es afirmativo (yes), la ventana obtiene su propia barra de menús. Cuando el valor es negativo (no=predefinido), no obtiene ninguna barra de herramientas.
- width: anchura en pixeles de la ventana nueva.

Ejemplo 13.1.8: El siguiente ejemplo abre una ventana de un tamaño de 300x100 que puede ser cambiada de tamaño.
abrir=confirm("¿Quieres abrir la ventana auxiliar?");
if (abrir == true){
  primera=window.open("Auxiliar.htm","ventana1","width=300,height=300,resizable=yes");
}
[Ejecución]

focus()

Convierte una ventana en activa.

Ejemplo 13.1.9: La siguiente línea de código añadida al ejemplo anterior crear un enlace que provoca que la ventana del documento Auxiliar.htm pase a primer plano cuando ya está abierta.
<a href="javascript:primera.focus()">Activar ventana Auxiliar</a>
[Ejecución]

blur()

Este método se utiliza para desactivar una ventana. Desarrolla la función contraria a la de focus().

Ejemplo 13.1.10: La siguiente línea de código en la ventana del documento Auxiliar.htm pase a segundo plano cuando ya está abierta.
<a href="javascript:window.blur()">Pasar a segundo plano</a>
[Ejecución]

moveBy(valorx,valory)

Mueve una ventana el número de pixeles indicado. Se han de transmitir los siguientes parámetros:

valorx: indica el número de pixeles que se ha de mover la ventana hacia la derecha o la izquierda. Los valores negativos expresan un movimiento hacia la izquierda, y los positivos a la derecha.
valory: indica el número de pixeles que se ha de mover la ventana hacia arriba o hacia abajo. Los valores negativos expresan un movimiento hacia arriba, y los positivos hacia abajo.

Ejemplo 13.1.11: El siguiente ejemplo mueve la ventana 50 pixeles hacia abajo y hacia la derecha al activar el enlace
<a href="javascript:window.moveBy(50,50)">Mover abajo a la derecha</a>
[Ejecución]

moveTo(valorx,valory)

Mueve la ventana a la posición indicada. Se le deben transmitir los siguientes parámetros:

valorx: valor que define la posición a la izquierda del nuevo vértice superior izquierdo de la ventana.
valory: define la posición en altura del nuevo vértice superior izquierdo de la ventana.

Ejemplo 13.1.12: El siguiente enlace provoca que la ventana se sitúe en una posición concreta de la pantalla. El punto de referencia es la esquina superior izquierda de la ventana del navegador y de la pantalla del ordenador.
<a href="javascript:window.moveTo(0,0)">Mover ventana a una posición fija</a>
[Ejecución]

resizeBy(valorx,valory)

Mueve la ventana a la posición indicada. Se le deben transmitir los siguientes parámetros:

valorx: indica el número de pixeles que se ha de reducir/ampliar la ventana por la derecha. Los valores negativos significan una reducción, los positivos una ampliación del tamaño.
valory: indica el número de pixeles que se ha de reducir/ampliar la ventana por su parte inferior. Los valores negativos significan una reducción, los positivos una ampliación del tamaño.

Ejemplo 13.1.13: El siguiente enlace cambia el tamaño de la ventana 50x50 pixeles por la esquina inferior derecha.
<a href="javascript:window.resizeBy(50,50)">Cambiar tamaño de ventana</a>
[Ejecución]

resizeTo(valorx,valory)

Modifica de forma absoluta el tamaño de una ventana. Se le han de transmitir los siguientes parámetros:

valorx: indica, en pixeles, el nuevo ancho de la ventana.
valory: indica, en pixeles, la nueva altura de la ventana.

Ejemplo 13.1.14: Este enlace cambia el tamaño de la ventana a 450x250 pixeles.

<a href="javascript:window.resizeTo(450,250)">Cambiar tamaño de ventana </a>

[Ejecución]

scrollBy(valorx,valory)

Desplaza automáticamente una página en pantalla en el número de pixeles que se indiquen ya sea hacia arriba o hacia abajo, hacia la izquierda o a la derecha. Se le han de transmitir los siguientes parámetros:

valorx: indica el número de pixeles que se ha de mover la ventana por la izquierda/derecha. Los valores negativos significan desplazamiento a la izquierda y los positivos un desplazamiento a la derecha.
valory: indica el número de pixeles que se ha de mover la ventana por la arriba/abajo. Los valores negativos significan desplazamiento hacia arriba y los positivos un desplazamiento hacia abajo.

Ejemplo 13.1.15: Este enlace mueve la barra de desplazamiento 10 pixeles hacia abajo.
<a href="javascript:window.scrollBy(0,10)">Mover barra desplazamiento</a>
[Ejecución]

scrollTo(valorx,valory)

Desplaza las barras de desplazamiento hasta una determinada posición. Se le han de transmitir los siguientes parámetros:

valorx: indica el número de pixeles que se ha de mover la ventana por la izquierda/derecha. Los valores negativos significan desplazamiento a la izquierda y los positivos a la derecha
valory: indica el número de pixeles que se ha de mover la ventana por la arriba/abajo. Los valores negativos significan desplazamiento hacia arriba y los positivos un desplazamiento hacia abajo.

Ejemplo 13.1.16: Este enlace desplaza la barra de desplazamiento a una determinada posición.

<a href="javascript:window.scrollTo(0,100)">
  Mover barra de desplazamiento a una determinada posición</a>

[Ejecución]

Ejercicios

Ejercicio 13.1.1: Hacer una Web que muestre en la barra de estado el siguiente mensaje: "Esto es un ejercicio de JavaScript". Grabar el fichero con el nombre de Ejercicio1311.htm

Ejercicio 13.1.2: Hacer una Web que muestre en la barra de estado la hora de hoy con el formato hora:minuto:segundo. Conseguir que se actualice cada 1000 milisegundos. Grabar el fichero con el nombre de Ejercicio1312.htm.

Ejercicio 13.1.3: En el fichero Ejercicio1311.htm construir un enlace que abra, en una ventana nueva y con los parámetros que tu quieras, el fichero Ejercicio1312.htm.

Ejercicio13.1.4: Conseguir en el enlace anterirmente creado que cuando el ratón esté sobre él se muestre, en la barra de estado del navegador, el siguiente mensaje:"Abre una nueva ventana", en cualquier otro momento debe aparcer en la barra de estado el mensaje que tiene definido por defecto.

Ejercicio13.1.5: En la Web del fichero Ejercicio1312.htm construir un enlace para cada una de las siguientes operaciones:

Cerrar la ventana.

Pasar la ventana a segundo plano.

Mover la ventana a la posición 300,300 de la pantalla.

Cambiar el tamaño de la ventana a 200x200 pixeles.

Desplazar la barra de desplazamiento 10 pixeles. hacia abajo.

Ejercicio 13.1.5: Analizar lo que se consigue con este código en la línea de estado:

var numero=1,repetir;
repetir=setInterval("Estado()",100)
function Estado (){
    switch (numero){
      case 1:
        defaultStatus="H";
        numero=2;
      break;
      case 2:
        defaultStatus="HO";
        numero=3;
      break
      case 3:
        defaultStatus="HOL";
        numero=4;
      break
      case 4:
        defaultStatus="HOLA";
        numero=1;
      break
    }
}

13.2 OBJETO location

A través del objeto location, que en la jerarquía de objetos de JavaScript se encuentra por debajo del objeto window, se tiene acceso a la dirección completa del URL de la página web que se muestra actualmente. La dirección URL se puede consultar total o parcialmente para procesarla o modificarla. Si se modifica, el navegador web realiza un salto el nuevo URL, tal como sucede con un vínculo.

El objeto location puede llevar delante la palabra window (window.location…), pero esto no es necesario si se refiere a la ventana actual. Por el contrario, cuando se quiere acceder a otra ventana sí se debe indicar con exactitud el direccionamiento de la ventana.

La sintaxis general será:

Para la ventana actual

window.location.propiedad
window.location.método

Para una ventana definida anteriormente

otraventana=window.open("auxiliar.htm","auxiliar");
otraventana.location.método()

Propiedades

hash

Especifica el nombre del enlace de una URL.

Ejemplo 13.2.1: En el siguiente ejemplo se define un enlace que se desplaza hasta una línea en la que existe un marcador. El marcador está en un enlace que si se activa muestra el nombre de éste.
<script language="JavaScript">
	function Mostrar(){
	    alert(window.location.hash);
	}
</script>
	
	<p><a href="#puntox">Ir al punto x</a> </p>
	
	<p><a href="Javascript:Mostrar()" name="puntox">Aqui punto x</a>
[Ejecución]

host

En esta propiedad se guarda el nombre del servidor indicado en la dirección URL actual o el específico de una ventana. Para que esta propiedad funcione tiene que estar activo el protocolo HTTP. Esta propiedad es modificable pero se recomienda utilizar para esto la propiedad href.

Ejemplo 13.2.2: La siguiente línea nos indica el nombre del host en el que está publicada la página que estamos viendo.
alert("El nombre del host es"+window.location.host);
[Ejecución]

*hostname*	En esta propiedad se guarda el nombre del servidor indicado en la dirección *URL* actual o el específico de una ventana. A diferencia de *host, esta propiedad puede guardar subdominios y números de puerto, en el caso de que éstos estén incluidos en la dirección URL* actual.
*pathname*	En esta propiedad se guarda la ruta de acceso dentro de la dirección *URL* actual o el específico de una ventana. En el caso de uso local (sin protocolo *HTTP*) se guarda la dirección local completa.

Ejemplo 13.2.3: La siguiente línea nos indica el nombre del host en el que está publicada la página que estamos viendo.
alert("El nombre del host es"+window.location.pathname);
[Ejecución]

href

En esta propiedad se guarda la URL de la ventana actual o de otra ventana. Al modificar esta propiedad, la página web actual del navegador se sitúa en la indicada en la propiedad. Si se determina la dirección URL con http el acceso será absoluto, sino será relativo al directorio en el que se está.

Ejemplo 13.2.4: El siguiente ejemplo pregunta por una dirección y la activa en el navegador actual.
<script language="JavaScript">
    function IrA(){
        direccion=window.prompt("Introduce la URL ","");
        window.location.href=direccion;
    }
</script>
<a href="javascript:IrA()">Ir a nueva URL</a>
[Ejecución]

port

En esta propiedad se almacena el puerto indicado en la dirección URL actual o específico de una ventana. Una dirección con puertos es, por ejemplo, http://www.perro.de:5080/. La propiedad port contiene solo valor cuando el número del puerto está incluido en la dirección.

Ejemplo 13.2.5: La siguiente línea nos indica el protocolo que se esta utilizando en la página actual.
alert("el puerto es "+window.location.port);
[Ejecución]

Métodos

reload()

Carga de nuevo la página web. Su efecto es el mismo que el del botón Actualizar o Recargar del navegador.

Ejemplo 13.2.6: Este enlace insertado en el código de una web crea un enlace que al activarlo recarga de nuevo la página.
<a href="javascript:window.location.reload()"> Cargar de nuevo</a>
[Ejecución]

replace()

En la lista de páginas visitadas (historial), carga sobre la entrada actual una dirección URL distinta. Su efecto es, por lo tanto, similar a href, la única diferencia es que con replace, la dirección del URL actual ya no aparece después en la lista de páginas visitadas.

Ejemplo 13.2.7: Se define un vínculo que carga una URL de tal modo que la dirección anterior no aparecerá en el historial.
<a href="javascript:window.location.replace(‘Auxiliar1.htm’)">Auxiliar.htm</a>
[Ejecución]

Ejercicios

Ejercicio 13.2.1: Introducir en un fichero htm una imagen y un texto y guardarlo con el nombre de Ejercicio1311.htm. A la Web creada incorporarle un enlace que muestre la ruta de acceso del fichero y otro que permita acceder a una URL distinta en la misma entana.

Ejercicio 13.2.2: Incorporar un enlace en el fichero creado anteriormente que permita realizar una recarga de la página.

13.3 OBJETO document

El objeto document se refiere al contenido que se muestra en una ventana del navegador. En la jerarquía de objetos de JavaScript se encuentra inmediatamente por debajo del objeto window. El objeto document posee sus propios métodos y propiedades.

Un objeto de document es la totalidad de lo que se encuentra en un área de contenido en una ventana de un navegador o en una frame de una ventana.

La sintaxis general será:

window.document.propiedad
window.document.método()

Se puede omitir la palabra window cuando nos referimos a la ventana actual. En el caso de referirse a una ventana creada con open, en vez de window debemos indicar el nombre de la variable donde se creó ésta.

otraventana=window.open("auxiliar.htm","auxiliar");
otraventana.document.método()

Propiedades

*alinkColor*	Permite leer y modificar el color de los vínculos mientras están pulsados, al igual que puede definirse en el atributo alink= del tag <body> o en las configuraciones que realiza el usuario para su navegador.
*bgColor*	Permite leer y modificar el color de fondo del documento. Realiza la misma función que el atributo bgcolor= del tag <body> o en las configuraciones que realiza el usuario para su navegador.
*fgColor*	Permite leer y modificar el color del texto tal y como se puede definir con el atributo text = del tag <body> o en las configuraciones que realiza el usuario para su navegador.
*linkColor*	Permite leer y modificar el color de los vínculos de la misma forma que se puede definir con el atributo link= del tag <body> o en las configuraciones que realiza el usuario para su navegador.
*vlinkColor*	Permite leer y modificar el color de los vínculos de las páginas ya visitadas. Realiza la misma función que el atributo bgcolor= del tag <body> o en las configuraciones que realiza el usuario para su navegador.

Ejemplo 13.3.1: A continuación se configuran los colores de una página web utilizando las propiedades anteriores:
document.bgColor="FFFF00";
document.fgColor="FF0F00";
document.alinkColor="0FFFFF";
document.vlinkColor="000000";
document.linkColor="F5F5DC"
[Ejecución] //El ejemplo permite la elección de varias combinaciones

lastModified

Permite consultar la fecha y la hora en que se produjo la última modificación del archivo, y para su notación se sigue el formato GMY (hora de GreenwichK).

Ejemplo 13.3.2: La siguiente línea escribe en el documento la fecha de la última actualización.
document.write("La última actualización es: "+document.lastModified);
[Ejecución]

referrer

Permite consultar la dirección URL desde el cual se ha activado el archivo actual. Es imprescindible que el documento haya sido activado desde un enlace. Con IE solo se guarda el URL en document.referrer si el archivo actual se activa a través de un vínculo del tipo http://…./ Es muy útil para hacer estadísticas.

Ejemplo 13.3.3: La siguiente línea muestra la URL desde la cual se ha activado el enlace que ha llevado al usuario hasta el documento actual.
document.write("Usted ha llegado aquí a partir de "+document.referrer);
[Ejecución]

title

Esta propiedad permite consultar el título que asignó a un archivo HTML en <title>…</title>.

Ejemplo 13.3.4: La siguiente línea muestra el título del documento actual
document.write("El título del documento actual es "+document.title);
[Ejecución]

URL

Esta propiedad permite consultar la dirección completa del URL del documento actual.

Ejemplo 13.3.5: La siguiente línea muestra la dirección URL completa.
document.write("La URL de esta web es  "+document.URL);
[Ejecución]

cookie

Un cookie es más que un fichero de texto que algunos servidores piden al navegador que escriba en el disco duro del ordenador del usuario, con información acerca de los que ha estado haciendo por sus páginas o datos que previamente le ha suministrado. La propiedad cookie permite consultar los cookies que hay almacenados en el ordenador de usuario al respecto del documento actual.

Netscape almacena sus cookies en un fichero denominado cookies.txt. En Microsoft Internet Explorer se almacenan en un directorio llamado Cookies. Verás que a diferencia del Netscape, existe un fichero por cada cookie, con el siguiente aspecto: <identificador de usuario>@<dominio.txt>, donde dominio es la dirección de la máquina o bien el directorio (si es que no es el raíz) desde donde se envió la cookie.

Para ver qué se cuece dentro de la caja de las cookies no tienes más que editarlas con cualquier editor de texto. Sin embargo, debido a que las cookies se almacenan en memoria hasta que sales del navegador, momento en que se escriben en el disco, no es posible ver qué cookies has aceptado en tu fichero cookies.txt hasta que sales. Pero si escribes el siguiente comando JavaScript en la barra de direcciones:

JavaScript:alert(document.cookie);

mientras estás conectado al sitio sospechoso, aparecerá un cuadro informándote de las cookies que te han colocado.

Métodos

close()

Cierra un documento que se abrió con el método open() y se escribió con uno de los métodos write().

open([tipoMIME][,replace])

Abre un documento para poder escribir en él. La escritura no se realiza en una ventana nueva sino en la que ya está abierta. Si el documento ya tenía antes un contenido es conveniente activar primero el método close().
Los parámetros que puede tener este métodos son:

TipoMIME: nombre del tipo MIME de los datos que se van a escribir en la ventana del documento. Los tipos MIME pueden ser:
- text/html: documento de texto (ASCII) que contiene formato HTML. Este es el parámetro por defecto.
- text/plain: documento de texto(ASCII) puro con delimitadores de final de línea.
- image/gif: documentos de imágenes con formato GIF.
- image/jpeg: documentos de imágenes con formato JPEG.
- image/x-bitmap: documentos de imágenes con formato bitmap.
- plugins: carga el plugin especificado. Por ejemplo x-world/x-wrml carga el plugin para realidad virtual (VRML).
- x-application/x-www-form-urlcoded: el tipo de codificación típico de los programas CGI.

replace: este parámetro hace que el documento anterior desaparezca del historial y ocupe su lugar el documento nuevo que contiene la orden open().

Ejemplo 13.3.6: El script del ejemplo utiliza dos enlaces para intercambiar el contenido del documento.

<script language="JavaScript">
  function Cambio(){
    document.open();
    document.write("<a href='Enlace_Tercera_13_3_6.htm'>Después el otro</a>");
    document.close();
  }
  document.open();
  document.write("<a href='javascript:Cambio()'>Primero yo</a>");
  document.close();
</script>

[Ejecución]

Ejemplo 13.3.7: El script del ejemplo utiliza dos enlaces para intercambiar el contenido del documento.

<script language="JavaScript"> 
  var nueva;
  function nuevaVentana() {
	nueva.document.open("Text/HTML","replace");
	nueva.document.write("Contenido enviado desde la ventana del enlace");
	nueva.document.close();
  }
  function abre(){
	nueva=window.open("uno.htm","otra");
	nuevaVentana();
  }
</script>
<p><a href="javascript:abre()">Prueba de open y close </a></p>

[Ejecución]

write()

Escribe texto en el documento. Es necesario transmitir como parámetro al cadena de caracteres a escribir o una expresión JavaScript. Permite introducir varias cadenas de caracteres o expresiones separadas por comas.
El método document.open() es opcional puesto que un método document.write() que intente escribir el documento creado elimina el documento antiguo y abre uno nuevo. Se utilice o no el método document.open(), debe de asegurarse el utilizar el método document.close() después de que se haya realizado cualquier escritura.
A la hora de de escribir en un documento por medio de write hay que tener en cuenta que si el documento ya está cerrado (si ya se cargó todo) se sobreescribe el contenido anterior con la información enviada con write.

Ejemplo 13.3.8: Un documento se abre automáticamente cuando empieza a cargarse y se cierra cuando termina de hacerlo. Así pues, si deseamos escribir en un documento sin sobreescribir su contenido, deberemos hacerlo antes de que éste termine de cargar. Si lo hacemos después, sobreescribiremos su contenido. Por lo tanto:
<BODY>
	Este es un documento muy interesante y que fue modificado por última vez el día
	<SCRIPT LANGUAGE="JavaScript">
		document.write(document.lastModified);
	</SCRIPT>
</BODY>
[Ejecución]

Este ejemplo os mostrará la cadena completa, ya que se llama a write antes de cerrarse el documento. Es decir, antes de que termine de cargar.

Ejemplo 13.3.9: Sin embargo, el siguiente ejemplo:
<head>
<title>Ejemplo de document.write 1</title>
<script language="JavaScript">
    function escribir() {
      document.write("Este es documento fue modificado por última vez el día");
      document.write(document.lastModified);
      document.write("<p><a href='../Tercera.htm#enlace13.3.9'>Volver</a>")	
      document.close();
     }
  </script>
</head>
<body >
  <p>Hola. </p>
  <a href="javascript:escribir()">Nuevo Contenido</a>
</body>
Al activar el enlace "Nuevo contenido" se sobreescribirá el documento y no podremos ver ese "Hola", ya que la función escribir() envía información después de cargar todo el documento, es decir, después de cerrarlo.

[Ejecución]

Ejercicios

Ejercicio 13.3.1: Tomar el ejercicio "Ejercicio1312.htm". Utilizando JavaScript cambiar los colores de los enlaces, color de fondo, color de testo, etc.

Ejercicio 13.3.2: Añadir al fichero anterior un enlace que permita conocer la fecha de la última modificación y otro que permita conocer la URL completa del documento actual.

Ejercicio 13.3.3: Accede a www.terra.es y consulta el cookie que te envían.

Ejercicio 13.3.4: Modifica el "Ejemplo 13.3.7" de tal forma que escribas un mensaje con document.write en la function abre() después de la orden document.close(). Después escribe ese mismo mensaje antes de la orden. Fíjate en lo que sucede.

13.4 OBJETO history

A través del objeto history, que en la jerarquía de objetos de JavaScript se encuentra por debajo del objeto window, se tiene acceso a todas las páginas web visitadas por el usuario. La referencia para ello es el historial que se guarda en el navegador web.

La sintaxis general será:

window.history.propiedad
window. history.método()

Propiedades

length

Esta propiedad permite leer el número de páginas almacenadas en el historial de una ventana.

Ejemplo 13.4.1: Este enlace permite ver el número de páginas visitadas en la ventana activa.
<a href="javascript:alert(history.length)">Páginas visitadas en esta ventana</a>
[Páginas visitadas en esta ventana]

Métodos

back()

Este método activa la página anteriormente visitada. Realiza la función del icono que contiene una flecha a la izquierda en IE.

Ejemplo 13.4.2: Al activar el enlace se activa la página visitada anteriormente.
<a href="javascript:history.back()">Atrás</a>
[Atrás]

forward()

Este método activa la página siguiente en la ventana actual. Esto solo es posible si se ha ido anteriormente hacia atrás. Realiza la función del icono que contiene una flecha a la derecha en IE.

Ejemplo 13.4.3: Al activar el enlace se activa la página que está a continuación en el historial en la ventana actual. Esto funciona siempre que se haya ido previamente hacia atrás.
<a href="javascript:alert(history.forward())">Adelante</a>
[Adelante]

go()

Permite ir a la página del historial que se desee, siempre de la ventana actual. Este método necesita un parámetro que indique el número de páginas hacia atrás o hacia delante que ha de desplazarse; los valores positivos indican la dirección hacia delante y los negativos hacia atrás.

Ejemplo 13.4.4: Al activar el enlace se desplaza 5 páginas hacia atrás
<a href="javascript:alert(history.go(-3)">3 Atrás</a>
[3 Atrás]

Ejercicios

Ejercicio 13.4.1: Construir un enlace en una página web que permita ver el número de accesos almacenados en el historial de tu navegador.

Ejercicio 13.4.2: En la Web anterior añadir enlaces para realizar las siguientes operaciones:

Ver la página anterior
Ver la página siguiente
Ver la página que está 4 posiciones anteriores en el historial.

13.5 OBJETO navigator

Este objeto permite obtener informaciones en JavaScript sobre el navegador web que utiliza el usuario, así como otras especificaciones más detalladas. Este información puede ser útil, por ejemplo, cuando la ejecución de las instrucciones de JavaScript dependen del navegador que se utilice. A las propiedades y métodos de navigator se puede acceder directamente de la siguiente forma:

navigator.propiedad
navigator.método()

Propiedades

*appCodeName*	Especifica el código del nombre del navegador utilizado. Tanto Netscape como Internet Explorer guardan en esta propiedad el valor Mozilla.
*appName*	Esta propiedad guarda el nombre del navegador utilizado por el usuario.
*appVersion*	Esta propiedad guarda la versión del navegador utilizado por el usuario.
*language*	Esta propiedad guarda el lenguaje que utiliza el navegador del usuario en su guía de usuario. No funciona en IE.
*platform*	Almacena el sistema operativo en el que se ejecuta el navegador.
*userAgent*	Aquí se almacenan todas las informaciones importantes sobre el navegador utilizado por el usuario con el mismo formato utilizado por el navegador al solicitar con *HTTP* un archivo de la web.

Métodos

javaEnable()

Esta función comprueba si el navegador dispone o no de Java. Devuelve true en caso afirmativo y false en caso negativo.

Ejemplo 13.5.1: Muestra todos los datos del navegador, lenguaje, plataforma, etc y nos informa si dispone o no de Java.

alert( "El nombre oficial del navegador es: "+navigator.appName+") [Enlace]
alert(alert( "El apodo del navegador es: "+navigator.appCodeName")  [Enlace]
alert("La versión del navegador es "+navigator.appVersion)  [Enlace]
alert("El sistema operativo que está activo es "+navigator.platform)  [Enlace]
alert("¿Java está activo? "+navigator.javaEnabled())  [Enlace]

Ejercicios

Ejercicio 13.5.1: Crear un enlace que permita mostar todas las características del navegador actual.

13.6 OBJETO links

Un link es una imagen o texto que identifica un hiperenlace; al activar el link se carga el elemento referenciado.

Con el objeto links, que en la jerarquía de objetos JavaScript se encuentra por debajo del objeto document, se tiene acceso a los vínculos definidos en un archivo HTML.

Recordemos la sintaxis HTML de un link o enlace.

<A HREF=URL/localización    destino del enlace 
  [NAME="Marcador-Ancla"]   nombre del marcador o ancla 
  [TARGET="NombreVentana"]> ventana destino para la URL
  TextoDelLink </A>	  texto que se muestra en el documento

El objeto links solo tiene una propiedad:

length

Indica el número de vínculos contenidos en un archivo.

Con JavaScript se pueden averiguar los destinos de los vínculos en HTML ya que el objeto links es un array que contiene todos los destinos de los distintos vínculos del documento.

Ejemplo 13.6.1: Se muestra el número de enlaces que tiene el documento y el destino de cada uno de ellos.

<a href="http://www.terra.es">Terra</a></p>
<a href="https://www.altavista.com">Altavista</a></p>
<a href="https://www.ozu.es">Ozu</a></p>
<script language="JavaScript">
  document.write ("El número de enlaces en la página es de "+document.links.length+"<p>");
  document.write ("y tienen como destino <br>");	
  for (i=0;i<document.links.length;++i)
    document.write("<br>"+document.links[i]);
</script>

[Ejecución]

Ejercicios

Ejercicio 13.6.1: Añadir al fichero Ejercicio1312.htm un enlace que muestre el número de vínculos existentes en la página y la información de los destinos de éstos.

14. EVENTOS

Un evento es la consecuencia de una acción del usuario sobre algún objeto de la página web. Un evento puede activarse cuando el usuario sitúa el ratón en una imagen o hace clic sobre ella.

La mayor parte de las posibles acciones que se pueden realizar en un programa son provocadas por eventos, por ejemplo, un programa puede tener determinado que cuando el ratón se sitúe por encima de una imagen, ésta cambie por otra. Desde el código JavaScript se pueden identificar los eventos y actuar en función de donde y cuando sucedan, por eso podemos decir que los eventos son las interfaces entre el archivo HTML y el código fuente JavaScript .

14.1 onAbort

El evento onAbort se ejecuta cuando se aborta la carga de una página web antes de cargar cada una de las imágenes. Por ello podemos introducir en cualquier instrucción HTLM <img…> la detección del evento onAbort, para que en el caso de que éste suceda se ejecute código JavaScript .

Este evento se puede aplicar sólo al objeto Img.

Ejemplo 14.1: En el ejemplo si no se carga completamente la imagen "cafetería.jpg" se ejecuta la instrucción alert() con el mensaje correspondiente.
<img src="cafeteria.jpg"
  alt="Si no se carga muestra un mensaje" width="103" height="76" 
  onAbort="alert(‘La foto de la cafetería no se ha cargado todavía')">

14.2 onError

El evento onError se activa cuando la carga de un documento o imagen produce un error.

Este evento es aplicable a: Image y window.

Ejemplo 14.2: La siguiente línea muestra un mensaje en el caso de que la imagen no se cargue correctamente.
<img src="jauja.jpg" name="noimagen" 
onError="alert(‘La imagen JAUJA.JPG no se pudo cargar correctamente, vuélvalo a intentar.’)">

14.3 onLoad y onUnload

El evento onLoad se ejecuta cuando se termina de cargar completamente una página HTML o un juego de frames.

El evento onUnload se ejecuta cuando se sale de una página web.

Estos eventos se detectan en los tipos de objeto Image y window.

Ejemplo 14.3.1: En el ejemplo se pide el nombre del usuario cuando se carga la web y al cerrar ésta se le despide con un saludo personalizado.
<head>
<script >
var nombre;
function pedirNombre(){
    nombre=prompt("Introduce tu nombre","");
}
function despedida(){
    alert("Adios, "+nombre+"esperamos verte pronto");
}
</script>
</head>
<body onLoad="pedirNombre()" onUnload="despedida()">
[Ejecución]

Ejemplo 14.3.2: En el ejemplo se sitúa un reloj en la barra de estado:

<head>
<script>
function hora(){
    var h = new Date();
    window.status=""+h.getHours()+":"+h.getMinutes()+":"+h.getSeconds();
    setInterval("hora()",1000);
}
</script>
</head>
<body onLoad="hora()">

[Ejecución]

14.4 onBlur y onFocus

El evento onBlur se ejecuta cuando el usuario retira el foco de un elemento de formulario, una ventana o un frame.

El evento onFocus se ejecuta cuando el usuario sitúa el foco de entrada en un elemento de formulario.

Estos evento son aplicables a los siguientes elementos: Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea y window.

Ejemplo 14.4: Detecta los eventos onFocus y onBlur en la instrucción HTML <body>, poniendo negro el color de fondo de la página cuando pierde el foco y beige cuando lo obtiene.

<body onBlur="document.bgColor=’black’"
onFocus="document.bgColor=’beige’">

[Ejecución]

Si se desea que un campo no pueda ser modificado se debe utilizar el siguiente método. De esta forma cuando al situar el foco en el campo de texto éste se pierde automáticamente.

<TEXTAREA name="x" cols="40" rows="30" onFocus="this.blur()">

[Ejecución]

14.5 onChange

El evento onChange detecta el cambio de contenido en un elemento de formulario en el momento en que este pierde su foco.

Este evento se puede aplicar a los siguientes objetos: FileUpload, Select, Text y Textarea.

Ejemplo 14.5: El siguiente código muestra un cuadro de texto. El evento se activa cuando, al quitar el foco del cuadro de texto, se comprueba que el contenido de éste ha sido modificado; es entonces cuando se ejecuta la función MTexto ().

<script language="javascript">
function MTexto (){
	alert("Ha modificado el campo de texto");
}
</script>
<FORM>
<p><input type="text" size="40" maxlength="80"
name="nombre" onChange="MTexto()"> </p>
</FORM>

[Ejecución]

14.6 onClick y onDblClick

El evento onClik se activa cuando el usuario pulsa el ratón sobre un elemento de formulario o un enlace.

El evento onDblClik se ejecuta cuando el usuario pulsa dos veces con el ratón en un elemento de formulario o enlace.

Estos eventos son aplicables a los elementos document y Link.

Ejemplo 14.6: Esta línea de código carga una imagen y detecta la pulsación doble del ratón sobre ella, mostrando un mensaje si esto sucede. Si se pulsa un clic sobre cualquier lugar del documento también se muestra un mensaje.

<img src="imagenes\cafeteria.jpg"
	alt="Si pulsas dobleclic verás un mensaje" width="103" height="76"
	onDblClick="alert(‘La palabra clave es RORORIO y si la dices tendrás 
				un descuento de 10% en cualquier consumición.’)">

[Ejecución]

14.7 onKeyDown, onKeyPresse, onKeyUp

Estos eventos se ejecutan cuando el usuario pulsa el teclado sobre un campo de texto de un formulario. La diferencia es que onKeyDown se activa cuando se pulsa, onKeyUp cuando se suelta y onKeyPress mientras se mantiene pulsada. Normalmente no es necesario que se especifique tanto y cualquiera de ellas es suficiente para detectar la pulsación del teclado sobre los objetos en los que se produce el evento.

Es aplicable a los elementos document, Text y Textarea.

Ejemplo 14.7: Esta línea detecta la pulsación del teclado en cualquier lugar del documento y emite un mensaje.

<body onKeyPress="alert('No debes utilizar el teclado en esta página')">

[Ejecución]

14.8 onMouseOver, onMouseOut

El evento onMouseOver se ejecuta cada vez que se el puntero del ratón es posiciona sobre un vínculo.

El evento onMouseOut se produce cuando el puntero del ratón sale de un vínculo o marcador.

Estos eventos se utilizan con los siguientes elementos: Link y Area (ImageMap).

Ejemplo 14.8: La siguiente línea configura el enlace de tal forma que se muestra un mensaje en la línea de estado cuando el ratón está sobre él y cuando retiramos el puntero muestra otro.

<a href="/Tercera/Auxiliar1.htm"
	onMouseOver="window.status='Estás sobre el enalce';return true;"
	onMouseOut="window.status='Ya saliste del enlace';return true;">
	Cambia línea de estado</a>

[Ejecución]

14.9 onMouseDown, onMouseUp

El evento onMouseDown se ejecuta al pulsar un botón del ratón sobre el objeto.

El evento onMouseUp se produce al soltar un botón del ratón.

Estes eventos se utilizan con los objetos Button, document, Image y link.

Ejemplo 14.9: La siguiente línea detecta cuando el usuario pulsa y suelta el ratón sobre la imagen y muestra un mensaje en la línea de estado según la operación.

<img src="imagenes/cafeteria.jpg" width="103" height="76"
	onMouseDown="window.status=('Cafetería EL MASSS')"
	onMouseUp="window.status=('Te esperamos')">

[Ejecución]

14.10 onResize

Este evento detecta los cambios realizados por el usuario en el tamaño de la ventana donde se ejecuta el navegador.

Es aplicable al objeto window.

Ejemplo 14.10: Muestra una ventana de aviso cuando el usuario cambia el tamaño de la ventana.

<body onResize="alert(‘El contenido no se verá correctamente si cambia el tamaño de la ventana’)"

[Ejecución]

15. IMÁGENES

15.1 CAMBIAR IMÁGENES DINÁMICAMENTE

Una de las aplicaciones más extendidas y vistosas de JavaScript dentro de una página web es el famoso efecto de cambiar la imagen cuando el ratón se desliza sobre ella, por ejemplo en los menús de opciones. Para aprender a realizar este efecto es necesario comprender antes cómo se acceden y manipulan las imágenes en JavaScript. Cada imagen insertada con la etiqueta <IMG> en una página se corresponde con un objeto Image. Además, se crea un array llamado images que contiene secuencialmente, según el orden de inserción en la página, todas las imágenes de ésta. Así pues, una primera forma de referenciar las imágenes en una página sería mediante este array:

document.images[0] //para la primera imagen del documento
document.images[1] //para la segunda imagen del documento
etc.

Ahora bien, si a la hora de insertar una imagen en una página se le da un nombre, éste permitirá referenciarla más cómodamente por este nombre. Por ejemplo, la imagen

<img name="castillo" src="fotocastillo.gif" width="110" height="80">

puede referenciarse desde una sentencia de JavaScript como:

document.images["castillo"]

Cuando se generan los efectos de cambio de imagen, deben cargarse además de las imágenes que ya están en la página, las que las sustituirán cuando el ratón pase sobre ellas. Para ello se utiliza lo que se llama precarga de imágenes: cargar una imagen en el caché de manera que cuando sea necesaria se visualice inmediatamente en la página. La precarga se realiza antes de cargar los contenidos del documento, entre las etiquetas <HEAD>:

boton1_on = new Image();
boton1_on.src = "boton1b.gif";
boton1_off = new Image();
boton1_off.src = "boton1.gif";

El constructor del objeto image crea primero una instancia de la imagen boton1_on, a la que posteriormente le asigna el fichero boton1b.gif. De esta manera, ya ha quedado cargada la imagen en memoria para ser visualizada instantáneamente en cuanto se le invoque. Lo mismo ocurre para la segunda imagen.

Ya sólo queda cambiar la imagen cuando el ratón se deslice sobre ella. Para lograr este efecto se utilizan los eventos onMouseover y onMouseout. El primero se produce cuando el ratón pasa sobre un objeto, mientras que el segundo tiene lugar cuando el ratón abandona el área del objeto:

<a href = "presentacion.html" 
	onmouseover = "document.images['boton1'].src = boton1_on.src" 
	onmouseout = "document.images['boton1'].src = boton1_off.src">
<img src = "boton1.gif" name = "boton1"></a>

Se están definiendo los gestores de ambos eventos, de manera que cuando el ratón pase sobre la imagen boton1.gif, que a su vez enlaza con la página web presentacion.html, se cargue la imagen boton1_on, que como se definió en la precarga, se corresponde con el fichero boton1b.gif. Cuando el ratón salga del área ocupada por la imagen, entonces se cargará la imagen boton1_off, que se corresponde con el fichero boton1.gif.

<html>
<head>
<title>Cambio dinámico de imágenes</title>
<script language="Javascript">
<!--
// Precarga de imágenes
  var boton1_off = new Image();
  var boton1_on = new Image();
  boton1_off.src = "imagenes/boton1.gif";
  boton1_on.src = "imagenes/boton1b.gif";
//--> </script>
</head>

<body>
<p><a href = "suscripcion.html" 
	onMouseOver = "document.images["boton"].src = boton1_on.src;" 
	onMouseOut = "document.images["boton"].src = boton1_off.src;" 

<img src="imagenes/boton1.gif" alt="Presentación" name="boton" >
</a> </p>
</body>
</html>

[Ejecución]

Este proceso puede repetirse para tantas imágenes como aparezcan en la página web.

Ejercicios

Ejercicio 15.1: Crear una Web con una barra de botones que permitan acceder a varios ejercicios, los botones deben tener un efecto roll-on. Se deben añadir las instrucciones necesarias para que al posicionar el ratón sobre los botones se vea un mensaje explicativo en la barra de estado.

16. FORMULARIOS

Con el objeto forms, que en la jerarquía de objetos de JavaScript se sitúa por debajo del objeto document, se tiene acceso a los formularios definidos en un archivo HTML.

Los formularios se suelen utilizar para que el usuario pueda enviar datos, respondiendo a cuestiones concretas, hacia el servidor en el cual se encuentra la página web. Si lo que se desea es que esta información sea enviada al servidor, éste debe tener instalados determinados programas CGI que se ocupan de gestionar los formularios. También es habitual que después de validar los datos del formulario éstos se envíen a una dirección de correo donde se atiende a la información.

Los formularios pueden contener diversos objetos: cajas de texto, botones de radio, etc.

16.1 OBJETO form

Para definir un formulario es necesario introducir una primera instrucción con la siguiente sintaxis:

<FORM
      NAME="NombreDelFormulario"
      TARGET="NombreDeVentana"
      ACTION="URLDelServidor"
      METHOD=GET|POST
      ENCTYPE="encodingType">
	..........................
</FORM>

Donde:

NAME es el nombre del formulario.

TARGET es el nombre de la ventana que debe activarse después del envío, en caso de trabajar con frames o simplemente con dos ventanas separadas. En caso de que un programa CGI devuelva código HTML al navegador, por ejemplo un mensaje de aceptación del formulario, su emisión se producirá en la ventana indicada en el TARGET.

ACTION es la URL del servidor al cual es enviada la información. Este atributo puede especificar un guión CGI, o una aplicación LiveWire en el servidor, para que gestione el formulario; también puede especificar una dirección de correo, si el formulario se quiere recibir a través de correo. La forma sería: ACTION="mailto:usuario@dominio"

METHOD puede contener dos valores: GET|POST indica como se enviará la información hacia el servidor especificado en ACTION. Para el protocolo HTTP, el más común, puede tomar los valores GET o POST,. Para los mailto: se debe utilizar el método POST, de esta forma, la URL se envía como un attatchment MIME del correo.

ENCTYPE especifica el MIME codificado del bloque enviado. Ver más información

Para acceder con JavaScript a un formulario determinado, se puede utilizar básicamente uno de los siguientes métodos:

Método1: A los formularios se puede acceder por su número de formulario o índice. La numeración empieza por 0. Al asignar los índices se sigue el mismo orden en que se han escrito los tags <FORM> en el archivo.

document.forms[numform].Propiedad
document.forms[numform].Método()

destino=document.forms[0].action;
document.forms[0].reset()

Método2: También se puede acceder a los formularios utilizando como índice el nombre que se definió en el atributo NAME de la definición.

document.forms["nombreform"].Propiedad
document.forms["nombreform"].Método()

destino=document.forms["nombreform"].action;
document.forms["nombreform"].reset()

Método3: Se puede escribir directamente el nombre del formulario, definido en el atributo NAME de su definición, para hacer referencia a su contenido, propiedades y métodos.

document.nombreform.Propiedad
document.nombreform.Método()

destino=document.nombreform.action;
document.nombreform.reset()

Propiedades

*action*	Permite consultar el valor del atributo ACTION establecido en la definición.
*encoding*	Permite leer el valor del atributo ENCTYPE establecido en la definición.
*length*	Permite leer el número de elementos del formulario.
*method*	Contiene el valor del atributo METHOD establecido en la definición.
*name*	Contiene el nombre del formulario.
*target*	Contiene el valor de TARGET establecido en la definición.

Los objetos del formulario también son considerados propiedades. Éstos serán analizados a lo largo del capítulo.

Ejemplo 16.1.1: Muestra un formulario y los contenidos de sus propiedades.

<FORM NAME="DatosP"
    TARGET="primera"
    ACTION="mailto:usuario@dominio"
    METHOD= POST
    ENCTYPE="Text/plain">

    <p>NOMBRE: <input type="text" size="10" name="texto1"> </p>
    <p>APELLIDOS: <input type="text" size="15" name="texto2"> </p>
</FORM >
<script language="JavaScript">
    document.write("<br>Datos del formulario: ", document.forms["DatosP"].name);
    document.write("<br>Es enviado a: ",document.forms["DatosP"].action);
    document.write("<br>Codificación: ", document.forms["DatosP"].encoding);
    document.write("<br>Contiene ",document.forms["DatosP"].length," elementos");
    document.write("<br>Método de envío: ",document.forms["DatosP"].method);
    document.write("<br> Ventana llamada: ",document.forms["DatosP"].target);
</script>

[Ejecución]

Métodos

*reset()*	Borra todas las entradas de un formulario. Su efecto es el mismo que el botón definido como type=reset.
*submit(*)	Valida el formulario y éste es enviado al receptor. Su efecto es el mismo que el botón definido como type=submit.

Ejemplo 16.1.2: En las líneas siguientes se define un formulario y dos enlaces para borrar las entradas y enviar el formulario.

<FORM NAME="Profesional"
    ACTION="mailto:mio@servidor.com"
    METHOD=POST >
    <p>ESTUDIOS: <input type="text" size="10" name="dato1"> </p>
    <p>PROFESIÓN: <input type="text" size="15" name="dato2"> </p>
</FORM >

<a href="javascript:document.Profesional.reset()"> Borrar entradas </a><p>
<a href="javascript:document.Profesional.submit()"> Enviar entradas </a>

[Ejecución]

Subobjetos

Con el objeto elements, que en la jerarquía JavaScript se encuentra por debajo del objeto forms, se tiene acceso a los elementos del formulario. Para acceder con JavaScript a un elemento determinado de un formulario se pueden seguir varios métodos:

Método1: Por medio de un índice. La numeración empieza por 0. Al asignar los índices se sigue el mismo orden en que se han escrito los distintos elementos en el archivo.
document.forms[numform].elements[numelemento].Propiedad
document.forms[numform].elements[numelemento].Método()
document.forms[0].elements[0].value="dirección";
document.forms[0].elements[0].focus();
Método2: También se puede acceder a los elementos de los formularios utilizando como el nombre del formulario y del elementos que se definió en el atributo name.
document.NombreDelFormulario.NombreDelElemento.Propiedad
document.NombreDelFormulario.NombreDelElemento.Método()
document.DatosProfesion.titulo.value;
document.DatosProfesion.titulo.focus();
Propiedades

checked
Contiene el valor true si el elemento está activo y false si no lo está. Se puede aplicar a botones pulsables, cuadros de control y botones de opción

name Almacena el nombre del elemento de formulario, según se definió en la propiedad NAME. Se puede utilizar con todos los elementos de formulario.

form Aquí se guarda el formulario en el que se encuentra el elemento en cuestión. Detrás de la propiedad FORM se pueden escribir todos los métodos y propiedades del objeto forms. Se puede utilizar con todos los elementos de formulario.

type Guarda el tipo al que pertenece un elemento de formulario. Se puede utilizar con todos los elementos de formulario.

value Guarda el valor introducido en un elemento de formulario o bien el valor asignado a este elemento. Se puede aplicar a todos los elementos de formulario.

defaultValue Contiene el texto definido en VALUE. Esta propiedad es aplicable los cuadros de texto.

Métodos

blur()
Elimina el foco del elemento en el que se active. Se puede aplicar a todos los elementos de formulario.

focus() Activa el foco del elemento que corresponda. Se puede aplicar a todos los elementos de formulario.

clic() Simula una pulsación en el botón correspondiente. Se puede aplicar a cualquier tipo de botón y cuadro de control.

select() Selecciona el texto completo del cuadro. Se puede aplicar a cuadros de texto.

16.2 OBJETO button

Este objeto se muestra en pantalla como un botón rectangular con un texto en su interior y es susceptible de ser pulsado, normalmente, para activar la acción que indica el texto. Sintaxis:

<INPUT TYPE="button"
    NAME¨="NombreDelBotón"
    VALUE="TextoDelBotón">

Donde:

NAME: nombre del objeto

VALUE: texto del botón

Ejemplo 16.2.1: El siguiente formulario muestra un botón que al pulsarlo lanza una ventana de información.
<FORM>
    <input type="button"
         name="bAutor" value="Autor"
     onClick="alert('Rosa Fernández')">
</FORM>

[Ejecución]

16.3 OBJETO text

Este objeto muestra una caja en la que se pueden introducir todo tipo de caracteres.

Sintaxis:

<INPUT TYPE="text"
    NAME¨="NombreObjeto"
    VALUE="TextoProDefecto"
    SIZE=NumEntEro
    MAXLENGTH=NumMaximoCaracteres>

Donde:

NAME: nombre del objeto.

VALUE: valor inicial del texto.

SIZE: capacidad máxima de caracteres del objeto.

MAXLENGTH: número máximo de caracteres que acepta el cuadro. En el caso de no introducir este dato, el número máximo es ilimitado.

Ejemplo 16.3.1: Se crean tres campos de texto y un botón. Se introducen el nombre y el apellido, cada uno en su campo y al pulsar el botón debe aparecer el nombre completo en el tercer campo. Observar que el nombre completo aparece en mayúsculas debido a la utilización de la función toUpperCase().
<script language="JavaScript">
  function nombreCompleto(){
    datos.resultado.value=datos.nombre.value.toUpperCase()+" "+
        datos.apellido.value.toUpperCase();  
  }
</script>
<FORM NAME="datos">
    <p>Nombre: <input type="text" size="10" name="nombre">
     Apellidos: <input type="text" size="10" name="apellido"><p>
     <input type="button" name="bresult" value="Nombre completo"
              onclick="nombreCompleto()"> <p>
     <input type="text" size="20" name="resultado"> </p>
</FORM>
[Ejecución]

16.4 OBJETO textarea

Este objeto muestra una caja en la que se pueden introducir todo tipo de caracteres en varias líneas.

Sintaxis:

<TEXAREA
    NAME="NombreObjeto"
    ROWS= "Entero"
    COLS="Entero"
    WRAP=="off | virtual | physical"> 
   Texto
</TEXAREA>

Donde:

NAME: nombre del objeto.
ROWS: número de filas visibles para el objeto TexArea.
COLS: número de caracteres por fila.
WRAP: Controla como se almacena el texto. Las posibilidades son:

- off: es el modo por defecto, las líneas serán enviadas exactamente como se han tecleado
- virtual: el texto será enviado como una línea continua
- physical: envía el texto con saltos de línea que coinciden con los del objeto.

Ejemplo 16.4.1: Hacer una caja de texto que compruebe que se han introducido datos cuando pierde el foco. En caso de que no se introduzcan datos se devuelve el foco al campo. El código que se encuentra a continuación del formulario se ejecuta inmediatamente y presupone la existencia de un formulario. En esta área se inicializa el foco en el campo definido en el formulario.
<script language="JavaScript">
  function CompContenido(caja){
    if (caja.value.length==0){
             alert ("tiene que introducir datos");
             caja.focus();
    }
  }
</script>
<FORM NAME="primero">
    <p>Introduce un comentario:<br>
    <textarea name="caja" rows="4" cols="11"
         onblur="CompContenido(caja)">
    </textarea> </p>
</FORM>
<script language="JavaScript">
  primero.caja.focus();
</script>
[Ejecución]

16.5 OBJETO checkbox

Este objeto muestra una casilla de verificación.

Sintaxis:

<INPUT TYPE="checkbox"
    NAME¨="NombreObjeto"
    VALUE="ValorDevuelto"
    [CHECKED]>
 "Mensaje"

Donde:

NAME: nombre del objeto.

VALUE: valor que se devuelve al servidor si la casilla está activada y el formulario es validado.

SIZE: capacidad máxima de caracteres del objeto.

Mensaje: es el texto que se muestra al lado de la casilla

Ejemplo 16.5.1: Tendremos un botón que activa a la vez tres casillas de verificación. En la función se pasa como parámetro el objeto this.form, el cual hace referencia al formulario actual.
<script language="JavaScript">
  function Marcar (formulario){
    formulario.caja1.checked=true;
    formulario.caja2.checked=true;
    formulario.caja3.checked=true;
  }
</script>
<FORM>
    <p><input type="button" name="botón1"
                 value="Marcar las 3 opciones" onClick="Marcar (this.form)"><br>
        <input type="checkbox" name="caja1" value="Opción1">
            Primera Opción<br>
        <input type="checkbox" name="caja2" value="Opción2">
            Segunda Opción<br>
        <input type="checkbox" name="caja3" value="Opción3">
       Tercera Opción<br></p>
</FORM>
[Ejecución]

16.6 OBJETO radio

Este objeto muestra varios botones circulares que muestran distintas opciones, de las cuales se debe escoger una.

Sintaxis:

<INPUT TYPE="radio"
    NAME¨="NombreObjeto"
    VALUE="ValorObjeto"
    [CHECKED]>
"Mensaje"

Donde:

NAME: nombre del objeto. Es corriente utilizar series de botones con el mismo name, de forma que se traten como grupos. Solo puede haber un elementos seleccionado del mismo grupo. En caso de tener que gestionar un único elemento se utiliza la notación array.
VALUE: valor que es devuelto al servidor cuando se confirma un formulario y la casilla está activada. Contiene el atributo value de la definición del objeto.
Mensaje: es el texto que se muestra al lado de botón.

Ejemplo 16.6.1: El siguiente ejemplo consta de un cuadro de texto, tres botones de radio y un botón. Al pulsar el botón se ejecuta una función que comprueba cuál de los tres botones de radio está activado, y actúa convirtiendo el contenido del cuadro de texto en mayúsculas, minúsculas o dejándola tal y como está.
<script>
  function Cambiar (formulario){
     if (formulario.converTexto[0].checked==true){
	formulario.cuadroTexto.value=formulario.cuadroTexto.value.toUpperCase();
    }else{
	if (formulario.converTexto[1].checked==true){
		formulario.cuadroTexto.value=formulario.cuadroTexto.value.toLowerCase();
	}
    }
 }
</script>
<FORM NAME="FormTexto">
    <p><input type="text" size="25" name="cuadroTexto"><br>
    <input type="radio" name="converTexto" value="May">Mayúsculas<br>
    <input type="radio" name="converTexto" value="Min">Minúsculas<br>
    <input type="radio" name="converTexto" value="Igual">Sin Cambios<br>
    <input type="button" name="boton" value="convertir" 
           onclick="Cambiar(this.form)"> </p>
</FORM>
[Ejecución]

16.7 OBJETO select

Defina una lista de selección.

Sintaxis:

<SELECT
    NAME¨="Nombre"
    [SIZE="Numero"]
    [MULTIPLE]
    <OPTION VALUE="valor" [SELECTED]>TextoElemento1
        ..............
    <OPTION>Textoelemento
</SELECT>

Donde:

NAME: contiene el atributo name de la definición select.
SIZE: número que determina la cantidad de elementos visibles de la lista. Opcional.
MULTIPLE: activando esta opción se podrá seleccionar más de un elemento de la lista.
OPTION: especifica un elemento para la lista. El mensaje que muestra el elemento debe ponerse a continuación (TextoElemento). Las option pueden gestionarse mediante notación de array.
VALUE: especifica el valor que se devuelve al servidor (o al programa) cuando se valida el formulario.
SELECTED: especifica que elemento aparecerá seleccionado por defecto. Opcional.
TextoElemento: texto que se visualizará en el formulario acompañado a cada elemento de la lista.

Propiedades

*length*	Contiene el número de elementos de la lista.
*name*	Contiene el nombre del objeto definido en name. Es el array que contiene todos los elementos de la lista. Para referenciar un elemento de manera individual, se debe utilizar la notación array con esta propiedad.
*selectedIndex*	Contiene el índice de la opción seleccionada. Si la lista es de selección múltiple contiene el índice del primer elemento seleccionado.
*options*	Esta propiedad contiene un array al cual podemos acceder con las siguientes propiedades.
*defaultSelected*	Contiene el índice seleccionado por defecto en la lista.
*index*	Contiene el índice de una opción.
*length*	Contiene el número de elementos de la lista.
*name*	Contiene el atributo name de la definición del select.
*selected*	Contiene true o false, dependiendo de sí el elemento está o no seleccionado.
*selectedIndex*	Contiene el valor del elemento seleccionado en la lista.
*texto*	Contiene el texto que acompaña al elemento de la lista (aquel que sigue a cada <option>).

Ejemplo 16.7.1: Se muestra una lista de selección en la cual al elegir una montaña se muestra en otra lista el país donde se encuentra

<script language="JavaScript">
  function mostrarpais(lista,texto){
    if (lista.selectedIndex==0) texto.value="Rusia";
    else
        if (lista.selectedIndex==1) texto.value="Suiza";
        else
                if (lista.selectedIndex==2) texto.value="Italia";
                else
                    if (lista.selectedIndex==3) texto.value="Chile";
  }
</script>
  <FORM NAME="viajes">
    <p>Selecciona una montaña 
    <select name="Montaña" size="1"
         onchange="mostrarpais(this,viajes.pais)">
            <option>URALES </option>
            <option>ALPES </option>
            <option>APENINOS </option>
            <option>ANDES </option>
    </select> El pais de la montaña es:

    <input type="text" size="20" name="pais"> <br>
</FORM>

[Ejecución]

16.8 OBJETO pasword

Este tipo se utiliza generalmente para la introducción de las claves de acceso. Este objeto presenta un cuadro de texto en el cual no se el texto que se escribe no es legible.

Ejemplo: El siguiente ejemplo pide la clave de usuario permitiendo ver el contendio con un botón

Introduzca la clave de usuario:
<input type="password" name="clave">

[Ejecución]

La información que contiene el campo es accesible desde el código JavaScript utilizando la propiedad VALUE del campo

16.9 EVENTOS: onReset, onSubmit, onSelect

Cuando el formulario se rellena, es necesario que la información que contiene sea enviada al servidor. Esta operación se realiza con el método submit. Para ello se debe utilizar la siguiente instrucción dentro del formulario:

<input type=submit value="Enviar">

Es conveniente comprobar la correcta entrada de los datos del formulario para una mejor comunicación entre el emisor y el receptor. En la comprobación, además de rechazar las entradas incorrectas, se impiden las modificaciones en los cuadros de entrada, se confirma el envío del formulario por correo electrónico, se evalúan los formularios de pedidos, o se limita la longitud de los textos. Para ello podemos utilizar una cabecera de formulario de este tipo:

<FORM ACTION="mailto:ppp@aaaa.com"  
    METHOD="post" 
    ENCTYPE="text/plain"
    onSumit="return test()">

Donde test() es una función que comprueba la correcta introducción de los textos y devuelve false en el caso de que las entradas tengan algún error. El formulario es enviado solamente si onSumit devuelve el valor true, sino se emite un mensaje de error.

El evento onReset se ejecuta cuando se pulsa el botón de formulario Reset; el evento onSubmit cuando se pulsa el botón de enviar formulario. Estos eventos son aplicables al objeto form.

El evento onSelect se ejecuta cuando el usuario selecciona un texto en un área o un cuadro de texto de un formulario. Es aplicable a los elementos de formulario Text y Textarea.

Ejemplo 16.9.1: Muestra un formulario con un campo de texto y dos botones, uno para borrar el contenido (reset) y otro para enviar la información a la dirección de correo indicada en la cabecera del formulario (submit). El formulario detecta la pulsación de los botones correspondientes y activa el evento correspondiente y ejecuta la acción que tiene asignada cada uno de ellos. Si se realiza una selección en el campo de texto definido se activa el evento onSelect y se ejecuta la acción que tiene asignada.
<FORM
    ACTION="mailto:ppp@tala.com"
    METHOD="post"
    ENCTYPE="text/plain"
   onReset="return confirm('¿Quiere borrar todas las entradas?')"
   onSubmit="return confirm('¿Desea enviar la información?')">
   Dirección de correo:
   <INPUT TYPE="text" NAME="direccion" onSelect="alert('Si pulsas Contro+C podrás copiar la información')"<p>
   <INPUT TYPE="reset" VALUE="Borrar el contenido">
   <INPUT TYPE="submit" VALUE="Enviar">
</FORM>
[Ejecución]

Ejercicios

Ejercicio 16.1: Hacer una página web con el color de fondo verde y que contenga un botón cuyo valor sea "AZUL". Si el botón tiene como valor AZUL al pulsarlo el color de fondo debe cambiar a azul y el valor del botón a "VERDE". Si el botón tiene como valor VERDE, al pulsarlo el botón de fondo debe cambiar a verde y el valor del botón a "AZUL".

Ejercicio 16.2: Hacer un formulario que pida el nombre y los apellidos y al activar un botón nos muestre una cadena que contenga el nombre con el apellido. La primera letra del nombre y del apellido deben estar en mayúsculas y las demás en minúsculas.

Ejercicio 16.3: Añadir al ejercicio anterior un botón que nos muestre el navegador que estamos utilizando y la plataforma.

Ejercicio 16.4: Hacer una web con un formulario que permita introducir dos números en distintos cuadros de texto y ver la suma de éstos en otro cuadro cuando se pulse un botón.

Ejercicio 16.5: Analiza el código de la siguiente función:

function esnumero (campo){
	var cadena=false;
	for (i=0;i<campo.value.length;i++){
		if ((campo.value.substring(i,i+1)<"0") || (campo.value.substring(i,i+1)>="9"))
			cadena=true;
	}

	if (cadena){
		alert("Sólo se permiten cifras en los campos de texto");
		campo.value="0";
		campo.focus();
		campo.select();
	}
}

Construye un formulario que permita la introducción de dos números en distintos campos de texto. Al pulsar un botón de formulario se deben sumar los números y mostrar el resultado en la web. Utilizar la función anterior para comprobar que los datos introducidos son sólo números y no hay otros caracteres. Esta comprobación se debe hacer cada vez que un campo de texto pierda el foco (evento onBlur)

Ejercicio 16.6: Cambiar el bucle for por while en la función esnumero para que una vez que encuentre un caracter que no sea número salga del bucle.

Ejercicio 16.7: Hacer una web que nos pida la fecha de nacimiento en un cuadro de texto. La fecha se debe introducir con el formato (dd/mm/aa). Al pulsar un botón la web nos indicará los años que tenemos. Recordar las funciones de cadenas para extraer los datos de dd, mm, aa.

Ejercicio 16.8: Modificar la web anterior de tal forma que nos pida el nombre y la ciudad según entremos en ella. La web debera tener un botón que cierre la ventana, y si ésto sucede nos debe mostrar un mensaje de despedida en el que muestre nuestro nombre y ciudad.

Ejercicio 16.9: Añadir a la web anterior un botón que abra en una ventana nueva el ejercicio 16.2, la nueva ventana debe tener una tamaño de 300x300, sin barra de desplazamiento y debe situarse en las coordenadas de pantalla 50x100, además el color de fondo de la nueva ventana se lo cambiaremos a rojo.

Ejercicio 16.10: Hacer una web con tres cuadros de texto y un botón. El primer cuadro de texto es para introducir el nombre y los dos apellidos, el segundo para introducir la nacionalidad y el tercero para la dirección de correo electrónico. El botón sirve para validar o inicializar los datos.

En el cuadro utilizado para introducir el nombre y el primer apellido se debe comprobar que la entrada sea lógica (es decir, ha de contar como mínimo un espacio en blanco entre la posición 0 y la posición length-1 de la propiedad value). Si la entrada no es correcta ha de mostrar un mensaje con una ventana alert notificando la circunstancia. Esta comprobación se debe realizar cuando el campo de texto pierde el foco, en el caso de que la entrada no sea correcta se debe dar el foco al campo de nuevo.
El cuadro para introducir la nacionalidad ha de tener un valor por defecto. Cuando coja el foco se ha de seleccionar automáticamente su contenido.
Cuando se pulse el botón se ha de llamar a una función que muestre una ventana de confirmación (confirm), si en ese cuadro se pulsa el botón Aceptar se dan por buenas las entradas (en este caso el programa no ha de hacer nada más) y si se pulsa el botón Cancelar se han de inicializar todos los cuadros de texto, el del nombre en blanco y el de la nacionalidad el valor que tenga por defecto.

Ejercicio 16.11: En muchos cuadros de texto solo permiten introducir un número concreto de caracteres y si los superas no se acepta la entrada. Hacer un formulario de subscripción de una web en el que se pida: la dirección web, el título y un breve resumen que no supere los 30 caracteres (con texarea) y el mail de contacto. Los distintos objetos se deben solicitar en el orden indicado y haremos el siguiente control: cuando el cuadro del resumen pierda el foco se debe analizar el tamaño del texto introducido y , si está vacío o tiene más de 30 caracteres se debe emitir un mensaje de aviso y pasarle de nuevo el foco para rectificar. Incluir un botón para borrar todas las entradas y otro para enviar la información del formulario a una dirección de correo.

Ejercicio 16.12: Hacer un formulario para introducir los datos de un curriculum y enviarlos a una dirección de correo. El formulario debe constar de los siguientes campos:

Nombre completo (text)
Dirección (text)
Cursos realizados (textarea)
Una casilla de verificación para cada uno de los siguientes datos:
- Carnet de conducir
- Disponibilidad de viajar
Una botón circular para elegir entre las siguiente opciones de Preferencia de horario:
- Mañana
- Tarde
Una lista de selección que permita elegir una de las siguiente opciones para el Nivel de estudios:
- Estudios primarios
- Estudios medios
- Estudios superiores

Ejercicio 16.13: Añadir al formulario la posibilidad de introducir una contraseña. La contraseña se debe introducir dos veces y al finalizar la introducción de la segunda vez se debe comprobar que los valores son iguales. En caso de que esto no suceda ésto se debe mostrar un mensaje, eliminar el contenido de los dos cuadros y devolver el foco al primero donde se solicita la contraseña..

Enlaces interesantes

http://perso.wanadoo.es/catwalk/Inicio.html

*checked*	Contiene el valor true si el elemento está activo y false si no lo está. Se puede aplicar a botones pulsables, cuadros de control y botones de opción
*name*	Almacena el nombre del elemento de formulario, según se definió en la propiedad NAME. Se puede utilizar con todos los elementos de formulario.
*form*	Aquí se guarda el formulario en el que se encuentra el elemento en cuestión. Detrás de la propiedad FORM se pueden escribir todos los métodos y propiedades del objeto forms. Se puede utilizar con todos los elementos de formulario.
*type*	Guarda el tipo al que pertenece un elemento de formulario. Se puede utilizar con todos los elementos de formulario.
*value*	Guarda el valor introducido en un elemento de formulario o bien el valor asignado a este elemento. Se puede aplicar a todos los elementos de formulario.
*defaultValue*	Contiene el texto definido en VALUE. Esta propiedad es aplicable los cuadros de texto.

*blur()*	Elimina el foco del elemento en el que se active. Se puede aplicar a todos los elementos de formulario.
*focus()*	Activa el foco del elemento que corresponda. Se puede aplicar a todos los elementos de formulario.
*clic()*	Simula una pulsación en el botón correspondiente. Se puede aplicar a cualquier tipo de botón y cuadro de control.
*select()*	Selecciona el texto completo del cuadro. Se puede aplicar a cuadros de texto.

CURSO DE JAVASCRIPT TERCERA PARTE

13. OBJETOS INCORPORADOS

Jerarquía

13.1 OBJETO window

Propiedades

Métodos

Ejercicios

Propiedades

Métodos

Ejercicios

Propiedades

Métodos

Ejercicios

Propiedades

Métodos

Ejercicios

Propiedades

Métodos

Ejercicios

Ejercicios

14. EVENTOS

14.1 onAbort

14.2 onError

14.3 onLoad y onUnload

14.4 onBlur y onFocus

14.5 onChange

14.6 onClick y onDblClick

14.7 onKeyDown, onKeyPresse, onKeyUp

14.8 onMouseOver, onMouseOut

14.9 onMouseDown, onMouseUp

14.10 onResize

15. IMÁGENES

15.1 CAMBIAR IMÁGENES DINÁMICAMENTE

Ejercicios

16. FORMULARIOS

16.1 OBJETO form

Propiedades

Métodos

Subobjetos

Propiedades

Métodos

16.2 OBJETO button

16.3 OBJETO text

16.4 OBJETO textarea

16.5 OBJETO checkbox

16.6 OBJETO radio

16.7 OBJETO select

Propiedades

16.8 OBJETO pasword

16.9 EVENTOS: onReset, onSubmit, onSelect

Ejercicios

Enlaces interesantes

CURSO DE JAVASCRIPT
TERCERA PARTE