Vuoi imparare jQuery ma non sai da dove iniziare?

jqueryConsiderato poco più di un passatempo dalla maggior parte degli sviluppatori fino a pochi anni fa, grazie alla tecnologia Ajax, Javascript sta vivendo una seconda giovinezza. In seguito alla diffusione sempre più capillare del linguaggio c’è stato un fiorire di librerie JavaScript che permettono di eseguire i compiti più disparati, dal far sparire elementi con dissolvenze alla validazione in tempo reale dei campi di un form. Andiamo alla scoperta di una delle più famose librerie: jQuery.

Cos’è jQuery

jQuery è un framework JavaScript, ovvero un insieme di funzioni JavaScript che permettono di facilitare i compiti più comuni, permettendo agli sviluppatori di concentrarsi sulla logica del sito piuttosto che su difficoltà tecniche di realizzazione.

La differenza con gli altri framework sta nel fatto che jQuery si avvale della conoscenza di CSS e HTML invece che dei complessi paradigmi di programmazione avanzata. In questo modo, anche i webdesigners più a digiuno di codice possono applicare facilmente effetti alle loro pagine web.

Download e installazione

Scarichiamo dal sito ufficiale di jQuery l’ultima versione disponibile, avendo cura di scegliere “Development” in modo da ottenere un file non compresso, dunque consultabile. La versione compressa potrà essere utilizzata in un secondo momento sul server di produzione. È interessante notare che la versione “Production” occupa solo 19KB, ciò permette un’estrema portabilità e leggerezza del framework anche con carichi notevoli.

Tornando a noi, non è necessaria nessuna installazione, basta includere il file “jquery-versione.js” direttamente nei nostri documenti Html in questo modo:

<script src="jquery-1.3.2.js" type="text/javascript"></script>

Un esempio pratico

Facciamo subito un esempio. Prendiamo un documento Html con del contenuto (in questo caso si tratta dell’incipit di “Pinocchio” preso dal sito LiberLiber):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prova con jQuery</title>
<link rel="stylesheet" href="stile.css" type="text/css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script src="prove.js" type="text/javascript"></script>
</head>
<body>
<h1>Come andò che maestro Ciliegia, falegname, trovò un pezzo di legno, che piangeva e rideva come un bambino.</h1>

<p>C'era una volta...</p>

<span>- Un re! - diranno subito i miei piccoli lettori.</span>

<p>No, ragazzi, avete sbagliato. C'era una volta un pezzo di legno.</p>

</p>Non era un legno di lusso, ma un semplice pezzo da catasta, di quelli che d'inverno si mettono nelle stufe e nei caminetti per accendere il fuoco e per riscaldare le stanze.</p>

<p>Non so come andasse, ma il fatto gli è che un bel giorno questo pezzo di legno capitò nella bottega di un vecchio falegname, il quale aveva nome mastr'Antonio, se non che tutti lo chiamavano maestro Ciliegia, per via della punta del suo naso, che era sempre lustra e paonazza, come una ciliegia matura.</p>

<p>Appena maestro Ciliegia ebbe visto quel pezzo di legno, si rallegrò tutto e dandosi una fregatina di mani per la contentezza, borbottò a mezza voce:</p>

<q>Questo legno è capitato a tempo: voglio servirmene per fare una gamba di tavolino.</q>

<p>Detto fatto, prese subito l'ascia arrotata per cominciare a levargli la scorza e a digrossarlo, ma quando fu lì per lasciare andare la prima asciata, rimase col braccio sospeso in aria, perché sentì una vocina sottile, che disse raccomandandosi:</p>

<q>- Non mi picchiar tanto forte!</q>

<p>Figuratevi come rimase quel buon vecchio di maestro Ciliegia![...]</p>
</body>
</html>

a cui applichiamo un semplice foglio di stile:

body{
font-size:small;
font-family:Helvetica,Arial,sans-serif;
line-height:1.3;
}

h1{font-size:150%}

.evidenzia{
background-color:#FFF6BF;
font-style:italic;
}

Ho semplicemente applicato qualche stile al testo e al titolo, e creato una classe “evidenzia”, con uno sfondo giallo e il testo corsivo.

Come puoi notare ho aggiunto il collegamento a due file JavaScript: “jquery.js” e “prove.js“. Il primo è quello scaricato dal sito jquery.com e opportunamente rinominato, il secondo invece è quello su cui lavoreremo.

Anche se ti può sembrare strano che per un semplice esempio occorrano tutti questi file, questo è il modo corretto di operare. Infatti, in questo modo noi separiamo totalmente la struttura (HTML) dalla presentazione (CSS) e dal comportamento (JavaScript).

Avremmo potuto includere gli stili CSS e il codice JavaScript direttamente nel documento HTML, ma separando i vari aspetti otteniamo una struttura molto più flessibile e funzionale.

Concetti base di jQuery

L’operazione fondamentale in jQuery è quella di selezionare un elemento della pagina e fargli compiere un’azione, che sia nasconderlo, evidenziarlo o cambiare una qualunque delle sue proprietà.

La potenza di jQuery sta nel fatto che questa operazione di selezione avviene utilizzando gli strumenti già a disposizione di qualsiasi webdesigner: i selettori CSS.

Il costrutto fondamentale è costituito dall’operatore dollaro “$
che è un alias della funzione jQuery.

In breve, per selezionare un insieme di elementi scriviamo:

$("selettore")

oppure:

 jQuery("selettore")
 

E possiamo utilizzare ogni combinazione conosciuta di selettori disponibili nelle specifiche CSS, anche se non sono supportati dal browser in questione. Questa è un’altra peculiarità di jQuery: fornisce un livello di astrazione che consente di azzerare totalmente le differenze tra i vari browser.

Ad esempio potremmo scrivere:

 $("div#content > p")
 

Selezionando tutti i paragrafi figli del div “content”, e questo codice funzionerebbe anche in un browser che non supporta il selettore child ( > ), naturalmente a patto che JavaScript sia abilitato.

Primo contatto con jQuery

Ritorniamo al nostro esempio. Abbiamo un documento cui sono stati applicati degli stili CSS. Quello che vogliamo ottenere è l’applicazione dinamica, al tempo di caricamento, della classe “evidenzia” agli elementi “q”.

Apri un file vuoto dal tuo editor preferito e salvalo come “prove.js”. Dopodiché incolla o copia il seguente codice:

$(document).ready(function() {
 $("q").addClass("evidenzia");
});

Questo è tutto quello che occorre: tre righe di codice! In così poco spazio ci sono però dei concetti interessanti da sottolineare:

  • Il codice è eseguito solo quando tutto l’albero del documento è stato caricato: per far questo passiamo il documento come oggetto alla funzione dollaro $ e applichiamo il metodo “ready” (scoprirai che tutti i metodi in JavaScript vengono utilizzati aggiungendo un punto e il nome del metodo).
  • Come argomento del metodo “ready” passiamo una funzione senza nome:
    function() {
    ....
    }
    

    Tutto il codice compreso tra le due parentesi graffe verrà eseguito dopo, al caricamento della pagina.

  • Selezioniamo tutti gli elementi “q” attraverso l’operatore $ e poi applichiamo il metodo addClass che, come suggerisce il nome stesso, aggiunge la classe in argomento all’oggetto selezionato. In jQuery tutti i metodi hanno nomi autoesplicativi, così abbiamo ad esempio un metodo .removeClass() che rimuove una classe da un oggetto, e così via.

Una caratteristica importante di jQuery è il concatenamento dei metodi: nell’esempio precedente avremmo potuto scrivere :

$(document).ready(function() {
 $("#elemento").addClass("class1").addClass("class2").addClass("class3");
});

Ottenendo così l’aggiunta di class1, class2 e class3 a #elemento.

Conclusioni

In questo articolo abbiamo solamente scalfito la superficie della potenzialità di questa libreria, però tramite questi concetti fondamentali e una lettura dell’ottima documentazione online, possiamo già iniziare a creare i nostri siti web dinamici, senza difficoltà!

Tag: , ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

12 commenti

Trackback e pingback

  1. Vuoi imparare jQuery ma non sai da dove iniziare? Alternare le funzioni, le variabili, primi effetti | Your Inspiration Web
    [...] Lezione 1: introduzione e primi concetti fondamentali [...]
  2. Vuoi imparare jQuery ma non sai da dove iniziare? - Gli eventi | Your Inspiration Web
    [...] Lezione 1: introduzione e primi concetti fondamentali [...]
  3. Vuoi imparare jQuery ma non sai da dove iniziare? Gli stili inline, gli effetti predefiniti | Your Inspiration Web
    [...] Lezione 1: introduzione e primi concetti fondamentali [...]
  4. Dall'HTML al jQuery: come mostrare/nascondere dei box in una pagina web? | Your Inspiration Web
    [...] prima cosa da fare è includere jQuery e creare un nuovo file. Il passo successivo è quello di nascondere…
  5. From HTML to jQuery: how to show/hide boxes in a webpage? | Your Inspiration Web
    [...] first thing to do is include jQuery and create a new file. The following step is that of hiding all…
  6. Vuoi imparare jQuery ma non sai da dove iniziare? - Le dimensioni | Your Inspiration Web
    [...] Lezione 1: introduzione e primi concetti fondamentali [...]