Lezione 09 (aa 2015-2016)

I FRAMEWORK JAVASCRIPT

Nella produzione del software, il framework è una struttura di supporto su cui un software può essere organizzato e progettato.

Lo scopo di un framework è di risparmiare allo sviluppatore la riscrittura di codice già steso in precedenza per compiti simili.

In altre parole utilizzando un framework lo sviluppatore può dedicare meno tempo alla scrittura del codice e più tempo alla progettazione e al raggiungimento degli obiettivi.

jQuery

jQuery ha due vantaggi principali:

superare uno dei problemi che maggiormente complica la vita agli sviluppatori: la compatibilità tra le varie versioni dei browser
rendere lo script più compatto: scrivi di meno, fai di più.

USARE jQuery

La sviluppo di jQuery da parte della jQuery fundation prosegue su due versioni:

jQuery 1.x che garantisce la compatibilità con le versioni del Browser Microsoft precedenti a IE 9.
jQuery 2.x compatibile solo con le versioni di IE successive alla 9.

INSERIRE JQUERY IN UNA PAGINA

I file sono disponibili in versione production (compressa) e in versione development (non compressa):

La versione development è la versione in chiaro, con i commenti degli sviluppatori, adatta per il debug, la didattica e lo sviluppo
La versione production è notevolmente più compatta ed è adatta solo per la distribuzione

La versione compressa (minified) è contraddistista dal suffisso .min.

JQUERY SU CDN

Un certo numero di grandi imprese mettono a disposizioni copie di jQuery su CDN (Content Deployment Network) pubblici:

Google Ajax API CDN
Microsoft CDN
jQuery CDN

Codice HTML da inserire per caricare jQuery 2.x dal code.jquery.com (versione compressa)

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256- a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>

Codice HTML da inserire per caricare jQuery 2.x dal code.jquery.com (versione compressa)

<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256- aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>

Per caricare l'ultima release stabile di jQuery è si può aprire la pagina: https://code.jquery.com

Scegliere la versione e clickare il link corrispondente. Si apre un piccola dialog box che consente di copiare il codice da inserire nella pagina HTML.

Quando si usa un CDN per caricare jQuery (soluzione consigliata) il vostro sito in fase di sviluppo funzionerà solo se siete collegati a internet. Per evitare questo problema si può inserire questo codice dopo il codice che carica jQuery:

<script type="text/javascript">

   var scriptpath = //inserisci l'url di jQuery sul tuo sito 
   if (!jQuery){
       document.write('<script src="' + scriptpath + '" <\/script>');
   }

</script>

INIZIALIZZAZIONE

La libreria jQuery è costituita da codice che viene eseguito non appena caricato e che:

Crea un oggetto jQuery che diventa un'oggeto globale
Crea una funzione globale jQuery che è il cuore della libreria
Crea un alias per entrambe che è il segno del dollaro

jQuery = $

COSA FA jQuery

Modifica degli elementi DOM:

Aggiunge ai metodi nativi degli elementi che compongono il DOM nuovi metodi che consentono di modificarli con maggiore facilità
Aggiunge metodi che consentono di scrivere codice più compatto.

Interattività:

aggiunge nuovi eventi
rende più flessibile la gestione degli eventi

Semplifica la creazione di nuovi elementi da aggiungere al DOM

Consente di utilizzare le migliaia di plugin recuperabili su Internet.

L'EVENTO READY

In jQuery tutti i comandi devono essere eseguiti quando il DOM è completamente caricato e jQuery è correttamente inizializzato.

Per ottenere questo ogni comando di jQuery va inserito in questo blocco:

$(document).ready( function() {
    // Il codice jQuery va
    // inserito qui
});

O, in versione compatta, semplicemente:

```
$(function() {
   // Codice jQuery
});
```

Per capire meglio. Ho una funzione globale:

```
$(); //jQuery();
```

Che per concisione è sinonimo di:

```
$(document).ready();
```

Scrivendo $(document) ho trasformato document in un oggetto jQuery, gli ho aggiunto, cioè i metodi dell'oggetto jQuery. Tra questi metodi c'è il metodo ready che mi consente di associare un blocco di codice all'evento ready che jQuery genera per document quando questo è completamente caricato e jQuery correttamente inizializzato.

Per farlo passo una funzione anonima, cioè un blocco di codice eseguibile, come paramentro al metodo .ready() .

```
$(function(){//blocco comandi});
```

Ma posso usare anche una funzione con nome:

function documentoPronto() {
    //corpo funzione
}

E passare come parametro il nome della funzione:

```
$(document).ready(documentoPronto);
```

IL DOLLARO $

la funzione $() (che sostituisce per concisione jQuery()) è la funzione principale. Può avere varie combinazioni di parametri:

$(funzione);
$(elemento);
$(selettore css);
$(selettore css, contesto);
$(codice html);

$( function() {
    // Codice eseguibile
});

Associa l'esecuzione di un blocco di codice all'evento ready di $(document).

$(elemento);

Restituisce un oggetto jQuery, costituito da un unico item, costruito su un elemento del dom. Esempio:

```
var $win = $(window);
```

$win è l'oggetto jQuery costruito sull'elemento window a cui, quindi, sono stati aggiunti i metodi jQuery.

$(selettore, [contesto]);

Restituisce un oggetto jQuery, costituito da tutti gli item individuati da un selettore css, opzionalmente limitato a un contesto. Esempi:

var $collezione = $('.blu');
var $myInput = $('intput[type="text"]', 'form#myForm');

$collezione raccoglie tutti gli elemti ch hanno la classe blu.

$myInput raccogli tutti gli input con type = "text" nel form con id "myForm".

$(html);

Restituisce un oggetto jQuery, costituito da un unico item, corrispondente al'html passato come paramentro. Esempio:

