MoebiusMania

Iniziamo questo speciale su MoebiusMania.net dedicato a jQuery con un post pseudo teorico, lo scopo è chiarire alcune piccole questioni che sono rimaste oscure nei tutorial singoli riguardo a:

• Cos'è jQuery
• Funzioni anonime e non
• jQuery e i code editor

anche perche questi concetti sono alla base dei tutorial dei prossimi giorni.... quindi iniziamo!

Cos'è jQuery?

(re) introduciamolo velocemente: jQuery è un framework (libreria di codice) per Javascript, il suo scopo è velocizzare e facilitare le operazioni più comuni in quel linguaggio. Cose tipo animazioni, caricamento di dati esterni, interazioni basilari e non che in precedenza venivano ottenuti con numerose righe di codice ora possono essere implementate in molto meno tempo (e codice), permettendo l'approccio di Javascript anche a chi finora ne era stato alla larga. Possiamo scaricare la libreria dal sito ufficiale di jQuery, essendo una libreria open source è scaricabile gratuitamente. Inoltre la documentazione ufficiale, sorgenti e community di supporto sono liberamente consultabili dallo stesso sito. Le istruzioni su come scaricarlo e includerlo nel proprio sito le trovate sia sul sito ufficiale che nel mio primo tutorial su jQuery.

Funzioni anonime e funzioni "normali"

Quando lavoriamo con le funzioni in Javascript, abbiamo due scelte principali: possiamo dare un nome alla nostra funzione o lasciarla anonima. Ma cosa cambia tra le due soluzioni? Immaginiamo che al click del mouse su un oggetto della nostra pagina debba accadere qualcosa, scrivendo entrambi i metodi possiamo notare le differenze:

// FUNZIONE ANONIMA

$("#oggetto").click(function(){
	// succede qualcosa...
});

// FUNZIONE REGOLARE (CON NOME)

$("#oggetto").click(miaFunzione);

function miaFunzione(){
	// succede qualcosa...
}

Quando scriviamo una funzione anonima questa viene scritta (ovviamente senza specificare un nome) direttamente dentro la parentesi dell'evento che la chiama, nel nostro caso un click del mouse su un oggetto. PRO: più rapida da scrivere - CONTRO: la funzione non può essere riutilizzata, la sequenza delle parentesi aperte/chiuse può essere un po' ostile all'inizio. Mentre se lavoriamo con una funzione "normale" dentro la parentesi tonda dell'evento inseriamo il nome di una funzione che prima o dopo andremo a creare (idealmente sarebbe meglio prima della riga che richiama la funzione). Il vantaggio maggiore di questo metodo, oltre a essere la buona pratica, è che ora se ci fosse un "#oggetto2" che al click deve richiamare la stessa "miaFunzione"... può farlo e noi non dovremmo riscrivere la funzione una seconda volta come invece capita con le funzioni anonime! PRO: la scrittura del codice è più ordinata, la funzione può essere riutilizzata - CONTRO: è un po più lunga da scrivere del metodo precedente. Questo era per fare chiarezza tra i due metodi, non c'è uno giusto e uno sbagliato entrambi i metodi mostrati nell'esempio portano allo stesso risultato, dipende da cosa dovete fare e che risultato volete ottenere.

Concatenamento

Il concatenamento indica la possibilità di "attaccare" vari metodi uno dopo l'altro senza dover richiamare più volte lo stesso selettore. Per intenderci se vogliamo nascondere un oggetto, aspettare un secondo e poi mostrarlo abbiamo due modi per farlo:

// Normale
$("#oggetto").hide();
$("#oggetto").delay(1000);
$("#oggetto").show(500);

// Concatenati
$("#oggetto").hide().delay(1000).show(500);

Posso integrare jQuery in un code editor?

Per jQuery basta un qualunque editor di codice, se vogliamo degli "aiutini" 4 dei principali code editor hanno delle soluzioni per integrare questa libreria nell'ambiente di sviluppo:

• Dreamweaver Cs 3/4/5 - Una lacuna del code editor più famoso del mondo è (l'attuale) mancanza di supporto per i framework Javascript, tuttavia grazie a questa estensione avremo a disposizione dal menu "inserisci" un nuovo pannello per inserire le funzioni più comuni di jQuery con un click!
• Aptana Studio - Una cosa bella del caro Aptana (oltre che è gratuito e multipiattaforma) è che supporta nativamente diverse librerie Javascript, i passaggi per attivare il suggerimento di codice con jQuery li trovate nella documentazione ufficiale.
• Coda - Il code editor low-cost e multi funzione per Mac ha anche lui un plugin che permette di integare suggerimenti di codice per jQuery.
• Visual Studio - Il big editor di Microsoft è stato il primo ad assimilare al suo interno jQuery, tramite il plugin jQuery Intellisense potrete sfruttare un buon code hinting in Visual Studio.

Fine prima giornata...

Finita la parte "teorica"... domani vediamo come applicare soluzioni basilari a delle pagine web Html per renderle interattive. Non mancate!