Come programmare in jQuery
Cos'è jQuery
jQuery è una libreria javascript utilizzata online per animare le componenti di una pagina HTML. E' anche usata per implementare le funzionalità Ajax.
La libreria jQuery è rilasciata con licenza libera GNU,GPL, MIT ed è liberamente utilizzabile.
La storia di jQuery. Nel 2005 l'ideatore di jQuery, John Resig, pubblica un post sui selettori in javascript in cui riesce a far interagire gli elementi in javascript e i selettori CSS. Nel 2006 viene rilasciata la prima libreria di funzioni jQuery che implementa il linguaggio javascript con nuove funzioni interattive.
Come implementare jQuery in un sito web
Per usare jQuery devo richiamarle la libreria ufficiale nella sezione <head> del documento html.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
</html>
In alternativa, all'utilizzo della CDN (rete di distrbuzione dei contenuti) posso anche scaricare jQuery in locale direttamente dal sito web ufficiale del linguaggio jquery.com
Nota. In entrambi i casi la libreria jQuery va caricata prima di qualsiasi altro script che utilizza jQuery. L'ordine di caricamento in una pagina html è molto importante.
Il richiamo alla libreria jQuery si trova nella sezione <head>. Quindi, il browser carica in memoria la libreria jQuery al momento dell'apertura della pagina web.
Questo permette al browser di interpretare correttamente gli script in jQuery quando li trova nella sezione <body>.
<script>
$(document).ready(function(){
// inserisci qualcosa
});
</script>
Il simbolo del dollaro $ indica al browser che si tratta di una funzione jQuery e non di javascript.
Al posto del simbolo $ potrei scrivere anche jQuery, sarebbe la stessa cosa
<script>
jQuery(document).ready(function(){
// inserisci qualcosa
});
</script>
Le potenzialità del linguaggio jQuery sono enormi.
Ad esempio, posso modificare le proprietà del foglio di stile CSS della pagina a seconda del verificarsi o meno di un evento.
Nota. In questo esempio introduttivo ho richiamato la libreria jQuery 3.4.1 da una posizione esterna al sito. In alternativa, potrei anche scaricare e installare jQuery in una cartella del sito web, poi richiamare la libreria localmente dalle pagine web. E' un altro modo per usare jQuery.
Un esempio pratico
Ecco un esempio pratico di documento HTML con uno script jQuery.
Si tratta di una semplice pagina web.
- <html>
- <head>
- <title>Test</title>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- </head>
- <body>
- <script>
- $(document).ready(function() {
- alert("Prima prova");
- });
- </script>
- </body>
- </html>
Lo script nella riga 4 della <head> richiama la libreria jQuery mentre lo script nella sezione <body> apre una pop up sulla pagina.
Il risultato in output è il seguente:
Il browser legge il documento html e carica la libreria jQuery in memoria.
Infine esegue lo script jQuery che apre la pop up sullo schermo.
Dove inserire gli script che utilizzano jQuery
Gli script in jQuery producono effetti solo se il DOM è stato caricato sul browser.
Quindi, se il DOM è ancora in costruzione lo script jQuery potrebbe non generare alcun effetto.
Per evitare questo problema aggiungo gli script alla fine della pagina web, subito prima del tag di chiusura </body> della sezione body.
In alternativa, posso subordinare l'esecuzione degli script al caricamento del DOM.
Quando il DOM viene caricato il browser emette un evento.
E così via.
