Convertire Jquery in Javascript
javascript js esercizi di javascript jquery
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.
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
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 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
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!');
});
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.
