InfoTic: mayo 2017

martes, 9 de mayo de 2017

Javascript Parte XLI

Podemos crear vectores con componente de tipo objeto.
Con un ejemplo veremos la sintaxis para trabajar con los mismos. Desarrollaremos una clase que represente un hipervínculo y luego definiremos un vector con componentes de tipo hipervinculo.
La clase hipervínculo es:

<script type="text/javascript">
  function Hipervinculo(direccion,titulo)
  {
    this.direccion=direccion;
    this.titulo=titulo;
    this.retornarhipervinculo=retornarhipervinculo;
  }

  function retornarhipervinculo()
  {
    var cadena;
    cadena='<a href=' + this.direccion + '>' + this.titulo + '</a>';
    return cadena;
  }
</script>

Luego el bloque donde se usa la clase Hipervínculo es:

<script type="text/javascript">
  var vector=new Array(3);
  vector[0]=new Hipervinculo('http://www.google.com','google');
  vector[1]=new Hipervinculo('http://www.msn.com','msn');
  vector[2]=new Hipervinculo('http://www.yahoo.com','yahoo');
  for(var f=0;f<vector.length;f++)
  {
    document.write(vector[f].retornarhipervinculo());
    document.write('<br>');
  }
</script>

Creamos un objeto de la clase Array y luego guardamos en cada componente un objeto de la clase hipervínculo (pasándole como parámetros al constructor, la dirección del sitio y el texto a mostrar en la página. Luego recorremos con un 'for' las componentes del vector e imprimimos en la página cada hipervínculo.

Javascript Parte XL

En JavaScript podemos definir varias clases en un mismo programa.
Vamos a desarrollar un programa que contenga dos clases. Plantearemos una clase Numeroquiniela que representa una persona que elige un número de quiniela y además registra su nombre, la clase tiene por objetivo la carga por el teclado del número deseado.
Por otra parte crearemos una clase Bolillero que sortee un valor aleatorio entre 1 y 10 (que representa el valor extraído del bolillero).
La codificación de las dos clases es:

<html>
<head>
<title>Problema</title>
<script type="text/javascript">

  //clase Numeroquiniela ************************************************
  function Numeroquiniela(nombre)
  {
    this.nombre=nombre;
    this.cargarnumero=cargarnumero;
    this.verificarsigano=verificarsigano;
  }

  function cargarnumero()
  {
    this.numero=prompt("Que número de quiniela quiere?","");
  }

  function verificarsigano(num)
  {
    if (this.numero==num)
      return true;
    else
      return false;
  }

  //clase Bolillero ************************************************
  function Bolillero()
  {
    this.numero=-1;
    this.sortear=sortear;
  }
  
  function sortear()
  {
    this.numero=parseInt(Math.random()*10)+1;
  }

</script>
</head>
<body>

<script type="text/javascript">
  var numeroquiniela1;
  numeroquiniela1=new Numeroquiniela("juan");
  numeroquiniela1.cargarnumero();
  var numeroquiniela2;
  numeroquiniela2=new Numeroquiniela("ana");
  numeroquiniela2.cargarnumero();
  var bolillero;
  bolillero=new Bolillero();
  bolillero.sortear();
  document.write('Numero sorteado:' + bolillero.numero + '<br>');
  document.write(numeroquiniela1.nombre + ' eligió ' + numeroquiniela1.numero +'<br>');
  document.write(numeroquiniela2.nombre + ' eligió ' + numeroquiniela2.numero +'<br>');
  if (numeroquiniela1.verificarsigano(bolillero.numero))
  {
    document.write(numeroquiniela1.nombre + ' a ganado <br>');
  }
  if (numeroquiniela2.verificarsigano(bolillero.numero))
  {
    document.write(numeroquiniela2.nombre + ' a ganado <br>');
  }
</script>
</body>
</html>

Al constructor de la clase Numeroquiniela llega como parámetro el nombre de la persona que la compra (podíamos cargarlo por teclado al nombre también).
Al número que selecciona lo cargamos por teclado. La clase Numeroquiniela además tiene otra responsabilidad, que es avisarnos si a ganado según el número sorteado.
Por otro lado en la página html definimos dos objetos de la clase Numeroquiniela y uno de la clase Bolillero:

Javascript Parte XXXIX

El lenguaje JavaScript no es un lenguaje orientado a objetos completo, pero permite definir clases con sus atributos y responsabilidades. Finalmente nos permite definir objetos de estas clases.
Pero el otro pilar de la programación orientada a objetos, es decir la herencia, no está implementada en el lenguaje.
Veremos la sintaxis para la declaración de una clase y la posterior definición de objetos de la misma.

Desarrollaremos una clase que represente un cliente de un banco.
La clase cliente tiene como atributos:

nombre
saldo

y las responsabilidades o métodos de la clase son:

Constructor (inicializamos los atributos del objeto)
depositar
extraer

Luego debemos implementar los siguientes métodos (normalmente el constructor se utiliza el caracter mayúscula):

function Cliente(nombre,saldo)
{
  this.nombre=nombre;
  this.saldo=saldo;
  this.depositar=depositar;
  this.extraer=extraer;
}

function depositar(dinero)
{
  this.saldo=this.saldo+dinero;
}

function extraer(dinero)
{
  this.saldo=this.saldo-dinero;
}

El nombre de la clase coincide con el nombre de la función principal que implementamos (también llamado constructor de la clase):

function cliente(nombre,saldo)
{
  this.nombre=nombre;
  this.saldo=saldo;
  this.depositar=depositar;
  this.extraer=extraer;
}

A esta función llegan como parámetro los valores con que queremos inicializar los atributos. Con la palabra clave 'this' diferenciamos los atributos de los parámetros (los atributos deben llevar la palabra clave this)

  this.nombre=nombre;
  this.saldo=saldo;

También en el constructor inicializamos la referencia a todos los métodos que contendrá la clase (esto es muy importante y necesario para entender porque las otras dos funciones pertenecen a esta clase):

  this.depositar=depositar;
  this.extraer=extraer;

Por último, implementamos todos los métodos de la clase:

function depositar(dinero)
{
  this.saldo=this.saldo+dinero;
}

function extraer(dinero)
{
  this.saldo=this.saldo-dinero;
}

De nuevo recordemos que diferenciamos los atributos de la clase por la palabra clave this.

Ahora veamos el archivo HTML completo donde además definiremos un objeto de la clase planteada:

<html>
<head>
<title>Problema</title>

<script type="text/javascript">
  function Cliente(nombre,saldo)
  {
    this.nombre=nombre;
    this.saldo=saldo;
    this.depositar=depositar;
    this.extraer=extraer;
  }

  function depositar(dinero)
  {
    this.saldo=this.saldo+dinero;
  }

  function extraer(dinero)
  {
    this.saldo=this.saldo-dinero;
  }

</script>

</head>
<body>

<script type="text/javascript">
  var cliente1;
  cliente1=new Cliente('diego',1200);
  document.write('Nombre del cliente:'+cliente1.nombre+'<br>');
  document.write('Saldo actual:'+cliente1.saldo+'<br>');
  cliente1.depositar(120);
  document.write('Saldo luego de depositar $120---->'+cliente1.saldo+'<br>');
  cliente1.extraer(1000);
  document.write('Saldo luego de extraer $1000---->'+cliente1.saldo+'<br>'); 
</script>

</body>
</html>

Hemos dividido la declaración de la clase en un bloque Javascript distinto a donde definimos un objeto de la misma, esto no es obligatorio, pero podemos ver que queda más claro.

Para definir un objeto de la clase Cliente tenemos:

  var cliente1;
  cliente1=new Cliente('diego',1200);

Luego las llamadas a métodos le antecedemos el nombre del objeto llamado cliente1:

  document.write('Nombre del cliente:'+cliente1.nombre+'<br>');
  document.write('Saldo actual:'+cliente1.saldo+'<br>');
  cliente1.depositar(120);
  document.write('Saldo luego de depositar $120---->'+cliente1.saldo+'<br>');
  cliente1.extraer(1000);
  document.write('Saldo luego de extraer $1000---->'+cliente1.saldo+'<br>');

Podemos decir que la ventaja que podemos obtener con el planteo de clases es hacer nuestros programas mucho más organizados, entendibles y fundamentalmente, poder reutilizar clases en distintos proyectos.

Javascript Parte XXXVIII

El lenguaje JavaScript permite agrupar funciones y disponerlas en un archivo separado a la página HTML.
Esto trae muchos beneficios:
- Reutilización de funciones en muchos archivos. No tenemos que copiar y pegar sucesivamente las funciones en las páginas en las que necesitamos.
- Facilita el mantenimiento de las funciones al encontrarse en archivos separados.
- Nos obliga a ser más ordenados.

La mecánica para implementar estos archivos externos en JavaScript es:
1 - Crear un archivo con extensión *.js y tipear las funciones en la misma:

function retornarFecha()
{
  var fecha
  fecha=new Date();
  var cadena=fecha.getDate()+'/'+(fecha.getMonth()+1)+'/'+fecha.getYear();
  return cadena;
}

function retornarHora()
{
  var fecha
  fecha=new Date();
  var cadena=fecha.getHours()+':'+fecha.getMinutes()+':'+fecha.getSeconds();
  return cadena; 
}

2 - Creamos un archivo html que utilizará las funciones contenidas en el archivo *.js:

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>

<script type="text/javascript">
  document.write('La fecha de hoy es:'+retornarFecha());
  document.write('<br>');
  document.write('La hora es:'+retornarHora());
</script>

</body>
</html>

Es decir debemos disponer el siguiente código para importar el archivo *.js:

<script type="text/javascript" src="funciones.js"></script>

Mediante la propiedad src indicamos el nombre del archivo a importar.
Luego, podemos llamar dentro de la página HTML, a las funciones que contiene el archivo externo *.js; en nuestro ejemplo llamamos a las funciones retornarFecha() y retornarHora().
Como podemos ver, el archivo html queda mucho más limpio.
Si quiere probar en su equipo este ejemplo puede descargar el editor de texto NotePad++.

Tipear los dos archivos y los almacenamos en una carpeta del disco duro:
funciones.js
editor NotePad++

y la página html (pagina1.html):
editor NotePad++

Procedemos a abrir desde el navegador el archivo: pagina1.html y veremos como se llaman las funciones contenidas en el archivo js:
archivos externos js

Javascript Parte XXXVII

Contiene información sobre el navegador web. La implementación de este objeto varía entre navegadores (IExplorer, FireFox, Opera, etc.)
Las propiedades comunes a estos navegadores son:

appName : almacena el nombre oficial del navegador.
appVersion : almacena la versión del navegador.
cookieEnabled : almacena si las cookies están activas en el navegador.
platform : almacena la plataforma donde el navegador se está ejecutando.
plugins : almacena un array de los plugin cargados en el navegador.

Este pequeño programa muestra los valores de las propiedades antes anunciadas:

<html>
<head>
<title>Problema</title>
</head>
<body>

<script type="text/javascript">
  document.write('Valores de las propiedades del objeto navigator:<br>');
  document.write('appName :' + navigator.appName + '<br>');
  document.write('appVersion :' + navigator.appVersion + '<br>');
  document.write('cookieEnabled :' + navigator.cookieEnabled + '<br>');
  document.write('plugins :' + navigator.plugins.length + '<br>');
  </script>

</body>
</html>