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)

18. Programación orientada a objetos.

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 una agrupación de objetos que comparten las mismas propiedades y comportamientos. 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.

sábado, 1 de octubre de 2011

17. Funciones que retornan un valor.

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 language="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 2003".

<html>
<head>
</head>
<body>
<script language="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,2006));
</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,2006);
  document.write(fec);
Guardamos en la variable 'fec' el string devuelto por la función.

PROBLEMAS

1 - Confeccionar una función a la cual le envíe tres enteros y retorne el mayor de ellos.

2 - Elaborar una función a la cual le envíe el valor del lado de un cuadrado y me retorne su perímetro.

3 - Desarrollar una función que retorne la cantidad de dígitos que tiene una variable entera positiva.

4 - Elaborar una función que reciba tres enteros y retorne el promedio.

5 - Confeccionar una función que solicite la carga de 5 valores por teclado y retorne su suma. 

16. Funciones con parámetros.

Explicaremos con un ejemplo, una función que tiene datos de entrada.

Ejemplo: Confeccionar una función que reciba dos números y muestre en la página los valores comprendidos entre ellos de uno en uno. Cargar por teclado esos dos valores.

<html>
<head>
</head>
<body>
<script language="javascript">
function mostrarComprendidos(x1,x2)
{
  var inicio;
  for(inicio=x1;inicio<=x2;inicio++)
  {
    document.write(inicio+' ');
  }
}
var valor1,valor2;
valor1=prompt('Ingrese valor inferior:','');
valor1=parseInt(valor1);
valor2=prompt('Ingrese valor superior:','');
valor2=parseInt(valor2);
mostrarComprendidos(valor1,valor2);
</script>
</body>
</html>
El programa de JavaScript empieza a ejecutarse donde definimos las  variables valor1 y valor2 y no donde se define la función. Luego de  cargar los dos valores por teclado se llama a la función  mostrarComprendidos y le enviamos las variables valor1 y valor2. Los  parámetors x1 y x2 reciben los contenidos de las variables valor1 y  valor 2.

Es importante notar que a la función la podemos llamar la cantidad de veces que la necesitemos.

PROBLEMAS

1 - Elaborar una función a la cual le enviemos tres enteros y muestre el menor.

2 - Confeccionar una función a la cual le envíe tres enteros y los muestre ordenados de menor a mayor. 

15. Funciones

En programación es muy frecuente que un determinado procedimiento de cálculo definido por un grupo de sentencias tenga que repetirse varias veces, ya sea en un mismo programa o en otros programas, lo cual implica que se tenga que escribir tantos grupos de aquellas sentencias como veces aparezca dicho proceso.

La herramienta más potente con que se cuenta para facilitar, reducir y dividir el trabajo en programación, es escribir aquellos grupos de sentencias una sola y única vez bajo la forma de una FUNCION.

Un programa es una cosa compleja de realizar y por lo tanto es importante que esté bien ESTRUCTURADO y también que sea inteligible para las personas. Si un grupo de sentencias realiza una tarea bien definida, entonces puede estar justificado el aislar estas sentencias formando una función, aunque resulte que sólo se le llame o use una vez.

Hasta ahora hemos visto como resolver un problema planteando un único algoritmo.
Con funciones podemos segmentar un programa en varias partes.

Frente a un problema, planteamos un algoritmo, éste puede constar de pequeños algoritmos.
Una función es un conjunto de instrucciones que resuelven una parte del problema y que puede ser utilizado (llamado) desde diferentes partes de un programa.

Consta de un nombre y parámetros. Con el nombre llamamos a la función, es decir, hacemos referencia a la misma. Los parámetros son valores que se envían y son indispensables para la resolución del mismo. La función realizará alguna operación con los parámetros que le enviamos. Podemos cargar una variable, consultarla, modificarla, imprimirla, etc.

Incluso los programas más sencillos tienen la necesidad de fragmentarse. Las funciones son los únicos tipos de subprogramas que acepta JavaScript. Tienen la siguiente estructura:

function <nombre de función>(argumento1, argumento2, ..., argumento n) 
{ 
  <código de la función> 
} 
Debemos buscar un nombre de función que nos indique cuál es su objetivo  (Si la función recibe un string y lo centra, tal vez deberíamos llamarla  centrarTitulo). Veremos que una función puede variar bastante en su  estructura, puede tener o no parámetros, retornar un valor, etc. 

Ejemplo: Mostrar un mensaje que se repita 3 veces en la página con el siguiente texto:

'Cuidado'
'Ingrese su documento correctamente'

'Cuidado'
'Ingrese su documento correctamente'

'Cuidado'
'Ingrese su documento correctamente'

La solución sin emplear funciones es:

<html>
<head>
</head>
<body>
<script language="javascript">
document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>");
document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>");
document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>");
</script>
</body>
</html>
Empleando una función:

<html>
<head>
</head>
<body>
<script languaje="javascript">
function mostrarMensaje()
{
  document.write("Cuidado<br>");
  document.write("Ingrese su documento correctamente<br>");
}
mostrarMensaje();
mostrarMensaje();
mostrarMensaje();
</script>
</body>
</html>
Recordemos que JavaScript es sencible a mayúsculas y minúsculas. Si fijamos como nombre a la función mostrarTitulo (es decir la segunda palabra con mayúscula) debemos respetar este nombre cuando la llamemos a dicha función.

