Cos'è jQuery

jQuery è una libreria del linguaggio Javascript, creata per agevolare e milgiorare la gestione del codice di scripting client-side.

Abbiamo infatti notato nel modulo precedente, di quanto possa risultare macchinoso il processo di manipolazione del DOM tramite il semplice linguaggio Javascript, seppur molto potente ed efficace.

Con la nascita di jQuery, al quale sono seguite molte altre librerie simili rimaste sempre in secondo piano, e con l'avvento dell'HTML5 il linguaggio di client-side scripting è diventato sempre più potente ed importante, tanto da aprire nuovi scenari nel mondo del web.

L'utilizzo di jQuery in un progetto web, non preclude l'utilizzo di altre librerie Javascript o l'utilizzo di codice Javascript puro all'interno delle pagine; la libreria può infatti essere considerata come un insieme di funzioni javascript per semplificare le operazioni più comuni.

Libreria jQuery

Integrazione ed utilizzo in un progetto web

Libreria jQuery

Per poter utilizzare le funzioni di jQuery all'interno di un progetto web, occorre innanzitutto includere la libreria JS ; come per tutte le pagine JS, anche jQuery va inclusa alla fine del tag body, prima delle pagine JS con il codice personalizzato.

	...
	<script src="path/to/jquery.js" type="text/javascript"></script>
	<script src="js/mio-file.js" type="text/javascript"></script>
</body>

Se infatti la libreria fosse inserita in seguito al file di codice personalizzato per la pagina, il browser percepirebbe un errore, in quanto la nostra pagina JS utilizzerebbe le funzioni jQuery senza che queste siano ancora state integrate (sequenzialità).

E' possibile scaricare la libreria di jQuery in locale (nella propria cartella JS) oppure integrare direttamente un file dall'esterno.
Per entrambe le soluzioni, è possibile far riferimento al sito web ufficiale jquery.com.

La soluzione ottimale è quella di includere il file nella cartella JS del proprio progetto per esser sempre certi della disponibilità e della presenza, senza dover dipendere da un fornitore esterno.

Libreria jQuery

Una volta inserita la libreria è possibile utilizzare il codice jQuery in tutte le pagine JS, con una compatibilità garantita su tutti i browser web! (Internet Explorer incluso, a partire dalla versione 6!)

Nell'utilizzo di jQuery si fa riferimento per tutte le operazioni al simbolo del dollaro ($) che rappresenta un'abbreviazione del termine "jQuery".

$ = jQuery


L'utilizzo delle funzioni di jQuery farà sempre fede alla regola generale:

$(selettore).azione();

Libreria jQuery

Quando si parla di selettore in jQuery, si fa riferimento alla proprietà di selezione di uno o più elementi.
Così come in JS si utilizzano le proprietà:

getElementById("id")...
getElementsByClassName("class")...
getElementsByTagName("tag")...

Con jQuery si semplifca drasticamente il processo, in quanto i selettori sono gli stessi che si possono utilizzare con le regole del CSS; le tre regole JS precedenti, sono dunque sostituite con i selettor:

$("#id")...
$(".class")...
$("tag")...

