Tomar información por pantalla con JavaScript
Anuncio
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.
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
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
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
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
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
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
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
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:
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
Su código seria:
<html>
<head>
<title>Ejemplo de formulario</title>
</head>
<body>
<table border=1>
<form name="f1" action="_blank" method="post">
<tr>
<td>Digite su nombre: </td>
<td>
<input type="text" name="nombre" size=26>
</td>
</tr>
<tr>
<td>Sexo: </td>
<td>
<select name="seleccion">
<option value="hombre">Masculino</option>
<option value="mujer">Femenino</option>
</select>
</td>
</tr>
<tr>
<td>Cual es su canal de tv favorito: </td>
<td>
<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é
</td>
</tr>
<tr>
<td>Que es lo que mas le gusta del canal? : </td>
<td>
<textarea cosl=10 rows=10>
</textarea>
</td>
</tr>
<tr>
<td>De los siguientes programas seleccione su(s) preferido(s): </td>
<td>
<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>
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
<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>
</tr>
<tr>
<td colspan=2>
<center>
<input type="reset" value="reiniciar">
<input type="submit" value="enviar">
<input type="button" value="procesar">
<center>
</td>
</tr>
</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”.
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
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”.
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
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>”.
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
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;
}
}
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
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
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
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()
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
}
}
</script>
</head>
<body>
<table border=1>
<form name="f1" action="_blank" method="post">
<tr>
<td>Digite su nombre: </td>
<td>
<input type="text" name="nombre" size=26>
</td>
</tr>
<tr>
<td>Sexo: </td>
<td>
<select name="seleccion">
<option value="Hombre">Masculino</option>
<option value="Mujer">Femenino</option>
</select>
</td>
</tr>
<tr>
<td>Cual es su canal de tv favorito: </td>
<td>
<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é
</td>
</tr>
<tr>
<td>Que es lo que mas le gusta del canal? : </td>
<td>
<textarea name="comentario" cosl=10 rows=10>
</textarea>
</td>
</tr>
<tr>
<td>De los siguientes programas seleccione su(s) preferido(s): </td>
<td>
<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>
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
<input type="checkbox" name="caja" value="Abre tu corazon"> Abre tu
corazon<br>
<input type="checkbox" name="caja" value="Cafe gol">Cafe gol
</td>
</tr>
<tr>
<td colspan=2>
<center>
<input type="reset" value="reiniciar">
<input type="button" value="enviar" onClick=pregunta();>
<input type="button" value="procesar" onClick=procesa();>
<center>
</td>
</tr>
</form>
</table>
</body>
</html>
Programación para Sistemas en Red I
Profesor: Julio Cesar Meza Ramírez
