Strumenti per lo sviluppo Librerie Javascript jquery script.aculo.us Componenti aggiuntivi per i browser firefox e chrome Firebug Web developer
Alcune utility on-the-fly Generatore di sorgente di codice da mettere in una pagina html: http://quickhighlighter.com/ Sito in cui si possono provare al volo i comandi appresi, siano essi CSS HTML o JAVASCRIPT: http://www.w3schools.com/
Le Estensioni dei browser Sono degli utility non indipendenti che si integrano con il browser per cui sono fatti (e.s Firefox e Chrome su tutti) Aggiungono funzioni specifiche che il browser non possiede Scarico video in streaming > DownloaderHelper Cancellazione della cache del browser >ClearCache Sincronizzazione dei bookmarks > Xmarks Analisi e debug delle pagine web > Firebug / Web developer Svantaggi: Rendono più lento il caricamento del browser Spesso non sono compatibili con le nuove versioni dei browser
Firebug http://getfirebug.com Potente estensione OPEN SOURCE che permette di : Fare il debug delle pagine web anche passo a passo Monitorare gli errori Modificare il contenuto Css, html, DOM, javascript, xml.. della pagina Monitorare il caricamento delle pagine con la funzione NET, che illustra la durata dei caricamento dei singoli pezzi (swf, jpg...) e lo script utilizzato Cercare un elemento digitandone il nome Analizzare al volo un qualsiasi elemento della pagina dal menù del tasto destro del mouse
Web developer https://addons.mozilla.org/it/firefox/addon/60/ Web developer è una toolbar che si aggiunge alla barra degli strumenti del browser e che nasconde una lunga serie di comandi e funzioni di analisi delle pagine web. Le modifiche saranno applicate a tutte le pagine del browser. Si integra ai comandi anche al tasto destro del mouse Permette di attivare e disattivare proprietà della pagina visualizzare ogni singolo file o gruppo di file dalla pagina su una nuova finestra Modificare e controllare i dati personali
La libreria jquery Si tratta di una libreria javascript cross-browser, free e open source. Serve per velocizzare e facilitare la scrittura di script clientside: Selezionare e modificare elementi del DOM Manipolare CSS Creare animazioni ed effetti Gestire Eventi È probabilmente il framework più utilizzato, per esempio da Google, DELL, digg, NBC, CBS, mozilla.prg, wordpress La documentazione per le API: http://api.jquery.com/
La libreria jquery jquery è formato da un unico file javascript, contenente tutto il pacchetto. Deve essere incluso nella pagina html in uso nel solito modo, dentro il tag HEAD: <script type="text/javascript" src="jquery.js"></script> Per alterare gli elementi delle pagine si fa riferimento all'oggetto principale, di tipo jquery, tramite il carattere $ Es.: fare un fade out ai DIV del documento: $("div").fadeout()
La libreria jquery <head> }); Jquery gestisce l'evento ready, da utilizzare al posto del solito onload dell'oggetto window <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function () { $("p").text("the DOM is now loaded and can be manipulated."); </script> </head> <body> <p>not loaded yet.</p> </body>
jquery come selettore $("#header") > restituisce l'elemento con id="header", come il comando getelementbyid $("h3") > prende tutti gli elementi di tipo H3 $("div#content.photo") > restituisce un array degli elementi con class="photo" dentro <div id="content"> $("ul li") > restituisce un array degli elementi <li> dentro tutti gli <ul>
jquery come selettore $("ul li:first") >prende solo il primo elemento <li> degli <ul> $("ul li:nth-child(2)") >prende solo il secondo elemento <li> degli <ul> $("ul li:nth-child(even)") > prende solo i figli di posizione pari degli <ul>
jquery come modificatore $("div h1").addclass("colore_rosso") > attribuisce la proprietà colore_rosso all'elemento h1 di tutti i div $("div h1:first").html( Testo nuovo ) > Sostituisce al primo elemento H1 dei div il testo Testo nuovo $("p").append(" Testo aggiunto") > aggiunge alla fine del paragrafo la stringa di testo Testo aggiunto
Altri esempi di uso di $ $(document.createelement('ul')) > crea un elemento di tipo ul $('a.subject').click (function () {... }); > gestisce gli eventi $("div")fadein(200) > animazione di fadein sui div $.browser.version > rileva la versione (numero) del browser (es. 1.9.2.3) $.browser.mozilla > restituisce TRUE se si è dentro firefox
Scorciatoie con jquery Jquery però permette di ridurre notevolmente il codice. Es.: la tabella a caselle zebrate. Invece di colorare una a una le caselle basta richiamare il comando: $("table tr:nth-child(even)").addclass("zebra"); Il comando passerà a ogni casella ( tr ) di posizione pari (EVEN) della tabella la nuova proprietà di stile che abbiamo definito come zebra : <style type="text/css"> tr.zebra { background-color: gold; color: #ffffff; } </style>
Scorciatoie con jquery E per quanto riguarda gli eventi del mouse, invece di passare tutti gli elementi della tabella con un ciclo for e attribuire la modifica dello stile nel ciclo, si può fare così: $("tr").mouseover(function() { $(this).addclass( css_rollover ); }).mouseout(function(){ $(this).removeclass("css_rollover"); }); Ovvero al mouseover su ogni elemento tr si attiva la proprietà css css_rollover, che viene tolta al rollout. VERSIONE ALTERNATIVA: $("tr").hover( function () { $(this).addclass( css_rollover ); }, function () { $(this).removeclass("css_rollover"); } );
Animazioni con jquery Se ho un div con un rettangolo posso, per esempio, modificarne le dimensioni in x e y, decidendo la durata dell'animazione e aggiungerci funzioni in chiusura: $("div:first").animate({ height: "20px", width: "10px", }, 1000, function() { alert('done!'); }); Esistono anche dei plug-in aggiuntivi per decidere il tipo di transizione dell'animazione come questo http://gsgd.co.uk/sandbox/jquery/easing/
Break pausina veloce...
Form con jquery jquery gestisce una moltitudine di tipi di eventi, per esempio il focus su un campo di testo: $("input").focus(function () { <!-- codice da eseguire al focus--> }); E la pressione del campo di testo di tipo submit $("form").submit(function() { <!-- codice da eseguire alla pressione del tasto--> }
Pannelli a scomparsa Un comando interessante per le animazioni è il toggleclass, che fa scorrere in altezza un qualsiasi elemento, facendolo scomparire e riapparire: $("div").slidetoggle("slow"); L'elemento animato può contenere altri elementi che verranno di conseguenza nascosti/visualizzati, creando un interessante effetto a scomparsa
Alcuni tutorial interessanti Gallery scorrevole con testo http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-acces Menu fatto di immagini che scorrono al movimento del mouse: http://valums.com/wp-content/uploads/2009/02/menu/final.htm
La libreria script.aculo.us La libreria è formata da una serie di file javascript. Devono essere inclusi nella pagina html in uso nel solito modo, dentro il tag HEAD: <script src="scr/prototype.js" type="text/javascript"></script> <script src="src/scriptaculous.js" type="text/javascript"></script> L'oggetto principale, che serve per elaborare il documento html, fa riferimento sempre al carattere $
La libreria script.aculo.us Un esempio di effetto di fade out (scomparsa): new Effect.Fade('id_elemento_scelto'); oppure $('id_elemento_scelto').fade(); Un esempio di effetto di fade in con una durata di 3 secondi e opacità finale di.7 (70%): $('id_elemento_scelto').appear( duration: 3.0, to:0.7 });
La libreria script.aculo.us L'esempio su un div: <body> <div id="fade_demo" onmouseout="$(this).appear({ duration: 2, to: 0.7 });" onmouseover="$ (this).fade({ duration: 2, to: 0.3});" style="display:false; width:80px; height:80px; background:#c2defb; border:1px solid #333;"> </div> </body>
Uso di più librerie: script.aculo.us + jquery Le librerie sono ovviamente compatibili e possono essere usate assieme. Ma come fa il browser a capire a quale quando usare script.acuolo.us e quando jquery se entrambi usano l'oggetto $? Semplice: non lo sa. La tecnica richiede di usare al posto della $ di jquery proprio l'oggetto jquery. In alternativa si può rinominare l'oggetto $ con uno nuovo. Per esempio: var $j = jquery; $j( div ).fadeout(); Link di spiegazione per jquery http://docs.jquery.com/using_jquery_with_other_libraries
Riassumendo.. Fate un po' di prove con le libreria jquery partendo da cose piccole e poi cercate di integrarla con le vostre pagine. Consultate le api che sono ricche di informazioni ed esempi: http://api.jquery.com/ Estensioni firebug e web developer: scaricatele e provatele con le vostre prove. Si avanza tempo o siete curiosi date un occhio anche alla libreria script.aculo.us
The end. Grazie della partecipazione, esercitatevi a casa. La ripetizione fa il maestro. ^_^