Creare una rubrica telefonica in JavaScript
In un'era dominata dalla digitalizzazione, la gestione efficiente dei contatti è diventata essenziale sia nella vita personale che professionale. Una rubrica telefonica digitale permette di organizzare e accedere rapidamente a informazioni importanti. In questo contesto, JavaScript emerge come uno strumento potente per lo sviluppo di applicazioni web interattive, inclusa una rubrica telefonica.
Questa guida illustrerà come creare una rubrica telefonica di base utilizzando HTML, CSS e JavaScript, introducendo concetti fondamentali come la manipolazione del DOM, la gestione degli eventi e lo storage locale.
Struttura HTML della rubrica telefonica
Iniziamo con la struttura HTML dell'applicazione. Creeremo un form per inserire nuovi contatti e una tabella per visualizzare i contatti esistenti.
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Rubrica Telefonica</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<h1>Rubrica Telefonica</h1>
<form id="formContatto">
<input type="text" id="nome" placeholder="Nome" required>
<input type="text" id="telefono" placeholder="Telefono" required>
<button type="submit">Aggiungi Contatto</button>
</form>
<table id="elencoContatti">
<thead>
<tr>
<th>Nome</th>
<th>Telefono</th>
<th>Azioni</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="rubrica.js"></script>
</body>
</html>Aggiungere lo stile con CSS
Con alcuni semplici stili CSS, possiamo rendere l'interfaccia utente più attraente e facile da usare.
/* stile.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}Logica JavaScript
La parte JavaScript gestirà la creazione, visualizzazione e cancellazione dei contatti nella rubrica.
Utilizzeremo il Local Storage del browser per salvare i contatti. Questo permette di mantenere i dati persistenti anche dopo aver chiuso il browser.
document.getElementById('formContatto').addEventListener('submit', function(e) {
e.preventDefault();
let nome = document.getElementById('nome').value;
let telefono = document.getElementById('telefono').value;
let contatti = localStorage.getItem('contatti') ? JSON.parse(localStorage.getItem('contatti')) : [];
contatti.push({ nome, telefono });
localStorage.setItem('contatti', JSON.stringify(contatti));
document.getElementById('formContatto').reset();
visualizzaContatti();
});Una funzione separata si occuperà di leggere i contatti dal Local Storage e di aggiungerli alla tabella.
function visualizzaContatti() {
let contatti = localStorage.getItem('contatti') ? JSON.parse(localStorage.getItem('contatti')) : [];
let corpoTabella = document.querySelector('#elencoContatti tbody');
corpoTabella.innerHTML = '';
contatti.forEach((contatto, indice) => {
let riga = corpoTabella.insertRow();
let cellaNome = riga.insertCell(0);
cellaNome.textContent = contatto.nome;
let cellaTelefono = riga.insertCell(1);
cellaTelefono.textContent = contatto.telefono;
let cellaAzione = riga.insertCell(2);
let bottoneElimina = document.createElement('button');
bottoneElimina.textContent = 'Elimina';
bottoneElimina.setAttribute('onclick', `eliminaContatto(${indice})`);
cellaAzione.appendChild(bottoneElimina);
});
}Infine, implementiamo la funzionalità per eliminare un contatto dalla rubrica e dal Local Storage.
function eliminaContatto(indice) {
let contatti = JSON.parse(localStorage.getItem('contatti'));
contatti.splice(indice, 1);
localStorage.setItem('contatti', JSON.stringify(contatti));
visualizzaContatti();
}La creazione di una rubrica telefonica in JavaScript dimostra come sia possibile sviluppare applicazioni web funzionali con tecnologie front-end standard. Questo progetto introduce concetti importanti come la manipolazione del DOM, l'ascolto degli eventi e l'utilizzo del Local Storage, che sono fondamentali nello sviluppo di applicazioni web moderne. Mentre l'esempio fornito è basilare, può essere esteso con funzionalità aggiuntive come la ricerca dei contatti, la validazione dei numeri di telefono e l'integrazione con API esterne per ulteriori operazioni sui contatti.