Pecciola

Terzo appuntamento con questo tutorial dedicato a jQuery e secondo consecutivo dedicato agli eventi dopo che nella passata lezione abbiamo introdotto il concetto di evento con un esempio semplice, ma già ben esplicativo.

Metodo bind()

Se avete ben digerito l’argomento evento in jQuery, dopo aver visto all’opera l’esempio numero due, avreste potuto sollevare la domanda : ma, invece del metodo bind(), nell’esempio non potevamo utilizzare il classico evento semplice legato al collegamento?

Ovvero, invece che scrivere :

$(“.verde”).bind(“click”, function() {
$(“#quadratino”).removeClass().addClass(“bgverde”);

});

avremmo potuto leggermente semplificare il codice scrivendo quanto appreso nella prima lezione, ovvero :

$(“.rosso”).click (function() {
$(“#quadratino”).removeClass().addClass(“bgrosso”);

});

Il metodo bind(), pertanto, può spesso essere sostituito con altri metodi-scorciatoia a meno di due situazioni. In primis, qualora volessimo collegare due eventi ad una stessa funzione. Infatti, nel primo caso, avremmo potuto scrivere, legando due eventi :

$(“.verde”).bind(“click mouseover”, function() {
$(“#quadratino”).removeClass().addClass(“bgverde”);

});

cosa che diventava difficile, o meno snella, da scrivere utilizzando l’opzione dell’evento-funzione click.

In secondo luogo, il metodo bind diventa indispensabile qualora volessimo passare dei parametri alla funzione. Guardate all’opera questo esempio tenendo a mente che, in questo caso, come secondo argomento il metodo bind() accetta un oggetto JavaScript con dei dati ricavabili dalla proprietà .data di event.

Metodo load() e ready()

Ultimo cenno, prima di passare oltre, é obbligatorio per il ruolo ricoperto da load() e ready().
Si tratta di due metodi molto sfruttati dagli sviluppatori jQuery perché consentono di agire su due momenti importanti collegati al caricamento della pagina.

Infatti, load() permette di mandare in esecuzione una funzione solo dopo il caricamento totale e completo della pagina (fogli di stile, script e grafica compresa). Spesso lo si usa con l’oggetto window:

$(window).load(function () {
alert(‘Pagina caricata completamente!!’);
});

Il metodo ready(), invece, é utile qualora si voglia attendere non che tutta la pagina sia completamente caricata (ad esempio, le immagini), ma solo il DOM.
Eccovi un esempio classico :

$(document).ready(function() {
alert(‘Il DOM é stato caricato’);
});

E’ chiaro come racchiudere l’argomento eventi in due solo lezioni é ostico, ma credo abbiate comunque potuto cominciare a prendere confidenza con la sintassi di base di jQuery.

Prossimo appuntamento con funzioni e variabili.

L’articolo introduttivo su jQuery ha dato spazio ai due argomenti classici di un tutorial alle prime pagine : installazione e i concetti base. Ho avuto modo, comunque, anche di presentarvi un banale e veloce esempio basato sugli eventi, argomento base su jQuery che riprendo e approfondisco proprio in questo articolo.

Gli Eventi

Gli eventi, come detto, gestiscono ed intercettano i comportamenti che ha l’utente quando interagisce con il browser : click, mouseover, doppioclick, resize ecc Ecco perché, come dicevo, sono la base di jQuery e non solo. L’elenco completo degli eventi disponibili e sfruttabili potete trovarlo in questa sezione della documentazione di jQuery.

Nell’esempio mostrato nell’articolo precedente, era citato l’evento click applicato ad un collegamento che scatenava un semplice popup. Vi riporto parte dell’esempio per rinfrescarvi la memoria (senza riscrivere tutto il codice) :

$(document).ready(function(){
$(“a”).click(function(){
alert(“Ciao Pecciola!”);
});
});

…………………………………………

…………………………………………
<h3 align=”middle”> Provate questo link : </h3>
<p align=”middle”> <a href=”http://pecciola.com/”>Pecciola</a> </p>

Seguendo lo stesso discorso, potete sfruttare l’evento click, ad esempio, per far scomparire lentamente il collegamento stesso. Resterà immutato tutto il codice, tranne la parte deputata a gestire l’evento click che diventerà :

$("a").click(function(){
$(this).hide("slow");
return false;
});

Proseguiami, ora, sempre con gli eventi, ma mostrando un esempio leggermente più complesso che riesce già a darvi un’idea più precisa delle potenzialità degli eventi in jQuery.

Evento bind()

Cenno particolare (essendo molto interessante e sfruttabile) é l’evento bind() e il suo corrispettivo unbind(). Grazie a questo metodo, infatti, siamo capaci di collegare una o più funzioni (chiamate handlers) ad uno o più eventi.

Ecco la sintassi precisa :

bind ( type, data, fn )

In modo particolare, il metodo bind() richiede tre parametri: il primo che indica il tipo di evento (o di eventi), il secondo (opzionale) é un oggetto JavaScript, mentre il terzo é la funziona lanciata al manifestarsi di quell’evento particolare.

Gli eventi supportati sono: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

Vediamo un esempio più complesso del primo, come detto, che sfrutta proprio questo metodo.

Supponiamo di avere tre collegamenti (rosso, verde, viola) e, in relazione all’evento che l’utente scatenerà sul link, verrà riempito un quadrato del colore corrispondente.

Passiamo al codice html :

<html>
<head>
<link rel="stylesheet" href="esempio2.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".rosso").bind("mouseover", function() {
$("#quadratino").removeClass().addClass("bgrosso");

});

$(".verde").bind("click", function() {
$("#quadratino").removeClass().addClass("bgverde");
});

$(".giallo").bind("dblclick", function() {
$("#quadratino").removeClass().addClass("bggiallo");
});

});
</script>
</head>
<body>
<div>
<p align="middle"> <img src="jquery.jpg" alt="jQuery" /></p>
<h1 align="middle"> Secondo Esempio jQuery </h1>
<h3 align="middle"> Provate i 3 links : </h3>
<ul>
<li class="rosso">rosso</li>
<li class="verde">verde</li>
<li class="giallo">giallo</li>
</ul>
</div>
<div id="quadratino"></div>
</body>
</html>

