![\"Un](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-example.webp\" "\\"Un")
<\/figure>\nInoltre, l’app tiene traccia dei conteggi di caratteri e parole, offrendo un’eccellente introduzione alla manipolazione delle stringhe. Sebbene l’applicazione sia di base nel design, questo tutorial ti fornisce competenze fondamentali nello sviluppo di app web, sbloccando vaste possibilit\u00e0 nella codifica.<\/p>\n
Come lo costruirai<\/h2>\n
Sebbene le applicazioni web possano variare in modo significativo, in genere integrano tre tecnologie essenziali: HTML, CSS e JavaScript. Ognuno di questi componenti svolge una funzione cruciale nello sviluppo web:<\/p>\n
- \n
- HTML:<\/strong> questa \u00e8 la struttura della tua applicazione web, che stabilisce come \u00e8 organizzato il contenuto. HTML definisce se il testo \u00e8 un paragrafo, un’intestazione o un elemento di elenco.<\/li>\n
- CSS:<\/strong> i fogli di stile a cascata aggiungono stile al tuo contenuto, consentendoti di cambiare colori, font e layout. Puoi usare CSS per rendere gli elementi in grassetto, regolare i bordi e posizionare gli elementi sullo schermo.<\/li>\n
- JavaScript:<\/strong> questo linguaggio di programmazione \u00e8 fondamentale per infondere funzionalit\u00e0 nella tua applicazione web. JavaScript pu\u00f2 creare esperienze interattive, come mostrare\/nascondere elementi o creare applicazioni complesse come i giochi.<\/li>\n<\/ul>\n
![\"La](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-dev-homepage.webp\" "\\"La")
<\/figure>\nLa struttura dell’app<\/h2>\n
L’applicazione che stai per creare \u00e8 composta da tre semplici file:
index.html<\/code>,styles.css<\/code>, escript.js<\/code>.<\/p>\nNon esistono requisiti avanzati per eseguire questa app: \u00e8 sufficiente un semplice browser web. Poich\u00e9 si tratta di un’app front-end, non sono necessari linguaggi di scripting back-end come PHP o server locali. Dopo il completamento, apri semplicemente
index.html<\/code>nel tuo browser per vedere la tua app in azione.<\/p>\nQuesta app sfrutta la Web Storage API per salvare il testo, consentendo di conservare le informazioni senza dover scrivere sui file su disco, poich\u00e9 JavaScript non ha accesso al file system.<\/p>\n
Come costruire il Note Taker<\/h2>\n
Inizia creando i tre file necessari nella stessa directory. In alternativa, puoi scaricare i file da questo repository GitHub<\/a> .<\/p>\n
Costruire la struttura con HTML<\/h3>\n
Il
index.html<\/code>file definisce la struttura dei contenuti della tua app. Include riferimenti ai file CSS e JavaScript, consentendo al browser di unirli in un’esperienza fluida.<\/p>\nCome qualsiasi documento HTML, il framework principale \u00e8 costituito da una sezione head con metadati e da un corpo contenente il contenuto:<\/p>\n
\n<!DOCTYPE html><\/span>
\n<html><\/span>
\n<head><\/span>
\n...<\/head><\/span>
\n<body><\/span>
\n...<\/body><\/span>
\n<\/html><\/span>
\n<\/code><\/p>\nLa sezione della testata contiene brevi metadati, tra cui il titolo della pagina (visibile nella barra del titolo del browser) e un collegamento al
styles.css<\/code>file:<\/p>\n
\n<title>Text<\/title><\/span>
\n<link rel=\"stylesheet\"href=\"styles.css\"\/><\/span>
\n<\/code><\/p>\nIl corpo \u00e8 pi\u00f9 dettagliato, compresi i componenti chiave:<\/p>\n
\n<div id=\"counter\"><\/span>
\nwords: <span id=\"words\">0<\/span><\/span>
\n\/ characters: <span id=\"chars\">0<\/span><\/span>
\n<\/div><\/span>
\n<textarea id=\"text\"autofocus=\"1\"><\/textarea><\/span>
\n<script src=\"script.js\"><\/script><\/span>
\n<\/code><\/p>\nL’
div<\/code>elemento, identificato come “counter”, contiene i conteggi di parole e caratteri. Rimane in alto e si aggiorna dinamicamente man mano che il testo cambia.<\/p>\n\u00c8 fondamentale tenere presente l’uso degli
id<\/code>attributi: i loro valori univoci aiutano a definire lo stile di questi elementi e a orientarli in base alla funzionalit\u00e0.<\/p>\nFornisce
textarea<\/code>un’area in cui gli utenti possono inserire testo con l’autofocus<\/code>attributo assicurando che sia pronto per la digitazione al caricamento della pagina. Infine, l’HTML fa riferimento alscript.js<\/code>file.<\/p>\nA questo punto, apri
index.html<\/code>in un browser. Non funzioner\u00e0 ancora e potrebbe non apparire del tutto corretto, ma controllare i tuoi progressi a ogni fase \u00e8 utile.<\/p>\n![\"Una](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-no-style.webp\" "\\"Una")
<\/figure>\nRendere le cose pi\u00f9 belle con CSS<\/h3>\n
Sebbene questa app di base non richieda grandi modifiche di design, possiamo migliorarne il layout con un po’ di stile.<\/p>\n
Per prima cosa stabiliamo lo stile del corpo per delineare l’aspetto generale:<\/p>\n
\nbody {<\/span>
\n margin: 0;<\/span>
\n padding: 0;<\/span>
\n display: grid;<\/span>
\n min-height: 100vh;<\/span>
\n grid-template-rows: min-content 1fr;<\/span>
\n}<\/span>
\n<\/code><\/p>\nQuesto CSS impiega un layout a griglia<\/a> per disporre i conteggi di parole e caratteri in una riga stretta sopra l’area di testo. La
grid-template-rows<\/code>propriet\u00e0 determina che la riga di conteggio dovrebbe occupare il minor spazio possibile (min-content) mentre l’area di testo riempie lo spazio rimanente (1fr).<\/p>\nLa riga del contatore riceve uno stile di base per distinguerla dall’area di testo, principalmente attraverso il suo sfondo:<\/p>\n
\n#counter {<\/span>
\n font-family: sans-serif;<\/span>
\n background-color: #f7f7f7;<\/span>
\n text-align: center;<\/span>
\n width: 100%;<\/span>
\n padding: 0 0.5em 0;<\/span>
\n}<\/span>
\n<\/code><\/p>\nL’area di testo \u00e8 formattata in modo da garantire che il testo sia leggibile, lasciando uno spazio bianco adeguato:<\/p>\n
\ntextarea {<\/span>
\n width: 100%;<\/span>
\n height: 100%;<\/span>
\n font-size: 16pt;<\/span>
\n padding: 1em;<\/span>
\n box-sizing: border-box;<\/span>
\n outline: 0;<\/span>
\n border: none;<\/span>
\n border-top: 1px solid #999;<\/span>
\n}<\/span>
\n<\/code><\/p>\n![\"L'app](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-with-style.webp\" "\\"L'app")
<\/figure>\nAggiungere funzionalit\u00e0 con JavaScript<\/h3>\n
Una volta gettate le basi, \u00e8 il momento di infondere funzionalit\u00e0 nella tua applicazione: il codice che le d\u00e0 vita!<\/p>\n
Prima di immergerti nella codifica, \u00e8 essenziale delineare la funzionalit\u00e0 prevista. Per questa applicazione, ti concentrerai su due obiettivi principali:<\/p>\n
- \n
- Mantieni e ricarica il testo inserito.<\/li>\n
- Aggiorna dinamicamente il numero di caratteri e parole.<\/li>\n<\/ul>\n
Queste funzioni richiedono aggiornamenti a certi elementi del documento. Pertanto, inizia ottenendo riferimenti a questi nodi usando il
getElementById<\/code>metodo:<\/p>\n
\nconst words = document.getElementById(\"words\");<\/span>
\nconst chars = document.getElementById(\"chars\");<\/span>
\nconst textarea = document.getElementById(\"text\");<\/span>
\n<\/code><\/p>\nQui,
words<\/code>,chars<\/code>, etextarea<\/code>corrispondono alle rispettive sezioni del documento, identificate dai loro attributi ID.<\/p>\nSuccessivamente, introduci l’interattivit\u00e0 impostando l’app in modo che risponda quando il testo viene modificato:<\/p>\n
\ntextarea.addEventListener(\"input\", function(ev) {<\/span>
\n localStorage.setItem(\"text\", ev.target.value);<\/span>
\n update_counts(ev.target.value);<\/span>
\n});<\/span>
\n<\/code><\/p>\nIl
addEventListener<\/code>metodo associa una funzione da attivare quando si verifica un evento specificato. In questo caso, una volta che l’utente interagisce con l’area di testo, l’evento “input” attiva la funzione.<\/p>\nSuccessivamente, la Web Storage API viene utilizzata per preservare i contenuti correnti dell’area di testo, a cui si accede tramite
ev.target.value<\/code>. IlsetItem<\/code>metodo associa una chiave ai dati da archiviare.<\/p>\nPer garantire che il testo venga caricato quando l’app viene inizializzata o aggiornata, aggiungi un altro listener:<\/p>\n
\nwindow.addEventListener(\"load\", function(ev) {<\/span>
\n var text = localStorage.getItem(\"text\");<\/span>
\n textarea.value = text;<\/span>
\n update_counts(text);<\/span>
\n});<\/span>
\n<\/code><\/p>\nQuesto listener risponde all’evento di caricamento della finestra. Al caricamento della finestra, recupera il testo salvato e imposta il valore dell’area di testo di conseguenza, mentre richiama
update_counts()<\/code>per aggiornare i conteggi di parole e caratteri.<\/p>\nLa funzionalit\u00e0 rimanente risiede nella
update_counts()<\/code>funzione, che si presenta in questo modo:<\/p>\n
\nfunction update_counts(text) {<\/span>
\n chars.innerHTML = text.length;<\/span>
\n words.innerHTML = text.split(' ').length;<\/span>
\n}<\/span>
\n<\/code><\/p>\nA differenza di una textarea, il testo normale non ha un attributo value; quindi,
innerHTML<\/code>al suo posto viene usata la propriet\u00e0. Lalength<\/code>propriet\u00e0 di una stringa recupera il conteggio totale dei caratteri.<\/p>\nPer suddividere il testo in parole, utilizziamo
text.split(' ')<\/code>, che divide la stringa a ogni carattere di spazio, producendo un array di parole. La propriet\u00e0 length dell’array risultante fornisce il numero di parole.<\/p>\nTuttavia, potresti riscontrare un paio di problemi con questo codice:<\/p>\n
- \n
- Non conter\u00e0 correttamente le singole parole su una riga senza caratteri di spazio circostanti.<\/li>\n
- Se non \u00e8 presente alcun testo, verr\u00e0 segnalata in modo impreciso una singola parola a causa del modo in cui
split<\/code>funziona.<\/li>\n<\/ol>\nPer risolvere il primo problema, considera di suddividere un’espressione regolare per tenere conto dei caratteri di spazio vuoto:
\\s<\/code>. Per risolvere il secondo problema, filtra tutte le stringhe vuote:<\/p>\n
\n words.innerHTML = text.split(\/\\s\/).filter(function(n) { return n! = ''; }).length;<\/span>
\n<\/code><\/p>\n![\"L'applicazione](\"https:\/\/cdn.howtogeek.blog\/wp-content\/uploads\/2025\/01\/web-app-final.webp\" "\\"L'applicazione")
<\/figure>\nLa creazione di utili applicazioni web pu\u00f2 essere realizzata con solo pochi file di base! \u00c8 possibile estendere questa semplice app per prendere appunti integrando funzionalit\u00e0 aggiuntive, come l’impiego della propriet\u00e0 window.location<\/a> per accedere agli URL o consentendo il salvataggio di pi\u00f9 note variando i nomi passati a
localStorage.setItem<\/code>.<\/p>\nUlteriori approfondimenti<\/h3>\n
1. Quali sono i prerequisiti per questo tutorial sulla web app?<\/strong><\/h4>\n
Tutto ci\u00f2 di cui hai bisogno \u00e8 una conoscenza di base di HTML, CSS e JavaScript. Strumenti come un editor di testo (ad esempio, VSCode) e un browser web saranno utili.<\/p>\n
2. Posso modificare questa applicazione web per aggiungere altre funzionalit\u00e0?<\/strong><\/h4>\n
Assolutamente! Questo tutorial fornisce una base. Potresti aggiungere funzionalit\u00e0 come il salvataggio di pi\u00f9 note, la categorizzazione delle note o persino l’implementazione di una funzione di ricerca!<\/p>\n
3. Come funziona la Web Storage API?<\/strong><\/h4>\n
La Web Storage API consente alle applicazioni Web di archiviare dati nel browser. Archivia i dati in coppie chiave-valore che persistono anche dopo la chiusura del browser, rendendone facile il recupero in seguito.<\/p>\n
- CSS:<\/strong> i fogli di stile a cascata aggiungono stile al tuo contenuto, consentendoti di cambiare colori, font e layout. Puoi usare CSS per rendere gli elementi in grassetto, regolare i bordi e posizionare gli elementi sullo schermo.<\/li>\n