Manual de JavaScript (Ventanas,Formularios,Eventos)

Manual de JavaScript
JAVASCRIPT
CONTROL DE VENTANAS SECUNDARIAS CON JAVASCRIPT
Una de las utilidades más interesantes de Javascript es el control de ventanas secundarias (popups en
inglés). Las ventanas secundarias son las que se abren adicionalmente a la ventana principal del
navegador. Suelen ser más pequeñas que las ventanas normales y generalmente no tienen los menús del
navegador, barra de direcciones, etc.
Con Javascript podemos controlar los popups para hacer cosas como abrirlos, cerrarlos, darles el foco,
pasar información de una ventana a otra, etc. En este manual veremos cómo se hacen todas estas cosas
con las ventanas secundarias para aprender a controlarlas prefectamente.
El índice que vamos a tratar con respecto al tema de las ventanas secundarias o popups es el siguiente:
1. Abrir ventanas secundarias
2. Comunicación entre ventanas
2.1.1. Acceso desde ventana principal a ventana secundaria
2.1.2. Acceso desde ventana secundaria a ventana principal
2.1.3. Acceso a variables y funciones de otras ventanas
3. Cerrar Ventanas
ABRIR VENTANAS SECUNDARIAS EN JAVASCRIPT
Para ello utilizamos el método open del objeto window, que es el encargado de abrir la ventana. La
sintaxis del método es la siguiente
window.open(URL,nombre_ventana,parametros_configuración)
El primer parámentro es la URL de la página que deseamos mostrar en la ventana secundaria.
El segundo parámetro es el nombre que le damos a la ventana. Este nombre es utilizable desde el HTML
para que sirva como target de enlaces o formularios. Es decir, si colocamos un enlace y queremos que
actualice la ventana secundaria ponemos el atributo TARGET del enlace igual al nombre de la ventana.
El tercer parámetro es la configuración de la ventana, para indicar el tamaño, qué barras de menús se
tienen que ver y cuales no, si tiene o no barras de desplazamiento, etc.
A continuación podemos ver un ejemplo de utilización del método open:
window.open("pagina.html","miventana","width=300,height=200,menubar=no")
Apertura y configuración de popups con javascript
En determinadas ocasiones es muy útil abrir un enlace en una ventana secundaria, es decir, una ventana
aparte que se abre para mostrar una información específica. Algunas ventajas de abrir un enlace en una
ventana secundaria pueden ser que:
 El usuario no se marcha de la página donde estaba el enlace.
 La ventana secundaria se puede configurar libremente con lo que se pueden hacer ventanas más
grandes o pequeñas y con más o menos menús.
 En general, el grado de control de la ventana secundaria utilizando Javascript aumenta.
Para abrir una ventana secundaria podemos hacerlo de dos maneras, con HTML y con Javascript. Veamos
cada una de ellas.
Abrir una ventana con HTML
Se puede conseguir abrir una ventana secundaria muy fácilmente con tan solo HTML. Para ello podemos
utilizar el atributo TARGET de las etiquetas HREF. Si ponemos target="_blank" en el enlace, la página
se abrirá en una ventana secundaria. También podemos poner target="xxx" para que el enlace se presente
el la ventana llamada xxx o en el frame xxx.
El enlace tendría que tener esta forma:
<a href="mipagina.html" target="_blank">
El problema de abrir una página secundaria con HTML consiste en que no podemos definir la forma de
ésta ni podremos ejercer mayor control sobre élla, tal como comentábamos entre las ventajas de abrir una
ventana secundária con Javascript. La ventana que se abre siempre será como el usuario tenga definido
por defecto en su navegador.
Abrir una ventana con Javascript
DGH Informática y Logística
-1-
Manual de JavaScript
Para abrir una ventana con Javascript podemos utilizar la sentencia window.open(). No pasa nada por que
no conozcas Javascript, puesto que es muy sencillo utilizarlo para este caso. Vamos a ver paso a paso
cómo abrir una ventana secundaria utilizando Javascript.
Sentencia Javascript para abrir una ventana
La sentencia es simplemente la función window.open(), lo más complicado es saber cómo utilizar esa
función, pero ahora veremos que no reviste ninguna complicación.
La función window.open() recibe tres parámetros, que se colocan dentro de los paréntesis, de este modo:
window.open(URL,nombre_de_la_ventana,forma_de_la_ventana)
Veamos rápidamente cada uno de estos parámetros por separado.
URL: representa el URL que deseamos abrir en la ventana secundaria, por ejemplo
http://www.desarrolloweb.com
nombre_de_la_ventana: es el nombre que se le asigna a esta ventana para dirigir enlaces con el atributo
target del HTML
forma_de_la_ventana: se indica el aspecto que va a tener la ventana secundaria. Por ejemplo se puede
definir su altura, anchura, si tiene barras de desplazamiento, etc
Veamos un ejemplo de sentencia Javascript completa para abrir una ventana secundaria:
window.open("http://www.desarrolloweb.com" , "ventana1" , "width=120,height=300,scrollbars=NO")
Esto quiere decir que abra la página inicial de desarrolloweb.com en una ventana secundaria a la que
vamos a llamar ventana1. Además, la ventana será de 120 pixels de ancho, 300 de alto y no tendrá barras
de desplazamiento.
Una aclaración adicional, si después de abrir esa ventana colocamos otro enlace en la página que abría la
ventana cuyo atributo target está dirigido hacia el nombre_de_la_ventana (en este caso ventana1), este
enlace se mostrará en la ventana secundaria.
Función que abre una ventana
Lo más cómodo para abrir una ventana es colocar una función Javascript que se encarge de las tareas de
abrirla y que reciba por parámetro la URL que se desea abrir.
El script es sencillo, veámoslo a continuación:
<script language=javascript>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=120,height=300,scrollbars=NO")
}
</script>
Colocamos un enlace
Este enlace no debe estar dirigido directamente a la página que queramos abrir, sino a la sentencia
Javascript necesaria para abrir la ventana secundaria. Para ejecutar una sentencia Javascript con la
pulsación de un enlace lo hacemos así:
<a href="javascript:sentencia_javascript_para_abrir_la_ventana">
El enlace llama a la función que abre la ventana
Ahora Veamos cómo quedaría todo ese enlace en la página.
<a href="javascript:ventanaSecundaria('http://www.desarrolloweb.com')"> Pincha en este enlace para
abrir la ventana secundaria</a>
Hay que fijarse que las comillas simples que se colocan para definir el URL que se pasa como parámetro
de la función ventanaSecundaria(). Son comillas simples porque el href del enlace ya tiene unas comillas
dobles, y dentro de comillas dobles siempre se han de utilizar comillas simples a no ser que deseemos
cerrar las comillas dobles.
Parámetros para dar forma a una ventana
Estos atributos los puedes utilizar en la función window.open() para definir la forma que deseas que tenga
tu ventana secundaria.
DGH Informática y Logística
-2-
Manual de JavaScript
Width
Ajusta el ancho de la ventana. En pixels
Height
Ajusta el alto de la ventana
Top
Indica la posición de la ventana. En concreto es la distancia en pixels que existe
entre el borde superior de la pantalla y el borde superior de la ventana.
Left
Indica la posición de la ventana. En concreto es la distancia en pixels que existe
entre el borde izquierdo de la pantalla y el borde izquierdo de la ventana.
Scrollbars
Para definir de forma exacta si salen o no las barras de desplazamiento.
scrollbars=NO hace que nunca salgan. Scrollbars=YES hace que salgan (siempre
en ie y solo si son necesarias en NTS).
Resizable
Establece si se puede o no modificar el tamaño de la ventana. Con resizable=YES
se puede modificar el tamaño y con resizable=NO se consigue un tamaño fijo.
Directories
(barra directorios)
A partir de aquí se enumeran otra serie de propiedades que sirven para mostrar o
no un elemento de la barra de navegación que tienen los navegadores más
populares, como podría ser la barra de menús o la barra de estado.
Location
(barra direcciones)
Menubar
(barra de menús)
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.
Status
(barra de estado)
Titlebar
(la barra del título)
Toolbar
(barra de herramientas)
Abrir una ventana sin un enlace
En otras ocasiones desearemos abrir una ventana secundaria automáticamente, es decir, sin necesidad de
que el usuario pulse sobre ningún enlace. En este caso, el código de la función ventanaSecundaria nos
sirve también y habrá que añadir una línea de código Javascript a continuación de la función
ventanaSecundaria. Esta línea a añadir simplemente será una llamada a la función que se ejecutará según
se está cargando la página. Veamos como quedaríi este código:
<script language=javascript>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=120,height=300,scrollbars=NO")
}
ventanaSecundaria("http://www.desarrolloweb.com");
</script>
Queda en negrita lo que sería la llamada a la función que abre la ventana secundaria, como está fuera de
una función se ejecuta según se está cargando la página.
COMUNICACIÓN ENTRE VENTANAS
La gracia del trabajo con ventanas secundarias consiste en que tanto la ventana principal como el popup
se puedan comunicar entre si y mandarse órdenes y comandos desde una a la otra.
La comunicación podrá ser en dos sentidos:
 Desde la ventana principal a la secundaria.
 Desde la ventana secundaria a la principal.
