UT2 DESARROLLO DE APPS MEDIANTE LENGUAJES DE SCRIPT

JavaScript Orientado a Objetos

eugeniaperez.es

JavaScript Orientado a Objetos

A día de hoy las aplicaciones "empiezan a llevar más código incluso en el cliente que en el servidor". 

Y en caso de tener que programar en JS, esta es una muy buena forma de estructurar el código.

Todas las webs llevan JS, desde la web más puntera a la menos... Node.js, PhoneGap, etc

eugeniaperez.es

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

LA CLASE

• JavaScript no tiene declaraciones de clases.
• Se utilizan funciones en lugar de clases.
• Por ejemplo, una clase:

eugeniaperez.es

function Person() { ... }

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

ejemplo de clase

Se define una clase llamada Person y creamos dos instancias (person1 y person2).

eugeniaperez.es

function Person() { }
var person1 = new Person();
var person2 = new Person();

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

el constructor

eugeniaperez.es

function Person() {
  alert(‘Person instantiated’);
}

var person1 = new Person();
var person2 = new Person();

No hay que definir explícitamente el constructor. Los objetos

de clase o instancias se crean con new.

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

la propiedad

Son características que se definen dentro de la clase. Para acceder a ellas dentro de la clase se utiliza this, que se refiere al objeto actual: this.property

El acceso a una propiedad fuera de la clase sintaxis:  instanceName.property. 

eugeniaperez.es

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

la propiedad

eugeniaperez.es

function Person(gender, name) {
  this.gender = gender;
  this.name = name;
  alert(‘Person ’+name+’ instantiated’);
}

var person1 = new Person(‘Male’,’Pelayo’);
var person2 = new Person(‘Female’,’Covadonga’);

/ / Muestra el género de persona1
alert (‘person1 is a’ + person1.gender); 
// Muestra el nombre de persona2
alert (‘person2 is ’ + person2.name)

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

los métodos

Se definen como funciones:

eugeniaperez.es

function Person(gender) {
      this.gender = gender;
      this.sayHello = function(){
         alert (‘hello’);
  };
}
var person1 = new Person(‘Male’);
var person2 = new Person(‘Female’);

person1.sayHello(); 

Con this los métodos

son públicos...

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

los métodos

Algo curioso es que podemos referirnos a la propia clase,  Person.prototype, y añadir métodos fuera de la misma, por ejemplo:

eugeniaperez.es

//Add a new method
Person.prototype.getGender = function() {
  alert ('Hola, Soy ' + this.gender);
};

person1.getGender();
person2.getGender();

Esto puede ser útil, cuando es una librería

ya hecha y la queremos extender...

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

var Employee = function (name, age, height, weight,salary) {
    this.name = name;
    this.age = age;
    this.height = height;
    this.weight = weight;
    this.salary = salary;

    this.getCategory = function () {
        return salary > 60000 ? "Alto cargo" : "Medio";
    }
    this.toString = function () {
        alert('Nombre: ' + this.name + ' | Edad: ' + this.age + ' | Altura: ' + 
this.height + 'm | Peso: ' + this.weight + 'kg.');
    };
    this.isAdult = function () {
        if (this.age >= 18) {
            alert(this.name + ' es mayor de edad.');
        } else {
            alert(this.name + ' es menor de edad.');
        }
    };
};

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

//Create two people
var billG = new Employee('Bill Gates', 62, 1.7, 72,200000);
var steveB = new Employee('Steve Ballmer', 59, 1.75, 90,50000);

//Call to the specific methods
billG.toString();
steveB.isAdult();
alert("Tiene un rango "+steveB.getCategory()); 

Para probarlo...

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

function Client(name, salary)
{
    this.name = name;
    this.salary = salary;
    this.deposit = deposit;
    this.extract = extract;
}

//Set method of the deposit
function deposit(amount)
{
    this.salary = this.salary + amount;
}

//Set method of the extraction
function extract(amount)
{
    this.salary = this.salary - amount;
}

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

var client1 = new Client('Dennis Ritchie', 1200);
document.write('Nombre del cliente:' + client1.name + '<br />');
document.write('Saldo actual:' + client1.salary + '<br />');
client1.deposit(120);
document.write('Saldo después de depositar $120---->' + client1.salary + '<br />');
client1.extract(1000);
document.write('Saldo después de extraer $1000---->' + client1.salary + '<br />');

Para probarlo...

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

Métodos públicos y privados

this -> públicos

var o function -> privados

Métodos públicos y privados

//Define the class
function Programmer(name) {
    this.greet = function () {
        return toString("My name is: " + name);
    };
    this.getProgrammingLanguage = function () {
        return toString("I'm incapable of discriminating any programming language," + 
                " no matter how crappy can be!");
    };
    this.setProgrammingLanguage = function (language) {
        var message = "";
        switch (language.toUpperCase()) {
            case 'JAVA':
                message = "I'm a Java fanboy.";
                break;
            case 'C#':
                message = "I'm a .NET fanboy.";
                break;
            default:
                message = this.getProgrammingLanguage();
        }
        return toString(message);
    };

    //toString method
    function toString(message) {
        alert(message);
    }
}

para probarlo:

var programmer1 = new Programmer('Eugenia');
programmer1.greet();
programmer1.getProgrammingLanguage();
programmer1.setProgrammingLanguage('Java');

eugeniaperez.es

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

Métodos públicos y privados

var person = new Programmer("Eugenia");
alert(person.greet());

//Define the class
function Programmer(name) {
    var greet = function () {
        return toString("My name is: " + name);
    };
...
}

var person = new Programmer("Eugenia");
alert(person.greet());

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

HERENCIA

Sirve para crear una clase especializada a partir de otra. Es decir que herede sus propiedades y métodos. 

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

HERENCIA

En el ejemplo de la página 59, se define la clase Student como una clase secundaria de Person. Luego redefinimos el método sayHello() y agregamos el método sayGoodBye().

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

HERENCIA

En el ejemplo de la página 59, se define la clase Student como una clase secundaria de Person. Luego redefinimos el método sayHello() y agregamos el método sayGoodBye().

Descarga ahora el repositorio : 

https://eugenia_perez@bitbucket.org/eugenia_perez/dw.ut2.js.inheritanceexample.git

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

namespaces

Text

var subtract = function(a, b){
  return a - b;
}; 
			 
var add = function(a, b){
  return a + b;
};

var multiply = function(a, b) {
  return a * b;
};
			
var divide = function(a, b) {
  return a / b;
};

var result = add(2,3);
alert(result);

Mayor legibilidad...

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

namespaces

Text

var basics = new function() {
  //Funciones privadas. No es posible llamarlas desde fuera de este ámbito.
  var subtract = function(a, b){
    return a - b;
  }; 
			 
  var add = function(a, b){
    return a + b;
  };

  //Funciones públicas
  this.multiply = function(a, b) {
   return a * b;
  };
			
  this.divide = function(a, b) {
   return a / b;
  };		
};

var result = basics.multiply(2,3);
alert(result);
var result = basics.add(2,3); //ERROR

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

namespaces

var complex = new function() {
  //Funciones públicas
  this.pow = function(a, b) {
   return Math.pow(a, b);							
   };		
};

result = complex.pow(2,3);
alert(result);

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

otra sintaxis PARA LOS NAMESPACES...

Pág. 58

UT 2: lenguajes de scripting

JavaScript Orientado a Objetos

eugeniaperez.es

test unitarios con jasmine

http://jasmine.github.io/

Está documentado en los apuntes en la pág. 60