{"id":2039,"date":"2026-10-12T15:35:58","date_gmt":"2026-10-12T13:35:58","guid":{"rendered":"https:\/\/www.vr-m.it\/sito\/?p=2039"},"modified":"2026-10-12T15:35:58","modified_gmt":"2026-10-12T13:35:58","slug":"4-html-css-e-javascript","status":"publish","type":"post","link":"https:\/\/www.vr-m.it\/sito\/2026\/10\/12\/4-html-css-e-javascript\/","title":{"rendered":"4. HTML, CSS e JavaScript"},"content":{"rendered":"

HTML, CSS e JavaScript: realizziamo una lista dei compiti<\/h1>\n

Tecnologie e Progettazione di Sistemi Informatici e di Telecomunicazioni | Laboratorio guidato<\/p>\n

Obiettivo: mettere in relazione struttura, presentazione e comportamento realizzando una piccola applicazione web utilizzabile direttamente nel browser.<\/p>\n

6.1 Il progetto: una lista interattiva<\/h1>\n

Dopo aver studiato separatamente HTML5, CSS e JavaScript, realizziamo un\u2019applicazione che consente di annotare le attivit\u00e0 da svolgere. Chi usa la pagina potr\u00e0 inserire un compito, contrassegnarlo come completato con un clic ed eliminarlo con un doppio clic. Un messaggio riepilogher\u00e0 quanti elementi risultano conclusi.<\/p>\n

HTML definisce campo di inserimento, pulsante, elenco e testo di stato; CSS ne cura la leggibilit\u00e0 e distingue i compiti completati; JavaScript gestisce gli eventi e aggiorna gli elementi della pagina tramite DOM.<\/p>\n

Crea una cartella chiamata lista-compiti e al suo interno tre file: index.html, stile.css e script.js. I nomi utilizzati nei collegamenti devono corrispondere esattamente ai file creati.<\/p>\n

6.2 Il file HTML: gli elementi dell\u2019interfaccia<\/h1>\n

Nel documento HTML inseriamo una sezione principale che contiene il titolo, un campo di testo, un pulsante, un elenco inizialmente vuoto e un paragrafo informativo. Gli attributi id permettono allo script di individuare gli elementi interessati.<\/p>\n\n\n\n
<!DOCTYPE html>
\n<html lang=”it”>
\n<head>
\n<meta charset=”UTF-8″>
\n<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
\n<title>Lista dei compiti<\/title>
\n<link rel=”stylesheet” href=”stile.css”>
\n<\/head>
\n<body>
\n<main class=”scheda”>
\n<h1>I miei compiti<\/h1>
\n<div class=”riga-input”>
\n<input type=”text” id=”nuovo” placeholder=”Scrivi un compito…”>
\n<button id=”aggiungi”>Aggiungi<\/button>
\n<\/div>
\n<ul id=”lista”><\/ul>
\n<p id=”stato”>Nessun compito in lista<\/p>
\n<\/main>
\n<script src=”script.js”><\/script>
\n<\/body>
\n<\/html><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Osserva che <link> richiama il foglio di stile e <script> carica il programma JavaScript. Il tag <script> \u00e8 posto alla fine del body: in questo modo, quando viene eseguito, gli elementi HTML sono gi\u00e0 stati creati.<\/p>\n

6.3 Il file CSS: presentazione e stato dei compiti<\/h1>\n

Definiamo una scheda centrale, colori coerenti e un aspetto riconoscibile per i pulsanti. La classe fatto sar\u00e0 applicata da JavaScript alle attivit\u00e0 completate: il testo apparir\u00e0 grigio e barrato.<\/p>\n\n\n\n
body {
\nfont-family: Verdana, sans-serif;
\nbackground: linear-gradient(135deg, #1f4e79, #2e75b6);
\nmin-height: 100vh;
\nmargin: 0;
\ndisplay: flex;
\njustify-content: center;
\nalign-items: center;
\n}
\n.scheda {
\nbackground: white;
\nwidth: 90%;
\nmax-width: 500px;
\npadding: 30px;
\nborder-radius: 12px;
\nbox-shadow: 0 8px 20px rgba(0,0,0,.3);
\n}
\nh1 { color: #1f4e79; text-align: center; }
\n.riga-input { display: flex; gap: 10px; }
\ninput {
\nflex: 1;
\nmin-width: 0;
\npadding: 10px;
\nfont-size: 16px;
\nborder: 2px solid #8eaadb;
\nborder-radius: 6px;
\n}
\nbutton {
\nbackground: #1f4e79;
\ncolor: white;
\nborder: none;
\npadding: 10px 16px;
\nborder-radius: 6px;
\ncursor: pointer;
\n}
\nbutton:hover { background: #2e75b6; }
\nli {
\nlist-style: none;
\npadding: 10px;
\nmargin-top: 8px;
\nbackground: #f2f6fb;
\nborder-radius: 6px;
\ncursor: pointer;
\n}
\nli.fatto { text-decoration: line-through; color: gray; }<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

La regola li.fatto riguarda esclusivamente gli elementi <li> ai quali \u00e8 stata assegnata la classe fatto. In questo modo il programma non deve modificare direttamente i colori.<\/p>\n

6.4 Il file JavaScript: azioni e aggiornamenti<\/h1>\n

Il programma recupera gli elementi tramite getElementById, controlla il testo immesso e crea dinamicamente un nuovo elemento <li>. A ogni modifica aggiorna anche il riepilogo delle attivit\u00e0.<\/p>\n\n\n\n
const campo = document.getElementById(“nuovo”);
\nconst bottone = document.getElementById(“aggiungi”);
\nconst lista = document.getElementById(“lista”);
\nconst stato = document.getElementById(“stato”);<\/p>\n

function aggiornaStato() {
\nconst totale = lista.children.length;
\nconst fatti = lista.querySelectorAll(“.fatto”).length;
\nif (totale === 0) {
\nstato.textContent = “Nessun compito in lista”;
\n} else {
\nstato.textContent = fatti + ” fatti su ” + totale;
\n}
\n}<\/p>\n

function aggiungiCompito() {
\nconst testo = campo.value.trim();
\nif (testo === “”) {
\nalert(“Scrivi prima un compito!”);
\nreturn;
\n}<\/p>\n

const voce = document.createElement(“li”);
\nvoce.textContent = testo;<\/p>\n

voce.addEventListener(“click”, function () {
\nvoce.classList.toggle(“fatto”);
\naggiornaStato();
\n});<\/p>\n

voce.addEventListener(“dblclick”, function () {
\nvoce.remove();
\naggiornaStato();
\n});<\/p>\n

lista.appendChild(voce);
\ncampo.value = “”;
\naggiornaStato();
\n}<\/p>\n

bottone.addEventListener(“click”, aggiungiCompito);
\ncampo.addEventListener(“keydown”, function (evento) {
\nif (evento.key === “Enter”) {
\naggiungiCompito();
\n}
\n});<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

La funzione trim() elimina gli spazi iniziali e finali, evitando l\u2019inserimento di voci vuote. createElement() crea un elemento, appendChild() lo aggiunge alla lista e remove() lo elimina. classList.toggle() attiva o disattiva la classe CSS. Il tasto Invio richiama la stessa funzione del pulsante.<\/p>\n

Nota tecnica: il doppio clic produce anche eventi click; nell\u2019esempio l\u2019elemento viene comunque rimosso correttamente. Per applicazioni pi\u00f9 complesse sarebbe preferibile prevedere un pulsante Elimina dedicato, anche per migliorare l\u2019accessibilit\u00e0.<\/p>\n

6.5 Come collaborano i tre file<\/h1>\n

Supponiamo di digitare \u201cStudiare il DOM\u201d e premere Aggiungi. Il browser mostra il campo e il pulsante definiti in HTML. L\u2019evento click avvia la funzione JavaScript, che legge il testo, crea un nuovo elemento <li> e lo inserisce nell\u2019elenco. Il CSS applica immediatamente lo stile previsto per tutte le voci. Se si clicca sul compito, JavaScript aggiunge la classe fatto e il CSS mostra il testo barrato. Infine, il riepilogo viene aggiornato leggendo il numero delle voci presenti e completate.<\/p>\n

Questo esempio dimostra la separazione delle responsabilit\u00e0: HTML descrive cosa esiste, CSS stabilisce come appare, JavaScript definisce cosa accade quando si interagisce con la pagina.<\/p>\n

Esercitazione e verifica<\/h1>\n
    \n
  1. Apri index.html nel browser e inserisci tre attivit\u00e0. 2. Contrassegnane una come completata e verifica il conteggio. 3. Elimina una voce con doppio clic. 4. Cambia il colore del pulsante nel CSS e verifica che non occorra modificare HTML o JavaScript. 5. Spiega quale istruzione crea una nuova voce e quale modifica il suo aspetto quando viene completata.<\/li>\n<\/ol>\n

    Per approfondire: aggiungi un pulsante \u201cElimina completati\u201d oppure impedisci l\u2019inserimento di attivit\u00e0 duplicate. Queste modifiche richiedono ulteriori controlli JavaScript.<\/p>\n

    \"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    HTML, CSS e JavaScript: realizziamo una lista dei compiti Tecnologie e Progettazione di Sistemi Informatici e di Telecomunicazioni | Laboratorio guidato Obiettivo: mettere in relazione struttura, presentazione e comportamento realizzando una piccola applicazione web utilizzabile direttamente nel browser. 6.1 Il progetto: una lista interattiva Dopo aver studiato separatamente HTML5, CSS e JavaScript, realizziamo un\u2019applicazione che … <\/p>\n

    Leggi tutto “4. HTML, CSS e JavaScript”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":2041,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[66],"class_list":["post-2039","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-informatica","tag-tpsit"],"_links":{"self":[{"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/posts\/2039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/comments?post=2039"}],"version-history":[{"count":1,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/posts\/2039\/revisions"}],"predecessor-version":[{"id":2042,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/posts\/2039\/revisions\/2042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/media\/2041"}],"wp:attachment":[{"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/media?parent=2039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/categories?post=2039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/tags?post=2039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}