martes, agosto 14, 2012

Tutorial de desarrollo web, Parte L: Clases y objetos (III). Métodos

Estas últimas semanas nos hemos centrado en aprender lo que son las clases y los objetos, aprendimos a crear una clase con propiedades, a instanciar una clase y a llamar a las propiedades de dicho objeto. Ahora lo que hemos de aprender es a crear métodos.
Para entender lo que es un método, volvamos a recordar cuando vimos los strings y los arrays. Recordamos que, en ocasiones, necesitábamos realizar alguna acción sobre nuestro objeto, por lo que llamábamos a unas funciones especiales conocidas como "métodos" para que realizara dicha acción. El toUpperCase() del string o el push() del array realizaban una acción sobre el objeto que estábamos usando antes de devolvernos algo.
Para que lo entendamos, un ejemplo: el toUpperCase() nos devolvía la misma string que teníamos pero toda en mayúsculas, sin importar si antes estaba así o no. Pero, ¿estaba guardada en alguna propiedad la string en mayúsculas? No. El toUpperCase() ha tenido que realizar una serie de operaciones para convertir cada uno de los caracteres que forman la string en sus formas en mayúsculas y luego devolvernos la nueva string.
Bien, de este modo, ahora vamos a coger el ejemplo del coche de la semana pasada y vamos a añadirle un par de propiedades más. Éste sería la nueva clase "coche":

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

Como vemos, hemos añadido una nueva propiedad, la propiedad "posicion", la cual inicializamos a 0. Como vemos, no hace falta que las propiedades sean inicializadas con un valor indicado en el constructor, en algunos casos como éste tendremos un valor con el que se inicializará siempre alguna de las propiedades, ya que esta propiedad puede que se modifique más adelante (como vamos a hacer ahora).
Bien, en nuestro "juego", la propiedad "posicion" indica en qué metro de la pista se encuentra nuestro coche. Ahora se encuentra en el metro 0, pero deberá poder ir avanzando para que podamos jugar, así que vamos a incluir un método que haga que el coche se mueva.


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

    this.avanzar = function()
    {
        this.posicion++;
    }
}


¿Qué hemos hecho ahí? ¿Hemos guardado una función en una propiedad? Más o menos. Sinceramente, entre los lenguajes de programación que conozco (tampoco soy tan experto, cuatro o cinco conoceré), en JavaScript es donde las clases se hacen de la manera más extraña, y los métodos son aún más extraños, pero bueno, vayamos paso por paso intentando entenderlo.

  • Para empezar, como si fuéramos a crear una propiedad hacemos this.avanzar, usando como con las propiedades la palabra "this" seguido de un nombre personalizado.
  • La manera de indicar a JavaScript que this.avanzar será un método en vez de una propiedad es poniendo palabra function, para la cual esta vez no necesitamos darle un nombre a la función, ya que ésta se llamará como la hayamos llamado antes, o sea, avanzar.
  • Finalmente rellenamos una función como normalmente.
Y esto, ¿de qué sirve, diréis? Bueno, si creamos en nuestro HTML un objeto Coche, podremos hacer lo siguiente:


var miCoche = new Coche("azul", 1000, "Opel", "Corsa");
document.write('Posición inicial del coche:' + miCoche.posicion + '<br/>');
miCoche.avanzar();
document.write('Posición actual del coche:' + miCoche.posicion);

Si ejecutamos este código veremos que en pantalla aparecerá lo siguiente:
Posición inicial del coche: 0
Posición actual del coche: 1
Al llamar al método avanzar() entre la primera y la segunda llamada al método, hemos hecho que el coche avanzara un metro.
Y eso, por esta semana, es todo. Vamos ahora con el ejercicio de esta semana:

EJERCICIO

El ejercicio de esta semana puede volverse bastante interesante, creo yo. Vamos a completar la clase Coche con unos métodos arrancar(), retroceder() y parar(). Cada uno de ellos hará lo siguiente:

  • arrancar() permitirá al coche poder empezar a avanzar y a retroceder. Antes de que el coche arranque no puede moverse del sitio.
  • retroceder() es el método contrario a avanzar(), en vez de sumársele metros, deberán restársele.
  • parar() es el método contrario a arrancar(). Cuando el coche haya parado, no podrá moverse (ni avanzar ni retroceder), y deberá volver a arrancar para volver a hacerlo.
Bien, creo que es un ejercicio interesante que os hará empezar a familiarizaros con los métodos. ¡Adelante con ello!


No hay comentarios: