Blackbird: una validissima alternativa all’alert()
This entry was posted on January 13th, 2010 and is filed under javascript.
Blackbird è una nuova applicazione scritta completamente in Javascript che rappresenta una validissima alternativa alla funzione alert(). L’installazione e l’utilizzo sono davvero semplicissimi e, semplicemente caricando lo script nella pagina, avremo a disposizione una finestra come quella nell’immagine dove stampare a schermo messaggi in base alle nostre esigenze.
L’utilizzo più importante che possiamo farne è quello di debug e testing delle nostre applicazioni Javascript ma, con un pò di inventiva i casi d’uso possono essere migliaia. Niente più quindi alert() fastidiosissimi che non consentono di fare altro se prima non li chiudiamo, ma una comodissima finestra che possiamo spostare e/o nascondere a nostro piacimento.
Installazione di Blackbird
L’installazione dello script è molto semplice. E’ sufficiente caricare nella pagina i file js e css contenuti nel pacchetto e premere il tasto F2 della tastiera per visualizzare la finestra sullo schermo.
La finestra dei messaggi di Blackbird
Blackbird consente l’output di 5 tipi diversi di messaggi:
- debug
- info
- error
- warn
- profile
L’ultimo tipo di messaggi è utilissimo per testare il tempo di esecuzione di uno script Javascript in maniera semplicissima.
Vediamo però in dettaglio i pulsanti disponibili nella finestra dell’applicazione.
I primi 5 tasti consentono di filtrare i messaggi visualizzati in base al tipo di messaggio. Un click per filtrare, un altro click per eliminare il filtro.
Il tasto Toggle Size consente di ingrandire la finestra dei messaggi in caso di necessità.
Il tasto Clear pulisce la finestra eliminando tutti i messaggi.
Il tasto Close ovviamente chiude la finestra.
Blackbird contiene anche delle scorciatoie da tastiera per visualizzare, nascondere o spostare la finestra dei messaggi:
Funzionamento di Blackbird
Vediamo ora come far visualizzare i messaggi all’interno della finestra. Lo script contiene 5 metodi che consentono l’inserimento dei messaggi in base alla tipologia.
I metodi sono:
- log.debug()
- log.info()
- log.error()
- log.warn()
- log.profile()
Vediamo un piccolo esempio di codice, utilizzando jQuery, per visualizzare i messaggi al caricamento della pagina:
$(document).ready(function() {
var message = "This is a message";
log.debug(message);
log.info(message);
log.error(message);
log.warn(message);
log.profile(message);
});
Come potete vedere è semplicissimo visualizzare i messaggi nella finestra, è sufficiente scegliere la categoria di appartenenza.
Per misurare il tempo di esecuzione di uno script invece, bisogna utilizzare la stessa stringa prima dell’inizio dello script e dopo il suo completamento. Un esempio chiarirà meglio l’idea:
$(document).ready(function() {
log.profile('Tempo esecuzione script');
var i = Math.ceil(100*Math.random());
while( i<10000 ) i=i*i;
log.profile('Tempo esecuzione script');
});
Alla chiamata del secondo profile() verrà aggiunto automaticamente il tempo di esecuzione dello script.
Sempre con l’ausilio di jQuery, ho realizzato una semplice pagina di esempio contenente gli esempi base ed un piccolo esempio di validazione form utilizzando la finestra dei messaggi di Blackbird come ausilio alla validazione.
La pagina è raggiungibile al seguente link: Demo Blackbird
La pagina ufficiale dello script è invece raggiungibile al seguente indirizzo.
$(document).ready(function() {
Benvenuto! Mi chiamo
July 10, 2010 at 2:27 pm
Ottimo articolo. Questo Blackbird mi pare un ottimo strumento di debug, soprattutto su Explorer che è sprovvisto di un ambiente di debug come si deve.
Sugli altri browser penso che non sia utilissimo (almeno parlo per me) dato che:
- sui webkit abbiamo già di sistema un oggetto console su coi loggare i messaggi.
- su Firefox esiste l’indispensabile Firebug (che, fra parentesi, ad oggi è l’unico valido motivo per cui uso ancora firefox…) che ci fornisce l’oggetto console…
il problema è appunto su IE che non ha nulla… ma con questo ottimo strumento mi pare che siamo ad un ottimo punto!
Grazie simo per l’articolo.
Ciao
July 10, 2010 at 3:36 pm
Io personalmente lo uso anche su Firefox per il semplice motivo che posso separare la tipologia di messaggi e soprattutto lo posso posizionare nella finestra, a differenza di Firebug che o ce l’hai sotto oppure devi aprilo in una nuova finestra.