Abstracción en la Programación – Curso de Programación Orientada a Objetos en 10 minutos #6

La abstracción es un tema poco visto cuando estamos en la universidad y estudiamos programación orientada a objetos. Se nos mencionan las clases abstractas, pero esto solo es parte de lo que es la abstracción. He decidido incluir este tema brevemente en este curso, ya que para mí esto es lo que hace la diferencia de un programador bueno de un programador malo, y no cuantos lenguajes de programación domine.

A lo largo de mi experiencia, he llegado a la conclusión que la abstracción nunca termina por mejorarse, y al momento que miras código tuyo de uno o dos años atrás y ves que es un desorden, esto quiere decir que has mejorado.

En breves palabras la abstracción es resumir o disminuir un elemento a lo que lo define sin incluir otros elementos, en este caso los objetos de la Programación Orientada a Objetos (POO). Para explicar esto siempre recurro al triangulo y al círculo, los dos son figuras geométricas, un triángulo tiene 3 lados y siempre tendrá 3 lados aquí y al otro lado del universo, y un circulo siempre será una línea conectada, esto es abstracción, se definen las figuras en una o dos líneas de descripción sin llegar a meternos en más detalle.

¿Pero esto para que nos sirve o qué? Sirve para hacer la diferencia de un mal programador a un buen o magnifico desarrollador de sistemas.

Ya dejando atrás el círculo y el triángulo veamos un ejemplo de día a día cuando se desarrolla un sistema.

Un sistema de ventas:

  • El cliente pide un sistema que tenga usuarios.
  • Los usuarios pueden ser clientes o vendedores o administradores.
  • Los usuarios tendrán un password para acceder al sistema.
  • Los clientes compran, los vendedores venden.

Lo que un programador con bajo nivel de abstracción hará es:

Creará una clase Administrador, una clase Cliente y una clase Vendedor y las tres tendrán el campo password el campo usuario y los métodos para autentificarse.

Por ejemplo:

Clase Administrador

class Administrador{
string usuario="";
string password="";

//todos los atributos de administrador por ejemplo
string nombre;
string apellido;

//etc

public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}

//aqui metodos de administrador etc...
}

Clase Cliente

class Cliente{
string usuario="";
string password="";

//todos los atributos de cliente por ejemplo
string nombre;
string apellido;
string empresa;
//etc

public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}

//metodos de cliente
}

Clase Vendedor

class Vendedor{
string usuario="";
string password="";

//todos los atributos de vendedor por ejemplo
string nombre;
string apellido;
string email;
decimal comision;
//etc

public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}

//metodos de vendedor
}

Y esto es normal, funcionara y el sistema para el usuario estará perfecto, el problema viene cuando vienen los cambios en el sistema, por ejemplo nos piden modificar el método de acceso al sistema, digamos antes se hacía la conexión directa, ahora se hará por un webservice y utilizar un certificado. Entonces la cosa se convierte en un cambio en 3 sitios distintos, más trabajo por falta de abstracción, y si es más trabajo es más tiempo por lo cual es más caro y por lo cual es más crítico a darse errores.

Cuando una persona tiene un nivel más alto de abstracción podrá pensar en métodos alternativos para evitar estos problemas, estos métodos nacen por la experiencia que se tienen en sistemas hechos anteriormente y es cuando hacemos cosas más organizadas con un nivel más alto de abstracción como el siguiente ejemplo, que nos ayudaremos de la herencia:

Clase Usuario

class Usuario{
string usuario="";
string password="";
public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}
}

Clase Administrador

class Administrador : Usuario{

//todos los atributos de administrador por ejemplo
string nombre;
string apellido;
}

Clase Cliente

class Cliente : Usuario{
//todos los atributos de cliente por ejemplo
string nombre;
string apellido;
string empresa;
//etc

//metodos de cliente
}

Clase Vendedor

class Vendedor : Usuario{

//todos los atributos de vendedor por ejemplo
string nombre;
string apellido;
string email;
decimal comision;
//etc

//metodos de vendedor
}

Nota: Los dos puntos (:) en c# sirven para heredar, lo mismo que en java es extends.

