Tomar información por pantalla con JavaScript Para lograr interactividad con nuestros usuarios, es necesario reaccionar a sus acciones o permitir que estos ingresen información para que sea manipulada, para con base en esto tomar decisiones. La forma mas sencilla de recopilar información de nuestros clientes es mediante la utilización del método de JavaScript prompt(), que despliega un mensaje de secuencia de comandos, que es similar a un alert pero con un campo de texto, y cuya sintaxis es: prompt( pregunta, texto por defecto de la caja de texto ); Ejemplo: prompt("digite su nombre","nombre"); Su resultado es: Para hacer de este cuadro una herramienta realmente útil, le podemos asignar su resultado a una variable. Ejemplo: var nom; nom=prompt("digite su nombre","nombre"); En el ejemplo anterior, hemos declarado una variable nom en su primera línea, luego le asignamos el valor obtenido mediante el cuadro de secuencia de comandos. Luego de esto, podemos utilizar esta variable para cualquier objetivo.
Ejemplo: <html> <body> <script> var nom; nom=prompt("digite su nombre","nombre"); alert("hola "+nom); </script> </body> </html> NOTA: Los datos que se obtienen por pantalla siempre serán cadenas (Strings), por consiguiente para poder realizar operaciones aritméticas con estos, se deben convertir a datos numéricos mediante los métodos: parsefloat(variable_a_convertir); : Convierte la variable para trabajar con números reales. parseint(variable_a_convertir); : Convierte la variable para trabajar con números enteros. Ejemplo de parsefloat: <html> <head> <title>ejemplo de parsefloat</title> <script> num1=parsefloat(prompt("digite número uno","")); num2=parsefloat(prompt("digite número dos","")); res=num1+num2; alert(res); </script> </head> <body> </body> </html> Siendo num1=5.3; y num2=3.2 Entonces, res=8.5
Ejemplo de parseint: <html> <head> <title>ejemplo de parseint</title> <script> num1=parseint(prompt("digite número uno","")); num2=parseint(prompt("digite número dos","")); res=num1+num2; alert(res); </script> </head> <body> </body> </html> Siendo num1=5.3; y num2=3.2 Entonces, res=8 Sin lugar a dudas el método prompt() es muy útil para tomar datos por pantalla, pero nos hemos preguntado Qué pasará cuando tengamos que recibir mucha información del cliente?, será y agradable para el usuario ver tantos cuadros de dialogo uno tras otro?. Definitivamente la solución a estos problemas la tenemos en la utilización de formularios HTML. JavaScript y formularios El principal uso de los formularios es el de recopilar información de todo tipo sobre la persona que visita nuestra pagina, que podemos utilizar luego para muy diversos fines: inclusión en listas de correo, corrección de nuestras paginas basándonos en la opinión de nuestros visitantes, recepción de artículos y programas, etc. Pero si bien los formularios son muy útiles si los sabemos usar bien, por sí solos tienen poca utilidad, y esto es debido a que con el uso exclusivo de HTML podemos crear el formulario, pero no disponemos de herramientas que nos permitan ni procesar los datos recibidos, ni validar los datos introducidos antes de su envío ni dar vida a los campos para que la interactividad con el usuario sea la adecuada. Sin lugar a dudas la herramienta más útil con la que contamos para hacer nuestros formularios más eficientes es el uso del lenguaje de scripting Javascript. Es un lenguaje formado por trozos de código que se insertan en las propias paginas web, y que permite el manejo dinámico de las mismas por
parte del programador, de tal forma que es posible verificar y/o cambiar propiedades de los elementos de la pagina sin tener que volver a realizar una conexión con el servidor, así como realizar cálculos y transferencias de datos entre los campos del formulario. El objeto form depende en la jerarquía de objetos del objeto document. En un objeto form podemos encontrar algunos métodos y propiedades, pero lo más destacado que podremos encontrar son cada uno de los elementos del formulario. Es decir, de un formulario dependen todos los elementos que hay dentro, como pueden ser campos de texto, cajas de selección, áreas de texto, botones de radio, etc. Para acceder a un formulario desde el objeto document podemos hacerlo de dos formas. 1. A partir de su nombre, asignado con el atributo NAME de HTML. 2. Mediante la matriz de formularios del objeto document, con el índice del formulario al que queremos acceder. Para este formulario <FORM name="f1"> <INPUT type=text name=campo1> <INPUT type=text name=campo2> </FORM> Podremos acceder con su nombre de esta manera. document.f1 O con su índice, si suponemos que es el primero de la página. document.forms[0] De similar manera accedemos a los elementos de un formulario, que dependen del objeto form. 1. A partir del nombre del objeto asignado con el atributo NAME de HTML. 2. Mediante la matriz de elementos del objeto form, con el índice del elemento al que queremos acceder. Podríamos acceder al campo 1 del anterior formulario de dos maneras. Con su nombre lo haríamos así. document.f1.campo1
O a partir del array de elementos. document.f1.elements[0] (utilizamos el índice 0 porque es el primer elemento y en Javascript los arrays empiezan por 0.) Si deseamos acceder al segundo campo del formulario escribiríamos una de estas dos cosas: document.f1.campo2 document.f1.elements[1] Recordemos que también podemos acceder a un formulario por el array de forms, indicando el índice del formulario al que acceder. De este modo, el acceso al campo2 sería el siguiente: document.forms[0].campo2 document.forms[0].elements[1] En estos casos he supuesto que este formulario es el primero que hay escrito en el código HTML, por eso accedo a él con el índice 0. Después de dejar claro como acceder a los elementos de un formulario, observaremos el uso de cada uno de estos basándonos en el siguiente ejemplo:
Su código seria: <html> <head> <title>ejemplo de formulario</title> </head> <body> <table border=1> <form name="f1" action="_blank" method="post"> Digite su nombre: <input type="text" name="nombre" size=26> Sexo: <select name="seleccion"> <option value="hombre">masculino</option> <option value="mujer">femenino</option> </select> Cual es su canal de tv favorito: <input type="radio" name="botonradio" value="rcn"> RCN<br> <input type="radio" name="botonradio" value="caracol"> Caracol<br> <input type="radio" name="botonradio" value="telecafe"> Telecafé Que es lo que mas le gusta del canal? : <textarea cosl=10 rows=10> </textarea> De los siguientes programas seleccione su(s) preferido(s): <input type="checkbox" name="caja" value="futbol mania"> Futbol Mania<br> <input type="checkbox" name="caja" value="en los Tacones de Eva"> En los tacones de Eva<br> <input type="checkbox" name="caja" value="el club 10"> El club 10<br> <input type="checkbox" name="caja" value="desafio 2007"> Desafio 2007<br>
<input type="checkbox" name="caja" value="la isla de los famosos"> La isla de los famosos<br> <input type="checkbox" name="caja" value="abre tu corazon"> Abre tu corazon<br> <input type="checkbox" name="caja" value="cafe gol">cafe gol <td colspan=2> <center> <input type="reset" value="reiniciar"> <input type="submit" value="enviar"> <input type="button" value="procesar"> <center> </form> </table> </body> </html> (Antes de empezar, es necesario que recordemos que el valor de un elemento se encuentra en su atributo value ). Para tomar e imprimir los datos del formulario, vamos a declarar la función procesa() en la cabecera del documento, de la siguiente forma: <head> <title>ejemplo de formulario</title> <script language="javascript"> function procesa() </script> </head> NOTA: Todo lo que realicemos de ahora en adelante, estará dentro de esta función. Luego de esto declaramos una variable de impresión: var imprimir; Esta variable será la encargada de almacenar los resultados de cada elemento del formulario, concatenados con etiquetas HTML para luego imprimirla por medio de document.write.
Acceder al objeto text Sintaxis: Variable_para_almacenar_los_datos=document.nombre_formulario.nombre_ca mpo.value; En nuestro ejemplo: nom= document.f1.nombre.value; imprimir+="hola "+nom+"<br>"; A la variable nom, la llevamos lo que se encuentre en nuestro campo de texto el cual llamamos nombre, el cual se encuentra en el formulario que llamamos f1. Luego le concatenamos al valor de la variable imprimir mediante el operador +=, la cadena Hola, a esta le concatenamos la variable nom, y por ultimo, le adicionamos un salto de linea mediante <br>. Acceder al objeto select Primero se debe investigar el índice del valor seleccionado Sintaxis: Variable_para_almacenar_indice=document.nombre_formulario.nombre_select. selectedindex Luego tomo el valor del select en el índice seleccionado Sintaxis: Variable_para_almacenar_valor=document.nombre_formulario.nombre_select. options[variable_que_almaceno_el_indice].value; En nuestro ejemplo: indice=document.f1.seleccion.selectedindex; sex=document.f1.seleccion.options[indice].value; imprimir+="usted es: "+sex+"<br>"; A la variable indice le llevamos el número de índice de la opción seleccionada en el select. A la variable sex la llevamos el valor del select en el índice que se almaceno en la variable indice.
Luego a la variable imprimir, le concatenamos a su valor la cadena Usted es: mas la variable sex mas el salto de línea de HTML <br>. Acceder al objeto radio Para poder verificar cual fue el radio activado, se debe recorrer todo el objeto utilizándolo como un array. Sintaxis: for(i=0; i<document.nombre_formulario.nombre_radio.length; i++) If(document.nombre_formulario.nombre_radio[ i ].checked) break; Luego almacenamos su valor en una variable. Sintaxis: Variable_para_almacenar_valor=document.nombre_formulario.nombre_radio.[i ndice_del_ciclo].value; En nuestro ejemplo: for(i=0; i<document.f1.botonradio.length; i++) if(document.f1.botonradio[i].checked) break; radio = document.f1.botonradio[i].value; imprimir+="su canal favorito es: "+radio+"<br>"; Con lo anterior obtenemos el índice del radio activado. Esto gracias al recorrido matricial que se le realiza al objeto. Cuando se encuentre un radio activado, se detiene el ciclo mediante la sentencia break;. A la variable radio le llevamos el valor del radio seleccionado. Luego a la variable imprimir, le concatenamos a su valor la cadena Su Canal favorito es: mas la variable radio mas el salto de línea HTML <br>.
Acceder al objeto textarea Trabajar con el objeto textarea, es similar a trabajar con el objeto text Sintaxis: Variable_para_almacenar_valor=document.nombre_formulario.nombre_textare a.value; En nuestro ejemplo: com= document.f1.comentario.value; imprimir+="lo que mas le gusta del canal es: "+com+"<br>"; A la variable com, le llevamos lo que se encuentra en nuestro textarea. Luego a la variable imprimir, le concatenamos a su valor la cadena Lo que mas le gusta del canal es: mas la variable com mas el salto de línea HTML <br>. Acceder al objeto checkbox El objeto checkbox funciona de forma similar al objeto radio, pero es importante tener en cuenta que podemos seleccionar varias cajas de texto al mismo tiempo. Se debe recorrer el objeto checkbox como una matriz para detectar las cajas seleccionadas. Aprovechando lo anterior, cada que encontremos una caja seleccionada, almacenamos su valor en una variable. Sintaxis: var variable_almacenamiento= ; for(j=0; j<document.nombre_formulario.nombre_checkbox.length; j++) If(document.nombre_formulario.nombre_checkbox[ j ].checked) Variable_almacenamiento=variable_almacenamiento+document.nombre _formulario.nombre_checkbox[ j ].value;
En nuestro ejemplo: var cajadetexto=""; for(j=0; j<document.f1.caja.length; j++) if(document.f1.caja[j].checked) cajadetexto = cajadetexto+", "+document.f1.caja[j].value; imprimir+="sus programas preferidos son: "+cajadetexto; Declaramos la variable cajadetexto y le llevamos un valor vacío. Después, empezamos a recorrer el objeto como una matriz, cada que nos encontramos con una caja marcada, la almacenamos en la variable cajadetexto, utilizando como caracter de separación una coma,. Luego a la variable imprimir, le concatenamos a su valor la cadena sus programas preferidos son: mas la variable cajadetexto. Por ultimo imprimimos la variable imprimir : document.write(imprimir); Ya tenemos lista nuestra función procesa(), ahora lo único que falta es invocarla y lo vamos a realizar por medio de la función onclick en uno de los botones: <input type="button" value="procesar" onclick=procesa();> A continuación, se presenta el código de ejemplo completo: <html> <head> <title>ejemplo de formulario</title> <script language="javascript"> function procesa() //declaro variable de impresion, en esta acumulare una cadena concatenando etiquetas html para luego mandar a imprimir var imprimir=""; //aqui tomo los datos del campo de texto y los imprimo nom= document.f1.nombre.value; imprimir+="hola "+nom+"<br>"; //aqui verifico el select //con estas sentencias verifico el valor seleccionado en el select
indice=document.f1.seleccion.selectedindex; //aqui tomo el valor del select en la posicion del indice sex=document.f1.seleccion.options[indice].value; imprimir+="usted es: "+sex+"<br>"; //aqui reviso la opcion del radio boton //variable para almacenar el valor del radio button var radio=""; for(i=0; i<document.f1.botonradio.length; i++) if(document.f1.botonradio[i].checked) break; radio = document.f1.botonradio[i].value; imprimir+="su canal favorito es: "+radio+"<br>"; //tomo los comentarios del textarea com= document.f1.comentario.value; imprimir+="lo que mas le gusta del canal es: "+com+"<br>"; //observo los programas preferidos seleccionados por medio de las cajas de texo //variable para almacenar el valor de las cajas de exto var cajadetexto=""; for(j=0; j<document.f1.caja.length; j++) if(document.f1.caja[j].checked) //la variable cajadetexto la concateno con los values de los checkbox cajadetexto = cajadetexto+", "+document.f1.caja[j].value; imprimir+="sus programas preferidos son: "+cajadetexto; //realizo impresion document.write(imprimir); //funcion para confirmar el envio del formulario function pregunta() if(confirm(' Esta seguro de enviar este formulario?')) document.f1.submit()
</script> </head> <body> <table border=1> <form name="f1" action="_blank" method="post"> Digite su nombre: <input type="text" name="nombre" size=26> Sexo: <select name="seleccion"> <option value="hombre">masculino</option> <option value="mujer">femenino</option> </select> Cual es su canal de tv favorito: <input type="radio" name="botonradio" value="rcn"> RCN<br> <input type="radio" name="botonradio" value="caracol"> Caracol<br> <input type="radio" name="botonradio" value="telecafe"> Telecafé Que es lo que mas le gusta del canal? : <textarea name="comentario" cosl=10 rows=10> </textarea> De los siguientes programas seleccione su(s) preferido(s): <input type="checkbox" name="caja" value="futbol mania"> Futbol Mania<br> <input type="checkbox" name="caja" value="en los Tacones de Eva"> En los tacones de Eva<br> <input type="checkbox" name="caja" value="el club 10"> El club 10<br> <input type="checkbox" name="caja" value="desafio 2007"> Desafio 2007<br> <input type="checkbox" name="caja" value="la isla de los famosos"> La isla de los famosos<br>
<input type="checkbox" name="caja" value="abre tu corazon"> Abre tu corazon<br> <input type="checkbox" name="caja" value="cafe gol">cafe gol <td colspan=2> <center> <input type="reset" value="reiniciar"> <input type="button" value="enviar" onclick=pregunta();> <input type="button" value="procesar" onclick=procesa();> <center> </form> </table> </body> </html>