Obiettivo: Effettuare una semplice somma tra dati inseriti in una pagina web utilizzando il linguaggio di programmazione javascript.
Pre-requisiti:
HTML #1 Titoli, Paragrafi, Liste, Immagini, Ritorni a capo
HTML #3 CSS
Teoria
JavaScript è un linguaggio di programmazione versatile e potente, utilizzato principalmente per creare contenuti interattivi e dinamici su pagine web. Introdotto nel 1995, è diventato uno dei pilastri dello sviluppo web, insieme a HTML e CSS. Grazie alla sua natura interpretata e alla compatibilità con tutti i browser moderni, JavaScript permette di manipolare il DOM (Document Object Model) per aggiornare contenuti, gestire eventi e migliorare l’esperienza utente senza dover ricaricare la pagina. Con l’avvento di tecnologie come Node.js, JavaScript è andato oltre il frontend, consentendo lo sviluppo di applicazioni server-side e multipiattaforma. Inoltre, le numerose librerie e framework, come React, Angular e Vue.js, hanno ampliato le possibilità di sviluppo, rendendolo un linguaggio essenziale per i programmatori moderni.
Codice HTML:
Il codice HTML presentato definisce una semplice pagina web che consente agli utenti di effettuare una somma tra due numeri utilizzando JavaScript. Ecco i dettagli del suo funzionamento:
- Titolo della pagina: È presente un’intestazione <h1> che descrive lo scopo della pagina: “Effettuare una semplice somma in Javascript”.
- Input: Due elementi consentono agli utenti di inserire i numeri da sommare. Nello specifico questi due elementi caratterizzati dal tag input sono identificati da due differenti identificativi inputA e inputB. Il primo campo viene inizializzato con un valore predefinito di 0. Il secondo campo, con un valore predefinito di 1.
- Output: L’output, viene gestito attraverso un paragrafo caratterizzato dall’identificativo output. Tale valore viene modificato dallo script javascript e definito come la somma dei due input.
- Pulsante: Un pulsante viene utilizzato per lanciare lo script javascript il quale presi i valori dei due input calcola il valore dell’output e va a modificare il relativo codice HTML.
Codice JAVASCRIPT:
La funzione document.getElementById() è uno dei metodi più utilizzati da Javascript. Tale funzione consente di selezionare un elemento HTML specifico della pagina utilizzando il suo attributo id. Questo metodo è ampiamente utilizzato per interagire e manipolare dinamicamente gli elementi del documento.
Ad esempio per ottenere il valore di uno specifico elemento è possibile utilizzare il seguente codice:
var a = parseInt(document.getElementById(“inputA”).value);
Mentre per modificare un elemento della pagina HTML si utilizza il seguente codice:
document.getElementById(“output”).innerHTML = “Risultato: ” + c;