Vuoi imparare jQuery ma non sai da dove iniziare? – Gli eventi

jqueryNella prima lezione su jQuery abbiamo introdotto i concetti fondamentali di questo framework e realizzato un semplice esempio che aggiungeva una classe per evidenziare alcune sezioni del testo appena terminato il caricamento della pagina.

Naturalmente, nel mondo reale, potresti voler applicare tale effetto solo quando richiesto, oppure solo quando si presentano certe condizioni. È in queste circostanze che dobbiamo introdurre il concetto di evento.

Cos’è un evento?

Possiamo definire un evento (in JavaScript) come una qualsiasi interazione dell’utente con una pagina web. Le azioni che possono essere effettuate sono molteplici: click, doppio click, ridimensionamento finestra, passaggio con il mouse su di un elemento; ad ognuno di questi eventi è possibile associare un effetto più o meno complesso.

È un po’ come nella vita reale: premi un interruttore (evento) e la lampadina si accende (effetto).

Come accendere una lampadina con jQuery?

Proviamo a realizzare un semplice interruttore per lampadine con l’aiuto di jQuery. Cominciamo dal realizzare la struttura HTML:

<!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>Lampadina</title>
      <link rel="stylesheet" href="lampadina.css" type="text/css" media="screen">
      <script src="jquery.js" type="text/javascript"></script>
      <script src="lampadina.js" type="text/javascript"></script>
   </head>
   <body>
      <div id="interruttore">
         <a href="#" id="on">Accendi Lampadina</a>
         <a href="#" id="off">Spegni Lampadina</a>
      </div>
      <div class="lampadina">
      </div>
   </body>
</html>

La struttura è molto semplice: un link con ID “on” per “accendere” la lampadina e un div vuoto che ospiterà l’immagine dell’oggetto. Come puoi notare il link non punta a nessun file: non è necessario infatti nessuna interazione esterna alla pagina. Tutto avviene utilizzando JavaScript, attraverso jQuery.

Nella sezione head ho inserito il collegamento al framework (jquery.js), il collegamento a un file JavaScript vuoto (lampadina.js) e a un file CSS che conterrà il seguente codice:

body{
  font-family:Helvetica,Arial,sans-serif;
  width:500px;
  margin:0 auto;
}

.lampadina{
  width:150px;
  height:273px;
  background:#CCC url(lampadina.png) top left no-repeat;
  margin:0 auto;
}

#interruttore{
  margin: 20px;
  text-align:center;
}

.accesa{
  background-color:#f8f070;
}

Oltre ad alcuni accorgimenti puramente estetici, ho caricato l’immagine di sfondo per il div “lampadina” (che puoi trovare qui) e creato una classe che “accenderà” la lampadina.

Dopo aver preparato il terreno, passiamo finalmente al codice jQuery.

Collegare gli eventi

Apri dunque il file “lampadina.js” nel tuo editor preferito. Come nell’esempio della scorsa lezione, vogliamo che gli effetti siano resi disponibili solo dopo che la struttura del documento sia caricata. Quindi, la prima cosa da fare è inserire queste righe di codice:

$(document).ready(function(){
});

Tutto il codice che vogliamo far eseguire nella pagina, sarà compreso in questo blocco. La funzione jQuery che si prende cura di collegare un evento a un effetto si chiama “bind” (la cui traduzione in italiano è proprio collegare). Questa funzione prende come parametri di ingresso obbligatori, il tipo di evento, e una funzione da eseguire quando questo evento accade.

.bind("tipo di evento","funzione da eseguire")

L’elenco completo degli eventi disponibili lo puoi trovare in questa sezione della documentazione di jQuery. Quelli più utilizzati sono “click”, “dblclick”, “submit”, ma ognuno ha la sua utilità.

Naturalmente la funzione bind deve essere applicata ad un elemento precedentemente selezionato, attraverso l’operatore $. Nel nostro caso si tratta del link con ID “on”:

$(document).ready(function() {
  $("#on").bind("click",function(){
    ...codice da eseguire al click...
  });
});

Il codice può essere letto come “Dopo che il documento è stato caricato, collega l’evento click sul link con ID “on” ed esegui il codice presente nella funzione passata come parametro”

A questo punto non ci resta che applicare la classe “accesa” al div per avere un interruttore funzionante:

$(document).ready(function() {
  $("a#on").bind("click",function(){
    $("div.lampadina").addClass("accesa");
  });
});

Chiaramente, così com’è questa lampadina è destinata a rimanere sempre accesa. Sarebbe utile, come esercizio, aggiungere un link per spegnerla, ricordando che esiste la funzione “removeClass”. Questo dovrebbe essere il risultato finale.

Il codice può essere reso più leggero attraverso alcune abbreviazioni. Infatti, dato che rilevare un click su un elemento è un’operazione abbastanza frequente, i creatori di jQuery hanno introdotto un alias per tutti gli eventi della funzione “bind”.In questo esempio utilizzeremo la funzione “click” ed il codice diventa:

$(document).ready(function() {
  $("a#on").click(function(){
    $("div.lampadina").addClass("accesa");
  });
});

Conclusioni

In questa lezione abbiamo introdotto la gestione degli eventi in jQuery, e visto una semplice applicazione, che però dimostra la potenza di questo framework (abbiamo scritto solo tre righe di codice!). Nella prossima lezione miglioreremo questo esempio attraverso l’utilizzo degli “Interaction Helpers” ed inoltre daremo un primo sguardo agli effetti presenti in jQuery.

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

14 commenti

Trackback e pingback

  1. Vuoi imparare jQuery ma non sai da dove iniziare? – Gli eventi … | Eventi Fine Settimana
    [...] See the original post: Vuoi imparare jQuery ma non sai da dove iniziare? – Gli eventi … [...]
  2. Vuoi imparare jQuery ma non sai da dove iniziare? – Alternare le funzioni, le variabili, primi effetti | Your Inspiration Web
    [...] le variabili, primi effetti Pubblicato venerdì, 23 ottobre, 2009 da JustB Nell’articolo della settimana scorsa, avevamo realizzato un semplice…
  3. Vuoi imparare jQuery ma non sai da dove iniziare? Gli stili inline, gli effetti predefiniti | Your Inspiration Web
    [...] Lezione 2: gli eventi (concetti basilari) [...]
  4. Vuoi imparare jQuery ma non sai da dove iniziare? | Your Inspiration Web
    [...] Lezione 2: gli eventi (concetti basilari) [...]
  5. Vuoi imparare jQuery ma non sai da dove iniziare? - Le dimensioni | Your Inspiration Web
    [...] Lezione 2: gli eventi (concetti basilari) [...]