3E e 3I SIA: Crea una pagina in javascript che consente di inserire i nomi e i valori e individua la media usando l'array. Stampa inoltre i nomi e i valori.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calcolo della Media</title>
</head>
<body>
<h1>Inserisci Nomi e Valori</h1>
<div>
<label for="nome">Nome:</label>
<input type="text" id="nome">
</div>
<div>
<label for="valore">Valore:</label>
<input type="number" id="valore">
</div>
<button onclick="aggiungi()">Aggiungi</button>
<button onclick="calcolaMedia()">Calcola Media</button>
<h2>Risultati:</h2>
<div id="risultati"></div>
<div id="media"></div>
<script>
var nomi = [];
var valori = [];
function aggiungi() {
var nome = document.getElementById('nome').value;
var valore = document.getElementById('valore').value;
// Inserisci i dati nell'array
nomi[nomi.length] = nome;
valori[valori.length] = parseFloat(valore);
// Stampa i dati
var risultatiHtml = "<ul>";
for (var i = 0; i < nomi.length; i++) {
risultatiHtml += "<li>" + nomi[i] + ": " + valori[i] + "</li>";
}
risultatiHtml += "</ul>";
document.getElementById('risultati').innerHTML = risultatiHtml;
// Pulisce i campi di input
document.getElementById('nome').value = '';
document.getElementById('valore').value = '';
}
function calcolaMedia() {
var somma = 0;
for (var i = 0; i < valori.length; i++) {
somma += valori[i];
}
var media = somma / valori.length;
document.getElementById('media').innerHTML = "Media: " + media.toFixed(2);
}
</script>
</body>
</html>
Spiegazione generale dell'esercizio
- Array `nomi` e `valori`: utilizzati per memorizzare rispettivamente i nomi e i valori inseriti.
- Funzione `aggiungi`: legge i valori dai campi di input, li aggiunge agli array e aggiorna la visualizzazione dei risultati.
- Loop `for`: usato per iterare sugli array e sommare i valori per calcolare la media.
- Pulizia dei campi di input: dopo l'aggiunta di ogni elemento per facilitare l'inserimento di nuovi dati.
Spiegazione completa dell'esercizio:
<!DOCTYPE html>
<html lang="it">
- Questa è la dichiarazione del tipo di documento. Specifica che il documento è un file HTML. L'attributo `lang="it"` indica che la lingua principale del documento è l'italiano.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calcolo della Media</title>
</head>
- La sezione `<head>` contiene metadati per la pagina web:
- `<meta charset="UTF-8">` specifica che il documento utilizza la codifica dei caratteri UTF-8, che supporta una vasta gamma di caratteri.
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">` imposta la viewport per la pagina, utile per il design responsivo.
- `<title>Calcolo della Media</title>` definisce il titolo della pagina che appare nella scheda del browser.
<body>
<h1>Inserisci Nomi e Valori</h1>
- La sezione `<body>` contiene il contenuto visibile della pagina.
- `<h1>` è utilizzato per il titolo principale della pagina.
<div>
<label for="nome">Nome:</label>
<input type="text" id="nome">
</div>
<div>
<label for="valore">Valore:</label>
<input type="number" id="valore">
</div>
- Due div per raccogliere input dall'utente:
- Il primo per inserire un nome (usando `input` di tipo testo).
- Il secondo per inserire un valore numerico (usando `input` di tipo numero).
- Ogni campo di input ha un `id` che viene utilizzato per accedere ai valori con JavaScript.
<button onclick="aggiungi()">Aggiungi</button>
<button onclick="calcolaMedia()">Calcola Media</button>
- Due pulsanti:
- Il primo chiama la funzione `aggiungi()` quando viene cliccato.
- Il secondo chiama la funzione `calcolaMedia()`.
<h2>Risultati:</h2>
<div id="risultati"></div>
<div id="media"></div>
- `<h2>` serve come intestazione per la sezione dei risultati.
- `<div id="risultati">` e `<div id="media">` sono contenitori vuoti inizialmente, dove verranno inseriti i nomi, i valori, e la media.
>
var nomi = [];
var valori = [];
- Inizia la sezione script con una dichiarazione di due array vuoti: `nomi` per memorizzare i nomi e `valori` per i valori numerici.
function aggiungi() {
var nome = document.getElementById('nome').value;
var valore = document.getElementById('valore').value;
- La funzione `aggiungi()` recupera i valori dai campi di input utilizzando `document.getElementById().value`.
nomi[nomi.length] = nome;
valori[valori.length] = parseFloat(valore);
- Aggiunge il nome e il valore agli array `nomi` e `valori`.
- `parseFloat()` è usato per convertire il valore stringa in un numero decimale.
var risultatiHtml = "<ul>";
for (var i = 0; i < nomi.length; i++) {
risultatiHtml += "<li>" + nomi[i] + ": " + valori[i] + "</li>";
}
risultatiHtml += "</ul>";
document.getElementById('risultati').innerHTML = risultatiHtml;
- Crea una stringa HTML che elenca tutti i nomi e i valori.
- Usa un ciclo `for` per attraversare gli array `nomi` e `valori` e costruire l'HTML per una lista non ordinata (`<ul>`).
- Inserisce la lista completa nel div `risultati`.
document.getElementById('nome').value = '';
document.getElementById('valore').value = '';
- Pulisce i campi di input settando il loro valore a una stringa vuota dopo aver aggiunto i dati agli array.
}
function calcolaMedia() {
var somma = 0;
for (var i = 0; i < valori.length; i++) {
somma += valori[i];
}
var media = somma / valori.length;
document.getElementById('media').innerHTML = "Media: " + media.toFixed(2);
}
</script>
</body>
</html>
- `function calcolaMedia()`: Calcola la media dei valori.
- Inizia una somma a zero.
- Usa un ciclo `for` per sommare tutti i valori nell'array `valori`.
- Calcola la media dividendo la somma per il numero degli elementi.
- Inserisce la media calcolata nel div `media`, formattandola con due decimali usando `toFixed(2)`.
Questo esempio illustra come inserire dati direttamente dall'utente e processarli utilizzando JavaScript per un'interazione semplice ma efficace sotto forma di input/output dinamico su una pagina web.
Commenti
Posta un commento