Riprendiamo nuovamente il semplice esempio di script jQuery visto nella precedente lezione:
<html>
<head>
<meta charset="utf-8">
<title> Semplice esempio di jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var paragrafi;
paragrafi = $('p').length;
alert(paragrafi);
});
</script>
</head>
<body>
<p>Nel mezzo del cammin di nostra vita</p>
<p>mi ritrovai per una selva oscura</p>
<p>ché la diritta via era smarrita.</p>
</body>
</html>
e ora esaminiamo nel dettagli l'istruzione:
var paragrafi;
paragrafi = $('p').length;
alert(paragrafi);
});
Questa istruzione serve per eseguire una porzione di codice al caricamento della pagina ed è in qualche modo simile all'evento onload che abbiamo in passato utilizzato per eseguire codice javascript al caricamento.
La sintassi di questa istruzione sembra complicata, ma in realtà segue le regole generali della sintassi delle istruzioni jQuery:
In questo caso il selettore è document, per indicare che l'azione si riferisce al documento, cioè all'intera pagina corrente.
In realtà il metodo ready può essere applicato allo stesso modo a qualsiasi elemento della pagina. Per esempio può essere usato per eseguire una certa porzione di codice al caricamento di un'immagine o di un div.
L'azione ready, come già accennato, indica il fatto che ciò che segue (i parametri) deve essere eseguito quando l'oggetto (in questo caso document, cioè la pagina) è ready, cioè è stata caricata.
Occorre qui una breve precisazione, relativa al confronto fra ready di jQuery e l'analogo gestore di eventi onload usato da javscript. Mentre onload attende che l'elemento su cui è applicato (es. il body) sia stato interamente caricato per poter essere eseguito, ready invece viene eseguito non appena il DOM dell'elemento è stato completato. La differenza è significativa per pagine contenenti molte risorse, ad esempio immagini che devono essere caricate: onload non viene eseguito fino al completo caricamento di tutta la pagina, mentre ready viene eseguito subito, non appena è stato costruito il DOM, senza attendere il caricamento completo di tutte le risorse: è dunque indubbiamente più veloce.
Importanza di $( document ).ready e semplice template copia e incolla
In jQuery la funzione $(document).ready(...) è usata praticamente in ogni programma e serve per inizializzare le variabili, generare in automatico elementi del DOM, appendere eventi al DOM e per mille altre ragioni che si vedranno in seguito.
La sua importanza è fondamentale e si può affermare che non esiste nessun programma in cui non ci sia questa funzione. Anzi spesso l'intero codice jQuery è contenuto nella funzione anonima eseguita in risposta all'evento ready.
Per queste ragioni è bene abituarsi subito alla sua sintassi, che all'inizio può risultare un po' ostica, specie per tutte quelle parentesi tonde e graffe che è facile dimenticarsi. Suggeriamo dunque al programmatore, soprattutto se alle prime armi, di usare questo semplice template da copiare e incollare nel codice dei propri programmi:
function() {
// Qui bisogna scrivere il codice da eseguire all'avvio
}
);
In questo modo non si rischieranno errori sintattici, poi davvero molto difficili da individuare e da correggere.
ATTENZIONE: la funzione $() di jQuery può essere usata solo dopo il caricamento del DOM. Dunque è buona norma utilizzarla solo all'interno di $(document).ready o in funzioni chiamate dalla precedente.
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
