martes, agosto 07, 2012

Tutorial de desarrollo web, Parte XLIX: Clases y objetos (II). Propiedades

La semana pasada tuvimos una clase teórica sobre las clases y los objetos. Ahora esta semana vamos a aprender a crear y usar clases y objetos en JavaScript de forma práctica.
Antes de poder usar un objeto en JavaScript, deberemos crear una clase. Hasta ahora hemos usado objetos como el array o el string y no hemos tenido que crear la clase, pero es porque la clase ya viene creada por defecto con el lenguaje. Pero ahora queremos trabajar con clases y objetos personalizados así que nuestro primer paso va a ser crear una clase.
Bien, ¿cómo crear una clase? En primer lugar una práctica bastante habitual y de bastante sentido común es que las clases estén en un archivo "js" aparte, que podremos incluir en nuestro documento con el ya conocido código:

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

De este modo, creamos dos archivos: un archivo HTML en el que tengamos esa línea y un archivo "coche.js" en el que vamos a trabajar ahora antes que nada.
Para crear una clase, la semana pasada hablábamos del proceso de abstracción. Dijimos la semana pasada que la abstracción se basaba en extraer aquellos datos que fueran comunes, y en parte es correcto, pero no es todo lo que tiene la abstracción. También tenemos que tener en cuenta qué datos van a ser útiles. Por ejemplo, si vamos a crear, como dijimos la semana pasada, un juego de coches, no necesitaremos saber cuántas puertas o cuántos asientos tiene el coche. Sin embargo, sí nos interesará la potencia o el color del coche. Así que en el archivo "coche.js" empezamos a crear nuestra clase, de esta manera:

function Coche(elColor, laPotencia, laMarca, elModelo)
{
    this.color = elColor;
    this.potencia = laPotencia;
    this.marca = laMarca;
    this.modelo = elModelo;
}


Aparentemente hemos creado una función simple, y en parte es así. Lo cierto es que la función que hemos creado es lo que se llama "método constructor", el cual es el método al que hay que llamar para crear un objeto. Recordemos cuando con los arrays hacíamos lo siguiente:


var vector = new Array(3, 4, 5);


En esa ocasión estábamos llamando al método constructor de la clase array para poder crear un nuevo objeto array. De este modo, llamando a la función que hemos creado hace un momento podremos crear un objeto de tipo "Coche", de este modo:


var miCoche = new Coche("azul", 1000, "Opel", "Corsa");


Al igual que ocurría con las funciones normales, el constructor también tiene una serie de parámetros, en este caso "elColor", "laPotencia", "laMarca" y "elModelo". Estos parámetros entran al objeto y podemos hacer lo que queramos con ellos, aunque la acción habitual es almacenarlo en unas variables especiales que se llaman propiedades. Las propiedades se distinguen de las variables normales porque siempre pertenecen a un objeto y, dentro de la misma clase se las llamará con la palabra reservada "this". De este modo, tenemos una propiedad "color", una propiedad "potencia", una propiedad "marca" y una propiedad "modelo". Todas ellas son invocadas en el constructor mediante la palabra "this" (que simboliza a la propia clase) para almacenar los datos que hemos escrito.
Para no hacernos un lío he dado nombres distintos a los parámetros y a las propiedades, pero lo cierto es que, gracias al "this" no necesitaríamos hacerlo, de modo que el anterior código podría quedarse así:




function Coche(color, potencia, marca, modelo)
{
    this.color = color;
    this.potencia = potencia;
    this.marca = marca;
    this.modelo = modelo;
}


Como les digo, gracias al "this" podemos distinguir entre el parámetro "color" y la propiedad "color". De todos modos, para el resto de este ejemplo vamos a seguir con el primero de los dos códigos (en el que ese parámetro era llamado "miColor").
Ahora habiendo usado estos dos códigos, o sea, habiendo creado la clase "Coche" en el fichero "coche.js" y habiendo creado un objeto de tipo "Coche" en nuestro archivo HTML (el cual, por supuesto, debe haber sido creado en una etiqueta script distinta a la que usamos para llamar al documento "coche.js", como ya aprendimos en su día, además de que el enlace al documento externo debe haber sido incluído antes de la creación del objeto para evitar errores), tendremos en nuestro documento HTML un objeto de tipo "Coche" que estará almacenando cuatro datos: el color "azul", la potencia 1000, la marca "Opel" y el modelo "Corsa".
¿Se entiende ahora bien la diferencia entre una clase y un objeto? Mientras la clase es una función en la que nos mostraba un coche genérico sin ningún dato, en el objeto ya le hemos incluído los datos y tenemos un coche en concreto. Ahora la pregunta, ¿cómo accedemos a estos datos?
No es muy difícil, ya que tanto con los strings como con los arrays hemos llamado a sus propiedades. ¿Recordáis cuando pedíamos el tamaño de un string o un array a través de la propiedad length? Pues de la misma manera lo vamos a hacer aquí, de este modo:


var miCoche = new Coche("azul", 1000, "Opel", "Corsa");
document.write(miCoche.color);


De este modo en nuestra página aparecerá escrita la palabra "azul" ya que es el contenido de dicha propiedad. Lo mismo podemos hacer con cualquiera de las otras tres propiedades. Es sencillo, ¿no?
Pues por esta semana mejor que lo dejemos aquí, la semana que viene empezaremos a crear métodos, algo un poco más complejo pero que, al mismo tiempo, mostrará que los objetos son mucho más dinámicos y útiles de lo que pueden parecer hasta el momento. Y ahora, el ejercicio de la semana:

EJERCICIO

Bueno, esta semana lo mejor que podéis hacer es intentar abstraeros y crear clases, así que os voy a dar unas cuantas ideas:

  • Tenemos un foro y tenemos que crear una clase para los usuarios que se registran.
  • En una página de alquileres de viviendas, necesitamos crear una clase que represente cada vivienda en alquiler.
  • Tenemos una página de información de una biblioteca y debemos dar información a los usuarios de nuestros libros, por lo que tenemos que crear un objeto por cada libro que tengamos.-
No creo que sean cosas muy complicadas, y todos son situaciones muy reales, así que espero que se entrengan con ello. ¡Hasta la semana que viene!



No hay comentarios: