mètodes d'objectes

Ús de mètodes dels objectes de JavaScript (un parell de cada, els que creguis que et poden servir per al projecte o tinguis especial interès en provar).

by merygarriga

HTML

<html>

  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </head>

  <body style="font-family:  'Courier New', Courier, monospace;
    text-align: center;
    background-color: slategray;">

    <h1>OBJECTES del SISTEMA</h1>
    <h2>STRING</h2>
    <p>Tenim el text: <i><span id="original"></span></i>.<br>A continuació aplicarem algunes funcions i veurem les seves aplicacions.</p>
    <h3>substring() and filter()</h3>
    <p>En aquest cas treiem la paraula <i>text</i>. Ho farem de dues maneres, la primera utilitzant la funció substring així: <i>text.substring(13, 17)</i>, i el resultat és: <span id="substring"></span> </p>
    <p>La segona manera és utilitzant la funció <b>split()</b>, primer separem la frase per paraules creant un nou array. Aquest és el contingut de l'array creat: <span id="aparaules"></span>.</p>
    <p>A continuació treiem les paraules de 4 lletres mitjançant la funció <i>filter()</i>: <span id="text"></span></p>

    <p class="explain">Funció <b>substring()</b>: Retorna una part de l’string.<br>
      Funció <b>filter()</b>: Crea una còpia superficial d'una part d'un array, només filtra els elements de l'array que compleixen la funció. En aquest cas la funció és: <i>word => word.length == 4</i>.<br><br></p>

    <h3>replace(), toLowerCase() and toUpperCase()</h3>
    <p>Seguim amb el mateix text d'abans però aquest cop utilitzem la funció <i>replace()</i> varies vegades canviant algunes paraules i afegint majúscules per aplicar després les funcions <i>toLowerCase</i> i <i>toUpperCase</i>. <br>Aquest és el primer canvi: <span id="firstChange"></span>. <br>Aquest...

CSS

h1 {
  font-size: 3em;
  color: #DED1A9;
}

h2 {
  font-size: 2em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #1A3651;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  color: #B0B8BF;
}

.explain {
  color: #BABFB0;
}

span {
  font-weight: bold;
  color: #BABFB0;
}

JavaScript

/*
----------------------------------------------------------------
----------------------------------------------------------------
-------------------EXEMPLE STRINGS------------------------------
----------------------------------------------------------------
----------------------------------------------------------------
*/
const text = "Aquest és un text d'exemple";
document.querySelector('#original').innerHTML += text; 

// Agafem la paraula TEXT:
const subcadena = text.substring(13, 17);
document.querySelector("#substring").innerHTML = subcadena;

// Creem un array amb les paraules de TEXT
const paraules = text.split(' ');
document.querySelector("#aparaules").innerHTML = paraules;

// Creem un array amb les paraules de 4 lletres.
const paraula4lletres = paraules.filter(word => word.length == 4);
document.querySelector("#text").innerHTML = paraula4lletres;

//Utilitzem el replace per canviar les paraules a femení perquè en lloc de TEXT posarem FRASE
var frase = text.replace('Aquest', 'aquESTA'); 
document.querySelector("#firstChange").innerHTML = frase;
frase1 = frase.replace('un', 'UNa'); 
document.querySelector("#secondChange").innerHTML = frase1;
frase2 = frase1.replace('text', 'frASE'); 
document.querySelector("#finalChange").innerHTML = frase2;
document.querySelector("#replace").innerHTML = frase2;

//Tornem a fer un substring
const subcadena2 = frase2.substring(15, 20);
document.querySelector('#substring2').innerHTML += subcadena2;

//tolowercase and touppercase
const minusculas = frase2.toLowerCase();
document.querySelector('#lowerCase').innerHTML += minusculas;
const mayusculas = frase2.toUpperCase();
document.querySelector('#upperCase').innerHTML += mayusculas;

/*
----------------------------------------------------------------
----------------------------------------------------------------
-------------------EXEMPLE...