El paradigma de programació orientada a objectes permet desenvolupar aplicacions informàtiques mantenint un codi clar i manipulable.

De la POO hem de destacar que permet un disseny de l’entorn amb independència del llenguatge final de programació. Usa eines UML, llenguatge de modelat unificat, per expresar el disseny en diferents nivells.

UML CRC (diagrama de classes i la relació de col·laboració) on es mostren les classes que participen en una aplicació. Es veuen les classes amb els seus atributs i mètodes i la relació que s’estableix entre ells.

Implementarem usant Javascript, que malgrat en principi no era un llenguatge orientat a objectes, s’està adaptant a n’aquest mètode de programació, també ho han fet o ho fan altres llenguatges, PHP és un d’ells.

Per implementar aplicacions hem de conèixer els elements de javascript que permeten traduir la informació d’un disseny UML. Aquests elements són les classes i els objectes.

Classes

Les classes són plantilles de creació d’un tipus d’objecte. Dins cada classe hi queden declarats els atributs i mètodes que tendrà cada nou objecte del tipus classe que es crei amb una instrucció new durant l’execució de l’aplicació.
Els atributs i mètodes són d’accés públic, privat o protegit. Aquest fet permet controlar la correcta utilització dels objectes creats a partir de les classes.
Les propietats de herència i polimorfisme s’explicaran i aplicaran en la pròxima unitat.

Parts d’una classe. Atributs i mètodes (públics i privats)
  • Atributs: Definiran els possibles estats d’un objecte.
  • Mètodes: Defineixen les operacions que es poden efectuar sobre un objecte. Existeixen uns mètodes essencials per crear una classe.
    • Mètode constructor. És el mètode que ens permetrà inicialitzar els atributs d’un objecte alhora de la seva creació. Pot admetre paràmetres de construcció.
    • Mètodes getters i setters: Són els mètodes que retornen o actualitzen informació dels atributs. Aquests mètodes permeten el que s’anomena encapçulació del programa.
      L’encapçulació de programa permet que el programador pugui usar instruccions d’una capa superior del codi sense saber quines són les intruccions interiors. Aquest fet.
    • Mètodes que implementen accions sobre els objectes. sumaPunt(), escriuNou(), obriCanal(), …
    • La paraula clau this serveix per referirse al propi objecte. Per exemple si ens volem referir a l’atribut nom ho farem amb this.nom./li>

La definició de classes en codi Javascript:

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
class Jugador{
constructor(nom){
        this.nom=nom;
        this.ma=[];
        this.joc=[];
    }
    agafaCarta(carta){this.ma.push(carta); return }
    getNom(){return this.nom;}
    llistaCartes(){
        //per fer el recorregut podem emprar foreach.
        //en aquest cas usam un for
        let totesCartes="";
        for (var i=0;i<this.ma.length;i++){
            //alert (this.pila[i].getDescripcio());
            totesCartes += this.ma[i].getDescripcio(i) + "<br>";
        }
        return totesCartes;
    }
    mouCarta(i){
        //mou una carta de la posicio i a la posicio 0
        //de la ma
        //this.ma[i];      //agafam la carta dins una variable
        //alert (cartaMoure.getDescripcio());
        var cartaMoure=this.ma[i].splice(i,1);               //borram la carta de la llista
        this.ma.shift(cartaMoure);  //posam la carta a la primera posicio
        actualitza();
    }
}

EXERCICIS

