Manual Javascript

Manual de JavaScript

JAVASCRIPTJAVASCRIPT

CONTROL DE VENTANAS SECUNDARIAS CON JAVASCRIPT

Una de las utilidades más interesantes de Javascript es el control de ventanas secundarias (popups en inglés). Las ventanas secundarias son las que se abren adicionalmente a la ventana principal del navegador. Suelen ser más pequeñas que las ventanas normales y generalmente no tienen los menús del navegador, barra de direcciones, etc.Con Javascript podemos controlar los popups para hacer cosas como abrirlos, cerrarlos, darles el foco, pasar información de una ventana a otra, etc. En este manual veremos cómo se hacen todas estas cosas con las ventanas secundarias para aprender a controlarlas prefectamente. El índice que vamos a tratar con respecto al tema de las ventanas secundarias o popups es el siguiente: 1. Abrir ventanas secundarias 2. Comunicación entre ventanas

2.1.1. Acceso desde ventana principal a ventana secundaria 2.1.2. Acceso desde ventana secundaria a ventana principal 2.1.3. Acceso a variables y funciones de otras ventanas

3. Cerrar Ventanas

ABRIR VENTANAS SECUNDARIAS EN JAVASCRIPT

Para ello utilizamos el método open del objeto window, que es el encargado de abrir la ventana. La sintaxis del método es la siguientewindow.open(URL,nombre_ventana,parametros_configuración)

El primer parámentro es la URL de la página que deseamos mostrar en la ventana secundaria. El segundo parámetro es el nombre que le damos a la ventana. Este nombre es utilizable desde el HTML para que sirva como target de enlaces o formularios. Es decir, si colocamos un enlace y queremos que actualice la ventana secundaria ponemos el atributo TARGET del enlace igual al nombre de la ventana. El tercer parámetro es la configuración de la ventana, para indicar el tamaño, qué barras de menús se tienen que ver y cuales no, si tiene o no barras de desplazamiento, etc. A continuación podemos ver un ejemplo de utilización del método open:window.open("pagina.html","miventana","width=300,height=200,menubar=no")

Apertura y configuración de popups con javascript

En determinadas ocasiones es muy útil abrir un enlace en una ventana secundaria, es decir, una ventana aparte que se abre para mostrar una información específica. Algunas ventajas de abrir un enlace en una ventana secundaria pueden ser que:

El usuario no se marcha de la página donde estaba el enlace. La ventana secundaria se puede configurar libremente con lo que se pueden hacer ventanas más

grandes o pequeñas y con más o menos menús. En general, el grado de control de la ventana secundaria utilizando Javascript aumenta.

Para abrir una ventana secundaria podemos hacerlo de dos maneras, con HTML y con Javascript. Veamos cada una de ellas.

Abrir una ventana con HTML

Se puede conseguir abrir una ventana secundaria muy fácilmente con tan solo HTML. Para ello podemos utilizar el atributo TARGET de las etiquetas HREF. Si ponemos target="_blank" en el enlace, la página se abrirá en una ventana secundaria. También podemos poner target="xxx" para que el enlace se presente el la ventana llamada xxx o en el frame xxx.El enlace tendría que tener esta forma: <a href="mipagina.html" target="_blank">

El problema de abrir una página secundaria con HTML consiste en que no podemos definir la forma de ésta ni podremos ejercer mayor control sobre élla, tal como comentábamos entre las ventajas de abrir una ventana secundária con Javascript. La ventana que se abre siempre será como el usuario tenga definido por defecto en su navegador. Abrir una ventana con Javascript

DGH Informática y Logística- 1 -


Para abrir una ventana con Javascript podemos utilizar la sentencia window.open(). No pasa nada por que no conozcas Javascript, puesto que es muy sencillo utilizarlo para este caso. Vamos a ver paso a paso cómo abrir una ventana secundaria utilizando Javascript.

Sentencia Javascript para abrir una ventana Sentencia Javascript para abrir una ventana

La sentencia es simplemente la función window.open(), lo más complicado es saber cómo utilizar esa función, pero ahora veremos que no reviste ninguna complicación.

La función window.open() recibe tres parámetros, que se colocan dentro de los paréntesis, de este modo: window.open(URL,nombre_de_la_ventana,forma_de_la_ventana)

Veamos rápidamente cada uno de estos parámetros por separado. URL: representa el URL que deseamos abrir en la ventana secundaria, por ejemplo http://www.desarrolloweb.com nombre_de_la_ventana: es el nombre que se le asigna a esta ventana para dirigir enlaces con el atributo target del HTML forma_de_la_ventana: se indica el aspecto que va a tener la ventana secundaria. Por ejemplo se puede definir su altura, anchura, si tiene barras de desplazamiento, etc Veamos un ejemplo de sentencia Javascript completa para abrir una ventana secundaria: window.open("http://www.desarrolloweb.com" , "ventana1" , "width=120,height=300,scrollbars=NO")

Esto quiere decir que abra la página inicial de desarrolloweb.com en una ventana secundaria a la que vamos a llamar ventana1. Además, la ventana será de 120 pixels de ancho, 300 de alto y no tendrá barras de desplazamiento. Una aclaración adicional, si después de abrir esa ventana colocamos otro enlace en la página que abría la ventana cuyo atributo target está dirigido hacia el nombre_de_la_ventana (en este caso ventana1), este enlace se mostrará en la ventana secundaria.

Función que abre una ventana Función que abre una ventana

Lo más cómodo para abrir una ventana es colocar una función Javascript que se encarge de las tareas de abrirla y que reciba por parámetro la URL que se desea abrir. El script es sencillo, veámoslo a continuación: <script language=javascript> function ventanaSecundaria (URL){ window.open(URL,"ventana1","width=120,height=300,scrollbars=NO") } </script>

Colocamos un enlace Colocamos un enlace

Este enlace no debe estar dirigido directamente a la página que queramos abrir, sino a la sentencia Javascript necesaria para abrir la ventana secundaria. Para ejecutar una sentencia Javascript con la pulsación de un enlace lo hacemos así: <a href="javascript:sentencia_javascript_para_abrir_la_ventana">

El enlace llama a la función que abre la ventana El enlace llama a la función que abre la ventana

Ahora Veamos cómo quedaría todo ese enlace en la página. <a href="javascript:ventanaSecundaria('http://www.desarrolloweb.com')"> Pincha en este enlace para abrir la ventana secundaria</a>

Hay que fijarse que las comillas simples que se colocan para definir el URL que se pasa como parámetro de la función ventanaSecundaria(). Son comillas simples porque el href del enlace ya tiene unas comillas dobles, y dentro de comillas dobles siempre se han de utilizar comillas simples a no ser que deseemos cerrar las comillas dobles.

Parámetros para dar forma a una ventana Parámetros para dar forma a una ventana

Estos atributos los puedes utilizar en la función window.open() para definir la forma que deseas que tenga tu ventana secundaria.



Width Ajusta el ancho de la ventana. En pixels

Height Ajusta el alto de la ventana

Top Indica la posición de la ventana. En concreto es la distancia en pixels que existe entre el borde superior de la pantalla y el borde superior de la ventana.

Left Indica la posición de la ventana. En concreto es la distancia en pixels que existe entre el borde izquierdo de la pantalla y el borde izquierdo de la ventana.

Scrollbars Para definir de forma exacta si salen o no las barras de desplazamiento. scrollbars=NO hace que nunca salgan. Scrollbars=YES hace que salgan (siempre en ie y solo si son necesarias en NTS).

Resizable Establece si se puede o no modificar el tamaño de la ventana. Con resizable=YES se puede modificar el tamaño y con resizable=NO se consigue un tamaño fijo.

Directories (barra directorios)

A partir de aquí se enumeran otra serie de propiedades que sirven para mostrar o no un elemento de la barra de navegación que tienen los navegadores más populares, como podría ser la barra de menús o la barra de estado.

Cuando ponemos el atributo=YES estamos forzando a que ese elemento se vea. Cuando ponemos atributo=NO lo que hacemos es evitar que ese elemento se vea.

Location (barra direcciones)

Menubar (barra de menús)

Status (barra de estado)

Titlebar(la barra del título)

Toolbar (barra de herramientas)

Abrir una ventana sin un enlaceAbrir una ventana sin un enlace

En otras ocasiones desearemos abrir una ventana secundaria automáticamente, es decir, sin necesidad de que el usuario pulse sobre ningún enlace. En este caso, el código de la función ventanaSecundaria nos sirve también y habrá que añadir una línea de código Javascript a continuación de la función ventanaSecundaria. Esta línea a añadir simplemente será una llamada a la función que se ejecutará según se está cargando la página. Veamos como quedaríi este código: <script language=javascript> function ventanaSecundaria (URL){ window.open(URL,"ventana1","width=120,height=300,scrollbars=NO") } ventanaSecundaria("http://www.desarrolloweb.com"); </script>

Queda en negrita lo que sería la llamada a la función que abre la ventana secundaria, como está fuera de una función se ejecuta según se está cargando la página.

COMUNICACIÓN ENTRE VENTANAS

La gracia del trabajo con ventanas secundarias consiste en que tanto la ventana principal como el popup se puedan comunicar entre si y mandarse órdenes y comandos desde una a la otra. La comunicación podrá ser en dos sentidos:

Desde la ventana principal a la secundaria. Desde la ventana secundaria a la principal.

Si queremos comunicar desde la ventana principal hacia la secundaria necesitamos disponer de una referencia de dicha ventana secundaria o popup. La referencia la será el nombre que le pongamos a la ventana secundaria. A continuación en este artículo veremos cómo asignar un nombre a un popup. Si la comunicación es desde la ventana secundaria a la principal debemos utilizar el atributo opener de dicha ventana secundaria, que referencia a la ventana principal. Tanbién veremos más adelante este tipo de comunicación.

Nombre de la ventana con Javascript



Cuando abrimos una ventana utilizando el método open del objeto window asignamos un nombre a la ventana para referirnos a ella utilizando HTML. Pero si queremos referirnos a ella utilizando Javascript necesitaremos utilizar otro nombre. La referencia Javascript a la ventana que se acaba de abrir se obtiene gracias al valor de retorno del método open. Para guardar la referencia asignamos el valor de retorno del método a una variable. A partir de ese momento la variable será un sinónimo del objeto window, es decir, será como si fuera el objeto window del popup y por lo tanto podremos acceder a los métodos y propiedades de la ventana secundaria a partir de esa variable. referenciaVentana = window.open(“mi_url.html”,”nombre”,”width=100,height=300”)

Luego podremos acceder a los métodos y propiedades de esta manera. referenciaVentana.close() referenciaVentana.document.bgColor = “red”

EJEMPLO DE ACCESO A UN POPUP

Vamos a hacer un ejemplo de acceso a una propiedad del objeto window de la ventana secundaria. Se trata de la propiedad location del objeto window, que no hemos visto todavía en ejemplos. Recordemos que esta propiedad contiene el URL del documento que estamos viendo y que si la cambiamos cambia la página que se está viendo. Nuestro ejemplo consiste en una página que va a abrir la ventana secundaria. Además la página tendrá un formulario con un campo de texto y un botón. En el campo de texto podremos colocar URLs y al pulsar el botón haremos que en el popup se muestre la URL que se haya escrito.

Al abrir la ventana guardamos la referencia en la variable miPopup. var miPopup miPopup = window.open("about:blank","miventana","width=600,height=400,menubar=no")

Si nos fijamos veremos que el URL de inicio de la ventana es about:blank, esto quiere decir que la ventana secundaria se inicializará con un documento en blanco. (Si escribimos about:blank en la barra de direcciones de un navegador veremos que la página se pone en blanco)

Ahora vemos el formulario que contiene el campo de texto y el botón. <form name=formul> <input type=text name=url size=30 value="http://"> <input type=button value="Mostrar URL en popup" onclick="muestraURL()"> </form>

No tiene nada que destacar, de modo que pasamos a ver la función que se encarga de actualizar la URL de la ventana secundaria.

function muestraURL(){ miPopup.location = document.formul.url.value }

La función es extremadamente simple. Sólo se accede a la propiedad location de la variable que guarda la referencia Javascript y se actualiza con lo que haya escrito en el campo de texto. La propiedad location de la variable es como la propiedad location de la ventana secundaria. Hay un detalle poco agradable en este ejemplo. Se trata de que al trabajar sobre el formulario de la página que abrimos en primer lugar y luego actualizar el contenido del popup, se queda en segundo plano el popup con el contenido actualizado, tapado por la primera ventana. Esto es porque el foco de la aplicación lo tiene la ventana original, y por eso es la ventana que se ve delante. Sería interesante que al actualizar el contenido del popup se mostrase delante la ventana del popup actualizada. Esto se consigue utilizando el método focus() del objeto window, que coloca el foco de la aplicación en la ventana sobre la que lo invoquemos. La función con esta pequeña modificación quedará así. function muestraURL(){ miPopup.location = document.formul.url.value miPopup.focus() }



Sólo hemos añadido la llamada al método focus() del objeto window correspondiente al popup. ACCESO DESDE EL POPUP A LA VENTANA PRINCIPAL

También podemos acceder desde un popup a la ventana que lo abrió, para acceder a los métodos y propiedades de la ventana, o hacer lo que deseemos con Javascript. Para ello, en el popup hay una variable declarada que es opener. En realidad es una propiedad del objeto window del popup, que hace referencia al objeto window de la ventana "abridora" (opener). Para ilustrar el funcionamiento de opener vamos a hacer un ejemplo que consiste en una página principal, que tiene un formulario donde, entre otros campos, debemos introducir un teléfono con su prefijo internacional. En caso de que no conozcamos los prefijos internacionales nos permite pulsar sobre un botón y mostrar una ayuda. La ayuda se ofrece a través de un popup que contiene la lista de los prefijos internacionales para que seleccionemos uno de ellos. En el momento que se selecciona se debe actualizar el formulario de la ventana padre y cerrar la ventana secundaria. Ahora vamos a echar un vistazo a la página principal, que contiene el formulario donde se debe escribir el prefijo y el número. Al lado del campo de texto donde se coloca el prefijo hemos puesto un botón que sirve para mostrar el popup de ayuda. Al pulsar el botón llamamos a la función abreVentana() que será la encargada de abrir el popup con la lista de prefijos. <html> <head> <title>Formulario prefijos</title> <script> var miPopup function abreVentana(){ miPopup = window.open("prefijos.html","miwin","width=300,height=150,scrollbars=yes") miPopup.focus() } </script> </head> <body>

<form name=formul> <table cellspacing="3" cellpadding="3" border="0"> <tr> <td align="center">Prefijo</td> <td align="center">Número</td> </tr> <tr> <td align="center"> <input type=text name=prefijo value="+" size=3 maxlength=3> <input type="Button" value="?" onclick="abreVentana()"> </td> <td align="center"> <input type=text name=numero value="" size=10 maxlength=10> </td> </tr> </table> </form>

</body> </html>

La función abreVentana se tiene que entender perfectamente. El resto de la página es un simple formulario HTML metido dentro de una tabla para que quede mejor maquetado. Ahora veamos la página HTML del popup, que es la que utiliza la referencia opener a la ventana "abridora", para actualizar el campo del formulario donde hay que colocar el prefijo.

<html> <head>



<title>Prefijos internacionales</title> <script> function ponPrefijo(pref){ opener.document.formul.prefijo.value = pref window.close() } </script> </head>

<body> <h1>Lista de prefijos internacionales</h1> <form name=fprefijos> España: <input type="Button" value="+34" onclick="ponPrefijo('+34')"> <br> Holanda: <input type="Button" value="+31" onclick="ponPrefijo('+31')"> <br> Gran Bretaña: <input type="Button" value="+44" onclick="ponPrefijo('+44')"> <br> Estados Unidos: <input type="Button" value="+01" onclick="ponPrefijo('+01')"> <br> Bélgica: <input type="Button" value="+32" onclick="ponPrefijo('+32')"> <br> Grecia: <input type="Button" value="+30" onclick="ponPrefijo('+30')"> </form>

</body> </html>

Tenemos un formulario con una serie de botones para seleccionar el prefijo. Todos llaman a la función ponPrefijo() pasándole el prefijo seleccionado. La función ponPrefijo() debe poner en un campo del formulario de la ventana que abrió el popup el valor del prefijo que ha recibido por parámetro. Para ello accede a la propiedad opener del objeto window, para tener acceso a la ventana principal (abridora) y desde allí accede a su documento, al formulario y a la propiedad value del campo de texto donde hay que escribir el prefijo. Por último cierra el popup con el método close() del objeto window. ACCESO A VARIABLES Y FUNCIONES DE OTRAS VENTANAS

Desde una ventana también tenemos acceso a las variables y funciones que hayamos declarado en otras ventanas. Gracias a esto, desde un popup podemos controlar el estado de las variables de la página principal y llamar a funciones para hacer cualquier cosa que necesitemos. El acceso a las variables y las funciones se realiza a través de los objetos ventana. Por ejemplo, si deseamos desde una ventana tener acceso a una función de un popup colocaríamos su objeto ventana seguido de un punto y el nombre de la función a la que queramos acceder, como si fuese un método nuevo del objeto ventana. Las variables se acceden como si fueran propiedades del objeto ventana. El código sería algo parecido a esto. Para acceder a una variable miPopup.miVariable

Para acceder a una función

miPopup.miFunción()



Vamos a ver un ejemplo para ilustrarlo. Tenemos una página con un número cualquiera de campos de texto en un formulario y una función que sirve para inicializar los datos de los campos de texto a 0. En esta página abriremos una ventana secundaria desde la cual invocaremos a la función que inicializa los campos de texto. La página principal tendrá una parte con un script para definir la función y abrir el popup y otra parte con el formulario que contiene los campos de texto. Se puede ver a continuación su código.

<html> <head> <title>Inicializador de formularios</title> <script> function inicializaCampos(){ for (i=0;i<document.forms[0].elements.length;i++) document.forms[0].elements[i].value = "0" } var miPopup miPopup = window.open("llamadas-desde-ventanas-popup.html","miventana","width=308,heig ht=70,menubar=no") </script> </head>

<body> <form> <input type="Text" name="t1" value="0" size="4" maxlength="100"> <input type="Text" name="t2" value="0" size="4" maxlength="100"> <input type="Text" name="t3" value="0" size="4" maxlength="100"> <input type="Text" name="t4" value="0" size="4" maxlength="100"> <input type="Text" name="t5" value="0" size="4" maxlength="100"> <input type="Text" name="t6" value="0" size="4" maxlength="100"> <input type="Text" name="t7" value="0" size="4" maxlength="100"> </form> </body> </html>

En el popup podremos encontrar el código necesario para invocar a la función inicializaCampos() que pertenece a la ventana principal. La llamada a la función de la ventana "abridora" se realiza al pulsar un botón.

