Curso de JavaScript

El curso de JavaScript de El Cdigo es un curso introductorio que abarca los aspectos bsicos del lenguaje. Est pensado para personas que ya poseen conocimientos de programacin, sin detallar ni explicar conceptos comunes a todos los lenguajes (como variable, array, funcin, etc.).

ndice de captulos
Captulo 1: Introduccin 1. Qu es JavaScript? 2. El problema de las versiones 3. Cmo introducir un script en el cdigo HTML? Captulo 2: Fundamentos de JavaScript[revisado 25/03/2006] 1. 2. 3. 4. 5. Introduccin de cdigo JavaScript en las pginas Comentarios en JavaScript Inclusin de ficheros externos con cdigo JavaScript Escritura de cadenas de texto en la pgina Cuadros de dilogo

Captulo 3: Trabajando con datos e informacin 1. 2. 3. 4. 5. 6. 7. 8. Tipos de datos Declaracin de variables Operadores binarios Operadores unarios Operadores lgicos Operadores de comparacin Operadores condicionales Comparaciones: sentencia if ... else

Captulo 4: Funciones y objetos 1. 2. 3. 4. Definicin de una funcin Funciones recursivas Creacin de objetos Arrays asociativos

Captulo 5: Eventos en JavaScript 1. Eventos en JavaScript 2. Mtodos de evento disponibles en JavaScript 3. Eventos onLoad y onUnload

4. Ejemplo de aplicacin en formularios Captulo 6: Creacin de formularios interactivos 1. 2. 3. 4. Acceso a los formularios de una pgina Acceso a los elementos de un formularios Mtodos, propiedades y eventos de los elementos de un formulario Ejemplo final: calculadora

Captulo 1: Introduccin a JavaScript

El presente tutorial no pretende ser una descripcin extensa de los fundamentos de la programacin de scripts de cliente con JavaScript. Intentaremos en estas pginas introducir los conceptos bsicos que permitan utilizar los scripts de los ejemplos de {El Cdigo}, interpretarlos adecuadamente y realizar las modificaciones necesarias para adaptarlos a vuestras necesidades. 1. Qu es JavaScript? 2. El problema de las versiones 3. Cmo introducir un script en el codigo HTML?

1. Qu es JavaScript?
JavaScript es un lenguaje de scripts desarrollado por Netscape para incrementar las funcionalidades del lenguaje HTML. Sus caractersticas ms importantes son: JavaScript es un lenguaje interpretado, es decir, no require compilacin. El navegador del usuario se encarga de interpretar las sentencias JavaScript contenidas en una pgina HTML y ejecutarlas adecuadamente. JavaScript es un lenguaje orientado a eventos. Cuando un usuario pincha sobre un enlace o mueve el puntero sobre una imagen se produce un evento. Mediante JavaScript se pueden desarrollar scripts que ejecuten acciones en respuesta a estos eventos. JavaScript es un lenguaje orientado a objetos. El modelo de objetos de JavaScript est reducido y simplificado, pero incluye los elementos necesarios para que los scripts puedan acceder a la informacin de una pgina y puedan actuar sobre la interfaz del navegador.

2. El problema de las versiones

JavaScript fue desarrollado por Netscape, y la primera versin, la 1.0, fue introducida por primera vez en su navegador Netscape Navigator 2. JavaScript 1.1 represent una mejora en las caractersticas del lenguaje, y se incluy en el Navigator 3.

Microsoft intent dar soporte a la primera versin de JavaScript en el Internet Explorer 3 (con el nombre de JScript). Sin embargo, Jscript result poco fiable y estaba plagado de bugs. El organismo de estandarizacin ECMA impuls la creacin de un estndar para normalizar la sintaxis del lenguaje JavaScript. El esfuerzo se concret en el estndar ECMA-262, que Microsoft introdujo en el Internet Explorer 4. El ECMA-262 se bas en la versin 1.2 de JavaScript, introducida con el Navigator 4, por lo que comparta la mayora de las caractersticas de ste, aunque sin ser totalmente compatible. Las ltimas versiones del Navigator (a partir de la 4.06) implementaron una nueva versin de JavaScript, la 1.3, totalmente compatible con la especificacin ECMA-262. Desde entonces, la batalla de los navegadores ha dado un vuelco radical. La mayora de los navegadores modernos (versiones 6 y 7 del IE, Opera y Netscape, y los nuevos navegadores Mozilla y Firefox) soportan la versin 1.5 de JavaScript, la ltima publicada. En el apartado Compatibilidad entre versiones del curso de JavaScript Avanzado se muestra una tabla con las diferentes versiones de JavaScript, y los navegadores que las implementan.

3. Cmo introducir JavaScript en el cdigo HTML?

Bsicamente existen dos formas de introducir un script de JavaScript en una pgina HTML: Embebido en el cdigo HTML, entre las etiquetas o tags <script> y </script>. El siguiente cdigo muestra un ejemplo de cdigo JavaScript embebido en el HTML de una pgina. Como se observa, el cdigo JavaScript figura entre las marcas de comentario HTML <!-- y -->, para que los navegadores antiguos (que no soportan las etiquetas script) no muestren el cdigo fuente en la pgina. Adems, delante de la marca de cierre de comentario HTML se insertan los caracteres //, que en JavaScript significan ignorar el resto de la lnea, para que el intrprete JavaScript no d error por la lnea --> de comentario HTML. <HTML> <HEAD> <TITLE>Introduccin a JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-function saludo() { window.alert('Bienvenido a JavaScript!') } //-->

</SCRIPT> </HEAD> <BODY onLoad="saludo()"> </BODY> </HTML> Como archivo .js que se carga con la pgina HTML. Para ello, debe indicarse en las tags anteriores el nombre y ubicacin del archivo .js que contiene el script JavaScript, como en este ejemplo: <HTML> <HEAD> <TITLE>Tutorial de JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="codigo.js"></SCRIPT> </HEAD> <BODY> </BODY> </HTML>

Captulo 2: Fundamentos de JavaScript

