Manual Javascript

Manual de JavaScript
JAVASCRIPT
CONTROL DE VENTANAS SECUNDARIAS CON JAVASCRIPT
Una de las utilidades ms interesantes de Javascript es el control de ventanas secundarias (popups en ingls). Las ventanas secundarias son las que se abren adicionalmente a la ventana principal del navegador. Suelen ser ms pequeas que las ventanas normales y generalmente no tienen los mens del navegador, barra de direcciones, etc. Con Javascript podemos controlar los popups para hacer cosas como abrirlos, cerrarlos, darles el foco, pasar informacin de una ventana a otra, etc. En este manual veremos cmo 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. Comunicacin 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 mtodo open del objeto window, que es el encargado de abrir la ventana. La sintaxis del mtodo es la siguiente window.open(URL,nombre_ventana,parametros_configuracin) El primer parmentro es la URL de la pgina que deseamos mostrar en la ventana secundaria. El segundo parmetro 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 parmetro es la configuracin de la ventana, para indicar el tamao, qu barras de mens se tienen que ver y cuales no, si tiene o no barras de desplazamiento, etc. A continuacin podemos ver un ejemplo de utilizacin del mtodo open: window.open("pagina.html","miventana","width=300,height=200,menubar=no") Apertura y configuracin 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 informacin especfica. Algunas ventajas de abrir un enlace en una ventana secundaria pueden ser que: El usuario no se marcha de la pgina donde estaba el enlace. La ventana secundaria se puede configurar libremente con lo que se pueden hacer ventanas ms grandes o pequeas y con ms o menos mens. 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 fcilmente con tan solo HTML. Para ello podemos utilizar el atributo TARGET de las etiquetas HREF. Si ponemos target="_blank" en el enlace, la pgina se abrir en una ventana secundaria. Tambin podemos poner target="xxx" para que el enlace se presente el la ventana llamada xxx o en el frame xxx. El enlace tendra que tener esta forma: <a href="mipagina.html" target="_blank"> El problema de abrir una pgina secundaria con HTML consiste en que no podemos definir la forma de sta ni podremos ejercer mayor control sobre lla, tal como comentbamos entre las ventajas de abrir una ventana secundria 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 Informtica y Logstica -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 cmo abrir una ventana secundaria utilizando Javascript. Sentencia Javascript para abrir una ventana La sentencia es simplemente la funcin window.open(), lo ms complicado es saber cmo utilizar esa funcin, pero ahora veremos que no reviste ninguna complicacin. La funcin window.open() recibe tres parmetros, que se colocan dentro de los parntesis, de este modo: window.open(URL,nombre_de_la_ventana,forma_de_la_ventana) Veamos rpidamente cada uno de estos parmetros 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 pgina inicial de desarrolloweb.com en una ventana secundaria a la que vamos a llamar ventana1. Adems, la ventana ser de 120 pixels de ancho, 300 de alto y no tendr barras de desplazamiento. Una aclaracin adicional, si despus de abrir esa ventana colocamos otro enlace en la pgina que abra 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. Funcin que abre una ventana Lo ms cmodo para abrir una ventana es colocar una funcin Javascript que se encarge de las tareas de abrirla y que reciba por parmetro la URL que se desea abrir. El script es sencillo, vemoslo a continuacin: <script language=javascript> function ventanaSecundaria (URL){ window.open(URL,"ventana1","width=120,height=300,scrollbars=NO") } </script> Colocamos un enlace Este enlace no debe estar dirigido directamente a la pgina que queramos abrir, sino a la sentencia Javascript necesaria para abrir la ventana secundaria. Para ejecutar una sentencia Javascript con la pulsacin de un enlace lo hacemos as: <a href="javascript:sentencia_javascript_para_abrir_la_ventana"> El enlace llama a la funcin que abre la ventana Ahora Veamos cmo quedara todo ese enlace en la pgina. <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 parmetro de la funcin 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. Parmetros para dar forma a una ventana Estos atributos los puedes utilizar en la funcin window.open() para definir la forma que deseas que tenga tu ventana secundaria.
Width Height Top Left Scrollbars
Ajusta el ancho de la ventana. En pixels Ajusta el alto de la ventana Indica la posicin 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. Indica la posicin 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. 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). Establece si se puede o no modificar el tamao de la ventana. Con resizable=YES se puede modificar el tamao y con resizable=NO se consigue un tamao fijo. A partir de aqu se enumeran otra serie de propiedades que sirven para mostrar o no un elemento de la barra de navegacin que tienen los navegadores ms populares, como podra ser la barra de mens 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.
Resizable Directories (barra directorios) Location (barra direcciones) Menubar (barra de mens) Status (barra de estado) Titlebar (la barra del ttulo) Toolbar (barra de herramientas)
Abrir una ventana sin un enlace En otras ocasiones desearemos abrir una ventana secundaria automticamente, es decir, sin necesidad de que el usuario pulse sobre ningn enlace. En este caso, el cdigo de la funcin ventanaSecundaria nos sirve tambin y habr que aadir una lnea de cdigo Javascript a continuacin de la funcin ventanaSecundaria. Esta lnea a aadir simplemente ser una llamada a la funcin que se ejecutar segn se est cargando la pgina. Veamos como quedari este cdigo: <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 sera la llamada a la funcin que abre la ventana secundaria, como est fuera de una funcin se ejecuta segn se est cargando la pgina.
COMUNICACIN 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 comunicacin 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 continuacin en este artculo veremos cmo asignar un nombre a un popup. Si la comunicacin es desde la ventana secundaria a la principal debemos utilizar el atributo opener de dicha ventana secundaria, que referencia a la ventana principal. Tanbin veremos ms adelante este tipo de comunicacin. Nombre de la ventana con Javascript
Cuando abrimos una ventana utilizando el mtodo 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 mtodo open. Para guardar la referencia asignamos el valor de retorno del mtodo a una variable. A partir de ese momento la variable ser un sinnimo del objeto window, es decir, ser como si fuera el objeto window del popup y por lo tanto podremos acceder a los mtodos 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 mtodos 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 todava en ejemplos. Recordemos que esta propiedad contiene el URL del documento que estamos viendo y que si la cambiamos cambia la pgina que se est viendo. Nuestro ejemplo consiste en una pgina que va a abrir la ventana secundaria. Adems la pgina tendr un formulario con un campo de texto y un botn. En el campo de texto podremos colocar URLs y al pulsar el botn 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 pgina se pone en blanco) Ahora vemos el formulario que contiene el campo de texto y el botn. <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 funcin que se encarga de actualizar la URL de la ventana secundaria. function muestraURL(){ miPopup.location = document.formul.url.value } La funcin es extremadamente simple. Slo 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 pgina 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 aplicacin lo tiene la ventana original, y por eso es la ventana que se ve delante. Sera interesante que al actualizar el contenido del popup se mostrase delante la ventana del popup actualizada. Esto se consigue utilizando el mtodo focus() del objeto window, que coloca el foco de la aplicacin en la ventana sobre la que lo invoquemos. La funcin con esta pequea modificacin quedar as. function muestraURL(){ miPopup.location = document.formul.url.value miPopup.focus() }
Slo hemos aadido la llamada al mtodo focus() del objeto window correspondiente al popup.
ACCESO DESDE EL POPUP A LA VENTANA PRINCIPAL

