Convertire Jquery in Javascript

Convertire Jquery in Javascript

Di Vincenza Neri


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.

Impara a programmare in 3 mesi con il Corso di Coding Hackademy su Laravel PHP

Diventa Sviluppatore web in 3 mesi

Scopri il coding bootcamp Hackademy

Programma Completo