3E e 3I SIA: Gli array paralleli ed esercizio "Inventario"
Lezione del 9 gennaio 2026 – ore 11 - Laboratorio Cisco Itet A. Bassi di Lodi
prof. Paolo Latella
Gli array paralleli sono due o più array della stessa lunghezza in
cui gli elementi corrispondenti (quelli con lo stesso indice) sono logicamente
collegati tra loro.
Immagina di voler gestire un database di studenti e i loro voti:
- L'array
studenti conterrà i nomi.
- L'array
voti conterrà i risultati.
- Se
"Mario" è all'indice 0 di studenti, il suo voto sarà all'indice
0 di voti.
Esempio Pratico: Gestione Inventario
Supponiamo di voler gestire un piccolo magazzino di frutta. Abbiamo bisogno
di tre informazioni: il nome del prodotto, la quantità disponibile e il prezzo
unitario.
Per prima cosa, definiamo i nostri dati. È fondamentale che ogni array
abbia lo stesso numero di elementi.
let prodotti = ["Mele", "Pere", "Banane"];
let quantita = [50, 30, 100];
let prezzi = [1.50, 2.00, 0.80];
2. Accedere ai dati correlati
Per leggere i dati di un singolo articolo (ad esempio, le Pere), dobbiamo
usare lo stesso indice su tutti gli array.
console.log("Prodotto: " + prodotti[i]); // "Pere"
console.log("Disponibilità: " + quantita[i]); // 30
console.log("Prezzo: €" + prezzi[i]); // 2.00
Le Istruzioni Chiave: Il Ciclo for
La potenza degli array paralleli si esprime quando usiamo i cicli. Poiché
gli indici coincidono, un singolo ciclo for può processare tutti i dati
contemporaneamente.
Visualizzare l'intero inventario
console.log(`${prodotti[i]}: ${quantita[i]} pezzi a €${prezzi[i]}
l'uno.`);
}
Spiegazione del codice:
- let i = 0:
Inizializziamo il contatore dall'indice 0 (il primo elemento).
- i <
prodotti.length: Il ciclo continua finché non abbiamo
scorso tutto l'array.
- i++:
Incrementiamo l'indice a ogni passaggio.
- prodotti[i]:
Accediamo dinamicamente all'elemento corrente di ogni array usando la
variabile i.
Pro e Contro degli Array Paralleli
|
Vantaggi |
Svantaggi |
|
Molto semplici da capire per i principianti. |
Difficili da mantenere (se elimini un elemento in un array e non negli
altri, i dati si "sfalsano"). |
|
Veloci da implementare per piccoli script. |
Non rappresentano bene la realtà (un oggetto "Prodotto" sarebbe
più logico). |
|
Utili per algoritmi matematici semplici. |
Il codice diventa confusionario all'aumentare delle dimensioni. |
In questo esercizio, faremo un salto di qualità. Creeremo una piccola
interfaccia HTML con dei pulsanti per gestire il nostro inventario (Prodotti e
Quantità) usando gli array paralleli.
Ecco il codice completo che puoi copiare in un file .html e aprire nel tuo browser.
HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Gestione Inventario Array
Paralleli</title>
<style>
body { font-family: sans-serif; margin:
20px; line-height: 1.6; }
.menu { margin-bottom: 20px; padding: 15px; background: #f4f4f4; border-radius: 8px; }
input { margin: 5px; padding: 8px; }
button { padding: 8px 15px; cursor: pointer; background:
#007bff; color: white; border: none; border-radius:
4px; }
button:hover { background: #0056b3; }
.output { margin-top: 20px; border-top: 2px solid #ddd; padding-top: 10px; }
.item { background: #eee; margin: 5px 0; padding: 10px; display: flex; justify-content:
space-between; }
</style>
</head>
<body>
<h3>Aggiungi o
Modifica Prodotto</h3>
<input type="text" id="nomeProdotto" placeholder="Nome prodotto (es. Mele)">
<input type="number" id="quantitaProdotto" placeholder="Quantità">
<br>
<button onclick="aggiungiOModifica()">Salva Prodotto</button>
<button onclick="cancellaProdotto()">Elimina per Nome</button>
<button onclick="visualizzaInventario()">Aggiorna Lista</button>
</div>
<p>L'inventario
è vuoto. Aggiungi un prodotto!</p>
</div>
// 1. DICHIARAZIONE DEGLI ARRAY PARALLELI
let nomi = ["Mele", "Pere"];
let scorte = [50, 30];
function visualizzaInventario()
{
const container = document.getElementById("listaInventario");
container.innerHTML = "<h3>Inventario
Attuale:</h3>";
container.innerHTML += "<p>Inventario
vuoto.</p>";
return;
}
container.innerHTML += `
<div
class="item">
<span><strong>${nomi[i]}</strong>:
${scorte[i]}
unità</span>
<button
style="background:red" onclick="eliminaPerIndice(${i})">X</button>
</div>`;
}
}
function aggiungiOModifica()
{
const nomeInput = document.getElementById("nomeProdotto").value.trim();
const quantitaInput
= parseInt(document.getElementById("quantitaProdotto").value);
if (nomeInput
=== ""
|| isNaN(quantitaInput))
{
alert("Inserisci dati validi!");
return;
}
let indiceTrovato
= nomi.indexOf(nomeInput);
if
(indiceTrovato !== -1) {
// Se esiste, aggiorniamo la quantità nell'array
parallelo
scorte[indiceTrovato] = quantitaInput;
alert("Quantità aggiornata!");
} else {
// Se non esiste, aggiungiamo nuovi elementi a
entrambi gli array
nomi.push(nomeInput);
scorte.push(quantitaInput);
alert("Prodotto aggiunto!");
}
pulisciInput();
visualizzaInventario();
}
function cancellaProdotto()
{
const nomeInput = document.getElementById("nomeProdotto").value.trim();
let indiceTrovato
= nomi.indexOf(nomeInput);
// Rimuoviamo l'elemento da entrambi gli array usando
lo stesso indice
nomi.splice(indiceTrovato, 1);
scorte.splice(indiceTrovato, 1);
alert("Prodotto eliminato!");
} else {
alert("Prodotto non trovato.");
}
pulisciInput();
visualizzaInventario();
}
nomi.splice(i, 1);
scorte.splice(i, 1);
visualizzaInventario();
}
function pulisciInput()
{
document.getElementById("nomeProdotto").value
= "";
document.getElementById("quantitaProdotto").value = "";
}
visualizzaInventario();
</script>
</body>
</html>
Spiegazione delle istruzioni Javascript usate:
nomi.push(valore): Aggiunge un nuovo elemento alla fine dell'array. Per mantenere la "parallelizzazione", dobbiamo fare il push su entrambi gli array contemporaneamente.
nomi.splice(indice, 1): Questa è l'istruzione per la cancellazione. Rimuove 1 elemento a partire dalla posizione indice. Anche qui, va eseguita su entrambi gli array per evitare che i dati si sfalsino.
Il controllo if (indiceTrovato !== -1): È la logica che gestisce sia la modifica che l'inserimento. Se l'indice esiste, sovrascriviamo il valore esistente (scorte[i] = nuovoValore), altrimenti aggiungiamo una nuova riga.
innerHTML: Viene usato per "disegnare" dinamicamente la lista HTML partendo dai dati contenuti negli array Javascript.
Commenti
Posta un commento