Tambin podemos acceder desde un popup a la ventana que lo abri, para acceder a los mtodos 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 pgina principal, que tiene un formulario donde, entre otros campos, debemos introducir un telfono con su prefijo internacional. En caso de que no conozcamos los prefijos internacionales nos permite pulsar sobre un botn y mostrar una ayuda. La ayuda se ofrece a travs 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 pgina principal, que contiene el formulario donde se debe escribir el prefijo y el nmero. Al lado del campo de texto donde se coloca el prefijo hemos puesto un botn que sirve para mostrar el popup de ayuda. Al pulsar el botn llamamos a la funcin 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">Nmero</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 funcin abreVentana se tiene que entender perfectamente. El resto de la pgina es un simple formulario HTML metido dentro de una tabla para que quede mejor maquetado. Ahora veamos la pgina 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> DGH Informtica y Logstica -5-
function ponPrefijo(pref){ opener.document.formul.prefijo.value = pref window.close() } </script> </head> <body> <h1>Lista de prefijos internacionales</h1> <form name=fprefijos> Espaa: <input type="Button" value="+34" onclick="ponPrefijo('+34')"> <br> Holanda: <input type="Button" value="+31" onclick="ponPrefijo('+31')"> <br> Gran Bretaa: <input type="Button" value="+44" onclick="ponPrefijo('+44')"> <br> Estados Unidos: <input type="Button" value="+01" onclick="ponPrefijo('+01')"> <br> Blgica: <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 funcin ponPrefijo() pasndole el prefijo seleccionado. La funcin ponPrefijo() debe poner en un campo del formulario de la ventana que abri el popup el valor del prefijo que ha recibido por parmetro. 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 mtodo close() del objeto window.
ACCESO A VARIABLES Y FUNCIONES DE OTRAS VENTANAS

