CONTATTACI

Blog

developer che strizza l'occhio con un robottino sulla spalla

Convertire Jquery in Javascript

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:

  1. 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>.
  2. 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.
  3. jQuery(this): L’espressione jQuery(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.
  4. 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.
  5. 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!');
    }
);
Javascript con 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

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.