In questo secondo tutorial su MooTools ci occuperemo di vedere come servirci di questo framework per adempire a semplici operazioni che già quotidianamente facciamo con JavaScript. Probabilmente verrà da chiedersi perché mai imparare qualcosa che già sappiamo fare, ma semplicemente in maniera diversa, e ovviamente la risposta sta in due parole: cross-browser. Se prima per scoprire con quale pulsante del mouse era stato fatto click su un'immagine bisognava scrivere codice specifico per almeno due tipi di browser, grazie a MooTools non è più necessario. Inoltre la sintassi di MooTools, dapprima ostica, diverrà man mano più semplice ed immediata da utilizzare. Ci occuperemo della gestione degli eventi, timer e di varie altre comuni operazioni.
È importante precisare che, quando possibile, è meglio utilizzare la soluzione offerta dal framework, poiché anche se apparentemente non vi è alcun vantaggio effettivo (ad esempio tra l'utilizzo di clearTimeout o $clear) in futuro potrebbero essercene.

Vediamo come eseguire una funzione dopo un certo tempo:

// JavaScript tradizionale
function notifica(messaggio) {
    alert(messaggio);
}

var timerID = setTimeout(function () { notifica("Salve!") }, 5000);

Con MooTools abbiamo invece una sintassi molto più compatta e intuitiva grazie alla funzione delay:

// MooTools
function notifica(messaggio) {
    alert(messaggio);
}

var timerID = notifica.delay(5000, null, "Salve!");

Il primo argomento è il ritardo in millisecondi, il secondo è l'oggetto per il binding (ovvero quello che la funzione identificherà come this) e gli argomenti successivi sono quelli che verranno passati alla funzione.

Vediamo come eseguire una funzione allo scadere di un intervallo di tempo:

// JavaScript tradizionale
function notifica(messaggio) {
    alert(messaggio);
}

var timerID = setInterval(function () { notifica("Salve!") }, 5000);

Con MooTools il codice è sostanzialmente identico a prima se non per il fatto che viene usata la funzione periodical invece di delay.

// MooTools
function notifica(messaggio) {
    alert(messaggio);
}

var timerID = notifica.periodical(5000, null, "Salve!");

Per annullare un timer in JavaScript tradizionale si poteva fare come segue:

// JavaScript tradizionale
function notifica(messaggio) {
    alert(messaggio);
}
var timerID = setInterval(function () { notifica("Salve!") }, 5000);
// ...
clearInterval(timerID);

var timerID2 = setTimeout(function () { notifica("Salve!") }, 5000);
// ...
clearTimeout(timerID2);

Con MooTools sia per i timer creati con periodical che con delay è sufficiente utilizzare la stessa funzione, $clear:

// MooTools
function notifica(messaggio) {
    alert(messaggio);
}
var timerID = notifica.periodical(5000, null, "Salve!");
// ...
$clear(timerID);

var timerID = notifica.delay(5000, null, "Salve!");
// ...
$clear(timerID2);

Per gestire un evento in JavaScript ci sono due metodi, il primo permette di associare una sola funzione all'evento, la seconda invece richiede un codice differente a seconda del browser in uso:

// JavaScript tradizionale
var mioDiv = document.getElementById("mioDiv");
mioDiv.onclick = function () { alert("Click"); }
// Permette di associare una sola funzione all'evento

if(mioDiv.addEventListener) {
    // Standard
    mioDiv.addEventListener("mouseenter", function () { alert("Mouse entrato [1]."); });
    mioDiv.addEventListener("mouseenter", function () { alert("Mouse entrato [2]."); });
} else {
    // Internet Explorer
    mioDiv.attachEvent("onmouseenter", function () { alert("Mouse entrato [1]."); });
    mioDiv.attachEvent("onmouseenter", function () { alert("Mouse entrato [2]."); });
}
// Codice differente per IE

Con MooTools abbiamo un'unica sintassi compatta e cross-browser, grazie alla funzione addEvent:

// MooTools
$("mioDiv").addEvent("click", function () { alert("Click"); });
$("mioDiv").addEvent("mouseenter", function () { alert("Mouse entrato [1]."); });
$("mioDiv").addEvent("mouseenter", function () { alert("Mouse entrato [2]."); });

Lo stesso discorso vale per rimuovere un gestore di un evento:

// JavaScript tradizionale
function cliccato() {
    alert("Click!");
}

var mioDiv = document.getElementById("mioDiv");
if(mioDiv.addEventListener) {
    // Standard
    mioDiv.addEventListener("click", cliccato);
} else {
    // Internet Explorer
    mioDiv.attachEvent("onclick", cliccato);
}

// ...

if(mioDiv.removeEventListener) {
    // Standard
    mioDiv.removeEventListener("click", cliccato);
} else {
    // Internet Explorer
    mioDiv.detachEvent("onclick", cliccato);
}
// Codice differente per IE

Mentre con MooTools:

// MooTools
function cliccato() {
    alert("Click!");
}

$("mioDiv").addEvent("click", cliccato);
// ...
$("mioDiv").removeEvent("click", cliccato);

Una tipica differenza tra i vari tipi di browser è poi il modo a cui si accede alle informazioni relative ad un certo evento (l'oggetto Event, che fornisce informazioni sull'elemento che ha generato l'evento e altri dettagli come il tasto premuto):

// JavaScript tradizionale
function tastoPremuto(eventInfo) {
    if (!eventInfo) var eventInfo = window.event;
    var elm = eventInfo.target;
    if(!elm) elm = eventInfo.srcElement;
    alert("ID textarea: " + elm.id + "\nTasto premuto: " + String.fromCharCode(eventInfo.keyCode);
}

var miaTextArea = document.getElementById("miaTextArea");
if(miaTextArea.addEventListener) {
    // Standard
    miaTextArea.addEventListener("keydown", tastoPremuto);
} else {
    // Internet Explorer
    miaTextArea.attachEvent("onkeydown", tastoPremuto);
}

Su IE bisogna usare window.event invece che il primo parametro che la funzione riceve. Inoltre l'elemento che ha generato l'evento si ottiene con srcElement invece che target. Si faccia caso inoltre al fatto che keyCode restituisce il codice numerico del tasto premuto mentre in genere è più utile avere direttamente il carattere.

// MooTools
function tastoPremuto(eventInfo) {
    alert("ID textarea: " + this.id + "\nTasto premuto: " + eventInfo.key);
}

$("miaTextArea").addEvent("keydown", tastoPremuto);

Anche stavolta ci troviamo ad avere una sola, semplice sintassi che funziona sui maggiori browser. Per individuare l'elemento che ha scatenato l'evento basta servirsi di this. Si noti inoltre che si è fatto uso della proprietà key che restituisce il carattere del tasto premuto invece che il suo valore numerico.

CONTROLLI SU VARIABILI, TIPI E GENERAZIONE DI NUMERI CASUALI
Come adempire a semplici attività quotidiane con MooTools.

Spesso è utile controllare se una variabile è null, e in genere si usa la conversione implicita verso un valore booleano tramite if:

// JavaScript tradizionale
function prova(argomento) {
    if(argomento) alert("L'argomento è stato passato e non è null.");
}

Tuttavia dietro a questo codice si nasconde un subdolo potenziale errore: se argomento è uguale a 0 il codice non verrà eseguito, poiché 0 è convertito al valore booleano false. Per questo motivo MooTools implementa la funzione $chk:

// MooTools
function prova(argomento) {
    if($chk(argomento)) alert("L'argomento è stato passato e non è null: " + argomento);
}

Ci sono vari modi per controllare se una variabile è stata definita o meno, il più semplice e compatto è questo:

// JavaScript tradizionale
if(variabile != undefined) alert("La variabile è definita.");

In MooTools esiste però la più elegante funzione $defined:

// MooTools
if($defined(variabile)) alert("La variabile è definita.");

Generare un numero casuale entro un raggio di valori richiede una semplice espressione:

// JavaScript tradizionale
var casuale = Math.floor(Math.random() * (max - min + 1) + min);

Che però MooTools implementa per noi con $random rendendo più pulito il codice:

// MooTools
var casuale = $random(max, min);

Infine, per determinare il tipo di un oggetto vi sono vari metodi, alcuni veramente sporchi e altri che non funzionano su tutti i browser. MooTool offre la funzione $type che restituisce una stringa che descrive il tipo dell'oggetto. Ad esempio "element", "whitespace", "textnode", "window", "document", "number", "array", "date", "boolean", "function" e "string".

// MooTools
function stringa(obj) {
    switch($type(obj)) {
        case "element":
            alert(obj.nodeName);
            break;
        case "string":
            alert(obj);
    }
}

stringa(document.body);
stringa("Salve!");