Dunque così come per il CSS, nei selettori jQuery il simbolo cancelletto (#) indica la selezione dell'ID, mentre il punto (.) indica la classe.

Libreria jQuery

Oltre alla gestione semplificata dei selettori, jQuery rende più agevole anche la gestione delle azioni o per meglio dire degli eventi correlati ai selettori della pagina web.
Scompare il concetto dei listener visto per JS, in quanto con jQuery è sufficiente dichiarare un evento affinchè questo resti in ascolto sugli elementi della pagina web.

E' buona norma dichiarare tutto il codice jQuery, così come per JS, al termine del caricamento della pagina, ovvero correlato all'evento document ready, che può essere utilizzato in jQuery nelle due varianti:

// Opzione estesa
$(document).ready(function() {
	// Codice jQuery...
});

// Opzione semplificata
$(function() {
	// Codice jQuery...
});

L'evento document ready è dunque il contenitore di tutte le azioni legate alla pagina web, ad eccezione delle funzioni che potranno essere normalmente dichiarate al di fuori dell'evento.

Libreria jQuery

Ecco dunque un esempio di evento associato al click su un ID:

$(function() {
	$("#element").click(function() {
		alert("Hello!");
	});
});

Di seguito alcuni degli eventi maggiormente utilizzati con jQuery:

  • dblclick() - doppio clic
  • change() - riconosce cambiamento per es. nei campi di un form
  • hover() - passaggio del mouse su un elemento
  • focus() / blur() - selezione e deselezione di un elemento
  • keypress() / keydown() / keyup() - pressione della tastiera
  • resize() - riconosce il ridimensionamento degli elementi (utile per la gestione responsive)
  • scroll() - riconosce lo scroll dell'elemento (div o body)

Per l'elenco completo degli eventi: W3C jQUery events

Libreria jQuery

E' anche possibile attribuire diversi eventi per uno stesso elemento, contemporaneamente, tramite l'utilizzo della funzione on:

$(function() {
	$("#element").on({
		click: function() {		// Evento associato al click
			alert("Click!");
		},
		dblclick: function() {		// Evento associato al doppio click
			alert("Doppio click!");
		}
	});
});

Libreria jQuery

jQuery semplifica molto anche la manipolazione del DOM e dunque del codice HTML e CSS.
Analizziamo gli aspetti più utilizzati come:

  • Lettura e scrittura dei tag
  • Aggiunta o rimozione dei contenuti
  • Modifica del CSS
  • Scorrimento del DOM
  • Animazioni

Libreria jQuery

Lettura e scrittura dei tag

Nel processo di manipolazione del DOM, leggere e scrivere all'interno dei tag HTML è una delle operazioni più importanti.
In jQuery esistono 5 diverse funzioni per la lettura e scrittura, che andremo ad analizzare singolarmente:

  • html()
  • text()
  • val()
  • attr()
  • data()

Libreria jQuery

Lettura e scrittura dei tag - html()

La funzione html() ha un funzionamento pressocchè identico al metodo innerHTML di JS, ovvero permette di leggere o impostare il codice HTML all'interno di un tag HTML.

<p id="testo">Testo in un paragrafo con un <span>tag span interno</span>!</p>
var elem_html = $("#testo").html(); 
// elem_html = Testo in un paragrafo con un <span>tag span interno</span>!

// Sostituisco il contenuto di #testo
$("#testo").html("Nuovo testo!");

Libreria jQuery

Lettura e scrittura dei tag - text()

A differenza di html(), la funzione text() permette la lettura del solo testo presente all'interno di un elemento HTML, rimuovendo dunque tutti gli eventuali tag HTML contenuti nello stesso.
Volendo dunque applicare la funzione text() nell'esempio precedente:

<p id="testo">Testo in un paragrafo con un <span>tag span interno</span>!</p>
var elem_html = $("#testo").text(); 
// elem_html = Testo in un paragrafo con un tag span interno!

// Sostituisco il contenuto di #testo
$("#testo").text("Nuovo testo!");

Il funzionamento in scrittura, risulterà dunque identico a quello della funzione html(), ma in lettura permetterà di rimuovere eventuali tag presenti nel testo del tag, agevolando eventuali manipolazioni.

Libreria jQuery

Lettura e scrittura dei tag - val()

La funzione val() si utilizza per leggere o impostare il valore dei campi del form (input, select, textarea, etc...).

<form method="POST" action="page.php">
	<input type="text" name="username" id="user" />
	<select name="opzione" id="option">
		<option value="1">Primo</option>
		<option value="2">Secondo</option>
		<option value="3">Terzo</option>
	</select>
</form>
var username = $("#user").val();			// Lettura per ID
var opzione = $("select[name='opzione']").val();	// Lettura per attributo NAME

Questa funzione sarà determinante nel caso dei controlli del form prima dell'operazione di submit!

Libreria jQuery

Lettura e scrittura dei tag - attr()

La funzione attr() permette di leggere, modificare o aggiungere attributi agli elementi HTML.
E' dunque utilizzata per la lettura dell'ID o per gli attributi specifici di un elemento (es. href per i link o src per le immagini).

<a id="link" href="http://www.google.com">Vai a Google!</a>
var link = $("#link").attr("href");		// Leggo il link
$("#link").attr("href", "http://facebook.com");	// Modifico il link

Libreria jQuery

Lettura e scrittura dei tag - data()

Analoga alla funzione attr(), la funzione data() permette di leggere, modificare o aggiungere agevolmente, i data attributes degli elementi del DOM, provenienti dall'HTML5.

Si ricorda che i data attributes sono degli attributi aggiuntivi personalizzabili, introdotti con l'HTML5 proprio per permettere la definizione di maggiori attributi per gli elementi della pagina web, al fine di semplificare determinate azioni lato client (JS).
Questo intervento si è reso necessario proprio perchè la tendenza del web è sempre più orientata verso applicativi client-side, con molte iterazioni JS.

<button data-qualcosa="valore" id="pulsante">Invio</button>
var data = $("#pulsante").data("qualcosa");		// Leggo l'attributo data-qualcosa
$("#pulsante").data("qualcosa", "nuovo valore");	// Modifico l'attributo data-qualcosa

Il metodo data() permette dunque di rimuovere la dicitura "data-" per il riconoscimento dell'attributo.
Prima che questa funzionalità fosse introdotta in jQuery, era necessario utilizzare il metodo attr() per leggere anche i data attributes.

Libreria jQuery

Aggiunta o rimozione dei contenuti

Molte volte può essere utile aggiungere o rimuovere elementi all'interno del DOM in maniera dinamica.
In jQuery ci sono 5 funzioni che agevolano queste operazioni:

  • append() - aggiunge HTML alla fine del contenuto dell'elemento selezionato
  • prepend() - aggiunge HTML all'inizio del contenuto dell'elemento selezionato
  • before() - aggiunge HTML prima dell'elemento selezionato
  • after() - aggiunge HTML dopo l'elemento selezionato
  • remove() - rimuove l'elemento selezionato dal DOM

Libreria jQuery

Aggiunta o rimozione dei contenuti

Ecco un esempio di append:

<p id="testo">Testo in un paragrafo!</p>
$("#testo").append("Testo aggiunto al paragrafo!");

In seguito al metodo append(), il tag #testo conterrà dunque il testo:
"Testo in un paragrafo! Testo aggiunto al paragrafo!".

Ecco invece un esempio di before:

<p id="testo">Testo in un paragrafo!</p>
$("#testo").before('<p id="testo-before">Testo precedente al paragrafo!</p>');

In seguito al metodo before(), il DOM HTML risulterà dunque così composto:

<p id="testo-before">Testo precedente al paragrafo!</p>
<p id="testo">Testo in un paragrafo!</p>

Libreria jQuery

Modifica del CSS

Anche con jQuery così come in JS, è possibile modificare il codice CSS legato ad un elemento del DOM; per farlo si utilizza il metodo css(), il quale permette di impostare anche più regole contemporaneamente:

$("#element").css({
	color: "red",
	marginTop: "10px"
});

Si nota come le proprietà CSS possono essere scritte senza l'utilizzo delle virgolette, mentre il valore va necessariamente espresso con l'uso di queste.
Per quanto riguarda invece le proprietà separate dal simbolo "-", si possono tradurre con le proprità concatenate e l'uso della maiuscola (nell'esempio "margin-top", diventa "marginTop");

