(5 voti, media: 4,60 di 5)
Loading...
In questo post analizzeremo la libreria JavaScript JQuery che si distingue nel panorama delle librerie del suddetto linguaggio per la sua sintassi sintetica (non a caso il suo motto è "Write less, do more", "Scrivi meno, fai di più") e semplice (vedremo che è molto facile manipolare degli oggetti in JQuery).Il progetto JQuery nasce nel 22 agosto 2005 quando John Resig rilascia una prima versione primordiale, ma in effetti raggiunge la versione 1 (stabile) soltanto il 26 agosto dell'anno successivo. A partire dalla versione 1.3, il codice core (fondamentalmente la parte di CSS selector) viene reso indipendente (prenderà il nome di Sizzle) in modo da poter essere sviluppato ed esteso anche da Community esterne.
In questo post analizzeremo la libreria JavaScript JQuery che si distingue nel panorama delle librerie del suddetto linguaggio per la sua sintassi sintetica (non a caso il suo motto è “Write less, do more”, “Scrivi meno, fai di più”) e semplice (vedremo che è molto facile manipolare degli oggetti in JQuery).
Il progetto JQuery nasce nel 22 agosto 2005 quando John Resig rilascia una prima versione primordiale, ma in effetti raggiunge la versione 1 (stabile) soltanto il 26 agosto dell’anno successivo. A partire dalla versione 1.3, il codice core (fondamentalmente la parte di CSS selector) viene reso indipendente (prenderà il nome di Sizzle) in modo da poter essere sviluppato ed esteso anche da Community esterne.
JQuey è una libreria di funzioni (framework) Javascript, cross‐browser per le applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML. Tramite l’uso della libreria jQuery è possibile, con poche righe di codice, effettuare svariate operazioni, come ad esempio ottenere l’altezza di un elemento, o farlo scomparire con effetto dissolvenza.
Di seguito riportiamo le URL ai Server CDN disponibili:
- Google Ajax API CDN
- Microsoft CDN
- jQuery CDN (via Media Temple)
- http://code.jquery.com/jquery-1.6.1.min.js Minified version
- http://code.jquery.com/jquery-1.6.1.js Source version
Utilizzare un CDN offre il vantaggio di diminuire il traffico generato sui nostri server (molto utile se abbiamo un hosting con banda limitata), e di avere una maggior velocità nel download del contenuto della libreria (i server CDN sono nati proprio con lo scopo di offrire storage e download migliore nella rete).
Per i nostri esempio utilizzeremo come di consueto l’IDE Eclipse, di conseguenza la prima cosa dare è creare un progetto di tipo Web Dinamico. Ovviamente gli esempi che faremo funzionano anche senza l’utilizzo di Eclipse e del Server Tomcat, ma nel momento in cui faremo degli esempi Ajax che coinvolgeranno anche la parte Server di programmazione (ed utilizzeremo per questa il linguaggio Java), ci ritornerà molto utile questo tipo di configurazione.
Utilizzare Eclipse inoltre ci permette di utilizzare un IDE che supporta la evidenziazione del codice JavaScript che lo rende più leggibile e facile da modificare.
Dalla barra dei menu di Eclipse clicchiamo su File -> New -> Project…, nel wizard per il New Project, selezioniamo Web -> Dynamic Web Project:
Clicchiamo su Next si aprirà questo pannello:
Diamo un nome al nostro progetto, scegliamo in Configuration lasciamo Default (nel nostro caso abbiamo come Application Server Tomcat 7) e clicchiamo su Next fino ad arrivare al tasto Finish (non dobbiamo includere alcuna libreria jar o Runtime particolare).
Creiamo una cartella js all’interno di WebContent e vi copiamo i file jquery-version.js o jquery-version.min.js a seconda della versione di libreria che abbiamo scaricato in precedenza.
Copiamo poi la cartella resources all’interno di WebContent, possiamo copiarci anche la cartella locale (che contiene le stringhe per la localizzazione) anche se al momento non la usiamo.
Otteniamo queste cartelle nel nostro progetto:
Creiamo ora una pagina HTML5 nel nostro progetto, cliccando col tasto destro sulla cartella WebContent dello stesso e scegliendo poi New -> Other…, nella categoria Web selezioniamo HTML File e clicchiamo Next. Digitiamo ora il nome della pagina e continuiamo con Next, nella prossima schermata, tra i vari template, scegliamo New HTML5 Page.
La pagina viene ora aperta all’interno del nostro editor e mostra il seguente codice:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
Per poter utilizzare il framework dobbiamo includere la libreria nella nostra pagina web:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Esempio JQuery</title>
</head>
<body>
<script type="text/javascript" src="./js/jquery-1.6.1.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
alert("Grazie per averci visitato!");
});
});
</script>
<a href="http://www.appuntisoftware.it/">AppuntiSoftware.it</a>
</body>
</html>
Nell’esempio abbiamo incluso la libreria JQuery (in versione 1.6.1 l’ultima nel momento in cui scriviamo), all’interno della pagina (avremmo potuto anche utilizzare una versione disponibile su CDN con <script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’></script>). In seguito nel tag body abbiamo scritto il nostro primo script JQuery: al caricamento di tutti gli elementi DOM della pagina (con il codice $(document).ready), quando si clicca sul link (che presenta il tag <a>), viene lanciato un alert prima di lasciare la pagina.
Lo statement:
$(document).ready(function(){
...
})
è molto simile a:
window.onload = function(){
...
}
ma quest’ultimo lancia la funzione quando tutto la pagina è caricata comprese le immagini che possono anche essere molto grandi e i fogli CSS, mentre il primo invece ci garantisce che la funzione possa essere richiamata correttamente anche se non tutte le immagini e relative risorse sono state caricate in memoria visto che sono stati caricati tutti gli elementi DOM (di conseguenza lo script lancia prima la funzione).
Il simbolo $ è un’abbreviazione dell’oggetto JQuery su cui si basa tutto il framework, di conseguenza $(“#selettore”) è uguale a JQuery(“#selettore”).
JQuery permette di selezionare degli elementi della pagina HTML in maniera molto semplice utilizzando la stessa sintassi dei selettori Cascading Style Sheet, ad esempio:
- per selezionare un elemento in base al suo id (#nomeid);
- per selezionare uno o più elementi in base alla classe (.nomeclasse);
- per selezionare gerarchicamente (mediante l’utilizzo di parole chiave come ancestor, sibling, prev, etc);
- per selezionare in base a pseudo-classi (:first, :last, :not, etc);
- per selezionare in base ad attributi o contenuti (:contain, :has, :hidden, [type=”text”], etc)
Nell’esempio precedente $(“a”) cerca attraverso l’albero DOM della pagina tutti gli elementi che corrispondono (match) con il selettore fornito (nel nostro caso tutti i tag <a>, quindi i link), e crea un nuovo oggetto JQuery sul quale poter richiamare delle funzioni o associarvi un event handler, ad esempio associarvi l’evento onClick.
Proviamo ora a fare qualche esempio utilizzando i selettori, dapprima costruiamo una pagina html con una lista di elementi e definiamo delle classi CSS all’interno:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Esempio JQuery</title>
<style>
.red { background-color: red; }
</style>
</head>
<body>
<script type="text/javascript" src="./js/jquery-1.6.1.js"></script>
<script>
$(document).ready(function() {
//codice JQuery
});
</script>
<a id="link" href="#">Link di prova</a>
<div class="classe">
<div class="pulsanti">
<button>Primo pulsante</button>
<button>Secondo pulsante</button>
</div>
<ol id="listaordinata">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
<li>Quarto elemento con ul
<ul>
<li>Primo Figlio </li>
<li>Secondo Figlio</li>
</ul>
</li>
</ol>
</div>
</body>
</html>
Ora possiamo inserire del codice JQuery dove abbiamo lasciato il commento // e vedere gli effetti sulla pagina. Se inseriamo :
$("#listaordinata").addClass("red");
viene evidenziata con background rosso (come viene definito nella regola CSS) tutta la lista con id @#listaordinata.
$("#listaordinata > li > ul").addClass("red");
con questo selettore riusciamo a rendere rosso solo il background degli elementi ul.
$("#listaordinata li:last").hover(function() {
$(this).addClass("red");
},function(){
$(this).removeClass("red");
});
viene selezionato l’ultimo elemento (li) all’interno della lista con id #listaordinata e al passaggio del mouse viene evidenziata in rosso (secondo la regola CSS associata).
Proviamo ora delle animazioni:
$("a").toggle(function(){
$(".classe").hide('slow');
},function(){
$(".classe").show('fast');
});
quando clicchiamo sul link (abbiamo specificato solo il tag <a>, dunque la regola si applica su tutti i link della pagina), all’elemento con classe .classe , la lista ordinata, viene applicato l’effetto di dissolvenza e di ricomparsa (al secondo click).
Nei prossimi articoli vedremo altre funzionalità di JQuery, tra cui i Widget, e una integrazione con Java tramite Ajax.
COMMENTS