CONTATTACI

Blog

jQuery per principianti

 

jQuery è un progetto nato dall’idea di John Resig, che cercava un modo semplice per utilizzare le funzionalità del linguaggio Javascript sfruttando i selettori CSS. Il suo obiettivo era quello di semplificare la programmazione informatica Lato Client in modo da evitare la scrittura di codice verboso e difficile da mantenere. Un altro dei suoi obiettivi era quello di uniformare i vari browser all’utilizzo di Javascript, dati i grossi problemi di compatibilità che esistevano all’epoca. 

La prima release ufficiale di jQuery risale al 2006 e da allora ha avuto un grande successo portandolo ad essere scelto ed utilizzato per un numero sempre maggiore di progetti, grazie alla facile curva di apprendimento e al funzionamento intuitivo. Potete dare un’occhiata alla storia di jQuery sul suo sito ufficiale.

Perché jQuery?

 

Il motto di jQuery “write less, do more”, che potremmo tradurre letteralmente come “scrivi  meno, fai di più”, descrive la filosofia dietro questa libreria. 

Attraverso le funzionalità di jQuery è possibile manipolare gli elementi del DOM, agendo direttamente su di esso con pochissime righe di codice, creare animazioni, gestire eventi e sfruttare l’enorme numero di Plugin esistenti per implementare tutto ciò che si desidera.

Per poter utilizzare jQuery è necessario includere la libreria nel proprio progetto; questo può avvenire in due modi:

<head>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
  • Includerla localmente, scaricando i sorgenti dal sito ufficiale, per poi linkarla ai nostri file HTML;
<head>
  <script src="/jquery/jquery-3.4.1.min.js"></script>
</head>

Una volta inclusa, jQuery andrà a salvarsi sull’oggetto globale window, in modo da essere accessibile in qualsiasi punto dell’applicativo. 

Per verificare ciò, vi basterà aprire la console del browser, digitare la keyword jQuery e premere invio.

Nel seguente esempio incolliamo l’intero codice sorgente di jQuery, preso dal sito ufficiale, e attuiamo la verifica descritta sopra. 

N.B.Incollare il codice nella console del browser porta allo stesso risultato di un semplice import nell’HTML:

Da questo momento è possibile iniziare ad usare le sue funzionalità, ad esempio sfruttando i selettori. Per poterli usare bisogna digitare il segno del dollaro $ seguito da delle parentesi tonde: $(), questo è un shorthand per la funzione jQuery(). 

Dentro le parentesi, come parametro, passeremo l’elemento che ci interessa ricercare e successivamente chiameremo il metodo da applicare.

L’elemento può essere ricercato con gli stessi selettori che avremmo usato per scrivere del codice CSS. Ad esempio per selezionare l’elemento o gli elementi con una determinata classe css passeremo come parametro il nome della classe preceduto da un punto: $(‘.someCssClass’). Se volessimo sfruttare l’ID useremo il simbolo cancelletto:  $(‘#someID’).

Esempi di selettori jQuery

Ricerca con una classe CSS

<h2 class="subtitle">h2 con classe subtitle</h2>

Selettore jQuery:

$(".subtitle").css("color", "red"); // colora di rosso il contenuto

Nel caso in cui volessimo usare il selettore ID il codice non cambia di molto:

<h2 id="subtitle">h2 con id subtitle</h2>

Selettore jQuery:

$("#subtitle").css("color", "red");

Selettori più avanzati: i filtri 

jQuery permette di sfruttare selettori molto più avanzati, consentendo di effettuare dei filtri; generalmente questi selettori iniziano con i due punti. 

Supponiamo di voler selezionare il primo elemento di una lista:

<ul>   
<li>One</li>   
<li>Two</li>   
<li>Three</li>   
<li>Four</li>   
<li>Five</li> 
</ul>

Selettore jQuery:

$("li:first").css("color", "grey");

Molto simile è il caso in cui si volesse selezionare l’ultimo, in quel caso il selettore sarà :last.

Un altro selettore molto utile è il :contains, che cerca e seleziona gli elementi che contengono un certo testo:

<p>Hello World</p>
<span>My name is John</span>

Selettore jQuery:

$("span:contains(John)").css("color", "red");

Questi sono solo alcuni degli esempi di selettori che mostrano la potenza di jQuery e la sua facilità di utilizzo. Tuttavia questa facilità porta con sé dei grossi rischi..

Rischi nell’utilizzo di jQuery

Come anticipato, l’utilizzo sfrenato di jQuery può portare ad appesantire eccessivamente l’applicativo, rendendolo a volte lento e scattoso.

Ogni selettore jQuery non fa altro che creare un puntatore sul browser, ossia una variabile che occupa spazio e che richiede energia computazionale per essere gestita. 

Immaginate di lavorare in grossi progetti, con centinaia di selettori diversi tra di loro e di dover effettuare una modifica sullo stesso elemento, come nel codice seguente: 

$("#title").show(); 
$("#title").addClass("someClass"); 
$("#title").addClass("anotherClass"); 
$("#title").on("click", function(){     
//codice da eseguire…
}); 
//... 
$("#title").find("ul > li > input[type=checkbox]").addClass("anotherClass");

In questo esempio ogni volta che richiamiamo l’elemento #title verrà creato un nuovo puntatore con possibili rallentamenti.. Sarebbe buona pratica creare delle variabili che salvino il riferimento a quell’elemento in modo da richiamarlo solo una volta, come in questo caso: var title = $(‛#title’);

Un’altra pratica molto comune fra gli utilizzatori jQuery è quella di aggiungere codice css con i metodi messi a disposizione, quindi generandolo run time con la libreria, trascurando totalmente il normale linguaggio HTML e CSS nel sorgente. Questa pratica, se abusata, porta ad appesantire il progetto, rallentandone i tempi di caricamento e danneggiando il posizionamento sui motori di ricerca, in quanto i browser avranno grosse difficoltà a reperire informazioni a loro utili poiché generate dinamicamente da jQuery.

Quindi, quando usarlo?

jQuery si presta tantissimo ad esser utilizzato per progetti di piccola-media grandezza, laddove si possono sfruttare i numerosi Plugin esistenti e la logica del progetto non tende a scalare fino a diventare molto complessa. 

Nel caso in cui il progetto cominci a richiedere interazioni sempre più complesse con il server, e quindi una manipolazione di dati più efficiente, è consigliato sfruttare le molteplici librerie o frameworks javascript attualmente esistenti ed ottimizzati per tale scopo. Come ad esempio Vue.js, React o Angular, che sono ottimizzati per renderizzare e aggiornare costantemente i dati presenti nel DOM.

Uno sguardo al presente

Bisogna riconoscere che jQuery rimane largamente utilizzato da un grosso numero di programmatori informatici, nonostante gli enormi passi in avanti compiuti da JavaScript e dai passati problemi di compatibilità cross-browser. Questa popolarità la si deve alla sua facilità di utilizzo (bastano 10 minuti per capire come utilizzarlo), alla sintassi intuitiva e anche al fatto che è incorporato in alcuni dei più famosi CMS al mondo come WordPress e Drupal

Nonostante i competitors di jQuery siano tanti – e spesso offrano performance migliori – e la sua eliminazione come dipendenza da altri famosi framework (vedi Bootstrap 5 che eliminando il supporto a internet explorer ha eliminato anche jQuery dalle sue dipendenze), questa libreria continua a sopravvivere e prima della sua uscita definitiva dal mercato ci vorrà ancora tanto tempo.

Abbiamo voluto darti un assaggio di jQuery, vuoi imparare come funziona un po’ più nel dettaglio? Scopri la nostra guida jQuery in italiano

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.