JAVASCRIPT

jueves, 12 de abril de 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ó.

miércoles, 2 de noviembre de 2011

22. Clase String

Un string consiste en uno o más caracteres encerrados entre simple o doble comillas.
Concatenación de cadenas (+)

JavaScript permite concatenar cadenas utilizando el operador +.

El siguiente fragmento de código concatena tres cadenas para producir su salida:

var final='La entrada tiene ' + contador + ' caracteres.';

Dos de las cadenas concatenadas son cadenas literales. La del medio es un entero que automáticamente se convierte a cadena y luego se concatena con las otras.

Propiedad length
Retorna la cantidad de caracteres de un objeto String.

var nom='Juan';

document.write(nom.length); //Resultado 4

Métodos
charAt(pos)
Retorna el caracter del índice especificado. Comienzan a numerarse de la posición cero.

var nombre='juan';
var caracterPrimero=nombre.charAt(0);

substring (posinicial, posfinal)
Retorna un String extraída de otro, desde el caracter 'posinicial' hasta el 'posfinal'-1:

cadena3=cadena1.substring(2,5);

En este ejemplo, "cadena3" contendrá los caracteres 2, 3, 4 sin incluir el 5 de cadena1 (Cuidado que comienza en cero).
indexOf (subCadena)
Devuelve la posición de la subcadena dentro de la cadena, o -1 en caso de no estar.
Tener en cuenta que puede retornar 0 si la subcadena coincide desde el primer caracter.

var nombre='Rodriguez Pablo';
var pos=nombre.indexOf('Pablo');
if (pos!=-1)
  document.write ('Está el nombre Pablo en la variable nombre');

toUpperCase()
Convierte todos los caracteres del String que invoca el método a mayúsculas:

cadena1=cadena1.toUpperCase();

Luego de esto, cadena1 tiene todos los caracteres convertidos a mayúsculas.
toLowerCase()
Convierte todos los caracteres del String que invoca el método a minúsculas:

cadena1=cadena1.toLowerCase();

Luego de esto, cadena1 tiene todos los caracteres convertidos a minúsculas.

Ejemplo: Cargar un string por teclado y luego llamar a los distintos métodos de la clase String y la propiedad length.

<html>
<head>
</head>

<body>
<script language="JavaScript">
  var cadena=prompt('Ingrese una cadena:','');
  document.write('La cadena ingresada es:'+cadena);
  document.write('<br>');
  document.write('La cantidad de caracteres son:'+cadena.length);
  document.write('<br>');
  document.write('El primer caracter es:'+cadena.charAt(0));
  document.write('<br>'); 
  document.write('Los primeros 3 caracteres son:'+cadena.substring(0,3));
  document.write('<br>'); 
  if (cadena.indexOf('hola')!=-1)
    document.write('Se ingresó la subcadena hola');
  else 
    document.write('No se ingresó la subcadena hola');
  document.write('<br>'); 
  document.write('La cadena convertida a mayúsculas es:'+cadena.toUpperCase());
  document.write('<br>');
  document.write('La cadena convertida a minúsculas es:'+cadena.toLowerCase());
  document.write('<br>'); 
</script>
</body>
</html>


PROBLEMAS

1 – Ingresar una serie de nombres por teclado hasta que se digite la palabra Fin, y mostrar cuántos nombres se ingresaron.



2 – Igual al anterior, pero que termine la aplicación sin contemplar 
mayúsculas ni minúsculas. Es decir que para salir se pueda teclear fin, 
Fin o FIN.  



3 – Realizar la búsqueda de un string clave en un string fuente. Se 
deberá ingresar una frase o texto (fuente) y luego la clave a buscar. En
 caso de encontrarla, imprimir la posición, de lo contrario una leyenda.



4 – Ingresar una palabra o texto por teclado y determinar si es o no una
 palabra palíndromo. (Palabra que se lee de igual manera de adelante 
hacia atrás, que de atrás hacia delante).



5 – Realizar un programa que permita cargar una dirección de mail e 
implementar una función que verifique si el String tiene cargado el 
caracter @. 



6 - Cargar un String por teclado e implementar los siguientes métodos: 

a) Imprimir la primera mitad de los caracteres de la cadena.

b) Imprimir el último caracter.

c) Imprimirlo en forma inversa.

d) Imprimir cada caracter del String separado con un guión.

e) Imprimir la cantidad de vocales almacenadas.

7 – Codifique un programa que permita cargar una oración por teclado, 
luego mostrar cada palabra ingresada en una línea distinta.

Por ejemplo si cargo:
 La mañana está fría.
Debe aparecer:
La
mañana
está
fría.

21. Clase Math

