3E e 3I Sia: Calcolo della fattura in Javascript con l'utilizzo degli array
Ecco la struttura del file HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calcolatore di Fattura</title>
</head>
<body>
<h1>Gestione Fattura</h1>
<div>
<label>Descrizione: </label>
<input type="text" id="descrizione">
</div>
<div>
<label>Quantità: </label>
<input type="number" id="quantita">
</div>
<div>
<label>Importo: </label>
<input type="number" id="importo">
</div>
<button onclick="aggiungiVoce()">Aggiungi Voce</button>
<h2>Dettagli Fattura</h2>
<ul id="listaFattura"></ul>
<p id="totaleFattura"></p>
<script>
// Dichiariamo i quattro array
var descrizioni = [];
var quantita = [];
var importi = [];
var totali = [];
function aggiungiVoce() {
// Recupera i valori dagli input
var desc = document.getElementById('descrizione').value;
var quant = parseFloat(document.getElementById('quantita').value);
var imp = parseFloat(document.getElementById('importo').value);
// Aggiunge i valori agli array
descrizioni.push(desc);
quantita.push(quant);
importi.push(imp);
// Calcola il totale per la voce corrente e aggiungilo all'array
var totaleVoce = quant * imp;
totali.push(totaleVoce);
// Aggiorna la lista HTML con i dettagli della fattura
var listaFattura = document.getElementById('listaFattura');
var voce = document.createElement('li');
voce.textContent = `${desc}: Quantità ${quant}, Importo ${imp}, Totale ${totaleVoce}`;
listaFattura.appendChild(voce);
// Calcola il totale della fattura con IVA
var totaleFattura = 0;
for (var i = 0; i < totali.length; i++) {
totaleFattura += totali[i];
}
var totaleConIva = totaleFattura * 1.22;
// Mostra il totale della fattura
document.getElementById('totaleFattura').textContent = `Totale Fattura (con IVA 22%): ${totaleConIva.toFixed(2)} €`;
}
</script>
</body>
</html>
Spiegazione generale dell'esercizio:
Obiettivo: Creare un programma che gestisce le righe di una fattura inserendo una descrizione, una quantità e un importo per ciascuna voce. Il programma calcola automaticamente il totale per voce e il totale generale della fattura, includendo l'IVA.
Elementi in HTML:
- Campi di input: Lavoriamo con tre campi dove l'utente inserisce la descrizione del prodotto, la quantità (numero di articoli), e l'importo (prezzo per unità).
- Pulsante "Aggiungi Voce": Quando viene cliccato, aggiunge una nuova riga alla nostra "lista fattura".
Funzioni JavaScript:
- Array: Usiamo 4 array per memorizzare la descrizione, la quantità, l'importo per unità, e il calcolo del totale per ciascuna voce.
- Calcolo Totale: Ogni volta che si aggiunge una voce, il totale viene calcolato come
quantità * importo. Questo è per ciascuna riga. - Totale Fattura con IVA: Si sommano i totali di tutte le righe e si aggiunge un 22% di IVA.
Uso dei Valori Inseriti: La parte JavaScript prende i valori dagli input, li elabora, e li visualizza come lista aggiornata di voci con il calcolo totale, inclusivo dell'IVA.
Spiegazione completa dell'esercizio:
Esaminiamo il programma riga per riga per facilitare la comprensione da parte di uno studente con Disturbi Specifici dell'Apprendimento (DSA). Mi concentrerò su parti chiave per rendere la spiegazione più chiara.
Parte di HTML
html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calcolatore di Fattura</title>
</head>
Spiegazione
- `<!DOCTYPE html>`: Inizia il file HTML, dicendo al browser che useremo HTML5.
- `<html lang="it">`: Apre il documento e indica che la lingua è l'italiano.
- `<head>` e contenuti: Configura il documento, specificando l'encoding dei caratteri (`UTF-8`) e rendendo il sito adatto a dispositivi mobili (`viewport`). Il titolo della pagina è “Calcolatore di Fattura”.
html
<body>
<h1>Gestione Fattura</h1>
Spiegazione
- `<body>`: Inizia il corpo della pagina, dove verranno mostrati i contenuti.
- `<h1>`: Definisce un'intestazione principale con il testo "Gestione Fattura".
Campi di Inserimento
html
<div>
<label>Descrizione: </label>
<input type="text" id="descrizione">
</div>
<div>
<label>Quantità: </label>
<input type="number" id="quantita">
</div>
<div>
<label>Importo: </label>
<input type="number" id="importo">
</div>
<button onclick="aggiungiVoce()">Aggiungi Voce</button>
- `<body>`: Inizia il corpo della pagina, dove verranno mostrati i contenuti.
- `<h1>`: Definisce un'intestazione principale con il testo "Gestione Fattura".
Campi di Inserimento
html
<div>
<label>Descrizione: </label>
<input type="text" id="descrizione">
</div>
<div>
<label>Quantità: </label>
<input type="number" id="quantita">
</div>
<div>
<label>Importo: </label>
<input type="number" id="importo">
</div>
<button onclick="aggiungiVoce()">Aggiungi Voce</button>
Spiegazione
- `<div>`: Crea delle sezioni per raggruppare gli elementi.
- `<label>`: Fornisce etichette descrittive per gli input che seguono.
- `<input type="text"/"number">`: Crea campi dove l'utente può inserire testi o numeri, ad esempio la descrizione di un prodotto o la quantità.
- `id="..."`: Identificatori per riferirsi facilmente agli elementi nel JavaScript.
- `<button onclick="aggiungiVoce()">`: Crea un pulsante che chiama la funzione `aggiungiVoce` quando cliccato.
Output dei Dati
html
<h2>Dettagli Fattura</h2>
<ul id="listaFattura"></ul>
<p id="totaleFattura"></p>
- `<div>`: Crea delle sezioni per raggruppare gli elementi.
- `<label>`: Fornisce etichette descrittive per gli input che seguono.
- `<input type="text"/"number">`: Crea campi dove l'utente può inserire testi o numeri, ad esempio la descrizione di un prodotto o la quantità.
- `id="..."`: Identificatori per riferirsi facilmente agli elementi nel JavaScript.
- `<button onclick="aggiungiVoce()">`: Crea un pulsante che chiama la funzione `aggiungiVoce` quando cliccato.
Output dei Dati
html
<h2>Dettagli Fattura</h2>
<ul id="listaFattura"></ul>
<p id="totaleFattura"></p>
Spiegazione
- `<h2>`: Intestazione secondaria con il testo "Dettagli Fattura".
- `<ul id="listaFattura">`: Crea una lista non ordinata per visualizzare gli elementi della fattura.
- `<p id="totaleFattura">`: Paragrafo che mostrerà il totale della fattura con IVA.
JavaScript
html
<script>
var descrizioni = [];
var quantita = [];
var importi = [];
var totali = [];
- `<h2>`: Intestazione secondaria con il testo "Dettagli Fattura".
- `<ul id="listaFattura">`: Crea una lista non ordinata per visualizzare gli elementi della fattura.
- `<p id="totaleFattura">`: Paragrafo che mostrerà il totale della fattura con IVA.
JavaScript
html
<script>
var descrizioni = [];
var quantita = [];
var importi = [];
var totali = [];
Spiegazione
- `<script>`: Inizia il blocco JavaScript.
- `var descrizioni = [];`: Crea un array, che è come un contenitore per memorizzare più descrizioni di prodotti.
- Altri `var`: Crea array per quantità, importi, e totali (calcolati come quantità × importo).
javascript
function aggiungiVoce() {
var desc = document.getElementById('descrizione').value;
var quant = parseFloat(document.getElementById('quantita').value);
var imp = parseFloat(document.getElementById('importo').value);
- `<script>`: Inizia il blocco JavaScript.
- `var descrizioni = [];`: Crea un array, che è come un contenitore per memorizzare più descrizioni di prodotti.
- Altri `var`: Crea array per quantità, importi, e totali (calcolati come quantità × importo).
javascript
function aggiungiVoce() {
var desc = document.getElementById('descrizione').value;
var quant = parseFloat(document.getElementById('quantita').value);
var imp = parseFloat(document.getElementById('importo').value);
Spiegazione
- `function aggiungiVoce() {...}`: Definisce una funzione chiamata `aggiungiVoce`.
- `document.getElementById('...').value`: Ottiene il valore inserito dall'utente nei campi di input.
- `parseFloat(...)`: Converte il valore in un numero decimale.
javascript
descrizioni.push(desc);
quantita.push(quant);
importi.push(imp);
var totaleVoce = quant * imp;
totali.push(totaleVoce);
- `function aggiungiVoce() {...}`: Definisce una funzione chiamata `aggiungiVoce`.
- `document.getElementById('...').value`: Ottiene il valore inserito dall'utente nei campi di input.
- `parseFloat(...)`: Converte il valore in un numero decimale.
javascript
descrizioni.push(desc);
quantita.push(quant);
importi.push(imp);
var totaleVoce = quant * imp;
totali.push(totaleVoce);
Spiegazione
- `.push(...)`: Aggiunge nuovi dati agli array.
- `var totaleVoce = quant * imp;`: Calcola il totale di una singola voce e lo memorizza.
javascript
var listaFattura = document.getElementById('listaFattura');
var voce = document.createElement('li');
voce.textContent = `${desc}: Quantità ${quant}, Importo ${imp}, Totale ${totaleVoce}`;
listaFattura.appendChild(voce);
- `.push(...)`: Aggiunge nuovi dati agli array.
- `var totaleVoce = quant * imp;`: Calcola il totale di una singola voce e lo memorizza.
javascript
var listaFattura = document.getElementById('listaFattura');
var voce = document.createElement('li');
voce.textContent = `${desc}: Quantità ${quant}, Importo ${imp}, Totale ${totaleVoce}`;
listaFattura.appendChild(voce);
Spiegazione
- `document.createElement('li')`: Crea un nuovo elemento di lista (`<li>`).
- `voce.textContent = ...`: Aggiunge testo all'elemento di lista, mostrando la descrizione, quantità, importo, e totale della voce.
- `appendChild(voce)`: Aggiunge il nuovo elemento di lista al nostro elenco HTML.
javascript
var totaleFattura = 0;
for (var i = 0; i < totali.length; i++) {
totaleFattura += totali[i];
}
var totaleConIva = totaleFattura * 1.22;
document.getElementById('totaleFattura').textContent = `Totale Fattura (con IVA 22%): ${totaleConIva.toFixed(2)} €`;
}
</script>
- `document.createElement('li')`: Crea un nuovo elemento di lista (`<li>`).
- `voce.textContent = ...`: Aggiunge testo all'elemento di lista, mostrando la descrizione, quantità, importo, e totale della voce.
- `appendChild(voce)`: Aggiunge il nuovo elemento di lista al nostro elenco HTML.
javascript
var totaleFattura = 0;
for (var i = 0; i < totali.length; i++) {
totaleFattura += totali[i];
}
var totaleConIva = totaleFattura * 1.22;
document.getElementById('totaleFattura').textContent = `Totale Fattura (con IVA 22%): ${totaleConIva.toFixed(2)} €`;
}
</script>
Spiegazione
- `var totaleFattura = 0;`: Inizia il calcolo del totale generale della fattura.
- `for (var i = 0; i < totali.length; i++) {...}`: Ciclo per sommare tutti i totali.
- `totaleConIva = totaleFattura * 1.22;`: Aggiunge il 22% di IVA al totale della fattura.
- `document.getElementById('totaleFattura').textContent = ...`: Mostra il totale della fattura, aggiornato con IVA.
Commenti
Posta un commento