Desde una ventana tambin 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 pgina principal y llamar a funciones para hacer cualquier cosa que necesitemos. El acceso a las variables y las funciones se realiza a travs de los objetos ventana. Por ejemplo, si deseamos desde una ventana tener acceso a una funcin de un popup colocaramos su objeto ventana seguido de un punto y el nombre de la funcin a la que queramos acceder, como si fuese un mtodo nuevo del objeto ventana. Las variables se acceden como si fueran propiedades del objeto ventana. El cdigo sera algo parecido a esto. Para acceder a una variable miPopup.miVariable Para acceder a una funcin miPopup.miFuncin() Vamos a ver un ejemplo para ilustrarlo. Tenemos una pgina con un nmero cualquiera de campos de texto en un formulario y una funcin que sirve para inicializar los datos de los campos de texto a 0. En esta pgina abriremos una ventana secundaria desde la cual invocaremos a la funcin que inicializa los campos de texto. DGH Informtica y Logstica -6-
La pgina principal tendr una parte con un script para definir la funcin y abrir el popup y otra parte con el formulario que contiene los campos de texto. Se puede ver a continuacin su cdigo. <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 cdigo necesario para invocar a la funcin inicializaCampos() que pertenece a la ventana principal. La llamada a la funcin de la ventana "abridora" se realiza al pulsar un botn. <html> <head> <title>Popup Inicializador de formularios</title> <script> function llamadaOtraVentana(){ //llamada a la funcin de ventana abridora window.opener.inicializaCampos() window.opener.focus() } </script> </head> <body> <form> <input type="button" value="Llamar a funcin de otra ventana" onclick="llamadaOtraVentana()"> </form> </body> </html>
CERRAR VENTANAS CON JAVASCRIPT

Para cerrar la ventana del navegador debemos utilizar el mtodo 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 pgina que tiene un botn que abre una ventana secundaria o popup. Adems, tendr otro botn que cerrar la ventana secundaria. Por su parte, la ventana secundaria tendr un botn DGH Informtica y Logstica -7-
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 pgina principal tendra 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 mtodo 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 pgina con las funciones para abrir y cerrar la ventana. Adems, 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 funcin abrirVentana() y luego se utilizar en la funcin cerrarVentana(), dicha referencia deber declararse como global o de lo contrario slo tendra validez mientras la funcin abrirVentana() estuviera ejecutndose y, cuando pretendisemos utilizarla en la funcin cerrarVentana(), nos dira 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 pgina, que hemos colocado dentro de un formulario. Nota: Hay que sealar 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 mtodo close() de su objeto window, pero esa es una prctica que veremos en ejercicios ms adelante. Por su parte, el popup tiene un cdigo 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 funcin para cerrarse ella misma, que lo nico que hace es ejecutar el mtodo close() sobre su propio objeto window. Tambin hemos colocado un botn que se ha configurado para llamar a la funcin que cierra la ventana cuando se le haga clic. Un detalle sobre cerrar ventanas En cualquier momento podemos cerrar una ventana secundaria utilizando el mtodo close() del objeto window. En el ejemplo anterior hemos visto cmo 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 confirmacin que pregunta al usuario si de verdad quiere cerrar la ventana. Podemos ver esta caja de confirmacin al pulsar el botn siguiente, que intentar cerrar esta ventana. Nota: La caja de confirmacin 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 teora, 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 slo 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 ms, slo ocurre esto en navegadores modernos, aunque actualmente le va a pasar a casi todos los usuarios.
SUBMEN EN OTRA VENTANA

Vamos a realizar un pequeo ejemplo sobre cmo 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, ms concretamente, el mtodo open() del objeto window. En este ejemplo vamos a ir un poco ms 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 pgina con fondo blanco, un campo de texto vaco y un botn. Cuando se pulse el botn 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 pgina padre cambiar a ese color y el color se escribir en el campo de texto. Pgina padre La pgina original contendr un simple formulario con un botn y un campo de texto. Adems, 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 funcin lanzarSubmenu() es la que contiene el script para abrir el popup. El formulario es de lo ms normal. Lo nico destacable es el atributo onclick del botn, que sirve para definir las acciones a ejecutar cuando se pulsa el botn, en este caso una llamada a la funcin que abre la ventana secundaria. Pgina secundaria La pgina secundaria es un poco ms compleja, pero la parte que nos importa a nosotros en este ejercicio es muy sencilla. Lo importante de la pgina 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 pginas 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 sinnimo 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 funcin actualizaPadre() es la encargada de realizar el trabajo. Recibe el cdigo del color sobre el que se ha pulsado. En la primera lnea cambiamos el color de la pgina web padre y en la segunda lnea colocamos el cdigo RGB del color recibido por parmetro en el campo de texto. Como vemos, el objeto opener tambin depende del objeto window de la pgina, como todos los dems objetos de la jerarqua 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"); DGH Informtica y Logstica - 10 -
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 funcin actualizaPadre() pasndole el cdigo del color se ha de utilizar.
FORMULARIOS INTRODUCCIN
Los formularios son un componente a veces esencial en una pgina web, ya que permiten la interaccin con el usuario, pudiendo conseguir mediante ellos recoger informacin particular sobre sus gustos, opiniones, datos personales, etc, informacin que luego deberemos procesar en el servidor web para su correcta interpretacin y uso. Este proceso de datos se puede llevar a cabo mediante diferentes tecnologas: CGI, ASP, JSP, etc. Pero si nos limitamos al proceso de datos y elementos de formulario en el lado del cliente, la herramienta ms 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 slo 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 tambin podemos acceder a todos los elementos que forman el formulario y a sus propiedades, con lo que podemos disear formularios realmente atractivos y dinmicos, que convertirn nuestras pginas en verdaderas "obras de arte". Y todo esto es posible porque en la propia definicin 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 ms que ensear algo crearan confusin, si no mostrar las bases de cmo podemos manejar formularios con este lenguaje de programacin, dejando al empeo del lector el profundizar ms en casos concretos.
EL OBJETO FORM
El 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 mtodos es: window.document.forms.[nombre_formulario].[nonbre_campo].propiedad en la que podemos prescindir de las cadenas forms y window, ya que el navegador considera al formulario particular un objeto por s mismo. Adems, el objeto forms dentro del objeto documents posee dos subpropiedades: index: array que contiene todos los formularios de una pgina, 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 pgina deberemos usar la expresin: document.forms[0]... length: que contiene el nmero de formularios que hay en la pgina, y cuya sintaxis es: document.forms.length Recordemos que en un formulario HTML un formulario se crea mediante un cdigo del tipo: DGH Informtica y Logstica - 11 -
<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 mtodos y unos eventos propios, que nos van a permitir acceder a cada uno de los elementos que lo forman y poder modificar su diseo y comportamiento dinmicamente, sin necesidad de hacer nuevas peticiones al servidor, ya que todo se va a ejecutar en el lado cliente, estando todo el cdigo necesario dentro de la propia pgina web. Las principales propiedades del objeto form son: name Es la propiedad ms 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 pgina en concreto y acceder a sus propiedades y mtodos. Por esto, TODA ETIQUETA FORM DEBE TENER SU PROPIEDAD NAME Y NO PUEDE HABER DOS FORMULARIOS CON EL MISMO NOMBRE EN UNA MISMA PGINA. action 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 dnde se encuentra el programa o pgina activa que va a procesar los datos contenidos en los diferentes campos del formulario. Sin el uso de JavaScript esta propiedad sera esttica, por lo que una vez incluida en el cdigo inicial de la pgina permanecera inmutable. Pero mediante JavaScript podemos cambiarla, smplemente refirindonos 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 pginas JSP dependiendo de uno de los datos introducido en un campo. Como ejemplo, supongamos que en el formulario de nuestra pgina hay dos checkbox, y que dependiendo de cual marque el usuario debemos enviar los datos bien a la pgina a.jsp o a la pgina b.jsp. El cdigo necesario para ello sera: <HTML> <HEAD> <SCRIPT LANGUAGE= "Javascript"> <-function enviar( ){ if ((document.forms.datos.sistema1.checked = = true) && (document.forms.datos.sistema2.checked = = true){ alert('debe hacer una sla seleccin) { 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 seleccin') 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 seran enviados a una u otro pgina para su proceso, y en caso de que no se hubiera seleccionado ninguna casilla aparecera un mensaje de error. DGH Informtica y Logstica - 12 -
method Este parmetro establece el mtodo de envo de los datos del formulario. Su valor puede ser POST, conveniente cuando queremos enviar una grn cantidad de datos como una cadena contnua, y que es el ms usado, o GET, que se emplea cuando queremos pasar unos datos concretos a una pgina ASP o JSP. Tambin podemos acceder a cambiar esta propiedad dinmicamente, pero no se suele hacer nunca, ya que el mtodo de envo suele estar definido con toda exactitud. No obstante, la sintaxis para acceder a esta propiedad sera: document.forms.[nombre_formulario].method="metodo_elegido" target 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 botn submit se envan los datos del formulariio al servidor, en el que un programa o pgina activa procesa los datos, generando de nuevo otra pgina que se enva al navegador cliente. En la ventana o frame definido por el atributo target se va a cargar esta pgina 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 pgina de respuesta, e incluso definir las posibles ventanas dinmicamente. Como ejemplo, supongamos que tenemos una pgina inicial con dos frames: uno superior, en dnde 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 botn de un grupo de dos la pgina de respuesta sea otra pgina que se carge en la ventana central, pero que si el radio botn marcado es el segundo la respuesta sea un mensaje determinado que se muestre en el frame superior. Para ello debemos definir primero una pgina con dos frames, en la que se cargan la pgina del mensaje inicial arriba y el formulario abajo. El cdigo de la pgina 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 sla 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="enva" ONCLICK= "envia( )"> </FORM> </BODY> </HTML> elements 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 nmero de campos diferentes que tiene el formulario, su tipo, etc, teniendo en cuenta que el primer ndice del vector es el 0, como ocurra con el vector forms. Posee dos subpropiedades:
DGH Informtica y Logstica - 13 -
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 nmero 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, tambin podemos referirnos a un formulario de nuestra pgina 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 pgina sin necesidad de conocer su nombre, y podemos obtener el nmero de formularios que hay en una pgina en concreto. La sintaxis para acceder a un formulario mediante este camino es del tipo: document.forms[indice].propiedad Y para conocer el n de formularios en la pgina deberemos escribir: function cantidad ( ) { var f = document.forms.length; alert( ' el nmero de formularios de la pgina es ' + f ); document.forms[2].texto.value='cambiamos el valor del campo'; } encoding 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 dinmicamente el tipo de codificacin.
Mtodos del objeto form submit Para enviar los datos de un formulario es necesario siempre utilizar este mtodo, que por defecto est asociado al elemento de formulario <INPUT TYPE = " submit " >, que es un botn que al ser pulsado llama al mtodo submit. Ahora bien, a veces nos interesa que antes de que se produzca el envo de datos al servidor se ejecuten una serie de acciones del lado del cliente, como pueden ser validacin de datos, mensajes de alerta y/o confirmacin, etc. Para lograr esto podemos sustituir el botn tipo submit por un botn tipo button que al ser pulsado llame a una funcin JavaScript que ejecute las acciones previas al envo y una vez cumplimentadas enve los datos. Esto se consigue llamando en la funcin al mtodo submit ( ), y el cdigo necesario tiene el aspecto siguiente: function previa ( ) { ... ...acciones a realizar... ... document.forms.nombre_formulario.submit ( ); } reset Este mtodo 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 mtodo submit existe por defecto un botn <INPUT TYPE = " reset " > que se encarga de realizar esta operacin, til por ejemplo cuando el usuario se ha equivocado al rellenar los campos y desea comenzar de nuevo el proceso. Pero tambin nos puede interesar a veces poner a cero los campos del formulario sin que intervenga el usuario. Esto lo conseguimos llamando dirctamente al mtodo submit ( ) o llamando a una funcin que ejecute el mtodo, siendo el cdigo 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 estndares y otros sin serlo s los admite, y que son: onSubmit Es el principal evento del objeto y el nico estandar, y se produce al enviar los datos del formulario mediante el botn submit o mediante el mtodo submit ( ). Un ejemplo de llamada al mtodo sera: <FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONSUBMIT = " alert ( ' se envan los datos ' ) "> onReset Mediante este evento podemos ejecutar una accin dada cuando el usuario pincha el botn de borrado o cuando mediante una funcin se ha llamado al mtodo 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' ) " > onClick Este no es un evento tpico del objeto form, pero se puede usar con n, y mediante l podemos ejecutar una accin concreta cuando el usuario hace click en cualquier parte del formulario, sin necesidad de que se pulse en un campo; slo es necesario pinchar en algn 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' ) "> Adems de estos eventos, y al igual que ocurre con onClick, el objeto form tambin admite los eventos generales ondblClick, onmouseOver, onmouseOut, onkeyPress , etc, pero su uso acarrea ms problemas que beneficios, por lo que no se utilizan. Slo saber que ests ah y que se pueden usar en casos muy especficos.
LOS OBJETOS TEXT, PASSWORD E HIDDEN

Uno de los elementos ms 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= " tamao_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 anlogo a este, pero se diferencia en que est concebido para que en l se introduzcan contraseas, por lo que cuando el usuario escribe algo en su interior este texto se va almacenando dentro, pero en pantalla slo se muestran asteriscos, ****, por motivos de seguridad. Por ltimo, el elemento HIDDEN es tambin 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 mtodos de estos tres elementos anlogos mediante las del objeto TEXT, teniendo siempre presente que lo que digamos es extensible a los tres. Pero as, con el cdigo HTML puro, slo 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 fcilmente sobre los campos de texto y sobre sus propiedades, ya que un elemento de formulario TEXT es tambin para JavaScript un objeto, que por lo tanto tiene sus propiedades, mtodos y eventos, a los que podemos recurrir dinmicamente para cambiar valores, validar las entredas del campo, etc. La forma de acceder a un campo de texto y a sus propiedades y mtodos es la general del objeto form, aadiendo 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: name Es la propiedad ms 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 pgina y acceder a sus propiedades y mtodos. 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 ningn problema en que usemos el mismo nombre para diferentes campos de texto de diferentes formularios de la pgina. 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 cul nos referimos y nos dar un error, expresado generalmente mediante el mensaje de que el objeto llamado no existe. value 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 ms 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 cdigo necesario para ello sera: <HTML> <HEAD> </HEAD> <BODY> <FORM NAME="datos" ACTION="/jsp/pag_3.jsp" METHOD= "post"> Introduce tu nombre: <INPUT TYPE=" text " NAME=" nombre " VALUE= " slo maysculas " ONCLICK = "document.forms.datos.nombre.value= '' "> </FORM> DGH Informtica y Logstica - 16 -
</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 vaco. y tambin 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 cdigo, para pasar el valor a un formulario de la mima pgina, sera: <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 asmismo asociada otra propiedad general de JavaScript, la propiedad length, que nos da la longitud del texto introducido en la caja, es decir, el nmero 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 nmero dado de caracteres. Vamos a ver un cdigo 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> disabled Esta propiedad bloquea el campo de texto, de tal forma que el texto que contenga el campo se colorea de color grs y no se puede escribir nada nuevo en el campo. Vamos a ver su sintaxis mediante un ejemplo: <HTML> <HEAD> </HEAD> DGH Informtica y Logstica - 17 -
<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 ( ) " size Que establece la anchura de la caja de texto (ejemplo de uso abajo, asociado al evento onKeyPress). Los principales mtodos del objeto text son: focus Que sita el foco en la caja de texto. Este mtodo se puede usar por ejemplo cuando se realiza una validacin de formulario y hay algn dato incorrecto; podemos entonces lanzar un mensaje de alerta al usuario y situar el cursor en el campo incorrecto. El cdigo para ello sera: <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> select Este mtodo 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 Estos mtodos propios convierten el texto introducido a maysculas y a minsculas respectivamente, y van asociados a la propiedad value de la caja de texto. Vamos a ver el cdigo necesario para pasar a maysculas en texto que el usuario introduce en un elemento text: DGH Informtica y Logstica - 18 -
<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 maysculas!" onClick="cambia()"> </form> </center> </body> </html> Por otra parte, el objeto TEXT posee los siguientes eventos: onFocus Este evento permite lanzar una accin cuando la caja de texto recibe el foco, es decir, cuando el usuario pincha con el ratn la caja o cuando accede a ella mediante el tabulador del teclado. Un ejemplo de llamada al mtodo sera: <INPUT TYPE = " text" NAME = " campo1 " ONFOCUS = " alert ( ' foco en la caja ' ) " > onBlur Mediante este evento podemos ejecutar una accin dada cuando la caja de texto pierde el foco, bien porque el usuario trs escribir en ella pinche en otra parte de la pgina 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 cmo podemos utilizar estos dos eventos. Vamos a crear un formulario con dos cajas de texto, de tal forma que despus 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 sla ( 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>
onClick 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 anlogo. onChange 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 - 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 adems de ensearnos cmo se deben usar estos eventos nos va a mostrar las dificultades que puede ocasionerle al usuario si no se usan corrctamente. 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 maysculas. En el segundo campo aparecer un mensaje cuando el usuario quite el ratn del primer campo. Pero si este vuelve a pasra el ratn por el primer campo, el texto que introdujo desaparece. ?Cmo se arregla esto...?. Pensad un poco. El cdigo 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 = ' usaslo maysculas ' " ONMOUSEOUT = " document.form1.mensaje.value = ' bonito nombre'" ><BR><BR> <INPUT TYPE = " text " NAME= "mensaje"> </FORM> </BODY> </HTML> onkeyPress 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 ms texto del que puede contener. El cdigo 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 ningn 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 tcnica, 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 funcin 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 slo puede elegir una de ellas. La forma de incluir ambos objetos en un formulario tambin es diferente. Para incluir un grupo de Checkbox la sintaxis sera: <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 tendramos 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: name 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 seleccin nica se pierde. El acceso a un radio o checkbos se efecta de forma anloga a lo visto en el caso de los objetos TEXT. value 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 dems, al tener todos el mismo name. Pero desde el punto de vista de su tratamiento con JavaScript, esta propiedad no es muy til. disabled Esta propiedad bloquea la caja del checkbox o el botn de radio de tal forma que el campo se colorea de color grs y no se puede accionar el mismo. Vamos a ver su sintaxis mediante un ejemplo, en el que vamos a ver cmo 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" > DGH Informtica y Logstica - 21 -
<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> checked La propiedad checked marca o comprueba si est marcado un checkbox o un radio botn, 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 cmo podemos acceder a esta propiedad en todo un conjunto de checkbox, consiguiendo con ello marcar y desmarcar todos a la vez. El cdigo 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> length Esta propiedad nos devuelve el nmero de radio botones que existe en un grupo determinado de ellos que tienen el mismo atributo name. El siguiente cdigo 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>
index 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 expresin: document.forms.nombre_formulario.equipo[1] ya que el array index comienza en cero. Por otra parte, estos objetos poseen los siguientes eventos: onFocus Este evento permite lanzar una accin cuando el checkbox o el radio botn recibe el foco, es decir, cuando el usuario pincha con el ratn en ellos o cuando accede a ella mediante el tabulador del teclado. Un ejemplo de llamada al mtodo sera: <INPUT TYPE = " checbox" NAME = " campo1 " ONFOCUS = " alert ( ' foco en el checkbox' ) " > onBlur Mediante este evento podemos ejecutar una accin dada cuando el elemento pierde el foco, bien porque el usuario trs marcarlo pinche en otra parte de la pgina 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 botn' ) " > onClick Su efecto es el mismo que el del evento onFocus, por lo que su uso es anlogo, siendo la nica diferencia entre ellos que para hacer que salte el evento onclick es necesario pinchar en el elemento, no activndose si accedemos a l mediante el tabulador. Vamos a ver su uso prctico mediante el siguiente cdigo, que hace ue al pinchar un radio botn 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> onChange 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 prcticas. onMouseOver , onmouseOut, ondblClick, onkeyPress Estos eventos son aceptados por ambos objetos, aunque su aplicacin prctica es nula, ya que causa ms molestias que ventajas.
LOS OBJETOS BUTTON, SUBMIT Y RESET

Vamos a tratar en este captulo estos 3 objetos, que aunque se diferencian un poco en su uso su apariencia, sus propiedades y sus eventos son anlogos. La principal diferencia en su uso estriba en que el elemento button es smplemente un botn para ejecutar un cdigo JavaScript cualquiera, no teniendo asociada por defecto ninguna accin; el elemento submit ejecuta el envo 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 ningn estilo aparecen siempre como un botn rectangular grs con un texto negro dentro. Las principales propiedades de estos objetos son: name Es la propiedad que va a asignar a cada botn un nombrae identificador para poder referirnos luego a l y acceder a sus propiedades. width Que fija la anchura que va a tener el botn. Si no se especifica este valor, el botn tendr el ancho necesario para contener el texto indicado mediante la propiedad value. height Que fija la altura del botn. value Esta propiedad determina el texto que va a aparecer contenido en el botn. Vamos a ver un ejemplo que maneje estas propiedades, y para ello vamos a construir una funcin de JavaScript que cambie el texto de un botn en el que no se ha definido la anchura, para que veamos cmo cambia esta con el texto del botn: <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> disabled Esta propiedad bloquea el botn de tal forma que el texto se colorea de color grs y no se puede accionar el mismo. Vamos a ver su sintaxis mediante un ejemplo, en el que vamos a ver cmo se accede a esta propledad para crea un botn de envo de datos que slo 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 opcin: <input type="radio" name="radio1" onClick="activa()">msica <input type="radio" name="radio2" onClick="activa()">cine <input type="radio" name="radio3" onClick="activa()">deporte DGH Informtica y Logstica - 24 -
<input type="submit" name="boton" value="enviar" onClick="return false" disabled> </form> </body> </html> Por otra parte, estos objetos poseen los siguientes eventos: onFocus Este evento funciona como el mtodo onClick para estos objetos, por lo que me refiero a lo abajo explicado. onBlur No tiene un uso prctico para estos objetos. onClick Este es sin duda el evento ms onClick con los botones, ya que por propia definicin el objetivo de un botn es ser pinchado. Su uso principal es llamar a una funcin JavaScript al ser pinchado el botn, del que ya hemos visto varios ejemplos a lo largo de estos artculos, por lo que no voy a insistir en ello. Slo hacer una consideracin de uso: cuando tenemos en un formulario un botn del tipo submit o reset y por algn motivo queremos anular su accin intrnseca (enviar los datos del formulario o borrarlos), basta con colocar un evento onClick en el botn que nos devuelva false, del tipo: <input type="submit" value="enviar" onClick="return false"> onMouseOver , onmouseOut, ondblClick, onkeyPress Estos eventos son aceptados por estos objetos, y su aplicacin prctica la vamos a ver mediante un ejemplo, cuyo cdigo 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, mtodos y eventos. Pero adems posee una serie de caractersticas propias originadas por su propia definicin. 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> DGH Informtica y Logstica - 25 -
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: name Es la propiedad que va a asignar a cada textarea un nombre identificador para poder referirnos luego a ella y acceder a sus propiedades. cols Que fija la anchura que va a tener el textarea, mediante el nemro 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. ro w s Que fija la altura que va a tener el textarea, mediante el nmero 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. value 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, tambin posee la subpropiedad length, que representa el n de caracteres que contiene el textarea. Para entender bien esto, vamos a escribir y esplicar el cdigo necesario para crear un textarea que slo permita escribir dentro 15 caracteres.El cdigo 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 ms 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 mximo 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 funcin chequea, que admite como parmetro el nombre del formulario sobre el que va a operar, y si nos fijamos en el contenido del botn submit vemos que llamamos a la funcin pasndole como parmetro la palabra clave de JavaScript this, que representa el objeto en la que est contenida; es decir, como el botn 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 nmero mximo de caracteres que queremos en la caja. Seguidamente vemnos si el nmero de caracteres introducidos en el textarea, determinado por this.comentario.value.length, es mayor que el fijado por la variable max (15 en este DGH Informtica y Logstica - 26 -
caso). Si es as lanzamos un mensaje de alerta al usuario comunicndole que ha sobrepasado el n de caracteres permitido, y luego escribimos return false, ya que como hemos llamado a la funcin desde un botn submit si no devolvemos false los datos del formulario sern enviados. Si la condicin de longitudes no se cumple, es decir, si el n de caracteres es menor que 15, dejamos que el proceso de envo siga adelante sin lanzar ningn mensaje, y esto se consigue retornando true. disabled Esta propiedad bloquea el textarea de tal forma que el texto que contiene se colorea de grs y no se puede cambiar el mismo ni escribir nada nuevo en el interior de la caja. readonly Que acta de forma anloga a disabled, bloqueando el texto contenido de forma que no se puede modificar, pero que no pone el textarea en color grs. El objeto textarea posee los siguientes mtodos: select Este mtodo selecciona el texto contenido en el textarea, situndolo con color blanco sobre un fondo azul. Es el usado en las pginas que muestran cdigo JavaScript de ejemplo para que podamos seleccionarlo al pulsar sobre el texto, y as copiarlo fcilmente. La forma de usar el mtodo 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 botn derecho y seleccione "copiar" en el men contextual. <form> <textarea cols=15 rows=10 onFocus="this.select()">Esto es un ejemplo de cmo se selecciona el texto de una caja al coger esta el foco </textarea> </form> </center> </body> </html> focus Este mtodo sita el cursor sobre el textarea. Por otra parte, estos objetos poseen los siguientes eventos: onFocus Que se activa al recibir el foco el textarea, bien porque se pinche dentro con el ratn, bien por acceder al mismo mediante el tabulador. Vamos a ver cmo 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> DGH Informtica y Logstica - 27 -
</html> onBlur El evento onBlur se lanza cuando el textarea pierde el foco despes 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. onClick Que se lanza al pinchar con el ratn en el interior del texarea. onMouseOver , onmouseOut, ondblClick, onkeyPress,onKeyUp Estos eventos son aceptados por este objeto, al igual que los dems objetos de formulario. Vamos a ver un ejemplo parecido al primero de este captulo, en el que vamos a permitir un mximo de caracteres en el textarea, y adems vamos a mostrar al usuario el n mximo de ellos que le van quedando para poner, es decir, vamos a implementar un contador de cuenta atrs. Vamos a ver el cdigo 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"> slo 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 todava </form> </center> </body> </html> Vamos a definir la funcin contador, que va a manejar 3 parmetros, que van a ser: 1) campo: representa al textarea sobre el que queremos que acte la funcin, 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 atrs, representada en nuestro formulario por this.form.remLen. 3) limite : que va a determinar el n mximo de caracteres que vamos a permitir en el textarea. Las instrucciones que le damos a la funcin son: a) if (campo.value.length > limite) campo.value = campo.value.substring(0, limite); este cdigo es una condicin que le dice a la funcin que si el la longitud de la propiedad value del campo que le pasemos como primer argumento ( es decir, el nmero de caracteres introducido en el textarea) es mayor que el lmite pasado como tercer argumento, entonces slo debe tomar los caracteres comprendidos entre el primero (0) y el marcado por el lmite (125), con lo que aunque escriba el usuario ms de 125 slo se considerarn los 125 primeros. Esta instruccin slo maneja pus el caso de que haya ms de 125 caracteres, y no acta para nada con el contador de cuenta atrs. 2) else cuentacampo.value = limite - campo.value.length; que trata el caso en que todava no se superen los 125 caracteres en el textarea, y le dice a la funcin 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 lmite establecido menos el numero de caracteres que haya introducidos en el textarea, con lo que consegimos el efecto de cuenta atrs.
Ahora bien, para que la funcin acte dinmicamente debemos llamarla cada vez que el usuario pulse una tecla al introducir un caracter en el textarea, y tambin cuando la tecla ha sido pulsada, para que no nos pasemos del lmite de 125 caracteres establecido. Por eso llamamos a la funcin 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 ms dificil, ya que el objeto SELECT (conocidos tambin como combos), por su propia construccin, ofrece ms 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 ms 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 permitindonos efectuar una selecin entre las diversas opciones que contiene.. Su sintaxis dentro de un formulario es del tipo: <select name="menu"> <option value="opcion1">msica <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: name Es la propiedad que va a asignar a cada select un nombre identificador para poder referirnos luego a l y acceder a sus propiedades. size Que fija el nmero de opciones que sern visibles en el combo. Para acceder a esta propiedad deberemos escribir: document.name_formulario.name_select.size= nmero disabled Esta propiedad bloquea el combo, de tal forma que el texto que contiene se colorea de grs y no se puede accionar el mismo ni hacer ninguna seleccin en l. length Que nos da acceso al nmero de opciones que forman el combo. Su sintaxis tpica es del tipo: document.forms.nombre_formulario.nombre_select.length type Que nos dice en general qu tipo de objeto de formulario es el referenciado, y en este caso nos informa adems si el combo es simple o mltiple. Su forma de acceso es: document.forms.nombre_formulario.nombre_elemento.type selectedIndex Que nos permite acceder a la opcin elegida por el usuario en un select. Nos devuelve el nmero de la opcin 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 opcin elegida. Veamos el siguiente cdigo:
<html> <head> <script language="JavaScript" type="text/javascript"> function muestra() { var miOpcion=document.forms[0].equipos.selectedIndex; var texto='nmero de opcin elegida= '+miOpcion+'\n'; texto+='value de la opcin = '+document.forms[0].equipos.options[miOpcion].value+'\n'; texto+='texto de la opcin= '+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">Atltico de Madrid</option> </select> </form> </body> </html> selected Propiedad booleana que comprueba si una opcin determinada a sido seleccionada o no. Como ejemplo de su uso veamos el siguiente cdigo: <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">Atltico de Madrid</option> </select> </form> </body> </html> multiple Que convierte el combo de una sla opcin 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 seleccin. Vamos a ver un ejemplo en el que vamos a cambiar esta propiedad dinmicamente, junto con el texto y funcionalidad de un botn. El cdigo necesario sera: <html> <head> <title>Untitled</title> DGH Informtica y Logstica - 30 -
<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">msica <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 botn con un texto. Para bcambiar los valores de ambos elementos definimos una variable "estado", que inicialmente vale 1, y creamos una funcin 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 slo nos queda acceder en cada bloque a la propiedad multiple del combo y a la propiedad value del botn, cambindoles los valores. Por ltimo mediante el evento onClick del botn llamamos a la funcin cada vex que se pulse este. option Esta es sin duda una de las propiedades ms 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 captulo. El objeto select posee el mtodo: focus Este mtodo sita 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. Por otra parte, estos objetos poseen los siguientes eventos: onFocus Que se activa al recibir el foco el combo, bien porque se pinche dentro con el ratn, bien por acceder al mismo mediante el tabulador. Vamos a ver cmo podemos usar este evento para lanzar un mensaje al usuario para que haga una seleccin en el combo: <html> <head> </head> <body> DGH Informtica y Logstica - 31 -
<form name="ejemplo1"> <select name="menu" onfocus="alert('por favor, elija un tema')"> <option value="opcion0">?qu tema le gusta? <option value="opcion1">msica <option value="opcion2">cine <option value="opcion3">teatro </select> </form> </body> </html> onBlur El evento onBlur se lanza cuando el combo pierde el foco despes 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. onChange En el ejemplo anterior el mensaje de alerta se lanza cuando el usuario abandona el combo, pero no distingue si se ha cambiado la opcin inicial o por defecto, aparte de que precisa que se pinche fuera del mismo (por eso hemos puesto el botn "enviar", que no hace nada, slo coger el foco). Todo esto se evita mediante el uso del evento onChange, que se activa cuando se cambia la opcin actual del combo por otra, y que no precisa de que se pinche en otro sitio de la ventana. onClick Que no conviene utilizar nunca, ya que se lanzara cada vez que se pinchara en el combo, lo que impedira al usuario efectuar una seleccin. onMouseOver , onmouseOut, ondblClick, onkeyPress, onKeyUp Estos eventos son aceptados por este objeto, al igual que los dems objetos de formulario, pero no son tiles en absoluto (salvo contadas excepciones), por lo que no se usan.
EL OBJETO OPTION
Cmo es que digo el objeto OPTION, cuando en el captulo anterior hemos visto que este elemento es una propiedad del objeto SELECT?. Pus 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, adems 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: value Que fija un valor asociado a cada opcin del combo, valor que no ve el usuario, pero que es el que se va a enviar asociado al parmetro 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 enva con el formulario. As, si el usuario ha seleccionado la opcin del combo determinada por el cdigo: <OPTION VALUE="00001">msica</OPTION> Este ha seleccionado en el combo la palabra "msica", pero el valor que se enva al programa que va a procesar los datos es "00001". text 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= nmero. selected
Esta propiedad selecciona de de antemano o dinmicamente una de las opciones del combo, haciendo por tanto que aparezca en primer lugar aunque su posicin en la lista de opciones no sea ese. El objeto option no posee mtodos 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 tambin 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 nmero de opciones que hay en el select, y cuyo acceso se realiza con la escritura: document.name_formulario.name_select.options.length Tambin 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 opcin 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 opcin seleccionada almacenado en la variable podemos acceder tanto a la propiedad value de la opcin: 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 opcin 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">msica <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> DGH Informtica y Logstica - 33 -
Para comprobar si una determinada opcin 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 tambin un constructor propio, new Option, que nos va a permitir introducir dinmicamente una o varias opciones nuevas dentro de un combo. La sintaxis genrica de este constructor es: otraopcion=new Option("texto","valor", "defaultSelected", "selected") en donde texto va a ser el texto asociado a la nueva opcin y valor su value asociado, defauldSelected deberemos ponerlo si queremos que sea la opcin seleccionada por defecto en el combo y selected si queremos que sea la seleccionada slo en el momento de crearla. Una vez creada la nueva opcin 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 opcin lo que haramos sera sustituir una existente por la nueva. Vamos a ver un ejemplo para aclarar esto, en el que vamos a introducir una nueva opcin 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">msica <option value="opcion2">cine <option value="opcion3">teatro </select> <input type="button" value="opcin 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 opcin correspondiente, pero su lugar sigue ah, aunque vacio. Para hacer las cosa bien deberemos quitar esta opcin vaca, 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 cdigo: <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> DGH Informtica y Logstica - 34 -
</head> <body> <form name="ejemplo"> <select name="menu"> <option value="opcion0">esqu <option value="opcion1">msica <option value="opcion2">cine <option value="opcion3">teatro </select> <input type="button" value="borra esqu" onClick="borra()"> </form> </body> </html> Si deseamos sustituir una opcin de un combo por otra nueva, deberemos sustituir el texto y el value por los asociados a esta, y un ejemplo de esto sera: <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">msica <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 captulos a un par de ejemplos prcticos, que ir explicando paso a paso. La complejidad de los mismos derivar slamente de nuestro conocimiento de la aplicacin de JavaScript a los formularios, ya que sin duda se pueden implementar construcciones mucho ms complejas, pero que tambin necesitaran de un conocimiento bsico o avanzado de otros objetos de este lenguaje de programacin, como el tratamiento de fechas, el de elementos matemticos, el de creacin de objetos propios, etc, que no son por ahora la intencin de este pequeo manual, pero que s os prometo que veremos ms adelante. Ejemplo A: creacin de un combo mltiple En alguna que otra pgina web hemos visto dos combos, uno tras otro, de tal forma que segn la seleccin que hagamos en el primero aparecern unas opciones u otras en el segundo. Para dejar las cosas ms claras, me estoy refiriendio a lo siguiente: Principio del formulario
-elije una opcin-
Principio del formulario

------------------------
Final 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; slo lo hago as para ms claridad) que vamos a meter dentro de una tabla para que estn en la misma lnea de la pgina. El primero de ellos va a ser de estructura fija, el principal, y el otro vamos a inicializarlo smplemente con su pareja de etiquetas select y una opcin que contiene una serie de guiones, escribiendo para ello dentro del BODY el cdigo HTML: <table> <tr> <td width="150"> <form name="form1"> <select name="menu1"> <option value="opcion0">-elije una opcin<option value="opcion1">deporte <option value="opcion2">msica <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 cdigo 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, opcin 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 funcin menu1() crearemos el nuevo combo dinmicamente. Y creamos luego otras dos funciones anlogas para los casos de msica y cine. Por ltimo, slo nos falta establecer la llamada a estas funciones, llamada que vamos a hacer mediante una nueva funcin inicial, que va a detectar qu opcin 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 funcin mediante el manejador de eventos onChange, aplicado al primer combo: <select name="menu1" onChange="combo()">
y ya est. El cdigo 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 opcin<option value="opcion1">deporte <option value="opcion2">msica <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: CREACIN DE UN COMBO DE SELECCIN 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 seleccin 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 ms veces la misma opcin en el combo?. Debemos corregir esta posibilidad estableciendo un sistema tal que si se selecciona una opcin que ya lo estaba, bien lanzando un mensaje de error al usuario y no se le permita hacerlo, bien haciendo que entonces la opcin repetida se borre. Vamos a implementar este ltimo camino. Para la explicacin voy a seguir un esquema no lineal, por lo que si quereis ver el cdigo completo ordenado pincha luego con el botn de recho sobre la ventana flotante del ejemplo y selecciona "ver cdigo fuente". Lo primero que vamos a hacer va a ser implementar un formulario en nuestra pgina, que va a estar formado por un select con siete opciones, cuatro cajas de texto y los botones de envo y borrado. Adems, como vamos a pasar los textos del combo a las cajas de texto, necesitamos tambin 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">Atltico 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 botn de borrado tipo button porque nos interesar luego aadirle funcionalidad. Una vez implementado el formulario vamos a crear nuestra funcin 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 funcin debe ser del tipo ya visto en estos captulos, con la nica salvedad de que ahora debemos hacer una comprobacin cada vez que el usuario elije una opcin: si esta ya estaba en la lista de elegidas, se borrar de los dos campos (caja e hidden), y si no lo estaba, se aadir a los siguientes vacos: <script language="JavaScript" type="text/javascript"> var n=0; function combo() { n++; if (comboMenu()) { DGH Informtica y Logstica - 38 -
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('slo puede seleccionar 4 equipos como mximo'); 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 funcin vamos comprobando desde la segunda seleccin del usuario si la opcin elegida estaba ya en la lista, en cuyo caso la eleiminamos de la misma, y para que no queden lugares vacos, a partir del que hemos eliminado vamos corriendo todos los dems una posicin a la izquierda, tanto en las cajas de texto visibles como en los campos hidden ocultos. Para ir controlando qu posicin 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 eleccin, y al final de cada comprobacin se disminuye en 2 unidades, para mantenerlo al da
(piensa porqu...). Por ltimo, si el usuario ha elejido ya 4 opciones e intenta hacer otra, le mandamos un alert indicndole que ya no puede hacerlo. Una vez implementada la funcin, 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 opcin anterior, que ya est en las cajas de texto?. En este caso no se producira un cambio, y no se escribira nada. Pero para hacer la funcin estable por todos lados, lo que hecemos es introducir en la funcin una lnea que lo que hace es que cada vez que se pincha el combo lo volvemos a poner en su primera opcin, la que dice "selecciona 4 equipos", y as siempre tendremos controlado cuando se pincha un equipo. Estoa lnea de cdigo es: document.forms[0].menu.selectedIndex=0; que devuelve el foco a la primera opcin cada vez que se pincha cambia la misma. Una ltima consideracin: si el usuario pincha el botn de borrado en algn momento tenemos que igualar la variable contador a cero, para que el proceso empiece de nuevo. Esto lo logramos asignndole este valor en el botn 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 pgina 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 programacin. Con DHTML todos los elementos de la pgina web pueden tener asociado uno o mas eventos. Existe un grupo de eventos que son disparados por las acciones del usuario como mover el ratn, pulsar una tecla, picar una opcin del men, etc. Tambin existe otro grupo de eventos que responden a las acciones del navegador como son el l finalizar de cargar una pgina, o cuando se va a salir de ella o al terminar de cargar una imagen o cuando se produce un error de ejecucin del cdigo. Por ltimo existe un par de eventos bastante imprescindibles para la realizacin de efectos animados en las pginas, son los eventos temporizados, eventos asociados al reloj del sistema que nos permite ejecutar una determinada accin de manera repetida cada cierto intervalo de tiempo. A la hora de vincular eventos a los objetos HTML de una pgina hemos de conocer ciertos principios previos. En primer lugar los elementos de la pgina disparan los eventos independientemente de que nosotros le asignemos una funcin 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 pgina 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 accin 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 mtodo slo vale para IE. Otra cosa a tener muy en cuenta es la promocin 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 jerarqua. 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 prrafo, si pasamos el ratn sobre el span el evento onmouseover del ratn acta en primer lugar en el span, mostrando una ventana con su identificador (Interno), pero luego asciende hasta el elemento P provocando la accin vinculada en ste, mostrar una ventana con su identficador (Externo). A veces esto viene bien y otras provoca efectos indeseados. Para cortar esta ascensin del evento se asigna el valor true a la propiedad event.cancelBubble.
VINCULANDO EVENTOS
La vinculacin de eventos no es mas que asignar una funcin escrita en javascript a un evento concreto, de manera que cuando se dispare ste la funcin entre en funcionamiento. Estas funciones se definirn en alguna parte de la pgina o en un archivo ligado a ella. La vinculacin de eventos puede realizarse en lnea dentro del cdigo HTML de la pgina, asignando al nombre del evento una cadena con el nombre de la funcin, como en el ejemplo: <img src="bola.gif" onmouseover = "ctrlEv()"> En el ejemplo ctrlEv( ) es la funcin que reaccionar cuando el ratn pase sobre la imagen, o sea, cuando se produzca el evento onmouseover sobre la imagen. La funcin puede llevar argumentos definidos por nosotros, existiendo un argumento especial que seala al objeto sobre el que se produce el evento, se trata del objeto this. Si usamos este parmetro al llamar a la funcin sta lo trata como el elemento donde se ha disparado el evento. Otra forma de vincular funciones controladoras es mediante cdigo Javascript. En este caso lo que hacemos es tratar el evento como una propiedad del objeto HTML y asignarle directamente una instancia de la funcin: document.images[0].onmouseover=new Function("ctrlEv( )") o asignndole un puntero a la funcin document.images[0].onmouseover = ctrlEv; En el segundo caso asignamos una instancia de la funcin, si le pasamos el argumento this la funcin lo tomara como el objeto que dispara el evento. En el tercer caso sin embargo lo que asignamos al evento es un puntero a la funcin, o sea, la direcin de memoria donde se aloja la funcin, sin parmetros. En este caso el puntero this se asigna automticamente y dentro del cuerpo de la funcin 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 mtodos: Asignar false a la propiedad event.returnValue dentro de la rutina manejador adel evento, Incluir en la asignacin la sentencia return false, esta sentencia ir tras el nombre de la funcin 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 direccin 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 pgina destino.htm sino que abrir una ventana de aviso. Esto puede ser til si, en lugar de la ventana de aviso, usamos una funcin que, por ejemplo, de un valor al enlace dependiente de la hora del da o del usuario.

Manual Javascript

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Javascript

Cargado por

Copyright:

Formatos disponibles

Manual de JavaScript

ABRIR VENTANAS SECUNDARIAS EN JAVASCRIPT

DGH Informtica y Logstica -1-

DGH Informtica y Logstica -2-

Width Height Top Left Scrollbars

COMUNICACIN ENTRE VENTANAS

DGH Informtica y Logstica -3-

EJEMPLO DE ACCESO A UN POPUP

DGH Informtica y Logstica -4-

ACCESO DESDE EL POPUP A LA VENTANA PRINCIPAL

ACCESO A VARIABLES Y FUNCIONES DE OTRAS VENTANAS

CERRAR VENTANAS CON JAVASCRIPT

DGH Informtica y Logstica -8-

SUBMEN EN OTRA VENTANA

DGH Informtica y Logstica -9-

DGH Informtica y Logstica - 13 -

DGH Informtica y Logstica - 14 -

DGH Informtica y Logstica - 15 -

LOS OBJETOS TEXT, PASSWORD E HIDDEN

DGH Informtica y Logstica - 19 -

DGH Informtica y Logstica - 20 -

LOS OBJETOS CHECKBOX Y RADIO

DGH Informtica y Logstica - 22 -

LOS OBJETOS BUTTON, SUBMIT Y RESET

DGH Informtica y Logstica - 23 -

DGH Informtica y Logstica - 28 -

DGH Informtica y Logstica - 29 -

DGH Informtica y Logstica - 32 -

EL CONSTRUCTOR NEW OPTION

Principio del formulario

Final del formulario

Final del formulario

DGH Informtica y Logstica - 35 -

DGH Informtica y Logstica - 36 -

DGH Informtica y Logstica - 37 -

</form> </td> </tr> </table> </body> </html>

EJEMPLO B: CREACIN DE UN COMBO DE SELECCIN AVANZADA

DGH Informtica y Logstica - 39 -

DGH Informtica y Logstica - 40 -

EVENTOS EN JAVASCRIPT FUNCIONAMIENTO

DGH Informtica y Logstica - 41 -

DGH Informtica y Logstica - 42 -

También podría gustarte