docp - Gabriele Ruscelli
download 
Reclamo Transcript
p - Gabriele Ruscelli
jQuery
come utilizzare javascript senza troppi problemi
Queste slide
Queste slides fanno parte del corso “Web Design II & HTML II”.
Il sito del corso, con il materiale completo, si trova in http://www.gabrieleruscelli.com .
Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno.
Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione - Non
commerciale - Condividi allo stesso modo – 3.0” (http://creativecommons.org/licenses/
by-nc-sa/3.0/it/deed.it ):
La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui
diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati.
L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.
Introduzione
jQuery è una libreria di funzioni (un cosiddetto software framework) javascript, cross-browser per le applicazioni web, che si propone come obiettivo
quello di semplificare la programmazione lato client delle pagine HTML.
wikipedia
Grazie a jQuery è possibile scrivere poche righe
di codice per richiamare tantissime funzioni javascript.
documentazione
per iniziare....
per i designer..
http://jquery.com
http://jqueryui.com
http://www.jqueryrain.com
alcuni esempi sono stati presi da questi libri
manuale completo
perchè jQuery?
-manipolazione di HTML/DOM e CSS
– metodi per eventi HTML
– effetti e animazioni
– supporto a programmazione AJAX
-è diffuso, testato e manutenuto
– open source
– compatto (meno di 100kb, se compresso)
– può essere esteso con una serie di plugin di vario genere
perchè jQuery?
Differenze
codice scritto con javascript
codice scritto con jQuery
screen presi da wikipedia
jQuery - primi passi
1- scaricare da http://jquery.com l’ultimo file aggiornato jquery
2- fare una cartellina nuova chiamandola js
3- inserire nell’head un link che richiama il file scaricato
<script type=”text/javascript” src=”js/jquery-1.7.1.min.js”>
</script>
4- iniziare a scrivere codice javascript nel proprio file HTML
HTML e jQuery
È possibile implementare codice jQuery in diversi parti:
-All’interno di head nella pagina HTML
-All’interno di body a fine pagina HTML prima della chiusura
del tag </body>
-Creando un file nuovo *.js e richiamarlo nella head, ES:
<head>
<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/script_mio.js” type=”text/javascript”></script>
</head>
jQuery struttura
Parte iniziale, richiama la funzione jQuery
Selettore. In questo
caso sta puntando ad
un tag HTML “a”
chiudi la seconda
funzione
$(document).ready(function() {
$(“a”).click(function(event) { alert(“ciao!”);
event.preventDefault();
});
});
Istruzione legata al selettore “a”.
L’istruzione si chiama: click.
Se click “a” allora crea una funzione nuova.
chiudi la prima
funzione
La funzione nuova è
un alert.
L’alert comunicherà:
ciao!
NB. se questo pezzo di codice viene inserito dentro head o dentro
body deve essere all’interno del tag <script></script>.
selettori
Per poter collegare gli script a degli elementi presenti nella pagina
HTML si necessita di un selettore e/o un filtro. Questo permette di far
agire jQuery a un determinato box, tag etc.. etc..
La sintassi di un selettore è determinata dalla struttura HTML e dai sui
tag, classi o id; saranno proprio questi che ci serviranno per collegare
i nostri script.
Selettori classici
Selettori multipli
Selettori discendenti
Selettori gerarchici
$(‘p’)
$(‘.classe’)
$(‘#id’)
$(‘ul li a’)
$(‘.classe1 .colore’)
$(‘#id #id_piccolo’)
$(‘p, h1, a’)
$(‘.classe1, .classe2, .classe3’)
$(‘#id, #id2’)
$(‘p > a’)
$(‘.classe1 + .classe2’)
$(‘#id ~ #id2’)
Filtri
I filtri permettono un ulteriore “ricerca e filtraggio” di qualsiasi elemento dentro un documento HTML, tuttavia sono più lenti rispetto ai selettori primari.
alcuni filtri:
$(‘:button’)
$(‘:checkbox’)
$(‘:input’)
$(‘:animated’)
$(‘:checked’)
$(‘:focus’)
$(‘:first-child’)
$(‘:last-child’)
$(‘:odd’)
Uso
$(‘:button’)
$(‘*:button’)
$(‘#id’).filter(‘:button‘)
$(‘form input:button‘)
Primi script 1
impostare una semplice pagina html con un paragrafo
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
lo script che scriveremo servirà a contare le parole del paragrafo
$(document).ready(function() {
var count=$(“p”).text().split(‘’).length;
alert(“numero parole:”+ count);
});
Primi script 2
Inseriamo un tag “a” nel codice a questo gli assoceremo una funzione
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href=”#”>clicca</a>
</body>
Cliccando “a” si scatenerà la funzione alert con scritto “hello world!”
$(document).ready(function() {
$(“a”).click(function(event) {
$(“p”).addClass(“evidenziato”);
event.preventDefault();
});
});
addClass 3
Creiamo una classe nei css “colore” e la associamo al paragrafo.
.colore{background-color: fuchsia;}
<p class=”colore”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
<a href=”#”>clicca</a>
seguendo la stessa logica dell’esempio precedente associamo la
nostra classe al click
$(document).ready(function() {
$(“a”).click(function(event) {
$(“p”).addClass(“colore”);
event.preventDefault();
});
});
});
removeClass 4
Creiamo una classe nei css “sottolineato” e la associamo al paragrafo.
.sottolineato{text-decoration: underline;}
<p class=”colore sottolineato”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
<a href=”#”>clicca</a>
Al contrario di addClass questa proprietà si occupa di cancellare una
classe già esistente. In questo caso “sottolineato” associata precendentemente.
$(document).ready(function() {
$(“a”).click(function(event) {
$(“p”) .removeClass(“sottolineato”)
event.preventDefault();
});
});
toggleClass 5
per far si che quando c’è si cancella e quando non c’è si attiva....
$(document).ready(function() {
$(‘a’).click(function(event) {
$(‘p’).toggleClass(“colore”)
event.preventDefault();
});
});
animazioni jQuery 1
jQuery offre diversi una serie di animazioni predefinite che possono
essere manipolate per creare animazioni complesse.
NB. attenzione toggle è diversa dalla funzione toggleClass
$(document).ready(function() {
$(‘a’).click(function(event) {
$(‘p’).toggle(‘slow’);
event.preventDefault();
});
});
animazioni jQuery 2
Le principali funzioni di animazioni si suddividono in 3 macro gruppi:
Mostrare o Nascondere: .hide() .show() .toogle()
Scorrimento: .slideDown() .slideUp() .slideToggle()
Dissolvenza: .fadeIn() .fadeOut() .fadeTo() .fadeToggle()
animazioni jQuery 3
Ognuni funzione può ammettere dei valori per settare l’animazione.
sintassi per tutte le funzioni
.hide(duration [, callback])
.hide([duration] [, easing] [, callback])
sintassi solo per queste funzioni
.toggle(showOrHide)
.fadeTo(duration, opacity [, easing] [,callback])
Duration: durata dell’animazione (fast, slow, millisecondi)
Callback: serve per concatenare le animazioni seguendo il DOM.
Easing: curva dell’animazione https://jqueryui.com/easing/
showOrHide: non considera lo stato attuale di visualizzazione
dell’elemento, se è visibile si può nascondere e viceversa.
Opacity: valore di opacità (da 0 a 1)
animazioni jQuery 4
È possibile implementare animazioni diverse da quelle offerte dalle
funzionalità di base precedentemente descritte. Per fare ciò si utilizza
la funzione .animate() integrandola con parametri CSS.
NB non tutte le proprietà CSS sono animabili.
.animate(properties [, duration] [,easing] [,complete])
Complete: termine dell’animazione
$(document).ready(function(){
$(‘#animate1’).click(function(){
$(‘#content’).animate(
{‘border-width’: 5,
height: 10});
});
$(‘#animate2’).click(function(){
$(‘#content’).animate(
{width: 10},
‘slow’);
});
});
Esercizi 1
Creare una barra che informa gli utenti che il sito utilizza i cookies.
1° step: usare HTML e CSS per la costruzione e lo stile;
2° step: usare jQuery per implementare la funzione che permette il
box di scomparire.
Esercizi 2
Creare un sistema di filtraggio che permetta l’eliminazione di alcuni
colori una volta cliccato il nome.
NB attenzione ai nomi degli id dei blocchi e dei bottoni
