Diapositiva 1 - Dipartimento di Scienze Ambientali, Informatica e

Laboratorio Basi di Dati
JQuery
[email protected]
Luca Cosmo
Dipartimento di Scienze Ambientali, Informatica e Statistica
Università Ca’ Foscari di Venezia, Italia
jQuery
Una libreria Javascript multi-browser pensata per facilitare la
programmazione del comportamento delle pagine web client-side.
Facilita:
-
La navigazione del DOM
La selezione di specifici elementi del DOM (sintassi CSS)
La gestione degli eventi
Semplici animazioni
AJAX
Sono disponibili molti plug-in (e.g. jquery.validate per validare i form)
Deve essere inclusa:
<script type="text/javascript" src="jquery.js"></script>
se scaricata localmente, oppure online
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Fornisce un’unica funzione: $
$(arg) è una funzione che restituisce un oggetto rappresentante un
elemento del DOM arricchito di alcuni metodi molto utili!
API: http://api.jquery.com/category/selectors/
jQuery - SELETTORI
jQuery permette di selezionare specifici elementi del documento attraverso
l’uso di una sintassi simile ai selettori CSS:
•
$("#titolo").html("Basi di Dati 2012/2013");
Seleziona l’elemento con id titolo e ne inserisce all’interno la stringa "Basi di
Dati 2012/2013"
•
$(“img#logo").attr("src","img/logo.png");
Seleziona l’elemento di tipo img con id logo e ne cambia l’attributo src
impostandolo a "img/logo.png".
•
$(".red").css("color","red");
Seleziona gli elementi con classe red e ne imposta l’attributo css color a "red"
•
$("li").each(function(index){$(this).html(index);});
Seleziona una lista di elementi con tag li per ciascun elemento trovato chiama la
funzione passata. $(this) rappresenta l’elemnto corrente della lista.
Possiamo passare alla funzione $ anche elementi del DOM:
•
$(document).ready(function(){ /*Inizializzazione*/ };);
Possiamo usare questo comando per inserire il codice di inizializzazione che verrà
eseguito al caricamento del documento. (Invece di chiamare una funzione
all’onLoad del body)
jQuery - EVENTI
Possiamo facilmente associare ad un elemento del DOM una funzione
(delegate) da richiamare al verificarsi di un evento:
•
$(document).ready(function(){ /*Inizializzazione*/ };);
Evento che viene chiamato al caricamento del documento.
•
$("#myButton").click(function(e){ alert("Button click"); });
Associamo all’evento click dell’elemento con id myButton una funzione che
visualizza un popup con scritto Button click
È possibile «lanciare» un evento anche da codice javascript:
•
$("#myButton").click();
Lancia l’evento click come se l’elemento con id myButton fosse stato premuto
nell’interfaccia grafica.
Per eliminare tutte le funzioni associate agli eventi di un elemento possiamo usare:
•
$("#myButton").unbind();
API per la gestione degli eventi tramite jQuery:
http://api.jquery.com/category/events/
jQuery - ANIMAZIONI
jQuery mette inoltre a disposizione dei metodi per effettuare delle semplici
animazioni sugli elementi della pagina.
•
$("#myDiv").fadeIn()
$("#myDiv").fadeOut(1000)
Fa comparire e scomparire l’elemento con un effetto dissolvenza. È
possibile passare come argomento la durata dell’animazione.
•
$("#myDiv").slideDown()
L’elemento compare con un effetto roll-out.
Per effetti più complessi è possibile usare il metodo animate(…)
API per la gestione degli effetti tramite jQuery:
http://api.jquery.com/category/effects/
jQuery - AJAX
jQuery mette a disposizione delle funzioni per lo scambio asincrono di dati
con il web server.
$.ajax({
url:"getAjaxData.php",
success:function(textResult){
var result = JSON.parse(textResult);
...}
});
Possiamo anche inviare i dati compilati di un form in modo asincrono:
$.post("test.php", $("#testform").serialize());
API per lo scambio di dati asincrono in jQuery:
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/jQuery.post/
jQuery.validate
Plugin per jQuery per la validazione client side dei dati immessi in un form.
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
•
Permette di verificare che un dato sia stato inserito, l’eguaglianza di due campi, il
formato del testo inserito, etc.
•
Permette di validare un campo sul server in modo asincrono prima del submit.
$("#modulo").validate(
validateNickname.php?nickname=mynickname
{
rules: {
nickname: { required: true, remote: 'validateNickname.php'},
password: "required",
conferma: { required: true, equalTo: "#password" },
email: { required: true, email: true }
},
messages: {
nickname: { required: " Scegli un nickname!", remote: "Username non disponibile"},
email: " Inserisci un indirizzo email valido!"
}
});
<form id="modulo" method="post" action="script.asp">
Nickname<input type="text" id="nickname" name="nickname"><br>
Password<input type="password" id="password" name="password"><br>
Conferma la password<input type="password" id="conferma" name="conferma"><br>
Email<input type="text" id="email" name="email"><br>
<input type="submit" value="
Invia i dati
">
</form>
Documentation: http://docs.jquery.com/Plugins/validation
jQuery

jQuery is a JavaScript Library.

jQuery greatly simplifies JavaScript programming.

jQuery is easy to learn.
LINK UTILI:
 http://jquery.com/
 http://www.w3schools.com/jquery/default.asp