InfoTic: marzo 2017

jueves, 2 de marzo de 2017

Javascript Parte XXXI

El evento onMouseOver se ejecuta cuando pasamos la flecha del mouse sobre un elemento HTML y el evento onMouseOut cuando la flecha abandona el mismo.

Para probar estos eventos implementaremos una página que cambie el color de fondo del documento.
Implementaremos una función que cambie el color con un valor que llegue como parámetro. Cuando retiramos la flecha del mouse volvemos a pintar de blanco el fondo del documento:

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

<script type="text/javascript">
  function pintar(col)
  {
    document.bgColor=col;
  }
</script>

<a href="pagina1.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a>
-
<a href="pagina1.html" onMouseOver="pintar('#00ff00')" onMouseOut="pintar('#ffffff')">Verde</a>
-
<a href="pagina1.html" onMouseOver="pintar('#0000ff')" onMouseOut="pintar('#ffffff')">Azul</a>
</body>
</html>

Las llamadas a las funciones las hacemos inicializando las propiedades onMouseOver y onMouseOut:

<a href="pagina1.html" onMouseOver="pintar('#ff0000')" 
onMouseOut="pintar('#ffffff')">Rojo</a>

La función 'pintar' recibe el color e inicializa la propiedad bgColor del objeto document.

function pintar(col)
{
  document.bgColor=col;
}

Otro problema que podemos probar es pinta de color el interior de una casilla de una tabla y regresar a su color original cuando salimos de la misma:

<html>
<head></head>
<body>
<script type="text/javascript">
  function pintar(objeto,col)
  {
    objeto.bgColor=col;
  }
</script>

<table border="1">
<tr>
<td onMouseOver="pintar(this,'#ff0000')" onMouseOut="pintar(this,'#ffffff')">rojo</td>
<td onMouseOver="pintar(this,'#00ff00')" onMouseOut="pintar(this,'#ffffff')">verde</td>
<td onMouseOver="pintar(this,'#0000ff')" onMouseOut="pintar(this,'#ffffff')">azul</td>
</tr>
</table>
</body>
</html>

La lógica es bastante parecida a la del primer problema, pero en éste, le pasamos como parámetro a la función, la referencia a la casilla que queremos que se coloree (this):

<td onMouseOver="pintar(this,'#ff0000')" onMouseOut="pintar(this,'#ffffff')">rojo</td>

Javascript Parte XXX

El evento onFocus se dispara cuando el objeto toma foco y el evento onBlur cuando el objeto pierde el foco.
Ejemplo: Implementar un formulario que solicite la carga del nombre y la edad de una persona. Cuando el control tome foco borrar el contenido actual, al abandonar el mismo, mostrar un mensaje de alerta si el mismo está vacío. Mostrar en las propiedades value de los controles text los mensajes "nombre" y "mail" respectivamente.

<html>
<head></head>
<body>
<script type="text/javascript">
function vaciar(control)
{
  control.value='';
}
function verificarEntrada(control)
{
  if (control.value=='')
    alert('Debe ingresar datos');
}
</script>

<form>
<input type="text" id="nombre" onFocus="vaciar(this)" onBlur="verificarEntrada(this)" value="nombre"><br>
<input type="text" id="edad" onFocus="vaciar(this)" onBlur="verificarEntrada(this)" value="mail">
<br>
<input type="button" value="Confirmar">
</form>

</body>
</html>

A cada control de tipo TEXT le inicializamos los eventos onFocus y onBlur. También cargamos las propiedad value para mostrar un texto dentro del control. Le indicamos, para el evento onFocus la función vaciar, pasando como parámetro la palabra clave this que significa la dirección del objeto que emitió el evento. En la función propiamente dicha, accedemos a la propiedad value y borramos su contenido. Esto nos permite definir una única función para vaciar los dos controles.
De forma similar, para el evento onBlur llamamos a la función verificarEntrada donde analizamos si se ha ingresado algún valor dentro del control, en caso de tener un string vacío procedemos a mostrar una ventana de alerta.

Javascript Parte XXIX

Este control es similar al control TEXT, salvo que permite el ingreso de muchas líneas de texto.
La marca TEXTAREA en HTML tiene dos propiedades: rows y cols que nos permiten indicar la cantidad de filas y columnas a mostrar en pantalla.
Ejemplo: Solicitar la carga del mail y el curriculum de una persona. Mostrar un mensaje si el curriculum supera los 2000 caracteres.

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