1. 2. 3. 4. 5. Introduccin de cdigo JavaScript en las pginas Comentarios en JavaScript Inclusin de ficheros externos con cdigo JavaScript Escritura de cadenas de texto en la pgina Cuadros de dilogo

1. Introduccin de cdigo JavaScript en las pginas

Para introducir cdigo JavaScript en una pgina HTML, debe incluirse el siguiente cdigo (normalmente, entre las etiquetas <head> y </head> de la pgina, aunque tabin puede ir en el cuerpo de la misma): <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-Programa JavaScript //--> </SCRIPT> Las lneas 2 y 4 se introducen para evitar que se generen errores en navegadores que no soporten JavaScript y para que estos navegadores no muestren el cdigo del script en la pgina.

2. Comentarios en JavaScript
Los comentarios se utilizan en todos los lenguajes de programacin para aadir explicaciones al cdigo. Cuando el intrprete de comandos (o compilador, segn el caso) encuentra estas lneas, las ignora. En JavaScript se utiliza el formato de comentarios propio de C/C++. As, si es para comentar una lnea: // comentario de una lnea Si el comentario ocupa varias lneas, se usan los carcteres /* (inicio de comentario) y */ (fin de comentario): /* comentario de varias lneas */ Los bloques de cdigo que integran una unidad son encerrados entre los caracteres { y } (por ejemplo, el cdigo de una funcin, o las sentencias incluidas dentro de un bucle). Por otra parte, JavaScript hace diferencia entre maysculas y minsculas para los nombres de variables y funciones.

3. Inclusin de ficheros externos con cdigo JavaScript

Los scripts que queramos utilizar en una pgina suelen escribirse en la misma pgina, normalmente entre las etiquetas <head> y </head>. Determinados scripts pueden aparecer entre las etiquetas <body> y </body> (por ejemplo, gestores de eventos, o scripts que escriben cdigo on-line), pero lo normal es que la mayora de las funciones estn en la cabecera de la pgina. Otra posibilidad es la inclusin del cdigo JavaScript en ficheros externos, de extensin .js. Estos ficheros son enlazados desde la pgina HTML donde se utilizan con este cdigo (que deber ir tambin entre <head> y </head>): <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="fichero.js"></SCRIPT> Este cdigo es ignorado automticamente por los navegadores que no soportan JavaScript. Por otra parte, esta forma de enlazar con ficheros externos con cdigo JavaScript no est soportada por las versin 2 del Netscape Navigator (aunque teniendo en cuenta la antiguedad de este navegador, este hecho no es de gran relevancia, salvo que exista una necesidad expresa de soportar el Navigator 2).

4. Escritura de cadenas de texto en la pgina

Las cadenas de texto en JavaScript pueden ir entre comillas dobles o simples indistintamente. Lo nico que hay que tener en cuenta es utilizar el mismo tipo de comillas en la apertura y cierre de la cadena de texto. Por ejemplo, para escribir la palabra Texto en una pgina, podemos utilizar indistintamente document.write("Texto") o bien document.write('Texto') Cuando una cadena de texto que va entre comillas dobles contiene el propio caracter de comillas dobles, ste deber ir precedido de \, que en JavaScript se utiliza como caracter de escape (igual que en otros muchos lenguajes). Por ejemplo, para escribir la cadena Caracter ", tendramos que usar:

document.write("Caracter \"") La posibilidad de utilizar comillas simples o dobles para definir candenas de texto es muy til cuando se usa JavaScript para escribir cdigo HTML. En el lenguaje HTML, los valores de los atributos deben ir entre comillas dobles. La cadena de texto JavaScript podr ir entre comillas simples, y contener las comillas dobles, sin necesidad de preceder las comillas dobles del caracter de escape. Por ejemplo: document.write('<IMG SRC="imagen.gif">') Para escribir la cadena Texto ms un retorno de carro podemos usar document.writeln("Texto") o bien document.write("Texto\n") El \n que aparece al final de la cadena del segundo ejemplo es un cdigo especial que indica retorno de carro. Este cdigo sirve para generar el caracter no imprimible de retorno de carro. Otros caracteres no imprimibles que pueden utilizarse son:
Caracter \n \t \r \f \b Nueva lnea Tabulador Retorno de carro Alimentacin de formulario Retroceso de un espacio Significado

Ejemplo: <HTML> <HEAD> <TITLE>Ejemplo 2.1: escritura de cadenas de texto</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.write('<IMG SRC="imagen.gif">') document.write("<BR><H1>Bienvenido a JavaScript</H1>")

//--> </SCRIPT> </BODY> </HTML> Como el nombre de la imagen lleva comillas dobles, el texto pasado al mtodo write lleva comillas simples.

5. Cuadros de dilogo
La manera ms sencilla consiste en utilizar el mtodo alert() del objeto window: alert("Texto") Por ejemplo: alert("Bienvenido!\n\tEsta Web est dedicada a JavaScript.") Este tipo de ventanas de dilogo muestra un botn de aceptar, normalmente con el nombre Aceptar, que el usuario deber pulsar para continuar. Para ver el resultado del ejemplo anterior, pulsa sobre el siguiente botn: Existen otros tipos de ventanas de dilogo que interactan con el usuario. El mtodo prompt() del objeto window muestra una caja de texto en la que el usuario puede introducir contenidos. Tambin muestra dos botones, Aceptar y Cancelar. Ejemplo: prompt("Su color favorito es: ","Azul") Para verlo en accin pulsa sobre este botn: El segundo parmetro es el valor predeterminado para la caja de texto, que el usuario podr modificar. Este cuadro de dilogo permite capturar datos introducidos por el usuario y realizar una accin en base a ellos. Por ejemplo, podemos pedirle al usuario que introduzca su nombre, y despues mostrarlo: <HTML> <HEAD> <TITLE>Ejemplo 2.2: pgina que pide el nombre</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!--