Prima di passare al css, facciamo due considerazioni :

• Sono stati scelti 3 eventi sui rispettivi collegamenti : mouseover, click e dblclick così per dare una visione più globale
• Avrete notato come, prima di aggiungere una nuova classe all’identificatore del div ‘quadratino’, abbiamo rimosso tutte le altre ($(‘quadrato’).removeClass()) presenti per esser sicuri di assegnare al quadrato un solo colore.

Il file css associato sarà del tipo :

#quadratino{
height:350px;
width:350px;
}

.bgrosso{
background: red;
}

.bgverde{
background: green;
}

.bggiallo{
background: yellow;
}

.rosso{
color:red;
}

.verde{
color:green;
}

.giallo{
color:yellow;
}

Eccovi l’esempio in esecuzione a questo link.

Conclusioni

In questa seconda lezione si é parlato in modo più approfondito della gestione degli eventi in jQuery con un esempio banale quanto significativo. Ma non é tutto. Serve, infatti, una terza lezioncina per definire meglio l’argomento eventi e spiegare bene alcune cosette importanti. Forse, dopo aver visto l’ultimo esempio, qualche domanda/dubbio vi sarà anche sorto…vuol dire che siete acuti….appuntamento a fra qualche giorno con la terza puntata ancora sugli eventi.

Dopo aver assaggiato qualcosina con l’articolo di presentazione sul DOM, eccomi, come promesso, a seguire con voi questo tutorial jQuery fatto a puntate partendo proprio dalle basi fino ad arrivare ad esempi pratici.

Questa prima puntata servirà solo a capire l’argomento e i suoi concetti di base e assaggerete solo un esempio banale, ma già dalla prossima si passerà a un qualcosa di più sfizioso.

jQuery, framework molto potente

Sicuramente seguendo questo blog avrete capito che jQuery è un framework JavaScript che basa molte delle sue potenzialità sfruttando la conoscenza di CSS e HTML e non di altri linguaggi di programmazione più complessi.

jQuery consente, in sostanza, di rendere più semplici le varie operazioni comuni sulle pagine htlm e di arricchire con effetti interessanti, accattivanti e particolari, gli elementi che compongono le stesse pagine web.

Installazione jQuery

L’ultima versione del Framework la trovate sul sito ufficiale di jQuery da cui potete scaricare la versione non compressa. Nonostante questo, il consiglio che vi do é quello di non installare nulla perché potrete includere jQuery direttamente nei vostri documenti Html così :

<script type=”text/javascript” src=”path/jquery-versione.js”>

dove, logicamente, occorre modificare l’attributo src nel tag script per farlo puntare alla vostra copia di jquery-versione.js (se, ad esempio, il file jquery-versione.js é nella stessa directory del file HTML che lo contiene, basterà scrivere :

<script type=”text/javascript” src=”jquery-versione.js”>

Pertanto, eccovi un semplicissimo documento html che include jQuery :

<html>
<head>
<script type="text/javascript" s rc="jquery-versione.js"></script>
<script type="text/javascript">
// Codice Html
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

con il riferimento a jQuery inserito dopo il tag <head> come accade per gli script JS in generale.

Le Basi

Se dovessimo riassumere in due righe lo scopo principale di jQuery, potrei dirvi che tutto é volto al fine di selezionare un elemento della pagina html per fargli compiere un’azione ben precisa. Come detto anche nell’articolo introduttivo sul DOM, questa azione potrebbe essere qualsiasi, ma, in generale, con jQuery si cerca di agire sulle varie proprietà dell’elemento selezionato agendo direttamente sui selettori CSS.

Detto questo e consigliata una ripassatina proprio dei css, presentiamo il costrutto che sta alla base di jQuery : “$“ e che altro non è che un alias della funzione jQuery.

In pratica, volendo selezionare un elemento nella pagina possiamo scrivere :

$(“selettore”)

che é equivalente a :

jQuery(“selettore”)

Fissate bene questo costrutto perché non potrete assolutamente fare a meno di utilizzarlo in jQuery.

Facendo un passo in avanti, notate che al famoso window.onload = functions() {…} del Javascript, jQuery propone un più snella e semplice espressione denominata ready event :

$(document).ready(function(){
// Il tuo codice qui
});

Questa espressione controlla, in pratica, il caricamento dell’intero documento prima di manipolarlo e prima di agire sui singoli elementi.

Primo Esempio jQuery

Proviamo ad applicare quanto appena visto sul costrutto basilare $ di jQuery proponendo un semplicissimo esempio che prevede un link e un pop-up scatenato proprio dal click del link.

Ecco il codice :

<html>
<head>
<link rel="stylesheet" href="esempi.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
alert("Ciao Pecciola!");
});
});
</script>

</head>
<body>
<div>
<p align="middle"> <img src="jquery.jpg" alt="jQuery" /></p>
<h1 align="middle"> Primo Esempio jQuery </h1>
<h3 align="middle"> Provate questo link : </h3>
<p align="middle"> <a href="http://pecciola.com/">Pecciola</a> </p>
</div>
</body>
</html>

Potete testare l’esempio (ho omesso il semplice css associato per ragioni di spazio) a questo link. Due cose vanno sottolineate.

La prima é che ho utilizzato direttamente le API Google per caricare jQuery senza scaricare ed installare nulla. Prendete questa scelta come un fatto di comodità e di velocità…nessun’altra motivazione sta alla base di questa soluzione.

Inoltre, come notate, per applicare al click del link l’effetto pop-up é servito solo richiamare con il $ il selettore a cui applicare l’evento click.

Logicamente, gli eventi a disposizione per gestire le interazioni tra utente e browser  sono moltissimi come potete vedere sulla pagina eventi della documentazione ufficiale jQuery.

Avete visto una banalissima applicazione di jQuery, ma serviva un articolo come questo per introdurvi in questo framework di cui comincerete a toccare con mano le potenzialità fin dal prossimo articolo.

Posso vantarmi di aver sempre trattato con dovizia di particolari l’argomento JavaScript e jQuery, ma segnalare ottimi tutorials è sempre importante soprattutto per coloro che hanno qualche difficoltà a trovare una base di partenza per iniziare a studiare il linguaggio JS e il suo framework più famoso.

jQuery Fundamentals è un libro online disponibile anche come PDF e ePub che può davvero fare da guida a sviluppatori cosiddetti ‘beginners’.

Il tutorial parte dalle basi del Javascript per addentrarsi sempre di più nell’argomento fino a dedicare un capitolo intero a jQuery. Inoltre presenta esercizi con soluzione da poter scaricar in locale.

Direi che avete letto anche troppo…procedete con il download, please!