M06 UF1A3. Teoria

Scripts de classe

• Fitxer:Curs javascript developer mozilla.zip (actualitzat 28/10/2021)

T11. Treballar amb objectes

• https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Working_with_Objects

T12. Repàs de prototype

prototype és una propietat dels objectes String, Number, Date, Array, RegExp,... que ens permet definir un nou mètode a aquests objectes.

Ex 1. L'objecte Array no té un mètode per fer shuffle (desordenar). Tenim la següent funció que fa la feina:

• https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array

function shuffle(array) {
  let currentIndex = array.length,  randomIndex;

  // While there remain elements to shuffle...
  while (currentIndex != 0) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }

  return array;
}

// Used like so
var arr = [2, 11, 37, 42];
shuffle(arr);
console.log(arr);

A partir d'aquesta funció, creem el mètode desordenar() dels Array.

Array.prototype.desordenar = function() { return shuffle(this) }

Comprovem que funciona:

var arr = ['a','b','c','d'];
console.log(arr.desordenar());

Ex 2. Ara que ja sabem desordenar arrays, ara desordenarem strings, aprofitant que ja sabem desordenar arrays:

String.prototype.desordenar = function() {
	var arr=this.split("");
	arr.desordenar();
	return arr.join("");
}

Per exemple, anem a crear el mètode desordenar() que desordeni els caràcters d'una cadena, de forma aleatòria

var cad = "supercalifragilisticoespialidoso";

console.log(cad.desordenar())

Propietat constructor dels objectes

Si anem a la referència dels Strings (https://www.w3schools.com/jsref/jsref_obj_string.asp) veiem que hi ha tres propietats:

• length (la més important)
• prototype (ja l'he vist)
• constructor: per a què serveix aquesta propietat? Serveix per a accedir a la definició de la funció constructora (en format cadena).

Anem a veure un exemple de constructor amb un objecte genèric:

function displayMoto() {
   var result = `Una bonica ${this.make} ${this.model} del ${this.year}`;
   return result;
 }

function Moto(make, model, year, owner) {
   this.make = make;
   this.model = model;
   this.year = year;
   this.owner = owner;
   this.displayMoto = displayMoto;
}

var moto1 = new Moto('honda','500','pep');

console.log(moto1.constructor); //no ens mostra tota la cadena
[Function: Moto]

console.log('funció constructora: ' + moto1.constructor); //ho hem de fer així
funció constructora: function Moto(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
  this.displayMoto = displayMoto;
}

Comentaris de classe (11/01/2022)

Avui hem comentat diversa informació relacionada amb Javascript i recopilada aquestes festes de Nadal:

1. Error en la web:

• https://titanseriesalmeria.com/

S'ha fet una captura de pantalla on apareix un NaN (l'error ja s'ha solventat).

2. Problema amb el desenvolupador Narak i el repositori Github:

• https://www.genbeta.com/actualidad/sabotear-tu-propio-proyecto-open-source-grandes-empresas-dejen-beneficiarse-supone-que-github-te-bloquee-todo

La llibreria de la que es parla és:

• https://github.com/Marak/colors.js

Feina voluntària per pujar nota: instal·la la llibreria colors.js (NodeJS), i formata el text en colors tal com s'explica en el Readme.

3. Paris Dakar, pàgina oficial

• https://live.worldrallyraidchampionship.com/2022/dakar/asod/es

Pots veure a temps real com evolucionen els cotxes i les motos. Tot fet amb Javascript, evidentment.

4. paraulogic

• https://vilaweb.cat/paraulogic/

En el codi font pots veure la llista de paraules de la solució.

5. Una altra aplicació híbrida en la mateixa línia:

• https://gelozp.com/games/wordle/

Pots instal·lar localment aquestes dues aplicacions a partir del codi font?

---

creat per Joan Quintana Compte, octubre 2021, gener 2022