var nombre = prompt("Introduzca su nombre:","") document.write("<H2>Bienvendio, " + nombre + "</H2>") //--> </SCRIPT> <P>Aqu va el resto de la pgina...</P> </BODY> </HTML> La pgina de este ejemplo puedes verla siguiendo este enlace: Ejemplo 2.2: pgina que pide el nombre Si analizamos el ejemplo anterior, vemos que se ha definido una variable cuyo identificador es nombre. El concepto de variable y cmo se definen se explica ms detalladamente en el Captulo 3: Trabajando con datos e informacin. Finalmente, para pedir al usuario confirmacin en la realizacin de una accin podemos usar el mtodo confirm() del objeto window. Este mtodo mostrar un cuadro de dilogo con el mensaje de texto que le pasemos como parmetro, y dos botones, Aceptar y Cancelar: confirm("Desea volver al inicio de la pgina?") Este mtodo devuelve verdadero (true) si se pulsa Aceptar y falso (false) si se pulsa Cancelar. Podemos ver un ejemplo de este cuadro de dilogo: Veamos ahora un ejemplo completo que utiliza este cuadro de dilogo: <HTML> <HEAD> <TITLE>Ejemplo 2.3: pgina que pide confirmacin</TITLE> </HEAD> <BODY> <H1>Pgina sobre sellos</H1> <SCRIPT LANGUAGE="JavaScript"> <!-var entrar = confirm("De verdad desea entrar en esta\npagina?") if ( !entrar ) self.close() //--> </SCRIPT> <P>Aqu va el resto de la pgina...</P> </BODY> </HTML>

Este ejemplo pide confirmacin para cargar el resto de la pgina. Si se elige la opcin Cancelar, se cierra la ventana (el navegador mostrar un cuadro de dilogo de confirmacin). Si se pulsa Aceptar, se muestra el resto de la pgina. La sentencia if() que aparece en este ejemplo se explica en el Captulo 3: Trabajando con datos e informacin. He aqu el resultado: Ejemplo 2.3: pgina que pide confirmacin

Captulo 3: Trabajando con datos e informacin

1. 2. 3. 4. 5. 6. 7. Tipos de datos Declaracin de variables Operadores aritmticos Operadores lgicos Operadores de comparacin Operadores condicionales Comparaciones: sentencia if ... else

1. Tipos de datos
Los scripts que utilicemos en nuestras pginas HTML manejarn datos y valores para producir resultados. En todo lenguaje de programacin existen unos tipos estndar que definen el rango de valores que puede tomar cada dato. As, un dato del tipo numrico tomar valores numricos, y no podr ser una cadena de texto. En JavaScript un dato puede ser de uno de los siguientes tipos:
Tipo Nmero Cadena Booleano Objeto Funcin NULL Palabra clave para indicar ningn valor Ejemplo Cualquier nmero, como 12, 22.5 o 2e8 "Hola" u 'Hola' Verdadero (true) o falso (false) Ver Captulo 4: Funciones y objetos

Los nmeros enteros pueden encontrarse en diferentes bases: Decimal (base 10): cualquier entero que no empiece por 0 estar representado en base 10. Octal (base 8): si el entero se escribe empezando con el dgito 0, estar en base 8. Hexadecimal (base 16): para indicar nmero en hexadecimal, hay que anteponerlo con 0x o 0X (por ejemplo 0x1A). En JavaScript, la cadena vaca "" es diferente de null.

2. Declaracin de variables
Los datos maneja nuestro programa se almacenan en variables. El concepto de variable debe verse como un contenedor de informacin. var nombre_variable nombre_variable = "valor" La primera lnea es la declaracin de la variable. La siguiente lnea le asigna un valor. Por ejemplo, si queremos guardar el resultado de una suma, podemos definir una variable de nombre resultado y asignarle el valor de la suma. var resultado resultado = 10 + 10 La variable resultado contiene ahora el valor 20. Para referirnos a ella, utilizamos su nombre. Como se observa, en JavaScript no es necesario indicar de qu tipo es una variable en el memento de su definicin. El tipo del dato queda definido en el momento en que se asigna un valor a la variable. Por otra parte, podemos realizar la asignacin del valor de la variable en el momento de su declaracin, del siguiente modo: var resultado = 10 + 10 Aunque en JavaScript no es estrictamente necesario declarar una variable antes de utilizarla, la declaracin mediante el uso de la palabra reservada var es siempre recomendable, por claridad. El nombre de una variable puede empezar por una letra o por el carcter _. Despus ya pueden ponerse nmeros. Los nombres de variables son sensibles a maysculas y minsculas. Ejemplo: <HTML> <HEAD><TITLE>Ejemplo 3.1: uso de una variable</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var name = prompt("Introduce tu nombre:","Nombre") //--> </SCRIPT></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript">

<!-document.write('<IMG SRC="welcome.gif">') document.write("<H1>Hola " + name + ". Bienvenido a mi pgina!</H1>") //--> </SCRIPT></BODY></HTML> En este ejemplo se ha utilizado la variable nombre para guardar el nombre del usuario, de forma similar a como se hace en el ejemplo 2.2 del captulo anterior.

3. Operadores aritmticos
En todo lenguaje de programacin existen un conjunto de operadores que permiten realizar operaciones con los datos. Nos referimos a operaciones aritmticas, comparaciones, operaciones lgicas y otras operaciones (por ejemplo, concatenacin de cadenas, bsqueda de patrones, etc.). En JavaScript existen los siguientes operadores aritmticos: 3.1. Binarios
Operador = Descripcin Asigna el valor del operando de la izquierda al operando de la derecha Suma el operando de la izquierda al de la derecha y asigna el resultado al operando de la derecha Resta al operando de la izquierda el de la derecha y asigna el valor al operando de la derecha Multiplica el operando de la derecha por el de la izquierda y asigna el valor al operando de la derecha Divide el operando de la izquierda por el de la derecha y asigna el valor al operando de la derecha Divide el operando de la izquierda por el de la derecha y asigna el valor del resto de la divisin al operando de la derecha

+=

-=

*=

/=

%=

3.2. Unarios
Operador ++x Descripcin Incrementa x en una unidad y devuelve el valor Ddevuelve el valor de x y lo deja incrementado en una unidad Devuelve x negado

x++

-x