<html> <head> <title>Popup Inicializador de formularios</title> <script> function llamadaOtraVentana(){ //llamada a la función de ventana abridora window.opener.inicializaCampos() window.opener.focus() } </script> </head>

<body> <form> <input type="button" value="Llamar a función de otra ventana" onclick="llamadaOtraVentana()"> </form> </body> </html>

CERRAR VENTANAS CON JAVASCRIPT



Para cerrar la ventana del navegador debemos utilizar el método close() del objeto window de la vetana que deseamos cerrar. Es muy sencillo, aun así, vamos a ver un ejemplo sobre cerrar ventanas. El ejemplo consta de una página que tiene un botón que abre una ventana secundaria o popup. Además, tendrá otro botón que cerrará la ventana secundaria. Por su parte, la ventana secundaria tendrá un botón que permitirá cerrarse a ella misma. Luego de tratar este ejemplo comentaremos el caso especial de cerrar la ventana principal desde el popup y las pegas que tiene.

La página principal tendría esta forma:

<html> <head> <title>Ventana Principal</title> <script> //creamos la variable ventana_secundaria que contendrá una referencia al popup que vamos a abrir //la creamos como variable global para poder acceder a ella desde las distintas funciones var ventana_secundaria

function abrirVentana(){ //guardo la referencia de la ventana para poder utilizarla luego ventana_secundaria = window.open("cerrar_window2.html","miventana","width=300,height=200,menubar=no") }

function cerrarVentana(){ //la referencia de la ventana es el objeto window del popup. Lo utilizo para acceder al método close ventana_secundaria.close() } </script> </head>

<body> Esta es la ventana principal <form> <input type=button value="Abrir ventana secundaria" onclick="abrirVentana()"> <br> <br> <input type=button value="Cerrar ventana secundaria" onclick="cerrarVentana()"> </form>

</body> </html>

Contiene un script en la cabecera de la página con las funciones para abrir y cerrar la ventana. Además, como ya se indicó anteriormente en este manual, se debe guardar una referencia a la ventana que se acaba de abrir para poder realizar acciones sobre ella posteriormente, en este caso cerrarla. Como la referencia de la ventana se crea en la función abrirVentana() y luego se utilizará en la función cerrarVentana(), dicha referencia deberá declararse como global o de lo contrario sólo tendría validez mientras la función abrirVentana() estuviera ejecutándose y, cuando pretendiésemos utilizarla en la función cerrarVentana(), nos diría que esa referencia ya no existe. Así que disponemos de una referencia global a la ventana que va a abrirse y dos funciones que abren el popup guardando la referencia y cerrar el popup utilizando la referencia de la ventana a cerrar. Estas dos funciones se llaman desde dos botones de la página, que hemos colocado dentro de un formulario.

Nota: Hay que señalar que puede haber un error javascript si se pretende cerrar la ventana antes de abrirla. Para evitarlo podemos controlar que realmente la ventana está abierta antes de ejecutar el método close() de su objeto window, pero esa es una práctica que veremos en ejercicios más adelante.

Por su parte, el popup tiene un código como el siguiente.



<html> <head> <title>Ventana Secundaria</title> <script> function cerrarse(){ window.close() } </script> </head>

<body>

Esta es la ventana del popup

<form> <input type=button value="Cerrar" onclick="cerrarse()"> </form>

</body> </html>

Contiene tan solo una función para cerrarse ella misma, que lo único que hace es ejecutar el método close() sobre su propio objeto window. También hemos colocado un botón que se ha configurado para llamar a la función que cierra la ventana cuando se le haga clic.

Un detalle sobre cerrar ventanas

En cualquier momento podemos cerrar una ventana secundaria utilizando el método close() del objeto window. En el ejemplo anterior hemos visto cómo se cierran ventanas y es muy sencillo. En cualquier momento podemos cerrar una ventana, pero si intentamos cerrar una ventana que no se ha abierto con Javascript (sin utilizar window.open()) nos saldrá una caja de confirmación que pregunta al usuario si de verdad quiere cerrar la ventana.

Podemos ver esta caja de confirmación al pulsar el botón siguiente, que intentará cerrar esta ventana.

Nota: La caja de confirmación que hemos podido ver aparece como elemento de seguridad, para evitar que un programador malicioso intente cerrar una ventana que hemos abierto nosotros como usuarios y que, en teoría, no tiene permiso para cerrar. Así que a partir de determinado navegador decidieron preguntar al usuario si realmente desea que se cierre esa ventana. De todos modos, las cosas pueden variar de unos casos a otros, ya que en Netscape 7 ya no preguntan si se desea de verdad cerrar la ventana. Por su parte, si en Internet Explorer 6 la ventana se abrió con un enlace HTML con el atributo target="_blank" tampoco aparece la ventana de la que estamos hablando.

Es sólo un detalle que no tiene mucha importancia, pero para las personas que nunca han experimentado con el trabajo con ventanas secundarias en Javascript, resultará sorprendente que el navegador haga esa pregunta, que probablemente nunca hayamos visto. Una cosa más, sólo ocurre esto en navegadores modernos, aunque actualmente le va a pasar a casi todos los usuarios.

SUBMENÚ EN OTRA VENTANA

Vamos a realizar un pequeño ejemplo sobre cómo trabajar con ventanas secundarias o popups. Las ventanas secundarias son esas ventanitas que se abren a parte de la ventana principal del navegador y por lo general molestan un poco en determinados sitios gratuitos. Para abrir esas ventanas se utiliza el lenguaje Javascript, más concretamente, el método open() del objeto window. En este ejemplo vamos a ir un poco más allá, vamos a crear una ventana secundaria y desde ella vamos a acceder a las propiedades de la ventana padre, es decir, la ventana que la abrió. El ejercicio será el siguiente:



Tendremos una página con fondo blanco, un campo de texto vacío y un botón. Cuando se pulse el botón abriremos un popup que contendrá una tabla con los colores puros de HTML. El visitante podrá seleccionar uno de esos colores y entonces el fondo de la página padre cambiará a ese color y el color se escribirá en el campo de texto.

Página padre Página padre

La página original contendrá un simple formulario con un botón y un campo de texto. Además, contendrá el script Javascript necesario para abrir la ventana secundaria. <html> <head> <title>Submenú en ventana a parte</title> <script language="JavaScript"> function lanzarSubmenu(){ window.open("submenu_ventana2.html","ventana1","width=400,height=400,scrollbars=YES") } </script> </head> <body bgcolor="#ffffff"> <form> <input type="text" name="colorin" size="12" maxlength="12"> <br> <br> <input type="button" value="Lanzar submenu" onclick="lanzarSubmenu()"> </form> </body> </html>

La función lanzarSubmenu() es la que contiene el script para abrir el popup. El formulario es de lo más normal. Lo único destacable es el atributo onclick del botón, que sirve para definir las acciones a ejecutar cuando se pulsa el botón, en este caso una llamada a la función que abre la ventana secundaria.

Página secundaria Página secundaria

La página secundaria es un poco más compleja, pero la parte que nos importa a nosotros en este ejercicio es muy sencilla. Lo importante de la página es que tiene que acceder a la ventana padre para modificar su estado y para ello utiliza un objeto Javascript: opener.

El objeto opener está disponible en las páginas que son ventanas secundarias y hace referencia a la ventana que la abrió, es decir, la ventana padre. Dicho de otro modo, el objeto opener en la ventana popup es un sinónimo del objeto window en la ventana padre.

El script que accede a la ventana padre es el siguiente:

<script language="JavaScript"> function actualizaPadre(miColor){ window.opener.document.bgColor = miColor window.opener.document.forms[0].colorin.value = miColor } </script>

La función actualizaPadre() es la encargada de realizar el trabajo. Recibe el código del color sobre el que se ha pulsado. En la primera línea cambiamos el color de la página web padre y en la segunda línea colocamos el código RGB del color recibido por parámetro en el campo de texto. Como vemos, el objeto opener también depende del objeto window de la página, como todos los demás objetos de la jerarquía Javascript.

<table width="80%" align="center" cellpadding="1" cellspacing="1"> <script language="javascript"> var r = new Array("00","33","66","99","CC","FF");



var g = new Array("00","33","66","99","CC","FF"); var b = new Array("00","33","66","99","CC","FF"); for (i=0;i<r.length;i++) for (j=0;j<g.length;j++) { document.write("<tr>"); for (k=0;k<b.length;k++) { var nuevoc = "#" + r[i] + g[j] + b[k]; document.write("<td bgcolor=\"" + nuevoc + "\" align=center><font size=1 face=verdana>"); document.write("<a href=\"javascript:actualizaPadre('" + nuevoc + "')\">"); document.write(nuevoc); } document.write("</a></font></tr>"); } </script> </table>

Lo importante para nosotros ahora es entender que este script crea una tabla con todos los colores puros, colocados en una celda cada uno. Dentro de cada celda se escribe un enlace que llama a la función actualizaPadre() pasándole el código del color se ha de utilizar.

FORMULARIOS

INTRODUCCIÓN

Los formularios son un componente a veces esencial en una página web, ya que permiten la interacción con el usuario, pudiendo conseguir mediante ellos recoger información particular sobre sus gustos, opiniones, datos personales, etc, información que luego deberemos procesar en el servidor web para su correcta interpretación y uso.Este proceso de datos se puede llevar a cabo mediante diferentes tecnologías: CGI, ASP, JSP, etc.Pero si nos limitamos al proceso de datos y elementos de formulario en el lado del cliente, la herramienta más poderosa con la que contamos es sin duda alguna el lenguaje JavaScript (o JScript, como gustan llamarlo los sres. de Microsoft).Mediante JavaScript podemos no sólo validar los datos de cada uno de los campos que formen el formulario, para así poder estar seguros de su validez antes de ser enviados al servidor, si no que también podemos acceder a todos los elementos que forman el formulario y a sus propiedades, con lo que podemos diseñar formularios realmente atractivos y dinámicos, que convertirán nuestras páginas en verdaderas "obras de arte". Y todo esto es posible porque en la propia definición de JavaScript existe un objeto formulario.Este manual no pretende explicar todos los posibles casos de trabajo con formularios en JavaScript, ni mostrar ejemplos complicados en exceso, que más que enseñar algo crearían confusión, si no mostrar las bases de cómo podemos manejar formularios con este lenguaje de programación, dejando al empeño del lector el profundizar más en casos concretos.

EL OBJETO FORMEl objeto form se considera en JavaScript como un subobjeto del objeto document, que a su vez forma parte del objeto predefinido window, por lo que inicialmente la sintaxis para acceder a una cualquiera de sus propiedades o métodos es:window.document.forms.[nombre_formulario].[nonbre_campo].propiedaden la que podemos prescindir de las cadenas forms y window, ya que el navegador considera al formulario particular un objeto por sí mismo.Además, el objeto forms dentro del objeto documents posee dos subpropiedades:index: array que contiene todos los formularios de una página, de sintaxis:document.forms[index]

y donde debemos tener en cuenta que el primer formulario viene indentificado por el índice 0, por lo que para acceder al primer formulario de una página deberemos usar la expresión:document.forms[0]...

length: que contiene el número de formularios que hay en la página, y cuya sintaxis es:document.forms.length



Recordemos que en un formulario HTML un formulario se crea mediante un código del tipo:<FORM NAME="clientes" ACTION="/cgi/clientes:cgi" METHOD="POST" TARGET="cuerpo">...campos del formulariio</FORM>

Como he dicho antes, un formulario es para JavaScript un objeto por sí mismo, y como tal posee unas propiedades, unos métodos y unos eventos propios, que nos van a permitir acceder a cada uno de los elementos que lo forman y poder modificar su diseño y comportamiento dinámicamente, sin necesidad de hacer nuevas peticiones al servidor, ya que todo se va a ejecutar en el lado cliente, estando todo el código necesario dentro de la propia página web.Las principales propiedades del objeto form son:

namename

Es la propiedad más importante del objeto form, ya que nos va a permitir identificar cada formulario con un nombre identificador único, identificador que vamos a usar luego para poder referirnos sin ambiguedades a un formulario de nuestra página en concreto y acceder a sus propiedades y métodos. Por esto, TODA ETIQUETA FORM DEBE TENER SU PROPIEDAD NAME Y NO PUEDE HABER DOS FORMULARIOS CON EL MISMO NOMBRE EN UNA MISMA PÁGINA.

actionaction

Esta propiedad define la URL o URI a donde se van a mandar los datos del formulario; es decir, su valor va a ser una cadena que va a definir la ruta relativa o absoluta en dónde se encuentra el programa o página activa que va a procesar los datos contenidos en los diferentes campos del formulario. Sin el uso de JavaScript esta propiedad sería estática, por lo que una vez incluida en el código inicial de la página permanecería inmutable. Pero mediante JavaScript podemos cambiarla, símplemente refiriéndonos a ella mediante la escritura: document.[nombre_formulario].action="/ruta/programa.cgi"

Esto es especialmente útil cuando por ejemplo debemos mandar los datos del formulario a diferentes páginas JSP dependiendo de uno de los datos introducido en un campo. Como ejemplo, supongamos que en el formulario de nuestra página hay dos checkbox, y que dependiendo de cual marque el usuario debemos enviar los datos bien a la página a.jsp o a la página b.jsp. El código necesario para ello sería:<HTML><HEAD><SCRIPT LANGUAGE= "Javascript"><--function enviar( ){ if ((document.forms.datos.sistema1.checked = = true) && (document.forms.datos.sistema2.checked = = true){ alert('debe hacer una sóla selección) { else if (document.forms.datos.sistema1.checked = = true) document.forms.datos.action = "/jsp/pag_1.jsp" else if (document.forms.datos.sistema2.checked = = true) document.forms.datos.action="/jsp/pag_2.jsp" else alert ('debe hacer una selección') document.forms.datos.submit() }</HEAD><BODY><FORM NAME="datos" ACTION="/jsp/pag_3.jsp" METHOD= "post"><INPUT TYPE="checkbox" NAME="sistema1">Sistema 1<INPUT TYPE="checkbox" NAME="sistema2">Sistema 2<INPUT TYPE="button" VALUE="enviar" ONCLICK="envia( )"></FORM></BODY></HTML>



y con esto los datos serían enviados a una u otro página para su proceso, y en caso de que no se hubiera seleccionado ninguna casilla aparecería un mensaje de error. methodmethod

Este parámetro establece el método de envío de los datos del formulario. Su valor puede ser POST, conveniente cuando queremos enviar una grán cantidad de datos como una cadena contínua, y que es el más usado, o GET, que se emplea cuando queremos pasar unos datos concretos a una página ASP o JSP.También podemos acceder a cambiar esta propiedad dinámicamente, pero no se suele hacer nunca, ya que el método de envío suele estar definido con toda exactitud. No obstante, la sintaxis para acceder a esta propiedad sería: document.forms.[nombre_formulario].method="metodo_elegido"

targettarget

La propiedad target define el nombre de la ventana o frame en la que se van a cargar los resultados de procesar el formulario; es decir, cuando el usuario pincha el botón submit se envían los datos del formulariio al servidor, en el que un programa o página activa procesa los datos, generando de nuevo otra página que se envía al navegador cliente. En la ventana o frame definido por el atributo target se va a cargar esta página de respuesta.Nos puede interesar que dependiendo de la clase de resultado que obtengamos al procesar los datos cambie la ventana en la que se va a mostrar la página de respuesta, e incluso definir las posibles ventanas dinámicamente. Como ejemplo, supongamos que tenemos una página inicial con dos frames: uno superior, en dónde inicialmente existe un mensaje orientativo, y otro central, en el que inicialmente se encuentra el formulario que debe completar el usuario. Nos interesa que si marca el primer radio botón de un grupo de dos la página de respuesta sea otra página que se carge en la ventana central, pero que si el radio botón marcado es el segundo la respuesta sea un mensaje determinado que se muestre en el frame superior. Para ello debemos definir primero una página con dos frames, en la que se cargan la página del mensaje inicial arriba y el formulario abajo. El código de la página del formularios es el que sigue:<HTML><HEAD> <SCRIPT language="JavaScript" type="text/javascript"> function envia( ){ if ((document.forms.datos.sistema1.checked==true) &&(document.forms.datos.sistema2.checked==true)) alert('debe seleccionar una sóla casilla') else if (document.forms.datos.sistema1.checked==true) { document.forms.datos.target="inf"; document.forms.datos.action="pagina1.html"; } else if (document.forms.datos.sistema2.checked==true) { document.forms.datos.action="mensaje2.html"; document.forms.datos.target="sup"; } else alert('debe seleccionar un checkbox'); document.forms.datos.submit() } </SCRIPT></HEAD> <BODY ONLOAD= "document.forms.datos.reset()"><BR><FORM NAME="datos"><INPUT TYPE="Checkbox" NAME="sistema1">sitema 1<INPUT TYPE="Checkbox" NAME="sistema2" >sitema 2<BR><INPUT TYPE="button" VALUE="envía" ONCLICK= "envia( )"></FORM> </BODY></HTML>

elementselements

Esta propiedad es un array o vector que contiene todos los elementos que forman un formulario, sean cuales sean, y mediante ella podemos conocer el número de campos diferentes que tiene el formulario, su tipo, etc, teniendo en cuenta que el primer índice del vector es el 0, como ocurría con el vector forms. Posee dos subpropiedades:



index, que define mediante un índice los diferentes campos que forman el formulario, empezando los índices por el 0, y cuya sintaxis es:document.forms.nombre_formulario.elements[index]

length, que contiene el número de elementos que forman el formulario, y cuya sintaxis es:document.forms.nombre_formulario.elements.length

El uso general de la subpropiedad index puede ser del tipo:<HTML><HEAD> <SCRIPT language="JavaScript" type="text/javascript"> function campo( ) { var f = document.forms.primero.elements[0].name; alert('el nombre del primer campo del primer formulario es '+f); } function texto( ) { var g = document.forms.segundo.elements[1].value; alert('el texto del segundo campo del segundo formulario es '+g); } function cambia( ) { document.forms[2].elements[0].value='cambiamos el texto'; }</SCRIPT></HEAD><BODY><FORM NAME="primero"><INPUT TYPE="text" NAME="texto1" VALUE="formulario 1" SIZE="30"></form><form name="segundo"><INPUT TYPE="radio" NAME="radio2"><INPUT TYPE="text" NAME="texto2" VALUE="formulario 2" SIZE="30"></form><form name="tercero"><INPUT TYPE="text" NAME="texto3" VALUE="formulario 3" SIZE="30"><br><br><INPUT TYPE="button" VALUE="nombre campo" ONCLICK="campo()"><INPUT TYPE="button" VALUE="texto campo" ONCLICK="texto()"><INPUT TYPE="button" VALUE="cambia texto" ONCLICK="cambia()"></FORM></BODY></HTML>

Como vemos en este ejemplo, también podemos referirnos a un formulario de nuestra página por medio de su índice en el array forms que posee cada objeto window.document, teniendo en cuenta que el primer índice es 0 . Mediante esta forma de expresarnos podemos acceder a cualquier formulario de la página sin necesidad de conocer su nombre, y podemos obtener el número de formularios que hay en una página en concreto. La sintaxis para acceder a un formulario mediante este camino es del tipo:document.forms[indice].propiedadY para conocer el nº de formularios en la página deberemos escribir:function cantidad ( ) { var f = document.forms.length; alert( ' el número de formularios de la página es ' + f ); document.forms[2].texto.value='cambiamos el valor del campo'; }

encodingencoding

Que es un string o cadena que contiene el tipo MIME utilizado para codificar el contenido del formulario a enviar al servidor, y que refleja el atributo ENCTYPE de la etiqueta FORM de HTML, que se utiliza para codificar los datos remitidos desde el formulario hacia el servidor, pudiendo mediante esta propiedad cambiar dinámicamente el tipo de codificación.



Métodos del objeto form

submitsubmit

Para enviar los datos de un formulario es necesario siempre utilizar este método, que por defecto está asociado al elemento de formulario <INPUT TYPE = " submit " >, que es un botón que al ser pulsado llama al método submit. Ahora bien, a veces nos interesa que antes de que se produzca el envío de datos al servidor se ejecuten una serie de acciones del lado del cliente, como pueden ser validación de datos, mensajes de alerta y/o confirmación, etc. Para lograr esto podemos sustituir el botón tipo submit por un botón tipo button que al ser pulsado llame a una función JavaScript que ejecute las acciones previas al envío y una vez cumplimentadas envíe los datos. Esto se consigue llamando en la función al método submit ( ), y el código necesario tiene el aspecto siguiente:function previa ( ) { ... ...acciones a realizar... ... document.forms.nombre_formulario.submit ( );}

resetreset

Este método pone a cero los campos del formulario, es decir, vuelve a situar el formulario en su estado inicial, y al igual que ocurre con el método submit existe por defecto un botón <INPUT TYPE = " reset " > que se encarga de realizar esta operación, útil por ejemplo cuando el usuario se ha equivocado al rellenar los campos y desea comenzar de nuevo el proceso. Pero también nos puede interesar a veces poner a cero los campos del formulario sin que intervenga el usuario. Esto lo conseguimos llamando diréctamente al método submit ( ) o llamando a una función que ejecute el método, siendo el código de llamada en ambos casos del tipo:document.forms.nombre_formulario.reset ( )

Por último, vamos a ver los eventos que admite el objeto form, algunos de los cuales son estándares y otros sin serlo sí los admite, y que son:

onSubmitonSubmit

Es el principal evento del objeto y el único estandar, y se produce al enviar los datos del formulario mediante el botón submit o mediante el método submit ( ). Un ejemplo de llamada al método sería:<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONSUBMIT = " alert ( ' se envían los datos ' ) " >

onResetonReset

Mediante este evento podemos ejecutar una acción dada cuando el usuario pincha el botón de borrado o cuando mediante una función se ha llamado al método reset. Lo podemos usar por ejemplo para lanzar un mensaje de aviso al usuario de que se van a borrar los datos. Su uso pasa por usar una sintaxis del tipo:<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONRESET = " alert ( ' se van a borrar los datos' ) " >

onClickonClick

Este no es un evento típico del objeto form, pero se puede usar con én, y mediante él podemos ejecutar una acción concreta cuando el usuario hace click en cualquier parte del formulario, sin necesidad de que se pulse en un campo; sólo es necesario pinchar en algún lugar del espacio ocupado por el formulario en su totalidad.. Su escritura se debe parecer a:<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONCLICK = " alert ( ' ha pulsado un campo' ) " >

Además de estos eventos, y al igual que ocurre con onClick, el objeto form también admite los eventos generales ondblClick, onmouseOver, onmouseOut, onkeyPress , etc, pero su uso acarrea más problemas que beneficios, por lo que no se utilizan. Sólo saber que estás ahí y que se pueden usar en casos muy específicos.



LOS OBJETOS TEXT, PASSWORD E HIDDEN

Uno de los elementos más usados a la hora de implementar un formulario son las cajas de texto. Estas se definen en HTML mediante la etiqueta:<INPUT TYPE = " text " NAME = " nombre " VALUE = " valor_por_defecto " SIZE= " tamaño_por_defecto">

El elemento TEXT introduce una caja para que el usuario introduzca un texto, texto que será visible por el mismo en todo momento, el elemento es análogo a este, pero se diferencia en que está concebido para que en él se introduzcan contraseñas, por lo que cuando el usuario escribe algo en su interior este texto se va almacenando dentro, pero en pantalla sólo se muestran asteriscos, ****, por motivos de seguridad. Por último, el elemento HIDDEN es también igual que el TEXT, pero en este caso no aparece en pantalla ni la caja ni su contenido, y el usuario no puede escribir nada en su interior (pero nosotros sí, por defecto o mediante JavaScript). Vamos a explicar las propiedades y métodos de estos tres elementos análogos mediante las del objeto TEXT, teniendo siempre presente que lo que digamos es extensible a los tres. Pero así, con el código HTML puro, sólo podemos conseguir que el usuario introduzca un texto en el campo, que será enviado luego al programa del servidor tal y como se haya introducido inicialmente, lo que puede ocasionar bastantes quebraderos de cabeza, ya que el valor introducido puede no ser correcto o no corresponder al formato que nosotros deseemos o necesitemos procesar. Y esto es debido a que HTML no posee ninguna herramienta propia para el tratamiento de estos campos de texto.Mediante el uso de JavaScript sí que podemos actuar fácilmente sobre los campos de texto y sobre sus propiedades, ya que un elemento de formulario TEXT es también para JavaScript un objeto, que por lo tanto tiene sus propiedades, métodos y eventos, a los que podemos recurrir dinámicamente para cambiar valores, validar las entredas del campo, etc.La forma de acceder a un campo de texto y a sus propiedades y métodos es la general del objeto form, añadiendo a la escritura el nombre del campo y el de la propiedad a la que deseemos acceder:document.forms.[nombre_formulario].[nombre_campo].[propiedad_campo]

Las principales propiedades del objeto TEXT son:

namename

Es la propiedad más importante del objeto text, ya que nos va a permitir identificar cada campo con un nombre identificador único, identificador que vamos a usar luego para poder referirnos sin ambiguedades a un campo de texto concreto dentro de un formulario concreto de nuestra página y acceder a sus propiedades y métodos. Como en la ruta de acceso al campo de texto hay que anteponer el nombre del formulario al que pertenece, y el nombre de cada formulario debe ser único, no hay ningún problema en que usemos el mismo nombre para diferentes campos de texto de diferentes formularios de la página. Lo que no debemos hacer nunca es usar el mismo nombre para campos del mismo formulario, ya que entonces el motor JavaScript del navegador no va a saber al cuál nos referimos y nos dará un error, expresado generalmente mediante el mensaje de que el objeto llamado no existe.

valuevalue

Esta propiedad define el texto que por defecto va a aparecer inicialmente dentro de la caja de texto. A simple vista puede parecer que poco podemos sacar de acceder mediante JavaScript a esta propiedad, pero un estudio más detallano nos dice que esto no es así, y que las posibilidades de uso son muchas. Lo primero es acceder a la propiedad, y esto se consigue mediante la escritura: document.[nombre_formulario].[nombre_campo].value

y ¿para qué podemos usar esto?. Imaginemos por ejemplo que tenemos un campo de texto en el que inicialmente queremos introducir u texto aclaratorio para que el usuario sepa qué tiene que introducir en el campo, pero que una vez que pinche en el campo este texto desapareca. El código necesario para ello sería:<HTML><HEAD></HEAD><BODY><FORM NAME="datos" ACTION="/jsp/pag_3.jsp" METHOD= "post">Introduce tu nombre: <INPUT TYPE=" text " NAME=" nombre " VALUE= " sólo mayúsculas "



ONCLICK = "document.forms.datos.nombre.value= '' "></FORM></BODY></HTML>

y con esto le estamos diciendo al navegador que cuando el usuario pinche en el campo el texto inicial se sustituya por un valor vacío.y también podemos conseguir mediante esta propiedad pasar el valor introducido por el usuario en un campo de texto a otro campo de otro formulario, que puede estar en la misma ventana, en otro frame o en una ventana flotante. Esto nos puede servir por ejemplo para hacer un formulario resumen o para pasar valores a campos ocultos ( HIDDEN ). Un ejemplo de código, para pasar el valor a un formulario de la mima página, sería:<HTML><HEAD></HEAD><BODY><FORM NAME="datos">Introduce tu nombre:<INPUT TYPE="text" NAME="nombre"><BR><BR><INPUT TYPE="button" VALUE="copiar dato" ONCLICK="copiar()"></FORM><BR><FORM NAME="segundo">tu nombre:<INPUT TYPE="text" NAME="nombre"></FORM></BODY></HTML>

La propiedad value lleva asímismo asociada otra propiedad general de JavaScript, la propiedad length, que nos da la longitud del texto introducido en la caja, es decir, el número de caracteres que el usuario ha introducido. Esta propiedad es muy útil y se utiliza mucho, y con ella podemos por ejemplo hacer que el foco salte de una caja a otra cuando se haya introducido en la primera un número dado de caracteres. Vamos a ver un código que hace esto, saltando el foco al segundo campo cuando en el primero se introducen 5 caracteres: <html><head> <script language="JavaScript" type="text/javascript">

function comprueba(){

if(document.form1.caja1.value.length==5) document.form1.elements[1].focus();

}</script></head><body><center><form name="form1"><input type="text" name="caja1" size=10 value="" onKeyPress="comprueba()"><input type="text" name="caja2" size=10 value=""><br></form></center></body></html>

disableddisabled

Esta propiedad bloquea el campo de texto, de tal forma que el texto que contenga el campo se colorea de color grís y no se puede escribir nada nuevo en el campo.Vamos a ver su sintaxis mediante un ejemplo:

<HTML>



<HEAD></HEAD><SCRIPT LANGUAGE = " JavaScript " > function bloquea ( ){ document.forms.form1.campo1.disabled = true; } function desbloquea ( ){ document.forms.form1.campo1.disabled = false; } </SCRIPT></HEAD><BODY><FORM NAME = " form1" ><INPUT TYPE = " text " NAME = " campo1 " VALUE = " campo de texto" ><BR><BR><INPUT TYPE = " button " VALUE = " campo disabled " ONCLICK = " bloquea ( ) " ><INPUT TYPE = " button " VALUE = " campo enabled " ONCLICK = " desbloquea ( ) "

sizesize

Que establece la anchura de la caja de texto (ejemplo de uso abajo, asociado al evento onKeyPress).

Los principales métodos del objeto text son:

focusfocus

Que sitúa el foco en la caja de texto. Este método se puede usar por ejemplo cuando se realiza una validación de formulario y hay algún dato incorrecto; podemos entonces lanzar un mensaje de alerta al usuario y situar el cursor en el campo incorrecto. El código para ello sería:<html><head> </head><body><center><form name="form0"><input type="text" name="caja"><br><br><input type="button" value="pon foco" onClick="document.form0.caja.focus()"></form></center></body></html>

selectselect

Este método selecciona el texto contenido en la caja, poniendo todo el contenido de la misma con un fondo azul estandar. Su uso pasa por la sintaxis:<html><head> </head><body><center><form name="form0"><input type="text" name="caja" value="texto inicial"><br><br><input type="button" value="pon foco" onClick="document.form0.caja.select()"></form></center></body></html>

toUpperCase - toLowerCase toUpperCase - toLowerCase



Estos métodos propios convierten el texto introducido a mayúsculas y a minúsculas respectivamente, y van asociados a la propiedad value de la caja de texto. Vamos a ver el código necesario para pasar a mayúsculas en texto que el usuario introduce en un elemento text:

<head> <script language="JavaScript" type="text/javascript">

function cambia(){

document.form1.caja1.value=document.form1.caja1.value.toUpperCase();

}</script></head><body bgcolor="#ffffcc"><center><form name="form1"><input type="text" name="caja1" size=40 value="" ><br><input type="button" value="!a mayúsculas!" onClick="cambia()"></form></center></body></html>

Por otra parte, el objeto TEXT posee los siguientes eventos:

onFocusonFocus

Este evento permite lanzar una acción cuando la caja de texto recibe el foco, es decir, cuando el usuario pincha con el ratón la caja o cuando accede a ella mediante el tabulador del teclado. Un ejemplo de llamada al método sería:<INPUT TYPE = " text" NAME = " campo1 " ONFOCUS = " alert ( ' foco en la caja ' ) " >

onBluronBlur

Mediante este evento podemos ejecutar una acción dada cuando la caja de texto pierde el foco, bien porque el usuario trás escribir en ella pinche en otra parte de la página o bien cuando accede a otro campo del formulario mediante el tabulador. Su uso pasa por usar una sintaxis del tipo:<INPUT TYPE = " text" NAME = " campo1 " ONBLUR = " alert ( ' foco fuera de la caja ' ) " >

Vamos a ver un ejemplo de cómo podemos utilizar estos dos eventos. Vamos a crear un formulario con dos cajas de texto, de tal forma que después de escribir en la primera al pasar a la segunda cambiará el texto que hayamos introducido por otro ( evento onBlur ), mientras que la segunda caja se escribirá sóla ( evento onFocus ): <HTML> <HEAD> <SCRIPT LANGUAGE = " JavaScript "> function pinta1( ){ document.form1.campo1.value = " evento onFocus" ; } function pinta2 ( ){ document.form1.campo2.value = " evento onBlur" ; }</SCRIPT></HEAD><BR><BODY><FORM NAME = " form1"><INPUT TYPE = " text " NAME = " campo1 " ONBLUR = "pinta2 () "><INPUT TYPE = " text " NAME = " campo2 " ONFOCUS = " pinta1() "></FORM></BODY>



</HTML>

onClickonClick

Este evento es aceptado por el objeto text, pero su efecto en este caso es el mismo que el del evento onFocus, por lo que su uso es análogo.

onChangeonChange

Evento se lanza cuando el texto que aparece en un campo de texto se cambia por otro diferente. Su escritura se debe parecer a:<INPUT TYPE = " text" NAME = " nombre" ONCHANGE = " alert ( ' lo que sea' ) " >

onMouseOver - onmouseOutonMouseOver - onmouseOut

Estos dos eventos son aceptados por el objeto text, aunque su buen uso depende de la habilidad del programador, ya que a veces nos puede traer problemas, por ejemplo si lo usamos asociado a un mensaje de alerta, ya que en ese caso nunca podrá el usuario escribir en la caja. Vamos a ver un ejemplo de uso, que además de enseñarnos cómo se deben usar estos eventos nos va a mostrar las dificultades que puede ocasionerle al usuario si no se usan corréctamente. Vamos a colocar dos campos de texto; en el primero va a aparecer un mensaje indicando al usuario que introduzca su nombre, y cuando este ponga el cursor sobre el campo se le indicará que lo introduzca en mayúsculas. En el segundo campo aparecerá un mensaje cuando el usuario quite el ratón del primer campo. Pero si este vuelve a pasra el ratón por el primer campo, el texto que introdujo desaparece. ?Cómo se arregla esto...?. Pensad un poco. El código de nuestro ejemplo será:<HTML><HEAD> </HEAD><BODY><FORM NAME = " form1" ><INPUT TYPE = " text " NAME = " nombre " VALUE = " pon aquí tu nombre " ONMOUSEOVER = " document.form1.nombre.value = ' usasólo mayúsculas ' "ONMOUSEOUT = " document.form1.mensaje.value = ' bonito nombre'" ><BR><BR><INPUT TYPE = " text " NAME= "mensaje"></FORM></BODY></HTML>

onkeyPressonkeyPress

Este evento se produce cuando el usuario pulsa una tecla cualquiera. Vamos a ver un ejemplo de uso, en el que vamos a colocar una caja de texto con un ancho inicial (fijamos ek atributo size), pero que vamos a ir modificando cuando el usuario introduzca más texto del que puede contener. El código es:<html><head><script language="JavaScript" type="text/javascript">

function valora(){

var n=document.form1.caja1.value.length; if(n > 4) document.form1.caja1.size=n+1;

}

</script></head><body bgcolor="#ffffcc"><form name="form1">introduce un el texto que quieras: <input type="text" name="caja1" size="4" onkeypress="valora()">



</form></body></html> Nota: Los objetos hidden son un elemento fundamental en muchos formularios, ya que permiten almacenar valores que podemos ir pasando a estos campos y que se utilizan para definir configuraciones del usuario o del propio formulario, todo ello de una forma transparente para el usuario, que en ningún momento es consciente de la existencia de estos campos ocultos. La forma de acceder a ellos y a su propiedad value, la fundamental para esta técnica, es la msima que para acceder a un campo de texto cualquiera.

LOS OBJETOS CHECKBOX Y RADIO

Los elementos de formulario Checkbos y Radio realizan una función parecida en esta: permitir que el usuario elija opciones en un grupo de varias, pero mientras que en un conjunto de Checkbox puede elegir varias de las opciones, en un conjunto de Radios sólo puede elegir una de ellas. La forma de incluir ambos objetos en un formulario también es diferente. Para incluir un grupo de Checkbox la sintaxis sería:<INPUT TYPE =" Checkbox" NAME="nombre_1" VALUE="valor_asociado">texto asociado al checbox 1<INPUT TYPE =" Checkbox " NAME= "nombre_2" VALUE=" valor_asociado">texto asociado al checbox 2

mientras que para incluir un grupo de Radios tendríamos que escribir:<INPUT TYPE = " Radio" NAME= " nombre" VALUE="valor_1">texto asociado al radio 1<INPUT TYPE = " Radio" NAME = "nombre" VALUE=" valor_2">texto asociado al radio 2

Las principales propiedades de estos objetos son:

namename

Es la propiedad que va a asignar a cada checkbox o radio un nombra identificador para poder referirnos luego a él y acceder a sus propiedades. La diferencia entre ambos tipos es que en el caso de un grupo de radio botones todos deben tener el mismo name, ya que si no es así el efecto de selección única se pierde.El acceso a un radio o checkbos se efectúa de forma análoga a lo visto en el caso de los objetos TEXT.

valuevalue

Esta propiedad asocia un valor a cada checkbox o radio, y en el caso de los checkbox es útil cuando queremos asociar a un único name varios posibles valores, pero a veces es mejor emplear un name diferente para cada checkbox, como en el caso de que queramos acceder mediante JavaScript separadamente a las propiedades de cada uno de ellos, siendo en estos casos el atributo value poco útil. En el caso de los radio botones es una propiedad necesaria siempre, ya que va a ser la que distinga un radio de los demás, al tener todos el mismo name. Pero desde el punto de vista de su tratamiento con JavaScript, esta propiedad no es muy útil.

disableddisabled

Esta propiedad bloquea la caja del checkbox o el botón de radio de tal forma que el campo se colorea de color grís y no se puede accionar el mismo.

Vamos a ver su sintaxis mediante un ejemplo, en el que vamos a ver cómo se accede a esta propledad en ambos objetos, empleando para ello el array forms[index]:<HTML><HEAD></HEAD><SCRIPT LANGUAGE = " JavaScript " > function desab( i ) { document.forms[i].caja.disabled=true; } function hab(i) { document.forms[i].caja.disabled=false; }



</SCRIPT> </HEAD><BODY><FORM NAME = "form1" ><INPUT TYPE = "Checkbox" NAME = "caja" VALUE = "a"><INPUT TYPE = "button" VALUE = "desabilita" ONCLICK = "desab(0)"><INPUT TYPE = "button" VALUE = "habilita" ONCLICK = "hab(0)"></FORM><FORM NAME = "form2" ><INPUT TYPE = "Radio" NAME = "caja" VALUE = "a"><INPUT TYPE = "button" VALUE = "desabilita" ONCLICK = "desab(1)"><INPUT TYPE = "button" VALUE = "habilita" ONCLICK = "hab(1)"></FORM></BODY></HTML>

checkedchecked

La propiedad checked marca o comprueba si está marcado un checkbox o un radio botón, y es una propiedad booleana, es decir, vale true si el objeto está marcado y false si no lo está. Vamos a ver en el siguiente ejemplo cómo podemos acceder a esta propiedad en todo un conjunto de checkbox, consiguiendo con ello marcar y desmarcar todos a la vez. El código es:<html><head><script language="JavaScript" type="text/javascript"> function marcar() { for (i=0; i<document.form1.caja.length; i++) document.form1.caja[i].checked=true; } function desmarcar(i) { for (i=0; i<document.form1.caja.length; i++) document.form1.caja[i].checked=false; }</script></head><body ><form name="form1"><input type="Checkbox" name="caja" value="1"><input type="Checkbox" name="caja" value="2"><input type="Checkbox" name="caja" value="3"><input type="Checkbox" name="caja" value="4"><input type="Checkbox" name="caja" value="5"><input type="button" value="todos" onClick="marcar()"><input type="button" value="ninguno" onClick="desmarcar()"></form></body></html>

lengthlength

Esta propiedad nos devuelve el número de radio botones que existe en un grupo determinado de ellos que tienen el mismo atributo name. El siguiente código refleja su uso:<html><head> </head><body><form name="form1"><center><INPUT TYPE = "Radio" NAME= "nombre" VALUE="valor_1">texto asociado al radio 1 <INPUT TYPE = "Radio" NAME = "nombre" VALUE=" valor_2">texto asociado al radio 2<br><br><input type="button" value="?cuantos radios?" onClick="alert('hay '+document.form1.nombre.length+' botones')"></center>



</form></body></html>

indexindex

Que es un array que contiene en su interior todos los radio botones que hay en un grupo de ellos con el mismo nombre. Así, si tenemos por ejemplo un grupo de 3 radios llamados "equipo" y con diferente value cada uno, para referirnos al segundo de ellos deberemos usar la expresión:document.forms.nombre_formulario.equipo[1]

ya que el array index comienza en cero.

Por otra parte, estos objetos poseen los siguientes eventos:

onFocusonFocus

Este evento permite lanzar una acción cuando el checkbox o el radio botón recibe el foco, es decir, cuando el usuario pincha con el ratón en ellos o cuando accede a ella mediante el tabulador del teclado. Un ejemplo de llamada al método sería:<INPUT TYPE = " checbox" NAME = " campo1 " ONFOCUS = " alert ( ' foco en el checkbox' ) " >

onBluronBlur

Mediante este evento podemos ejecutar una acción dada cuando el elemento pierde el foco, bien porque el usuario trás marcarlo pinche en otra parte de la página o bien cuando accede a otro campo del formulario mediante el tabulador. Su uso pasa por usar una sintaxis del tipo:<INPUT TYPE = " radio" NAME = " campo1 " ONBLUR = " alert ( ' foco fuera del radio botón' ) " >

onClickonClick

Su efecto es el mismo que el del evento onFocus, por lo que su uso es análogo, siendo la única diferencia entre ellos que para hacer que salte el evento onclick es necesario pinchar en el elemento, no activándose si accedemos a él mediante el tabulador.Vamos a ver su uso práctico mediante el siguiente código, que hace ue al pinchar un radio botón aparezca un texto en una caja:<html><head> </head><body bgcolor="#ffffcc"><form name="form1">pincha en el radio...<input type= "radio"onclick="document.form1.campo.value='?hola, que tal?'"><input type="text" name="campo"></form></body></html>

onChangeonChange

Evento se lanza cuando el estado marcado-desmarcado se cambia. Su escritura se debe parecer a:<INPUT TYPE = " radio" NAME = " nombre" ONCHANGE = " alert ( ' lo que sea' ) " >

pero su uso no reporta muchas aplicaciones prácticas.

onMouseOveronMouseOver , onmouseOut, ondblClick, onkeyPress, onmouseOut, ondblClick, onkeyPress

Estos eventos son aceptados por ambos objetos, aunque su aplicación práctica es nula, ya que causa más molestias que ventajas.

LOS OBJETOS BUTTON, SUBMIT Y RESET

Vamos a tratar en este capítulo estos 3 objetos, que aunque se diferencian un poco en su uso su apariencia, sus propiedades y sus eventos son análogos. La principal diferencia en su uso estriba en que el



elemento button es símplemente un botón para ejecutar un código JavaScript cualquiera, no teniendo asociada por defecto ninguna acción; el elemento submit ejecuta el envío de los datos del formulario al ser pulsado; por último, el elemento reset borra todos los campos del formulario, dejando estos con su valor poor defecto.La apariencia de button, submit y reset es la misma, y si no se les aplica ningún estilo aparecen siempre como un botón rectangular grís con un texto negro dentro.

Las principales propiedades de estos objetos son:

namename

Es la propiedad que va a asignar a cada botón un nombrae identificador para poder referirnos luego a él y acceder a sus propiedades.

widthwidth

Que fija la anchura que va a tener el botón. Si no se especifica este valor, el botón tendrá el ancho necesario para contener el texto indicado mediante la propiedad value.

heightheight

Que fija la altura del botón.

valuevalue

Esta propiedad determina el texto que va a aparecer contenido en el botón.

Vamos a ver un ejemplo que maneje estas propiedades, y para ello vamos a construir una función de JavaScript que cambie el texto de un botón en el que no se ha definido la anchura, para que veamos cómo cambia esta con el texto del botón: <html><head> <script language="JavaScript" type="text/javascript"> function cambia(){ document.form1.boton.value='así que te has atrevido a pincharme'; }</script></head><body><form name="form1"><input type="button" name="boton" value="pinchame" onClick="cambia()"></form></body></html>

disableddisabled

Esta propiedad bloquea el botón de tal forma que el texto se colorea de color grís y no se puede accionar el mismo.

Vamos a ver su sintaxis mediante un ejemplo, en el que vamos a ver cómo se accede a esta propledad para crea un botón de envío de datos que sólo se active al seleccionar un radio button de un conjunto de ellos:<html><head> <script language="JavaScript" type="text/javascript"> function activa(){ document.form1.boton.disabled=false; }</script></head><body bgcolor="#ffffcc"><form name="form1">



elije una opción: <input type="radio" name="radio1" onClick="activa()">música<input type="radio" name="radio2" onClick="activa()">cine<input type="radio" name="radio3" onClick="activa()">deporte<input type="submit" name="boton" value="enviar" onClick="return false" disabled></form></body></html>


onFocusonFocus

Este evento funciona como el método onClick para estos objetos, por lo que me refiero a lo abajo explicado.

onBlur onBlur

No tiene un uso práctico para estos objetos.

onClickonClick

Este es sin duda el evento más onClick con los botones, ya que por propia definición el objetivo de un botón es ser pinchado.Su uso principal es llamar a una función JavaScript al ser pinchado el botón, del que ya hemos visto varios ejemplos a lo largo de estos artículos, por lo que no voy a insistir en ello.Sólo hacer una consideración de uso: cuando tenemos en un formulario un botón del tipo submit o reset y por algún motivo queremos anular su acción intrínseca (enviar los datos del formulario o borrarlos), basta con colocar un evento onClick en el botón que nos devuelva false, del tipo:<input type="submit" value="enviar" onClick="return false">

onMouseOveronMouseOver , onmouseOut, ondblClick, onkeyPress, onmouseOut, ondblClick, onkeyPress

Estos eventos son aceptados por estos objetos, y su aplicación práctica la vamos a ver mediante un ejemplo, cuyo código es:<html><head> <script language="JavaScript" type="text/javascript"> function cambia(){ document.forms[0].elements[0].value='?me vas a pinchar?'}function descambia(){ document.forms[0].elements[0].value='pinchame'}function gracias(){ alert('!gracias por pincharme!')}</script></head><body><center><form name="form1"><input type="button" name="boton" value="pinchame" onMouseOver="cambia()" onMouseOut="descambia()" onClick="gracias();"></center></form></body></html>

EL OBJETO TEXTAREA



El objeto textarea inicialmente admite el mismo tratamiento que el objeto text, sus mismas propiedades, métodos y eventos. Pero además posee una serie de características propias originadas por su propia definición.La apariencia del elemento textarea dentro de un formulario es la de una caja de texto de anchura y altura determinada, que posee scrolls o barras de desplazamiento propias para poder navegar por su interior. Su sintaxis dentro de un formulario es del tipo:<textarea name="comentario" cols="20" rows="5"></textarea>que como vemos lleva etiqueta de cierre, apareciendo inicialmente en la caja el texto que escribamos entre las etiquetas de apertura y cierre, y cuya apariencia en el navegador es la siguiente:

Las principales propiedades de este objeto son:

namename

Es la propiedad que va a asignar a cada textarea un nombre identificador para poder referirnos luego a ella y acceder a sus propiedades.

colscols

Que fija la anchura que va a tener el textarea, mediante el núemro de columnas de la misma. Si no se especifica este valor, el textarea aparece por defecto con una anchura estandar, que suele corresponder a 21 columnas.

rowsrows

Que fija la altura que va a tener el textarea, mediante el número de filas de la misma. Si no se especifica este valor, el textarea aparece por defecto con una altura estandar, que suele corresponder a 2 columnas.

valuevalue

En el caso de los textarea esta propiedad no deternima el contenido inicial del objeto, pero sí va a representar el contenido en cualquier momento, y al igual que con el objeto text, también posee la subpropiedad length, que representa el nº de caracteres que contiene el textarea. Para entender bien esto, vamos a escribir y esplicar el código necesario para crear un textarea que sólo permita escribir dentro 15 caracteres.El código es: <html><head> <SCRIPT language="JavaScript" type="text/javascript">

function chequea(form) {var max=15;if (form.comentario.value.length > max) {alert("No puede entrar más de 15 caracteres. Por favor, entre de nuevo el texto.");return false; }else return true;}

</script></head><body bgcolor="#ffffcc"><center><form name="form1" onsubmit="return chequea(this)">Por favor, entre como máximo 15 caracteres.<br><textarea rows="5" cols="30" name="comentario" wrap="virtual"></textarea><br><input type="submit" value="enviar"></form></center></body></html>



En primer lugar definimos la función chequea, que admite como parámetro el nombre del formulario sobre el que va a operar, y si nos fijamos en el contenido del botón submit vemos que llamamos a la función pasándole como parámetro la palabra clave de JavaScript this, que representa el objeto en la que está contenida; es decir, como el botón submit está contenido en el formulario form1, la palabra clave this hace representa en este caso a este formulario y a su documento padre, por lo que equivale a escribir document.form1. Luego definimos la variable max, que va a definir el número máximo de caracteres que queremos en la caja. Seguidamente vemnos si el número de caracteres introducidos en el textarea, determinado por this.comentario.value.length, es mayor que el fijado por la variable max (15 en este caso). Si es así lanzamos un mensaje de alerta al usuario comunicándole que ha sobrepasado el nº de caracteres permitido, y luego escribimos return false, ya que como hemos llamado a la función desde un botón submit si no devolvemos false los datos del formulario serán enviados. Si la condición de longitudes no se cumple, es decir, si el nº de caracteres es menor que 15, dejamos que el proceso de envío siga adelante sin lanzar ningún mensaje, y esto se consigue retornando true.

disableddisabled

Esta propiedad bloquea el textarea de tal forma que el texto que contiene se colorea de grís y no se puede cambiar el mismo ni escribir nada nuevo en el interior de la caja.

readonlyreadonly

Que actúa de forma análoga a disabled, bloqueando el texto contenido de forma que no se puede modificar, pero que no pone el textarea en color grís.

El objeto textarea posee los siguientes métodos:

selectselect

Este método selecciona el texto contenido en el textarea, situándolo con color blanco sobre un fondo azul. Es el usado en las páginas que muestran código JavaScript de ejemplo para que podamos seleccionarlo al pulsar sobre el texto, y así copiarlo fácilmente. La forma de usar el método select() en este caso vamos a verla en un ejemplo: <html><head> </head><body><center>Para copiar el contenido de la caja pulse sobre ella con el botón derecho y seleccione "copiar" en el menú contextual.<form><textarea cols=15 rows=10 onFocus="this.select()">Esto es un ejemplo de cómo se seleccionael texto de una caja al coger esta el foco</textarea></form> </center></body></html>

focusfocus

Este método sitúa el cursor sobre el textarea.


onFocusonFocus

Que se activa al recibir el foco el textarea, bien porque se pinche dentro con el ratón, bien por acceder al mismo mediante el tabulador. Vamos a ver cómo podemos usar un textarea para explicar al usuario qué debe introducir en los campos de formulario, cosa que conseguimos cambiando el contenido del textarea cuando otro elemento recibe el foco:<html><head> </head>



<body onLoad="document.form1.nombre.focus()"><form name="form1">Nombre:<input type="text" name= "nombre"onFocus="this.form.explica.value='Introduce tu nombre'">Apellidos:<input type="text" name= "apellidos"onFocus="this.form.explica.value='Introduce tus apellidos'"><textarea name="explica" cols="25" rows="1">Introduce tu nombre</textarea></form></body></html>

onBluronBlur

El evento onBlur se lanza cuando el textarea pierde el foco despúes de haberlo recibido. Al igual que con el objeto text, su principal uso es el de modificar, corregir o validar el texto contenido ene el textarea antes de ser enviados los datos.

onClickonClick

Que se lanza al pinchar con el ratón en el interior del texarea.

onMouseOveronMouseOver , onmouseOut, ondblClick, onkeyPress,onKeyUp, onmouseOut, ondblClick, onkeyPress,onKeyUp

Estos eventos son aceptados por este objeto, al igual que los demás objetos de formulario. Vamos a ver un ejemplo parecido al primero de este capítulo, en el que vamos a permitir un máximo de caracteres en el textarea, y además vamos a mostrar al usuario el nº máximo de ellos que le van quedando para poner, es decir, vamos a implementar un contador de cuenta atrás. Vamos a ver el código y luego lo explicamos:<html><head> <SCRIPT language="JavaScript" type="text/javascript">function contador (campo, cuentacampo, limite) {if (campo.value.length > limite) campo.value = campo.value.substring(0, limite);else cuentacampo.value = limite - campo.value.length;}</script></head><body><center><form name="form1">sólo puedes entrar 125 caracteres.<textarea name="mensaje" wrap=physical cols="28" rows="4" onKeyDown="contador(this.form.mensaje,this.form.remLen,125);" onKeyUp="contador(this.form.mensaje,this.form.remLen,125);"></textarea><input type="text" name="remLen" size="3" maxlength="3" value="125" readonly>te quedan todavía</form></center></body></html>

Vamos a definir la función contador, que va a manejar 3 parámetros, que van a ser:

1) campo: representa al textarea sobre el que queremos que actúe la función, que se corresponde en el ejemplo con this.form.mensaje.2) cuentacampo : que representa la caja de texto en la que vamos a colocar el contador de cuenta atrás, representada en nuestro formulario por this.form.remLen.3) limite : que va a determinar el nº máximo de caracteres que vamos a permitir en el textarea.Las instrucciones que le damos a la función son:a) if (campo.value.length > limite) campo.value = campo.value.substring(0, limite); este código es una condición que le dice a la función que si el la longitud de la propiedad value del campo que le pasemos como primer argumento ( es decir, el número de caracteres introducido en el textarea) es mayor que el límite pasado como tercer argumento, entonces sólo debe tomar los caracteres comprendidos entre el primero (0) y el marcado por el límite (125), con lo que aunque escriba el usuario más de 125 sólo se



considerarán los 125 primeros. Esta instrucción sólo maneja pués el caso de que haya más de 125 caracteres, y no actúa para nada con el contador de cuenta atrás.2) else cuentacampo.value = limite - campo.value.length; que trata el caso en que todavía no se superen los 125 caracteres en el textarea, y le dice a la función que en ese caso el valor que aparezca en el campo que le pasemos como argumento cuentacampo, que en nuestro caso corresponde a la caja de texto remLen, debe ser igual al valor del límite establecido menos el nñumero de caracteres que haya introducidos en el textarea, con lo que consegimos el efecto de cuenta atrás.Ahora bien, para que la función actúe dinámicamente debemos llamarla cada vez que el usuario pulse una tecla al introducir un caracter en el textarea, y también cuando la tecla ha sido pulsada, para que no nos pasemos del límite de 125 caracteres establecido. Por eso llamamos a la función mediante los eventos onKeyDown y onKeyUp, es decir, cada vez que el usuario pulsa o suelta una pieza del teclado. EL OBJETO SELECT

Hasta ahora lo que hemos visto no parece muy complicado, pero ahora la cosa se pone un poco más dificil, ya que el objeto SELECT (conocidos también como combos), por su propia construcción, ofrece más posibilidades y posee unas propiedades que requieren un trato especial por parte del lenguaje JavaScript.La apariencia del elemento select dentro de un formulario puede ser la de una caja de texto de anchura y altura determinada, que posee scrolls o barras de desplazamiento propias para poder navegar por su interior, que contiene en su interior una serie de opciones de las que podemos elegir una o varias, o bien, y lo que es más corriente, aparecer como una especie de caja de texto que tiene una flecha en su parte derecha, y que al ser pulsada despliega su contenido permitiéndonos efectuar una seleción entre las diversas opciones que contiene.. Su sintaxis dentro de un formulario es del tipo:<select name="menu"><option value="opcion1">música <option value="opcion2">cine<option value="opcion3">teatro </select>

que como vemos lleva etiqueta de cierre, y una serie de etiquetas interiores OPTION que definen las opciones que van a aparecer en el interior del combo, y cuya apariencia en el navegador es la siguiente:

Las principales propiedades del objeto select son:

namename

Es la propiedad que va a asignar a cada select un nombre identificador para poder referirnos luego a él y acceder a sus propiedades.

sizesize

Que fija el número de opciones que serán visibles en el combo. Para acceder a esta propiedad deberemos escribir:document.name_formulario.name_select.size= número

disableddisabled

Esta propiedad bloquea el combo, de tal forma que el texto que contiene se colorea de grís y no se puede accionar el mismo ni hacer ninguna selección en él.

lengthlength

Que nos da acceso al número de opciones que forman el combo. Su sintaxis típica es del tipo:document.forms.nombre_formulario.nombre_select.length

typetype

Que nos dice en general qué tipo de objeto de formulario es el referenciado, y en este caso nos informa además si el combo es simple o múltiple. Su forma de acceso es:document.forms.nombre_formulario.nombre_elemento.type

selectedIndexselectedIndex



Que nos permite acceder a la opción elegida por el usuario en un select. Nos devuelve el número de la opción elegida dentro del array options, comenzando por el índice cero. Su forma de acceso es:document.forms.nombre_formulario.nombre_elemento.selectedIndex

Asociadas a esta propiedad existen otras dos: value y text, que nos dan el value y el texto asociados a la opción elegida. Veamos el siguiente código:

<html><head> <script language="JavaScript" type="text/javascript"> function muestra() { var miOpcion=document.forms[0].equipos.selectedIndex; var texto='número de opción elegida= '+miOpcion+'\n'; texto+='value de la opción = '+document.forms[0].equipos.options[miOpcion].value+'\n'; texto+='texto de la opción= '+document.forms[0].equipos.options[miOpcion].text; alert(texto); } </script></head><body><form name="Form1"><select name="equipos" onChange="muestra()"><option value="entrada">---selecciona un equipo---</option><option value="rmadrid">Real Madrid</option><option value="barga">Barcelona</option><option value="atletico">Atlético de Madrid</option></select></form></body></html>

selectedselected

Propiedad booleana que comprueba si una opción determinada a sido seleccionada o no. Como ejemplo de su uso veamos el siguiente código:<html><head> <script language="JavaScript" type="text/javascript"> function muestra() { if(document.forms[0].equipos.options[1].selected==true) alert('el mejor equipo'); } </script></head><body><form name="Form1"><select name="equipos" onChange="muestra()"><option value="entrada">---selecciona un equipo---</option><option value="rmadrid">RealMadrid</option><option value="barga">Barcelona</option><option value="atletico">Atlético de Madrid</option></select></form></body></html>

multiplemultiple



Que convierte el combo de una sóla opción con flecha desplegadora en un combo de varias filas, en el que el usuario puede elegir varias de las opciones manteniendo pulsada la tecla "control" mientras ejecuta la selección.Vamos a ver un ejemplo en el que vamos a cambiar esta propiedad dinámicamente, junto con el texto y funcionalidad de un botón. El código necesario sería:<html><head> <title>Untitled</title><script language="JavaScript" type="text/javascript">var estado=1;function cambia(){estado=!estado; if (estado==0){ document.forms[0].menu.multiple=true; document.forms[0].boton.value="simple"; } else{ document.forms[0].menu.multiple=false; document.forms[0].boton.value="multiple"; } }</script></head><body bgcolor="#ffffcc"><form name="ejemplo1"><select name="menu"><option value="opcion1">música <option value="opcion2">cine<option value="opcion3">teatro </select><br><br><input type="button" name="boton" value="multiple" onclick="cambia()"></form></body></html>

Inicialmente tenemos un elemento select simple y un botón con un texto. Para bcambiar los valores de ambos elementos definimos una variable "estado", que inicialmente vale 1, y creamos una función que lo primero que hace es cambiar el valor de esta variable cada vez que la llamamos, y luego ejecuta unas acciones u otras dependiendo del valor de la variable estado, es decir, alternativamente ejecuta un bloque de instrucciones o el otro. Ya sólo nos queda acceder en cada bloque a la propiedad multiple del combo y a la propiedad value del botón, cambiándoles los valores. Por último mediante el evento onClick del botón llamamos a la función cada vex que se pulse este.

optionoption

Esta es sin duda una de las propiedades más importantes y complejas del objeto select, y especifica y permite acceder a cada una de las diferentes opciones del combo. Su estudio es bastante complejo, por lo que estudiaremos esta propiedad en el siguiente capítulo.

El objeto select posee el método:

focusfocus

Este método sitúa el cursor sobre el combo. La forma de usarlo es del tipo:document.forms.name_formulario.name_select.focus();

y podemos apreciar su uso en el siguiente ejemplo, en el que a pesar de haber en el formulario un campo de texto antes, situamos inicialmente el foco en el combo.




onFocusonFocus

Que se activa al recibir el foco el combo, bien porque se pinche dentro con el ratón, bien por acceder al mismo mediante el tabulador. Vamos a ver cómo podemos usar este evento para lanzar un mensaje al usuario para que haga una selección en el combo:<html><head> </head><body><form name="ejemplo1"><select name="menu" onfocus="alert('por favor, elija un tema')"><option value="opcion0">?qué tema le gusta? <option value="opcion1">música <option value="opcion2">cine<option value="opcion3">teatro </select></form></body></html>

onBluronBlur

El evento onBlur se lanza cuando el combo pierde el foco despúes de haberlo recibido, es decir, cuando el usuario lo abandona tras haberlo activado. Podemos usarlo por ejemplo para lanzar un mensaje de agradecimiento al usuario, uso.

onChangeonChange

En el ejemplo anterior el mensaje de alerta se lanza cuando el usuario abandona el combo, pero no distingue si se ha cambiado la opción inicial o por defecto, aparte de que precisa que se pinche fuera del mismo (por eso hemos puesto el botón "enviar", que no hace nada, sólo coger el foco). Todo esto se evita mediante el uso del evento onChange, que se activa cuando se cambia la opción actual del combo por otra, y que no precisa de que se pinche en otro sitio de la ventana.

onClickonClick

Que no conviene utilizar nunca, ya que se lanzaría cada vez que se pinchara en el combo, lo que impediría al usuario efectuar una selección.

onMouseOveronMouseOver , onmouseOut, ondblClick, onkeyPress, onKeyUp, onmouseOut, ondblClick, onkeyPress, onKeyUp

Estos eventos son aceptados por este objeto, al igual que los demás objetos de formulario, pero no son útiles en absoluto (salvo contadas excepciones), por lo que no se usan.

EL OBJETO OPTION

¿Cómo es que digo el objeto OPTION, cuando en el capítulo anterior hemos visto que este elemento es una propiedad del objeto SELECT?. Pués bien, esto es así porque la propiedad OPTION posee a su vez una serie de propiedades que la individualizan y la hacen ser un objeto propio accesible mediante JavaScript, además de ser el camino que vamos a tener para dar una funcionalidad propia a su objeto padre SELECT.

Las principales propiedades del objeto option son:

valuevalue

Que fija un valor asociado a cada opción del combo, valor que no ve el usuario, pero que es el que se va a enviar asociado al parámetro name del select cuando se haga el submit del formulario. Es importante que esto quede muy claro: una cosa es lo que el usuario ve en el combo y otra cosa es lo que se envía con el formulario. Así, si el usuario ha seleccionado la opción del combo determinada por el código:<OPTION VALUE="00001">música</OPTION>



Este ha seleccionado en el combo la palabra "música", pero el valor que se envía al programa que va a procesar los datos es "00001".

texttext

Que se refiere al texto que va dentro de las etiquetas <OPTION> </OPTION>, es decir, al texto que el usuario ve en las opciones del combo.document.name_formulario.name_select.size= número.

selectedselected

Esta propiedad selecciona de de antemano o dinámicamente una de las opciones del combo, haciendo por tanto que aparezca en primer lugar aunque su posición en la lista de opciones no sea ese. El objeto option no posee métodos ni eventos propios.

EL ARRAY OPTIONS

Al igual que el objeto form lleva está representado por el array forms[index], que contiene todos los formularios del documento, el objeto option lleva asociado el array OPTIONS[index], que contiene todas las opciones contenidas o por contener en un select. Así pues, podemos definir también que el objeto select tiene una propiedad OPTIONS[index], que contiene todas las posibles opciones del mismo.Con este planteamiento, podemos acceder a cualquiera de las opciones de un combo mediante la referencia:document.name_formulario.name_select.options[index].propiedad

en donde index comienza por 0, al igual que casi todos los arrays de JavaScript.Este objeto - Array posee la propiedad length, que nos da el número de opciones que hay en el select, y cuyo acceso se realiza con la escritura:document.name_formulario.name_select.options.length

También posee una propiedad fundamental, selectedIndex, que nos va a servir de base para trabajar con estos objetos. Esta propiedad devuelve el índice dentro del array de la opción seleccionada (comenzando por 0). Para acceder a este valor vamos a definir una variable:var indice=document.name_formulario.name_select.options.selectedIndex

y una vez que tenemos el índice correspondiente a la opción seleccionada almacenado en la variable podemos acceder tanto a la propiedad value de la opción:var valor= document.name_formulario.name_select.options[indice].value

como al texto asociado a la misma:var valor=document.name_formulario.name_select.options[indice].text

Vamos a ver un ejemplo que aclare todo esto, en el que vamos a pasar el valor del índice, del texto y del value de la opción seleccionada por el usuario cada uno a un campo de texto:<html><head> <script language="JavaScript" type="text/javascript"> function pasa ( ) { var indice=document.forms.ejemplo.menu.options.selectedIndex; var valor=document.forms.ejemplo.menu.options[indice].value; var texto=document.forms.ejemplo.menu.options[indice].text; document.forms.ejemplo.caja1.value=indice; document.forms.ejemplo.caja2.value=valor; document.forms.ejemplo.caja3.value=texto; }</script></head><body><form name="ejemplo"><select name="menu"><option value="opcion0">esquí



<option value="opcion1">música <option value="opcion2">cine<option value="opcion3">teatro </select><input type="button" value="pasa valores" onClick="pasa()"><br><br>indice:<input type="text" name="caja1" size="1" readonly><br>value:<input type="text" name="caja2" readonly><br>texto:<input type="text" name="caja3" readonly></form></body></html>Para comprobar si una determinada opción del combo ha sido seleccionada, el objeto options dispone de la propiedad booleana selected, que devuelve true si el índice especificado es el elegido, y false en caso contrario. La forma de usar esta propiedad es:if(document.name_formulario.name_select.options[i].selected==true/ false) instrucciones...

EL CONSTRUCTOR NEW OPTION

El objeto select posee también un constructor propio, new Option, que nos va a permitir introducir dinámicamente una o varias opciones nuevas dentro de un combo. La sintaxis genérica de este constructor es:otraopcion=new Option("texto","valor", "defaultSelected", "selected")

en donde texto va a ser el texto asociado a la nueva opción y valor su value asociado, defauldSelected deberemos ponerlo si queremos que sea la opción seleccionada por defecto en el combo y selected si queremos que sea la seleccionada sólo en el momento de crearla.Una vez creada la nueva opción hay que introducirla en el combo, y esto se consigue mediante la escritura:document.forms.nombre_formulario.nombre_select.options[indice n+1]=otraopcion

en donde debemos poner como índice n+1, es decir, el índice debe ser una unidad mayor que el último que tenga anteriormente el select, ya que si ñe ponemos como índice uno ya existente en vez de crear uno nueva opción lo que haríamos sería sustituir una existente por la nueva. Vamos a ver un ejemplo para aclarar esto, en el que vamos a introducir una nueva opción en nuestro combo inicial.<html><head> <script language="JavaScript" type="text/javascript">function nueva ( ) { var deporte= new Option('deporte','opcion4','', 'selected'); document.ejemplo1.menu.options[4]=deporte;}</script></head><body><form name="ejemplo1"><select name="menu"><option value="opcion0">?qué tema te gusta? <option value="opcion1">música <option value="opcion2">cine<option value="opcion3">teatro </select><input type="button" value="opción deporte" onClick="nueva()"></form></body></html>

Si lo que deseamos es borrar una de las opciones que ya existen en un combo, la escritura a usar es:document.forms.nombre_formulario.nombre_select.options[ n ]=null



y con esto borramos la opción correspondiente, pero su lugar sigue ahí, aunque vacio. Para hacer las cosa bien deberemos quitar esta opción vacía, y esto lo conseguimos pasando las opciones que tienen un índice mayor que la borrada un lugar hacia abajo en la lista de índices del objeto options. Esto lo podemos ver en el siguiente código:<head> <script language="JavaScript" type="text/javascript"> function borra( ){ document.forms.ejemplo.menu.options[0].text=document.forms.ejemplo.menu.options[1].text; document.forms.ejemplo.menu.options[1].text=document.forms.ejemplo.menu.options[2].text; document.forms.ejemplo.menu.options[2].text=document.forms.ejemplo.menu.options[3].text; document.forms.ejemplo.menu.options[3]=null; }</script></head><body><form name="ejemplo"><select name="menu"><option value="opcion0">esquí <option value="opcion1">música <option value="opcion2">cine<option value="opcion3">teatro </select><input type="button" value="borra esquí" onClick="borra()"></form></body></html>

Si deseamos sustituir una opción de un combo por otra nueva, deberemos sustituir el texto y el value por los asociados a esta, y un ejemplo de esto sería:<html><head><script language="JavaScript" type="text/javascript">function cambia(){ var indice=document.forms.ejemplo.menu.selectedIndex; document.forms.ejemplo.menu.options[indice].value='opcion4'; document.forms.ejemplo.menu.options[indice].text='futbol'; }</script></head><body><form name="ejemplo"><select name="menu"><option value="opcion0">esquí <option value="opcion1">música <option value="opcion2">cine<option value="opcion3">teatro </select><input type="button" value="cambia esquí" onClick="cambia()"></form></body></html>

EJEMPLOS AVANZADOS

Vamos ahora a aplicar todo lo visto en estos capítulos a un par de ejemplos prácticos, que iré explicando paso a paso. La complejidad de los mismos derivará sólamente de nuestro conocimiento de la aplicación de JavaScript a los formularios, ya que sin duda se pueden implementar construcciones mucho más complejas, pero que también necesitarían de un conocimiento básico o avanzado de otros objetos de este lenguaje de programación, como el tratamiento de fechas, el de elementos matemáticos, el de creación de



objetos propios, etc, que no son por ahora la intención de este pequeño manual, pero que sí os prometo que veremos más adelante.

Ejemplo A: creación de un combo múltiple

En alguna que otra página web hemos visto dos combos, uno tras otro, de tal forma que según la selección que hagamos en el primero aparecerán unas opciones u otras en el segundo. Para dejar las cosas más claras, me estoy refiriendio a lo siguiente:

Principio del formulario

Final del formulario

Principio del formulario

Final del formulario

¿Es un efecto bonito, verdad?. Pues bien, es muy facil de crear con lo que sabemos a estas alturas. Lo primero que debemos hacer es crear dos combos, cada uno dentro de un formulario (aunque pueden estar en el mismo; sólo lo hago así para más claridad) que vamos a meter dentro de una tabla para que estén en la misma línea de la página. El primero de ellos va a ser de estructura fija, el principal, y el otro vamos a inicializarlo símplemente con su pareja de etiquetas select y una opción que contiene una serie de guiones, escribiendo para ello dentro del BODY el código HTML: <table> <tr> <td width="150"> <form name="form1"> <select name="menu1"> <option value="opcion0">-elije una opción- <option value="opcion1">deporte <option value="opcion2">música <option value="opcion3">cine </select> </form> </td> <td> <form name="form2"> <select name="menu2"> <option value="opcion0">------------------------ </select> </form> </td> </tr></table>

bien, ya tenemos nuestros select para trabajar con ellos. Ahora nos vamos a meter en el código JavaScript. Deseamos que cuando el usuario pinche en una de las opciones del combo principal se escriban unas opciones diferentes en el combo secundario, y esto último lo vamos a conseguir mediante el constructor new Option. Así, para el primer caso, opción deporte, deberemos crear dos nuevas opciones y darles valor, mediante: <script language="JavaScript" type="text/javascript">function menu1(){ sub0=new Option("-elije un equipo-","sub0","defauldSelected"); sub1=new Option("Real Madrid","rmadrid"); sub2=new Option("Barcelona","barsa"); document.forms.form2.menu2.options[0]=sub0; document.forms.form2.menu2.options[1]=sub1; document.forms.form2.menu2.options[2]=sub2; }</script>

en donde creamos las 3 opciones del primer caso y las introducimos en el combo, colocando la primera (índice 0 - cabecera del combo) como seleccionada por defecto. De esta forma, cuando llamamos a la



función menu1() crearemos el nuevo combo dinámicamente. Y creamos luego otras dos funciones análogas para los casos de música y cine. Por último, sólo nos falta establecer la llamada a estas funciones, llamada que vamos a hacer mediante una nueva función inicial, que va a detectar qué opción principal ha seleccionado el usuario: function combo(){ var indice=document.forms.form1.menu1.selectedIndex; if(indice==1) menu1(); if(indice==2) menu2(); if(indice==3) menu3(); }

y llamamos a esta función mediante el manejador de eventos onChange, aplicado al primer combo: <select name="menu1" onChange="combo()">

y ya está. El código total resultante es el siguiente: <html><head> <script language="JavaScript" type="text/javascript">function combo(){ var indice=document.forms.form1.menu1.selectedIndex; if(indice==1) menu1(); if(indice==2) menu2(); if(indice==3) menu3(); } function menu1(){ sub0=new Option("-elije un equipo-","sub0","defauldSelected"); sub1=new Option("Real Madrid","rmadrid"); sub2=new Option("Barcelona","barsa"); document.forms.form2.menu2.options[0]=sub0; document.forms.form2.menu2.options[1]=sub1; document.forms.form2.menu2.options[2]=sub2; } function menu2(){ sub0=new Option("elije un compositor","sub0","defauldSelected"); sub1=new Option("Mendelson","mendelson"); sub2=new Option("Von-Suppé","vonsuppe"); sub3=new Option("Bizet","bizet"); document.forms.form2.menu2.options[0]=sub0; document.forms.form2.menu2.options[1]=sub1; document.forms.form2.menu2.options[2]=sub2; document.forms.form2.menu2.options[3]=sub3; } function menu3(){ sub0=new Option("---elije un actor---","sub0","defauldSelected"); sub1=new Option("Pajares","pajares"); sub2=new Option("Esteso","esteso"); sub3=new Option("Resines","resines"); sub4=new Option("Banderas","banderas"); document.forms.form2.menu2.options[0]=sub0; document.forms.form2.menu2.options[1]=sub1; document.forms.form2.menu2.options[2]=sub2; document.forms.form2.menu2.options[3]=sub3; document.forms.form2.menu2.options[4]=sub4; }</script></head><body> <table align="center"> <tr> <td width="150">



<form name="form1"> <select name="menu1" onChange="combo()"> <option value="opcion0">-elije una opción- <option value="opcion1">deporte <option value="opcion2">música <option value="opcion3">cine </select> </form> </td> <td> <form name="form2"> <select name="menu2"> <option value="opcion0">------------------------ </select> </form> </td> </tr> </table></body></html>

EJEMPLO B: CREACIÓN DE UN COMBO DE SELECCIÓN AVANZADA

En este ejemplo vamos a imaginar que tenemos que implementar un combo simple en el que el usuario pueda elejir cuatro opciones diferentes. Para ello vamos a implementar un combo en el que al hacerse una selección el valor de la misma es pasado a una caja de texto diferente, con lo que el usuario tendrá siempre presente qué opciones lleva elegidas. Pero ?y si el usuario selecciona dos o más veces la misma opción en el combo?. Debemos corregir esta posibilidad estableciendo un sistema tal que si se selecciona una opción que ya lo estaba, bien lanzando un mensaje de error al usuario y no se le permita hacerlo, bien haciendo que entonces la opción repetida se borre. Vamos a implementar este último camino. Para la explicación voy a seguir un esquema no lineal, por lo que si quereis ver el código completo ordenado pincha luego con el botón de recho sobre la ventana flotante del ejemplo y selecciona "ver código fuente". Lo primero que vamos a hacer va a ser implementar un formulario en nuestra página, que va a estar formado por un select con siete opciones, cuatro cajas de texto y los botones de envío y borrado. Además, como vamos a pasar los textos del combo a las cajas de texto, necesitamos también algo que nos vaya recogiendo los value de las opciones que elija el usuario, y esto lo logramos introduciendo en el formulario cuatro campos hidden que van a recoger estos valores. Con esto el formulario nos queda: <form name="ejemplo" action="nada" method="post"> <SELECT NAME="menu" SIZE=1 onChange="combo();"> <OPTION selected>--seleccione 4 equipos--</OPTION> <OPTION value="1">Real Madrid</OPTION> <OPTION value="2">Barcelona</OPTION> <OPTION value="3">Atlético de Madrid</OPTION> <OPTION value="4">Bilbao</OPTION> <OPTION value="5">Mallorca</OPTION> <OPTION value="6">Deportivo</OPTION> <OPTION value="7">Valencia</OPTION> </SELECT><br> <input type="text" name="equipo1" size="18" value="" readonly> <input type="text" name="equipo2" size="18" value="" readonly> <input type="text" name="equipo3" size="18" value="" readonly> <input type="text" name="equipo4" size="18" value="" readonly><br> <input type="submit" value="aceptar"> <input type="button" value="borrar" onClick="document.forms[0].reset();"> <input type="hidden" name="Equipo1" value=""> <input type="hidden" name="Equipo2" value=""> <input type="hidden" name="Equipo3" value=""> <input type="hidden" name="Equipo4" value=""></form>



en el que hemos establecido las cajas de texto con el atributo readonly para que el usuario no pueda modificar sus valore suna vez establecidos por el combo, y hemos implementado un botón de borrado tipo button porque nos interesará luego añadirle funcionalidad.Una vez implementado el formulario vamos a crear nuestra función de JavaScript, que lo primero que debe hacer es pasar los textos de la opciones seleccionadas por el usuario a las cajas de texto, y los value de las mismas a los campos hidden. Para ello, la función debe ser del tipo ya visto en estos capítulos, con la única salvedad de que ahora debemos hacer una comprobación cada vez que el usuario elije una opción: si esta ya estaba en la lista de elegidas, se borrará de los dos campos (caja e hidden), y si no lo estaba, se añadirá a los siguientes vacíos:<script language="JavaScript" type="text/javascript">var n=0;function combo() { n++; if (comboMenu()) { if (n==1){ document.forms[0].equipo1.value=menu_text; document.forms[0].Equipo1.value=menu_selection; document.forms[0].menu.selectedIndex==0; } else if(n==2){ if (n==2 && document.forms[0].equipo1.value==menu_text) { document.forms[0].equipo1.value=''; document.forms[0].Equipo1.value=''; n=(n-2); } else { document.forms[0].equipo2.value=menu_text; document.forms[0].Equipo2.value=menu_selection; } } else if(n==3) { if (n==3 && document.forms[0].equipo1.value==menu_text) { document.forms[0].equipo1.value=document.forms[0].equipo2.value; document.forms[0].Equipo1.value=document.forms[0].Equipo2.value; document.forms[0].equipo2.value=''; document.forms[0].Equipo2.value=''; n=(n-2); } else if (n==3 && document.forms[0].equipo2.value==menu_text) { document.forms[0].equipo2.value=''; document.forms[0].Equipo2.value=''; n=(n-2); } else { document.forms[0].equipo3.value=menu_text; document.forms[0].Equipo3.value=menu_selection; } } else if(n==4) { if (n==4 && document.forms[0].equipo1.value==menu_text) { document.forms[0].equipo1.value=document.forms[0].equipo2.value; document.forms[0].Equipo1.value=document.forms[0].Equipo2.value; document.forms[0].equipo2.value=document.forms[0].equipo3.value; document.forms[0].Equipo2.value=document.forms[0].Equipo3.value; document.forms[0].equipo3.value=''; document.forms[0].Equipo3.value=''; n=(n-2); } else if (n==4 && document.forms[0].equipo2.value==menu_text) {



document.forms[0].equipo2.value=document.forms[0].equipo3.value; document.forms[0].Equipo2.value=document.forms[0].Equipo3.value; document.forms[0].equipo.value=''; document.forms[0].Equipo3.value=''; n=(n-2); } else if (n==4 && document.forms[0].equipo3.value==menu_text) { document.forms[0].equipo3.value=''; document.forms[0].Equipo3.value=''; n=(n-2); } else { document.forms[0].equipo4.value=menu_text; document.forms[0].Equipo4.value=menu_selection; } } else if (n==5) { if (n==5 && document.forms[0].equipo1.value==menu_text) { document.forms[0].equipo1.value=document.forms[0].equipo2.value; document.forms[0].Equipo1.value=document.forms[0].Equipo2.value; document.forms[0].equipo2.value=document.forms[0].equipo3.value; document.forms[0].Equipo2.value=document.forms[0].Equipo3.value; document.forms[0].equipo3.value=document.forms[0].equipo4.value; document.forms[0].Equipo3.value=document.forms[0].Equipo4.value; document.forms[0].equipo4.value=''; document.forms[0].Equipo4.value=''; n=(n-2); } else if (n==5 && document.forms[0].equipo2.value==menu_text) { document.forms[0].equipo2.value=document.forms[0].equipo3.value; document.forms[0].Equipo2.value=document.forms[0].Equipo3.value; document.forms[0].equipo3.value=document.forms[0].equipo4.value; document.forms[0].Equipo3.value=document.forms[0].Equipo4.value; document.forms[0].equipo.value=''; document.forms[0].Equipo4.value=''; n=(n-2); } else if (n==5 && document.forms[0].equipo3.value==menu_text) { document.forms[0].equipo3.value=document.forms[0].equipo4.value; document.forms[0].Equipo3.value=document.forms[0].Equipo4.value; document.forms[0].equipo.value=''; document.forms[0].Equipo4.value=''; n=(n-2); } else if (n==5 && document.forms[0].equipo4.value==menu_text) { document.forms[0].equipo4.value=''; document.forms[0].Equipo4.value=''; n=(n-2); } else alert('sólo puede seleccionar 4 equipos como máximo'); n=(3) } } document.forms[0].menu.selectedIndex=0; }function comboMenu(form) { var myindex=document.forms[0].menu.selectedIndex; if (myindex==0) { document.forms[0].menu.focus(); }



else { menu_text=document.forms[0].menu.options[myindex].text; menu_selection=document.forms[0].menu.options[myindex].value; return true; }}</script>

En esta función vamos comprobando desde la segunda selección del usuario si la opción elegida estaba ya en la lista, en cuyo caso la eleiminamos de la misma, y para que no queden lugares vacíos, a partir del que hemos eliminado vamos corriendo todos los demás una posición a la izquierda, tanto en las cajas de texto visibles como en los campos hidden ocultos. Para ir controlando qué posición es la actual creamos una variable contador "n", que se declara con valor 0 y se va aumentando cada ves que el usuario hace una nueva elección, y al final de cada comprobación se disminuye en 2 unidades, para mantenerlo al día (piensa porqué...). Por último, si el usuario ha elejido ya 4 opciones e intenta hacer otra, le mandamos un alert indicándole que ya no puede hacerlo.Una vez implementada la función, nos falta llamarla, y esto vamos a hecerlo con el evento onChange del combo:<select name=..... onChange="combo()">

pero...?, y si el usuario vuelve a elegir la opción anterior, que ya está en las cajas de texto?. En este caso no se produciría un cambio, y no se escribiría nada. Pero para hacer la función estable por todos lados, lo que hecemos es introducir en la función una línea que lo que hace es que cada vez que se pincha el combo lo volvemos a poner en su primera opción, la que dice "selecciona 4 equipos", y así siempre tendremos controlado cuando se pincha un equipo. Estoa línea de código es:document.forms[0].menu.selectedIndex=0; que devuelve el foco a la primera opción cada vez que se pincha cambia la misma.Una última consideración: si el usuario pincha el botón de borrado en algún momento tenemos que igualar la variable contador a cero, para que el proceso empiece de nuevo. Esto lo logramos asignándole este valor en el botón de borrado, que nos queda entonces:<input type="button" value="borrar" onClick="document.forms[0].reset();n=0;">

EVENTOS EN JAVASCRIPT

FUNCIONAMIENTO

Los eventos son el mecanismo que usa el explorador para llamar y ejecutar las funciones incluidas en una página HTML. Tanto Netscape como Microsoft incluyen este objeto en sus navegadores, si bien lo hacen de manera bastante diferente uno del otro, siendo Internet Explorer el que permite un mayor aprovechamiento y posibilidades de programación. Con DHTML todos los elementos de la página web pueden tener asociado uno o mas eventos. Existe un grupo de eventos que son disparados por las acciones del usuario como mover el ratón, pulsar una tecla, picar una opción del menú, etc. También existe otro grupo de eventos que responden a las acciones del navegador como son el l finalizar de cargar una página, o cuando se va a salir de ella o al terminar de cargar una imagen o cuando se produce un error de ejecución del código. Por último existe un par de eventos bastante imprescindibles para la realización de efectos animados en las páginas, son los eventos temporizados, eventos asociados al reloj del sistema que nos permite ejecutar una determinada acción de manera repetida cada cierto intervalo de tiempo. A la hora de vincular eventos a los objetos HTML de una página hemos de conocer ciertos principios previos. En primer lugar los elementos de la página disparan los eventos independientemente de que nosotros le asignemos una función manejadora, es decir, cada evento posee un manejador predeterminado, así cuando picamos sobre un enlace el navegador lee el atributo href y nos lleva a la página apuntada por él, algo parecido ocurre con los botones Submit de los formularios. Otras veces ese comportamiento por defecto no hace absolutamente nada. Pero hemos de tener esto en cuenta y si queremos que esa acción predeterminada no se ejecute lo habitual es seguir el manejador del evento con la sentencia return false, o asignar el valor false a la propiedad returnValue del evento, aunque este método sólo vale para IE.Otra cosa a tener muy en cuenta es la promoción de eventos. Este es un efecto que se observa cuando se produce un evento en un elemento anidado dentro de otro, al producirse un evento en el objeto interno este evento asciende al elemento contenedor hasta llegar al elemento superior de este jerarquía. Por ejemplo:



<p id="Externo" onmouseover="alert(this.id)">Y aquí el elemento anidado <span id="interno" onmouseover="alert(this.id)"><b>elemento interno</b></span>eso está fuera</p>

Y aquí el elemento anidado elemento interno eso está fuera

Esta un elemento span anidado en un párrafo, si pasamos el ratón sobre el span el evento onmouseover del ratón actúa en primer lugar en el span, mostrando una ventana con su identificador (Interno), pero luego asciende hasta el elemento P provocando la acción vinculada en éste, mostrar una ventana con su identficador (Externo). A veces esto viene bien y otras provoca efectos indeseados. Para cortar esta ascensión del evento se asigna el valor true a la propiedad event.cancelBubble.

VINCULANDO EVENTOS

La vinculación de eventos no es mas que asignar una función escrita en javascript a un evento concreto, de manera que cuando se dispare éste la función entre en funcionamiento. Estas funciones se definirán en alguna parte de la página o en un archivo ligado a ella. La vinculación de eventos puede realizarse en línea dentro del código HTML de la página, asignando al nombre del evento una cadena con el nombre de la función, como en el ejemplo:<img src="bola.gif" onmouseover = "ctrlEv()">

En el ejemplo ctrlEv( ) es la función que reaccionará cuando el ratón pase sobre la imagen, o sea, cuando se produzca el evento onmouseover sobre la imagen. La función puede llevar argumentos definidos por nosotros, existiendo un argumento especial que señala al objeto sobre el que se produce el evento, se trata del objeto this. Si usamos este parámetro al llamar a la función ésta lo trata como el elemento donde se ha disparado el evento.Otra forma de vincular funciones controladoras es mediante código Javascript. En este caso lo que hacemos es tratar el evento como una propiedad del objeto HTML y asignarle directamente una instancia de la función:document.images[0].onmouseover=new Function("ctrlEv( )")

o asignándole un puntero a la funcióndocument.images[0].onmouseover = ctrlEv;

En el segundo caso asignamos una instancia de la función, si le pasamos el argumento this la función lo tomaría como el objeto que dispara el evento. En el tercer caso sin embargo lo que asignamos al evento es un puntero a la función, o sea, la direción de memoria donde se aloja la función, sin parámetros. En este caso el puntero this se asigna automáticamente y dentro del cuerpo de la función this equivale al objeto que dispara el evento sin necesidad de argumentos.Si se desea evitar que se ejecute el controlador por defecto de un evento pueden seguirse dos métodos: Asignar false a la propiedad event.returnValue dentro de la rutina manejador adel evento,Incluir en la asignación la sentencia return false, esta sentencia irá tras el nombre de la función vinculada. Este último sistema es compatible con Netscape y por tanto recomendable. Por ejemplo en un enlace el controlador por defecto del evento click es llevar el navegador a la dirección indicada en el argumento href, pero podemos evitar esto:<a href="destino.htm" onclick="alert('Mensaje de aviso'); return false">Pulsa aquí</a>

Al pulsar sobre el enlace no irá a la página destino.htm sino que abrirá una ventana de aviso. Esto puede ser útil si, en lugar de la ventana de aviso, usamos una función que, por ejemplo, de un valor al enlace dependiente de la hora del día o del usuario.


Documents

Manual Javascript