Sintaxis del JavaScript El código JavaScript del que hablaremos en este manual va embebido en un documento HTML, y no tendremos en cuenta la reciente aparición de los scripts de servidor que pueden ir también codificados en JavaScript. Normalmente se escribe el código entre las etiquetas <SCRIPT> y de la página Web. Se recomienda que dicho código vaya incluido en la cabecera del documento, es decir, entre las etiquetas <HEAD> y </HEAD>. De esta manera, haremos que se cargue el script antes de ser llamado por el manejador de eventos en el cuerpo del documento, <BODY></BODY>, ya que si fuera al revés el manejador de eventos no tendría nada a qué referirse. Volvamos sobre el ejemplo de variables globales y locales para incluirlo ya en una página HTML capaz de ser visualizada por un browser. Las modificaciones aparecen en el siguiente ejemplo. <HTML> <HEAD> <TITLE>PRUEBA 1 </TITLE> <SCRIPT> var globalvar1=5; Function multiplica() { var localvar1=2 * globalvar1; alert("dos por cinco son= " + localvar1); </HEAD> <BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF" VLINK="#0000FF" ALINK="#0000FF" onload=multiplica()> <CENTER><H1> Esto es un ejemplo</h1></center> </BODY> </HTML> Pulsa aquí para ver cómo se vería esta página. Como se puede observar, hemos incluido, como se mencionó previamente, el código de script en sus etiquetas correspondientes y dentro de la cabecera del documento. Una vez dentro del cuerpo del documento, se ha incluido un manejador de eventos onload, que llama al script definido en la carga de la página, ejecutándolo. El script es una función que contiene un método, alert(), que despliega una ventana con el texto definido como argumento del método. A la hora de diseñar nuestras páginas y scripts se debe pensar también en los usuarios que no disponen de browsers capaces de tratar nuestros diseños. Por ello existe una etiqueta específica para estos últimos: <NOSCRIPT></NOSCRIPT>. El contenido de estas etiquetas es tratado por los browsers que no admiten scripts, mientras que no se interpreta por los que sí lo hacen. Para usar correctamente el JavaScript en un browser, es importante saber cómo funciona éste último a la hora de visualizar el diseño y la composición del texto plano modificado con códigos HTML. Esta composición a partir del diseño especificado se realiza
siempre secuencialmente, es decir, el browser comienza desde la primera línea de la página y continua descendiendo hasta el final de la misma. Por ello el JavaScript sólo refleja código que ya se haya encontrado. Por ejemplo, definamos en un formulario dos entradas de texto: <FORM NAME="formula"> <input type="text" name="usuario" size=20 > <input type="text" name="edad" size=3 > </FORM> A partir de su definición ambos elementos se pueden reflejar en JavaScript como los objetos document.formula.usuario y document.formula.edad respectivamente.sin embargo no se pueden usar si no están previamente definidos.por ejemplo, podemos visualizar sus valores mediante un script incluido después de la definición del formulario: <SCRIPT> document.write(document.formula.usuario.value) document.write(document.formula.edad.value) Sin embargo si lo ponemos antes no funcionará y aparecerá un error por no estar definido. Otro ejemplo: si hemos definido el título del documento como: <TITLE> PRUEBA DE JAVASCRIPT</TITLE> el browser visualiza en la barra de su ventana dicho título. Si intentamos ahora cambiar el valor del título: Document.title ="UNA NUEVA PRUEBA DE JAVASCRIPT" éste no cambiará, ni siquiera generará un error. Antes de centrarnos en partes internas de un documento, vamos a recordar cómo insertar scripts. Hay dos maneras distintas: Como sentencias de control y funciones usando las etiquetas <SCRIPT>. Como manejadores de eventos usando las demás etiquetas de HTML. Recordemos la opción <SCRIPT LANGUAGE="JavaScript> de especificación de lenguaje de código, y digamos que dentro de estas etiquetas puede ir un número indeterminado de instrucciones. Asimismo, ha de resaltarse que JavaScript es "case sensitive", es decir, hace distinción entre letras mayúsculas y letras minúsculas. Es importante entender la diferencia entre definir una función e invocar una función. Definirla le da nombre y especifica qué instrucciones ejecuta al ser llamada e invocarla hace que realmente ejecute las instrucciones.
Caso Práctico Para terminar este apartado vamos a estudiar un ejemplo que resume todo lo anteriormente explicado. Se trata de un script en un formulario con una llamada de manejador de eventos. El código lo podemos ver a continuación: <HTML> <HEAD> <TITLE>FORMULARIO 1</TITLE> function calcula(form){ if (confirm(" Está seguro?")) form.resultado.value=eval(form.expr.value); else alert("vuelva a intentarlo."); <NOSCRIPT> <META HTTP-EQUIV=REFRESH CONTENT=0;URL=pru1.htm> </NOSCRIPT> </HEAD> <BODY BGCOLOR="#00AA00" TEXT="#FFFFFF" LINK="#0000FF" VLINK="#0000FF" ALINK="#0000FF"> <CENTER><H1>Calculadora</H1> <BR><FORM> Introduzca expresión: <INPUT TYPE="text" NAME="expr" SIZE=15> <INPUT TYPE="button" VALUE="Calcular" onclick="calcula(this.form)"> <BR> Resultado: <INPUT TYPE="text" NAME "resultado" SIZE=15> <BR> </FORM></CENTER> </BODY> </HTML> Lo primero que nos encontramos es la definición en la cabecera de documento de la función calcula(form) que tiene como argumento el propio formulario. Las instrucciones que contiene se rigen por un bloque if - else que valora un método no visto hasta ahora confirm("cadena"): function calcula(form) { if (confirm(" Está seguro?")) form.resultado.value=eval(form.expr.value); else alert("vuelve a intentarlo."")
Lo que hace es sacar una ventana, como la que aparecía con el método alert("cadena") con la única diferencia que ofrece dos botones: uno de cancelación y otro de confirmación.la elección del usuario es lo que impone la condición del bloque if. En la línea if (confirm(" Está seguro?")) se controla si el usuario ha elegido Aceptar. En este caso el valor del cuadro de texto "resultado" del formulario definido en el cuerpo del fichero, toma el valor del resultado, valga la redundancia, de la expresión que haya sido introducida en el cuadro de texto "expr". Si el usuario elige el botón de cancelar, entramos en el else del bloque, haciendo que aparezca una ventana con el método alert(), diciendo "Vuelva a intentarlo". Observamos también una función nueva hasta ahora:eval("cadena").lo que hace esta función es transformar a valor numérico la expresión matemática introducida en la cadena. En nuestro caso la cadena viene dada por el contenido del cuadro de texto "expr". Hay que señalar que este script no valida la entrada de datos, por lo que si no introducimos una expresión susceptible de evaluación matemática, obtendremos un error. Programa JavaScript! 2. Comentarios en JavaScript " # $ %!& ' ( )*+)!,"- &.&//!0) // comentario de una línea
)/*( +*/(- + /* comentario de varias líneas */ 1 {!)1 * *! 3. Inclusión de ficheros externos con código JavaScript "1 ) <head></head>! 2 <body> </body>(# ) )1 +) - '1! 31-4 %) %!,-4" " ( 1 1'<head></head>+ <SCRIPT LANGUAGE="JavaScript" SRC="fichero.js">,!)- " -4%!% 55! 4. Escritura de cadenas de texto en la página 1 Texto document.write("texto") 1 Texto document.writeln("texto") &" %
6 6 6 5 1 7 6-0 - 61 7,# <HTML> <HEAD> <TITLE>Ejemplo 2.1: escritura de cadenas de texto</title> </HEAD> <BODY> document.write('<img SRC="imagen.gif">') document.write("<br><h1>bienvenido a JavaScript</H1>") </BODY> </HTML> & 1 1)% '! 5. Cuadros de diálogo " ' alert() 1#window alert("texto") # alert(" Bienvenido!\n\n\tEsta Web está dedicada a JavaScript."), 1 1! # )11,% *!, ' prompt() 1#window # %! 1' 1)!,#
prompt("su color favorito es: ","Azul") 11, # %) -!, " 1!# ) " 1) <HTML> <HEAD> <TITLE>Ejemplo 2.2: página que pide el nombre</title> </HEAD> <BODY> var nombre = prompt("introduzca su nombre:","") document.write("<h2>bienvendio, " + nombre + "</H2>") <P>Aquí va el resto de la página...</p> </BODY> </HTML> #,#! 1 " # ) 4-1 - nombre!, 1 -% &8 1# -! 9 ) - " ' confirm() 1#window!, ' # % ) 1) confirm(" Desea volver al inicio de la página?"), ' (+ - (+! # : 4# " <HTML> <HEAD> <TITLE>Ejemplo 2.3: página que pide confirmación</title> </HEAD>
<BODY> <H1>Página sobre sellos</h1> var entrar = confirm(" De verdad desea entrar en esta pagina?") if (!entrar ) self.close() <P>Aquí va el resto de la página...</p> </BODY> </HTML>,# -! )( - +! )!-(!!!+ %&81# -! Declaración de variables # 1!, 1 1 -! var nombre_variable nombre_variable = "valor" 1!!# ) ) -1 1resultado! var resultado resultado = 10 + 10 1resultado4;!- )" 1!& 1) '1 -!, - 1! ) " 1 ) var resultado = 10 + 10 0 1 ") 1 var 1)!
, 1 1 " _!2' *! 1 11 * *!,# <HTML> <HEAD><TITLE>Ejemplo 3.1: uso de una variable</title> var name = prompt("introduce tu nombre:","nombre") </HEAD> <BODY> document.write('<img SRC="welcome.gif">') document.write("<h1>hola " + name + ". Bienvenido a mi página!</h1>") </BODY></HTML>,# 4" 1nombre 1 ) - 4#!! 3. Operadores aritméticos, # %# "!5- ') ) (# ) )1* )!+!,% ' 3.1. Binarios = 0 " 4 += -= " 4 4 7 " 4 4
*= /= %= 4 " 4 2 " 4 4 2 " 4 4 3.2. Unarios ++x x++ -x < % 2 % # 2% 4. Operadores lógicos 1 = 1! && >( )- + 3( 1 )-+! 5( -)- +
6. Operadores de comparación (+ -(+!, "- # )" - -! ==!= 2 2 > 2 < 2 >= <= 2 2 7. Operadores condicionales,? (4 &//+!: # (condicion)? valor1 : valor2 )%?-!# (dia=="domingo")? "Festivo" : "Laborable",# <HTML> <HEAD><TITLE>Ejemplo operadores</title> var pregunta = " Cuánto 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 </HEAD> <BODY> //escribe la salida document.write(salida) </BODY></HTML> 8. Comparaciones: sentencia if... else "" if... else! % if (condicion) sentencia unica if (condicion) { varias sentencias if (condicion) { varias sentencias else { varias sentencias2 if... else!, # if... else! <HTML> <HEAD><TITLE>Ejemplo sentencia if... else</title> //definicion de variables var pregunta = " Cuánto 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 </HEAD> <BODY> //escribe la salida document.write(salida) </BODY></HTML> Definición de una función function nombre_funcion(argumentos) { bloque de comandos, 1-1 * *! @A@ "!,# function ImprimeNombre(nombre) { document.write("<hr>tu nombre es <B><I>") document.write(nombre) document.write("</b></i><hr>") 1 % - 1 -! -! function cubo(numero) { var cubo = numero * numero * numero return cubo 1' 41 return numero * numero * numero -eval()* '! # )eval("10*10")?;;!,# <HTML> <HEAD><TITLE>Preguntador</TITLE>
//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 </HEAD> <BODY> //EJECTUA LA FUNCION HazPregunta var resultado = HazPregunta("10 + 10") document.write(resultado) </BODY></HTML> 2. Funciones recursivas!b# -- * function factorial(numero) { if (numero > 1) { return numero * factorial(numero - 1) else { return numero,-1- * %% - %C? %DE%F(%C?+D : - # - " <HTML> <HEAD><TITLE>Preguntador</TITLE> //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) </HEAD> <BODY> //EJECTUA LA FUNCION HazPregunta var resultado = HazPregunta("10 + 10") document.write(resultado) </BODY></HTML>,- 1!B1- * *! - 1-# )' 9) "! 3. Creación de objetos 1#) -(+ function empleado(nombre, edad, puesto) { this.nombre = nombre this.edad = edad this.puesto = puesto,)this-1# "!B" - ) 1( 1#+ empleado_1 = new empleado("pedro", 26, "Programador") $ 1#4 -!# empleado_1.jefe = "Luis"
, -1#! 1# - 1# 1#!# function oficina(ciudad, pais) { this.ciudad = ciudad this.pais = pais oficinapedro = new oficina("madrid","españa") empleado_1 = new empleado("pedro", 26, "Programador", oficinapedro),# )4 - - function empleado(nombre, edad, puesto, oficina) this.nombre = nombre this.edad = edad this.puesto = puesto this.oficina = oficina 2-1#) -!,-1 1 '!B ' - 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 0 1# ' empleado_1.mostrarperfil,# - <HTML><HEAD><TITLE>Empleados</TITLE> //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() </HEAD><BODY> nuevoempleado.mostrarperfil() </BODY></HTML> 4. Arrays asociativos, 1# empleado_1[0] = "Pedro" empleado_1[1] = 26 empleado_1[2] = "Programador" > 1' empleado_2["nombre"] equivale a empleado_2[0] empleado_2["edad"] equivale a empleado_2[1] : # * <HTML><HEAD><TITLE>Menu de usuario</title> //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() </HEAD> <BODY> empleadonuevo.obtenerinfo() empleadonuevo.verinfo() </BODY></HTML> Eventos en JavaScript,) '!B "*(# ) 1 - ) +! #!, " - #! 1 # ") -!?!?,?!; B - ) -?!;(?!? +, - 1
?!; 4 1#-?!(+ 4 1 1#-?!, 1#?!??!?(?! + B) - 1-?!,?!,?!,1?!;(?!? +,!?!, 1!!"?!,!#?!?,1!#"?!;(?!? +,!?!,1 1!"?! $?!?, - $%?! 1 $
&?!; % % % - &?!;, -?!;,1,# <INPUT TYPE="text" onchange="compruebacampo(this)">,# )CompruebaCampo()- - (41 1 +!, - this1 #) -1# - -( ) - +! 1 "1# 1# 5! ' ()*()()() ()$()$()&()& () +*()+*() ()&()+*()+* () ()*()()$() $()& () ' () ()*()()() ()$()$()&()& () +*()+*() ()' ()()+* ()' ()()+*
!!!"!#!#"!!" $ $% & & ()' ()()+* ' ()() () () 5( 1+ () () () () +*()+* 2. Métodos de evento disponibles en JavaScript ' ",-,-,-,-,-! ", - 1# " 1 1# -1# % 7" -,#
<HTML> <HEAD><TITLE>Eventos</TITLE> <SCRIPT> function Reacciona(campo) { alert(" Introduzca un valor!") campo.focus() </HEAD> <BODY> <FORM METHOD=POST> <INPUT TYPE=text NAME=campo onfocus="reacciona(this)"> </FORM> </BODY> </HTML> 3. Eventos onload y onunload 1 <BODY>!,# <BODY onload="hola()" onunload="adios()"> -Hola()# -Adios()1!,# <HTML> <HEAD> <TITLE>Ejemplo onload y onunload</title> </HEAD> <BODY onload="alert(' Bienvenido a mi página!')" onunload="alert(' Vuelva pronto!')">... </BODY> </HTML>,# "- <HTML> <HEAD> <TITLE>Ejemplo con funciones</title> var name = "" function Hola() { nombre = prompt('introduzca su nombre:','') alert(' Hola ' + nombre + '!') function Adios() { alert(' Adios ' + nombre + '!') </HEAD>
<BODY onload="hola()" onunload="adios()">... </BODY> </HTML> 4. Ejemplo de aplicación en formularios : # % <INPUT TYPE=text NAME="test" onblur="alert(' Gracias!')" onchange="comprueba(this)">,# ) <HTML> <HEAD><TITLE>Calculadora interactiva</title> function Calcula(form) { form.resultados.value = eval(form.entrada.value) function CogeExpresion(form) { form.entrada.blur() form.entrada.value = prompt("introduce una expresión matemática válida en JavaScript","") Calcula(form) </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> Acceso a los formularios de una pagina - -!,forms - ) ' -!2 )# <FORM METHOD=POST NAME="Formu"> - )- document.forms[0] (primer formulario) document.forms["formu"] document.formu
1.1. Propiedades del objeto formulario # 4 4 & 1 0&<35 937 0 - ( %) )1)!!!+ & <," - -!7-#1,5&>, 937 & 150, 937 & 1 1# 1 ( 1 + 7-#* - & 1,32 937 1.2. Métodos del objeto form 4, 1 < # - 1 1 1 -,-,# <HTML> <HEAD><TITLE>Ejemplo de metodo submit()</title> function CompruebaValor(Formu) { if (Formu.respuesta.value == "100") Formu.submit()
else Formu.respuesta.value = "" </HEAD> <BODY> <FORM METHOD=POST onsubmit="alert(' Respuesta correcta!'); return false"> Cuánto vale 10 * 10? <INPUT TYPE="text" NAME="respuesta" onchange="compruebavalor(this.form)"> </FORM> </BODY> </HTML> 1.3. Eventos de formulario $ 7 1 & 1 & 11 2. Acceso a los elementos de un formulario - ) "elements!, 1# - ())*)))))) )))))))) ))*)*+) -! # )- 19 %(*+ (*+) MiFormu.elements[0] MiFormu.elements[1] MiFormu.elements[2] 31 " 1!0) % # %) MiFormu.elements[0] MiFormu.elements["MiTexto"] MiFormu.MiTexto,# " elements1!
<HTML> <HEAD> <TITLE>Tabla de multiplicar</title> function Calcula(Formu) { var num = 1 var Numero = Formu.Numero.value Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ Formu.elements[num].value = Numero * num++ </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> # elements - " 1 -!# )-%& # 1 - function Calcula(Formu) { var Numero = Formu.Numero.value for(num = 1; num <= 10; num++) { Formu.elements[num].value = Numero * num
3. Métodos, propiedades y eventos de los elementos de un formulario & - ' "1-!0 1! 3.1. Cuadro de selección (checkbox) # 4G < -&4G < - G(+ < 1 - <5B < - <5B 1 1 $ &G & 1 1 3.2. Botón de selección (radio), (*+ - 1! # 4G < 1 -&4G < - < 1 - <5B <
- <5B % 4 G(+ < 1 < * 1 1 1 1 $ &G & 1 1 1,# <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 </HEAD> <BODY> <FORM METHOD=POST> <P>Valor:<BR> <INPUT TYPE="text" NAME="entrada" VALUE=0 onchange="calcula(this.form, this.name);"> <P>Acción:<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) # -: -(+ 1(+ (+ < - - <5B < 1 - <5B < 2- ( %"+ H- % % $ &4 9 = & 1 % & - % &' - & % 3.4. Lista de selección (select) # 0 < % 2 IJ! IJ! % IJ! IJ! - < ) - 3<35 & % < < -
-(+ 1(+ 2- H- $ &4 9 = & 1 & - &' - & # ) <SELECT NAME="Ejemplo" onfocus="ver()"> <OPTION SELECTED VALUE="Opción 1">1 <OPTION VALUE="Opción 2">2 <OPTION VALUE="Opción 3">3 </SELECT> ) 4 Ejemplo.options[1].value = "Opción 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) defaultvalue)namevalue) - %! ' focus()) blur()select() " ) onfocus)onbluronselect! 3.6. Botones submit y reset 1 namevalue) " ' click() onclick()!
,11 ' - ' submit()onsubmit!, ' submit()" - (1 +!, onsubmit - ) " - "(# ) +! 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 </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> 31' -- var Formu = Digito.form 1-1Digito!