InfoTic: febrero 2017

jueves, 2 de febrero de 2017

Javascript Parte XXVI

Este otro objeto visual que podemos disponer en un FORM permite realizar la selección de un string de una lista y tener asociado al mismo un valor no visible. El objetivo fundamental en JavaScript es determinar qué elemento está seleccionado y qué valor tiene asociado. Esto lo hacemos cuando ocurre el evento onChange.

Para determinar la posición del índice seleccionado en la lista:
document.getElementById('select1').selectedIndex;
Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedIndex (almacena la posición del string seleccionado de la lista, numerando a partir de cero).
Para determinar el string seleccionado:

  document.getElementById('select1').options[document.getElementById('select1').selectedIndex].text;

Es decir que el objeto select1 tiene otra propiedad llamada options, a la que accedemos por medio de un subíndice, al string de una determinada posición.

Hay problemas en los que solamente necesitaremos el string almacenado en el objeto SELECT y no el valor asociado (no es obligatorio asociar un valor a cada string).
Y por último con esta expresión accedemos al valor asociado al string:

  document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;

Un ejemplo completo que muestra el empleo de un control SELECT es:

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

<script type="text/javascript"> 
function cambiarColor()
{
  var seleccion=document.getElementById('select1');
  document.getElementById('text1').value=seleccion.selectedIndex;
  document.getElementById('text2').value=seleccion.options[seleccion.selectedIndex].text;
  document.getElementById('text3').value=seleccion.options[seleccion.selectedIndex].value;
}
</script>

<form>
  <select id="select1" onChange="cambiarColor()">
    <option value="0xff0000">Rojo</option>
    <option value="0x00ff00">Verde</option>
    <option value="0x0000ff">Azul</option>
  </select>
  <br>
  Número de índice seleccionado del objeto SELECT:<input type="text" id="text1"><br>
  Texto seleccionado:<input type="text" id="text2"><br>
  Valor asociado:<input type="text" id="text3"><br>
</form>
</body>
</html>

Se debe analizar en profundidad este problema para comprender primeramente la creación del objeto SELECT en HTML, y cómo acceder luego a sus valores desde Javascript.
Es importante para el objeto SELECT definir qué función llamar cuando ocurra un cambio: onChange="cambiarColor()".
Por cada opción del objeto SELECT tenemos una línea:

Donde Rojo es el string que se visualiza en el objeto SELECT y value es el valor asociado a dicho string.

Analizando la función cambiarColor() podemos ver cómo obtenemos los valores fundamentales del objeto SELECT.

Javascript Parte XXV

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>
</head>
<body>

<script type="text/javascript">
  function verificar()
  {
    var clave=document.getElementById('clave').value;
    if (clave.length<5)
    {
      alert('La clave no puede tener menos de 5 caracteres!!!');
    }
    else
    {
      alert('Largo de clave correcta');
    }
  }
</script>

<form>
Ingrese una clave:
<input type="password" id="clave">
<br>
<input type="button" value="Confirmar" onClick="verificar()">
</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 mediante el método getElementById a la marca HTML clave:

    var clave=document.getElementById('clave').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 (clave.length<5)

Javascript Parte XXIV

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 id 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 type="text/javascript">
function mostrar()
{
  var nom=document.getElementById('nombre').value;
  var ed=document.getElementById('edad').value;
  alert('Ingresó el nombre:' + nom);
  alert('Y la edad:' + ed);
}
</script>

<form>
Ingrese su nombre:
<input type="text" id="nombre"><br>
Ingrese su edad:
<input type="text" id="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.getElementById('nombre').value;
  var ed=document.getElementById('edad').value;

Para hacer más clara la función guardamos en dos variables auxiliares los contenidos de los controles de tipo TEXT.
La propiedad "id" es un identificar único para cualquier marca HTML que luego nos permite desde Javascript acceder a dicho elemento.
El método getElementById nos retorna una referencia del objeto HTML que le pasamos como parámetro. a partir de este objeto accedemos a la propiedad value que almacena el valor ingresado por el operador en el control TEXT.
Luego de extraer los valores ingresados por el operador los mostramos utilizando la función alert:

  var nom=document.getElementById('nombre').value;
  var ed=document.getElementById('edad').value;
  alert('Ingresó el nombre:' + nom);
  alert('Y la edad:' + ed);

Javascript Parte XXIII

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 un 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 type="text/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.

Javascript Parte XXII

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 carácter 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 carácter '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 carácter.

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 type="text/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 carácter 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>