JAVASCRIPT: abril 2012

25. Control PASSWORD

Esta marca es una variante de la de tipo "TEXT". La diferencia fundamental es que cuando se carga un texto en el campo de edición sólo muestra asteriscos en pantalla, es decir, es fundamental para el ingreso de claves y para que otros usuarios no vean los caracteres que tipeamos.

La mayoría de las veces este dato se procesa en el servidor. Pero podemos en el cliente (es decir en el navegador) verificar si ha ingresado una cantidad correcta de caracteres, por ejemplo.

Ejemplo: Codificar una página que permita ingresar una password y luego muestre una ventana de alerta si tiene menos de 5 caracteres.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function validar()
{
  if (document.form1.text1.value.length<5)
  {
    alert("Ingrese al menos 5 caracteres");
    document.form1.text1.value="";
  }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
Ingrese clave(al menos 5 caracteres): <INPUT TYPE="password" NAME="text1">
<INPUT TYPE="button" ONCLICK="validar()" VALUE="Enviar">
</FORM>
</BODY>
</HTML>

En este problema debemos observar que cuando ingresamos caracteres dentro del campo de edición sólo vemos asteriscos, pero realmente en memoria se almacenan los caracteres tipeados. Si queremos mostrar los caracteres ingresados debemos acceder a:

document.form1.text1.value

Normalmente, a este valor no lo mostraremos dentro de la página, sino se perdería el objetivo de este control (ocultar los caracteres tipeados).

Si necesitamos saber la cantidad de caracteres que tiene un string accedemos a la propiedad length que retorna la cantidad de caracteres.

if (document.form1.text1.value.length<5)

PROBLEMA



1 - Disponer dos campos de texto tipo password. Cuando se presione un 
botón mostrar si las dos claves ingresadas son iguales o no (es muy 
común solicitar al operador el ingreso de dos veces de su clave para 
validar si la tipeó correctamente, esto se hace cuando se crea una 
password para el ingreso a un sitio o para el cambio de una existente).

Tener en cuenta que podemos emplear el operador == para ver si dos string

son iguales.

24. Controles FORM, BUTTON y TEXT.

Hasta ahora hemos visto como crear un formulario con controles de tipo BUTTON. Agregamos un control de tipo TEXT (permite al operador cargar caracteres por teclado).

Ahora veremos la importancia de definir un NAME a todo control de un formulario.

Con un ejemplo veremos estos controles: Confeccionar un formulario que permita ingresar el nombre y edad de una persona:

<html>
<head></head>
<body>

<script language="JavaScript">
function mostrar()
{
  var nom=document.form1.nombre.value;
  var ed=document.form1.edad.value;
  alert('Ingreso el nombre:' + nom);
  alert('Y la edad:' + ed);
}
</script>
<form name="form1">
  Ingrese su nombre:
  <input type="text" name="nombre"><br>
  Ingrese su edad:
  <input type="text" name="edad"><br>
  <input type="button" value="Confirmar" onClick="mostrar()">
</form>
</body>
</html>

En este problema tenemos cuatro controles: 1 FORM, 1 BUTTON, 2 TEXT. El evento que se dispara al presionar el botón se llama mostrar.

La función 'mostrar' accede a los contenidos de los dos controles de tipo TEXT:

var nom=document.form1.nombre.value;
  var ed=document.form1.edad.value;

Para hacer más clara la función guardamos en dos variables auxiliares los contenidos de los controles de tipo TEXT. Hay que tener en cuenta que a nuestra página la accedemos por medio del objeto: document, luego, al formulario que hemos creado, lo accedemos por el NAME que le dimos al formulario, en este caso: form1, luego, a cada control que contiene el formulario, lo accedemos nuevamento por su NAME, es decir: nombre y edad respectivamente. Por último, para acceder a las cadenas cargadas debemos indicar la propiedad value.

PROBLEMAS

1 - Crear un programa que permita cargar un entero en un text y al presionar un botón nos muestre dicho valor elevado al cubo (emplear la función alert).

2 - Cargar dos números en objetos de tipo text y al presionar un botón, mostrar el mayor.

3 - Cargar un nombre y un apellido en sendos text. Al presionar un botón, concatenarlos y mostrarlos en un tercer text (Tener en cuenta que podemos modificar la propiedad value de un objeto TEXT cuando ocurre un evento).

23. Formularios y Eventos.

El uso de JavaScript en los formularios HTML se hace fundamentalmente con el objetivo de validar los datos ingresados. Se hace esta actividad en el cliente (navegador) para desligar de esta actividad al servidor que recibirá los datos ingresados por el usuario.

Esta posibilidad de hacer pequeños programas que se ejecutan en el navegador, evitan intercambios innecesarios entre el cliente y el servidor (navegador y sitio web).

Suponemos que conoce las marcas para la creación de formularios en una página web:

form <FORM> ... </FORM>
  text <INPUT TYPE="text">
  password <INPUT TYPE="password">
  textarea <TEXTAREA> ... </TEXTAREA>
  button <INPUT TYPE="button">
  submit <INPUT TYPE="submit">
  reset <INPUT TYPE="reset">
  checkbox <INPUT TYPE="checkbox">
  radio <INPUT TYPE="radio">
  select <SELECT> ... </SELECT>
  hidden <INPUT TYPE="hidden">

El navegador crea un objeto por cada control visual que aparece dentro de la página. Nosotros podemos acceder posteriormente desde JavaScript a dichos objetos.

El objeto principal es el FORM que contendrá todos los otros objetos: TEXT (editor de líneas), TEXTAREA (editor de varias líneas), etc.

Nuestra actividad en JavaScript es procesar los eventos que generan estos controles (un evento es una acción que se dispara, por ejemplo si se presiona un botón).

Vamos a hacer en problema muy sencillo empleando el lenguaje JavaScript; dispondremos un botón y cada vez que se presione, mostraremos un contador:

<html>
<head>
</head>
<body>

<script language="JavaScript">
var contador=0;
function incrementar()
{
  contador++;
  alert('El contador ahora vale :' + contador);
}
</script>
<form>
  <input type="button" onClick="incrementar()" value="incrementar">
</form>
</body>
</html>

A los eventos de los objetos HTML se les asocia una función, dicha función se ejecuta cuando se dispara el evento respectivo. En este caso cada vez que presionamos el botón, se llama a la función incrementar, en la misma incrementamos la variable contador en uno. Hay que tener en cuenta que a la variable contador la definimos fuera de la función para que no se inicialice cada vez que se dispara el evento.

La función alert crea una ventana que puede mostrar un mensaje.

PROBLEMA

Crear un formulario con tres botones con las leyendas "1", "2" y "3". Mostrar un mensaje indicando qué botón se presionó.

jueves, 12 de abril de 2012

25. Control PASSWORD

24. Controles FORM, BUTTON y TEXT.

23. Formularios y Eventos.