4. Operadores lgicos
Los operadores lgicos son los operadores del lgebra de Bull o booleanos.
Operador && Descripcin Y lgico (devuelve verdadero si los dos operandos son verdaderos, y falso en caso contrario) O lgico (devuelve verdadero si uno de los dos operandos o ambos son verdaderos, y falso en caso contrario) No lgico (devuelve verdadero si el operando es falso, y falso si es verdadero)

||

6. Operadores de comparacin
Los operadores de comparacin devuelven siempre verdadero (true) o falso (false). Este tipo de operadores se utilizan con gran frecuencia en todos los lenguajes de programacin, para realizar una accin u otra en funcin de que cierta condicin sea verdadera o falsa.
Operador == Descripcin Devuelve verdadero si los dos operandos son iguales Devuelve verdadero si los dos operadores son distintos Devuelve verdadero si el primer operando es mayor que el segundo Devuelve verdadero si el primer operando es

!=

>

<

menor que el segundo >= Devuelve verdadero si el primer operando es mayor o igual que el segundo Devuelve verdadero si el primer operando es menor o igual que el segundo

<=

7. Operadores condicionales
El operador ? es un operador especial en JavaScript (heredado de C++). Veamos un ejemplo: (condicion) ? valor1 : valor2 Si la condicin es verdadera, la expresin toma el valor 1 y si es falsa el valor 2. Por ejemplo: (dia=="Domingo") ? "Festivo" : "Laborable" Ejemplo: <HTML> <HEAD><TITLE>Ejemplo operadores</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var pregunta = "Cunto vale 10 + 10?" var respuesta_correcta = 20 var correcto = "<p>CORRECTO!</p>" var incorrecto = "<p>INCORRECTO</p>" //realiza la pregunta var respuesta_dada = prompt(pregunta, "0") //comprueba la respuesta var salida = (respuesta_dada == respuesta_correcta) ? correcto : incorrecto //--> </SCRIPT></HEAD> <BODY><SCRIPT LANGUAGE="JavaScript"> <!-//escribe la salida document.write(salida) //--> </SCRIPT></BODY></HTML>

8. Comparaciones: sentencia if ... else

Las comparaciones se realizan utilizando la sentencia if ... else. Su sintaxis es la siguiente: if (condicion) sentencia unica if (condicion) { varias sentencias } if (condicion) { varias sentencias } else { varias sentencias2 } Las sentencias if ... else pueden anidarse. En el siguiente script podemos ver un ejemplo de sentencia if ... else. <HTML> <HEAD><TITLE>Ejemplo sentencia if ... else</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-//definicion de variables var pregunta = "Cunto vale 10 + 10?" var respuesta_correcta = 20 var correcto = "<p>Correcto!</p>" var incorrecto = "<p>Incorrecto!</p>" //realiza la pregunta var respuesta_dada = prompt(pregunta, "0"); //comprueba la respuesta if (respuesta_dada != respuesta_correcta) { //respuesta incorrecta, segunda oportunidad if ( confirm("No! Pulsa OK para reintentarlo.")) respuesta_dada = prompt(pregunta, "0") } //comprueba la respuesta var salida = (respuesta_dada == respuesta_correcta) ? correcto : incorrecto //--> </SCRIPT></HEAD> <BODY><SCRIPT LANGUAGE="JavaScript">

<!-//escribe la salida document.write(salida) //--> </SCRIPT></BODY></HTML>

Captulo 4: Funciones y objetos

1. 2. 3. 4. Definicin de una funcin Funciones recursivas Creacin de objetos Arrays asociativos

1. Definicin de una funcin

function nombre_funcion(argumentos) { bloque de comandos } El nombre de la funcin es sensible a maysculas y minsculas. Puede incluir el caracter "_" y empezar con una letra. Ejemplo: function ImprimeNombre(nombre) { document.write("<HR>Tu nombre es <B><I>") document.write(nombre) document.write("</B></I><HR>") } La variable nombre slo existe dentro de la funcin y lo mismo pasa para cualquier variable declarada dentro de la funcin. Las funciones pueden devolver un valor. Para ello: function cubo(numero) { var cubo = numero * numero * numero return cubo } Tambin podra haber sido return numero * numero * numero La funcin eval() evala un string devolviendo un valor numrico. Por ejemplo, eval("10*10") devolver el valor 100. Ejemplo: <HTML> <HEAD><TITLE>Preguntador</TITLE> <SCRIPT LANGUAGE="JavaScript">

<!-//DEFINICION DE LA FUNCION HazPregunta() function HazPregunta(pregunta) { //VARIABLES LOCALES var solucion = eval(pregunta) var salida = "Que da " + pregunta + "?" var correcto='<IMG SRC="correcto.gif">' var incorrecto='<IMG SRC="incorrecto.gif">' //REALIZA LA PREGUNTA var respuesta = prompt(salida,"0") //COMPRUEBA EL RESULTADO return (respuesta == solucion) ? correcto : incorrecto } //--> </SCRIPT></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-//EJECTUA LA FUNCION HazPregunta var resultado = HazPregunta("10 + 10") document.write(resultado) //--> </SCRIPT> </BODY></HTML>

2. Funciones recursivas
Son las que se llaman a s mismas. Un ejemplo tpico es el de la funcin que calcula el factorial de un nmero: function factorial(numero) { if (numero > 1) { return numero * factorial(numero - 1) } else { return numero } } Esta funcin se basa en que el factorial de un nmero x es igual x multiplicado por el factorial de x - 1: x! = x * (x - 1)! Veamos una modificacin del ejemplo anterior en la que la funcin HazPregunta es recursiva:

<HTML> <HEAD><TITLE>Preguntador</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-//DEFINICION DE LA FUNCION HazPregunta() function HazPregunta(pregunta) { //VARIABLES LOCALES var solucion = eval(pregunta) var salida = "Que da " + pregunta + "?" var correcto='<IMG SRC="correcto.gif">' var incorrecto='<IMG SRC="incorrecto.gif">' //REALIZA LA PREGUNTA var respuesta = prompt(salida,"0") //COMPRUEBA EL RESULTADO return (respuesta == solucion) ? correcto : HazPregunta(pregunta) } //--> </SCRIPT></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-//EJECTUA LA FUNCION HazPregunta var resultado = HazPregunta("10 + 10") document.write(resultado) //--> </SCRIPT> </BODY></HTML> Esta funcin puede crear problemas de memoria si el usuario nunca da la respuesta correcta. Una posible forma de evitar esto consiste en introducir un contador del nmero respuestas dadas por el usuario y compararlo con el nmero de oportunidades que tiene para responder a la pregunta. Para ms informacin sobre las funciones recursivas y sus ventajas e inconvenientes, vase nuestro captulo de Funciones recursivas, en la seccin de JavaScript avanzado.

