InfoTic

jueves, 2 de marzo de 2017

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.

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>

martes, 3 de enero de 2017

Javascript Parte XXI

Esta clase es 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 type="text/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)

Javascript Parte XX

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 type="text/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 type="text/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]);

Javascript Parte XIX

JavaScript dispone de varias clases predefinidas 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 type="text/javascript">
  function mostrarFechaHora()
  {
    var fecha
    fecha=new Date();
    document.write('Hoy es ');
    document.write(fecha.getDate()+'/');
    document.write((fecha.getMonth()+1)+'/');
    document.write(fecha.getFullYear());
    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)