Como vemos los métodos de ingresos quedan en la clase Usuario de la cual todas las otras clases: Cliente, Administrador, Vendedor heredan, y esto ya muestra más madurez que las clases anteriores, ya que si surge un cambio en el ingreso solo tendríamos que modificar el metodo en la clase Usuario. Pero aun así podemos mejorarlo más analizando las similitudes de nuestras clases y viendo cómo podemos crear otra entidad por ejemplo una clase Persona que tenga el atributo nombre y apellido los cuales comparten las otras clases y a su vez que herede de Usuario.

El propósito de esta entrada es que ustedes como programadores no tomen a la ligera la manera que hacen y organizan su código, ya que esto puede ser la diferencia en ser un programador malo a uno bueno, a parte que si su código es formal y elegante puede ser fácil entendible por otro programador.

Con esto doy por terminado este curso de Programación Orientada a Objetos en 10 minutos, cualquier duda o comentario hágamelo saber en el apartado de comentarios o en el formulario de contacto.

Todo esto que hago es para todo los programadores que comienzan o de una u otra forma llegaron a un problema que yo ya solucione, y los comentarios son una motivación para mí. Gracias lector por visitar mi sitio web.

Ir Capítulo Anterior (5.- Polimorfismo)

Ejecutar código #javascript ya cargadas todas las imágenes con #jquery

En algunas ocasiones tenemos la necesidad de ejecutar algún código javascript hasta que este cargado todo el DOM pero también cargadas todas las imágenes, comúnmente utilizamos:

$(document).ready(function(){    
//script que se ejecuta cuando se cargo el DOM
});

Pero nos damos cuenta que se ejecuta aunque no se hayan cargado las imágenes y es por el hecho de que el DOM ya está cargado ósea el código que plasma esa imagen (<img>).

Para poder lograr que se ejecute un script terminando de cargar DOM e imágenes basta con utilizar:

$(window).load(function(){
    //script que se ejecuta cuando se cargo el DOM y las IMAGENES
})

¿Cómo funciona la función closest() de jquery? #ejemplos #jquery

La función closest de jquery, sirve para seleccionar un padre de un elemento que coincida con el selector dado.
A diferencia de parent() (ver como funciona parent()), esta función nos permite ir hasta el nivel deseado ya sea por una clase, id o el nombre de la etiqueta.

Su funcionalidad es parecida a find() (ver cómo funciona find()) solo que funciona en sentido inverso, yendo a los padres en lugar de a los hijos.

Esta función solo nos seleccionara el primer elemento encontrado con el selector dado.
A continuación muestro un ejemplo de como funciona closest():

Código HTML

<div class="abuelo">
  <div>
    <input id="hijo1" type="text" value="Soy el hijo 1" />

    <input id="hijo2" type="text" value="Soy el hijo 2" />
  </div>
</div>

Código Jquery

$(document).ready(function(){
		//asi seleccionamos el hijo1
		hijo1=$("#hijo1");

		//de esta manera podemos seleccionar a padre por medio de closest()
		padre=hijo1.closest("div");

		//mostramos el contenido html para confirmar que seleccionamos el div padre
		alert(padre.html())

		//asi seleccionamos al abuelo mediante su clase
		abuelo=hijo1.closest(".abuelo")

		//mostramos html del abuelo
		alert(abuelo.html())
	})

5.- Polimorfismo – Curso de Programación Orientada a Objetos en 10 Minutos #5

El polimorfismo (palabra rara), es la manera de invocar una acción a que tenga distintos comportamientos dependiendo del contexto con el que se utiliza. Más simple. El polimorfismo es la posibilidad que un método (función) pueda tener distinto comportamiento a partir de los parámetros que se envían (sobrecarga), o a partir de la manera que se invoca (sobreescritura).

El término es un poco complicado, y es un problema para todos los que desean aprender Programación Orientada a Objetos, pero en realidad, es más fácil de lo que se escucha, y para ello veamos primero que es la sobrecarga.

Sobreescritura

Cuando utilizamos la herencia, al heredar de una clase podemos utilizar sus métodos (siempre y cuando no estén protegidos, mas adelante veremos eso), y puede haber ocasiones en las cuales el método del padre no sea de nuestra utilidad y debamos crear uno nuevo con el mismo nombre, para ello utilizamos la Sobreecritura.

