InfoTic: enero 2017

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)

Javascript Parte XVIII

Un objeto es una estructura que contiene tanto las variables (llamadas propiedades) como las funciones que manipulan dichas variables (llamadas métodos). A partir de esta estructura se ha creado un nuevo modelo de programación (la programación orientada a objetos) que atribuye a los mismos propiedades como herencia o polimorfismo. Como veremos, JavaScript simplifica en algo este modelo y hace una programación híbrida entre la programación estructurada y la programación orientada a objetos.
El modelo de la programación orientada a objetos normal y corriente separa los mismos en dos: clases e instancias (objetos). Las primeras son entes más abstractos que definen un conjunto determinado de objetos. Las segundas son miembros de una clase, poseyendo las mismas propiedades que la clase a la cual pertenecen.

Propiedades y métodos.
Para acceder a los métodos y propiedades de un objeto debemos utilizar la siguiente sintaxis:
objeto.propiedad
objeto.metodo(parametros)

Conceptos Básicos.
Objetos
Son todas las cosas con identidad propia. Se relacionan entre si. Poseen características (atributos) y tienen responsabilidades (funciones, métodos) que deben cumplir. Son ejemplares (instancias) de una clase y conocen a la clase a la cual pertenecen.

Atributos o propiedades
Son las características, cualidades distintivas de cada objeto. Deben ser mínimos para poder realizar todas las operaciones que requiere la aplicación.

Ejemplos de objetos del mundo real:

 - Casa: 
           atributos: tamaño, precio, cantidad de habitaciones, etc.;
    responsabilidades: comodidad, seguridad, etc.
 - Mesa: 
           atributos: altura, largo, ancho, etc.;
    responsabilidades: contener elementos.
 - Ventana:
           atributos: tamaño, color, etc.;
    responsabilidades: abrirse, cerrarse, etc.

Ejemplos de objetos del mundo de la programación:

 - Ventana: 
             atributos: tamaño, color, etc.;
           responsabilidades: mostrar título,achicarse
                                etc.

Responsabilidades o Métodos.
Son las responsabilidades que debe cumplir la clase. El objetivo de un método es ejecutar las actividades que tiene encomendada la clase.
Es un algoritmo (conjunto de operaciones) que se ejecuta en respuesta a un mensaje; respuestas a mensajes para satisfacer peticiones.
Un método consiste en el nombre de la operación y sus argumentos. El nombre del método identifica una operación que se ejecuta.
Un método está determinado por la clase del objeto receptor, todos los objetos de una clase usan el mismo método en respuesta a mensajes similares.
La interpretación de un mensaje (selección del método ejecutado) depende del receptor y puede variar con distintos receptores, es decir, puede variar de una clase a otra.

Clases
Una clase es un molde para objetos que poseen las mismas características (que pueden recibir los mismos mensajes y responden de la misma manera).
Una clase es una representación de una idea o concepto. Unidad que encapsula códigos y datos para los métodos (operaciones).
Todos los ejemplares de una clase se comportan de forma similar (invocan el mismo método) en respuesta a mensajes similares.
La clase a la cual pertenece un objeto determina el comportamiento del objeto.
Una clase tiene encomendadas actividades que ejecutan los métodos.
Las clases están definidas por:

 - Atributos (Propiedades),
 - Comportamiento (operaciones o métodos) y
 - Relaciones con otros objetos.

Una aplicación es un conjunto de objetos de determinadas clases.

Javascript Parte XVII

Son comunes los casos donde una función, luego de hacer un proceso, retorne un valor.
Ejemplo 1: Confeccionar una función que reciba un valor entero comprendido entre 1 y 5. Luego retornar en castellano el valor recibido.

<html>
<head>
</head>
<body>
<script type="text/javascript">

  function convertirCastellano(x)
  {
    if (x==1)
      return "uno";
    else
      if (x==2)
        return "dos";
      else
        if (x==3)
          return "tres";
        else
          if (x==4)
            return "cuatro";
          else
            if (x==5)
              return "cinco";
            else
              return "valor incorrecto";
  }

  var valor;
  valor=prompt("Ingrese un valor entre 1 y 5","");
  valor=parseInt(valor);
  var r;
  r=convertirCastellano(valor);
  document.write(r);

</script>
</body>
</html>

Podemos ver que el valor retornado por una función lo indicamos por medio de la palabra clave return. Cuando se llama a la función, debemos asignar el nombre de la función a una variable, ya que la misma retorna un valor.
Una función puede tener varios parámetros, pero sólo puede retornar un único valor.
La estructura condicional if de este ejemplo puede ser remplazada por la instrucción switch, la función queda codificada de la siguiente manera:

function convertirCastellano(x)
{
  switch (x) 
  {
    case 1:return "uno";
    case 2:return "dos";
    case 3:return "tres";
    case 4:return "cuatro";
    case 5:return "cinco";
    default:return "valor incorrecto";
  }
}

Esta es una forma más elegante que una serie de if anidados. La instrucción switch analiza el contenido de la variable x con respecto al valor de cada caso. En la situación de ser igual, ejecuta el bloque seguido de los 2 puntos hasta que encuentra la instrucción return o break.

Ejemplo 2: Confeccionar una función que reciba una fecha con el formato de día, mes y año y retorne un string con un formato similar a: "Hoy es 10 de junio de 2013".

<html>
<head>
</head>
<body>
<script type="text/javascript">

  function formatearFecha(dia,mes,año)
  {
    var s='Hoy es '+dia+' de ';
    switch (mes) {
    case 1:s=s+'enero ';
           break;
    case 2:s=s+'febrero ';
           break;
    case 3:s=s+'marzo ';
           break;
    case 4:s=s+'abril ';
           break;
    case 5:s=s+'mayo ';
           break;
    case 6:s=s+'junio ';
           break;
    case 7:s=s+'julio ';
           break;
    case 8:s=s+'agosto ';
           break;
    case 9:s=s+'septiembre ';
           break;
    case 10:s=s+'octubre ';
           break;
    case 11:s=s+'noviembre ';
           break;
    case 12:s=s+'diciembre ';
           break;
    } //fin del switch
    s=s+'de '+año;
    return s;
  }

  document.write(formatearFecha(11,6,2013));

</script>
</body>
</html>

Analicemos un poco la función formatearFecha. Llegan tres parámetros con el día, mes y año. Definimos e inicializamos una variable con:

    var s='Hoy es '+dia+' de ';

Luego le concatenamos o sumamos el mes:

s=s+'enero ';

Esto, si el parámetro mes tiene un uno. Observemos como acumulamos lo que tiene 's' más el string 'enero '. En caso de hacer s='enero ' perderíamos el valor previo que tenía la variable s.
Por último concatenamos el año:

    
s=s+'de '+año;

Cuando se llama a la función directamente, al valor devuelto se lo enviamos a la función write del objeto document. Esto último lo podemos hacer en dos pasos:

  var fec= formatearFecha(11,6,2013);
  document.write(fec);

Guardamos en la variable 'fec' el string devuelto por la función.