Come molti sanno, il linguaggio JavaScript è un linguaggio di programmazione lato client utilizzato per rendere interattive le pagine Web. Insieme al linguaggio HTML e al linguaggio CSS è una delle 3 colonne portanti per la programmazione web front end.
JavaScript gestisce, infatti, il comportamento degli elementi dinamici di un sito web, ovvero come i contenuti (HTML) e gli stili grafici (CSS) reagiscono e cambiano nella pagina web (ad esempio, al click su un bottone possiamo vedersi aprire un menù o un form per il login).
La programmazione JavaScript era, tuttavia, molto complessa a causa delle differenze tra i vari browser e, per questo motivo, è spopolata tra gli sviluppatori “Jquery”, una libreria che allineava il modo di scrivere il codice tra i vari browser.
Cos’ è jQuery
Secondo quanto riporta Wikipedia
“jQuery è una libreria JavaScript per applicazioni web, distribuita come software libero, distribuito sotto i termini della Licenza MIT.[1]. Nasce con l’obiettivo di semplificare la selezione, la manipolazione, la gestione degli eventi e l’animazione di elementi DOM in pagine HTML, nonché semplificare l’uso di funzionalità AJAX, la gestione degli eventi e la manipolazione dei CSS.
Le sue caratteristiche permettono agli sviluppatori JavaScript di astrarre le interazioni a basso livello con i contenuti delle pagine HTML. L’approccio di tipo modulare di jQuery consente la creazione semplificata di applicazioni web e contenuti dinamici versatili. Nel 2020, jQuery risulta la libreria JavaScript più utilizzata in Internet, ovvero è presente nel 74,4% dei primi 10 milioni di siti Internet più popolari secondo W3Techs[2].”
JQuery viene, ad oggi, considerata una libreria obsoleta, in quanto tutte le sue funzionalità sono state implementate nel linguaggio JavaScript; nonostante ciò, molte volte, ti capiterà di trovare degli snippet di codice che utilizzano ancora jQuery.
Come procedere in quei casi? Non preoccuparti! Grazie a questo breve articolo capirai come tradurre jQuery in linguaggio JavaScript.
jQuery CSS: modificare il CSS da JQuery a Javascript
Prima di tutto, affrontiamo la conversione dei metodi per modificare il css, da JQuery a Javascript.
La prima cosa da fare per modificare un elemento HTML con Javascript è selezionare quest’ultimo.
// jQuery : selezionare tutti gli elementi con classe “select”
$(".select");
// JavaScript : selezionare il primo elemento trovato con classe “select”
document.querySelector(".select");
// Javascript : selezionare tutti gli elementi con classe “select”
document.querySelectorAll(".select");
Modificare le classi CSS
- Aggiungere una classe css:
In jQuery:
$element.addClass(“class-name”);
In JavaScript:
element.classList.add(“class-name”);
- Rimuovere una classe css:
In jQuery:
$element.removeClass(“class-name”);
In JavaScript:
element.classList.remove(“class-name”);
- Aggiungere / rimuovere una classe css se questa è presente o meno:
In jQuery:
$element.toggleClass(“class-name”);
In JavaScript:
element.classList.toggle(“class-name”);
- Controllare se un elemento html abbia una classe:
In jQuery:
$element.hasClass(“class-name”);
In JavaScript:
element.classList.has(“class-name”);
Modificare lo stile CSS
Se, ad esempio, volessimo dare un margine di 10px ad un <div>, da jQuery a JavaScript scriveremmo:
// jQuery:
$div.css({ margin: "10px" })
// JavaScript:
div.style.margin= "10px"
Jquery function
Le funzioni jQuery sono un elemento fondamentale nell’ecosistema di jQuery. Le funzioni jQuery sono chiamate metodi e possono essere applicate agli elementi HTML selezionati per eseguire azioni specifiche. Ad esempio, con una funzione jQuery, è possibile selezionare tutti gli elementi di testo di un documento HTML e modificarli in modo sincronizzato. Le funzioni jQuery semplificano notevolmente la gestione degli eventi, l’aggiornamento del DOM (Document Object Model) e l’interazione con i servizi web, offrendo agli sviluppatori uno strumento potente per creare esperienze utente dinamiche e interattive sul web. Per utilizzare le funzioni jQuery, è necessario includere la libreria jQuery nel proprio progetto e poi scrivere il codice JavaScript che sfrutti le varie funzioni messe a disposizione da jQuery per raggiungere gli obiettivi desiderati.
Tra le jquery function più utilizzate troviamo:
jQuery.on(): Questo è un metodo di jQuery utilizzato per associare gestori di eventi agli elementi HTML. Consente di definire un comportamento quando si verifica un evento specifico su uno o più elementi. Ad esempio,$("button").on("click", function() { ... })associa una funzione al clic su tutti gli elementi<button>.jQuery.ajax(): Questo è un metodo di jQuery utilizzato per effettuare richieste asincrone al server web, comunemente noto come AJAX (Asynchronous JavaScript and XML). Con$.ajax(), è possibile recuperare dati da un server e aggiornare dinamicamente il contenuto della pagina senza dover ricaricare l’intera pagina.jQuery(this): L’espressionejQuery(this)è una convenzione utilizzata per fare riferimento all’elemento DOM corrente all’interno di una funzione di callback o di un gestore di eventi. Ad esempio, all’interno di una funzione di gestione di eventi,$(this)rappresenta l’elemento su cui si è verificato l’evento.jQuery.ready(): In realtà,jQuery.ready()è un metodo deprecato in jQuery. L’uso moderno di jQuery per attendere il caricamento del documento è utilizzare il metodo$(document).ready(function() { ... }), che consente di eseguire codice JavaScript solo quando il documento HTML è stato completamente caricato.jQuery.post()è un altro metodo di jQuery utilizzato per effettuare richieste HTTP POST asincrone. Questo metodo consente di inviare dati al server web in una richiesta POST e gestire la risposta del server quando questa è disponibile.
jQuery on
Secondo concetto fondamentale per la manipolazione del DOM è quello degli eventi.
Vediamo come aggiungere un evento al click su un bottone, con entrambi i metodi:
// jQuery:
$(".button").on( ‘click’ , function(event) {
// codice da eseguire
});
// JavaScript:
document.querySelector(".button").addEventListener("click", (event) => {
// codice da eseguire
});
jQuery ready: document ready function
Un’altra funzione fondamentale è la document ready function, una funzione che fa partire il codice quando il caricamento della pagina è terminato.
In questo caso, la conversione dal jQuery al js document ready sarebbe la seguente:
// jQuery:
$(document).ready(function() {
// codice da eseguire
});
// JavaScript:
document.addEventListener("DOMContentLoaded", () => {
// codice da eseguire
});
jQuery ajax
Le chiamate ajax sono uno dei principali motivi per i quali jQuery si è diffuso; infatti, anni fa, ogni browser implementava metodi diversi per effettuare delle chiamate asincrone e gli sviluppatori dovevano riscrivere il codice per ogni browser sul quale il sito doveva funzionare. Una follia!
La libreria jQuery creò una sintassi unica per tutti i browser per effettuare le chiamate asincrone e questo ne decretò l’assoluto successo.
Ad oggi, però, tutti i browser sono allineati e aggiornati e tutti implementano il metodo fetch per effettuare chiamate asincrone. Vediamo, quindi, come tradurre una chiamata ajax con una fetch
jQuery:
$.ajax(
{
'url': 'https://url/to/your/api',
'method': 'GET',
'success': function(response){
console.log(response);
},
'error':function(){
alert('errore!');
}
}
);
Javascript :
fetch('https://url/to/your/api').then(function(response){
console.log(response);
}).catch(function(){
alert('errore!');
});
JQuery post
Un caso particolare di chiamate ajax sono le chiamate di tipo post, per questo tipo di chiamate, dato che sono molto utilizzate, la libreria JQuery ha implementato dei metodi molto semplici per effettuare queste chiamate scrivendo pochissimo codice, vediamone un esempio!
jQuery:
$.post(
'https://url/to/your/api',
{ 'param1': 'value1', 'param2': 'value2' },
function(response){
console.log(response);
}
).fail(
function(){
alert('Errore!');
}
);fetch (HTTP POST):fetch(
'https://url/to/your/api',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'param1': 'value1',
'param2': 'value2'
})
}
).then(function(response){
console.log(response);
}).catch(function(){
alert('Errore!');
});In questo esempio, stiamo effettuando una chiamata HTTP POST sia con jQuery che con fetch. L’uso di fetch richiede alcune differenze nella configurazione, come specificare il metodo e l’intestazione Content-Type per il tipo di dati che stiamo inviando. Inoltre, stiamo convertendo i dati dei parametri in formato JSON utilizzando JSON.stringify() prima di inviarli con fetch.
In generale, è una buona pratica passare ai metodi moderni, come fetch, quando si sviluppa per browser aggiornati, poiché sono standardizzati e forniscono maggiore flessibilità e controllo. Tuttavia, ci sono situazioni in cui l’uso di jQuery può ancora avere senso, ad esempio quando si lavora con progetti legacy che lo utilizzano ampiamente o quando si deve supportare browser molto vecchi che non supportano fetch.
Ricapitolando, jQuery nasce come libreria JavaScript open source che semplifica le interazioni tra un documento HTML/CSS. È diventata parecchio famosa per la sua filosofia “Scrivi meno, fai di più” ma, come abbiamo potuto constatare, non cambia ormai molto dall’ attuale Vanilla JavaScript. Dunque, è conveniente, ad oggi, imparare Javascript direttamente e cercare di tradurre jQuery in Javascript per allineare il tuo codice a quello di altri professionisti, quanto più spesso possibile. Vuoi imparare Javascript? Niente di più semplice! Dai un’occhiata alla nostra guida a Javascript in italiano!
