Benvenuti

Indice

jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che quando hai finito di leggere, sarai in grado di eseguire operazioni di base utilizzando jQuery e avere una solida base per un apprendimento ulteriore. Il libro è stato progettato per essere utilizzato come materiale in un’aula di classe, ma può anche essere utile per lo studio individuale.

Il metodo di lavoro è il seguente: in primo luogo, si dedicherà del tempo per capire un concetto per poi fare un esercizio correlato. Alcuni degli esercizi possono anche essere banali, mentre altre non lo sono. L’obiettivo è quello di imparare a risolvere in maniera semplice, ciò che normalmente si risolverebbe con jQuery. Soluzioni per tutti gli esercizi sono inclusi nello stesso materiale d’apprendimento.

Ottenere il materiale didattico
⤽
Il materiale didattico e il codice sorgente degli esempi citati nel libro sono ospitati sulla repository GitHub . Da qui è possibile scaricare un file in formato .zip o .tar con il codice per l’uso su un server web.
Software
⤽
Per lavorare con i contenuti del libro, saranno necessari i seguenti strumenti:

  • Firefox Browser Web
  • L’estensione Firebug per Firefox
  • Un editor di testo (come Notepad + + per Windows, gedit / Kate TextMate per Linux o Mac OS X)
  • Per le sezioni su Ajax: un server locale (come WAMP o MAMP) o un client FTP/SSH per accedere a un server remoto.
Aggiungere JavaScript in una Pagina
⤽
Ci sono due modi per inserire del codice JavaScript all’interno di una pagina: scrivendo il codice nella stessa linea (in lingua inglese inline) o tramite un file esterno utilizzando il tag script. L’ordine in cui s’include il codice è importante: un codice che dipende da un altro dovrebbe essere incluso dopo di quello che fa riferimento (Esempio: Se la funzione B dipende dalla A, l’ordine deve essere A, B e non B, A).

Per migliorare le prestazioni della pagina, il codice JavaScript deve essere incluso alla fine del HTML. Inoltre, quando si lavora in un ambiente di produzione con più file JavaScript, devono essere combinati in un unico file.

1.1: Esempio di codice JavaScript in linea
⤽
<script>
console.log('ciao');
</script>
1.2: Esempio d'inclusione di un file esterno JavaScript
⤽
<script src='/js/jquery.js'></script>
Debugging del codice JavaScript
⤽
L’uso di uno strumento di debug è essenziale per lavorare con JavaScript. Firefox fornisce un debugger tramite l’estensione Firebug, mentre Safari e Chrome hanno un sistema integrato.

Ogni debugger offre:

  • Un editore multi-line per sperimentare con JavaScript;
  • Un ispettore per rivedere il codice generato nella pagina;
  • Un visualizzazione di rete o risorse, di esaminare le richieste che vengono fatte.

Quando si scrive codice JavaScript, è possibile utilizzare uno dei seguenti metodi per inviare messaggi alla console del debugger:

  • console.log() per inviare e registrare messaggi generali;
  • console.dir() per registrare un oggetto e visualizzarne le proprietà;
  • console.warn() per registrare messaggi di alert;
  • console.error() per registrare i messaggi di errore;

Esistono altri metodi per utilizzarli dalla console, ma questi possono variare a seconda del browser. La console offre inoltre la possibilità di impostare punti d’interruzione e osservare le espressioni nel codice per facilitare il debug.

Esercizi
⤽
La maggior parte dei capitoli concludono con uno o più esercizi. In alcuni si potrà lavorare direttamente con Firebug, in altri sarà necessario scrivere il codice JavaScript dopo d’includere la libreria jQuery nel documento.

Anche così, per completare alcuni esercizi, sarà necessario consultare la documentazione ufficiale di jQuery. Imparare a trovare le risposte è una parte importante del processo di apprendimento.

Ecco alcuni suggerimenti per affrontare i problemi:

  • Per prima cosa, assicurarsi di aver compreso il problema si sta tentando di risolvere.
  • Poi, sapere a quali oggetti si dovranno accedere per risolvere il problema e decidere come accedervi. È possibile utilizzare Firebug per verificare se si sta ottenendo il risultato atteso.
  • Infine, scoprire cosa deve essere fatto con questi elementi per risolvere il problema. Può essere utile prima di iniziare, scrivere commenti che spiega cosa dovrà fare.

Non abbiate paura di sbagliare. E neanche provare, al primo tentativo, di scrivere un codice perfetto. Commettere errori e sperimentare soluzioni fa parte del processo di apprendimento e aiuterà a essere uno sviluppatore migliore. È possibile trovare nella cartella /solutions esempi di soluzioni agli esercizi del libro.

Convenzioni utilizzate nel libro
⤽
I metodi che possono essere chiamati dall’oggetto jQuery, faranno riferimento come $.fn.nomreDelMetodo. I metodi che esistono nello spazio dei nomi (namespace in inglese) di jQuery, ma che non possono essere chiamati dall’oggetto jQuery, faranno riferimento come $.nomeDelMetodo. Se questo non significa molto per ora, non si preoccupi – sarà più chiaronel procedere del libro.
1.3: Un codice di esempio
⤽
// Il codice di esempio apparirà in questo modo

I richiami appariranno in questo modo.

Le note su qualche tema appariranno di questa forma.

Note sulla traduzione
⤽
  • Perché il materiale ha lo scopo di apprendimento e di insegnamento, è tradotto in italiano formale (voi).
  • Molti termini tecnici sono nominati nella sua traduzione in italiano. Tuttavia, per tenere riferimento, si spiega anche come si chiamano in inglese.
  • Gli esempi e le soluzioni agli esercizi non sono completamente tradotti. Questo perché, quando si lavora su un progetto reale, il codice trovato su altri siti potrebbe essere scritto in inglese. Eppure, i commenti incorporati nei codici sono stati tradotti così come altri testi particolari per facilitare la comprensione.
Materiale di riferimento
⤽
Ci sono una gran quantità di articoli che trattano alcuni aspetti di jQuery. Alcuni sono eccellenti, mentre altri, francamente, sono erronei. Quando si legga un articolo su jQuery, accertarsi che tratti la stessa versione della libreria in uso, e resistere alla tentazione di copiare e incollare il codice – prendere tempo per capirlo.

A continuazione ci sono una serie di eccellenti risorse da utilizzare durante l’apprendimento. La più importante di tutte è il codice sorgente di jQuery, che contiene (in formato non compresso) una documentazione completa attraverso i commenti. La biblioteca non è una scatola nera – la sua comprensione aumenterà in modo esponenziale ogni volta che la si rivede – ed è altamente consigliabile memorizzare il link nel vostro browser preferito per averla come guida di riferimento.