Come si usa JQuery

La struttura di una pagina web è costituita da tre parti fondamentali che devono rimanere distinte:

Il markup ovvero la struttra semantica ed il DOM del documento.
La formattazione: ovvero il CSS
I comportamenti: il linguaggio capace di intercettare le interazioni dell'utente e di agire di conseguenza. Javascript appunto.

Ecco un esempio di struttura di un estratto da Alice nel paese delle Meraviglie

Le cose importanti:

Prima viene caricata la pagina HTML, poi il CSS, poi i file JS

<link rel="stylesheet" href="../../css/default.css" type="text/css" media="screen" /> <link rel="stylesheet" href="alice.css" type="text/css" media="screen" /> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script src="alice.js" type="text/javascript"></script>"

Il link alla libreria deve essere messo prima di un link ad un eventuale altro script dove se ne fa uso, altrimenti non può funzionare

<script src="../../scripts/jquery.js" type="text/javascript"></script> <script src="alice.js" type="text/javascript"></script>

Stiamo scrivendo del codice JS per fare qualcosa che avremmo potuto fare benissimo con i CSS, ma per capire come funziona:

Questo è il nostro file: <script src="alice.js" type="text/javascript"></script>

Qua andiamo a scrivere:
```
$(document).ready(function() {

$('.poem-stanza').addClass('emphasized');

});
```
L'operazione principale per JQuery ed ogni libreria javascript è individuare il mio target, cioè l'elemento del DOM su cui voglio agire.

Lo posso fare con la funzione dollaro $() che in JQuery può ricevere come parametro in ingresso il nome di una classe: nel nostro caso '.poem-stanza'. La funzione dollaro è una funzione detta 'factory', nel senso che una sua chiamata crea un oggetto su cui posso chiamare altri metodi.

Nel nostro caso stiamo applicando all'elemento una nuova classe: 'emphasized'.

Da notare come non abbiamo avuto bisogno di alcuna iterazione per appicare lo stile a più elementi.

Esiste anche un metodo '.removeClass()'.

In una pagina HTML, la reference ad un file javascript va nell'HEAD della pagina: ciò significa che nel momento in cui vengono eseguite le nostre funzioni gli elementi del DOM HTML non sono ancora stati caricati. Dunque non ci sarebbero soggetti per le nostre azioni.

Qui ci viene in aiuto il concetto di event handler, cioè i gestori d'evento: sono delle funzioni in grado di capire quando si verifica un certo evnto sulla pagina. Nel nostro caso quando il browser ha finito il caricamento di tutto l'HTML.

Nel vecchio stile javascript ci saremmo serviti del gestore 'onload' che veniva applicato inline al BODY della pagina:
```
<script type="text/jscript"> 


function emphasizePoemStanzas() {

  $('.poem-stanza').addClass('emphasized');

  }
  
  


  </script>
  

  

<body onload="emphasizePoemStanzas();">
```
Ma così avremmo mischiato codici che appartengono ad ambiti diversi: semantica ed interazione. Inoltre questo codice non sarebbe facilmente aggiornabile per siti con tantissime pagine

JQuery ci viene in aiuto con il gestore d'evento .ready() al cui interno è definita una funzione anonima:
$(document).ready(function() { $('.poem-stanza').addClass('emphasized'); });
che equivarrebbe a scrivere:
function emphasizePoemStanzas() {<br /> $('.poem-stanza').addClass('emphasized');<br /> } $(document).ready(emphasizePoemStanzas);
all'interno del file js 'alice.js'.