Veamos el siguiente ejemplo con las clases del capítulo anterior:

Clase Transporte

 public class Transporte
    {
        public int velocidadMaxima = 0;
        public int pasajeros = 0;

        public virtual void Camina()
        {
            //definición del metodo camina
            Console.WriteLine("metodo llamado desde transporte");
        }

    }

Clase Auto

    public class Auto : Terrestre
    {
        public int puertas = 0;

        public Auto(int pasajeros,int velocidadMaxima,int numeroLlantas, int puertas)
        {
            //atributos de la clase Transporte
            this.pasajeros = pasajeros;
            this.velocidadMaxima = velocidadMaxima;

            //atributos de la clase Terrestre
            this.numeroLlantas = numeroLlantas;

            //atributos de esta clase
            this.puertas = puertas;
        }

        public override void Camina()
        {
            Console.WriteLine("Metodo llamado desde clase Auto");
        }

    }

Para utilizar la sobreescritura debemos definir el método del padre con la palabra virtual o abstract , y esto permitirá que podamos remplazarlo por medio del hijo. Para remplazarlo en el hijo utilizamos la palabra reservada override, y con eso se remplaza el método, y cuando utilicemos la función utilizaremos la del Hijo.

Nota: cuando utilizamos abstract nos referimos a un método abstracto, el cual no puede ser utilizado, en cambio virtual si puede ser utilizado, igual lo veremos en el capítulo de abstracción a más detalle.

Sobrecarga

Existen ocasiones en las cuales un método pueda tener varias funciones dependiendo el contexto que se envía, para ello existe la Sobrecarga, la cual nos permite crear métodos con el mismo nombre, solo basta con que reciban distintos parámetros, y con ello en la ejecución se llama el adecuado.

Para ello veamos el siguiente ejemplo con las clases del capitulo anterior:

Clase Auto

public class Auto : Terrestre
    {
        public int puertas = 0;

        public Auto(int pasajeros,int velocidadMaxima,int numeroLlantas, int puertas)
        {
            //atributos de la clase Transporte
            this.pasajeros = pasajeros;
            this.velocidadMaxima = velocidadMaxima;

            //atributos de la clase Terrestre
            this.numeroLlantas = numeroLlantas;

            //atributos de esta clase
            this.puertas = puertas;
        }

        public override void Camina()
        {
            Console.WriteLine("Metodo llamado desde clase Auto");
        }

        //metodo sobrecargado
        public void Camina(int metros)
        {
            Console.WriteLine("Metodo que recibe un entero "+metros);
        }
    }

Y por ultimo utilizando el siguiente código, podemos crear nuestro objeto Auto y este puede invocar los dos métodos Camina, y dependiendo al parámetro se ejecuta el adecuado.

 class Program
    {
        static void Main(string[] args)
        {

            //Clase Auto utilizando sobreescritura y sobrecarga
            Auto miCarro = new Auto(4, 200, 4, 4);

            //sobreescritura
            miCarro.Camina();

            //sobrecarga
            miCarro.Camina(1);

        }
    }

Ir Capítulo Siguiente (6.- Abstracción en la programación)

Ir Capítulo Anterior (4.- Herencia)

4.- Herencia – Curso de Programación Orientada a Objetos en 10 Minutos #4

En la Programación Orientada a Objetos, existe un concepto con el cual podemos tener un gran potencial a la hora de realizar grandes sistemas, su nombre es La Herencia.

La herencia en POO, nos sirve para organizar nuestra lógica en la creación de clases, ahorrar métodos, y tener una manera abstracta de programar.

Una descripción sencilla de Herencia es: La creación de una clase a partir de una ya existente (clase padre), teniendo la clase nueva la funcionalidad de su padre (dependiendo de su encapsulamiento, lo veremos en los próximos capítulos), y a la cual se le pueden crear nuevos métodos y atributos. Esto nos permite ahorrar código y no repetirlo; si una clase que ya creamos hace lo que deseamos pero aparte tenemos la necesidad de nueva funcionalidad, utilizamos la herencia.

Veamos el siguiente ejemplo, en el cual utilizo los medios de transporte, y como organizaríamos algo rápido para crear una clase auto:

diagrama clases auto

Cada cuadro representa una Clase, en la parte superior tenemos la clase padre Transporte, de la cual heredan la clase Marino, Terrestre y Aéreo, a su vez tenemos una clase de nombre Auto la cual hereda de la clase Terrestre. Y para ver un poco de las ventajas, cuando programamos esto, veamos las 5 clases a continuación.

Clase Transporte

   class Transporte
    {
        public int velocidadMaxima = 0;
        public int pasajeros = 0;

        public void camina()
        {
            //definición del metodo camina
        }

    }

Clase Terrestre

  class Terrestre : Transporte
   {
      public int numeroLlantas = 0;
   }

Clase Aéreo

 class Aereo : Transporte
    {
        public int numeroAlas = 0;
    }

Clase Marino

   class Marino : Transporte
    {
        public int numeroHelices = 0;
    }

Clase Auto

  class Auto : Terrestre
    {
        public int puertas = 0;

        public Auto(int pasajeros,int velocidadMaxima,int numeroLlantas, int puertas)
        {
            //atributos de la clase Transporte
            this.pasajeros = pasajeros;
            this.velocidadMaxima = velocidadMaxima;

            //atributos de la clase Terrestre
            this.numeroLlantas = numeroLlantas;

            //atributos de esta clase
            this.puertas = puertas;
        }
    }

Podemos observar que las clases que son hijas en el momento de definirías tenemos dos puntos(:) seguido de la clase que heredan, de esta manera realizamos la Herencia.

Ahora veamos cómo se utiliza como instancia el auto y sus métodos heredados:

   class Program
    {
      static void Main(string[] args)
        {
            //Clase Auto utilizando herencia
            Auto miCarro = new Auto(4, 200, 4, 4);
            miCarro.camina();

        }
   }

Estoy utilizando el método camina(), el cual está definido en la clase Transporte, de esta manera podemos reutilizar código sin volverlo a copiar o rehacer, pero esto no es todo, en los siguientes capitulo veremos más cosas útiles que se pueden realizar con la POO (Programación Orientada a Objetos).

Ir Capítulo Siguiente (5.- Polimorfismo (Sobrecarga y Sobreescritura))

Ir Capítulo Anterior (3.- Constructor)

3.- Constructor – Curso de Programación Orientada a Objetos en 10 Minutos #3

Un constructor nos sirve para crear un objeto, es un método especial el cual no regresa un valor y tiene el mismo nombre de la clase; cada que creamos un objeto utilizamos la palabra new seguido del nombre de la clase, en ese momento estamos invocando el constructor; se preguntaran como invocamos el constructor en el capitulo anterior si no lo definimos, pues, existe un constructor por defecto el cual no recibe ningún parámetro y así si no definimos constructor ya existe uno es por eso que podemos invocar un constructor sin parámetros aunque no lo hayamos definido.

Los constructores pueden ser mas de uno en la misma clase, siempre y cuando reciban distintos parámetros.

Pero la duda que sale ahora es: ¿Para que me sirve un constructor?, sencillamente para obligar que en la creación de un objeto se reciban ciertos parámetros necesarios y así evitar que nuestro objeto funcione mal, por ejemplo veamos el código del capítulo anterior donde creamos una galleta:

 

class Galleta {
    public int cantidadHarina;
    public int cantidadDeAgua;
    public int tiempoDeHorneado;
    public string nombreGalleta;

    private int tiempoHorneada;

    public void Hornear() {
        for (int i = 0; i < tiempoDeHorneado; i++) {
            tiempoHorneada++;
        }
        System.Console.WriteLine("Horneada la galleta");
    }
}

Si vemos este código, que pasaría si yo no defino el atributo tiempoDeHorneado y después invoco el método Hornear(), simplemente no tendría una funcionalidad definida ya que mi atributo no valdría nada por lo cual no se hornearía. Para ello cambiemos el código para que obliguemos al programador a enviar ese atributo, de la siguiente manera:

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

        private int tiempoHorneada;

        //constructor
        public Galleta(int tiempoDeHorneado)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
        }

        public void Hornear()
        {
            for (int i = 0; i &lt; tiempoDeHorneado;i++ )
            {
                tiempoHorneada++;
            }
            System.Console.WriteLine("Horneada la galleta");
        }
    }

En este código vemos que agregue un nuevo método de nombre Galleta y el cual recibe un entero, también utilizo la palabra reservada this, esta palabra nos sirve para indicar que estamos haciendo referencia a la variable de la clase, y si vemos recibimos una variable de mismo nombre, si no utilizamos la palabra this, hacemos referencia a la que recibimos como argumento, y lo que hago es simplemente darle el valor que recibo a mi atributo de la clase Galleta, y así poder utilizarlo dentro de mis métodos.

Nota: Cuando se define un constructor, el constructor por defecto ya no existe y obligamos a utilizar solo los constructores que existen en nuestra clase (ya no podemos utilizar Galleta() sin parámetros ya que definí un constructor con parámetro).

Y a continuación les muestro la forma en cómo utilizaríamos el constructor, y es la siguiente:

 class Program
    {
        static void Main(string[] args)
        {
            Galleta miGalleta = new Galleta(100);
            miGalleta.nombreGalleta = "chocochips";
            miGalleta.cantidadDeAgua = 10;
            miGalleta.cantidadHarina = 10;
            miGalleta.Hornear();

            //linea para poder ver el texto de el metodo hornear
            Console.ReadLine();
        }
    }

Cuando creamos un proyecto tipo consola en Visual Studio, la clase Program se crea por defecto y esta contiene el método Main, el cual es el que se ejecuta cuando corremos el proyecto.

Recuerda que puedes definir muchos más constructores siempre y cuando tengan distintos parámetros ya sea en cantidad de estos o distinto tipo de dato. Por ejemplo podríamos crear un constructor para obligar a que el programador envié el nombre, la cantidad de harina y la cantidad de agua, y ya decida cual utilizar, y para ello nos quedaría nuestra clase Galleta de la siguiente forma:

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

        private int tiempoHorneada;

        //constructor
        public Galleta(int tiempoDeHorneado)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
        }
        //constructor 2
        public Galleta(int tiempoDeHorneado,string nombreGalleta,int cantidadHarina, int cantidadDeAgua)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
            this.nombreGalleta = nombreGalleta;
            this.cantidadHarina = cantidadHarina;
            this.cantidadDeAgua = cantidadDeAgua;
        }

        public void Hornear()
        {
            for (int i = 0; i &lt; tiempoDeHorneado;i++ )
            {
                tiempoHorneada++;
            }
            System.Console.WriteLine("Horneada la galleta");
        }
    }

Ir Capítulo Siguiente (4.- Herencia)

Ir Capítulo Anterior (2.- Clases y Objetos)

2.- Clases y Objetos – Curso de Programación Orientada a Objetos en 10 MINUTOS #2

En la Programación Orientada a Objetos existen dos conceptos que son los principales, los cuales siempre que se hable de este paradigma no se pueden evitar, y hablo de las clases y los objetos.

Una clase se es la entidad en la cual definimos el comportamiento y la definición de un objeto.

Un objeto es una instancia de una clase, es la entidad tangible que contiene los valores y realiza las acciones.

Una clase contiene atributos y métodos con los cuales identificamos a nuestro objeto. El objeto al crearse adquiere todas estas características y funcionalidades y puede hacer uso de ellas.

En palabras más simples, una clase es el molde con el cual creamos un objeto en específico. Por ejemplo:

class MiObjeto(){
    //código aqui
}

Deseamos crear un objeto tipo galleta, sabemos que las galletas tienen una forma, un sabor, un tiempo de horneado, una cantidad de harina, agua y muchas otras cosas. Para crear este objeto necesitaremos de una clase la cual sea el molde de estas galletas que vamos a crear, y para ello recurrimos a crearla con la siguiente sintaxis en c#  (cree un proyecto tipo Aplicación de Consola en Visual Studio):

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

    }

La palabra class nos indica que es una clase, y dentro de esta tenemos atributos(los cuales no son todos los de una galleta  pero nos sirve para entender de que se trata), los atributos son 3 enteros que indican la cantidad de harina, cantidad de agua, y el tiempo de horneado, y también tenemos un atributo tipo cadena que nos indica el nombre de nuestra galleta (chocochips, animalito, emperador).

Nota: la palabra public y private mas adelante las explicare, por ahora no tienen mucha importancia.