Spesso può essere utile aggiungere o rimuovere direttamente classi di CSS ad un determinato elemento HTML in seguito ad un evento. Per questo si possono utilizzare le funzioni jQuery addClass() e removeClass():

$("#element").addClass("myclass");

Libreria jQuery

Scorrimento del DOM

Quando si ha a che fare con applicativi web molto grossi, che richiedono molti interventi lato client per la visualizzazione e la gestione degli elementi, può essere necessario muoversi all'interno del DOM.
Per esempio se all'interno di una pagina, abbiamo tanti div duplicati, ognuno dei quali contiene altri elementi HTML, e vogliamo associare ad un evento su ogni elemento interno del div, una determinata azione del div contenitore, sarà necessario scorrere singolarmente i vari elementi.

In sostanza diventa necessario conoscere la relazione che c'è fra i vari elementi della pagina, ovvero capire qual è l'elemento contenitore o quali sono gli elementi contenuti.

Libreria jQuery

Scorrimento del DOM

Se per esempio abbiamo un pulsante all'interno di un div, lo stesso div ripetuto più volte nella pagina, e vogliamo cambiare il colore di sfondo del div contenitore al click su uno specifico pulsante:

<div id="div-1" class="box">
	<button class="button-box">Pulsante</button>
</div>
<div id="div-2" class="box">
	<button class="button-box">Pulsante</button>
