Orientació a objectes en JavaScript

function Animal () {
}

function Animal () {
}

var elmeuAnimal = new Animal();

• Propietats estàtiques o de classe

• Propietats d'objecte (les més habituals i comunament referides com a propietats a seques)

• Propietats públiques (accessibles externament)

• Propietats privades (accessibles solament dins de la pròpia classe)

• Mètodes estàtics

• Mètodes d'objecte, que al seu torn es divideixen en:

  • públics

  • privats

function Gos (nom) {
   this.parent.constructor.call(this,nom); 
   }

Gos.prototype = new Animal();
Gos.prototype.constructor = Gos; 
Gos.prototype.parent = Animal.prototype; 

Gos.prototype.lladrar = function() {
   console.log('guau'); 
}

var elmeuGos = new Gos('Vostè'); 
elmeuGos.créixer(5, 10); // creix 5 kg i 10 cm
miPerro.lladrar();

this.parent.constructor.call(this, nom); 

function LamevaApp() {
   this.pantallaActual = null; 
}
LamevaApp.PANTALLA_MENU = 'MENU'; 
LamevaApp.PANTALLA_DETALL = 'DETALL'; 

LamevaApp.prototype.inicialitzar = function() {
   this.actualitzarPantalla( LamevaApp.PANTALLA_MENU ); 
}

LamevaApp.prototype.actualitzarPantalla = function(novaPantalla) {
   if (this.pantallaActual === null || novaPantalla !== this.pantallaActual.getNombre() ) 
   {
      if (this.pantallaActual !== null) {
         this.pantallaActual.ocultar();
         this.pantallaActual.destruir();
      }

      switch (novaPantalla) 
      {
         case LamevaApp.PANTALLA_MENU: 
         this.pantallaActual = new PantallaMenu();
         break; 

         case LamevaApp.PANTALLA_DETALL: 
         this.pantallaActual = new PantallaDetall();
         break; 
      }

      this.pantallaActual.setNom(novaPantalla); 
      this.pantallaActual.mostrar();
   }
}

function Pantalla () {
   this._nom = ''; 
}

Pantalla.prototype.setNom = function(nom) {
   this._nom = nom; 
}

Pantalla.prototype.getNom = function() {
   return this._nom; 
}

Pantalla.prototype.mostrar = function() {
      // Codi per a mostrar la pantalla
}

Pantalla.prototype.ocultar = function() {
   // Codi per a ocultar la pantalla
}

Pantalla.prototype.destruir = function() {
   // Codi per a eliminar la pantalla
}

function PantallaMenu() {
}
PantallaMenu.prototype = new Pantalla();
PantallaMenu.prototype.constructor = PantallaMenu; 
PantallaMenu.prototype.parent = Pantalla.prototype; 

function PantallaDetall() {
}
PantallaDetall.prototype = new Pantalla();
PantallaDetall.prototype.constructor = PantallaDetall; 
PantallaMenu.prototype.parent = Pantalla.prototype; 

var app = new LamevaApp();
app.inicialitzar();

instanciaPare instanceof ClassePare; // true
instanciaPare instanceof ClasseFilla; // false
instanciaFilla instanceof ClasseFilla; // true
instanciaFilla instanceof ClassePare; // true

if (typeof Object.create !== "function") {
   Object.create = function (o) {
      function F() {}
      F.prototype = o; 
      return new F();
   };
}

var persona = {
   dni: '', 
   nom: '', 
   amics: null, 

   init: function(dni, nom) {
      this.dni = dni; 
      this.nom = nom; 
      this.amics = new Array();

      return this; 
   },

   saludar: function() {
      console.log('Hola em dic '+this.nom); 
   }
   };

var lameva = Object.create(persona).init('1', 'Marc'); 
mi.saludar();

var persona = {
   dni: '', 
   nom: '', 
   amics: null, 

   init: function(dni, nom) {
      this.dni = dni; 
      this.nom = nom; 
      this.amics = new Array();

      return this; 
   },

   saludar: function() {
      console.log('Hola em dic '+this.nom); 
   }
   };

