Funcions i esdeveniments. Canvis d’atribut i d’estil


En aquest apartat es descriuen els procediments i les funcions, i la forma d'utilitzar-los per gestionar esdeveniments i modificar el contingut o l'aspecte visual de la webapp.



Més concretament es pretén donar resposta a les preguntes següents:


  • Com es defineix i es crida a un procediment?
  • Quins tipus de procediment hi ha?
  • Com es gestiona un esdeveniment?
  • Quines funcions permeten modificar atributs o declaracions d'estil?


Procediments i funcions


Els procediments permeten encapsular instruccions de codi de forma que es puguin reutilitzar. Es defineixen mitjançant la instrucció function seguida del nom del procediment i, entre parèntesis, els paràmetres (si en té). La crida a un procediment es fa amb el nom del procediment i els arguments corresponents a cada paràmetre. Per exemple, 


let temps = 0;
function incrementa(instant, durada) {    // definició de la funció incrementa amb dos paràmetres
    temps += instant;
    temps += durada;
}
incrementa(10, 5);    // crida a la funció amb els arguments instant = 10 i durada = 5. Resultat: temps = 15


Les funcions són procediments que retornen un resultat (mitjançant la instrucció return). El procediment anterior, programat com a funció, seria: 


function incrementa(instant, durada) {    // definició de la funció incrementa amb dos paràmetres
    instant += durada;
    return instant;    // instrucció de retorn del resultat (15)
}
let temps = incrementa(10, 5)    // crida a la funció amb els arguments instant = 10 i durada = 5. Resultat: temps = 15


En la definició de procediments (per a la gestió d'esdeveniments, per exemple) es poden utilitzar procediments fletxa. Així s'obtenen definicions compactes i fàcils de llegir. Per exemple, 


function (a) {    // definició convencional
  return a + 100;
}
 
a => a + 100;    // definició mitjançant "procediment fletxa"


Es pot afegir la paraula clau async per definir una funció asíncrona. Per exemple, 


async function saluda() {
    return "Hola";
}


Les funcions asíncrones es fan servir quan la seva execució pot trigar un cert temps i, a continuació, s'han d'executar altres instruccions. En aquest cas, s'utilitza la paraula clau then. Per exemple, una crida a la funció anterior seria: 


saluda().then(
  salutacio => salutacio + ". Bon dia"
);


Dins d'una funció async es pot utilitzar la paraula clau await en la crida d'una altra funció asíncrona. L'execució de la funció async s'atura fins que l'execució de la funció asíncrona cridada hagi finalitzat.


Interacció amb els elements del document HTML

Per obtenir la referència a un element concret s'utilitza la instrucció document.getElementById(id_element), on id_element és el valor de l'atribut id de l'element. Un cop es disposa de la referència, es poden efectuar diferents operacions sobre l'element:

  • Canviar el valor d'una propietat d'estil. Per exemple,
document.getElementById("splash").style.display = "none";
  • Canviar el valor d'un atribut. Per exemple,
document.getElementById("menu").setAttribute("nom", "Menú");
  • Afegir o treure una classe. Per exemple,
document.getElementById("superior").classList.add("ocult");
document.getElementById("superior").classList.remove("ocult");
  • Associar un esdeveniment. Per exemple,
document.getElementById("botó").addEventListener("click", function() {
    // espai per al codi que s'executa quan es fa clic sobre el botó    
});


En el procediment que s'executa quan es produeix un esdeveniment es pot fer servir l'objecte this per referir-se a l'element.


Una forma més simple d'associar un esdeveniment a un element del document HTML és mitjançant un atribut d'esdeveniment dins de l'etiqueta de l'element amb el valor del nom del procediment que s'ha d'executar quan es produeix l'esdeveniment. Per exemple, 


<button onclick="nou_usuari()">Nou usuari</button>


onclick és l'atribut d'esdeveniment (el més habitual per a botons) i nou_usuari() és el procediment que s'executa quan es fa clic al botó.