jquery come utilizzare javascript senza troppi problemi

Транскрипт

1 jquery come utilizzare javascript senza troppi problemi

2 Queste slide Queste slides fanno parte del corso Web Design II & HTML II. Il sito del corso, con il materiale completo, si trova in 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 ( 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.

3 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.

4 documentazione per iniziare... per i designer.. manuale completo alcuni esempi sono stati presi da questi libri

5 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

6 perchè jquery? Differenze codice scritto con javascript codice scritto con jquery screen presi da wikipedia

7 jquery - primi passi 1- scaricare da 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 min.js > </script> 4- iniziare a scrivere codice javascript nel proprio file HTML

8 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>

9 jquery struttura Parte iniziale, richiama la funzione jquery Selettore. In questo caso sta puntando ad un tag HTML a $(document).ready(function() { $( a ).click(function(event) { alert( ciao! ); event.preventdefault(); chiudi la seconda funzione chiudi la prima funzione Istruzione legata al selettore a. L istruzione si chiama: click. Se click a allora crea una funzione nuova. 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>.

10 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 $( p ) $(.classe ) $( #id ) Selettori discendenti $( ul li a ) $(.classe1.colore ) $( #id #id_piccolo ) Selettori multipli $( p, h1, a ) $(.classe1,.classe2,.classe3 ) $( #id, #id2 ) Selettori gerarchici $( p > a ) $(.classe1 +.classe2 ) $( #id ~ #id2 )

11 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 ) Uso $( :button ) $( *:button ) $( #id ).filter( :button ) $( form input:button ) $( :first-child ) $( :last-child ) $( :odd )

12 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);

13 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();

14 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();

15 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();

16 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();

17 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();

18 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()

19 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 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)

20 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 );

21 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.

22 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