Introduzione a jQuery – Prima parte
Questo è il primo di una serie di articoli per imparare le basi di jQuery, il popolare framework che è diventato “de facto” lo standard per lo sviluppo agile in javascipt.
Per seguire questi tutorial è necessatio avere una conoscenza almeno di base di javascipt, HTML (e in particolare il Document Object Model, o DOM) e CSS.
Se quando parlo di CSS pensate a una setta neonazista tedesca, e quando parlo di DOM credete che mi riferisca a un film un po feticista, allora questi articoli non sono adatti a voi; dovete prima seguire dei tutorial di base su questi linguaggi. Su internet se ne trovano moltissimi, e anche ben fatti.
Tanto per cominciare, rispondiamo alla domanda più ovvia: che cos’è jQuery? Per dirla in parole povere, jQuery è una libreria che vi permette di scrivere codice javascript in modo più semplice e senza dovervi preoccupare di incompatibilità tra diverse versioni di browser (o quasi).
I punti di forza di jQuery sono:
- è semplice da imparare
- funziona su tutti i maggiori browser ( compreso Internet Explorer 6, incredibile! )
- permette con poche righe di codice di fare cose che richiederebbero decine di linee con js
- c’è un’infinità di documentazione disponibile, sia ufficiale che non, e migliaia (letteralmente) di plugin già pronti per l’uso
- pesa pochissimo (30k circa)
Detto questo passiamo ai fatti: per utilizzare jQuery dobbiamo innanzitutto scaricarlo (ma dai?) dal sito http://jquery.com, quindi dobbiamo inserirlo nella nostra pagina HTML, all’interno del tag HEAD, così:
<html> <head> <script type="text/javascript" src="jquery.js"></script> </head> <body> <!-- non c'è niente qui, per ora --> </body> </html>
In questo esempio la riga 3 contiene il codice HTML che mi permette di inserire un file js esterno, nel mio caso jquery.js. Nel mondo reale il file jQuery.js sarà in una directory con tutti gli altri script, e quindi dovrò cambiare src=”jquery.js” in modo da rispecchiare la posizione del file nella struttura di directory che ho sul server.
Per chiarezza se ho una struttura fatta in questo modo:
index.html
js (dir)
jQuery (dir)
jQuery-1.2.6.min.js
all’interno del mio file index.html dovrò includere jQuery in questo modo:
…
<script type=”text/javascript” src=”js/jQuery/jQuery-1.2.6.min.js”></script>
…
Ora proviamo se tutto funziona, scrivendo il nostro primo script in jQuery: ovviamente lo script stamperà un bel “Ciao Mondo!” in una finestra di alert(); non molto gratificante, ma per iniziare va bene.
Non vi preoccupare ora di capire il codice, lo spiegherò nel dettaglio in seguito.
Modificate il vostro codice precedente come segue:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<!-- inizio della parte nuova da inserire -->
<script type="text/javascript">
$(document).ready(function() {
alert("Ciao Mondo!");
});
</script>
<!-- fine della parte nuova da inserire -->
</head>
<body>
<!-- non c'è niente qui! va be, pazienza, per ora mi accontento -->
</body>
</html>
Ricaricate la pagina e… funziona? Se si, complimenti, avete appena scritto il vostro primo (e inutile) programma con jQuery, altrimenti controllare il codice e riprovate (potete anche fare copia incolla di questo se proprio non riuscite a farlo funzionare).
Prima di analizzare il codice che abbiamo scritto, permettetemi un breve preambolo: il javascript presente in una pagina html viene eseguito nel punto in cui è inserito; se noi dobbiamo manipolare un oggetto presente nella pagina (ad esempio un paragrafo <p></p>) dobbiamo essere certi che quell’oggetto sia stato caricato nel momento in cui il browser incontra (ed esegue) il nostro programma.
Per essere certi che tutta la pagina sia stata completamente caricata prima di eseguire il codice javascript, possiamo inserire quest’ultimo in una funzione, e richiamarla nel tag body del documento in questo modo:
<body onLoad=”laMiaFunzione()”>
Ci sono diversi problemi a questo tipo di approccio: primo dobbiamo inserire una chiamata di funzione del tag body del documento, e quindi siamo costretti a inserirlo più volte in ogni pagina.
Inoltre stiamo legando la pagina ad una funzione specifica, e quindi rendiamo “dipendente” la pagina dalla funzione stessa (tight coupling, da evitare fortemente). Se volessimo spostare tutto il codice (compresa la chiama di funzione) in un file esterno, non potremmo nemmeno!
Fortunatamente jQuery ci permette una comoda ed elegante alternativa, che potete vedere alla prima riga del nostro codice di esempio
$(document).ready( ... ... );
Questo significa semplicemente: quando il DOM è pronto esegui il resto dello script. Nel nostro codice sorgente originale noi non passiamo a ready() una funzione specifica (laMiaFunzione o simili) ma utilizziamo una tecnica di javascript molto potente: passiamo una funzione anonima (o funzione lambda).
Analizziamo il nostro codice originale, ho tolto solo alert(“Ciao Mondo!”) che dovrebbe essere chiaro a tutti:
$(document).ready(function() {
...
...
});
in effetti sto passando come parametro a ready() una “funzione senza nome”, o funzione “anonima”, o funzione “lambda”, o funzione “come vi pare”, che mi permette di passare un bel blocco di codice come parametro senza dover per forza definire una funzione apposita:
function() {
...
il mio bel blocco di codice
...
}
Se è tutto chiaro fino a qui (ahhh, ma che chiaro, io non ci ho capito un’H!), passerei ad analizzare nel dettaglio ogni parte del nostro programma “Ciao Mondo!” (in effetti avrei voluto chiamarlo “Ciao Mamma!”, giusto per essere anticonformista, ma ormai è andata…).
La prima cosa che incontriamo è il costrutto $(), che è il vero cuore di jQuery, perchè ci permette di fare l’operazione più importante, quella da cui parte tutto: selezionare parti del DOM. In questo caso abbiamo selezionato tutto il documento con $(document), ma dalla prossima volta vedremo come selezionare qualsiasi parte del nostro DOM: oggetti singoli, gruppi di classi, pezzi di albero del DOM stesso e molto altro; $() è il vero cuore pulsante di jQuery.
La seconda cosa che notiamo è che utilizziamo la classica notazione del punto (.) per richiamare un metodo, in questo caso .ready(). Come vedremo, in jQuery il punto è uno strumento molto potente, che ci permette di concatenare diverse metodi, selettori ecc…
Per oggi è tutto, per finire facciamo una breve carrellata su quello che abbiamo imparato (o avremmo dovuto)
- jQuery è un framework potente, leggero e multipiattaforma, ottimo per realizzare velocemente i nostri progetto in javascript. Ha una vasta documentazione e molti plugin pronti all’uso
- Il costrutto base, che ci permette di selezionare parti del DOM (e non solo) è $();
- jQuery ci mette a disposizione un metodo che lancia il nostro script solo quando tutto il DOM è stato caricato corretamente; ogni script jQuery inizia e finisce così
$(document).ready(function() {
...
...
});
la prossima lezione sarà dedicata ai selettori, e realizzeremo anche qualcosa di più divertente e utile!
Ci vediamo la prossima settimana per la seconda parte di questa introduzione a jQuery. A presto!
17.10.08 at 8:50
Grazie Mauro: aspettiamo il seguito!
03.12.08 at 18:57
Il $(document).ready() non funziona in Internet Explorer 7. Sai come risolvere questo problema?
03.12.08 at 19:17
Ciao Filo, la tua domanda mi suona strana, perché quel codice è assolutamente compatibile con tutti i browser.
Potresti essere più specifico sull’errore che ti da?
Una domanda mi sorge spontanea: sei sicuro di aver importato jQuery correttamente?
29.12.09 at 12:38
Ciao Mauro, il tuo articolo è ben scritto e molto utile per chi come me vuole imparare jQuery (e il Javascript) praticamente da zero. Mi sento comunque di darti un consiglio: i blocchi di codice all’interno dei paragrafi del post non sono ben distinguibili dal testo, potresti usare un evidenziatore di codice come SyntaxHighlighter http://alexgorbatchev.com/wiki/SyntaxHighlighter, che uso anche io nel mio blog e che ho visto usare in portali blasonati come SmashingMagazine e nettuts. Di sicuro la lettura della pagina sarebbe più agevole e visivamente più gradevole. Ciao!
13.02.10 at 13:02
[...] basi di JQuery Guida a jQuery Imparare jQuery Introduzione a jQuery – Prima parte jQuery Tutorial – imparare ad usare jQuery da zero jQuery API: toggle() Simple Toggle with CSS [...]