Esta clase no está construido para que tengamos nuestras variables Math, sino como un contenedor que tiene diversas constantes (como Math.E y Math.PI) y los siguientes métodos matemáticos:

Método	Descripción	Expresión de ejemplo	Resultado del ejemplo
abs	Valor absoluto	Math.abs(-2)	2
sin, cos, tan	Funciones trigonométricas, reciben el argumento en radianes	Math.cos(Math.PI)	-1
asin, acos, atan	Funciones trigonométricas inversas	Math.asin(1)	1.57
exp, log	Exponenciación y logaritmo, base E	Math.log(Math.E)	1
ceil	Devuelve el entero más pequeño mayor o igual al argumento	Math.ceil(-2.7)	-2
floor	Devuelve el entero más grande menor o igual al argumento	Math.floor(-2.7)	-3
round	Devuelve el entero más cercano o igual al argumento	Math.round(-2.7)	-3
min, max	Devuelve el menor (o mayor) de sus dos argumentos	Math.min(2,4)	2
pow	Exponenciación, siendo el primer argumento la base y el segundo el exponente	Math.pow(2,3)	8
sqrt	Raíz cuadrada	Math.sqrt(25)	5
random	Genera un valor aleatorio comprendido entre 0 y 1.	Math.random()	Ej. 0.7345

Ejemplo: Confeccionar un programa que permita cargar un valor comprendido entre 1 y 10. Luego generar un valor aleatorio entre 1 y 10, mostrar un mensaje con el número sorteado e indicar si ganó o perdió:

<html>
<head>
</head>

<body>
<script language="JavaScript">
  var selec=prompt('Ingrese un valor entre 1 y 10','');
  selec=parseInt(selec); 
  var num=parseInt(Math.random()*10)+1;
  if (num==selec)
    document.write('Ganó el número que se sorteó es el '+ num);
  else
    document.write('Lo siento se sorteó el valor '+num+' y usted eligió el '+selec); 
</script>
</body>
</html>

Para generar un valor aleatorio comprendido entre 1 y 10 debemos plantear lo siguiente:

var num=parseInt(Math.random()*10)+1;

Al multiplicar Math.random() por 10, nos genera un valor aleatorio comprendido entre un valor mayor a 0 y menor a 10, luego, con la función parseInt, obtenemos sólo la parte entera. Finalmente sumamos uno.
El valor que cargó el operador se encuentra en:

var selec=prompt('Ingrese un valor entre 1 y 10','');

Con un simple if validamos si coinciden los valores (el generado y el ingresado por teclado).

lunes, 10 de octubre de 2011

20. Clase Array

Un vector es una estructura de datos que permite almacenar un CONJUNTO de datos.

Con un único nombre se define un vector y por medio de un subíndice hacemos referencia a cada elemento del mismo (componente).

Ejemplo 1: Crear un vector para almacenar los cinco sueldos de operarios y luego mostrar el total de gastos en sueldos (cada actividad en una función).

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function cargar(sueldos)
{
  var f;
  for(f=0;f<sueldos.length;f++)
  {
    var v;
    v=prompt('Ingrese sueldo:','');
    sueldos[f]=parseInt(v); 
  }
}

function calcularGastos(sueldos)
{
  var total=0;
  var f;
  for(f=0;f<sueldos.length;f++)
  {
    total=total+sueldos[f];
  }
  document.write('Listado de sueldos<br>');
  for(f=0;f<sueldos.length;f++)
  {
    document.write(sueldos[f]+'<br>');
  } 
document.write('Total de gastos en sueldos:'+total); 
}

var sueldos;
sueldos=new Array(5);
cargar(sueldos);
calcularGastos(sueldos);

</SCRIPT>
</BODY>
</HTML>

Recordemos que el programa comienza a ejecutarse a partir de las líneas que se encuentran fuera de la funciones:

var sueldos;
  sueldos=new Array(5);
  cargar(sueldos);
  calcularGastos(sueldos);

Lo primero, definimos una variable y posteriormente creamos un objeto de la clase Array, indicándole que queremos almacenar 5 valores.

Llamamos a la función cargar enviándole el vector. En la función, a través de un ciclo for recorremos las distintas componentes del vector y almacenamos valores enteros que ingresamos por teclado.
Para conocer el tamaño del vector accedemos a la propiedad length de la clase Array.

En la segunda función sumamos todas las componentes del vector, imprimimos en la página los valores y el total de gastos.

Ejemplo 2: Crear un vector con elementos de tipo string. Almacenar los meses de año. En otra función solicitar el ingreso de un número entre 1 y 12. Mostrar a qué mes corresponde y cuántos días tiene dicho mes.

