Mootools - cap 1 - Il pane quotidiano

Il Pane quotidiano - funzioni $ e gli Element
Javascript è un linguaggio di scripting che fondamentalmente svolge la funzione di dare logica a quello che è la grafica data da HTML e CSS in una pagina web.
Il pane quotidiano quindi di un "programmatore web" è prendere un elemento dalla pagina, manipolarlo e fare computazione. Vediamo come Mootools ci viene in aiuto nella stesura del nostro codice.



Le funzioni $ e $$
Dicevamo che "accattarsi" un elemento dalla pagina e manipolarlo è un'operazione presente forse in ogni script javascript. Javascript ci mette a disposizione la funzione document.getElementById('id') fortunatamente cross-browser (con un solo piccolo problema) ma eccessivamente scomoda (troppo lunga! ricordiamoci che 'ctrl+c' + 'ctrl+v' = 'problemi') e limitata (limitata lo direte dopo aver letto quest'articolo...).
Mootools ci mette a disposizione la funzione $ che ha la duplice funzione di restituirci un elemento a partire dal suo id e restituirci quell'elemento come oggetto nativo di tipo Element (nel prossimo paragrafo).

• Funzione $
  var myElement=$('myElementId');
  Restituisce un Element se ne esiste uno con quell'id, null altrimenti.
  var div=document.getElementById('myElementId');
div=$(div);
  Restituisce un Element a partire dall'element nella pagina. Attenzione, non ho sbagliato a scrivere la frase precedente (cerco di mettervi un pò di curiosità sugli Element, o ci sto riuscendo o vi sto creando confusione in testa...fatemelo sapere).


• Funzione $$
  $$('a'); //Ritorna tutti i tag a nella pagina (i link per capirci).
$$('a', 'b'); //Ritorna tutti i tag a e tutti i tag b nella pagina.
  Restituisce un Array contenente tutti gli Element che "matchano" con i criteri inseriti tra le virgolette. I criteri sono i selettori utilizzati per definire il css nella pagina quindi:
  $$('.classe'); //Ritorna tutti gli elementi del dom con class="classe"
$$('#unId .unaClasse'); //Ritorna tutti gli elementi del dom figli dell'elemento con id="unId" e con class="unaClasse".
$$('#unId a.unAltraClasse'); //Ritorna tutti i tag a figli dell'elemento con id="unId" ma con class="unAltraClasse".
  

Grazie a queste due funzioni "si ha il dom in mano" (questa è una citazione...) con una sintassi estremamente ridotta e facile da ricordare.

Gli Element
A questo punto almeno uno dei lettori di quest'articolo mi starà maledicendo dicendo "ma questi Element cosa sono?"... ci penso subito caro lettore!
Gli Element sono un'estensione del tipo nativo element del dom grazie al quale è possibile invocare tutti i metodi definiti dalla libreria.
Tratteremo il tipo Element bene nel prossimo capitolo ma giusto per darvi un piccolo assaggio vi facciamo vedere un esempietto.

Un bel div 100x100px

Premimi

Beh, il codice (una sola riga) vedetelo con firebug XD...