Pero una galleta también tiene acciones, por lo menos en su preparación y para ello necesitamos de métodos, ahora la clase le agrego el método hornear() y quedaría de la siguiente forma:

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

        private int tiempoHorneada;

        public void Hornear()
        {
            for (int i = 0; i &lt; tiempoDeHorneado;i++ )
            {
                tiempoHorneada++;
            }
            System.Console.WriteLine("Horneada la galleta");
        }
    }

Agregue un nuevo atributo (tiempoHorneada) para saber cuánto tiempo lleva horneada y cómo podemos ver hay un método el cual es un ciclo for el cual depende de el atributo tiempoDeHorneado.

Ya tenemos nuestra clase ahora veamos cómo se utiliza para crear un objeto y es de la siguiente manera:


  //creamos el objeto
  Galleta miGalleta = new Galleta();

  //agregamos sus valores a los atributos
  miGalleta.nombreGalleta = "chocochips";
  miGalleta.tiempoDeHorneado = 100;
  miGalleta.cantidadDeAgua = 10;
  miGalleta.cantidadHarina = 10;

  //horneamos la galleta invocando el metodo hornear()
  miGalleta.Hornear();

Como pudimos observar la creación de un objeto simplemente se realiza con el nombre de nuestra clase seguido del nombre que deseamos agregar a nuestra instancia (objeto) y seguido de el símbolo = (igual) y la palabra new mas el nombre de nuestro objeto nuevamente seguido de paréntesis. En el siguiente tema (constructores) veremos que significa la palabra new y por qué se pone el nombre de nuestro objeto seguido de paréntesis para la creación de un objeto.

Ir Capítulo Siguiente (3.- Constructor)

Ir Capítulo Anterior (1.- Introducción a La Programación Orientada a Objetos (POO))

1.- Introducción a la Programación Orientada a Objetos (POO) – Curso de Programación Orientada a Objetos en 10 Minutos #1

La Programación Orientada a Objetos (POO así la abreviaremos) nace por la necesidad de representar el mundo en el que habitamos (junto a sus problemas) por medio de objetos como nosotros los percibimos, con sus propiedades y funcionalidades, de esta forma es más fácil para los programadores organizar su código y tener una manera elegante con la cual realizar los sistemas. Uno de los lemas de este paradigma de programación es: “divide y vencerás”, lo cual nos da a entender que no tenemos que llenar líneas y líneas de códigos con funciones y perder el hilo de lo que estamos haciendo (como solía ser en la programación estructurada), si no que organizamos los objetos del sistema de forma abstracta junto a las acciones que pueden hacer y las iteraciones que tienen con los demás objetos.

Para darnos una idea rápida de que trata este paradigma, imaginemos que deseamos representar un medio de transporte (avión, barco, automóvil), el sentido común del humano rápidamente nos dice que nos sirve para trasladarnos, que se mueve a cierta velocidad, que frena, que tiene pasajeros, ruedas, alas o hélices, y de manera fácil podemos listar todas sus acciones y propiedades, siendo las acciones el moverse y el frenar, siendo las propiedades: el número de pasajeros, el numero de ruedas, numero de hélices etc.

Con la POO representamos rápidamente estos objetos del mundo real por medio de clases que nos sirven de moldes para crear los objetos que tendrán funcionalidad en nuestros sistemas.

Para ello pasemos de la teoría a la práctica y comencemos a entender rápidamente este paradigma y sus ventajas en el siguiente capitulo.

Ir Capítulo Siguiente (2.- Clases y Objetos)

Curso de Programación Orientada a Objetos en 10 Minutos

Este curso, me basare en una descripción del paradigma Orientado a Objetos, general y brevemente, y te prometo que en menos de 10 minutos habrás comprendido lo mas importante de esta forma de programación.

Para el curso utilizo el lenguaje de programación C# .Net, el cual es fácil de comprender (por si nunca lo han utilizado) y solo servirá para explicar el paradigma, no para que aprendan C#.

El curso consta de los siguientes capítulos:

1.- Introducción a la Programación Orientada a Objetos (POO)

2.- Clases y Objetos

3.- Constructor

4.- Herencia

5.- Polimorfismo (Sobrecarga y Sobreescritura)

6.- Abstracción en la Programación