3. Creacin de objetos
Para crear objetos, primero es necesario definir su tipo (o clase): function empleado(nombre, edad, puesto) { this.nombre = nombre this.edad = edad

this.puesto = puesto } En JavaScript, la partcula this se refiere al objeto en el que se utiliza. Una vez definida la clase, podemos crear variables (instanciar objetos) de esa clase de la siguiente manera: empleado_1 = new empleado("Pedro", 26, "Programador") Pueden aadirse propiedades a los objetos aunque estas no haya sido declaradas en la definicin de la clase. Por ejemplo: empleado_1.jefe = "Luis" Estas propiedades nuevas slo afectaran a ese objeto y no al resto. Los objetos pueden anidarse de forma que un objeto sea un a propiedad de otro objeto. Por ejemplo: function oficina(ciudad, pais) { this.ciudad = ciudad this.pais = pais } oficinaPedro = new oficina("Madrid","Espaa") empleado_1 = new empleado("Pedro", 26, "Programador", oficinaPedro) En el ejemplo anterior, hay que definir la clase empleado de esta forma: function empleado(nombre, edad, puesto, oficina) this.nombre = nombre this.edad = edad this.puesto = puesto this.oficina = oficina } Dentro de la definicin de la clase o tipo del objeto, pueden incluirse funciones que accedan a sus propiedades. Estas funciones reciben el nombre de mtodos. Un mtodo se define de la siguiente manera: function mostrarPerfil() { document.write("Nombre: " + this.nombre + "<BR>") document.write("Edad: " + this.edad + "<BR>") document.write("Puesto: " + this.puesto + "<BR>") }

function empleado(nombre, edad, puesto) { this.nombre = nombre this.edad = edad this.puesto = puesto this.mostrarPerfil = mostrarPerfil } As pueden mostrarse las propiedades del objeto empleado invocando el mtodo asociado: empleado_1.mostrarPerfil Ejemplo final: <HTML><HEAD><TITLE>Empleados</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-//DEFINE EL METODO muostrarPerfil function mostrarPerfil() { document.write("<H1>Perfil del empleado " + this.nombre + "</H1><HR><PRE>") document.writeln("Edad: " + this.edad) document.writeln("Puesto: " + this.puesto) document.write("</PRE>") } //DEFINE EL OBJECTO EMPLEADO function empleado() { this.nonmbre = prompt("Introduzca el nombre del empleado: ", "Nombre") this.edad = prompt("Introduzca la edad de " + this.nombre, "00") this.mostrarPerfil = mostrarPerfil } nuevoEmpleado = new empleado() //--> </SCRIPT> </HEAD><BODY><SCRIPT LANGUAGE="JavaScript"> <!-nuevoEmpleado.mostrarPerfil() //--> </SCRIPT> </BODY></HTML>

4. Arrays asociativos
En JavaScript las propiedades de un objeto y los arrays estn relacionados de la siguiente manera: empleado_1[0] = "Pedro" empleado_1[1] = 26 empleado_1[2] = "Programador" Y tambin se produce la siguiente equivalencia: empleado_2["nombre"] equivale a empleado_2[0] empleado_2["edad"] equivale a empleado_2[1] Vamos a ver un ejemplo para la creacin de un men de usuario: <HTML><HEAD><TITLE>Menu de usuario</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-//DEFINE METODO PARA VER LA INFORMACION function verInfo() { document.write("<H1>Perfil del empleado: " + this.nombre + "</H1><HR><PRE>") document.writeln("Numero de empleado: " + this.numero) document.writeln("Edad: " + this.edad) document.writeln("Puesto: " + this.puesto) document.write("</PRE>") } //DEFINE METODO PARA OBTENER LA INFORMACION function obtenerInfo() { var menu = "1. Salir/n2. Nombre/n3. Edad/n4. Puesto" var eleccion = prompt(menu, "0") if (eleccion != null) { if ((eleccion < 0) || (eleccion > 4)) { alert ("Eleccion incorrecta.") this.obtenerInfo() } else { if (eleccion != "0") { this[eleccion - 1] = prompt("Introduzca informacion","") this.obtenerInfo() } } } //DEFINE OBJETO

function empleado() { this.nombre = "" this.edad = 0 this.puesto = 0 this.verInfo = verInfo this.obtenerInfo = obtenerInfo } empleadoNuevo = new empleado() //--> </SCRIPT></HEAD> <BODY><SCRIPT LANGUAGE="JavaScript"> <!-empleadoNuevo.obtenerInfo() empleadoNuevo.verInfo() //--> </SCRIPT> </BODY></HTML>

Captulo 5: Eventos en JavaScript

1. 2. 3. 4. Eventos en JavaScript Mtodos de evento disponibles en JavaScript Eventos onLoad y onUnload Ejemplo de aplicacin en formularios

1. Eventos en JavaScript
En JavaScript, la interaccin con el usuario se consigue mediante la captura de los eventos que ste produce. Un evento es una accin del usuario ante la cual puede realizarse algn proceso (por ejemplo, el cambio del valor de un formulario, o la pulsacin de un enlace). Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos. La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, la versin a partir de la cual estn soportados y su significado.
Manejador onAbort 1.1 Versin Se produce cuando... El usuario interrumpe la carga de una imagen Un elemento de formulario, una ventana o un marco pierden el foco El valor de un campo de formulario cambia Se hace click en un objeto o formulario Se hace click doble en un objeto o formulario El usuario arrastra y suelta un objeto en la ventana La carga de un documento o imagen produce un error Una ventana, marco o elemento de formulario recibe el foco

onBlur

1.0

onChange

1.0 (1.1 para FileUpload) 1.0

