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:

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

    <!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