<HTML>
<HEAD></HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">
function mostrarFecha(meses,dias)
{
  var num;
  num=prompt('Ingrese número de mes:','');
  num=parseInt(num);
  document.write('Corresponde al mes:'+meses[num-1]);
  document.write('<br>');
  document.write('Tiene '+dias[num-1]+' días');
}
var meses; 
  meses=new Array(12);
  meses[0]='Enero';
  meses[1]='Febrero';
  meses[2]='Marzo';
  meses[3]='Abril';
  meses[4]='Mayo';
  meses[5]='Junio';
  meses[6]='Julio';
  meses[7]='Agosto';
  meses[8]='Septiembre';
  meses[9]='Octubre';
  meses[10]='Noviembre';
  meses[11]='Diciembre';
  
  var dias;
  dias=new Array(12);
  dias[0]=31;
  dias[1]=28;
  dias[2]=31;
  dias[3]=30;
  dias[4]=31;
  dias[5]=30;
  dias[6]=31;
  dias[7]=31;
  dias[8]=30;
  dias[9]=31;
  dias[10]=30;
  dias[11]=31;
mostrarFecha(meses,dias);
</SCRIPT>
</BODY>
</HTML>

En este problema definimos dos vectores, uno para almacenar los meses y otro los días. Decimos que se trata de vectores paralelos porque en la componente cero del vector meses almacenamos el string 'Enero' y en el vector dias, la cantidad de días del mes de enero.

Es importante notar que cuando imprimimos, disponemos como subíndice el valor ingresado menos 1, esto debido a que normalmente el operador de nuestro programa carga un valor comprendido entre 1 y 12. Recordar que los vectores comienzan a numerarse a partir de la componente cero.

document.write('Corresponde al mes:'+meses[num-1]);

PROBLEMAS


1 - Desarrollar un programa que permita ingresar un vector de 8 elementos, e informe:

El valor acumulado de todos los elementos del vector.

El valor acumulado de los elementos del vector que sean mayores a 36.

Cantidad de valores mayores a 50.



2 - Realizar un programa que pida la carga de dos vectores numéricos. 
Obtener la suma de los dos vectores, dicho resultado guardarlo en un 
tercer vector del mismo tamaño. Sumar componente a componente.

El tamaño del vector es a elección.

19. Clase Date

JavaScript dispone de varias clases predefinidos para acceder a muchas de las funciones normales de cualquier lenguaje, como puede ser el manejo de vectores o el de fechas.

Esta clase nos permitirá manejar fechas y horas. Se invoca así:

fecha = new Date();//creación de un objeto de la clase Date
fecha = new Date(año, mes, dia);
fecha = new Date(año, mes, dia, hora, minuto, segundo);

Si no utilizamos parámetros, el objeto fecha contendrá la fecha y hora actuales, obtenidas del reloj de nuestra computadora. En caso contrario hay que tener en cuenta que los meses comienzan por cero. Así, por ejemplo:

navidad06 = new Date(2006, 11, 25)

El objeto Date dispone, entre otros, de los siguientes métodos:

getYear()
  setYear(año)
    Obtiene y coloca, respectivamente, el año de la fecha. 
    Éste se devuelve como número de 4 dígitos excepto en el 
    caso en que esté entre 1900 y 1999, en cuyo caso 
    devolverá las dos últimas cifras.
  getFullYear()
  setFullYear(año) 
    Realizan la misma función que los anteriores, pero sin 
    tanta complicación, ya que siempre devuelven números  
    con todos sus dígitos. 
  getMonth()
  setMonth(mes)
  getDate()
  setDate(dia)
  getHours()
  setHours(horas)
  getMinutes()
  setMinutes(minutos)
  getSeconds()
  setSeconds(segundos) 
    Obtienen y colocan, respectivamente, el mes, día, hora, 
    minuto y segundo de la fecha.
  getDay() 
    Devuelve el día de la semana de la fecha en forma de 
    número que va del 0 (domingo) al 6 (sábado)

Ejemplo: Mostrar en una página la fecha y la hora actual.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function mostrarFechaHora()
{
  var fecha
  fecha=new Date();
  document.write('Hoy es ');
  document.write(fecha.getDate()+'/');
  document.write((fecha.getMonth()+1)+'/');
  document.write(fecha.getYear());
  document.write('<br>');
  document.write('Es la hora ');
  document.write(fecha.getHours()+':');
  document.write(fecha.getMinutes()+':');
  document.write(fecha.getSeconds()); 
}
//Llamada a la función
mostrarFechaHora();
</SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>

En este problema hemos creado un objeto de la clase Date. Luego llamamos una serie de métodos que nos retornan datos sobre la fecha y hora actual del equipo de computación donde se está ejecutando el navegador.

Es bueno notar que para llamar a los métodos disponemos:

<nombre de objeto>.<nombre de método>(parámetros)