PROGRAMMIAMO
JS - Ottenere jQuery
Una prima pagina di esempio in jQuery

Dopo aver sommariamente esaminato le principali caratteristiche del linguaggio, vediamo finalmente la nostra prima pagina in jQuery:

<!DOCTYPE html>

<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>

Se proviamo a copiare e a incollare questa pagina in file di testo con estensione .html e a visualizzarla nel browser, appare una finestrella di pop up (prodotta dall'istruzione alert) che visualizza il numero 3. Questo valore rappresenta il numero di paragrafi p presenti nella pagina.

Ottenere jQuery

Avremo modo di approfondire meglio i dettagli del funzionamento di questa prima pagina. Qui ci interessa invece concentrarci sul comando:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Come abbiamo già visto, questo comando serve per linkare la pagina con un file javascript esterno. Nel nostro caso il file si chiama jquery.min.js, si trova sui server di Google e contiene il codice di jQuery.

Come abbiamo già più volte accennato, jQuery è costruito su javascript. I comandi di jQuery non sono in realtà delle nuove istruzioni di linguaggio, poiché sono internamente realizzati usando istruzioni javascript. Diciamo che jQuery rappresenta un modo elegante ed efficace per nascondere al programmatore parte della complessità di javascript. Comunque, nella sua essenza, jQuery non è altro che javascript.

Pertanto, come è possibile in generale includere codice javascript contenuto in un file esterno alla pagina, così possiamo allo stesso modo includere jQuery. A questo proposito, esistono molti modi per realizzare questo, ma i due principali sono:

Entrambe le soluzioni hanno i loro pro e contro. Se scegliamo, come abbiamo fatto )e faremo sempre nelle prossime lezioni) di appoggiarci a un server esterno (tecnicamente si chiamano Content Delivery Network, CDN) come quello di Google, non dobbiamo fare altro che copiare e incollare all'inizio del documento il link con l'url completa del file jQuery e non abbiamo bisogno di preoccuparci di altro.

Per avere l'indirizzo dell'ultima versione di jQuery presente sui server Google basta visitare questa pagina. Fra l'altro possiamo trovare jQuery non solo sui server Google, ma anche su quelli Microsoft e su altri vari siti (un elenco incompleto può essere trovato qui).

Come abbiamo detto, se scegliamo questa alternativa, non dobbiamo scaricare nulla, né preoccuparci di niente: per usare jQuery basta copiare e incollare nell'head del documento la semplice riga di codice che abbiamo visto sopra:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Questa soluzione ha anche il vantaggio che, se l'utente (colui che visualizzerà la nostra pagina) ha già visitato in precedenza altre pagine che usano jQuery ospitata sullo stesso server, probabilmente il suo browser già ne possiede una copia nella memoria cache e non è necessario scaricarla nuovamente.

D'altra parte la soluzione di appoggiarsi al server remoto presenta anche qualche piccolo svantaggio. Anzitutto non c'è la garanzia che il server sia funzionante e attivo sempre. Questo significa che, per esempio, se il server di Google in quel momento non è raggiungibile, la nostra pagina non funzionerà. Si tratta di un'eventualità abbastanza rara, ma può succedere.

Inoltre in questo modo il programmatore non ha il completo controllo dell'intera operazione. Una soluzione alternativa è scaricare l'ultima versione di jQuery dal sito ufficiale e usare quella nel nostro link. In questo caso si vedrà che sul sito vengono proposte due diversi file per ogni versione: quello compresso (compressed) e quello senza compressione (uncompressed).

Il primo (detto anche minified e riconoscibile per la presenza di min nel nome) è quello da usare nelle nostre pagine. Si tratta di una versione più piccola del file uncompressed, nella quale sono stati eliminati tutti i caratteri inutili (per il computer) come spazi, commenti, andate a capo. E' praticamente illeggibile, ma se tutto quello che vogliamo è utilizzarlo senza cercare di capire cosa c'è scritto, va benissimo. La versione uncompressed viene invece usata dagli sviluppatori del codice jQuery ed è utile se si vuole andare a capire come funziona jQuery "sotto al cofano".

Come si è detto nei nostri esempi nel seguito noi ci appoggeremo sempre ai server esterni di Google, soluzione che risulta senz'altro più semplice e immediata per chi inizia a programmare.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it