MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
Iniziamo con jQuery
In questi giorni sto seguendo parecchi lavori un po contemporaneamente, e sto iniziando a rendermi conto che in meno di un paio di mesi jQuery è gia diventato uno dei miei strumenti essenziali nel realizzare pagine web interattive.
Ho chiaccherato con alcune persone che mi chiedevano perche lo reputo cosi utile, la mia risposta è stata che mi sto accorgendo di come è quasi perfettamente complementare con i CSS... unito poi al fatto che è veramente semplice! Nello scorso articoletto ho giusto accennato due cose a riguardo di jQuery, quindi ho deciso di fare un mini-tutorial introduttivo, per dimostare l'effettiva semplicità e utilità di questa libreria, con la speranza magari di rendere un po più chiaro l'argomento a chi ne ha sentito parlare ma non riesce a contestualizzarlo nella realizzazione di pagine web.
Un paio di premesse su jQuery...
- non richiede conoscenze di altri linguaggi di programmazione, tuttavia avere un'idea di come funzionano in generale i linguaggi di scripting può essere un buon aiuto.
- è cross-browser, quindi non fatevi neanche domande su eventuali problemi di compatibilià con IE o Firefox e altri.
- utilizza selettori CSS, che sono gli stessi che gia utilizzate per creare regole CSS (es: #menu a - per indincare tutti i collegamenti ipertestuali in un div di nome "menu")
Software richiesto
Tenicamente anche nessuno... html, css e javascript (e jQuery) si possono editare da un "blocco note", tuttavia utilizzare editor appositi fa risparmiare tempo e energie. Io utilizzo Sublime Text 2 che è a pagamento (la licenza singola è 59 dollari) ma ha un periodo di valutazione illimitato il che lo rende perfetto specialmente per lo studio , un'alternativa completamente gratuita può essere Aptana .Prerequisiti
Conoscenza di base di HTML e CSS.Argomenti trattati
Installazione e sintassi di base di jQuery, interattivià e animazioni di base1. Scarichiamo e installiamo jQuery
Il primissimo passo da compiere è andare sul sito jquery.com, dove in centro a destra troverete subito il pulsante per scaricare la libreria, lasciate selezionato "Production" sotto la scritta "Compression level". Una volta scaricato, copiate il file in una sottocartella "/script" della cartella principale del vostro sito, questo non è un passo obbligatorio ma vi aiuta a mantenere ordinati i vostri file e il vostro flusso di lavoro. Ora aprite il vostro file HTML (o i vari file) dove volete applicare jQuery e sotto il tag <title></title> aggiungente questa riga di codice:<script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>Cosi facendo dite al vostro HTML di cercare nella cartella "/script" il file "jquery-1.7.2.js" e di caricarlo insieme alla pagina. Ora jQuery è pronto a essere utilizzato!
2. Creiamo un file per i nostri script
Esattamente come i CSS, gli script possono essere salvati in file esterni all'HTML con una loro estensione (nel caso di Javascript e jQuery sono i file .js), con il gia noto vantaggio di mantere il più chiaro possibile il file HTML principale e di fare in modo che diverse pagine accedano allo stesso script, minimizzando così le dimensioni effettive del nostro sito e garantendoci un modo più semplice e dinamico di aggiornarlo. Quindi creiamo un file vuoto chiamandolo "prova.js" e salviamolo nella precedentemente creata cartella "/script". Ora apriamo il nuovo file e digitiamo queste righe di codice:$(document).ready(avvio);
function avvio(){
}
La prima riga tradotto in un linguaggio "umano" dice allo script di attendere il caricamento del documento per poi procedere con una funzione (che ho chiamato avvio per semplicità), all'interno della funzione "avvio" è dove definiremo le azioni da eseguire. Uno dei concetti fondamentali da comprendere in jQuery è il simbolo $ , che è praticamente il suo alias. Se volete che un'oggetto faccia o subisca qualcosa utilizzando jQuery dovrete sempre indicarlo con $(-oggetto-o-selettore-css).
3. "Azione!" o meglio... "Funzione!"
Restiamo nel nostro file "prova.js", ipotizzando che nel vostro HTML ci sia un div con id "menu" e che al suo interno ci siano dei collegamenti ipertestuali (il solito tag "a") e volessimo aggiungere una piccola animazione al passaggio su questi oggetti, per esempio che li faccia spostare a destra, il codice necessario da inserire all'interno della funzione "avvio" è questo:$("#menu a").hover(passa,allontana);
function passa(){
$(this).stop().animate({paddingLeft: "15px"}, 300);
}
function allontana(){
$(this).stop().animate({paddingLeft: "0px"}, 300);
}
con l'alias $ indichiamo tramite selettore CSS tutti gli oggetti "a" all'interno di tag con id "menu" e diciamo a jQuery di avviare una funzione al passaggio del mouse (hover). All'interno di questa funzione ne richiamiamo due separate da una virgola, perche l'evento "hover" in jQuery prevede una funzione per far succedere qualcosa al passaggio del mouse e un'altra per far succedere qualcos'altro quando il mouse si allontana. Nella prima indichiamo l'oggetto corrente con il termine "this" (questo), fermiamo eventuali animazioni già in corso sull'elemento con la funzione .stop() e gli diciamo di animare (animate) l'aggiunta di 10 pixel di padding sinistro, facendo cosi spostare il nostro oggetto verso destra; mentre nella seconda ripetiamo quanto appena descritto ma reimpostiamo il padding sinistro a 0 pixel, facendo cosi tornare l'oggetto alla posizione iniziale. A questo punto salvate il file.
La funzione .stop() prima di .animate() permette di evitare l'accodamento di più animazioni se passiamo con il mouse più volte in breve tempo sugli elementi, che farebbe sembrare la pagina "impallata" su quell'animazione e in generale risulta poco professionale.
4. Incorporiamo il tutto e via...
Ora come abbiamo fatto nel primo passo, importiamo questo file javascript all'interno del documento HTML:<script type="text/javascript" src="script/prova.js"></script>E' fondamentale ricordarsi che la riga che importa la libreria jQuery sia sempre la prima in ordine ascendente rispetto ad altre righe che importano file .js , altrimenti non vedremo funzionare niente! Quindi la riga che importa "prova.js" la scriveremo al di sotto di quella che importa jQuery. Ora salvate il file HTML e fate pure un'anteprima nel vostro browser, dovreste ottenere uno spostamento da sinistra delle voci di menu quando passate il mouse sopra.