Un classico esercizio introduttivo per comprendere le potenzialità di JavaScript applicate alla programmazione Web: una TODO list. Probabilmente in rete ne esistono decine di versioni, anche graficamente molto accattivanti. Qui ci limitiamo ad un esempio piuttosto scolastico con l’ausilio del front-end Bootstrap (alla digitazione/aggiornamento è disponibile la versione 5.3) per rendere più gradevole l’interfaccia. Questo genere di applicazioni sono molto valide come esempio e spesso son utilizzate anche come test rapido nei colloqui di lavoro, quindi da tenere bene a mente.
Vogliamo vedere una barra in alto in cui inserire un testo e selezionare da una opportuna tendina la tipologia di appunto (ad es. Casa, Lavoro, Hobby) e un bottone per inserire. In base alla tipologia, devono comparire le voci inserite, una sotto l’altra, in un riquadro di colore differente (ad esempio azzurro, blu, giallo).
La pagina HTML
La pagina HTML contiene pochi essenziali elementi realizzati graficamente grazie a Bootsrtrap. L’alunno può fare riferimento al manuale reperibile online cercando di volta in volta gli elementi di interesse con le loro proprietà. Gli elementi di questo lavoro sono esplicitamente ripresi da quelli di esempio e leggermente personalizzati.
Abbiamo scelto di realizzare un griglia a 3 colonne per avere una colonna centrale leggermente più grande delle laterali. Sempre nella colonna centrale abbiamo inserito la form con un campo di testo, una tendina select/option ed un pulsante. Attività fondamentale da fare e che il manuale di Bootstrap non fa affatto, è inserire un campo id per gli oggetti che devono interagire poi con l’utente e il codice.
Se la parte in alto subito visibile è piuttosto intuitiva, lo è meno inserire sin dall’inizio un div vuoto, con un id a piacere, qui “lista”, che sarà la nostra ancora a cui aggiungere di volta in volta le voci della lista.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TODO List JS</title>
<link href="css/stile.css" rel="stylesheet" >
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="container text-center">
<div class="row">
<div class="col"></div>
<div class="col-7">
<h1>TODO List JS</h1>
<form>
<div class="input-group mb-3">
<input type="text" class="form-control" id="elemento" placeholder="Inserisci una attività">
<div class="container w-25">
<select class="form-select" id="tendina" aria-label="Scegli tipo">
<option value="casa">Casa</option>
<option value="lavoro">Lavoro</option>
<option value="hobby">Hobby</option>
</select>
</div>
<button class="btn btn-success" id="btnAggiungi" type="button">+</button>
</div>
</form>
<div id="lista">
<!--div class="container-fluid border border-primary">testo di prova</div-->
</div>
</div>
<div class="col"></div>
</div>
</div>
</div>
<script src="js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>Il file JavaScript
Lo script js non ha nulla di trascendentale. Intanto intercettiamo il click del bottone con eventListener, intercettiamo il div dove posizionare la lista di elementi. Prepariamo quindi la funzione aggiungi che viene scatenata al click del bottone. Qui dobbiamo prelevare i valori degli input e della tendina. A questo punto siamo pronti ad aggiungere gli elementi. Qui partiamo dal presupposto che dobbiamo generare codice dinamico, elementi che saranno presenti nel DOM del browser in memoria, ma non nel suo codice sorgente.
Per creare un nuovo elemento c’è la funzionalità document.createElement(“div”); dove tra parentesi possiamo specificare in realtà un qualsiasi tag HTML, come td, tr, p, li, ul ecc. A questo poi possiamo aggiungere un id o delle classi in modo molto semplice e intuitivo con la funzione nomeoggetto.classList.add(“classecss”); Qui ovviamente aggiungiamo classi preconfezionate di Bootstrap, ma nulla toglie che possiamo aggiungere nostri fogli CSS con classi personalizzate.
All’interno dei tag creati posso aggiungere testo o altro con document.createTextNode(“prova”); Creati i vari elementi li dobbiamo legare secondo la struttura gerarchica che ci siamo prefissati. Un padre può includere sotto di se/annidati altri elementi quindi scriverò qualcosa come padre.appendChild(figlio); fino a legare tutto al div realmente presente nel codice sorgente.
Unica anomalia è cambiare il colore ai bordi del contenitore ma il lettore non sarà certamente stravolto da un semplice if che gestisce i tre casi della tendina.
let bottone = document.querySelector("#btnAggiungi");
bottone.addEventListener("click",aggiungi, true);
let lista = document.querySelector("#lista");
function aggiungi()
{
let testo = document.querySelector("#elemento");
let valoreTesto = testo.value;
let tendina = document.querySelector("#tendina");
let elemento = document.createElement("div");
elemento.classList.add("container-fluid");
elemento.classList.add("border");
if (tendina.value == "casa")
elemento.classList.add("border-primary");
if (tendina.value == "lavoro")
elemento.classList.add("border-warning");
if (tendina.value == "hobby")
elemento.classList.add("border-info");
elemento.classList.add("rounded");
elemento.classList.add("p-1");
elemento.classList.add("mt-2");
let testoElemento = document.createTextNode(valoreTesto);
elemento.appendChild(testoElemento);
lista.appendChild(elemento);
}
Ultima modifica 6 Aprile 2023