</div>
<div id="div-3" class="box">
	<button class="button-box">Pulsante</button>
</div>
$(".button-box").click(function() {
	$(this).parent("div.box").css("background", "red");
});

Libreria jQuery

Scorrimento del DOM

  • I div sono identici fra loro e cambia solo l'ID
  • Abbiamo associato un evento "click" a tutti i pulsanti con classe "button-box"
  • Alla pressione di un pulsante, jQuery partendo dal pulsante cliccato $(this) (il selettore this indica l'elemento corrente), si va a selezionare il contenitore (parent) con classe "box", al quale si attribuisce una proprietà CSS.

Il metodo parent, permette di muoversi sul selettore precedente (contenitore) all'interno del DOM.
Allo stesso modo, si potrebbe scorrere il DOM nel verso opposto utilizzando il metodo children come selettore.

E' possibile anche muoversi a catena (discendente o ascendente) fra i vari elementi, concatendando i selettori parent e children.

Libreria jQuery

Scorrimento del DOM

Esempio di concatenazione parent e children.

<div id="div-1" class="box">
	<div class="box-wrap">	
		<button class="button-box">Pulsante</button>
	</div>
	<p>Testo interno</p>
</div>
$(".button-box").click(function() {
	$(this).parent("div.box-wrap").parent("div.box").children("p").css("color", "red");
});

Nell'esempio, si va dunque a modificare il colore del tag p, contenuto nel div ".box", alla pressione del pulsante ".button-box", contenuto a sua volta nel div ".box-wrap", a sua volta dentro il div ".box".

Libreria jQuery

Scorrimento del DOM

Nel caso in cui si avesse una ramificazione molto più complessa del DOM, potrebbero tornare utili due funzioni di scorrimento:

  • parentsUntil() - permette di scorrere i livelli parent, fino a quando non si trova quello desiderato
  • find() - permette di scorrere i livelli children, selezionando tutti quelli che corrispondo al selettore

Libreria jQuery

Scorrimento del DOM

Nel caso in cui si vogliono analizzare singolarmenete tutti gli elementi appartenenti ad una stessa tipologia di selettore (classe, tag, etc...), può tornare molto utile la funzione each(), che un po' come un foreach del PHP, permette di analizzare gli elementi ed interagire singolarmente.

<input type="text" name="user" />
<input type="password" name="passw" />
$("input").each(function() {
	$(this).css("background", "red");
});

Nell'esempio precedente, grazie all'uso della funzione each(), riusciamo ad impostare per tutti gli input, il colore di sfondo rosso direttamente da jQuery.

Libreria jQuery

Animazioni

Come già detto, grazie al codice JS e dunque anche jQuery, è possibile rendere dinamiche le pagine web ed è anche possibile creare semplici animazioni visive per creare una comunicazione immediata con l'utente utilizzatore.

Fra gli aspetti più essenziali di jQuery per quanto riguarda le animazioni, troviamo:

  • Gestione della visibilità
  • Animazioni CSS

Libreria jQuery

Animazioni - Gestione della visibilità

Le interfaccie web moderne, sono spesso organizzate come pannelli unici, dove gli elementi vengono mostrati o nascosti in funzione dell'esigenza o dell'utilizzo da parte dell'utente.
Proprio per questo utilizzo molto diffuso, jQuery ha creato delle scorciatoie con delle funzioni ad hoc, piuttosto che modificare semplicemente il CSS con le proprietà display o opacity.

hide() e show()
I metodi hide() e show() permettono rispettivamente di nascondere o mostrare un elemento con semplicità

$("#element").hide();	// Nascondo elemento
$("#element").show();	// Mostro elemento

Molte volte può essere utile gestire tramite un pulsante, la visibilità di un elemento. Per esempio, al primo click visualizza e al secondo nascondi, e così via... Tutto questo si può tradurre con il metodo toglle() di jQuery.

$("button").click(function() {
	$("#element").toggle();
});

L'elemento #element sarà inizialmente visibile. Al click se l'elemento è visibile, diventerà nascosto, e viceversa.

Libreria jQuery

Animazioni - Gestione della visibilità

fadeIn() e fadeOut()
I metodi fadeIn() e fadeOut() permettono rispettivamente di mostrare o nascondere un elemento con un effetto in dissolvenza, per rendere la transizione più gradevole.
Nei due metodi è possibile impostare la transizione in millisecondi o con i termini "slow", "medium", "fast".

$("#element").fadeIn(3000);	// Mostra l'elemento in 3 secondi
$("#element").fadeOut(1000);	// Nasconde elemento in 1 secondo

slideDown() e SlideUp()
Con lo stesso principio del fade, è possibile utilizzare le funzioni di slideDown() e slideUp() che mostrano e nascondo rispettivamente l'elemento con un effetto di transizione verticale. Anche in questo caso è possibile impostare la velocità della transizione.

$("#element").slideDown(3000);	// Mostra l'elemento in 3 secondi
$("#element").slideUp(1000);	// Nasconde elemento in 1 secondo

L'elemento #element sarà inizialmente visibile. Al click se l'elemento è visibile, diventerà nascosto, e viceversa.

Libreria jQuery

Animazioni - Animazioni CSS

Se le sole opzioni di visibilità non soddisfano le nostre esigenze di experience, è possibile creare delle proprie animazioni, ovvero modifiche del CSS da applicare in un tempo predefinito per variarne il risultato finale.

Per creare le animazioni personalizzate, si fa riferimento alla funzione animate(), che prevede un utilizzo così standardizzato:

$(selettore).animate({regole css}, tempo transizione, callback)

  • Le regole CSS si impostano così come nella funzione css() di jQuery
  • Il tempo della transizione si definisce in millisecondi (come tutti i tempi in JS)
  • Il callback (opzionale) prevede di far scaturire delle azioni al termine dell'animazione (ovvero del tempo indicato)

E' possibile scrivere più animazioni distinte per uno stesso elemento in cascata, tenendo conto comunque della sequenzialità delle operazioni.

Libreria jQuery

Animazioni - Animazioni CSS

Proviamo per esempio ad animare un semplice div, facendolo spostare all'interno della pagina e variandone il colore.

<div id="movediv" style="width:50px; position:absolute; left:30px; height:50px; background:red;"></div>
function moveit() {
	$("#movediv").animate({
		left:"500px",
		background: "blue"
	}, 1500);
	
	$("#movediv").animate({
		left:"30px",
		background: "red"
	}, 1500, function() {
		moveit();
	});
}

Ajax

Tecnologia asincrona e form client-side

Ajax

Tutto quello che abbiamo visto fino ad ora per quanto riguarda Javascript e jQuery, risulta molto utile dal punto di vista visivo e della esperienza utente, ma non semplifica realmente la qualità della navigazione, rendendo sempre opportuno un procedimento client-server per la gestione delle varie richieste su ogni singola pagina.

Per distruggere il paradigma esistente fra client e server, tale per cui per ogni visualizzazione della pagina sul browser, è necessario ricaricare la pagina per ottenere le informazioni dal server, si fa riferimento ad una tecnologia sempre più utilizzata nella programmazione web, ovvero AJAX, acronimo di Asynchronous JavaScript and XML.

Come indica il termine stesso, la tecnologia AJAX permette di effettuare richieste asincrone dal client al server in JS per aggiornare le informazioni della pagina, senza dover necessariamente riaggiornare la sessione del browser.
Questa tecnologia è alla base del funzionamento dei più comuni e potenti portali web attualmente esistenti: Facebook, GMail, Youtube, Google, etc...

Praticamente il web e i maggoiri siti che conosciamo oggi, hanno la massima efficacia proprio grazie all'utilizzo di AJAX; senza questa tecnologia non sarebbe stato possibile ricevere in real-time modifiche o nuovi post dai nostri amici sui social, non avremmo potuto leggere le mail ed essere notificati in tempo reale. L'esperienza sul web sarebbe stata composta da un continuo aggiornamento delle pagine, un continuo "F5"!

Ajax

Dal punto di vista della programmazione, era già possibile creare procedure AJAX prima dell'introduzione di jQuery, ma grazie a quest'ultima libreria tutto è stato trasformato alla massima semplicità.
Con il solo JS occorreva infatti scrivere personalizzazioni diverse per le richieste asincrone in AJAX, a seconda del browser; una singola richiesta AJAX poteva dunque occupare centinaia di righe di codice!!!

Con jQuery invece è sufficiente rispettare la sintassi:

$("button").click(function() {
	$.ajax({
		url: "pagina.php",
		beforeSend: function() {
			// Operazioni da fare prima della chiamata AJAX
		}, success: function(response) {
			// Operazioni da fare in caso di successo dela chiamata AJAX
		}, error: function(response) {
			// Operazioni da fare in caso di errore
		}
	});
});

Ajax

Il maggior caso d'uso delle chiamate AJAX, sono l'aggiornamento del DOM integrando o sostituendo codice HTML, oppure l'invio dei dati di un form, senza dover aggiornare la pagina.

Fra i parametri che si passano alla funzione AJAX, oltre infatti alla URL (necessariamente una pagina PHP che dovrà elaborare la richiesta), è possibile integrare le seguenti informazioni:

  • type: (POST o GET) - per specificare la tipologia della richiesta
  • dataType: (JSON, HTML o XML) - determina la formattazione dei dati restituiti dalla chiamata AJAX
  • data: array associativo contenente i parametri evenutlmente passati in GET o POST
  • cache: (true o false) - permette di gestire la cache sulle chiamate (di default è true, opzione consigliata)

L'attributo dataType, varia in funzione di ciò che deve fare la richiesta AJAX al termine dell'operazione. Se per esempio si vuole effettuare una chiamata AJAX per aggiornare l'intero contenuto di una view HTML, l'opzione migliore sarà richiedere un dataType HTML in modo che sia già formattato e pronto per l'uso.

Se invece la chiamata AJAX deve essere di tipo comunicativo con il server (vedi invio dati form), si consiglia sempre l'utilizzo del JSON che è il protocollo di comunicazione più utilizzato su web.

Ajax

Esempio aggiornamento view (HTML)

<div id="view">Qui andrà la view aggiornata in AJAX</div>
$(function() {
	$.ajax({
		url: "reload-view.php",
		beforseSend: function() {
			$("#view").html("Caricamento in corso...");
		},
		success: function(html) {
			$("#view").html(html);
		}, error: function() {
			$("#view").html("Errore nel caricamento AJAX!");
		}
	});
});
<?php
	# Pagina reload-view.php
	$ora_attuale = date('H:i:s');
	echo "Pagina aggiornata con successo alle ore: ".$ora_attuale;

Ajax

Esempio form (JSON)

In allegato un file con il codice di esempio semplificato per un form AJAX, con scambio dati in JSON.

Scarica codice sorgente

Esercitazione

Test finale jQuery + AJAX

Esercitazione

Partendo dall'esercitazione del CRM inTrain (link al codice HTML + CSS) completare ed integrare i seguenti aspetti:

  • Gestire il login sul database, con AJAX, inserendo i dovuti controlli e messaggi di errore
  • Gestire il CRUD dei treni e del log delle azioni correlate, in real-time e sulla stessa interfaccia, senza dover aggiornare la pagina per le varie operazioni. Per la modifica, la creazione, la conferma di eliminazione e la visualizzazione dei dati dei treni, utilizzare le finestre in overlay, ovvero i modal, creati e gestiti con HTML+CSS+jQUERY (link al design)

<Thank u!>

Sempre pronto a darti una mano