Si queremos comunicar desde la ventana principal hacia la secundaria necesitamos disponer de una
referencia de dicha ventana secundaria o popup. La referencia la será el nombre que le pongamos a la
ventana secundaria. A continuación en este artículo veremos cómo asignar un nombre a un popup.
Si la comunicación es desde la ventana secundaria a la principal debemos utilizar el atributo opener de
dicha ventana secundaria, que referencia a la ventana principal. Tanbién veremos más adelante este tipo
de comunicación.
Nombre de la ventana con Javascript
DGH Informática y Logística
-3-
Manual de JavaScript
Cuando abrimos una ventana utilizando el método open del objeto window asignamos un nombre a la
ventana para referirnos a ella utilizando HTML. Pero si queremos referirnos a ella utilizando Javascript
necesitaremos utilizar otro nombre.
La referencia Javascript a la ventana que se acaba de abrir se obtiene gracias al valor de retorno del
método open. Para guardar la referencia asignamos el valor de retorno del método a una variable. A partir
de ese momento la variable será un sinónimo del objeto window, es decir, será como si fuera el objeto
window del popup y por lo tanto podremos acceder a los métodos y propiedades de la ventana secundaria
a partir de esa variable.
referenciaVentana = window.open(“mi_url.html”,”nombre”,”width=100,height=300”)
Luego podremos acceder a los métodos y propiedades de esta manera.
referenciaVentana.close()
referenciaVentana.document.bgColor = “red”
EJEMPLO DE ACCESO A UN POPUP
Vamos a hacer un ejemplo de acceso a una propiedad del objeto window de la ventana secundaria. Se
trata de la propiedad location del objeto window, que no hemos visto todavía en ejemplos. Recordemos
que esta propiedad contiene el URL del documento que estamos viendo y que si la cambiamos cambia la
página que se está viendo.
Nuestro ejemplo consiste en una página que va a abrir la ventana secundaria. Además la página tendrá un
formulario con un campo de texto y un botón. En el campo de texto podremos colocar URLs y al pulsar el
botón haremos que en el popup se muestre la URL que se haya escrito.
Al abrir la ventana guardamos la referencia en la variable miPopup.
var miPopup
miPopup = window.open("about:blank","miventana","width=600,height=400,menubar=no")
Si nos fijamos veremos que el URL de inicio de la ventana es about:blank, esto quiere decir que la
ventana secundaria se inicializará con un documento en blanco. (Si escribimos about:blank en la barra de
direcciones de un navegador veremos que la página se pone en blanco)
Ahora vemos el formulario que contiene el campo de texto y el botón.
<form name=formul>
<input type=text name=url size=30 value="http://">
<input type=button value="Mostrar URL en popup" onclick="muestraURL()">
</form>
No tiene nada que destacar, de modo que pasamos a ver la función que se encarga de actualizar la URL de
la ventana secundaria.
function muestraURL(){
miPopup.location = document.formul.url.value
}
La función es extremadamente simple. Sólo se accede a la propiedad location de la variable que guarda la
referencia Javascript y se actualiza con lo que haya escrito en el campo de texto. La propiedad location de
la variable es como la propiedad location de la ventana secundaria.
Hay un detalle poco agradable en este ejemplo. Se trata de que al trabajar sobre el formulario de la página
que abrimos en primer lugar y luego actualizar el contenido del popup, se queda en segundo plano el
popup con el contenido actualizado, tapado por la primera ventana. Esto es porque el foco de la aplicación
lo tiene la ventana original, y por eso es la ventana que se ve delante. Sería interesante que al actualizar el
contenido del popup se mostrase delante la ventana del popup actualizada. Esto se consigue utilizando el
método focus() del objeto window, que coloca el foco de la aplicación en la ventana sobre la que lo
invoquemos.
La función con esta pequeña modificación quedará así.
function muestraURL(){
miPopup.location = document.formul.url.value
miPopup.focus()
}
DGH Informática y Logística
-4-
Manual de JavaScript
Sólo hemos añadido la llamada al método focus() del objeto window correspondiente al popup.
ACCESO DESDE EL POPUP A LA VENTANA PRINCIPAL
También podemos acceder desde un popup a la ventana que lo abrió, para acceder a los métodos y
propiedades de la ventana, o hacer lo que deseemos con Javascript.
Para ello, en el popup hay una variable declarada que es opener. En realidad es una propiedad del objeto
window del popup, que hace referencia al objeto window de la ventana "abridora" (opener).
Para ilustrar el funcionamiento de opener vamos a hacer un ejemplo que consiste en una página principal,
que tiene un formulario donde, entre otros campos, debemos introducir un teléfono con su prefijo
internacional. En caso de que no conozcamos los prefijos internacionales nos permite pulsar sobre un
botón y mostrar una ayuda. La ayuda se ofrece a través de un popup que contiene la lista de los prefijos
internacionales para que seleccionemos uno de ellos. En el momento que se selecciona se debe actualizar
el formulario de la ventana padre y cerrar la ventana secundaria.
Ahora vamos a echar un vistazo a la página principal, que contiene el formulario donde se debe escribir el
prefijo y el número. Al lado del campo de texto donde se coloca el prefijo hemos puesto un botón que
sirve para mostrar el popup de ayuda. Al pulsar el botón llamamos a la función abreVentana() que será la
encargada de abrir el popup con la lista de prefijos.
<html>
<head>
<title>Formulario prefijos</title>
<script>
var miPopup
function abreVentana(){
miPopup = window.open("prefijos.html","miwin","width=300,height=150,scrollbars=yes")
miPopup.focus()
}
</script>
</head>
<body>
<form name=formul>
<table cellspacing="3" cellpadding="3" border="0">
<tr>
<td align="center">Prefijo</td>
<td align="center">Número</td>
</tr>
<tr>
<td align="center">
<input type=text name=prefijo value="+" size=3 maxlength=3>
<input type="Button" value="?" onclick="abreVentana()">
</td>
<td align="center">
<input type=text name=numero value="" size=10 maxlength=10>
</td>
</tr>
</table>
</form>
</body>
</html>
La función abreVentana se tiene que entender perfectamente. El resto de la página es un simple
formulario HTML metido dentro de una tabla para que quede mejor maquetado.
Ahora veamos la página HTML del popup, que es la que utiliza la referencia opener a la ventana
"abridora", para actualizar el campo del formulario donde hay que colocar el prefijo.
<html>
<head>
<title>Prefijos internacionales</title>
<script>
DGH Informática y Logística
-5-
Manual de JavaScript
function ponPrefijo(pref){
opener.document.formul.prefijo.value = pref
window.close()
}
</script>
</head>
<body>
<h1>Lista de prefijos internacionales</h1>
<form name=fprefijos>
España:
<input type="Button" value="+34" onclick="ponPrefijo('+34')">
<br>
Holanda:
<input type="Button" value="+31" onclick="ponPrefijo('+31')">
<br>
Gran Bretaña:
<input type="Button" value="+44" onclick="ponPrefijo('+44')">
<br>
Estados Unidos:
<input type="Button" value="+01" onclick="ponPrefijo('+01')">
<br>
Bélgica:
<input type="Button" value="+32" onclick="ponPrefijo('+32')">
<br>
Grecia:
<input type="Button" value="+30" onclick="ponPrefijo('+30')">
</form>
</body>
</html>
Tenemos un formulario con una serie de botones para seleccionar el prefijo. Todos llaman a la función
ponPrefijo() pasándole el prefijo seleccionado.
La función ponPrefijo() debe poner en un campo del formulario de la ventana que abrió el popup el valor
del prefijo que ha recibido por parámetro. Para ello accede a la propiedad opener del objeto window, para
tener acceso a la ventana principal (abridora) y desde allí accede a su documento, al formulario y a la
propiedad value del campo de texto donde hay que escribir el prefijo. Por último cierra el popup con el
método close() del objeto window.
ACCESO A VARIABLES Y FUNCIONES DE OTRAS VENTANAS
Desde una ventana también tenemos acceso a las variables y funciones que hayamos declarado en otras
ventanas. Gracias a esto, desde un popup podemos controlar el estado de las variables de la página
principal y llamar a funciones para hacer cualquier cosa que necesitemos.
El acceso a las variables y las funciones se realiza a través de los objetos ventana. Por ejemplo, si
deseamos desde una ventana tener acceso a una función de un popup colocaríamos su objeto ventana
seguido de un punto y el nombre de la función a la que queramos acceder, como si fuese un método
nuevo del objeto ventana. Las variables se acceden como si fueran propiedades del objeto ventana. El
código sería algo parecido a esto.
Para acceder a una variable
miPopup.miVariable
Para acceder a una función
miPopup.miFunción()
Vamos a ver un ejemplo para ilustrarlo. Tenemos una página con un número cualquiera de campos de
texto en un formulario y una función que sirve para inicializar los datos de los campos de texto a 0. En
esta página abriremos una ventana secundaria desde la cual invocaremos a la función que inicializa los
campos de texto.
DGH Informática y Logística
-6-
Manual de JavaScript
La página principal tendrá una parte con un script para definir la función y abrir el popup y otra parte con
el formulario que contiene los campos de texto. Se puede ver a continuación su código.
<html>
<head>
<title>Inicializador de formularios</title>
<script>
function inicializaCampos(){
for (i=0;i<document.forms[0].elements.length;i++)
document.forms[0].elements[i].value = "0"
}
var miPopup
miPopup =
window.open("llamadas-desde-ventanas-popup.html","miventana","width=308,heig
ht=70,menubar=no")
</script>
</head>
<body>
<form>
<input type="Text" name="t1" value="0" size="4" maxlength="100">
<input type="Text" name="t2" value="0" size="4" maxlength="100">
<input type="Text" name="t3" value="0" size="4" maxlength="100">
<input type="Text" name="t4" value="0" size="4" maxlength="100">
<input type="Text" name="t5" value="0" size="4" maxlength="100">
<input type="Text" name="t6" value="0" size="4" maxlength="100">
<input type="Text" name="t7" value="0" size="4" maxlength="100">
</form>
</body>
</html>
En el popup podremos encontrar el código necesario para invocar a la función inicializaCampos() que
pertenece a la ventana principal. La llamada a la función de la ventana "abridora" se realiza al pulsar un
botón.
<html>
<head>
<title>Popup Inicializador de formularios</title> <script>
function llamadaOtraVentana(){
//llamada a la función de ventana abridora
window.opener.inicializaCampos()
window.opener.focus()
}
</script>
</head>
<body>
<form>
<input type="button" value="Llamar a función de otra ventana"
onclick="llamadaOtraVentana()">
</form>
</body>
</html>
CERRAR VENTANAS CON JAVASCRIPT
Para cerrar la ventana del navegador debemos utilizar el método close() del objeto window de la vetana
que deseamos cerrar. Es muy sencillo, aun así, vamos a ver un ejemplo sobre cerrar ventanas.
El ejemplo consta de una página que tiene un botón que abre una ventana secundaria o popup. Además,
tendrá otro botón que cerrará la ventana secundaria. Por su parte, la ventana secundaria tendrá un botón
DGH Informática y Logística
-7-
Manual de JavaScript
que permitirá cerrarse a ella misma. Luego de tratar este ejemplo comentaremos el caso especial de cerrar
la ventana principal desde el popup y las pegas que tiene.
La página principal tendría esta forma:
<html>
<head>
<title>Ventana Principal</title>
<script>
//creamos la variable ventana_secundaria que contendrá una referencia al popup que vamos a abrir
//la creamos como variable global para poder acceder a ella desde las distintas funciones
var ventana_secundaria
function abrirVentana(){
//guardo la referencia de la ventana para poder utilizarla luego
ventana_secundaria =
window.open("cerrar_window2.html","miventana","width=300,height=200,menubar=no")
}
function cerrarVentana(){
//la referencia de la ventana es el objeto window del popup. Lo utilizo para acceder al método close
ventana_secundaria.close()
}
</script>
</head>
<body>
Esta es la ventana principal
<form>
<input type=button value="Abrir ventana secundaria" onclick="abrirVentana()">
<br>
<br>
<input type=button value="Cerrar ventana secundaria" onclick="cerrarVentana()">
</form>
</body>
</html>
Contiene un script en la cabecera de la página con las funciones para abrir y cerrar la ventana. Además,
como ya se indicó anteriormente en este manual, se debe guardar una referencia a la ventana que se acaba
de abrir para poder realizar acciones sobre ella posteriormente, en este caso cerrarla. Como la referencia
de la ventana se crea en la función abrirVentana() y luego se utilizará en la función cerrarVentana(), dicha
referencia deberá declararse como global o de lo contrario sólo tendría validez mientras la función
abrirVentana() estuviera ejecutándose y, cuando pretendiésemos utilizarla en la función cerrarVentana(),
nos diría que esa referencia ya no existe.
Así que disponemos de una referencia global a la ventana que va a abrirse y dos funciones que abren el
popup guardando la referencia y cerrar el popup utilizando la referencia de la ventana a cerrar. Estas dos
funciones se llaman desde dos botones de la página, que hemos colocado dentro de un formulario.
Nota: Hay que señalar que puede haber un error javascript si se pretende cerrar la ventana
antes de abrirla. Para evitarlo podemos controlar que realmente la ventana está abierta antes de
ejecutar el método close() de su objeto window, pero esa es una práctica que veremos en
ejercicios más adelante.
Por su parte, el popup tiene un código como el siguiente.
<html>
<head>
<title>Ventana Secundaria</title>
DGH Informática y Logística
-8-
Manual de JavaScript
<script>
function cerrarse(){
window.close()
}
</script>
</head>
<body>
Esta es la ventana del popup
<form>
<input type=button value="Cerrar" onclick="cerrarse()">
</form>
</body>
</html>
Contiene tan solo una función para cerrarse ella misma, que lo único que hace es ejecutar el método
close() sobre su propio objeto window. También hemos colocado un botón que se ha configurado para
llamar a la función que cierra la ventana cuando se le haga clic.
Un detalle sobre cerrar ventanas
En cualquier momento podemos cerrar una ventana secundaria utilizando el método close() del objeto
window. En el ejemplo anterior hemos visto cómo se cierran ventanas y es muy sencillo. En cualquier
momento podemos cerrar una ventana, pero si intentamos cerrar una ventana que no se ha abierto con
Javascript (sin utilizar window.open()) nos saldrá una caja de confirmación que pregunta al usuario si de
verdad quiere cerrar la ventana.
Podemos ver esta caja de confirmación al pulsar el botón siguiente, que intentará cerrar esta ventana.
Nota: La caja de confirmación que hemos podido ver aparece como elemento de seguridad,
para evitar que un programador malicioso intente cerrar una ventana que hemos abierto
nosotros como usuarios y que, en teoría, no tiene permiso para cerrar. Así que a partir de
determinado navegador decidieron preguntar al usuario si realmente desea que se cierre esa
ventana.
De todos modos, las cosas pueden variar de unos casos a otros, ya que en Netscape 7 ya no
preguntan si se desea de verdad cerrar la ventana. Por su parte, si en Internet Explorer 6 la
ventana se abrió con un enlace HTML con el atributo target="_blank" tampoco aparece la
ventana de la que estamos hablando.
Es sólo un detalle que no tiene mucha importancia, pero para las personas que nunca han experimentado
con el trabajo con ventanas secundarias en Javascript, resultará sorprendente que el navegador haga esa
pregunta, que probablemente nunca hayamos visto. Una cosa más, sólo ocurre esto en navegadores
modernos, aunque actualmente le va a pasar a casi todos los usuarios.
SUBMENÚ EN OTRA VENTANA
Vamos a realizar un pequeño ejemplo sobre cómo trabajar con ventanas secundarias o popups. Las
ventanas secundarias son esas ventanitas que se abren a parte de la ventana principal del navegador y por
lo general molestan un poco en determinados sitios gratuitos.
Para abrir esas ventanas se utiliza el lenguaje Javascript, más concretamente, el método open() del objeto
window.
En este ejemplo vamos a ir un poco más allá, vamos a crear una ventana secundaria y desde ella vamos a
acceder a las propiedades de la ventana padre, es decir, la ventana que la abrió. El ejercicio será el
siguiente:
Tendremos una página con fondo blanco, un campo de texto vacío y un botón. Cuando se pulse el botón
abriremos un popup que contendrá una tabla con los colores puros de HTML. El visitante podrá
DGH Informática y Logística
-9-
Manual de JavaScript
seleccionar uno de esos colores y entonces el fondo de la página padre cambiará a ese color y el color se
escribirá en el campo de texto.
Página padre
La página original contendrá un simple formulario con un botón y un campo de texto. Además, contendrá
el script Javascript necesario para abrir la ventana secundaria.
<html>
<head>
<title>Submenú en ventana a parte</title>
<script language="JavaScript">
function lanzarSubmenu(){
window.open("submenu_ventana2.html","ventana1","width=400,height=400,scrollbars=YES")
}
</script>
</head>
<body bgcolor="#ffffff">
<form>
<input type="text" name="colorin" size="12" maxlength="12">
<br>
<br>
<input type="button" value="Lanzar submenu" onclick="lanzarSubmenu()">
</form>
</body>
</html>
La función lanzarSubmenu() es la que contiene el script para abrir el popup.
El formulario es de lo más normal. Lo único destacable es el atributo onclick del botón, que sirve para
definir las acciones a ejecutar cuando se pulsa el botón, en este caso una llamada a la función que abre la
ventana secundaria.
Página secundaria
La página secundaria es un poco más compleja, pero la parte que nos importa a nosotros en este ejercicio
es muy sencilla. Lo importante de la página es que tiene que acceder a la ventana padre para modificar su
estado y para ello utiliza un objeto Javascript: opener.
El objeto opener está disponible en las páginas que son ventanas secundarias y hace referencia a la
ventana que la abrió, es decir, la ventana padre. Dicho de otro modo, el objeto opener en la ventana popup
es un sinónimo del objeto window en la ventana padre.
El script que accede a la ventana padre es el siguiente:
<script language="JavaScript">
function actualizaPadre(miColor){
window.opener.document.bgColor = miColor
window.opener.document.forms[0].colorin.value = miColor
}
</script>
La función actualizaPadre() es la encargada de realizar el trabajo. Recibe el código del color sobre el que
se ha pulsado. En la primera línea cambiamos el color de la página web padre y en la segunda línea
colocamos el código RGB del color recibido por parámetro en el campo de texto.
Como vemos, el objeto opener también depende del objeto window de la página, como todos los demás
objetos de la jerarquía Javascript.
<table width="80%" align="center" cellpadding="1" cellspacing="1">
<script language="javascript">
var r = new Array("00","33","66","99","CC","FF");
var g = new Array("00","33","66","99","CC","FF");
var b = new Array("00","33","66","99","CC","FF");
DGH Informática y Logística
- 10 -
Manual de JavaScript
for (i=0;i<r.length;i++)
for (j=0;j<g.length;j++) {
document.write("<tr>");
for (k=0;k<b.length;k++) {
var nuevoc = "#" + r[i] + g[j] + b[k];
document.write("<td bgcolor=\"" + nuevoc + "\" align=center><font size=1 face=verdana>");
document.write("<a href=\"javascript:actualizaPadre('" + nuevoc + "')\">");
document.write(nuevoc);
}
document.write("</a></font></tr>");
}
</script>
</table>
Lo importante para nosotros ahora es entender que este script crea una tabla con todos los colores puros,
colocados en una celda cada uno. Dentro de cada celda se escribe un enlace que llama a la función
actualizaPadre() pasándole el código del color se ha de utilizar.
FORMULARIOS
INTRODUCCIÓN
Los formularios son un componente a veces esencial en una página web, ya que permiten la interacción
con el usuario, pudiendo conseguir mediante ellos recoger información particular sobre sus gustos,
opiniones, datos personales, etc, información que luego deberemos procesar en el servidor web para su
correcta interpretación y uso.
Este proceso de datos se puede llevar a cabo mediante diferentes tecnologías: CGI, ASP, JSP, etc.
Pero si nos limitamos al proceso de datos y elementos de formulario en el lado del cliente, la herramienta
más poderosa con la que contamos es sin duda alguna el lenguaje JavaScript (o JScript, como gustan
llamarlo los sres. de Microsoft).
Mediante JavaScript podemos no sólo validar los datos de cada uno de los campos que formen el
formulario, para así poder estar seguros de su validez antes de ser enviados al servidor, si no que también
podemos acceder a todos los elementos que forman el formulario y a sus propiedades, con lo que
podemos diseñar formularios realmente atractivos y dinámicos, que convertirán nuestras páginas en
verdaderas "obras de arte". Y todo esto es posible porque en la propia definición de JavaScript existe un
objeto formulario.
Este manual no pretende explicar todos los posibles casos de trabajo con formularios en JavaScript, ni
mostrar ejemplos complicados en exceso, que más que enseñar algo crearían confusión, si no mostrar las
bases de cómo podemos manejar formularios con este lenguaje de programación, dejando al empeño del
lector el profundizar más en casos concretos.
EL OBJETO 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 métodos 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.
Además, el objeto forms dentro del objeto documents posee dos subpropiedades:
index: array que contiene todos los formularios de una página, de sintaxis:
document.forms[index]
y donde debemos tener en cuenta que el primer formulario viene indentificado por el índice 0, por lo que
para acceder al primer formulario de una página deberemos usar la expresión:
document.forms[0]...
length: que contiene el número de formularios que hay en la página, y cuya sintaxis es:
document.forms.length
Recordemos que en un formulario HTML un formulario se crea mediante un código del tipo:
DGH Informática y Logística
- 11 -
Manual de JavaScript
<FORM NAME="clientes" ACTION="/cgi/clientes:cgi" METHOD="POST" TARGET="cuerpo">
...campos del formulariio
</FORM>
Como he dicho antes, un formulario es para JavaScript un objeto por sí mismo, y como tal posee unas
propiedades, unos métodos y unos eventos propios, que nos van a permitir acceder a cada uno de los
elementos que lo forman y poder modificar su diseño y comportamiento dinámicamente, sin necesidad de
hacer nuevas peticiones al servidor, ya que todo se va a ejecutar en el lado cliente, estando todo el código
necesario dentro de la propia página web.
Las principales propiedades del objeto form son:
name
Es la propiedad más importante del objeto form, ya que nos va a permitir identificar cada formulario con
un nombre identificador único, identificador que vamos a usar luego para poder referirnos sin
ambiguedades a un formulario de nuestra página en concreto y acceder a sus propiedades y métodos. Por
esto, TODA ETIQUETA FORM DEBE TENER SU PROPIEDAD NAME Y NO PUEDE HABER DOS
FORMULARIOS CON EL MISMO NOMBRE EN UNA MISMA PÁGINA.
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 dónde se encuentra el programa o página
activa que va a procesar los datos contenidos en los diferentes campos del formulario. Sin el uso de
JavaScript esta propiedad sería estática, por lo que una vez incluida en el código inicial de la página
permanecería inmutable. Pero mediante JavaScript podemos cambiarla, símplemente refiriéndonos a ella
mediante la escritura:
document.[nombre_formulario].action="/ruta/programa.cgi"
Esto es especialmente útil cuando por ejemplo debemos mandar los datos del formulario a diferentes
páginas JSP dependiendo de uno de los datos introducido en un campo. Como ejemplo, supongamos que
en el formulario de nuestra página hay dos checkbox, y que dependiendo de cual marque el usuario
debemos enviar los datos bien a la página a.jsp o a la página b.jsp. El código necesario para ello sería:
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "Javascript">
<-function enviar( ){
if ((document.forms.datos.sistema1.checked = = true) && (document.forms.datos.sistema2.checked = =
true){
alert('debe hacer una sóla selección)
{
else if (document.forms.datos.sistema1.checked = = true) document.forms.datos.action =
"/jsp/pag_1.jsp"
else if (document.forms.datos.sistema2.checked = = true)
document.forms.datos.action="/jsp/pag_2.jsp"
else alert ('debe hacer una selección')
document.forms.datos.submit()
}
</HEAD>
<BODY>
<FORM NAME="datos" ACTION="/jsp/pag_3.jsp" METHOD= "post">
<INPUT TYPE="checkbox" NAME="sistema1">Sistema 1
<INPUT TYPE="checkbox" NAME="sistema2">Sistema 2
<INPUT TYPE="button" VALUE="enviar" ONCLICK="envia( )">
</FORM>
</BODY>
</HTML>
y con esto los datos serían enviados a una u otro página para su proceso, y en caso de que no se hubiera
seleccionado ninguna casilla aparecería un mensaje de error.
DGH Informática y Logística
- 12 -
Manual de JavaScript
method
Este parámetro establece el método de envío de los datos del formulario. Su valor puede ser POST,
conveniente cuando queremos enviar una grán cantidad de datos como una cadena contínua, y que es el
más usado, o GET, que se emplea cuando queremos pasar unos datos concretos a una página ASP o JSP.
También podemos acceder a cambiar esta propiedad dinámicamente, pero no se suele hacer nunca, ya que
el método de envío suele estar definido con toda exactitud. No obstante, la sintaxis para acceder a esta
propiedad sería:
document.forms.[nombre_formulario].method="metodo_elegido"
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 botón submit se envían los datos del
formulariio al servidor, en el que un programa o página activa procesa los datos, generando de nuevo otra
página que se envía al navegador cliente. En la ventana o frame definido por el atributo target se va a
cargar esta página de respuesta.
Nos puede interesar que dependiendo de la clase de resultado que obtengamos al procesar los datos
cambie la ventana en la que se va a mostrar la página de respuesta, e incluso definir las posibles ventanas
dinámicamente. Como ejemplo, supongamos que tenemos una página inicial con dos frames: uno
superior, en dónde inicialmente existe un mensaje orientativo, y otro central, en el que inicialmente se
encuentra el formulario que debe completar el usuario. Nos interesa que si marca el primer radio
botón de un grupo de dos la página de respuesta sea otra página que se carge en la ventana central, pero
que si el radio botón marcado es el segundo la respuesta sea un mensaje determinado que se muestre en el
frame superior. Para ello debemos definir primero una página con dos frames, en la que se cargan la
página del mensaje inicial arriba y el formulario abajo. El código de la página del formularios es el que
sigue:
<HTML>
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">
function envia( ){
if ((document.forms.datos.sistema1.checked==true)
&&(document.forms.datos.sistema2.checked==true)) alert('debe seleccionar una sóla casilla')
else if (document.forms.datos.sistema1.checked==true) {
document.forms.datos.target="inf";
document.forms.datos.action="pagina1.html";
}
else if (document.forms.datos.sistema2.checked==true) {
document.forms.datos.action="mensaje2.html";
document.forms.datos.target="sup";
}
else alert('debe seleccionar un checkbox');
document.forms.datos.submit()
}
</SCRIPT>
</HEAD>
<BODY ONLOAD= "document.forms.datos.reset()"><BR><FORM NAME="datos">
<INPUT TYPE="Checkbox" NAME="sistema1">sitema 1
<INPUT TYPE="Checkbox" NAME="sistema2" >sitema 2<BR>
<INPUT TYPE="button" VALUE="envía" ONCLICK= "envia( )">
</FORM>
</BODY>
</HTML>
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 número de campos diferentes que tiene el formulario, su
tipo, etc, teniendo en cuenta que el primer índice del vector es el 0, como ocurría con el vector forms.
Posee dos subpropiedades:
DGH Informática y Logística
- 13 -
Manual de JavaScript
index, que define mediante un índice los diferentes campos que forman el formulario, empezando los
índices por el 0, y cuya sintaxis es:
document.forms.nombre_formulario.elements[index]
length, que contiene el número de elementos que forman el formulario, y cuya sintaxis es:
document.forms.nombre_formulario.elements.length
El uso general de la subpropiedad index puede ser del tipo:
<HTML>
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">
function campo( ) {
var f = document.forms.primero.elements[0].name;
alert('el nombre del primer campo del primer formulario es '+f);
}
function texto( ) {
var g = document.forms.segundo.elements[1].value;
alert('el texto del segundo campo del segundo formulario es '+g);
}
function cambia( ) {
document.forms[2].elements[0].value='cambiamos el texto';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="primero">
<INPUT TYPE="text" NAME="texto1" VALUE="formulario 1" SIZE="30">
</form>
<form name="segundo">
<INPUT TYPE="radio" NAME="radio2">
<INPUT TYPE="text" NAME="texto2" VALUE="formulario 2" SIZE="30">
</form>
<form name="tercero">
<INPUT TYPE="text" NAME="texto3" VALUE="formulario 3" SIZE="30"><br><br>
<INPUT TYPE="button" VALUE="nombre campo" ONCLICK="campo()">
<INPUT TYPE="button" VALUE="texto campo" ONCLICK="texto()">
<INPUT TYPE="button" VALUE="cambia texto" ONCLICK="cambia()">
</FORM>
</BODY>
</HTML>
Como vemos en este ejemplo, también podemos referirnos a un formulario de nuestra página por medio
de su índice en el array forms que posee cada objeto window.document, teniendo en cuenta que el primer
índice es 0 . Mediante esta forma de expresarnos podemos acceder a cualquier formulario de la página sin
necesidad de conocer su nombre, y podemos obtener el número de formularios que hay en una página en
concreto. La sintaxis para acceder a un formulario mediante este camino es del tipo:
document.forms[indice].propiedad
Y para conocer el nº de formularios en la página deberemos escribir:
function cantidad ( ) {
var f = document.forms.length;
alert( ' el número de formularios de la página es ' + f );
document.forms[2].texto.value='cambiamos el valor del campo';
}
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 dinámicamente el tipo de codificación.
DGH Informática y Logística
- 14 -
Manual de JavaScript
Métodos del objeto form
submit
Para enviar los datos de un formulario es necesario siempre utilizar este método, que por defecto está
asociado al elemento de formulario <INPUT TYPE = " submit " >, que es un botón que al ser pulsado
llama al método submit. Ahora bien, a veces nos interesa que antes de que se produzca el envío de datos
al servidor se ejecuten una serie de acciones del lado del cliente, como pueden ser validación de datos,
mensajes de alerta y/o confirmación, etc. Para lograr esto podemos sustituir el botón tipo submit por un
botón tipo button que al ser pulsado llame a una función JavaScript que ejecute las acciones previas al
envío y una vez cumplimentadas envíe los datos. Esto se consigue llamando en la función al método
submit ( ), y el código necesario tiene el aspecto siguiente:
function previa ( ) {
...
...acciones a realizar...
...
document.forms.nombre_formulario.submit ( );
}
reset
Este método pone a cero los campos del formulario, es decir, vuelve a situar el formulario en su estado
inicial, y al igual que ocurre con el método submit existe por defecto un botón <INPUT TYPE = " reset "
> que se encarga de realizar esta operación, útil por ejemplo cuando el usuario se ha equivocado al
rellenar los campos y desea comenzar de nuevo el proceso. Pero también nos puede interesar a veces
poner a cero los campos del formulario sin que intervenga el usuario. Esto lo conseguimos llamando
diréctamente al método submit ( ) o llamando a una función que ejecute el método, siendo el código de
llamada en ambos casos del tipo:
document.forms.nombre_formulario.reset ( )
Por último, vamos a ver los eventos que admite el objeto form, algunos de los cuales son estándares y
otros sin serlo sí los admite, y que son:
onSubmit
Es el principal evento del objeto y el único estandar, y se produce al enviar los datos del formulario
mediante el botón submit o mediante el método submit ( ). Un ejemplo de llamada al método sería:
<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONSUBMIT = " alert ( ' se envían los datos ' )
">
onReset
Mediante este evento podemos ejecutar una acción dada cuando el usuario pincha el botón de borrado o
cuando mediante una función se ha llamado al método reset. Lo podemos usar por ejemplo para lanzar un
mensaje de aviso al usuario de que se van a borrar los datos. Su uso pasa por usar una sintaxis del tipo:
<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONRESET = " alert ( ' se van a borrar los
datos' ) " >
onClick
Este no es un evento típico del objeto form, pero se puede usar con én, y mediante él podemos ejecutar
una acción concreta cuando el usuario hace click en cualquier parte del formulario, sin necesidad de
que se pulse en un campo; sólo es necesario pinchar en algún lugar del espacio ocupado por el formulario
en su totalidad.. Su escritura se debe parecer a:
<FORM NAME = " form1" ACTION = "/cgi/proceso.cgi" ONCLICK = " alert ( ' ha pulsado un campo' )
">
Además de estos eventos, y al igual que ocurre con onClick, el objeto form también admite los eventos
generales ondblClick, onmouseOver, onmouseOut, onkeyPress , etc, pero su uso acarrea más problemas
que beneficios, por lo que no se utilizan. Sólo saber que estás ahí y que se pueden usar en casos muy
específicos.
DGH Informática y Logística
- 15 -
Manual de JavaScript
LOS OBJETOS TEXT, PASSWORD E HIDDEN
Uno de los elementos más usados a la hora de implementar un formulario son las cajas de texto. Estas se
definen en HTML mediante la etiqueta:
<INPUT TYPE = " text " NAME = " nombre " VALUE = " valor_por_defecto " SIZE= "
tamaño_por_defecto">
El elemento TEXT introduce una caja para que el usuario introduzca un texto, texto que será visible por el
mismo en todo momento, el elemento es análogo a este, pero se diferencia en que está concebido para
que en él se introduzcan contraseñas, por lo que cuando el usuario escribe algo en su interior este texto se
va almacenando dentro, pero en pantalla sólo se muestran asteriscos, ****, por motivos de seguridad. Por
último, el elemento HIDDEN es también igual que el TEXT, pero en este caso no aparece en pantalla ni
la caja ni su contenido, y el usuario no puede escribir nada en su interior (pero nosotros sí, por defecto o
mediante JavaScript). Vamos a explicar las propiedades y métodos de estos tres elementos análogos
mediante las del objeto TEXT, teniendo siempre presente que lo que digamos es extensible a los tres.
Pero así, con el código HTML puro, sólo podemos conseguir que el usuario introduzca un texto en el
campo, que será enviado luego al programa del servidor tal y como se haya introducido inicialmente, lo
que puede ocasionar bastantes quebraderos de cabeza, ya que el valor introducido puede no ser correcto o
no corresponder al formato que nosotros deseemos o necesitemos procesar. Y esto es debido a que HTML
no posee ninguna herramienta propia para el tratamiento de estos campos de texto.
Mediante el uso de JavaScript sí que podemos actuar fácilmente sobre los campos de texto y sobre sus
propiedades, ya que un elemento de formulario TEXT es también para JavaScript un objeto, que por lo
tanto tiene sus propiedades, métodos y eventos, a los que podemos recurrir dinámicamente para cambiar
valores, validar las entredas del campo, etc.
La forma de acceder a un campo de texto y a sus propiedades y métodos es la general del objeto form,
añadiendo a la escritura el nombre del campo y el de la propiedad a la que deseemos acceder:
document.forms.[nombre_formulario].[nombre_campo].[propiedad_campo]
Las principales propiedades del objeto TEXT son:
name
Es la propiedad más importante del objeto text, ya que nos va a permitir identificar cada campo con un
nombre identificador único, identificador que vamos a usar luego para poder referirnos sin ambiguedades
a un campo de texto concreto dentro de un formulario concreto de nuestra página y acceder a sus
propiedades y métodos. Como en la ruta de acceso al campo de texto hay que anteponer el nombre del
formulario al que pertenece, y el nombre de cada formulario debe ser único, no hay ningún problema en
que usemos el mismo nombre para diferentes campos de texto de diferentes formularios de la página. Lo
que no debemos hacer nunca es usar el mismo nombre para campos del mismo formulario, ya que
entonces el motor JavaScript del navegador no va a saber al cuál nos referimos y nos dará un error,
expresado generalmente mediante el mensaje de que el objeto llamado no existe.
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 más detallano nos dice que esto no es así, y que las posibilidades de uso son muchas. Lo
primero es acceder a la propiedad, y esto se consigue mediante la escritura:
document.[nombre_formulario].[nombre_campo].value
y ¿para qué podemos usar esto?. Imaginemos por ejemplo que tenemos un campo de texto en el que
inicialmente queremos introducir u texto aclaratorio para que el usuario sepa qué tiene que introducir en
el campo, pero que una vez que pinche en el campo este texto desapareca. El código necesario para ello
sería:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM NAME="datos" ACTION="/jsp/pag_3.jsp" METHOD= "post">
Introduce tu nombre: <INPUT TYPE=" text " NAME=" nombre " VALUE= " sólo mayúsculas "
ONCLICK = "document.forms.datos.nombre.value= '' ">
</FORM>
DGH Informática y Logística
- 16 -
Manual de JavaScript
</BODY>
</HTML>
y con esto le estamos diciendo al navegador que cuando el usuario pinche en el campo el texto inicial se
sustituya por un valor vacío.
y también podemos conseguir mediante esta propiedad pasar el valor introducido por el usuario en un
campo de texto a otro campo de otro formulario, que puede estar en la misma ventana, en otro frame o en
una ventana flotante. Esto nos puede servir por ejemplo para hacer un formulario resumen o para pasar
valores a campos ocultos ( HIDDEN ). Un ejemplo de código, para pasar el valor a un formulario de la
mima página, sería:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM NAME="datos">
Introduce tu nombre:<INPUT TYPE="text" NAME="nombre"><BR><BR>
<INPUT TYPE="button" VALUE="copiar dato" ONCLICK="copiar()">
</FORM><BR>
<FORM NAME="segundo">
tu nombre:<INPUT TYPE="text" NAME="nombre">
</FORM>
</BODY>
</HTML>
La propiedad value lleva asímismo asociada otra propiedad general de JavaScript, la propiedad length,
que nos da la longitud del texto introducido en la caja, es decir, el número de caracteres que el usuario ha
introducido. Esta propiedad es muy útil y se utiliza mucho, y con ella podemos por ejemplo hacer que el
foco salte de una caja a otra cuando se haya introducido en la primera un número dado de caracteres.
Vamos a ver un código que hace esto, saltando el foco al segundo campo cuando en el primero se
introducen 5 caracteres:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function comprueba(){
if(document.form1.caja1.value.length==5) document.form1.elements[1].focus();
}
</script>
</head>
<body>
<center>
<form name="form1">
<input type="text" name="caja1" size=10 value="" onKeyPress="comprueba()">
<input type="text" name="caja2" size=10 value="">
<br>
</form>
</center>
</body>
</html>
disabled
Esta propiedad bloquea el campo de texto, de tal forma que el texto que contenga el campo se colorea de
color grís y no se puede escribir nada nuevo en el campo.
Vamos a ver su sintaxis mediante un ejemplo:
<HTML>
<HEAD>
</HEAD>
DGH Informática y Logística
- 17 -
Manual de JavaScript
<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 métodos del objeto text son:
focus
Que sitúa el foco en la caja de texto. Este método se puede usar por ejemplo cuando se realiza una
validación de formulario y hay algún dato incorrecto; podemos entonces lanzar un mensaje de alerta al
usuario y situar el cursor en el campo incorrecto. El código para ello sería:
<html>
<head>
</head>
<body>
<center>
<form name="form0">
<input type="text" name="caja"><br><br>
<input type="button" value="pon foco" onClick="document.form0.caja.focus()">
</form>
</center>
</body>
</html>
select
Este método selecciona el texto contenido en la caja, poniendo todo el contenido de la misma con un
fondo azul estandar. Su uso pasa por la sintaxis:
<html>
<head>
</head>
<body>
<center>
<form name="form0">
<input type="text" name="caja" value="texto inicial"><br><br>
<input type="button" value="pon foco" onClick="document.form0.caja.select()">
</form>
</center>
</body>
</html>
toUpperCase - toLowerCase
Estos métodos propios convierten el texto introducido a mayúsculas y a minúsculas respectivamente, y
van asociados a la propiedad value de la caja de texto. Vamos a ver el código necesario para pasar a
mayúsculas en texto que el usuario introduce en un elemento text:
DGH Informática y Logística
- 18 -
Manual de JavaScript
<head>
<script language="JavaScript" type="text/javascript">
function cambia(){
document.form1.caja1.value=document.form1.caja1.value.toUpperCase();
}
</script>
</head>
<body bgcolor="#ffffcc">
<center>
<form name="form1">
<input type="text" name="caja1" size=40 value="" >
<br>
<input type="button" value="!a mayúsculas!" onClick="cambia()">
</form>
</center>
</body>
</html>
Por otra parte, el objeto TEXT posee los siguientes eventos:
onFocus
Este evento permite lanzar una acción cuando la caja de texto recibe el foco, es decir, cuando el usuario
pincha con el ratón la caja o cuando accede a ella mediante el tabulador del teclado. Un ejemplo de
llamada al método sería:
<INPUT TYPE = " text" NAME = " campo1 " ONFOCUS = " alert ( ' foco en la caja ' ) " >
onBlur
Mediante este evento podemos ejecutar una acción dada cuando la caja de texto pierde el foco, bien
porque el usuario trás escribir en ella pinche en otra parte de la página o bien cuando accede a otro campo
del formulario mediante el tabulador. Su uso pasa por usar una sintaxis del tipo:
<INPUT TYPE = " text" NAME = " campo1 " ONBLUR = " alert ( ' foco fuera de la caja ' ) " >
Vamos a ver un ejemplo de cómo podemos utilizar estos dos eventos. Vamos a crear un formulario con
dos cajas de texto, de tal forma que después de escribir en la primera al pasar a la segunda cambiará el
texto que hayamos introducido por otro ( evento onBlur ), mientras que la segunda caja se escribirá sóla (
evento onFocus ):
<HTML>
<HEAD>
<SCRIPT LANGUAGE = " JavaScript ">
function pinta1( ){
document.form1.campo1.value = " evento onFocus" ;
}
function pinta2 ( ){
document.form1.campo2.value = " evento onBlur" ;
}
</SCRIPT>
</HEAD><BR><BODY>
<FORM NAME = " form1">
<INPUT TYPE = " text " NAME = " campo1 " ONBLUR = "pinta2 () ">
<INPUT TYPE = " text " NAME = " campo2 " ONFOCUS = " pinta1() ">
</FORM>
</BODY>
</HTML>
DGH Informática y Logística
- 19 -
Manual de JavaScript
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 análogo.
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 además de enseñarnos cómo se deben usar estos eventos nos va a mostrar las dificultades que puede
ocasionerle al usuario si no se usan corréctamente. Vamos a colocar dos campos de texto; en el primero
va a aparecer un mensaje indicando al usuario que introduzca su nombre, y cuando este ponga el cursor
sobre el campo se le indicará que lo introduzca en mayúsculas. En el segundo campo aparecerá un
mensaje cuando el usuario quite el ratón del primer campo. Pero si este vuelve a pasra el ratón por el
primer campo, el texto que introdujo desaparece. ?Cómo se arregla esto...?. Pensad un poco. El código de
nuestro ejemplo será:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM NAME = " form1" >
<INPUT TYPE = " text " NAME = " nombre " VALUE = " pon aquí tu nombre "
ONMOUSEOVER = " document.form1.nombre.value = ' usasólo mayúsculas ' "
ONMOUSEOUT = " document.form1.mensaje.value = ' bonito nombre'" ><BR><BR>
<INPUT TYPE = " text " NAME= "mensaje">
</FORM>
</BODY>
</HTML>
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 más texto del que puede contener. El código es:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function valora(){
var n=document.form1.caja1.value.length;
if(n > 4) document.form1.caja1.size=n+1;
}
</script>
</head>
<body bgcolor="#ffffcc">
<form name="form1">
introduce un el texto que quieras:   
<input type="text" name="caja1" size="4" onkeypress="valora()">
</form>
</body>
</html>
DGH Informática y Logística
- 20 -
Manual de JavaScript
Nota: Los objetos hidden son un elemento fundamental en muchos formularios, ya que permiten
almacenar valores que podemos ir pasando a estos campos y que se utilizan para definir configuraciones
del usuario o del propio formulario, todo ello de una forma transparente para el usuario, que en ningún
momento es consciente de la existencia de estos campos ocultos. La forma de acceder a ellos y a su
propiedad value, la fundamental para esta técnica, es la msima que para acceder a un campo de texto
cualquiera.
LOS OBJETOS CHECKBOX Y RADIO
Los elementos de formulario Checkbos y Radio realizan una función parecida en esta: permitir que el
usuario elija opciones en un grupo de varias, pero mientras que en un conjunto de Checkbox puede elegir
varias de las opciones, en un conjunto de Radios sólo puede elegir una de ellas. La forma de incluir
ambos objetos en un formulario también es diferente. Para incluir un grupo de Checkbox la sintaxis sería:
<INPUT TYPE =" Checkbox" NAME="nombre_1" VALUE="valor_asociado">texto asociado al
checbox 1
<INPUT TYPE =" Checkbox " NAME= "nombre_2" VALUE=" valor_asociado">texto asociado al
checbox 2
mientras que para incluir un grupo de Radios tendríamos que escribir:
<INPUT TYPE = " Radio" NAME= " nombre" VALUE="valor_1">texto asociado al radio 1
<INPUT TYPE = " Radio" NAME = "nombre" VALUE=" valor_2">texto asociado al radio 2
Las principales propiedades de estos objetos son:
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 selección única se pierde.
El acceso a un radio o checkbos se efectúa de forma análoga a lo visto en el caso de los objetos TEXT.
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 demás, al tener todos el mismo name. Pero desde el punto de vista de su tratamiento con
JavaScript, esta propiedad no es muy útil.
disabled
Esta propiedad bloquea la caja del checkbox o el botón de radio de tal forma que el campo se colorea de
color grís y no se puede accionar el mismo.
Vamos a ver su sintaxis mediante un ejemplo, en el que vamos a ver cómo se accede a esta propledad en
ambos objetos, empleando para ello el array forms[index]:
<HTML>
<HEAD>
</HEAD>
<SCRIPT LANGUAGE = " JavaScript " >
function desab( i ) {
document.forms[i].caja.disabled=true;
}
function hab(i) {
document.forms[i].caja.disabled=false;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "form1" >
DGH Informática y Logística
- 21 -
Manual de JavaScript
<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 botón, y es una
propiedad booleana, es decir, vale true si el objeto está marcado y false si no lo está. Vamos a ver en el
siguiente ejemplo cómo podemos acceder a esta propiedad en todo un conjunto de checkbox,
consiguiendo con ello marcar y desmarcar todos a la vez. El código es:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function marcar() {
for (i=0; i<document.form1.caja.length; i++) document.form1.caja[i].checked=true;
}
function desmarcar(i) {
for (i=0; i<document.form1.caja.length; i++) document.form1.caja[i].checked=false;
}
</script>
</head>
<body >
<form name="form1">
<input type="Checkbox" name="caja" value="1">
<input type="Checkbox" name="caja" value="2">
<input type="Checkbox" name="caja" value="3">
<input type="Checkbox" name="caja" value="4">
<input type="Checkbox" name="caja" value="5">
<input type="button" value="todos" onClick="marcar()">
<input type="button" value="ninguno" onClick="desmarcar()">
</form>
</body>
</html>
length
Esta propiedad nos devuelve el número de radio botones que existe en un grupo determinado de ellos que
tienen el mismo atributo name. El siguiente código refleja su uso:
<html>
<head>
</head>
<body>
<form name="form1">
<center>
<INPUT TYPE = "Radio" NAME= "nombre" VALUE="valor_1">texto asociado al radio 1
<INPUT TYPE = "Radio" NAME = "nombre" VALUE=" valor_2">texto asociado al radio 2<br><br>
<input type="button" value="?cuantos radios?" onClick="alert('hay '+document.form1.nombre.length+'
botones')">
</center>
</form>
</body>
</html>
DGH Informática y Logística
- 22 -
Manual de JavaScript
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 expresión:
document.forms.nombre_formulario.equipo[1]
ya que el array index comienza en cero.
Por otra parte, estos objetos poseen los siguientes eventos:
onFocus
Este evento permite lanzar una acción cuando el checkbox o el radio botón recibe el foco, es decir,
cuando el usuario pincha con el ratón en ellos o cuando accede a ella mediante el tabulador del teclado.
Un ejemplo de llamada al método sería:
<INPUT TYPE = " checbox" NAME = " campo1 " ONFOCUS = " alert ( ' foco en el checkbox' ) " >
onBlur
Mediante este evento podemos ejecutar una acción dada cuando el elemento pierde el foco, bien porque el
usuario trás marcarlo pinche en otra parte de la página o bien cuando accede a otro campo del formulario
mediante el tabulador. Su uso pasa por usar una sintaxis del tipo:
<INPUT TYPE = " radio" NAME = " campo1 " ONBLUR = " alert ( ' foco fuera del radio botón' ) " >
onClick
Su efecto es el mismo que el del evento onFocus, por lo que su uso es análogo, siendo la única diferencia
entre ellos que para hacer que salte el evento onclick es necesario pinchar en el elemento, no activándose
si accedemos a él mediante el tabulador.
Vamos a ver su uso práctico mediante el siguiente código, que hace ue al pinchar un radio botón aparezca
un texto en una caja:
<html>
<head>
</head>
<body bgcolor="#ffffcc">
<form name="form1">
pincha en el radio...<input type= "radio"onclick="document.form1.campo.value='?hola, que tal?'">
<input type="text" name="campo">
</form>
</body>
</html>
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 prácticas.
onMouseOver , onmouseOut, ondblClick, onkeyPress
Estos eventos son aceptados por ambos objetos, aunque su aplicación práctica es nula, ya que causa más
molestias que ventajas.
LOS OBJETOS BUTTON, SUBMIT Y RESET
Vamos a tratar en este capítulo estos 3 objetos, que aunque se diferencian un poco en su uso su
apariencia, sus propiedades y sus eventos son análogos. La principal diferencia en su uso estriba en que el
elemento button es símplemente un botón para ejecutar un código JavaScript cualquiera, no teniendo
asociada por defecto ninguna acción; el elemento submit ejecuta el envío de los datos del formulario al
ser pulsado; por último, el elemento reset borra todos los campos del formulario, dejando estos con su
valor poor defecto.
DGH Informática y Logística
- 23 -
Manual de JavaScript
La apariencia de button, submit y reset es la misma, y si no se les aplica ningún estilo aparecen siempre
como un botón rectangular grís con un texto negro dentro.
Las principales propiedades de estos objetos son:
name
Es la propiedad que va a asignar a cada botón un nombrae identificador para poder referirnos luego a él y
acceder a sus propiedades.
width
Que fija la anchura que va a tener el botón. Si no se especifica este valor, el botón tendrá el ancho
necesario para contener el texto indicado mediante la propiedad value.
height
Que fija la altura del botón.
value
Esta propiedad determina el texto que va a aparecer contenido en el botón.
Vamos a ver un ejemplo que maneje estas propiedades, y para ello vamos a construir una función de
JavaScript que cambie el texto de un botón en el que no se ha definido la anchura, para que veamos cómo
cambia esta con el texto del botón:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function cambia(){
document.form1.boton.value='así que te has atrevido a pincharme';
}
</script>
</head>
<body>
<form name="form1">
<input type="button" name="boton" value="pinchame" onClick="cambia()">
</form>
</body>
</html>
disabled
Esta propiedad bloquea el botón de tal forma que el texto se colorea de color grís y no se puede accionar
el mismo.
Vamos a ver su sintaxis mediante un ejemplo, en el que vamos a ver cómo se accede a esta propledad
para crea un botón de envío de datos que sólo se active al seleccionar un radio button de un conjunto de
ellos:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function activa(){
document.form1.boton.disabled=false;
}
</script>
</head>
<body bgcolor="#ffffcc">
<form name="form1">
elije una opción:   
<input type="radio" name="radio1" onClick="activa()">música
<input type="radio" name="radio2" onClick="activa()">cine
<input type="radio" name="radio3" onClick="activa()">deporte
DGH Informática y Logística
- 24 -
Manual de JavaScript
<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 método onClick para estos objetos, por lo que me refiero a lo abajo
explicado.
onBlur
No tiene un uso práctico para estos objetos.
onClick
Este es sin duda el evento más onClick con los botones, ya que por propia definición el objetivo de un
botón es ser pinchado.
Su uso principal es llamar a una función JavaScript al ser pinchado el botón, del que ya hemos visto
varios ejemplos a lo largo de estos artículos, por lo que no voy a insistir en ello.
Sólo hacer una consideración de uso: cuando tenemos en un formulario un botón del tipo submit o reset y
por algún motivo queremos anular su acción intrínseca (enviar los datos del formulario o borrarlos), basta
con colocar un evento onClick en el botón que nos devuelva false, del tipo:
<input type="submit" value="enviar" onClick="return false">
onMouseOver , onmouseOut, ondblClick, onkeyPress
Estos eventos son aceptados por estos objetos, y su aplicación práctica la vamos a ver mediante un
ejemplo, cuyo código es:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function cambia(){
document.forms[0].elements[0].value='?me vas a pinchar?'
}
function descambia(){
document.forms[0].elements[0].value='pinchame'
}
function gracias(){
alert('!gracias por pincharme!')
}
</script>
</head>
<body>
<center>
<form name="form1">
<input type="button" name="boton" value="pinchame" onMouseOver="cambia()"
onMouseOut="descambia()" onClick="gracias();"></center>
</form>
</body>
</html>
EL OBJETO TEXTAREA
El objeto textarea inicialmente admite el mismo tratamiento que el objeto text, sus mismas propiedades,
métodos y eventos. Pero además posee una serie de características propias originadas por su propia
definición.
La apariencia del elemento textarea dentro de un formulario es la de una caja de texto de anchura y altura
determinada, que posee scrolls o barras de desplazamiento propias para poder navegar por su interior. Su
sintaxis dentro de un formulario es del tipo:
<textarea name="comentario" cols="20" rows="5"></textarea>
DGH Informática y Logística
- 25 -
Manual de JavaScript
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 núemro de columnas de la misma. Si no se
especifica este valor, el textarea aparece por defecto con una anchura estandar, que suele corresponder a
21 columnas.
ro w s
Que fija la altura que va a tener el textarea, mediante el número de filas de la misma. Si no se especifica
este valor, el textarea aparece por defecto con una altura estandar, que suele corresponder a 2 columnas.
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, también posee la
subpropiedad length, que representa el nº de caracteres que contiene el textarea. Para entender bien esto,
vamos a escribir y esplicar el código necesario para crear un textarea que sólo permita escribir dentro 15
caracteres.El código es:
<html>
<head>
<SCRIPT language="JavaScript" type="text/javascript">
function chequea(form) {
var max=15;
if (form.comentario.value.length > max) {
alert("No puede entrar más de 15 caracteres. Por favor, entre de nuevo el texto.");
return false;
}
else return true;
}
</script>
</head>
<body bgcolor="#ffffcc">
<center>
<form name="form1" onsubmit="return chequea(this)">
Por favor, entre como máximo 15 caracteres.<br>
<textarea rows="5" cols="30" name="comentario" wrap="virtual"></textarea>
<br><input type="submit" value="enviar">
</form>
</center>
</body>
</html>
En primer lugar definimos la función chequea, que admite como parámetro el nombre del formulario
sobre el que va a operar, y si nos fijamos en el contenido del botón submit vemos que llamamos a la
función pasándole como parámetro la palabra clave de JavaScript this, que representa el objeto en la que
está contenida; es decir, como el botón submit está contenido en el formulario form1, la palabra clave this
hace representa en este caso a este formulario y a su documento padre, por lo que equivale a escribir
document.form1. Luego definimos la variable max, que va a definir el número máximo de caracteres que
queremos en la caja. Seguidamente vemnos si el número de caracteres introducidos en el textarea,
determinado por this.comentario.value.length, es mayor que el fijado por la variable max (15 en este
DGH Informática y Logística
- 26 -
Manual de JavaScript
caso). Si es así lanzamos un mensaje de alerta al usuario comunicándole que ha sobrepasado el nº de
caracteres permitido, y luego escribimos return false, ya que como hemos llamado a la función desde un
botón submit si no devolvemos false los datos del formulario serán enviados. Si la condición de
longitudes no se cumple, es decir, si el nº de caracteres es menor que 15, dejamos que el proceso de envío
siga adelante sin lanzar ningún mensaje, y esto se consigue retornando true.
disabled
Esta propiedad bloquea el textarea de tal forma que el texto que contiene se colorea de grís y no se puede
cambiar el mismo ni escribir nada nuevo en el interior de la caja.
readonly
Que actúa de forma análoga a disabled, bloqueando el texto contenido de forma que no se puede
modificar, pero que no pone el textarea en color grís.
El objeto textarea posee los siguientes métodos:
select
Este método selecciona el texto contenido en el textarea, situándolo con color blanco sobre un fondo azul.
Es el usado en las páginas que muestran código JavaScript de ejemplo para que podamos seleccionarlo al
pulsar sobre el texto, y así copiarlo fácilmente. La forma de usar el método select() en este caso vamos a
verla en un ejemplo:
<html>
<head>
</head>
<body>
<center>
Para copiar el contenido de la caja pulse sobre ella con el botón derecho y
seleccione "copiar" en el menú contextual.
<form>
<textarea cols=15 rows=10 onFocus="this.select()">Esto es un ejemplo de cómo se selecciona
el texto de una caja al coger esta el foco
</textarea>
</form>
</center>
</body>
</html>
focus
Este método sitúa 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 ratón, bien por acceder al
mismo mediante el tabulador. Vamos a ver cómo podemos usar un textarea para explicar al usuario qué
debe introducir en los campos de formulario, cosa que conseguimos cambiando el contenido del textarea
cuando otro elemento recibe el foco:
<html>
<head>
</head>
<body onLoad="document.form1.nombre.focus()">
<form name="form1">
Nombre:<input type="text" name= "nombre"onFocus="this.form.explica.value='Introduce tu nombre'">
Apellidos:<input type="text" name= "apellidos"onFocus="this.form.explica.value='Introduce tus
apellidos'">
<textarea name="explica" cols="25" rows="1">Introduce tu nombre</textarea>
</form>
</body>
DGH Informática y Logística
- 27 -
Manual de JavaScript
</html>
onBlur
El evento onBlur se lanza cuando el textarea pierde el foco despúes de haberlo recibido. Al igual que con
el objeto text, su principal uso es el de modificar, corregir o validar el texto contenido ene el textarea
antes de ser enviados los datos.
onClick
Que se lanza al pinchar con el ratón en el interior del texarea.
onMouseOver , onmouseOut, ondblClick, onkeyPress,onKeyUp
Estos eventos son aceptados por este objeto, al igual que los demás objetos de formulario.
Vamos a ver un ejemplo parecido al primero de este capítulo, en el que vamos a permitir un máximo de
caracteres en el textarea, y además vamos a mostrar al usuario el nº máximo de ellos que le van quedando
para poner, es decir, vamos a implementar un contador de cuenta atrás. Vamos a ver el código y luego lo
explicamos:
<html>
<head>
<SCRIPT language="JavaScript" type="text/javascript">
function contador (campo, cuentacampo, limite) {
if (campo.value.length > limite) campo.value = campo.value.substring(0, limite);
else cuentacampo.value = limite - campo.value.length;
}
</script>
</head>
<body>
<center>
<form name="form1">
sólo puedes entrar 125 caracteres.
<textarea name="mensaje" wrap=physical cols="28" rows="4"
onKeyDown="contador(this.form.mensaje,this.form.remLen,125);"
onKeyUp="contador(this.form.mensaje,this.form.remLen,125);"></textarea>
<input type="text" name="remLen" size="3" maxlength="3" value="125" readonly>te quedan todavía
</form>
</center>
</body>
</html>
Vamos a definir la función contador, que va a manejar 3 parámetros, que van a ser:
1) campo: representa al textarea sobre el que queremos que actúe la función, que se corresponde en el
ejemplo con this.form.mensaje.
2) cuentacampo : que representa la caja de texto en la que vamos a colocar el contador de cuenta atrás,
representada en nuestro formulario por this.form.remLen.
3) limite : que va a determinar el nº máximo de caracteres que vamos a permitir en el textarea.
Las instrucciones que le damos a la función son:
a) if (campo.value.length > limite) campo.value = campo.value.substring(0, limite); este código es una
condición que le dice a la función que si el la longitud de la propiedad value del campo que le pasemos
como primer argumento ( es decir, el número de caracteres introducido en el textarea) es mayor que el
límite pasado como tercer argumento, entonces sólo debe tomar los caracteres comprendidos entre el
primero (0) y el marcado por el límite (125), con lo que aunque escriba el usuario más de 125 sólo se
considerarán los 125 primeros. Esta instrucción sólo maneja pués el caso de que haya más de 125
caracteres, y no actúa para nada con el contador de cuenta atrás.
2) else cuentacampo.value = limite - campo.value.length; que trata el caso en que todavía no se superen
los 125 caracteres en el textarea, y le dice a la función que en ese caso el valor que aparezca en el campo
que le pasemos como argumento cuentacampo, que en nuestro caso corresponde a la caja de texto
remLen, debe ser igual al valor del límite establecido menos el nñumero de caracteres que haya
introducidos en el textarea, con lo que consegimos el efecto de cuenta atrás.
DGH Informática y Logística
- 28 -
Manual de JavaScript
Ahora bien, para que la función actúe dinámicamente debemos llamarla cada vez que el usuario pulse una
tecla al introducir un caracter en el textarea, y también cuando la tecla ha sido pulsada, para que no nos
pasemos del límite de 125 caracteres establecido. Por eso llamamos a la función mediante los eventos
onKeyDown y onKeyUp, es decir, cada vez que el usuario pulsa o suelta una pieza del teclado.
EL OBJETO SELECT
Hasta ahora lo que hemos visto no parece muy complicado, pero ahora la cosa se pone un poco más
dificil, ya que el objeto SELECT (conocidos también como combos), por su propia construcción, ofrece
más posibilidades y posee unas propiedades que requieren un trato especial por parte del lenguaje
JavaScript.
La apariencia del elemento select dentro de un formulario puede ser la de una caja de texto de anchura y
altura determinada, que posee scrolls o barras de desplazamiento propias para poder navegar por su
interior, que contiene en su interior una serie de opciones de las que podemos elegir una o varias, o bien,
y lo que es más corriente, aparecer como una especie de caja de texto que tiene una flecha en su parte
derecha, y que al ser pulsada despliega su contenido permitiéndonos efectuar una seleción entre las
diversas opciones que contiene.. Su sintaxis dentro de un formulario es del tipo:
<select name="menu">
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select>
que como vemos lleva etiqueta de cierre, y una serie de etiquetas interiores OPTION que definen las
opciones que van a aparecer en el interior del combo, y cuya apariencia en el navegador es la siguiente:
Las principales propiedades del objeto select son:
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 número de opciones que serán visibles en el combo. Para acceder a esta propiedad deberemos
escribir:
document.name_formulario.name_select.size= número
disabled
Esta propiedad bloquea el combo, de tal forma que el texto que contiene se colorea de grís y no se puede
accionar el mismo ni hacer ninguna selección en él.
length
Que nos da acceso al número de opciones que forman el combo. Su sintaxis típica es del tipo:
document.forms.nombre_formulario.nombre_select.length
type
Que nos dice en general qué tipo de objeto de formulario es el referenciado, y en este caso nos informa
además si el combo es simple o múltiple. Su forma de acceso es:
document.forms.nombre_formulario.nombre_elemento.type
selectedIndex
Que nos permite acceder a la opción elegida por el usuario en un select. Nos devuelve el número de la
opción elegida dentro del array options, comenzando por el índice cero. Su forma de acceso es:
document.forms.nombre_formulario.nombre_elemento.selectedIndex
Asociadas a esta propiedad existen otras dos: value y text, que nos dan el value y el texto asociados a la
opción elegida. Veamos el siguiente código:
DGH Informática y Logística
- 29 -
Manual de JavaScript
<html>
<head>
<script language="JavaScript" type="text/javascript">
function muestra()
{
var miOpcion=document.forms[0].equipos.selectedIndex;
var texto='número de opción elegida= '+miOpcion+'\n';
texto+='value de la opción = '+document.forms[0].equipos.options[miOpcion].value+'\n';
texto+='texto de la opción= '+document.forms[0].equipos.options[miOpcion].text;
alert(texto);
}
</script>
</head>
<body>
<form name="Form1">
<select name="equipos" onChange="muestra()">
<option value="entrada">---selecciona un equipo---</option>
<option value="rmadrid">Real Madrid</option>
<option value="barga">Barcelona</option>
<option value="atletico">Atlético de Madrid</option>
</select>
</form>
</body>
</html>
selected
Propiedad booleana que comprueba si una opción determinada a sido seleccionada o no. Como ejemplo
de su uso veamos el siguiente código:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function muestra()
{
if(document.forms[0].equipos.options[1].selected==true)
alert('el mejor equipo');
}
</script>
</head>
<body>
<form name="Form1">
<select name="equipos" onChange="muestra()">
<option value="entrada">---selecciona un equipo---</option>
<option value="rmadrid">RealMadrid</option>
<option value="barga">Barcelona</option>
<option value="atletico">Atlético de Madrid</option>
</select>
</form>
</body>
</html>
multiple
Que convierte el combo de una sóla opción con flecha desplegadora en un combo de varias filas, en el
que el usuario puede elegir varias de las opciones manteniendo pulsada la tecla "control" mientras ejecuta
la selección.
Vamos a ver un ejemplo en el que vamos a cambiar esta propiedad dinámicamente, junto con el texto y
funcionalidad de un botón. El código necesario sería:
<html>
<head>
<title>Untitled</title>
DGH Informática y Logística
- 30 -
Manual de JavaScript
<script language="JavaScript" type="text/javascript">
var estado=1;
function cambia(){
estado=!estado;
if (estado==0){
document.forms[0].menu.multiple=true;
document.forms[0].boton.value="simple";
}
else{
document.forms[0].menu.multiple=false;
document.forms[0].boton.value="multiple";
}
}
</script>
</head>
<body bgcolor="#ffffcc">
<form name="ejemplo1">
<select name="menu">
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select><br><br>
<input type="button" name="boton" value="multiple" onclick="cambia()">
</form>
</body>
</html>
Inicialmente tenemos un elemento select simple y un botón con un texto. Para bcambiar los valores de
ambos elementos definimos una variable "estado", que inicialmente vale 1, y creamos una función que lo
primero que hace es cambiar el valor de esta variable cada vez que la llamamos, y luego ejecuta unas
acciones u otras dependiendo del valor de la variable estado, es decir, alternativamente ejecuta un bloque
de instrucciones o el otro. Ya sólo nos queda acceder en cada bloque a la propiedad multiple del combo y
a la propiedad value del botón, cambiándoles los valores. Por último mediante el evento onClick del
botón llamamos a la función cada vex que se pulse este.
option
Esta es sin duda una de las propiedades más importantes y complejas del objeto select, y especifica y
permite acceder a cada una de las diferentes opciones del combo. Su estudio es bastante complejo, por lo
que estudiaremos esta propiedad en el siguiente capítulo.
El objeto select posee el método:
focus
Este método sitúa el cursor sobre el combo. La forma de usarlo es del tipo:
document.forms.name_formulario.name_select.focus();
y podemos apreciar su uso en el siguiente ejemplo, en el que a pesar de haber en el formulario un campo
de texto antes, situamos inicialmente el foco en el combo.
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 ratón, bien por acceder al
mismo mediante el tabulador. Vamos a ver cómo podemos usar este evento para lanzar un mensaje al
usuario para que haga una selección en el combo:
<html>
<head>
</head>
<body>
DGH Informática y Logística
- 31 -
Manual de JavaScript
<form name="ejemplo1">
<select name="menu" onfocus="alert('por favor, elija un tema')">
<option value="opcion0">?qué tema le gusta?
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select>
</form>
</body>
</html>
onBlur
El evento onBlur se lanza cuando el combo pierde el foco despúes de haberlo recibido, es decir, cuando el
usuario lo abandona tras haberlo activado. Podemos usarlo por ejemplo para lanzar un mensaje de
agradecimiento al usuario, uso.
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 opción inicial o por defecto, aparte de que precisa que se pinche fuera del
mismo (por eso hemos puesto el botón "enviar", que no hace nada, sólo coger el foco). Todo esto se evita
mediante el uso del evento onChange, que se activa cuando se cambia la opción actual del combo por
otra, y que no precisa de que se pinche en otro sitio de la ventana.
onClick
Que no conviene utilizar nunca, ya que se lanzaría cada vez que se pinchara en el combo, lo que impediría
al usuario efectuar una selección.
onMouseOver , onmouseOut, ondblClick, onkeyPress, onKeyUp
Estos eventos son aceptados por este objeto, al igual que los demás objetos de formulario, pero no son
útiles en absoluto (salvo contadas excepciones), por lo que no se usan.
EL OBJETO OPTION
¿Cómo es que digo el objeto OPTION, cuando en el capítulo anterior hemos visto que este elemento es
una propiedad del objeto SELECT?. Pués bien, esto es así porque la propiedad OPTION posee a su vez
una serie de propiedades que la individualizan y la hacen ser un objeto propio accesible mediante
JavaScript, además de ser el camino que vamos a tener para dar una funcionalidad propia a su objeto
padre SELECT.
Las principales propiedades del objeto option son:
value
Que fija un valor asociado a cada opción del combo, valor que no ve el usuario, pero que es el que se va a
enviar asociado al parámetro name del select cuando se haga el submit del formulario. Es importante que
esto quede muy claro: una cosa es lo que el usuario ve en el combo y otra cosa es lo que se envía con el
formulario. Así, si el usuario ha seleccionado la opción del combo determinada por el código:
<OPTION VALUE="00001">música</OPTION>
Este ha seleccionado en el combo la palabra "música", pero el valor que se envía al programa que va a
procesar los datos es "00001".
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= número.
selected
DGH Informática y Logística
- 32 -
Manual de JavaScript
Esta propiedad selecciona de de antemano o dinámicamente una de las opciones del combo, haciendo por
tanto que aparezca en primer lugar aunque su posición en la lista de opciones no sea ese.
El objeto option no posee métodos ni eventos propios.
EL ARRAY OPTIONS
Al igual que el objeto form lleva está representado por el array forms[index], que contiene todos los
formularios del documento, el objeto option lleva asociado el array OPTIONS[index], que contiene todas
las opciones contenidas o por contener en un select. Así pues, podemos definir también que el objeto
select tiene una propiedad OPTIONS[index], que contiene todas las posibles opciones del mismo.
Con este planteamiento, podemos acceder a cualquiera de las opciones de un combo mediante la
referencia:
document.name_formulario.name_select.options[index].propiedad
en donde index comienza por 0, al igual que casi todos los arrays de JavaScript.
Este objeto - Array posee la propiedad length, que nos da el número de opciones que hay en el select, y
cuyo acceso se realiza con la escritura:
document.name_formulario.name_select.options.length
También posee una propiedad fundamental, selectedIndex, que nos va a servir de base para trabajar con
estos objetos. Esta propiedad devuelve el índice dentro del array de la opción seleccionada (comenzando
por 0). Para acceder a este valor vamos a definir una variable:
var indice=document.name_formulario.name_select.options.selectedIndex
y una vez que tenemos el índice correspondiente a la opción seleccionada almacenado en la variable
podemos acceder tanto a la propiedad value de la opción:
var valor= document.name_formulario.name_select.options[indice].value
como al texto asociado a la misma:
var valor=document.name_formulario.name_select.options[indice].text
Vamos a ver un ejemplo que aclare todo esto, en el que vamos a pasar el valor del índice, del texto y del
value de la opción seleccionada por el usuario cada uno a un campo de texto:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function pasa ( ) {
var indice=document.forms.ejemplo.menu.options.selectedIndex;
var valor=document.forms.ejemplo.menu.options[indice].value;
var texto=document.forms.ejemplo.menu.options[indice].text;
document.forms.ejemplo.caja1.value=indice;
document.forms.ejemplo.caja2.value=valor;
document.forms.ejemplo.caja3.value=texto;
}
</script>
</head>
<body>
<form name="ejemplo">
<select name="menu">
<option value="opcion0">esquí
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select>
<input type="button" value="pasa valores" onClick="pasa()"><br><br>
indice:<input type="text" name="caja1" size="1" readonly><br>
value:<input type="text" name="caja2" readonly><br>
texto:<input type="text" name="caja3" readonly>
</form>
</body>
</html>
DGH Informática y Logística
- 33 -
Manual de JavaScript
Para comprobar si una determinada opción del combo ha sido seleccionada, el objeto options dispone de
la propiedad booleana selected, que devuelve true si el índice especificado es el elegido, y false en caso
contrario. La forma de usar esta propiedad es:
if(document.name_formulario.name_select.options[i].selected==true/ false) instrucciones...
EL CONSTRUCTOR NEW OPTION
El objeto select posee también un constructor propio, new Option, que nos va a permitir introducir
dinámicamente una o varias opciones nuevas dentro de un combo. La sintaxis genérica de este
constructor es:
otraopcion=new Option("texto","valor", "defaultSelected", "selected")
en donde texto va a ser el texto asociado a la nueva opción y valor su value asociado, defauldSelected
deberemos ponerlo si queremos que sea la opción seleccionada por defecto en el combo y selected si
queremos que sea la seleccionada sólo en el momento de crearla.
Una vez creada la nueva opción hay que introducirla en el combo, y esto se consigue mediante la
escritura:
document.forms.nombre_formulario.nombre_select.options[indice n+1]=otraopcion
en donde debemos poner como índice n+1, es decir, el índice debe ser una unidad mayor que el último
que tenga anteriormente el select, ya que si ñe ponemos como índice uno ya existente en vez de crear uno
nueva opción lo que haríamos sería sustituir una existente por la nueva. Vamos a ver un ejemplo para
aclarar esto, en el que vamos a introducir una nueva opción en nuestro combo inicial.
<html>
<head>
<script language="JavaScript" type="text/javascript">
function nueva ( ) {
var deporte= new Option('deporte','opcion4','', 'selected');
document.ejemplo1.menu.options[4]=deporte;
}
</script>
</head>
<body>
<form name="ejemplo1">
<select name="menu">
<option value="opcion0">?qué tema te gusta?
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select>
<input type="button" value="opción deporte" onClick="nueva()">
</form>
</body>
</html>
Si lo que deseamos es borrar una de las opciones que ya existen en un combo, la escritura a usar es:
document.forms.nombre_formulario.nombre_select.options[ n ]=null
y con esto borramos la opción correspondiente, pero su lugar sigue ahí, aunque vacio. Para hacer las cosa
bien deberemos quitar esta opción vacía, y esto lo conseguimos pasando las opciones que tienen un índice
mayor que la borrada un lugar hacia abajo en la lista de índices del objeto options. Esto lo podemos ver en
el siguiente código:
<head>
<script language="JavaScript" type="text/javascript">
function borra( ){
document.forms.ejemplo.menu.options[0].text=document.forms.ejemplo.menu.options[1].text;
document.forms.ejemplo.menu.options[1].text=document.forms.ejemplo.menu.options[2].text;
document.forms.ejemplo.menu.options[2].text=document.forms.ejemplo.menu.options[3].text;
document.forms.ejemplo.menu.options[3]=null;
}
</script>
DGH Informática y Logística
- 34 -
Manual de JavaScript
</head>
<body>
<form name="ejemplo">
<select name="menu">
<option value="opcion0">esquí
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select>
<input type="button" value="borra esquí" onClick="borra()">
</form>
</body>
</html>
Si deseamos sustituir una opción de un combo por otra nueva, deberemos sustituir el texto y el value por
los asociados a esta, y un ejemplo de esto sería:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function cambia(){
var indice=document.forms.ejemplo.menu.selectedIndex;
document.forms.ejemplo.menu.options[indice].value='opcion4';
document.forms.ejemplo.menu.options[indice].text='futbol';
}
</script>
</head>
<body>
<form name="ejemplo">
<select name="menu">
<option value="opcion0">esquí
<option value="opcion1">música
<option value="opcion2">cine
<option value="opcion3">teatro
</select>
<input type="button" value="cambia esquí" onClick="cambia()">
</form>
</body>
</html>
EJEMPLOS AVANZADOS
Vamos ahora a aplicar todo lo visto en estos capítulos a un par de ejemplos prácticos, que iré explicando
paso a paso. La complejidad de los mismos derivará sólamente de nuestro conocimiento de la aplicación
de JavaScript a los formularios, ya que sin duda se pueden implementar construcciones mucho más
complejas, pero que también necesitarían de un conocimiento básico o avanzado de otros objetos de este
lenguaje de programación, como el tratamiento de fechas, el de elementos matemáticos, el de creación de
objetos propios, etc, que no son por ahora la intención de este pequeño manual, pero que sí os prometo
que veremos más adelante.
Ejemplo A: creación de un combo múltiple
En alguna que otra página web hemos visto dos combos, uno tras otro, de tal forma que según la selección
que hagamos en el primero aparecerán unas opciones u otras en el segundo. Para dejar las cosas más
claras, me estoy refiriendio a lo siguiente:
Principio del formulario
Principio del formulario
-elije una opción-
------------------------
Final del formulario
Final del formulario
DGH Informática y Logística
- 35 -
Manual de JavaScript
¿Es un efecto bonito, verdad?. Pues bien, es muy facil de crear con lo que sabemos a estas alturas. Lo
primero que debemos hacer es crear dos combos, cada uno dentro de un formulario (aunque pueden estar
en el mismo; sólo lo hago así para más claridad) que vamos a meter dentro de una tabla para que estén en
la misma línea de la página. El primero de ellos va a ser de estructura fija, el principal, y el otro vamos a
inicializarlo símplemente con su pareja de etiquetas select y una opción que contiene una serie de
guiones, escribiendo para ello dentro del BODY el código HTML:
<table>
<tr>
<td width="150">
<form name="form1">
<select name="menu1">
<option value="opcion0">-elije una opción<option value="opcion1">deporte
<option value="opcion2">música
<option value="opcion3">cine
</select>
</form>
</td>
<td>
<form name="form2">
<select name="menu2">
<option value="opcion0">-----------------------</select>
</form>
</td>
</tr>
</table>
bien, ya tenemos nuestros select para trabajar con ellos. Ahora nos vamos a meter en el código JavaScript.
Deseamos que cuando el usuario pinche en una de las opciones del combo principal se escriban unas
opciones diferentes en el combo secundario, y esto último lo vamos a conseguir mediante el constructor
new Option. Así, para el primer caso, opción deporte, deberemos crear dos nuevas opciones y darles
valor, mediante:
<script language="JavaScript" type="text/javascript">
function menu1(){
sub0=new Option("-elije un equipo-","sub0","defauldSelected");
sub1=new Option("Real Madrid","rmadrid");
sub2=new Option("Barcelona","barsa");
document.forms.form2.menu2.options[0]=sub0;
document.forms.form2.menu2.options[1]=sub1;
document.forms.form2.menu2.options[2]=sub2;
}
</script>
en donde creamos las 3 opciones del primer caso y las introducimos en el combo, colocando la primera
(índice 0 - cabecera del combo) como seleccionada por defecto. De esta forma, cuando llamamos a la
función menu1() crearemos el nuevo combo dinámicamente. Y creamos luego otras dos funciones
análogas para los casos de música y cine.
Por último, sólo nos falta establecer la llamada a estas funciones, llamada que vamos a hacer mediante
una nueva función inicial, que va a detectar qué opción principal ha seleccionado el usuario:
function combo(){
var indice=document.forms.form1.menu1.selectedIndex;
if(indice==1) menu1();
if(indice==2) menu2();
if(indice==3) menu3();
}
y llamamos a esta función mediante el manejador de eventos onChange, aplicado al primer combo:
<select name="menu1" onChange="combo()">
DGH Informática y Logística
- 36 -
Manual de JavaScript
y ya está. El código total resultante es el siguiente:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function combo(){
var indice=document.forms.form1.menu1.selectedIndex;
if(indice==1) menu1();
if(indice==2) menu2();
if(indice==3) menu3();
}
function menu1(){
sub0=new Option("-elije un equipo-","sub0","defauldSelected");
sub1=new Option("Real Madrid","rmadrid");
sub2=new Option("Barcelona","barsa");
document.forms.form2.menu2.options[0]=sub0;
document.forms.form2.menu2.options[1]=sub1;
document.forms.form2.menu2.options[2]=sub2;
}
function menu2(){
sub0=new Option("elije un compositor","sub0","defauldSelected");
sub1=new Option("Mendelson","mendelson");
sub2=new Option("Von-Suppé","vonsuppe");
sub3=new Option("Bizet","bizet");
document.forms.form2.menu2.options[0]=sub0;
document.forms.form2.menu2.options[1]=sub1;
document.forms.form2.menu2.options[2]=sub2;
document.forms.form2.menu2.options[3]=sub3;
}
function menu3(){
sub0=new Option("---elije un actor---","sub0","defauldSelected");
sub1=new Option("Pajares","pajares");
sub2=new Option("Esteso","esteso");
sub3=new Option("Resines","resines");
sub4=new Option("Banderas","banderas");
document.forms.form2.menu2.options[0]=sub0;
document.forms.form2.menu2.options[1]=sub1;
document.forms.form2.menu2.options[2]=sub2;
document.forms.form2.menu2.options[3]=sub3;
document.forms.form2.menu2.options[4]=sub4;
}
</script>
</head>
<body>
<table align="center">
<tr>
<td width="150">
<form name="form1">
<select name="menu1" onChange="combo()">
<option value="opcion0">-elije una opción<option value="opcion1">deporte
<option value="opcion2">música
<option value="opcion3">cine
</select>
</form>
</td>
<td>
<form name="form2">
<select name="menu2">
<option value="opcion0">-----------------------</select>
DGH Informática y Logística
- 37 -
Manual de JavaScript
</form>
</td>
</tr>
</table>
</body>
</html>
EJEMPLO B: CREACIÓN DE UN COMBO DE SELECCIÓN AVANZADA
En este ejemplo vamos a imaginar que tenemos que implementar un combo simple en el que el usuario
pueda elejir cuatro opciones diferentes. Para ello vamos a implementar un combo en el que al hacerse una
selección el valor de la misma es pasado a una caja de texto diferente, con lo que el usuario tendrá
siempre presente qué opciones lleva elegidas. Pero ?y si el usuario selecciona dos o más veces la misma
opción en el combo?. Debemos corregir esta posibilidad estableciendo un sistema tal que si se selecciona
una opción que ya lo estaba, bien lanzando un mensaje de error al usuario y no se le permita hacerlo, bien
haciendo que entonces la opción repetida se borre. Vamos a implementar este último camino.
Para la explicación voy a seguir un esquema no lineal, por lo que si quereis ver el código completo
ordenado pincha luego con el botón de recho sobre la ventana flotante del ejemplo y selecciona "ver
código fuente".
Lo primero que vamos a hacer va a ser implementar un formulario en nuestra página, que va a estar
formado por un select con siete opciones, cuatro cajas de texto y los botones de envío y borrado. Además,
como vamos a pasar los textos del combo a las cajas de texto, necesitamos también algo que nos vaya
recogiendo los value de las opciones que elija el usuario, y esto lo logramos introduciendo en el
formulario cuatro campos hidden que van a recoger estos valores. Con esto el formulario nos queda:
<form name="ejemplo" action="nada" method="post">
<SELECT NAME="menu" SIZE=1 onChange="combo();">
<OPTION selected>--seleccione 4 equipos--</OPTION>
<OPTION value="1">Real Madrid</OPTION>
<OPTION value="2">Barcelona</OPTION>
<OPTION value="3">Atlético de Madrid</OPTION>
<OPTION value="4">Bilbao</OPTION>
<OPTION value="5">Mallorca</OPTION>
<OPTION value="6">Deportivo</OPTION>
<OPTION value="7">Valencia</OPTION>
</SELECT><br>
<input type="text" name="equipo1" size="18" value="" readonly>
<input type="text" name="equipo2" size="18" value="" readonly>
<input type="text" name="equipo3" size="18" value="" readonly>
<input type="text" name="equipo4" size="18" value="" readonly><br>
<input type="submit" value="aceptar">
<input type="button" value="borrar" onClick="document.forms[0].reset();">
<input type="hidden" name="Equipo1" value="">
<input type="hidden" name="Equipo2" value="">
<input type="hidden" name="Equipo3" value="">
<input type="hidden" name="Equipo4" value="">
</form>
en el que hemos establecido las cajas de texto con el atributo readonly para que el usuario no pueda
modificar sus valore suna vez establecidos por el combo, y hemos implementado un botón de borrado tipo
button porque nos interesará luego añadirle funcionalidad.
Una vez implementado el formulario vamos a crear nuestra función de JavaScript, que lo primero que
debe hacer es pasar los textos de la opciones seleccionadas por el usuario a las cajas de texto, y los value
de las mismas a los campos hidden. Para ello, la función debe ser del tipo ya visto en estos capítulos, con
la única salvedad de que ahora debemos hacer una comprobación cada vez que el usuario elije una
opción: si esta ya estaba en la lista de elegidas, se borrará de los dos campos (caja e hidden), y si no lo
estaba, se añadirá a los siguientes vacíos:
<script language="JavaScript" type="text/javascript">
var n=0;
function combo() {
n++;
if (comboMenu()) {
DGH Informática y Logística
- 38 -
Manual de JavaScript
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;
}
DGH Informática y Logística
- 39 -
Manual de JavaScript
}
else if (n==5) {
if (n==5 && document.forms[0].equipo1.value==menu_text) {
document.forms[0].equipo1.value=document.forms[0].equipo2.value;
document.forms[0].Equipo1.value=document.forms[0].Equipo2.value;
document.forms[0].equipo2.value=document.forms[0].equipo3.value;
document.forms[0].Equipo2.value=document.forms[0].Equipo3.value;
document.forms[0].equipo3.value=document.forms[0].equipo4.value;
document.forms[0].Equipo3.value=document.forms[0].Equipo4.value;
document.forms[0].equipo4.value='';
document.forms[0].Equipo4.value='';
n=(n-2);
}
else if (n==5 && document.forms[0].equipo2.value==menu_text) {
document.forms[0].equipo2.value=document.forms[0].equipo3.value;
document.forms[0].Equipo2.value=document.forms[0].Equipo3.value;
document.forms[0].equipo3.value=document.forms[0].equipo4.value;
document.forms[0].Equipo3.value=document.forms[0].Equipo4.value;
document.forms[0].equipo.value='';
document.forms[0].Equipo4.value='';
n=(n-2);
}
else if (n==5 && document.forms[0].equipo3.value==menu_text) {
document.forms[0].equipo3.value=document.forms[0].equipo4.value;
document.forms[0].Equipo3.value=document.forms[0].Equipo4.value;
document.forms[0].equipo.value='';
document.forms[0].Equipo4.value='';
n=(n-2);
}
else if (n==5 && document.forms[0].equipo4.value==menu_text) {
document.forms[0].equipo4.value='';
document.forms[0].Equipo4.value='';
n=(n-2);
}
else alert('sólo puede seleccionar 4 equipos como máximo');
n=(3)
}
}
document.forms[0].menu.selectedIndex=0;
}
function comboMenu(form) {
var myindex=document.forms[0].menu.selectedIndex;
if (myindex==0) {
document.forms[0].menu.focus();
}
else {
menu_text=document.forms[0].menu.options[myindex].text;
menu_selection=document.forms[0].menu.options[myindex].value;
return true;
}
}
</script>
En esta función vamos comprobando desde la segunda selección del usuario si la opción elegida estaba ya
en la lista, en cuyo caso la eleiminamos de la misma, y para que no queden lugares vacíos, a partir del que
hemos eliminado vamos corriendo todos los demás una posición a la izquierda, tanto en las cajas de texto
visibles como en los campos hidden ocultos. Para ir controlando qué posición es la actual creamos una
variable contador "n", que se declara con valor 0 y se va aumentando cada ves que el usuario hace una
nueva elección, y al final de cada comprobación se disminuye en 2 unidades, para mantenerlo al día
DGH Informática y Logística
- 40 -
Manual de JavaScript
(piensa porqué...). Por último, si el usuario ha elejido ya 4 opciones e intenta hacer otra, le mandamos un
alert indicándole que ya no puede hacerlo.
Una vez implementada la función, nos falta llamarla, y esto vamos a hecerlo con el evento onChange del
combo:
<select name=..... onChange="combo()">
pero...?, y si el usuario vuelve a elegir la opción anterior, que ya está en las cajas de texto?. En este caso
no se produciría un cambio, y no se escribiría nada. Pero para hacer la función estable por todos lados, lo
que hecemos es introducir en la función una línea que lo que hace es que cada vez que se pincha el combo
lo volvemos a poner en su primera opción, la que dice "selecciona 4 equipos", y así siempre tendremos
controlado cuando se pincha un equipo. Estoa línea de código es:
document.forms[0].menu.selectedIndex=0;
que devuelve el foco a la primera opción cada vez que se pincha cambia la misma.
Una última consideración: si el usuario pincha el botón de borrado en algún momento tenemos que
igualar la variable contador a cero, para que el proceso empiece de nuevo. Esto lo logramos asignándole
este valor en el botón de borrado, que nos queda entonces:
<input type="button" value="borrar" onClick="document.forms[0].reset();n=0;">
EVENTOS EN JAVASCRIPT
FUNCIONAMIENTO
Los eventos son el mecanismo que usa el explorador para llamar y ejecutar las funciones incluidas en una
página HTML. Tanto Netscape como Microsoft incluyen este objeto en sus navegadores, si bien lo hacen
de manera bastante diferente uno del otro, siendo Internet Explorer el que permite un mayor
aprovechamiento y posibilidades de programación. Con DHTML todos los elementos de la página web
pueden tener asociado uno o mas eventos. Existe un grupo de eventos que son disparados por las acciones
del usuario como mover el ratón, pulsar una tecla, picar una opción del menú, etc. También existe otro
grupo de eventos que responden a las acciones del navegador como son el l finalizar de cargar una página,
o cuando se va a salir de ella o al terminar de cargar una imagen o cuando se produce un error de
ejecución del código. Por último existe un par de eventos bastante imprescindibles para la realización de
efectos animados en las páginas, son los eventos temporizados, eventos asociados al reloj del sistema que
nos permite ejecutar una determinada acción de manera repetida cada cierto intervalo de tiempo.
A la hora de vincular eventos a los objetos HTML de una página hemos de conocer ciertos principios
previos. En primer lugar los elementos de la página disparan los eventos independientemente de que
nosotros le asignemos una función manejadora, es decir, cada evento posee un manejador
predeterminado, así cuando picamos sobre un enlace el navegador lee el atributo href y nos lleva a la
página apuntada por él, algo parecido ocurre con los botones Submit de los formularios. Otras veces ese
comportamiento por defecto no hace absolutamente nada. Pero hemos de tener esto en cuenta y si
queremos que esa acción predeterminada no se ejecute lo habitual es seguir el manejador del evento con
la sentencia return false, o asignar el valor false a la propiedad returnValue del evento, aunque este
método sólo vale para IE.
Otra cosa a tener muy en cuenta es la promoción de eventos. Este es un efecto que se observa cuando se
produce un evento en un elemento anidado dentro de otro, al producirse un evento en el objeto interno
este evento asciende al elemento contenedor hasta llegar al elemento superior de este jerarquía. Por
ejemplo:
<p id="Externo" onmouseover="alert(this.id)">
Y aquí el elemento anidado
<span id="interno" onmouseover="alert(this.id)">
<b>elemento interno</b></span>eso está fuera</p>
Y aquí el elemento anidado elemento interno eso está fuera
Esta un elemento span anidado en un párrafo, si pasamos el ratón sobre el span el evento onmouseover
del ratón actúa en primer lugar en el span, mostrando una ventana con su identificador (Interno), pero
luego asciende hasta el elemento P provocando la acción vinculada en éste, mostrar una ventana con su
identficador (Externo). A veces esto viene bien y otras provoca efectos indeseados. Para cortar esta
ascensión del evento se asigna el valor true a la propiedad event.cancelBubble.
DGH Informática y Logística
- 41 -
Manual de JavaScript
VINCULANDO EVENTOS
La vinculación de eventos no es mas que asignar una función escrita en javascript a un evento concreto,
de manera que cuando se dispare éste la función entre en funcionamiento. Estas funciones se definirán en
alguna parte de la página o en un archivo ligado a ella. La vinculación de eventos puede realizarse en
línea dentro del código HTML de la página, asignando al nombre del evento una cadena con el nombre de
la función, como en el ejemplo:
<img src="bola.gif" onmouseover = "ctrlEv()">
En el ejemplo ctrlEv( ) es la función que reaccionará cuando el ratón pase sobre la imagen, o sea, cuando
se produzca el evento onmouseover sobre la imagen. La función puede llevar argumentos definidos por
nosotros, existiendo un argumento especial que señala al objeto sobre el que se produce el evento, se trata
del objeto this. Si usamos este parámetro al llamar a la función ésta lo trata como el elemento donde se ha
disparado el evento.
Otra forma de vincular funciones controladoras es mediante código Javascript. En este caso lo que
hacemos es tratar el evento como una propiedad del objeto HTML y asignarle directamente una instancia
de la función:
document.images[0].onmouseover=new Function("ctrlEv( )")
o asignándole un puntero a la función
document.images[0].onmouseover = ctrlEv;
En el segundo caso asignamos una instancia de la función, si le pasamos el argumento this la función lo
tomaría como el objeto que dispara el evento. En el tercer caso sin embargo lo que asignamos al evento es
un puntero a la función, o sea, la direción de memoria donde se aloja la función, sin parámetros. En este
caso el puntero this se asigna automáticamente y dentro del cuerpo de la función this equivale al objeto
que dispara el evento sin necesidad de argumentos.
Si se desea evitar que se ejecute el controlador por defecto de un evento pueden seguirse dos métodos:
Asignar false a la propiedad event.returnValue dentro de la rutina manejador adel evento,
Incluir en la asignación la sentencia return false, esta sentencia irá tras el nombre de la función vinculada.
Este último sistema es compatible con Netscape y por tanto recomendable. Por ejemplo en un enlace el
controlador por defecto del evento click es llevar el navegador a la dirección indicada en el argumento
href, pero podemos evitar esto:
<a href="destino.htm" onclick="alert('Mensaje de aviso'); return false">
Pulsa aquí
</a>
Al pulsar sobre el enlace no irá a la página destino.htm sino que abrirá una ventana de aviso. Esto puede
ser útil si, en lugar de la ventana de aviso, usamos una función que, por ejemplo, de un valor al enlace
dependiente de la hora del día o del usuario.
DGH Informática y Logística
- 42 -