var $image = $('<img src="logo.png" />');

$image è un oggetto jQuery costruito su un nuovo elemento img creato da jQuery.

RICERCA DI ELEMENTI

Il modo più classico di procedere di jQuery è quello di "selezionare alcuni elementi ed eseguire azioni su di essi."

La selezione avviene passando alla funzione $():

Un stringa che rappresenta un selettore CSS
Un elemento del DOM (ad esempio document o window)

Selezione degli elementi in base alla loro ID

$('#myid') / / L'ID deve essere univoco

Selezione degli elementi in base al nome della classe

$('.myClass')

Selezione degli elementi in base a un attributo

$ ( 'input[name="first_name"]' )

Selezionare gli elementi in base a un selettore CSS

$ ( '#contenuti ul.people li' );

47 PSEUDO-SELETTORI

$('a.external:first'); // primo elemento <a>

// con classe 'external'

$('tr:odd'); // elementi <tr> dispari in

// una tabella

$('#myForm :text'); // tutti gli elementi input di

// tipo text in #myForm

$('div:visible'); // tutte le div visibli

$('div:gt(2)'); // seleziona tutte le div

// eccetto le prime tre

$('div:animated'); // tutte le div animate

La funzione $() restituisce un oggetto di tipo jQuery.

L'oggetto jQuery può rappresentare il set degli elementi trovati o un unico elemento.

Per controllare se la ricerca ha prodotti risultato deve controllare la proprietà length dell'oggetto jQuery restituito.

if ($('div.foo').length > 0) { ... }

PSEUDO SELETTORI FORM

:button Seleziona elementi <input> con l'attributo type='button'

:checkbox Seleziona elementi <input> con l'attributo type='checkbox'

:checkedSeleziona elementi <input> selezionati

:disabled Seleziona elementi disabilitati

:enabled Seleziona elementi abilitati

:file Seleziona elementi <input> con type='file'

:image Seleziona elementi <input> con type='image'

:input Seleziona elementi <input>, <textarea> y <select>

:password Seleziona elementi <input> con type='password'

:radio Seleziona elementi <input> con type='radio'

:reset Seleziona elementi <input> con type='reset'

:selectedSeleziona elementi <options> selezionati

:submit Seleziona elementi <input> con type='submit'

:text Seleziona elementi <input> con type='text'

LAVORARE CON LE SELEZIONI

Una volta ottenuto un set di componenti in base alla selezione, si possono utilizzare i metodi dell'oggetto jQuery.

Gli oggetti jQuery non hanno proprietà direttamente accessibili escluso length

I metodi si dividono in due categorie: getter e setter.

i metodi getter restituiscono una proprietà dell'elemento selezionato,
i metodi setter di impostano una proprietà di tutti gli elementi del set restituito.

CHAINING

Ogni metodo jQuery restituisce l'oggetto jQuery su cui il metodo ha operato. Questo rende possibilie il concatenamento tipico della scrittura javascript di jQuery:

$('#content')
   .find('h3')
   .eq(2)
   .html('nuovo testo per il terzo h3');

GETTERS e SETTERS

I metodi per impostare un valore hanno lo stesso nome dei metodi per ottenere un valore.

Ciò che differenzia il metodo setter dal corrispondente getter è il parametro in più costituito dal valore a da impostare:

$ ('H1').html( 'ciao mondo' );
$ ('H1').html();

STILI CSS

Per ottenere o modificare lo stile css di un elemento (o di un set di elementi) ho il metodo .css:

Getter;

$ ( 'H1' ). css ( 'fontSize' ) / / restituisce"19px"
$ ( 'H1' ). css ( 'font-size' ) / / funziona

Setter

$('h1').css('fontSize', '100px');
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' });

CLASSI CSS

Anche se molto utile, il metodo .css non dovrebbe essere usato per applicare direttamente stili agli elementi (si può fare direttamente da CSS). È meglio usare CSS per definire classi e applicare queste agli elementi a secondo delle nostre necessità.

var $h1 = $('h1');
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');
if ($h1.hasClass('big'))  { 
    ... 
};

DIMENSIONI

jQuery offre una varietà di metodi per ottenere e impostare le dimensioni e la posizione di un elemento.

$('h1').width('50px'); // imposta la larghezza di tutti gli elementi H1

$('h1').width(); // ottiene la larghezza di tutti gli elementi H1

$('h1').height('50px'); // imposta l'altezza di tutti gli elementi H1

$('h1').height(); // ottienel'altezza di tutti gli elementi H1

$('h1').position(); // restituisce un oggetto contenente
                    // informazioni sulla posizione
                    // del primo elemento H1 relativo all'offsett
                    // del suo elemento padre

ATTRIBUTI

Il metodo attr() ha una sintassi simile a css ma ottiene e imposta gli attributi di un elemento anziché lo stile:

Setter:

$('a').attr('href', 'hrefTuttiUguali.html');

$('a').attr({
  'title' : 'tutti lo stesso title', 
  'href' : 'laStessaUrl.html'
});

Getter

$('a').attr('href'); //restituisce href del primo elemento

ALTRI GETTER-SETTER

.html()

Ottiene o imposta il contenuto HTML di un elemento.

.text()

Ottiene o imposta il contenuto testuale dell'elemento, nel caso un testo contenga tag HTML, questi vengono rimossi.

.val()

Ottiene o imposta il valore (value) di elementi di un form.

GLI EVENTI

elemento.onclick è una proprietà:

btnEvidenzia.onclick = function() {
    //comandi
}

$().click() è un metodo:

$('#btnEvidenzia').click(function() {
    //comandi
});

Con l'evento elemento.onclick assegno un'unica funzione all'evento.

Con il metodo .click() aggiungo una funzione all'evento.