<script type="text/javascript"> 
function controlarCaracteres()
{
  if (document.getElementById('curriculum').value.length>2000)
  {
    alert('curriculum muy largo');
  }
  else
  {
    alert('datos correctos');
  }
}
</script>

<form>
<textarea id="curriculum" rows="10" cols="50" ></textarea>
<br>
<input type="button" value="Mostrar" onClick="controlarCaracteres()">
</form>
</body>
</html>

Para saber el largo de la cadena cargada:

  if (document.getElementById('curriculum').value.length>2000)

accedemos a la propiedad length.

Javascript Parte XXVIII

Los objetos RADIO tienen sentido cuando disponemos varios elementos. Sólo uno puede estar seleccionado del conjunto.
Ejemplo: Mostrar cuatro objetos de tipo RADIO que permitan seleccionar los estudios que tiene un usuario:

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

<script type="text/javascript"> 
  function mostrarSeleccionado()
  {
    if (document.getElementById('radio1').checked)
    {
      alert('no tienes estudios');
    }
    if (document.getElementById('radio2').checked)
    {
      alert('tienes estudios primarios');
    }
    if (document.getElementById('radio3').checked)
    {
      alert('tienes estudios secundarios');
    }
    if (document.getElementById('radio4').checked)
    {
      alert('tienes estudios universitarios');
    }
  }
</script>

<form>
<input type="radio" id="radio1" name="estudios">Sin estudios
<br>
<input type="radio" id="radio2" name="estudios">Primarios
<br>
<input type="radio" id="radio3" name="estudios">Secundarios
<br>
<input type="radio" id="radio4" name="estudios">Universitarios
<br>
<input type="button" value="Mostrar" onClick="mostrarSeleccionado()">
</form>
</body>
</html>

Es importante notar que todos los objetos de tipo RADIO tienen definida la propiedad name con el mismo valor (esto permite especificar que queremos que los radios estén relacionados entre si)
Luego podemos acceder a cada elemento mediante el método getElementById para consultar la propiedad checked:

   if (document.getElementById('radio1').checked)
    {
      alert('no tienes estudios');
    }

Igual que el checkbox, la propiedad checked retorna true o false, según esté o no seleccionado el control radio.

Javascript Parte XXVII

El control CHECKBOX es el cuadradito que puede tener dos estados (seleccionado o no seleccionado).
Para conocer su funcionamiento y ver como podemos acceder a su estado desde Javascript haremos un pequeña página.
Ejemplo: Confeccionar una página que muestre 4 lenguajes de programación que el usuario puede seleccionar si los conoce. Luego mostrar un mensaje indicando la cantidad de lenguajes que ha seleccionado el operador.

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

<script type="text/javascript"> 
function contarSeleccionados()
{
  var cant=0;
  if (document.getElementById('checkbox1').checked)
  {
    cant++;
  }
  if (document.getElementById('checkbox2').checked)
  {
    cant++;
  }
  if (document.getElementById('checkbox3').checked)
  {
    cant++;
  }
  if (document.getElementById('checkbox4').checked)
  {
    cant++;
  }
  alert('Conoce ' + cant + ' lenguajes');
}
</script>

<form>
<input type="checkbox" id="checkbox1">JavaScript
<br>
<input type="checkbox" id="checkbox2">PHP
<br>
<input type="checkbox" id="checkbox3">JSP
<br>
<input type="checkbox" id="checkbox4">VB.Net
<br>
<input type="button" value="Mostrar" onClick="contarSeleccionados()">
</form>
</body>
</html>

Cuando se presiona el botón se llama a la función Javascript contarSeleccionados(). En la misma verificamos uno a uno cada control checkbox accediendo a la propiedad checked del elemento que almacena true o false según esté o no seleccionado el control:
Disponemos un 'if' para cada checkbox:

  if (document.getElementById('checkbox1').checked)
  {
    cant++;
  }

Como la propiedad checked almacena un true o false podemos utilizar dicho valor directamente como valor de la condición en lugar de codificar:

  if (document.getElementById('checkbox1').checked==true)
  {
    cant++;
  }

Al contador 'cant' lo definimos e inicializamos en cero previo a los cuatro if. Mostramos finalmente el resultado final.