CONTATTACI

Blog

Developer che ha tra le mani il logo di javascript con robottino sulla spalla

Vanilla JavaScript – come creare un two-way data binding da zero

Il linguaggio JavaScript è ormai un requisito necessario per diventare uno sviluppatore web. Insieme ad HTML e CSS, rappresenta uno strumento chiave per la programmazione nativa (e non) di app web, prevalentemente lato frontend.

Imparare JavaScript programmando

Il modo migliore di imparare, si sa, è fare: in questo articolo vedremo, quindi, come creare da zero un two-way data binding in JavaScript. Prima di adoperarci nel concreto, però, è sempre utile spolverare un po’ di nozioni. 

 

Che cos’è un two-way data binding?

Un two-way data binding si riferisce alla sincronizzazione dei dati tra il modello e la vista in entrambe le direzioni. Nel linguaggio Javascript, ed in particolare in Vanilla JavaScript, è possibile creare una semplice associazione dati bidirezionale utilizzando i listener di eventi e aggiornando il modello e la visualizzazione di conseguenza. 

Programmare in JavaScript è il modo migliore per impararlo, osservando il codice e cimentandosi in esso. Per creare un two-way data binding, creeremo la proprietà di un oggetto con una funzione getter e un setter. Principalmente la funzione setter dell’oggetto per aggiornare il valore dell’elemento HTML corrispondente.

Tra le funzioni in JavaScript messe a disposizione utilizzeremo la Object.defineProperty per definire il getter e il setter per la proprietà di un oggetto.

 

Cimentiamoci con la programmazione JavaScript: creiamo un two-way data binding

 

1. const data = {};
Object.defineProperty(data, 'prop', {
    get: function () {
        console.log('Chiamata al Getter’);
    },
    set: function (value) {
        console.log('Chiamata al Setter');
    }
});

Dopo aver creato un oggetto con funzioni getter e setter incominciamo con il two-way data binding. Aggiorneremo il seguente codice con nuovi semplici elementi HTML.

 

 1. <input id="inputEl" type="text" />
 2. <span id="val"></span>

Quindi, il codice Javascript sarà:

const data = {
 3.   value: '' // a field to store the actual value
 4. };Object.defineProperty(data, 'prop', {
 5.   get: function() {
 6.     console.log('Getter called');
 7.     return this.value;
 8.   },
 9.   set: function(value) {
10.     console.log('Setter called');
11.     this.value = value;
12.     printVal();
13.   }
14. });
15. // attaching the event listener on keyup events
16. const el = document.getElementById('inputEl');
17. el.addEventListener('keyup', (event) => {
18.   data.prop = event.target.value;
19. });function printVal() {
20.   const el = document.getElementById('val');
21.   el.innerText = data.prop;
22. }

In questo modo, la modifica del valore dell’elemento di input aggiorna il testo visualizzato nell’HTML. Ora, però, vogliamo anche l’altro lato: l’aggiornamento del valore dovrebbe aggiornare il valore dell’elemento HTML. Inseriremo un bottone che aggiornerà il valore nel tag input.

 

 1. <input id="inputEl" placeholder="Enter a number..." type="text" />
 2. <span id="val"></span>
 3. <button id="incrementVal">Increment</button>

Il codice Javascript sarà:

 

const data = {
 4.   value: ''
 5. };const el = document.getElementById('inputEl');Object.defineProperty(data, 'prop', {
 6.   get: function() {
 7.     console.log('Getter called');
 8.     return this.value;
 9.   },
10.   set: function(value) {
11.     console.log('Setter called');
12.     this.value = value;
13.     el.value = value;
14.     printVal();
15.   }
16. });// attaching the event listener on keyup events
17. el.addEventListener('keyup', (event) => {
18.   data.prop = event.target.value;
19. });function printVal() {
20.   const el = document.getElementById('val');
21.   el.innerText = data.prop;
22. }const btn = document.getElementById('incrementVal');
23. btn.addEventListener('click', () => {
24.  data.prop = Number(data.prop) + 1;
25. });

Attraverso questo semplice codice JavaScript, avremo un elemento che si aggiorna automaticamente ogni volta che viene premuto il bottone collegato alla casella di input. In questo modo avremo creato un two-way data binding molto semplice da comprendere.

Non farti spaventare dalla sintassi JavaScript, nel mondo della programmazione informatica ciò che conta è comprendere la logica che c’è dietro ogni singola riga di codice, indipendentemente dal linguaggio in cui viene scritto. Imparare JavaScript ti può aiutare anche a comprendere logicamente cos’è la programmazione informatica. Prova a cimentarti con il linguaggio JavaScript leggendo la nostra guida 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.