onClick

onDblClick

1.2 (no en Mac)

onDragDrop

1.2

onError

1.1

onFocus

1.1 (1.2 para Layer)

onKeyDown onKeyPress

1.2 1.2

El usuario pulsa una tecla El usuario mantiene pulsada una tecla El usuario libera una tecla El navegador termina la carga de una ventana El usuario pulsa un botn del ratn El usuario mueve el puntero El puntero abando una rea o enlace El puntero entra en una rea o imagen El usuario libera un botn del ratn Se mueve una ventana o un marco El usuario limpia un formulario Se cambia el tamao de una ventana o marco Se selecciona el texto del campo texto o rea de texto de un formulario El usuario enva un formulario El usuario abandona una pgina

onKeyUp onLoad

1.2 1.0 (1.1 para image)

onMouseDown onMouseMove onMouseOut onMouseOver

1.2 1.2 1.1 1.0 (1.1 para area)

onMouseUp onMove onReset onResize

1.2 1.2 1.1 1.2

onSelect

1.0

onSubmit onUnload

1.0 1.0

Ejemplo de evento: <INPUT TYPE="text" onChange="CompruebaCampo(this)"> En este ejemplo, CompruebaCampo() es una funcin JavaScript definida en alguna parte del documento HTML (habitualmente en la cabecera del mismo). El identificador this es una palabra propia del lenguaje, y se refiere al objeto desde el cual se efectua la llamada a la funcin (en este caso, el campo del formulario). La siguiente tabla muestra los eventos que pueden utilizarse con los objetos del modelo de objetos JavaScript del Navigator.

Manejador de evento onAbort onBlur Image

Objetos para los que est definido

Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window FileUpload, Select, Text, Textarea Button, document, Checkbox, Link, Radio, Reset, Submit document, Link window Image, window Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window document, Image, Link, Textarea document, Image, Link, Textarea document, Image, Link, Textarea Image, Layer, window Button, document, Link Ninguno (debe asociarse a uno) Layer, Link Layer, Link Button, document, Link window Form window Text, Textarea Form

onChange onClick

onDblClick onDragDrop onError onFocus

onKeyDown onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onMove onReset onResize onSelect onSubmit

onUnload

window

2. Mtodos de evento disponibles en JavaScript

Los siguientes mtodos de evento pueden utilizarse en JavaScript:
Mtodos de evento blur() click() Funcin que realizan Elimina el foco del objeto desde el que se llame Simula la realizacin de un click sobre el objeto desde el que se llame Lleva el foco al objeto desde el que se llame Selecciona el rea de texto del campo desde el que se llame Realiza el envo del formulario desde el que se llame

focus() select()

submit()

Ejemplo: <HTML> <HEAD><TITLE>Eventos</TITLE> <SCRIPT> <!-function Reacciona(campo) { alert("Introduzca un valor!") campo.focus() } //--> </SCRIPT></HEAD> <BODY> <FORM METHOD=POST> <INPUT TYPE=text NAME=campo onFocus="Reacciona(this)"> </FORM> </BODY> </HTML>

3. Eventos onLoad y onUnload

Se usan como atributos del tag <BODY> de HTML. Ejemplo: <BODY onLoad="Hola()" onUnload="Adios()">

La funcin Hola() se ejecutar antes de que se cargue la pgina y la funcin Adios() al abandonarla. Ejemplo: <HTML> <HEAD> <TITLE>Ejemplo onLoad y onUnload</TITLE> </HEAD> <BODY onLoad="alert('Bienvenido a mi pgina!')" onUnload="alert('Vuelva pronto!')"> ... </BODY> </HTML> En este otro ejemplo se utilizan funciones: <HTML> <HEAD> <TITLE>Ejemplo con funciones</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var name = "" function Hola() { nombre = prompt('Introduzca su nombre:','') alert('Hola ' + nombre + '!') } function Adios() { alert('Adios ' + nombre + '!') } //--> </SCRIPT> </HEAD> <BODY onLoad="Hola()" onUnload="Adios()"> ... </BODY> </HTML>

4. Ejemplo de aplicacin en formularios

Vamos a ver un ejemplo para un campo de texto: <INPUT TYPE=text NAME="test" onBlur="alert('Gracias!')" onChange="Comprueba(this)">

En este ejemplo, simulamos una calculadora interactiva: <HTML> <HEAD><TITLE>Calculadora interactiva</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function Calcula(form) { form.resultados.value = eval(form.entrada.value) } function CogeExpresion(form) { form.entrada.blur() form.entrada.value = prompt("Introduce una expresin matemtica vlida en JavaScript","") Calcula(form) } //--> } //--> </SCRIPT></HEAD> <BODY> <FORM METHOD=POST> Calculadora interactiva: <INPUT TYPE=text NAME="entrada" VALUE="" onFocus="CogeExpresion(this.form)"> <BR>El resultado es:<INPUT TYPE=text NAME="resultados" VALUE="" onFocus="this.blur()"> </FORM> </BODY> </HTML>

Captulo 6: Creacin de formularios interactivos

1. Acceso a los formularios de una pgina 2. Acceso a los elementos de un formulario 3. Mtodos, propiedades y eventos de los elementos de un formulario 4. Ejemplo final: calculadora

1. Acceso a los formularios de una pagina

Los formularios y campos de formulario contenidos en una pgina pueden ser accedidos desde un script JavaScript. El array forms almacena un elemento por cada formulario que aparece en la pgina, en el orden en que estn en el cdigo fuente. De este modo, en el ejemplo siguiente <FORM METHOD=POST NAME="Formu"> para acceder al formulario, estas tres formas son equivalentes: document.forms[0] (primer formulario) document.forms["Formu"] document.Formu 1.1. Propiedades del objeto formulario
Propiedad action Descripcin Cadena que contiene el valor del atributo ACTION del tag FORM Array que contiene una entrada por cada elemento en el formulario (como campos de texto, listas de seleccin, botones,...) Cadena que contiene el tipo MIME utilizado para codificar los contenidos del formulario que se envan al servidor. Refleja el atributo ENCTYPE del tag FORM Cadena que contiene el valor del atributo NAME del tag FORM Cadena que contiene el nombre de la ventana objetivo del submit (ventana en la que se publican los resultados) Refleja el nmero de elementos del formulario

