![\"Un](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nConta anche i caratteri e le parole, il che rappresenta una buona introduzione alla gestione delle stringhe (testo). Naturalmente l'app \u00e8 molto semplice: ecco lo scopo! Ma con questo tutorial imparerai le basi dello sviluppo di un'applicazione web e poi il mondo sar\u00e0 nelle tue mani. \ud83e\uddaa\ud83d\udcbb<\/p>\n
Come pensi di costruirlo?<\/h2>\n
Sebbene le applicazioni web siano molto diverse, in genere utilizzano tre tecnologie principali: HTML, CSS e JavaScript. Prima di iniziare \u00e8 fondamentale comprenderne i ruoli. \ud83d\udcda<\/p>\n
- \n
- HTML: Hypertext Markup Language consente di definire la struttura dei contenuti. Con questo strumento \u00e8 possibile contrassegnare un testo in base al suo significato, indicando ad esempio se si tratta di un paragrafo, di un titolo o di un elemento di un elenco.<\/li>\n
- CSS: i fogli di stile a cascata consentono di definire lo stile dei contenuti. Utilizzando questo linguaggio, puoi colorare un paragrafo di verde, rendere tutti i link in grassetto o posizionare una barra laterale accanto all'articolo principale. \ud83c\udfa8<\/li>\n
- JavaScript: con questo linguaggio di programmazione puoi aggiungere funzionalit\u00e0 al tuo sito web. \u00c8 possibile fare in modo che i pulsanti mostrino o nascondano parti del documento quando vengono cliccati oppure implementare un elaboratore di testi completo o un videogioco. \ud83c\udfae<\/li>\n<\/ul>\n
Lui sito web.dev<\/a> (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de informaci\u00f3n sobre tecnolog\u00edas web fundamentales.<\/p>\n
![\"La](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_798_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nLa struttura dell'app<\/h2>\n
L'app che creerai sar\u00e0 composta da tre semplici file: index.html, styles.css e script.js. \ud83d\uddc2\ufe0f<\/p>\n
Non ci sono requisiti particolari per utilizzare l'app, \u00e8 sufficiente un browser web. Non c'\u00e8 alcuna funzionalit\u00e0 backend, quindi non hai bisogno di un linguaggio di scripting come PHP o di un server web locale. Una volta terminato, puoi aprire il file index.html direttamente nel tuo browser<\/a> e tutto si sistemer\u00e0. \ud83d\ude0a<\/p>\n
\u00c8 importante notare che questa app salva il testo senza scriverlo in un file specifico sul disco, poich\u00e9 JavaScript non pu\u00f2 accedere al file system. Utilizza la Web Storage API, una potente alternativa ai cookie. \ud83c\udf6a\ud83d\udcbe<\/p>\n
Come costruire il prenditore di appunti<\/h2>\n
Crea i tre file seguenti nella stessa directory e poi apri index.html in un browser web. In alternativa, puoi scaricare i file da questo repository GitHub<\/a>. \ud83d\udce5<\/p>\n
Costruire la struttura con HTML<\/h3>\n
Il file index.html definisce la struttura del contenuto della tua app in HTML. Includere riferimenti agli altri due file in modo che un browser possa combinarli per il prodotto finale.<\/p>\n
Come tutti i documenti HTML, la struttura di primo livello include una sezione head contenente metadati e una sezione body contenente il contenuto effettivo che apparir\u00e0 sulla pagina:<\/p>\n
codice html<\/span>>\r\n<codice html<\/span>><\/span>\r\n<Testa<\/span>><\/span>\r\n ...\r\nTesta<\/span>><\/span><\/code><\/pre>\n<corpo<\/span>><\/span>
\n…
\ncorpo<\/span>><\/span>
\ncodice html<\/span>><\/span><\/p>\n<\/code><\/pre>\n<\/code><\/pre>\nI metadati nell'intestazione sono molto brevi, con solo un titolo della pagina (che appare nella barra del titolo del browser) e un riferimento al file styles.css:<\/p>\n
<titolo<\/span>><\/span>Testotitolo<\/span>><\/span>\r\n <collegamento<\/span> rel<\/span>="foglio di stile"<\/span> href<\/span>="stili.css"<\/span> \/><\/span>\r\n<\/code><\/pre>\nIl corpo \u00e8 pi\u00f9 complicato, ma le parti importanti sono solo poche:<\/p>\n
<div<\/span> id<\/span>="contatore"<\/span>><\/span>\r\n parole: <campata<\/span> id<\/span>="parole"<\/span>><\/span>0campata<\/span>><\/span>\r\n \/ caratteri: <campata<\/span> id<\/span>="caratteri"<\/span>><\/span>0campata<\/span>><\/span>\r\n div<\/span>><\/span><\/code><\/pre>\n<area di testo<\/span> id<\/span>="testo"<\/span> messa a fuoco automatica<\/span>=\u00ab1\u00bb<\/span>><\/span>area di testo<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<sceneggiatura<\/span> fonte<\/span>=\u00abscript.js\u00bb<\/span>><\/span>sceneggiatura<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<\/code><\/pre>\nL'elemento div contiene il conteggio delle parole e dei caratteri dell'app. Sar\u00e0 posizionato nella parte superiore dell'applicazione web e verr\u00e0 aggiornato ogni volta che il testo cambia.<\/p>\n
Notare gli attributi id, che sono essenziali per l'operazione. Il valore di un id deve essere univoco, affinch\u00e9 l'app possa utilizzarlo per identificare un elemento specifico. In questo modo potremo definire lo stile di questi elementi e anche ottimizzarli quando aggiungeremo funzionalit\u00e0.<\/p>\n
L'area di testo \u00e8 un elemento di un modulo integrato che consente di digitare un testo semplice in un browser. Grazie all'attributo autofocus, sarai pronto a scrivere non appena la pagina verr\u00e0 caricata. Infine, la pagina fa riferimento al file javascript, script.js.<\/p>\n
A questo punto puoi aprire il file index.html in un browser. Al momento non far\u00e0 nulla e non avr\u00e0 nemmeno un bell'aspetto, ma \u00e8 utile testare l'app in ogni fase per assicurarsi che le funzioni di base funzionino come previsto.<\/p>\n
![\"Una](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_678_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nRenderli pi\u00f9 accattivanti con CSS<\/h3>\n
I CSS consentono di definire lo stile di parti della pagina web, prendendo di mira quelle parti e specificando valori per propriet\u00e0 come font-size e background-color. Questa applicazione di esempio non ha bisogno di un design particolarmente raffinato perch\u00e9 la sua interfaccia \u00e8 molto semplice. Tuttavia, possiamo smussare gli angoli pi\u00f9 grezzi con un tocco di stile. \ud83c\udfa8\u2728<\/p>\n
Per prima cosa, definisci lo stile del corpo per definire il design generale:<\/p>\n
corpo<\/span> {\r\n margine<\/span>: 0;\r\n imbottitura<\/span>: 0;\r\n display<\/span>: griglia<\/span>;\r\n altezza minima<\/span>: 100vh<\/span>;\r\n righe-modello-griglia<\/span>: contenuto minimo<\/span> 1fr<\/span>;\r\n}\r\n<\/code><\/pre>\nEste CSS utiliza la disposici\u00f3n en cuadr\u00edcula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo m\u00e1s corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).<\/p>\n
La riga del contatore ha uno stile di base per differenziarla dal resto del testo, principalmente attraverso lo sfondo:<\/p>\n
#counter<\/span> {\r\n famiglia di caratteri<\/span>: sans-serif<\/span>;\r\n colore di sfondo<\/span>: #f7f7f7<\/span>;\r\n allineamento del testo<\/span>: centro<\/span>;\r\n larghezza<\/span>: 100%;\r\n imbottitura<\/span>: 0.5em<\/span> 0;\r\n}\r\n<\/code><\/pre>\nInfine, l'area di testo \u00e8 formattata in modo da visualizzare un testo leggibile, con spazio sufficiente per respirare. La linea che separa i conteggi dal testo \u00e8 in realt\u00e0 il bordo superiore di quest'area di testo.<\/p>\n
area di testo<\/span> {\r\n larghezza<\/span>: 100%;\r\n altezza<\/span>: 100%;\r\n dimensione del carattere<\/span>: 16punto<\/span>;\r\n imbottitura<\/span>: 1In<\/span>;\r\n dimensionamento delle scatole<\/span>: riquadro di confine<\/span>;\r\n schema<\/span>: 0;\r\n confine<\/span>: nessuno<\/span>;\r\n bordo superiore<\/span>: 1px<\/span> solido<\/span> #999<\/span>;\r\n}<\/code><\/pre>\n![\"L'app](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_152_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nAggiungere funzionalit\u00e0 con JavaScript<\/h3>\n
Una volta definiti la struttura e lo stile, sei pronto ad aggiungere funzionalit\u00e0: il codice che consente a questa semplice app di fare effettivamente qualcosa. \ud83d\udee0\ufe0f<\/p>\n
Prima di iniziare a scrivere anche il codice pi\u00f9 semplice, \u00e8 una buona idea capire cosa si vuole che faccia. In questo caso, ci sono solo un paio di requisiti generali:<\/p>\n
- \n
- Salva il testo inserito e ricaricalo quando necessario.<\/li>\n
- Aggiorna il conteggio dei caratteri e delle parole per fornire statistiche in tempo reale. \ud83d\udcca<\/li>\n<\/ul>\n
Entrambi i requisiti comportano l'aggiornamento degli elementi presenti nel documento. Quindi lo script inizia ottenendo riferimenti a questi nodi utilizzando il metodo getElementById:<\/p>\n
costante<\/span> parole = documento<\/span>.getElementById("parole"<\/span>);\r\ncostante<\/span> caratteri = documento<\/span>.getElementById("caratteri"<\/span>);\r\ncostante<\/span> area di testo = documento<\/span>.getElementById("testo"<\/span>);\r\n<\/code><\/pre>\nSi noti che parole, caratteri e testo sono gli ID dei rispettivi elementi nel documento, assegnati nel file HTML con l'attributo id.<\/p>\n
Ora abbiamo bisogno che l'app reagisca quando il testo viene modificato:<\/p>\n
area di testo.addEventListener("ingresso"<\/span>, funzione<\/span>(anche<\/span>) <\/span>{ localStorage.setItem("testo"<\/span>, ev.valore.destinazione); aggiorna_conteggi(ev.target.value); });\r\n<\/code><\/pre>\nUn event listener \u00e8 una funzione che JavaScript eseguir\u00e0 automaticamente quando si verifica un determinato evento. In questo caso, colleghiamo un listener al nodo textarea, che viene eseguito quando si verifica l'evento "input". Cio\u00e8 quando qualcuno interagisce con l'area di testo.<\/p>\n
Successivamente, utilizziamo la Web Storage API per salvare il contenuto corrente dell'area di testo, che proviene da ev.target.value. In questa struttura, ev \u00e8 un oggetto che rappresenta l'evento che ha attivato l'ascoltatore, ev.target \u00e8 il nodo che ha ricevuto l'evento ed ev.target.value \u00e8 il testo di quell'area di testo.<\/p>\n
Il metodo setItem accetta due parametri: un nome chiave da associare ai dati e i dati effettivi da memorizzare.<\/p>\n
Successivamente, chiamiamo update_counts(), passando lo stesso testo. Spiegheremo questa funzionalit\u00e0 tra un attimo.<\/p>\n
Ora che abbiamo salvato il testo, potrai caricarlo nuovamente quando l'app si apre o si ricarica. Possiamo risolvere questo problema utilizzando un altro listener:<\/p>\n
finestra<\/span>.addEventListener("carico"<\/span>, funzione<\/span>(anche<\/span>) <\/span>{\r\n variet\u00e0<\/span> testo = localStorage.getItem("testo"<\/span>); textarea.value = testo; aggiorna_conteggi(testo); });\r\n<\/code><\/pre>\nQuesto listener gestisce l'evento di caricamento che si verifica sull'oggetto finestra, una rappresentazione di primo livello della finestra del browser. Quando la finestra viene caricata, una chiamata a getItem() restituisce il valore di testo memorizzato dalla memoria locale. Questo codice imposta quindi il valore dell'area di testo sul testo caricato e, come il listener sopra, chiama update_counts() con questo testo.<\/p>\n
Il lavoro rimanente viene svolto nella funzione update_counts() che si presenta in questo modo:<\/p>\n
funzione<\/span>\u00a0aggiorna_conteggi<\/span>(testo<\/span>) <\/span>{ chars.innerHTML = lunghezza testo; parole.innerHTML = testo.split(' '<\/span>).lunghezza; }\r\n<\/code><\/pre>\nA differenza di un'area di testo, il testo normale non ha una propriet\u00e0 valore, quindi impostiamo al suo posto la propriet\u00e0 innerHTML. La propriet\u00e0 lunghezza di una stringa \u00e8 una semplice propriet\u00e0 di sola lettura che ci fornisce il numero di caratteri.<\/p>\n
text.split(' ') divide la stringa in corrispondenza degli spazi, restituendo il risultato come un array di stringhe. Come le stringhe, gli array hanno una propriet\u00e0 lunghezza che fornisce il numero di elementi in un array.<\/p>\n
Tuttavia, se si testa questo codice, si potrebbero notare un paio di errori:<\/p>\n
- \n
- Non conter\u00e0 correttamente una parola isolata su una riga, poich\u00e9 non ci sono spazi attorno ad essa.<\/li>\n
- In assenza di testo, verr\u00e0 segnalata una sola parola, a causa del funzionamento della divisione.<\/li>\n<\/ol>\n
Per risolvere il primo problema, \u00e8 possibile suddividere in base a un'espressione regolare (\\s significa "carattere vuoto") anzich\u00e9 a uno spazio. Per risolvere il secondo, filtrare le stringhe vuote dal risultato:<\/p>\n
parole.innerHTML = testo.split(\/\\S\/<\/span>).filtro(funzione<\/span>(N<\/span>) <\/span>{ ritorno<\/span> n != ''<\/span>; }).lunghezza;\r\n<\/code><\/pre>\nSe non hai capito bene questa frase, controlla le pagine MDN per diviso<\/a> E filtro<\/a>.<\/p>\n
![\"Applicazione](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_129_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\n
\n