3E e 3I Sia: esercizio con array e localstorage in javascript
Creare un programma IN JAVASCRIPT che gestisca gli elementi di un array (minimo, max. media, ricerca, ordinamento e modifica di un elemento) CON IL LOCAL STORAGE. Due pagine , la prima con il modulo di inserimento degli elementi degli array e la seconda pagina con tutti i risultati richiesti
Pagina 1: Inserimento Dati (index.html)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inserimento Array</title>
</head>
<body>
<h1>Inserisci Elementi dell'Array</h1>
<input type="text" id="element-input" placeholder="Inserisci numero">
<button onclick="aggiungiElemento()">Aggiungi</button>
<button onclick="calcolaRisultati()">Calcola e vai alla seconda pagina</button>
<ul id="element-list"></ul>
<script>
const elementi = JSON.parse(localStorage.getItem('elementi')) || [];
function aggiornaLista() {
const listElement = document.getElementById('element-list');
listElement.innerHTML = elementi.map((el, index) => `<li>${el} <button onclick="rimuoviElemento(${index})">Rimuovi</button></li>`).join('');
}
function aggiungiElemento() {
const input = document.getElementById('element-input');
const valore = parseFloat(input.value);
if (!isNaN(valore)) {
elementi.push(valore);
localStorage.setItem('elementi', JSON.stringify(elementi));
aggiornaLista();
input.value = '';
} else {
alert('Inserisci un numero valido');
}
}
function rimuoviElemento(index) {
elementi.splice(index, 1);
localStorage.setItem('elementi', JSON.stringify(elementi));
aggiornaLista();
}
function calcolaRisultati() {
localStorage.setItem('elementi', JSON.stringify(elementi));
window.location.href = 'results.html';
}
aggiornaLista();
</script>
</body>
</html>
Pagina 2: Risultati (results.html)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Risultati</title>
</head>
<body>
<h1>Risultati dell'Array</h1>
<div id="risultati"></div>
<button onclick="window.location.href='index.html'">Torna alla prima pagina</button>
<script>
const elementi = JSON.parse(localStorage.getItem('elementi')) || [];
function calcolaRisultati() {
if (elementi.length === 0) {
document.getElementById('risultati').innerHTML = 'Nessun elemento disponibile.';
return;
}
const minimo = Math.min(...elementi);
const massimo = Math.max(...elementi);
const media = elementi.reduce((acc, cur) => acc + cur, 0) / elementi.length;
const ordinati = [...elementi].sort((a, b) => a - b);
const risultatiHtml = `
<p>Minimo: ${minimo}</p>
<p>Massimo: ${massimo}</p>
<p>Media: ${media.toFixed(2)}</p>
<p>Ordinati: ${ordinati.join(', ')}</p>
`;
document.getElementById('risultati').innerHTML = risultatiHtml;
}
calcolaRisultati();
</script>
</body>
</html>
Pagina 1: Inserimento Dati
`index.html`
<!DOCTYPE html>
<html lang="it">
- `<!DOCTYPE html>`: Dichiara il tipo di documento come HTML5.
- `<html lang="it">`: Inizia l'elemento HTML con il linguaggio impostato su italiano.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inserimento Array</title>
</head>
- `<head>`: Contiene metadati e link a risorse per il documento HTML.
- `<meta charset="UTF-8">`: Imposta la codifica del carattere su UTF-8, supportando così un'ampia gamma di caratteri.
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: Garantisce che la pagina sia visualizzata correttamente su dispositivi mobili, impostando la larghezza a quella del dispositivo.
- `<title>Inserimento Array</title>`: Specifica il titolo della pagina che appare sulla scheda del browser.
<body>
<h1>Inserisci Elementi dell'Array</h1>
- `<body>`: Inizia il corpo del document che contiene tutto il contenuto visibile.
- `<h1>Inserisci Elementi dell'Array</h1>`: Visualizza un intestazione principale nella pagina.
<input type="text" id="element-input" placeholder="Inserisci numero">
- `<input type="text" id="element-input" placeholder="Inserisci numero">`: Aggiunge un campo di testo per inserire i numeri con un suggerimento visivo "Inserisci numero".
<button onclick="aggiungiElemento()">Aggiungi</button>
<button onclick="calcolaRisultati()">Calcola e vai alla seconda pagina</button>
- `<button onclick="aggiungiElemento()">Aggiungi</button>`: Un pulsante che, quando cliccato, esegue la funzione `aggiungiElemento`.
- `<button onclick="calcolaRisultati()">Calcola e vai alla seconda pagina</button>`: Un altro pulsante che esegue la funzione `calcolaRisultati` per calcolare risultati e spostarsi alla pagina dei risultati.
<ul id="element-list"></ul>
- `<ul id="element-list"></ul>`: Una lista non ordinata che mostrerà dinamicamente gli elementi dell'array.
<script>
- `<script>`: Inizia la sezione di script dove saranno scritti i codici JavaScript.
const elementi = JSON.parse(localStorage.getItem('elementi')) || [];
- Inizializza una variabile `elementi` che tenta di recuperare un array di elementi salvati nel `localStorage` e li converte da stringa JSON in un array. Se non ci sono elementi salvati, inizia come un array vuoto.
function aggiornaLista() {
const listElement = document.getElementById('element-list');
listElement.innerHTML = elementi.map((el, index) =>
`<li>${el} <button onclick="rimuoviElemento(${index})">Rimuovi</button></li>`
).join('');
}
- `function aggiornaLista()`: Definisce una funzione per aggiornare la visualizzazione degli elementi nella lista.
- `const listElement = document.getElementById('element-list');`: Ottiene un riferimento all'elemento HTML con l'id `element-list`.
- `listElement.innerHTML = elementi.map(...).join('');`: Trasforma ogni elemento dell'array in una stringa HTML di list item con un pulsante per la rimozione, quindi aggiorna l'HTML della lista.
function aggiungiElemento() {
const input = document.getElementById('element-input');
const valore = parseFloat(input.value);
if (!isNaN(valore)) {
elementi.push(valore);
localStorage.setItem('elementi', JSON.stringify(elementi));
aggiornaLista();
input.value = ''; // Cancella il campo di input
} else {
alert('Inserisci un numero valido');
}
}
- `function aggiungiElemento()`: Definisce una funzione per aggiungere un nuovo elemento.
- `const input = document.getElementById('element-input');`: Ottiene il valore attuale del campo di input.
- `const valore = parseFloat(input.value);`: Converte il valore dell'input in un numero.
- Controlla se `valore` è un numero (`!isNaN(valore)`), quindi lo aggiunge all'array `elementi`, aggiorna il `localStorage`, aggiorna la lista visualizzata e svuota il campo di input.
- Se non è un numero, mostra un avviso.
```javascript
function rimuoviElemento(index) {
elementi.splice(index, 1);
localStorage.setItem('elementi', JSON.stringify(elementi));
aggiornaLista();
}
- `function rimuoviElemento(index)`: Definisce una funzione per rimuovere un elemento in base all'indice.
- `elementi.splice(index, 1);`: Rimuove un elemento dall'array.
- Aggiorna il `localStorage` e la lista visualizzata.
function calcolaRisultati() {
localStorage.setItem('elementi', JSON.stringify(elementi));
window.location.href = 'results.html';
}
- `function calcolaRisultati()`: Definisce una funzione per salvare i dati e cambiare pagina.
- `window.location.href = 'results.html';`: Cambia la pagina corrente alla pagina dei risultati.
aggiornaLista();
</script>
</body>
- `aggiornaLista();`: Chiama la funzione per aggiornare immediatamente la lista quando la pagina viene caricata.
- `</body>`: Chiude il corpo del documento.
Pagina 2: Risultati
`results.html`
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Risultati</title>
</head>
<body>
<h1>Risultati dell'Array</h1>
<div id="risultati"></div>
<button onclick="window.location.href='index.html'">Torna alla prima pagina</button>
<script>
const elementi = JSON.parse(localStorage.getItem('elementi')) || [];
- Questa parte è simile alla prima pagina per quanto riguarda la struttura HTML.
- `const elementi = JSON.parse(localStorage.getItem('elementi')) || [];`: Recupera l'array di elementi dal `localStorage`.
function calcolaRisultati() {
if (elementi.length === 0) {
document.getElementById('risultati').innerHTML = 'Nessun elemento disponibile.';
return;
}
const minimo = Math.min(...elementi);
const massimo = Math.max(...elementi);
const media = elementi.reduce((acc, cur) => acc + cur, 0) / elementi.length;
const ordinati = [...elementi].sort((a, b) => a - b);
const risultatiHtml = `
<p>Minimo: ${minimo}</p>
<p>Massimo: ${massimo}</p>
<p>Media: ${media.toFixed(2)}</p>
<p>Ordinati: ${ordinati.join(', ')}</p>
`;
document.getElementById('risultati').innerHTML = risultatiHtml;
}
calcolaRisultati();
</script>
</body>
</html>
Dettagli
- `function calcolaRisultati()`: Calcola e visualizza i risultati.
- Controlla se l'array `elementi` è vuoto; in caso affermativo, mostra un messaggio appropriato e interrompe l'esecuzione della funzione.
- Calcola:
- `minimo`: Il valore minimo degli elementi usando `Math.min`.
- `massimo`: Il valore massimo usando `Math.max`.
- `media`: Somma di tutti gli elementi divisa per il numero di elementi nell'array.
- `ordinati`: Copia l'array e lo ordina in ordine crescente.
- Crea una stringa HTML con risultati formattati e aggiorna l'elemento HTML con l'id `risultati` per mostrarli.
- `calcolaRisultati();`: Esegue immediatamente la funzione quando la pagina viene caricata per mostrare i risultati.
Commenti
Posta un commento