elements

encoding

name

target

length

method

Cadena que contiene el valor del atributo METHOD del tag FORM

1.2. Mtodos del objeto form

Mtodo handleEvent reset Descripcin Invoca el manejador del evento especificado Simula la pulsacin del botn del ratn sobre un botn de reset del formulario Enva el formulario

submit

Ejemplo: <HTML> <HEAD><TITLE>Ejemplo de metodo submit()</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function CompruebaValor(Formu) { if (Formu.respuesta.value == "100") Formu.submit() else Formu.respuesta.value = "" } //--> </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST onSubmit="alert('Respuesta correcta!'); return false"> Cunto vale 10 * 10? <INPUT TYPE="text" NAME="respuesta" onChange="CompruebaValor(this.form)"> </FORM> </BODY> </HTML> 1.3. Eventos de formulario
Evento onReset onSubmit Descripcin Captura la pulsacin del botn reset Captura la pulsacin del botn submit

2. Acceso a los elementos de un formulario

Para acceder a los elementos de un formulario desde un script, se utiliza el arrayelements. Este array contiene una entrada para cada objeto del formulario (button, checkbox, fileupload, hidden, password, radio, reset, select, submit, text, y textarea), en el orden en que aparecen el el cdigo fuente. Por ejemplo, si un formulario de nombre MiFormu tiene un campo de texto (text) y dos cuadros de seleccin (checkbox), podemos acceder a ellos con los elementos: MiFormu.elements[0] MiFormu.elements[1] MiFormu.elements[2] Otra posibilidad es utilizar el nombre del elemento al cual se desea acceder. As, si el campo de texto del ejemplo anterior se llama MiTexto, las siguientes opciones son equivalentes: MiFormu.elements[0] MiFormu.elements["MiTexto"] MiFormu.MiTexto Ejemplo: utilizacin del array elements en una tabla de multiplicar. <HTML> <HEAD> <TITLE>Tabla de multiplicar</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function Calcula(Formu) { var num = 1 var Numero = Formu.Numero.value Formu.elements[num].value = Numero * Formu.elements[num].value = Numero * Formu.elements[num].value = Numero * Formu.elements[num].value = Numero * Formu.elements[num].value = Numero * Formu.elements[num].value = Numero * Formu.elements[num].value = Numero * Formu.elements[num].value = Numero * Formu.elements[num].value = Numero * Formu.elements[num].value = Numero * } //-->

num++ num++ num++ num++ num++ num++ num++ num++ num++ num++

</SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> Number: <INPUT TYPE=text NAME="Numero" VALUE=1 onChange="Calcula(this.form);"><BR> x 1: <INPUT TYPE=text NAME="1" VALUE=1 onFocus="blur();"><BR> x 2: <INPUT TYPE=text NAME="2" VALUE=2 onFocus="blur();"><BR> x 3: <INPUT TYPE=text NAME="3" VALUE=3 onFocus="blur();"><BR> x 4: <INPUT TYPE=text NAME="4" VALUE=4 onFocus="blur();"><BR> x 5: <INPUT TYPE=text NAME="5" VALUE=5 onFocus="blur();"><BR> x 6: <INPUT TYPE=text NAME="6" VALUE=6 onFocus="blur();"><BR> x 7: <INPUT TYPE=text NAME="7" VALUE=7 onFocus="blur();"><BR> x 8: <INPUT TYPE=text NAME="8" VALUE=8 onFocus="blur();"><BR> x 9: <INPUT TYPE=text NAME="9" VALUE=9 onFocus="blur();"><BR> x 10: <INPUT TYPE=text NAME="10" VALUE=10 onFocus="this.blur();"><BR> <INPUT TYPE=button NAME="Calcula" VALUE="Calcula" onClick="Calcula(this.form);"> </FORM> </BODY> </HTML> La gran ventaja del array elements es la simplificacin del cdigo mediante la utilizacin de bucles y el acceso a los elementos del formulario mediante ndices. Por ejemplo, la funcin Calcula() del ejemplo anterior puede escribirse de la siguiente forma: function Calcula(Formu) { var Numero = Formu.Numero.value for(num = 1; num <= 10; num++) { Formu.elements[num].value = Numero * num } }

3. Mtodos, propiedades y eventos de los elementos de un formulario

Cada elemento de un formulario posee propiedades y mtodos que pueden utilizarse en los scripts para actuar sobre el formulario. A continuacin vamos a describir los ms importantes.

3.1. Cuadro de seleccin (checkbox)

Propiedad checked defaultChecked name Descripcin Indica el estado actual del cuadro de seleccin Indica el estado por defecto del elemento Indica el nombre del elemento tal y como est especificado en el tag INPUT Indica el valor el elemento tal y como est especificado en el tag INPUT Mtodo click() Evento onClick Descripcin Simula la pulsacin del botn del ratn sobre el cuadro de seleccin Descripcin Captura la pulsacin del botn del ratn sobre el cuadro de seleccin

value

3.2. Botn de seleccin (radio) Es similar al cuadro de seleccin (checkbox) con la diferencia de que varios elementos de este tipo pueden agruparse con un solo nombre de modo que slo uno de ellos podr estar seleccionado.
Propiedad checked defaultChecked name Descripcin Indica el estado actual del botn de seleccin Indica el estado por defecto del elemento Indica el nombre del elemento tal y como est especificado en el tag INPUT Indica el valor del elemento tal y como est especificado en el tag INPUT Indica el ndice del botn de seleccin actualmente seleccionado en el grupo Indica el nmero de botones de seleccin en el grupo Mtodo click() Descripcin Simula la pulsacin del botn del ratn sobre el botn de seleccin

value

index

length

Evento onClick

Descripcin Captura la pulsacin del botn del ratn sobre el botn de seleccin