var estudiant = Object.create(persona); 
estudiant.estudiar = function() {
   console.log(this.nom + ' està estudiant.'); 
};

var jo = Object.create(estudiant).init('1', 'Marc'); 
jo.saludar();
jo.estudiar();

var persona = {
   dni: '', 
   nom: '', 
   amics: null, 

   init: function(dni, nom) {
      this.dni = dni; 
      this.nom = nom; 
      this.amics = new Array();

   return this; 
   },

   saludar: function() {
      console.log('Hola em dic '+this.nom); 
   }
   };

   var estudiant = Object.create(persona, {
   numeroMatricula: {
      get: function() {
         return this.value; 
      },
      set: function(newValue) {
         this.value = newValue; 
      }
   },

   init: {
      value: function(dni, nom, numeroMatricula) {
         persona.init.call(this, dni, nom); 
         this.numeroMatricula = numeroMatricula; 
         return this; 
      }
   },

   estudiar: {
      value: function() {
         console.log('estudiant > '+this.numeroMatricula); 
      }
   }
});

   var jo = Object.create(estudiant).init('1','Marc','12'); 
jo.saludar();
jo.numeroMatricula = '333'; 
jo.estudiar();

persona.init.call(this, dni, nom);

var cotxe = new Object();
cotxe.marca = "Ford";
cotxe.model = "Focus";
cotxe.aireAcon = true;
cotxe.mostra = function()
              {
              alert(this.marca +" "+this.model);
              }

var adreces = new Object();
adreces["Víctor"] = "Santiago de Cuba";
adreces["Pablo"] = "Madrid";
adreces["Miquel"] = "València";

var adrMiq = adreces["Miquel"];

new Function (arg1, arg2..., argN, funció)

• arg1, arg2,..., argN: paràmetres opcionals, de la funció.

• funció: és una cadena que conté les sentències que componen la funció.

function llista(tipus) {
        document.write("<" + tipus + "l>");
        for (var i=1; i<llista.arguments.length; i++) {
                 document.write("<li>" + llista.arguments[i]);
  }
  document.write("</" + tipus + "l>");
}

llista("u", "U", "Dos", "Tres");

<ul>
<li>u
<li>Dos
<li>Tres
</ul>

var vector1 = new Array();
var vector2 = new Array(longitud);
var vector3 = new Array(element0, element1,..., elementN);

colors = new Array(16);
colors[0] = "Blau";
colors[1] = "Groc";
colors[2] = "Verd";

colors = new Array("Blau", "Vermell", "Verd");

var vector1 = [ ];
var vector2 = [,,,,,,,,,,,,,];
var vector3 = ["element0", "element1",..., "elementN"];

var vector = new Array("Plàtan", "Poma", "Pera");
var fruita1 = vector[0];

var vector1 = [2, 54, 16];
vector1[33] = 25

var vector2 = [2, 4, 6, 8];
var vector3 = vector2;
vector3[0] =1;

delete vector1[3];

longitud = vector1.length;

• Si compara(a,b) és més petit que 0, b té un índex en l'array més petit que a.

• Si compara(a,b) és 0, no modifica les posicions.

• Si compara(a,b) és més gran que 0, b té un índex en l'array més gran que a.