Sobre el codi actual del Projecte.

  1. Dibuixa sobre un paper l’estructura del joc de cartes. Anota les diferents llistes i anomenales.
  2. Detecta i elimina l’alert de surt cada vegada que actualitzam la pàgina
  3. Fes que surti el nom del jugador en lloc de jugador. Usa identificadors i canvia el mètode actualitza per fer-ho.
  4. Crea un botó que torni a mesclar les cartes.
  5. Crea un botó que doni tres cartes a cada jugador.
  6. Afegir els atributs punts a la classe Jugador.
    1. Per defecte cada vegada que cream un jugador ha de posar la puntuació a zero.
    2. Els punts han de sortir a un element html amb id puntsJugadors (un per cada jugador). S’ha d’afegir la seva actualització al mètode actualitza().
    3. Afegim un mètode sumaPunt() al jugador que sumarà un punt al jugador.
    4. Cream un botó de proves per sumar punts a un jugador

    Codi actual del projecte

    jocCartes

    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
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>

    <body>

    <h1 id="p">JOC DE CARTES</H1>
    <button onclick="actualitza()">Actualitza</button>
    <button onclick='joc.enfrontaCartes()'>Enfronta cartes</button>
    <div class="w3-row">
      <div class="w3-col w3-container m4 l3 w3-yellow">
        <h3>PILA DE CARTES</h3>
        <p id="pila"></p>
      </div>
      <div class="w3-col w3-container m4 l3 w3-blue">  
        <h3>JUGADOR 1</h3>
        <button onclick="joc.donaCarta(joc.jugadors[0]);actualitza();">Agafa Carta</button>
        <p id="jugador1"></p>
      </div>
     
      <div class="w3-col w3-container m4 l3 w3-red">  
        <h3>JUGADOR 2</h3>
        <button onclick="joc.donaCarta(joc.jugadors[1]);actualitza();">Agafa Carta</button>
        <p id="jugador2"></p>
      </div>

    </div>


    <script>
    /*
    CLASSES D'UN JOC DE CARTES
    Simulador de llistes a un joc de cartes on hi participen dos jugadors
    Pere Antoni Bennàssar Albons
    */

    class Joc{
    /*************************************************************************************************
    CLASSSE JOC:
    -Atributs:
        -pila: llista per guardar els objectes carta del centre de la taula de joc.
        -jugadors: llista que tendrà els objectes jugador
    -Mètodes:
        +constructor():     crea les dues llistes buides.
        +afegirCarta(c):    posa l'objecte carta "c" sobre la llista pila.
        +afegirJugador(c):  posa l'objecte jugador "j" sobre la llista pila.  
        +mesclarCartes():   mescla les cartes de la pila de joc.
        +llistaCartes ():   retorna en format HTML una llista de totes les cartes de la pila de joc.
        +donaCarta(j):      agafa una carta de la pila i la posa a la llista del jugador j
        +enfrontaCartes():  (en desenvolupament).realitza l'operació entre les dues cartes primeres de la pila  
                            dels jugadors de la llista.
    **************************************************************************************************/

        constructor(){
            this.pila=[];  
            this.jugadors=[];
        }
        afegirCarta(c){this.pila.push(c);}
        afegirJugador(j){this.jugadors.push(j);}
        mesclarCartes(){
            //metode que mescla la llista
            this.pila.sort(function(a, b){return 0.5 - Math.random()});
        }
        llistaCartes(){
            //per fer el recorregut podem emprar foreach.
            //en aquest cas usam un for
            let totesCartes="";
            for (var i=0;i<this.pila.length;i++){
                //alert (this.pila[i].getDescripcio());
                totesCartes += this.pila[i].getDescripcio() + "<br>";
            }
            return totesCartes;
        }
        donaCarta(jugador){
            jugador.agafaCarta(this.pila.shift());
        }
        enfrontaCartes(){
            //agafa les cartes 0 dels jugadors 0 i 1 (per ara)
            //i les lleva de la llista.
            //anota el resultat
            //alert(this.jugadors[1].ma[0].getResistencia());
            if (this.jugadors[0].ma[0].getInsistencia()>this.jugadors[1].ma[0].getResistencia()){
                alert ("El jugador " + this.jugadors[0].getNom() + " guanya ");
            }
            if (this.jugadors[1].ma[0].getInsistencia()>this.jugadors[0].ma[0].getResistencia()){
                alert ("El jugador " + this.jugadors[1].getNom() + " guanya ");
            }
            this.jugadors[0].ma.shift();
            this.jugadors[1].ma.shift();
            actualitza();
            //alert("enfrontarè cartes " + this.jugadors[0].ma[0].getCarta());
        }

    }

    class Carta {
    /*************************************************************************************************
    CLASSSE CARTA:
        constructor(nom,i,r,id)
        setCl()
        getDescripcio()    
        getDescripcio(i)
        getInsistencia(){return this.insistencia;}
        getResistencia(){return this.resistencia;}
        prova(){alert (this.nom);}
    }

    class Jugador{
        constructor(nom){
            this.nom=nom;
            this.ma=[];
            this.joc=[];
        }
        agafaCarta(carta){this.ma.push(carta); return }
        getNom(){return this.nom;}
        llistaCartes(){
            //per fer el recorregut podem emprar foreach.
            //en aquest cas usam un for
            let totesCartes="";
            for (var i=0;i<this.ma.length;i++){
                //alert (this.pila[i].getDescripcio());
                totesCartes += this.ma[i].getDescripcio(i) + "<br>";
            }
            return totesCartes;
        }
        mouCarta(i){
            //mou una carta de la posicio i a la posicio 0
            //de la ma
            //this.ma[i];      //agafam la carta dins una variable
            //alert (cartaMoure.getDescripcio());
            var cartaMoure=this.ma[i].splice(i,1);               //borram la carta de la llista
            this.ma.shift(cartaMoure);  //posam la carta a la primera posicio
            actualitza();
        }

    **************************************************************************************************/

        constructor(nom,i,r,id) {
            this.nom = nom;
            this.insistencia=i;
            this.resistencia=r;
            this.id="carta"+id;
            this.cl="";
        }
        setCl(){
            this.cl=document.getElementById(this.id);
            var a =document.getElementById(this.id);
            alert(a);        
            //alert (this.id + document.getElementById("p"));
            //this.cl.addEventListener("click",function(){this.prova;},false);
    }
        getDescripcio(){return "<button onclick='alert(""+ this.nom + "")'>" + this.nom + ".(" + this.insistencia + ", " + this.resistencia +")</button>"; }
        //getDescripcio(i){return "<button onclick='joc.jugadors[0].mouCarta("+ i +")'>" + this.nom + ".(" + this.insistencia + ", " + this.resistencia +")</button>"; }
        getDescripcio(i){return "<button id='"+ this.id +"'>" + this.nom + ".(" + this.insistencia + ", " + this.resistencia +")</button>"; }
           
        getInsistencia(){return this.insistencia;}
        getResistencia(){return this.resistencia;}
        prova(){alert (this.nom);}
    }

    class Jugador{
       
        constructor(nom){
            if (nom){
                this.nom=nom;}
                else{this.nom="Eustaqui";}        
            this.ma=[];
            this.joc=[];
        }
        agafaCarta(carta){this.ma.push(carta); return }
        getNom(){return this.nom;}
        llistaCartes(){
            //per fer el recorregut podem emprar foreach.
            //en aquest cas usam un for
            let totesCartes="";
            for (var i=0;i<this.ma.length;i++){
                //alert (this.pila[i].getDescripcio());
                totesCartes += this.ma[i].getDescripcio(i) + "<br>";
            }
            return totesCartes;
        }
        mouCarta(i){
            //mou una carta de la posicio i a la posicio 0
            //de la ma
            //this.ma[i];      //agafam la carta dins una variable
            //alert (cartaMoure.getDescripcio());
            var cartaMoure=this.ma[i].splice(i,1);               //borram la carta de la llista
            this.ma.shift(cartaMoure);  //posam la carta a la primera posicio
            actualitza();
        }
    }


    function actualitza(){
        document.getElementById("pila").innerHTML = joc.llistaCartes();
        document.getElementById("jugador1").innerHTML = joc.jugadors[0].llistaCartes();
        document.getElementById("jugador2").innerHTML = joc.jugadors[1].llistaCartes();}

    //Cream l'estructura de Joc. Una pila de cartes.
    joc = new Joc();
    //joc.afegirCarta(new Carta("fallen angel",1,5));
    //joc.afegirCarta(new Carta("only si",5,1));

    var carta;
    for (var i=0;i<20;i++){
        carta=new Carta("Carta " + i,i,20-i,i);
        joc.afegirCarta(carta);
        //var b= document.getElementById("carta"+i);
        //alert(b);    
        carta.setCl();
        //p.addEventListener("click",function(){this.prova.bind();},true);
    }
    joc.mesclarCartes();
    document.getElementById("pila").innerHTML = joc.llistaCartes();

    joc.afegirJugador(new Jugador("Tomeu"));
    joc.afegirJugador(new Jugador("Bernat"));
    document.getElementById("pila").innerHTML = joc.llistaCartes();
    document.getElementById("jugador1").innerHTML = jugador1.llistaCartes();


    </script>

    </body>
    </html>
    admin2on batxilleratEl paradigma de programació orientada a objectes permet desenvolupar aplicacions informàtiques mantenint un codi clar i manipulable. De la POO hem de destacar que permet un disseny de l'entorn amb independència del llenguatge final de programació. Usa eines UML, llenguatge de modelat unificat, per expresar el disseny en diferents nivells....Blog Aula Informàtica Gimnèsia