Es importante notar que para que una función se ejecute debemos llamarla desde fuera por su nombre (en este ejemplo: mostrarMensaje()).

Cada vez que se llama una función se ejecutan todas las líneas contenidas en la misma.
Si no se llama a la función, las instrucciones de la misma nunca se ejecutarán.

A una función la podemos llamar tantas veces como necesitemos.

Las funciones nos ahorran escribir código que se repite con frecuencia y permite que nuestro programa sea más entendible.

14. Estructura repetitiva (for)

Cualquier problema que requiera una estructura repetitiva se puede resolver empleando la estructura while. Pero hay otra estructura repetitiva cuyo planteo es más sencillo en ciertas situaciones.

Esta estructura se emplea en aquellas situaciones en las cuales CONOCEMOS la cantidad de veces que queremos que se ejecute el bloque de instrucciones. Ejemplo: cargar 10 números, ingresar 5 notas de alumnos, etc. Conocemos de antemano la cantidad de veces que queremos que el bloque se repita.


Por último, hay que decir que la ejecución de la sentencia break dentro de cualquier parte del bucle provoca la salida inmediata del mismo.


Sintaxis:
for (<Inicialización> ; <Condición> ; <Incremento o Decremento>)
{
  <Instrucciones>
}
Esta estructura repetitiva tiene tres argumentos: variable de inicialización, condición y variable de incremento o decremento.


Funcionamiento:
- Primero se ejecuta por única vez el primer argumento .
          Por lo general se inicializa una variable.
 - El segundo paso es evaluar la (Condición), en caso de ser verdadera se ejecuta el bloque,
          en caso contrario continúa el programa.
 - El tercer paso es la ejecución de las instrucciones.
 - El cuarto paso es ejecutar el tercer argumento (Incremento o Decremento).
 - Luego se repiten sucesivamente del Segundo al Cuarto Paso.
Este tipo de estructura repetitiva se utiliza generalmente cuando  sabemos la cantidad de veces que deseamos que se repita el bloque. 

Ejemplo: Mostrar por pantalla los números del 1 al 10.
 
<html>
<head>
</head>
<body>
<script language="javascript">
var f;
for(f=1;f<=10;f++)
{
  document.write(f+" ");
}
</script>
</body>
</html>
Inicialmente f se la inicializa con 1. Como la condición se verifica  como verdadera se ejecuta el bloque del for (en este caso mostramos el  contenido de la variable f y un espacio en blanco). Luego de ejecutar el  bloque pasa al tercer argumento del for (en este caso con el operador  ++ se incrementa en uno el contenido de la variable f, existe otro  operador -- que decrementa en uno una variable), hubiera sido lo mismo  poner f=f+1 pero este otro operador matemático nos simplifica las cosas.

Importante: Tener en cuenta que no lleva punto y coma al final de los tres argumentos del for. El disponer un punto y coma provoca un error lógico y no sintáctico, por lo que el navegador no avisará.

PROBLEMAS

1 - Confeccionar un programa que lea 3 pares de datos, cada par de datos corresponde a la medida de la base y la altura de un triángulo. El programa deberá informar:
a) De cada triángulo la medida de su base, su altura y su superficie.
b) La cantidad de triángulos cuya superficie es mayor a 12.

2 - Desarrollar un programa que solicite la carga de 10 números e imprima la suma de lo últimos 5 valores ingresados.

3- Desarrollar un programa que muestre la tabla de multiplicar del 5 (del 5 al 50).

4 - Confeccionar un programa que permita ingresar un valor del 1 al 10 y nos muestre la tabla de multiplicar del mismo (los primeros 12 términos)
Ejemplo: Si ingreso 3 deberá aparecer en pantalla los valores 3, 6, 9, hasta el 36.

5 - Realizar un programa que lea los lados de 4 triángulos, e informar: a) De cada uno de ellos, qué tipo de triángulo es: equilátero (tres lados iguales), isósceles (dos lados iguales), o escaleno (ningún lado igual)
b) Cantidad de triángulos de cada tipo.
c) Tipo de triángulo del que hay menor cantidad.

6 - Escribir un programa que pida ingresar coordenadas (x,y) que representan puntos en el plano. Informar cuántos puntos se han ingresado en el primer, segundo, tercer y cuarto cuadrante. Al comenzar el programa se pide que se ingrese la cantidad de puntos a procesar.

7 - Se realiza la carga de 10 valores enteros por teclado. Se desea conocer: a) La cantidad de valores negativos ingresados.
b) La cantidad de valores positivos ingresados.
c) La cantidad de múltiplos de 15.
d) El valor acumulado de los números ingresados que son pares.

8 - Se cuenta con la siguiente información:
Las edades de 50 estudiantes del turno mañana.
Las edades de 60 estudiantes del turno tarde.
Las edades de 110 estudiantes del turno noche.
Las edades de cada estudiante deben ingresarse por teclado.
a) Obtener el promedio de las edades de cada turno (tres promedios).
b) Imprimir dichos promedios (promedio de cada turno).
c) Mostrar por pantalla un mensaje que indique cual de los tres turnos tiene un promedio de edades mayor.