function compara(a, b) {
       if (a < b per un criteri d'ordenació)
                return -1;
       if (a > b per un criteri d'ordenació)
                return 1;
       return 0; //són iguals
}

function compara(a, b){
       if (a < b)
                return -1;
       else if (a === b)
                return 0;
       else
                return 1;
}

numeros = new Array(1, 2, 11);
function compara(a, b){
       if (a < b)
                return -1;
       else if (a === b)
                return 0;
       else
                return 1;
}

function ordena(){
       numeros.sort(compara);
       document.write(numeros);
}

var pila = [ ];         //[ ]
pila.push("primer");   //["primer"]
pila.push(15, 30);     //["primer",15, 30]
pila.pop();            //["primer",15] i torna el valor 30

var cua = ["Joan", "Pere", "Andreu", "Vicenç"];
cua.unshift("Clàudia", "Raquel");    //cua contindrà ["Clàudia", "Raquel", "Joan",
                                     //"Pere", "Andreu", "Vicenç"]
var primer = cua.shift();            //primer contindrà el valor "Clàudia"

var cua = ["Joan", "Pere", "Andreu", "Vicenç"];
cua.push("Clàudia");            //cua contindrà ["Joan","Pere", "Andreu", "Vicenç","Clàudia"]
var seguent = cua.shift();    //seguent contindrà el valor "Joan"

var color = ["Vermell", "Verd", "Blau"];
var colorAmp = color.concat("Blanc", "Negre");

var color = ["Vermell", "Verd", "Blau"];
var cadena = color.join("-");

var color = ["Vermell", "Verd", "Blau"];
color.reverse();

var carrera = [21, 25, 12, 23];
carrera.slice(2);      //torna [12, 23]
carrera.slice(1,3);    //torna [25, 12]
carrera.slice(-2, -1)  //torna [12]

splice(inici, elementsEsborrar, elementsAfegir);

• inici: indica l'índex a partir del qual es fa l'operació.

• elementsEsborrar: nombre d'elements que s'eliminen, començant pel que marca el primer paràmetre. Si s'omet aquest paràmetre, s'eliminen tots els elements des del començament fins al final de l'array i, tal com s'ha dit, són tornats (es poden emmagatzemar en una variable).

• elementsAfegir: llista d'elements separats per comes, no obligatòria, que substitueixen els eliminats.

var carrera = [21, 25, 12, 23];
carrera.splice(2, 2);  //torna els elements eliminats [12, 23] i l'array
                       //contindrà els valors [21, 25]
carrera.splice(2, 0, 31, 33);  //no elimina cap valor i per tant torna [ ]
                               //i afegeix els valors [31, 33] a la cadena

var matriu = [[1,2,3],[4,5,6],[7,8,9]];

matriu[0][1];   //torna el valor 2, ja que accedim al segon
                //element de la primera array

function mMostra(){
       if (this.length != 0)
                 alert(this.join());
       else
                 alert("L'array és buida");
}
Array.prototype.mostra = mMostra;

new Boolean(valor)

new Date()
new Date(any_num, mes_num, dia_num)
new Date(any_num, mes_num, dia_num, hora_num, min_num, seg_num)

mesos = new Array("Gener", "Febrer", "Març", "Abril", "Maig", "Juny", "Juliol",
"Agost", "Setembre", "Octubre", "Novembre", "Desembre");
var data = new Date();
var mes = data.getMonth();
var any = data.getFullYear();
document.write("Avui és" + data.getDate() + "de" + mesos[mes] + "de" + any);

function calcula(nombre){
    cosValue = Math.cos(nombre); //Emmagatzema a cosValue el valor del cosinus
    sinValue = Math.sin(nombre); //Emmagatzema a sinValue el valor del sinus
    tanValue = Math.tan(nombre); //Emmagatzema a cosValue el valor de la tangent
    sqrtValue = Math.sqrt(nombre); //Emmagatzema a sqrtValue el valor de l'arrel
    powValue = Math.pow(nombre,3); //Emmagatzema a powValue el valor d'elevar a 3 el valor
    expValue = Math.exp(nombre); //Emmagatzema a expValue el valor de e elevat al valor del nombre
}

new Number (valor)

new String(text)

var cadena = "Hola, Món";
longitud = cadena.length;

var cadena = "Hola, Món";
cadena.toUpperCase();

var cadena = "Hola, Món";
cadena = cadena.toUpperCase();

var cadena = "Hola, Món";
caracter = cadena.charAt(2); //La variable caracter recupera el valor "l".

var cadena = "Hola, Món";
posicio = cadena.indexOf("Món"); //La variable posicio recupera el valor 6.

var cadena = "Hola, Món";
posicio = cadena.indexOf("ó",3); //La variable posicio recupera el valor 7.

var cadena = "Hola, Món";
posicio = cadena.lastIndexOf("o",3); //La variable posicio recupera el valor 1.

var cadena = "Hola, Món";
var subCadena = cadena.substring(5); //subCadena adquireix el valor " Món"
var subCadena2 = cadena.substring(5,7); //subCadena2 adquireix el valor " M"

var cadena = "Hola, Món";
var cadena2 = cadena.concat(" lliure ", "i feliç"); //cadena2 adquireix el valor
"Hola, Món lliure i feliç"

var cadena2 = cadena + " lliure " + "i feliç";

var vector = "Hola, Món lliure".split(" ");

dir *.exe, 

var patro = /Cubo/;

var patro = new RegExp("Cubo");

var patro = /Cub[ao]/;

var patro = /Cub[0-9]/;

var patro = /Cub[0-9a-z]/;

• +: indica que el que té a l’esquerra pot estar 1 o més vegades.

• *: indica que pot estar 0 o més vegades (en el cas de +, el nombre o la minúscula hauria d'aparèixer almenys 1 vegada, amb * Cub també s'acceptaria).

• ?: indica opcionalitat, és a dir, el que es té a l'esquerra pot aparèixer o no (pot aparèixer 0 o 1 vegades).

• {}: serveix per a indicar exactament el nombre de vegades que pot aparèixer o un rang de valors. Per exemple, {3} indica que ha d'aparèixer exactament 3 vegades, {3,8} indica que ha d'aparèixer entre 3 i 8 vegades i {3,} indica que ha d'aparèixer almenys 3 vegades.

var patro = /Cub[ao]{2}/;
document.write("Cubocuba".search(patro));
document.write("Cuboa".search(patro));

var patro = /^aa/; //Es busca la cadena aa a l'inici de la cadena
var patro = /uu$/; //Es busca la cadena uu al final de la cadena

• \d: un dígit, equival a [0-9].

• \D: qualsevol caràcter que no sigui un dígit.

• \w: qualsevol caràcter alfanumèric, equival a [a-zA-Z0-9_].

• \W: qualsevol caràcter no alfanumèric.

• \s: espai.

• \t: tabulador.

https://www.regular-expressions.info/

new RegExp("patró", "indicador")

• patro és text de l'expressió regular.

• indicador és opcional i pot prendre tres valors:

  • g: s’han de tenir en compte totes les vegades que l'expressió apareix en la cadena.

  • i: ignora majúscules i minúscules.

  • gi: tenen efecte les dues opcions, g i i.

document.cookie="nom=Victor; expires=Sun, 14-Dec-2010 08:00:00 GMT; path=/fitxers";

function assignaCookie(nom,valor,dies){
   if (typeof(dies) == "undefined"){
      //Si no es passa del paràmetre dies, la cookie és de sessió
      document.cookie = nom + "=" + valor;
   } else {
      //Es crea un objecte Date al qual s'assigna la data actual
      //i s'hi afegeixen els dies de caducitat transformats en 
      //mil·lisegons
      var caduca = new Date;
      caduca.setTime(dataCaduca.getTime() + dies*24*3600000);
      document.cookie = nom + "=" + valor +";expires=" + caduca.toGMTString();
   }
}

document.cookie= "nom=Victor";
document.cookie="email=vriospazos@uoc.edu"

"nombre=Victor; email=vriospazos@uoc.edu"

//SEs crea l'objecte que contindrà l'array associativa cookies[nom] = valor
var cookies = new Object(); 

//Es defineix la funció que analitza la cadena i crea l'array a partir de la cadena 
//document.cookie, i es comproven certes situacions especials
function extreuCookies(){

   //Variables que emmagatzemaran les cadenes nom i valor
   var nom, valor; 

   //Variables que controlaran els límits que marquen la posició de les
   //diverses cookies a la cadena
   var inici, mig, final; 

   //El bucle següent comprova si hi ha alguna entrada en l'array
   //associativa, de manera que si es així, es crea una instància nova de
   //l'objecte cookies per a eliminar-les
   for (name in cookies){
      cookies = new Object();
      break;
   }
inici = 0; 

   //Es fa un bucle que captura a cada pas el nom i valor de
   //cada cookie de la cadena i l'assigna a l'array associativa
   while (inici< document.cookie.length){
      //la variable medio almacena la posición del próximo carácter "="
      medio =  document.cookie.indexOf('=', inicio); 

      //lla variable mig emmagatzema la posició del pròxim caràcter ";"
      final = document.cookie.indexOf(';',inici);

      //El següent if comprova si final adquireix el valor -1 que indica
      //que no s'ha trobat cap caràcter ";", cosa que indica que
      //s'ha arribat a la darrera cookie i, per tant, s'assigna a la
      //variable final la longitud de la cadena
      if (final == -1) {
         final = document.cookie.length;
      }

      //El següent if fa dues comprovacions; en primer lloc, si
      //mig és més gran que final o mig és -1 (que indica que no
      //s'ha trobat cap caràcter "="), la cookie té nom però
      //no valor assignat
      //En l'altre cas el nom de la cookie és entre els
      //caràcters que hi ha entre inici i mig i el valor de la cookie
      //entre els caràcters que hi ha entre mig+1 i final
      if ( (mig > final) || (mig == -1) ) {
         nom = document.cookie.substring(inici, final);
         valor = "";
      } else {
         nom = document.cookie.substring(inici,mig);
         valor= document.cookie.substring(mig+1,final);
      }

      //Una vegada recuperat el nom i el valor, s'assigna a l'array
      //associativa aplicant la funció de conversió unescape()
         cookies[nom] = unescape(valor);

         //En el pas següent del bucle while, la variable inici adquireix
         //el valor final +2, i d'aquesta manera salten el punt i coma i
         //l'espai que separa les diverses cookies en la cadena
         inici = final + 2;
   }
}

function eliminaCookie(nombre){
   //S'actualitza la cookie modificant la data de caducitat i assignant
   //un valor qualsevol, en l'exemple esborrada
   document.cookie = nom + "=esborrada; expires=Thu, 01-Jan-1970 00:00:01 GMT";
   //S'actualitza la cookie sense valor indicant una data de caducitat
   //anterior
   document.cookie = nom + "; expires=Thu, 01-Jan-1970 00:00:01 GMT";
}

assignaCookie("nom","Victor");
assignaCookie("email","vriospazos@uoc.edu");

extreuCookies();
var nom = cookies["nom"];
var corr = cookies["email"];

eliminaCookie("nom");
eliminaCookie("email");

• S'utilitzen galetes per a emmagatzemar l'estat de l'usuari, adaptant la presentació o el contingut de la pàgina basant-se en les preferències de l'usuari.

• Redireccionar l'accés a una pàgina diferent quan l'usuari compleix certes condicions; per exemple, un usuari registrat passarà directament a les pàgines de contingut, mentre que si és la primera vegada que l'usuari hi accedeix se l’adreça a la pàgina de registre.

• Igual que en el cas anterior, a un usuari que accedeix per primera vegada se li pot obrir una finestra d'informació inicial, de manera que aquesta solament s'obri la primera vegada que accedeix a la pàgina.

• almenys tres-centes galetes

• mínim de 4.096 bytes per galeta (d'acord amb la grandària dels caràcters que componen la galeta no terminal en la descripció de la sintaxi de l'encapçalament Set-Cookie)

• almenys vint galetes per nom de host o domini únic

• Inserint el parell clau-valor:

  localStorage.setItem('clau','valor'); 
  

• Inserint un nou element com si localStorage fos una taula associativa:

  localStorage['clau'] = 'valor'; 
  

• Tractant localStorage com un objecte:

  localStorage.clau = 'valor'; 
  

• Utilitzant el mètode getItem():

  valor = localStorage.getItem('clau'); 
  

• Tractant d'accedir al valor utilitzant la clau com si localStorage fos una taula associativa:

  valor = localStorage['clau']; 
  

• Tractant localStorage com un objecte i utilitzant la clau com si en fos una propietat:

  valor = localStorage.clau'; 
  

localStorage.removeItem('clau'); 

localStorage.clear();

var total = localStorage.length; 

<script>
   for (var i=0; i < localStorage.length; i++) {
      document.write("La clau "+localStorage.key(i)+" emmagatzem el valor "
      +localStorage[localStorage.key(i)]); 
   }
</script>