Ejemplo: <HTML> <HEAD> <TITLE>Ejemplo de cuadro de seleccion (checkbox)</TITLE> <SCRIPT> <!-function Calcula(Formu, Campo) { if (Formu.BotonAccion[1].checked) { Formu.resultado.value = Math.sqrt(Formu.entrada.value) } else { Formu.resultado.value = Formu.entrada.value * Formu.entrada.value } } //--> </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> <P>Valor:<BR> <INPUT TYPE="text" NAME="entrada" VALUE=0 onChange="Calcula(this.form, this.name);"> <P>Accin:<BR> <INPUT TYPE="radio" NAME="BotonAccion" VALUE="cuadrado"> Al cuadrado<BR> <INPUT TYPE="radio" NAME="BotonAccion" VALUE="raiz2"> Raiz cuadrada<BR> <P>Resultado:<BR> <INPUT TYPE=text NAME="resultado" VALUE=0> </FORM> </BODY> </HTML>

3.3. Cuadro de texto (text)

Propiedad defaultValue Descripcin Indica el valor por defecto del elemento tal y como est especificado en el tag INPUT Indica el nombre del elemento tal y como est especificado en el tag INPUT Indica el valor actual del elemento Mtodo focus() Descripcin Da el foco al elemento (convierte el cuadro de texto en la zona activa actual) Quita el foco del elemento Selecciona el texto actual del cuadro de texto Descripcin Captura el cambio de valor del campo de texto Captura la recuperacin del foco por parte del cuadro de texto Captura la prdida del foco Captura la seleccin del texto

name

value

blur() select() Evento onChange onFocus

onBlur onSelect

3.4. Lista de seleccin (select)

Propiedad options Descripcin Array que contiene una entrada por cada elemento de la lista de seleccin Da el ndice de la opcin de la lista seleccionada actualmente Indica el valor del elemento n de la lista, tal y como est especificado en el tag OPTION Contiene la cadena de texto que representa la opcin n de la lista Indica si la opcin n est actualmente seleccionada

selectedIndex

options[n]. value options[n]. text options[n]. selected options[n].

Indica si la opcin n es la seleccionada por defecto

defaultSelected Mtodo focus() blur() Evento onChange onFocus Da el foco al elemento Quita el foco del elemento Descripcin Captura el cambio de seleccin en la lista Captura la recuperacin del foco por parte de la lista de seleccin Captura la prdida del foco Descripcin

onBlur

Como ejemplo, dado el siguiente cdigo HTML: <SELECT NAME="Ejemplo" onFocus="Ver()"> <OPTION SELECTED VALUE="Opcin 1">1 <OPTION VALUE="Opcin 2">2 <OPTION VALUE="Opcin 3">3 </SELECT> las propiedades de la lista de seleccin se acceden como se muestra, tomando los valores que aparecen a la derecha: Ejemplo.options[1].value = "Opcin 2" Ejemplo.options[2].text = "3" Ejemplo.selectedIndex = 0 Ejemplo.options[0].defaultSelected = true Ejemplo.options[1].selected = false 3.5. Area de texto (textarea) Posee las propiedades defaultValue, name y value, con el mismo significado que para el cuadro de texto. Los mtodos focus(), blur() y select() pueden utilizarse con este elemento, al igual que los eventos onFocus, onBlur y onSelect. 3.6. Botones submit y reset Los botones submit y reset poseen las propiedades name y value, puediendo utilizarse con ellos el mtodo click() y el evento onClick().

El botn submit posee un mtodo y un evento especficos: el mtodo submit() y el evento onSubmit. El mtodo submit() realiza el emisin del formulario (es equivalente a pulsar el botn submit). El evento onSubmit se produce cuando se enva el formulario, permitiento realizar operaciones con los datos del formulario antes de realizar el envo (por ejemplo, validacin de campos).

4. Ejemplo final: calculadora

<HTML> <HEAD> <TITLE>Calculadora</TITLE> <SCRIPT> <!-var total = 0 var UltimaOperacion = "+" var NuevoNumero = true function IntroduceNumero(Digito) { var Formu = Digito.form if (NuevoNumero) { BorraNumero(Formu) NuevoNumero = false } Formu.display.value = Formu.display.value + Digito.name } function Limpiar(Formu) { total = 0 UltimaOperacion = "+" Formu.display.value = "" } function BorraNumero(Formu) { Formu.display.value = "" } function Calcula(Operacion) { var Formu = Operacion.form var Expresion = total + UltimaOperacion + Formu.display.value UltimaOperacion = Operacion.value total = eval(Expresion) Formu.display.value = total NuevoNumero = true }

//--> </SCRIPT> </HEAD> <BODY> <FORM> <TABLE BORDER=1> <TR><TD COLSPAN=4><INPUT TYPE=text NAME=display VALUE="" onFocus="this.blur();"></TD></TR> <TR> <TD><INPUT TYPE=button NAME="7" VALUE=" 7 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="8" VALUE=" 8 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="9" VALUE=" 9 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="+" VALUE=" + " onClick="Calcula(this);"></TD></TR><TR> <TD><INPUT TYPE=button NAME="4" VALUE=" 4 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="5" VALUE=" 5 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="6" VALUE=" 6 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="-" VALUE=" - " onClick="Calcula(this);"></TD> </TR> <TR> <TD><INPUT TYPE=button NAME="1" VALUE=" 1 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="2" VALUE=" 2 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="3" VALUE=" 3 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="*" VALUE=" * " onClick="Calcula(this);"></TD></TR><TR> <TD><INPUT TYPE=button NAME="0" VALUE=" 0 " onClick="IntroduceNumero(this);"></TD> <TD><INPUT TYPE=button NAME="C" VALUE=" C " onClick="Limpiar(this.form);"></TD> <TD><INPUT TYPE=button NAME="CE" VALUE="CE" onClick="BorraNumero(this.form);"></TD> <TD><INPUT TYPE=button NAME="/" VALUE=" / " onClick="Calcula(this);"></TD> </TR> </TABLE> </FORM>

</BODY> </HTML> Obsrvese cmo se referencia un formulario a partir de un elemento del mismo: var Formu = Digito.form permite obtener el formulario que contiene el boton Digito.

http://www.elcodigo.net/cgibin/DBread.cgi?tabla=herramientas&campo=0&clave=49&info=1