Introducció

La programació Orientada a Objectes és un paradigma de programació que:

  • Aprofita els coneixements de la programació Estructurada i de la Modular.
  • Afegeix característiques pròpies de programació, com l’encapsulació, l’herència i el polimorfisme. Amb l’objectiu que sigui un tipus de programació que permet ser ampliable, ser adaptable i transportable. Llegir un poc més aquí.
  • Afegeix la creació dinàmica d’unitats de memòria que anomenam Objectes.

Els Objectes són Variables.

Un Objecte és una estructura de dades i  té el mateix comportament que una variable. Per exemple:

1
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

ó

1
2
3
4
5
6
//codi d'una variable objecte que conté la informació d'una persona.
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"};

Propietats dels Objectes

Els valors que té dins un Objecte els anomenam Propietats, així l’objecte person té com a propietats 

1
2
firstName,
lastName,age,eyeColor

i els seus valors corresponents són “John”,”Doe”, 50 i “blue”.Podem  consultar i modificar els valors de les seves propietats.

  • Per Consultar als seus valors ho feim mitjançant:
1
2
var a = person.firstName;
alert(a); //mostrarà "John"
  • per Modificar un dels seus valors es fa un forma semblant:
1
2
3
4
var a = person.firstName;
alert(a); //mostrarà "John"
person.firstName = "Pere";
alert(person.firstName); //mostrarà "Pere"

Exercici. Propietats d’un Objecte.

Llegeix el següent codi i pensa com canviar-lo per tal que:

  1. Afegeix la propietat dog amb el valor “Pluto”.
  2. Canvia el valor de la propietat firstName al teu nom.
  3. El botó mostri un missatge que posi totes les dades de la persona.
1
2
3
4
5
6
7
8
9
10
11
12
Creating a JavaScript Object.

<script>
var person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

*Fes que surti el resultat a la teva pàgina web d’exercicis, a una nova pàgina POO sobre un botó: “Una variable amb Propietats“.
*Pots realitzar l’exercici sobre aquesta pàgina de w3schools.

Fixa´t en l’exercici de la següent secció, el que farem es clau per entendre un objecte. Hi afegirem un Mètode que ens permetrà generar una resposta pròpia de l’objecte.

Mètodes dels Objectes

Els mètodes són les accions que es poden fer sobre els objectes.
Un mètode és una propietat que conté una funció que farà alguna cosa sobre l’objecte. Un objecte podrà tenir tant propietats com mètodes:

Property Value
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + ” ” + this.lastName;}
1
2
3
4
5
6
7
8
9
10
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return "El nom sencer de Person és + "this.firstName + " " + this.lastName;
}
};
//per cridar el mètode fullName()
person.fullName();

Exercici. Afegir mètodes a un Objecte.

*Aquest exercici modifica la variable anterior directament, no se n’ha de fer cap de nova.

Al codi de la variable objecte de l’exercici anterior hi has d’afegir:

  1. Un mètode “demanaNom()” que demani mitjançant un prompt quin nom té una persona i canvii la variable. Un botó “canvia nom” que cridi aquest mètode.
  2. Un mètode “retornaNom()” que retorni el nom de la persona mitjançant un return. Crea un botó que dins un alert cridi retornaNom().
  3. Un mètode “mostraNom()” que mostri el el nom i llinatges d’una persona mitjançant un alert dins del mètode.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <b>this</b> Keyword</h2>

<p>In this example, <b>this</b> represents the <b>person</b> object.</p>
<p>Because the person object "owns" the fullName method.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  },
  demanaNom : function(){
    this.firstName = prompt("Donam el nom");
  },
  demanaLlinatge : function(){
    this.lastName = prompt("Donam el llinatge");
  },
  retornaNom : function(){
    return this.firstName;
  },
  escriu: function(){
    document.getElementById("demo").innerHTML = person.fullName(); 
  }
};
// Display data from the object:

</script>

<button onclick="person.escriu()">Actualitza</button>
<button onclick="person.demanaNom()">demanaNom</button>
<button onclick="person.demanaLlinatge()">demanaLlinatge</button>
<button onclick="alert(person.retornaNom())">retornaNom</button>


</body>
</html>

Invocació d’un Objecte

