Esta es la clase dedicada a objetos del Curso de Programación básico que realizamos en DesarrolloWeb.com en enero de 2015. En ese curso impartimos una clase dedicada a los objetos, que estuvo muy bien para todos aquellos que quieran comenzar con este paradigma de la programación.

La clase actual pertenece a la exposición de objetos, dedicada al uso de los objetos dentro del lenguaje Javascript. Consulta el vídeo anterior si quieres saber qué son los objetos y conocer sus conceptos relacionados.

Ten en cuenta que en este texto encontrarás solo un resumen de la clase y para encontrar el contenido completo tendrás que ver el vídeo de la clase, impartida por Miguel Angel Alvarez. Al final de este texto está embebido el vídeo.

Programación orientada a objetos en Javascript

Antes de empezar hay que mencionar dos puntos clave para entender los objetos en el contexto de este lenguaje:

1) Javascript acepta OOP, pero es un poco particular con respecto a aproximaciones más tradicionales como las de Java o PHP.
2) Además, en Javascript podemos programar con programación estructurada (uso de funciones y datos por separado) o OOP.

Estos dos puntos hacen que Javascript no sea el mejor lenguaje para aprender a programar con orientación a objetos, pero esperamos que no sea un inconveniente para entender cómo se aplican los conceptos de OOP.

Sintaxis de OOP en Javascript

El proceso de instanciación se realiza, como en muchos otros lenguajes, por medio del operador "new".

//Operador new
var factura1 = new Factura();

La variable sobre la que guardo un objeto es igual que cualquier otra variable conocida hasta ahora. Esto lo podrás leer como "asigna en la variable factura1 el resultado que se produzca al instanciar un nuevo objeto de la clase Factura".

El acceso a propiedades y métodos de los objetos se realiza por medio del operador punto ".", indicando primero el objeto (el nombre de la variable donde he almacenado un objeto), seguido de punto (.) y luego el nombre de la propiedad o método a acceder, teniendo en cuenta que los métodos al ser funciones, requieren los paréntesis detrás para realizar el paso de parámetros.

factura1.cliente = "EscuelaIT";
factura1.imprimir();

Ahora veamos cómo se define la clase factura, apreciando que no es más que una función. Eso es algo muy particular de Javascript, dado que en este lenguaje no existe el concepto de clase.

function Factura(){
    this.imprimir = function(){
        alert("cliente: " + this.cliente);   
    }
}

Las operaciones de instanciación y de acceso a sus atributos o métodos se pueden hacer como hemos visto.

var factura1 = new Factura();
factura1.cliente = "Miguel";
factura1.imprimir();

Objetos incorporados en Javascript

En Javascript, como en cualquier lenguaje, nos ofrecen una serie de librerías para realizar operaciones típicas, como trabajo con fechas, matemáticas, arrays, cadenas, etc. En este lenguaje esas funciones nos las ofrecen por medio de objetos incorporados. En esta exposición se hizo un rápido listado de los objetos incorporados y el sentido de su existencia:

• Math (cálculos matemáticos)
  
• Date (trabajo con fechas y horas)
  
• String (operaciones con cadenas de caracteres)
  
• Array (realizar cosas sobre los arrays)
  
• ...

Estos objetos incorporados los vimos ya en uso durante las clases del curso y en esta clase te explicamos cómo usarlos. Se vió un ejemplo de uso de las funciones de cadenas.

var cadena = "EscuelaIT";
alert (cadena.length);
alert (cadena.toLowerCase());

Al ver ese código aprecia que en Javascript las cadenas de caracteres se comportan como si fueran objetos. Con cadena.length accedemos a la propiedad que contiene el número de caracteres de la longitud del string. Con cadena.toLowerCase() alteramos una cadena, donde puede haber mayúsculas y minúsculas, para que solo tenga minúsculas.

También vimos ejemplo del trabajo con la clase Date de Javascript, para trabajo con fechas.

var fecha = new Date();
var diames = fecha.getDate();
var mes = fecha.getMonth() + 1;
var ano = fecha.getFullYear();
document.write("Hoy: " + diames + "/" + mes + "/" + ano);

En este caso creamos una nueva fecha y luego extraemos los valores de dias, meses y años, para luego imprimirlos en la página.

Se ofrecieron otros ejemplos de objetos incorporados dentro del vídeo completo.

DOM en Javascript

El Document Object Model (DOM) contiene una correspondencia en objeto de cada uno de los elementos del navegador. Es decir, todos los elementos de la página están representados dentro de lo que se conoce como DOM y disponibles para los programadores en Javascript. En el DOM encontramos objetos que corresponden con elementos presentes en el navegador (ventana, historial, etc.) y en el documento o página que se está visualizando (cuerpo, etiquetas, elementos de formulario, etc.).

Cambiando el estado del DOM, cambiamos el estado de los elementos de la página. Ese es el mecanismo por el cual mediante Javascript podemos alterar el estado de la página, muy habitalmente como respuesta a acciones del usuario (eventos).

Dentro del DOM hay elementos simples, como podría ser un párrafo, o una etiqueta DIV, pero algunos tan complejos como el elemento CANVAS que tiene una complejidad muy grande y una cantidad enorme de funciones y métodos orientados a dibujar cualquier tipo de diseño de mapa de bits en una página web.

En la penúltima parte de este vídeo veremos un ejemplo de trabajo con el API (juego de funciones) de Canvas, para crear una imagen realizada dinámicamente por medio de Javascript.

El código lo dejo a continuación, aunque recordar que en DesarrolloWeb.com tenemos un manual completo para enseñar a trabajar con el elemento Canvas.

var canvas = document.getElementById('micanvas');
var context = canvas.getContext('2d');

var circulos = prompt("dime cuantos circulos", "");
circulos = parseInt(circulos);
                    
context.beginPath();

if(circulos > 0){
    
    context.arc(75,75,50,0,Math.PI*2,true); 
    context.fillStyle = '#272298';
    context.fill();

    if(circulos > 1){
        context.beginPath();
        context.arc(85,54,21,0,Math.PI*2,true); 
        context.fillStyle = '#fcfdff';
        context.fill();

        context.beginPath();
        context.arc(88,52,14,0,Math.PI*2,true); 
        context.fillStyle = '#dbf6fd';
        context.fill();

        context.beginPath();
        context.arc(90,53,6,0,Math.PI*2,true); 
        context.fillStyle = '#101010';
        context.fill();
    }
}

Recorridos a propiedades de objetos

La clase finalizó explicando acerca de los recorridos genéricos a las propiedades de un objeto, que es algo que nos quedó pendiente de ver cuando realizamos la clase sobre las estructuras de control.

En el ejemplo se mostró además que en Javascript podemos definir objetos a partir de un literal, con una sintaxis como la que conoceremos si alguna vez hemos trabajado con JSON.

var usuario = {
    nombre: "Manolo",
    edad: 35,
    autenticado: true
};

for(campo in usuario){
    alert(campo);
    alert(usuario[campo]);
}

Las primeras líneas son la definición de un objeto por medio de su literal y el bucle for nos permite realizar un recorrido por todas sus propiedades. Decimos que es un recorrido genérico porque da igual el número o nombre de sus propiedades, independientemente de ellos el bucle los recorrerá todos, accediendo tanto al nombre del campo como a su valor.

Por aquí os dejamos el corte del vídeo publicado en YouTube: