viernes, 10 de enero de 2014

Tutorial Javascript parte 8 - Programación orientada a objetos




Bienvenid@s a una nueva parte del tutorial de Javascript, en esta ocasión vamos a ver la Programación Orientada a Objetos en Javascript.

Javascript es un lenguaje de programación orientado a objetos, los objetos son estructuras de código únicas que conforman una serie de instrucciones que dan forma al objeto en sí, los objetos contienen una serie de propiedades y métodos que permiten alterar el comportamiento del objeto, para poder hacer uso de un objeto hay que crear una instancia hacia el objeto a través de la palabra reservada new.

Para este capítulo crea un nuevo archivo y guárdalo como fundamentos-7.js en la carpeta javascript y agrega el número archivo js al index.html ...

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="javascript/fundamentos-7.js"></script>
</head>
<body>
</body>
</html>


Para crear un objeto se realiza a través de function al igual que si estuvieses creando una función ...

function objeto()
{

}


Aunque un objeto se diferencia de una función en que el objeto se hace referencia a sí mismo y contiene una serie de métodos y propiedades a los cuales podremos acceder cuando tengamos la instancia ...

function objeto()
{
//Se hace referencia a sí mismo
var self = this;
}


Y a continuación, vamos a ver como crear propiedades de objeto ...

function objeto()
{
//Se hace referencia a sí mismo
var self = this;

//Propiedades con valor por defecto
self._mensaje = "hola mundo";
self._numero = 1;
}

//Crear una instancia del objeto
var obj = new objeto();

//Mostrando el valor de una de las propiedades del objeto
document.write(obj._mensaje);

//Modificando el valor de una de las propiedades del objeto
obj._numero = 5;
document.write(obj._numero);


Como puedes ver hemos podido acceder a las propiedades del objeto e incluso cambiar su valor. Ahora vamos a ver los métodos, los métodos se pueden considerar funciones dentro del objeto, para finalizar copia y guarda el siguiente código en el archivo fundamentos-7.js ...

function objeto()
{
//Se hace referencia a sí mismo
var self = this;

//Propiedades con valor por defecto
self._mensaje = "hola mundo";
self._numero = 1;

//Métodos
objeto.prototype.suma = function(numero1, numero2)
{
return numero1 + numero2;
}

//Otro método
objeto.prototype.resta = function(numero1, numero2)
{
return numero1 - numero2;
}
}

//Crear una instancia del objeto
var obj = new objeto();

//Mostrando el valor de una de las propiedades del objeto
document.write("<p>" + obj._mensaje + "</p>");

//Modificando el valor de una de las propiedades del objeto
obj._numero = 5;
document.write("<p>" + obj._numero + "</p>");

//Accediento a uno de los métodos
document.write("<p>" + obj.suma(2, 2) + "</p>"); //regresa 4

//Acciendo a otro método
document.write("<p>" + obj.resta(4, 2) + "</p>"); //regresa 2



Abre el archivo index.html en el navegador para ver el resultado ...