El punt clau d’aquest sistema de programació és el que permet que nosaltres creem un tipus d’objecte (una classe d’objecte) i després en podrem fer instanciacions (invocacions de un nou objecte). Hi ha tres formes de crear un nou objecte:

  • Definir i crear un objecte simple, declarant-lo com si fos una variable.
  • Definir i crear un objecte amb la paraula clau new.
  • Definir un objecte constructor i desde ell crear els nous objectes.

Instanciació com a variable.

És la manera més fàcil de crear un nou objecte, que no vol dir la més recomanada. Aquesta forma s’emprarà per quan sols volem tenir una sola variable objecte.
D’aquesta forma declaram i cream l’objecte tot alhora.La forma ja ha estat estudiada abans i la recordam:

var person = {firstName:”John”, lastName:”Doe”, age:50, eyeColor:”blue”};

Instanciació emprant la paraula reservada new.

Declaram un Objecte nou, una variable que podrà contenir tant propietats com mètodes.
Feim el mateix Objecte que abans:

1
2
3
4
5
var person = new Object();
person.firstName:"John";
person.lastName:"Doe";
person.age:50;
person.eyeColor:"blue";

Instanciació cridant una funció constructora.

Cream una funció que ens construirà un objecte nou.

1
2
3
4
5
6
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}

Quan volem canviar els valors de les propietats d’un objecte ho feim amb el terme this i així es canvia les pròpies propietas de l’objecte.

Aquesta és la forma que emprarem per construir els objectes, ens fixarem amb el següent codi com exemple de com funciona aquesta tècnica.

    1. De la línia 11 a la línia 16 tenim un Constructor de fitxes (objectes) de persones.
    2. L’objecte formalment, sempre comença en majúscula.
    3. Els paràmetres que li passam ell els inicialitza a les seves propietats.
    4. A la línia 19 es crea un objecte persona. Fins ara no existia cap fitxa de persona. Ara sí i té el nom de myFather.
    5. La línia 22 ens mostra el resultat a un id de html anomenta “demo”.

Exercici. JavaScript Object Constructors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
&nbsp;
<h2>JavaScript Object Constructors</h2>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create a Person object
var myFather = new Person("John", "Doe", 50, "blue");

// Display age
document.getElementById("demo").innerHTML =
"My father is " + myFather.age + ".";
</script>

&nbsp;

[/cc]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script>
function Jugador(){
    this.nom = "Computadora";
    this.punts = 0;
    this.dic = -1;
    this.duc = -1;
   
    this.demanaDuc = function(){
        this.duc = prompt("Jugador " + this.nom + ", quantes duus?");
    };
    this.demanaDic = function(){
        this.dic = prompt("Jugador " + this.nom + ", quantes dius?");
    };
    this.creaDuc = function(nBolles){
        this.duc = Math.floor((Math.random() * (nBolles+1)));
    };
    this.creaDic = function(nBolles,nJugadors){
        this.dic = this.duc + (Math.floor((Math.random() * (nBolles+1))));
    };
    this.estatJoc = function (){
        return this.nom + ", duc:" + this.duc + " i dic " + this.dic;};
}


var j1= new Jugador();
var j2= new Jugador();

var bolles=3;

function escriu(){
//aquesta funció ha d'escriure els resultats de tots els jugadors.
j1.creaDuc(bolles);
j2.creaDuc(bolles);

j1.creaDic(bolles,2);
j2.creaDic(bolles,2);

return j1.estatJoc() + j2.estatJoc();
}

</script>
<h2>My First JavaScript</h2>
<button type="button">
Crida Escriu.</button>

&nbsp;

Per introduir aquest paradigma de programació llegirem i comentarem el capítol 4 del llibre EloquentJavascript. Els conceptes que ens mostraran són:

  • Conjunts de dades.
  • Propietats de les dades.
  • Mètodes aplicats a dades.
  • Objectes.
  • Mutabilitat d’Objectes.
  • Recorreguts de llistes de dades. (Arrays).
  • Propietats dels Strings.
http://aula.gimnesia.net/wp-content/uploads/2018/12/rdd2.pnghttp://aula.gimnesia.net/wp-content/uploads/2018/12/rdd2-150x150.pngadmin2on batxilleratIntroducció La programació Orientada a Objectes és un paradigma de programació que: Aprofita els coneixements de la programació Estructurada i de la Modular. Afegeix característiques pròpies de programació, com l'encapsulació, l'herència i el polimorfisme. Amb l'objectiu que sigui un tipus de programació que permet ser ampliable, ser adaptable i transportable....Blog Aula Informàtica Gimnèsia