1/1/2014
DISPENSA PER IL CORSO WEB D ESIGNER
JQUERY SPIEGATO A MIA NONNA
Introduzione al framework javascript jQuery e jQueryui | Fabio Mocciaro
Introduzione D: Ma che è sto geicueri, qualche animale strano? Mi devo preoccupare? R: Nonna stai tranquilla, nessun animale strano da domare, pensa a jQuery come ad una cassetta degli attrezzi, con tanti strumenti utili da utilizzare quando ti servono, oppure (se il paragone ti piace di più) come ad un dizionario di una nuova lingua che stai imparando, ricco di frasi già pronte all’uso. Così quando hai la necessita di fare (dire) qualcosa, trovi lo strumento (la frase) già pronto e devi solo usarlo. D: ah ok, mi ero già agitata! E senti una cosa, ma perché dovrei usarlo? R: Beh, principalmente perché “scrivi meno e fai di più”, è abbastanza facile da imparare e funziona con tutti i Browser, quei programmi che usi per navigare su internet; se ricordi ne abbiamo parlato quando hai cominciato a scrivere le pagine web in HTML e CSS. Ti ricordi? D: Fabio mio, certo che lo ricordo, ho faticato un po per impararlo ma poi mi son presa tante soddisfazioni con i miei colleghi del pensionato. Certo non è stato semplice fare capire loro che, prima di cominciare a creare pagine web avrei dovuto creare il progetto in Drim-‐uiver. Senti ma sto jGuaro come lo uso? R: Nonna è semplice, intanto ti ricordo che si scrive jQuery, e che il programma si chiama Dreamweaver. Per il resto basta che vai sul sito di riferimento, che è http://www.jquery.com e da li scarichi la libreria, così puoi importarla nel tuo progetto, utilizzando la stringa seguente che va inserita nella sezione HEAD, dove metti il richiamo per i CSS. Ti ricordi come si fa, vero? <script type=”text/javascript” src=”js/jquery.10.1.js”></script> D: Certo, mica ho l’alzheimer! Ma dimmi, cosa ci faccio di bello con questa libreria? R: Dunque, prima di parlare delle cose belle, mi sa che ti serve un briciolo di teoria, lo so che è noisa, ma vedrai che molte cose ti verranno familiari, se ricordi le regole e i selettori dei CSS. Ho visto che hai già acceso il portatile, prendi un progetto che hai già fatto così utilizziamo quello come base di partenza. D: Ok, prendo il sito che ho fatto per i miei amici giocatori di Canasta, così lo abbelliamo un po. Io sono pronta ed emozionata. R: bene nonna, le premesse ci sono tutte, allora adesso cominciamo e si fa sul serio, ti vedo pronta ed emozionata, è proprio quello che serve per iniziare bene. Adesso mettiti comoda e ascolta, allaccia la cintura e metti il casco, si parte. Per prima cosa ti riepilogo tutti i passi da eseguire e “il momento” in cui inserire il codice jQuery nella tua pagina: 1. Crea la cartella di progetto e le cartelle utili, sono sempre le solite: la cartella “images” per le immagini, quella “css” per ospitare i tuoi fogli di stile e infine la cartella “js” per i file javascript. 2. Crea il progetto in Dreamweaver e dal programma crea una nuova pagina html che ti ricordo deve chiamarsi “index.html”. 3. Nella sezione HEAD della pagina html inserisci il collegamento ai fogli di stile e alla libreria di jquery
4. In fondo alla pagina, poco prima di chiudere il BODY metti dentro il tag SCRIPT la seguente dicitura, questo è quel “momento” che ti dicevo prima, ossia quando la tua pagina deve leggere e caricare la libreria jQuery; scivi: <script type=”text/javascript”> $(document).ready(function(){
//Qui dentro scriveremo tutto quello che jquery faccia per noi
//Quando utilizzi 2 volte il segno Slash / viene interpretato come un commento
//e viene ignorato, puoi usare i commenti per scrivere codice più leggibile
}); </script> Nonna, niente panico che ti spiego cosa abbiamo scritto: -‐
-‐ -‐
-‐
$ è un “alias” di jQuery, avremmo potuto scrivere “jQuery(document).ready…”etc, sarebbe stato equivalente, utilizzare il simbolo del dollaro $ è molto più comodo e veloce (Ricordi quando ti ho detto “scrivi meno e fai di più?”). document è il selettore, si riferisce al documento html nella sua interezza ready in inglese significa “pronto” e intercetta il momento in cui la pagina è stata caricata dal browser ma non è ancora stato mostrata all’utente. Se ti ricordi è lo stesso concetto dei fogli di stile CSS; quando l’utente carica la pagina, questa viene prima letta e interpretata, poi vestita e abbellita utilizzando le regole CSS. Nello stesso procedimento, viene poi eseguito il codice javascript. function(){ …bla…bla… } questa è la parte relativa alle funzioni, cioè a tutto quello che jQuery vuoi che faccia per te. Qui dentro scriviamo tutto il codice jQuery che ci serve. Addirittura possiamo inserire anche altri eventi, come ad esempio il click su un oggetto.
Fatto questo, siamo pronti a schiavizzare jQuery e farlo lavorare per noi, ti pare poco? D: Comincia a piacermi, ma non sono sicura di ricordare tutte questi simboli, queste parentesi e poi mi hai parlato di attrezzi per fare delle cose, io non vedo ancora niente. R: e già, lo capisco! Il primo impatto è un po forte, ma ti assicuro che con un po di pratica ti verrà naturale utilizzarlo e poi, non appena avrai gustato i vantaggi e le potenzialità di jQuery non te ne vorrai separare più. Intanto dimmi, ti ricordi cosa sono i selettori nei CSS? D: Certo che lo ricordo, ma siccome ti vedo preso dal discorso se vuoi rinfrescarmi la memoria te ne sarei grata. R: Lo faccio con piacere, so che li ricordi ma io te li racconto di nuovo.
I Selettori Nei CSS i selettori servono a selezionare l’oggetto che vuoi personalizzare, ad esempio se vuoi che tutti i paragrafi della tua pagina siano verdi e con un carattere grande 16 pixel scriverai: p{
color: #28A028;
/*notazione esadecimale per il colore verde*/
font-‐size: 16px;
/*(ricorda il punto e virgola ad ogni riga)*/
} Ricordati che così applicherai queste regole a tutti i paragrafi. Se desideri applicare la regola ad alcuni paragrafi ti basterà dare loro una classe ad esempio “colorati”, e trasformare la regola CSS così: p.colorati{
color: #28A028;
/*notazione esadecimale per il colore verde*/
font-‐size: 16px;
/*(ricorda il punto e virgola ad ogni riga)*/
} Così solo i paragrafi che hanno la classe “colorati” applicheranno queste regole. Se invece hai un solo paragrafo che vuoi stilizzare utilizza l’ID ad esempio “verdino” e trasforma il CSS in: #verdino{
color: #28A028;
/*notazione esadecimale per il colore verde*/
font-‐size: 16px;
/*(ricorda il punto e virgola ad ogni riga)*/
} Così solo il paragrafo avente ID “verdino”, avrà il colore del testo verde e la grandezza del carattere di 16 pixel. Fin qui ci siamo? D: si sono sintonizzata e con le idee rinfrescate, vai avanti che son curiosa. Cosa c’entrano i selettori dei CSS con jQuery? R: Semplicemente che i selettori CSS e quelli jQuery sono identici, quindi è con grande soddisfazione che puoi dire di avere già imparato i selettori jQuery, contenta? In realtà i selettori di jQuery sono molto più potenti di quelli dei CSS, ti faccio alcuni esempi che vanno oltre i selettori standard, fai attenzione ad alcuni caratteri speciali che inserisco, ognuno di essi ha un significato ben preciso.
Selettore jQuery
A cosa si riferisce
$("p") $("a") $("a,p") $("#principale") $("div#principale") $(".evidenziato") $("div.evidenziato") $("img[title]") $("img[title=‘logo’]") $("input[type=‘radio’]") $("img[title^='logo']") $("a[href ^ =‘http://’]") $("img[src$='.png']") $("img[title*='logo']") $(div > ul) $(div > li)
tutti i paragrafi della pagina tutti i link (e ancore) della pagina tutti i link e i paragrafi della pagina elemento della pagina con attributo id="principale" div della pagina con attributo id="principale" elementi della pagina che hanno classe evidenziato tutti i div della pagina con classe evidenziato tutte le immagini in cui è specificato l’attributo title tutte le immagini in cui l’attributo titolo è uguale a ‘logo’ tutti gli elementi input di tipo radio tutte le immagini in cui l’attributo titolo inizia con ‘logo’ tutti i link con indirizzo non relativo tutte le immagini con estensione png (puoi usare anche altre estensioni) tutte le immagini in cui l’attributo titolo contiene la stringa ‘logo’ tutte le liste che sono contenute direttamente in un div ERRATO!!! Selezionerebbe tutti gli elementi di una lista contenuti direttamente in un div. Gli elementi di una lista devono essere contenuti in elementi ul o ol tutti gli ul che hanno come discendente almeno un link tutti i div che hanno come discendente almeno un’immagine il primo link della pagina il primo paragrafo con class="evidenziato" ultima immagine che contenga nell’indirizzo la parola logo il primo elemento contenuto in ogni div il primo elemento contenuto in ogni paragrafo con class="evidenziato" ultimo elemento contenuto in ogni li
$("ul:has(a)") $("div:has(img)") $("a:first") $("p.evidenziato:first") $("img[src*=logo]:last") $("div:first-‐child") $("p.evidenziato:first-‐child") $("li:last-‐child")
Questi sono una buona parte dei selettori che jQuery ti mette a disposizione, ti stai appassionando, sei ancora sintonizzata? D: si, molto! Ma ancora mi manca qualcosa, ora che so come selezionare gli oggetti… …che me ne faccio? R:Mi verrebbe da dirti “tutto quello che vuoi” e in effetti è la risposta che ti do. Quello che ti serve approfondire è come legare jQuery agli eventi che possono accadere in una pagina HTML. Quindi non ci resta che parlare degli eventi, ed anche qui ci sono diverse similitudini con gli eventi CSS, come ad esempio “:hover” che utilizzi quando vuoi personalizzare un oggetto nel momento in cui l’utente ci va sopra con il mouse. Alla fine è come nella vita reale: premi un interruttore (evento) e la lampadina si accende (effetto).
Gli eventi Come si accende una lampadina in jQuery? l’evento per eccellenza è quello che abbiamo già visto, ossia il caricamento della pagina. Ovviamente ci sono diversi altri eventi, vediamo di riassumerli in una tabella:
EVENTO
DESCRIZIONE
blur, focus
Inviati ad un elemento quando rispettivamente perde il focus od ottiene il focus. load Inviato ad un elemento quando esso e tutti i suo discendenti sono stati completamente caricati (in genere riferito al document) resize Inviato all'elemento windows quando la finestra del browser ha cambiato dimensioni click, dbclick Inviati ad un elemento quando il mouse è sopra di esso e viene effettuato un click o un doppio click mousedown, mouseup Inviati ad un elemento quando il mouse è sopra di esso e viene rispettivamente premuto o rilasciato il bottone del mouse mouseover, mouseout, Eventi inviati all'elemento in cui il puntatore del mouse entre (mouseover), in mousemove cui esce (mouseout) o in cui si sta mouvendo (mousemove) keydown,keypress, keyup Eventi inviati quando un tasto viene premuto (keydown) è stato rilasciato (keyup) o è stato premuto (keypress) select Inviato ad un elemento quando viene selezionato del testo all'interno di esso. Questo evento è limitato agli elementi <input type="text" /> e <textarea> change Evento inviato ad un elemento che ha cambiato il proprio valore. Limitato a <select> <input> <textarea> submit Elemento inviato quando l'utente tenta di fare il submit di un form Il modo di sfruttare gli eventi è cambiato con le diverse versioni di jQuery, è possibile intercettare il click su un oggetto (ad esempio un link) con la seguente sintassi: $(“a”).click(function(){
Alert(“hai cliccato un link”);
}); Tuttavia, nella ultima versione di jQuery e per motivi legati al “code injection” (poi ne parliamo), il modo che garantisce la migliore resa è sfruttare il “gestore degli eventi” .on, come segue: $(“a”).on(“click”, function(){
Alert(“hai ricliccato un link”);
}); In questo modo la sintassi rimane sempre invariata, tranne che per l’evento che si vuole intercettare (vedi tabella eventi). Capisco che abbiamo messo tanta roba sul fuoco, ma se fai un po di pratica giocando con gli eventi e i selettori tutto diverrà molto più chiaro e naturale; a questo punto non posso che dirti:
ESERCITATI NONNA!