Caracol Fibonacci en javascript. #fibonacci #canvas #javascript

Como vimos en un articulo que publique anteriormente (función fibonacci en javascript), la secuencia fibonacci es una curiosidad de la naturaleza y una de las cuales vemos en carreras afines a ingeniería, y en esta entrada compartiré el código fuente de la representación mas conocida de dicha secuencia, el caracol.

Esta figura es la mas conocida cuando buscamos información sobre la secuencia fibonacci,  y pueden ver el algoritmo en ejecución dando clic AQUÍ.

El siguiente código de javascript la muestra en un navegador que soporte HTML5 (por la utilización de canvas):

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fibonacci cuadros</title>
<style>
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
#miCanvas {
position: absolute;
top: 0px;
left: 0px;

margin: 0px;
border:1px solid #333
}
</style>
</head>

<body>
<canvas id="miCanvas"    ></canvas>
</body>
</html>

Código Javascript

/*
Código realizado por: Héctor de León Guevara.
Fecha: 06/04/2014
Figura caracol con secuencia fibonacci
www.hdeleon.net
*/

var context //contexto del canvas global
//variables para el acomodo
var x=700;
var y=300;
var opcion=0 //variable que indica cual es la posicion ue sigue para dibujar el cuadro
var opcionCurva=0; //variable de opcion para la curva

//variables de curva
var x1_curva;
var y1_curva;
var x2_curva;
var y2_curva;
var x3_curva;
var y3_curva;

//inicia el script
window.onload = function() {
//creamos canvas
var canvas = document.getElementById('miCanvas');
context = canvas.getContext('2d');

//agrega event de resize
window.addEventListener('resize', resizeCanvas, false);

//redimensiona canvas al tamaño de ventana
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
//redimencionamos canvas
resizeCanvas();

//algoritmos fibonacci, se ejecuta 40 veces
fibonacci(40)

};

function fibonacci(n){
var a=0;
var b=1;
var numeroTemporal=a

//plasmaCuadro(x,y,b,b);
for(i=0; i<n;i++){

acomodaCuadro(a,b);

numeroTemporal=a;
a=b;
b=numeroTemporal+b;

acomodaCurva(a,b);
//dibujamos cuadro
plasmaCuadro(x,y,b,b);
plasmaCurva();
}
}
function plasmaCurva(){
//curva
context.moveTo(x1_curva,y1_curva); //mover el cursor de canvas a punto inicial
context.quadraticCurveTo(x2_curva,y2_curva,x3_curva,y3_curva);	//punto de cuadricula y punto final
context.strokeStyle = '#555';
context.stroke();
}

function plasmaCuadro(x,y,w,h){
context.beginPath();
context.rect(x, y,w, h);

context.lineWidth = 1;
context.strokeStyle = 'black';

context.stroke();
}

//funcion que permite ir acomodando el cuadro para que figure el espiral
function acomodaCuadro(a,b){
switch(opcion){
//inicio
case 0:
opcion++;
break;
//derecha
case 1:
x+=b;

opcion++;
break;
//abajo
case 2:
x-=a;
y+=b;
opcion++;
break;
//izquierda
case 3:
x-=(parseInt(a)+parseInt(b));
y-=a;
opcion++;
break;
//arriba
case 4:

y-=(parseInt(a)+parseInt(b));
opcion++;
break;
}

if(opcion==5)
opcion=1;
}

function acomodaCurva(a,b){
switch(opcionCurva){

//derecha
case 1:
x1_curva=x;
y1_curva=y;
x2_curva=x+b;
y2_curva=y;
x3_curva=x+b;
y3_curva=y+b;
break;
//abajo
case 2:
x1_curva=x+b;
y1_curva=y;
x2_curva=x+b;
y2_curva=y+b;
x3_curva=x;
y3_curva=y+b;
break;
//izquierda
case 3:
x1_curva=x+b;
y1_curva=y+b;
x2_curva=x;
y2_curva=y+b;
x3_curva=x;
y3_curva=y;
break;
//arriba
case 4:
x1_curva=x;
y1_curva=y+b;
x2_curva=x;
y2_curva=y;
x3_curva=x+b;
y3_curva=y;
break;
}
opcionCurva++;

if(opcionCurva==5)
opcionCurva=1;
}