Iniziare il tuo viaggio di programmazione potrebbe sembrare scoraggiante in mezzo a una scelta schiacciante di linguaggi e framework. Potresti anche pensare di lasciare che un’IA gestisca tutto! Tuttavia, la programmazione per il web può essere entusiasmante, accessibile e completamente gratuita!
Cosa costruirai
In questo tutorial creerai una semplice applicazione web progettata per memorizzare note di testo contando i caratteri e le parole in tali note.
Questa applicazione salva in modo persistente i dati, consentendo di recuperare il testo anche dopo aver aggiornato la pagina o averla riaperta. È una soluzione pratica per mantenere un rapido accesso al testo importante, che si tratti di indirizzi, URL o altro.
Inoltre, 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à nella codifica.
Come lo costruirai
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:
- HTML: questa è la struttura della tua applicazione web, che stabilisce come è organizzato il contenuto. HTML definisce se il testo è un paragrafo, un’intestazione o un elemento di elenco.
- CSS: 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.
- JavaScript: questo linguaggio di programmazione è fondamentale per infondere funzionalità nella tua applicazione web. JavaScript può creare esperienze interattive, come mostrare/nascondere elementi o creare applicazioni complesse come i giochi.
La struttura dell’app
L’applicazione che stai per creare è composta da tre semplici file: index.html, styles.css, e script.js.
Non esistono requisiti avanzati per eseguire questa app: è sufficiente un semplice browser web. Poiché 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.htmlnel tuo browser per vedere la tua app in azione.
Questa app sfrutta la Web Storage API per salvare il testo, consentendo di conservare le informazioni senza dover scrivere sui file su disco, poiché JavaScript non ha accesso al file system.
Come costruire il Note Taker
Inizia creando i tre file necessari nella stessa directory. In alternativa, puoi scaricare i file da questo repository GitHub .
Costruire la struttura con HTML
Il index.htmlfile definisce la struttura dei contenuti della tua app. Include riferimenti ai file CSS e JavaScript, consentendo al browser di unirli in un’esperienza fluida.
Come qualsiasi documento HTML, il framework principale è costituito da una sezione head con metadati e da un corpo contenente il contenuto:
<!DOCTYPE html>
<html>
<head>
...</head>
<body>
...</body>
</html>
La sezione della testata contiene brevi metadati, tra cui il titolo della pagina (visibile nella barra del titolo del browser) e un collegamento al styles.cssfile:
<title>Text</title>
<link rel="stylesheet"href="styles.css"/>
Il corpo è più dettagliato, compresi i componenti chiave:
<div id="counter">
words: <span id="words">0</span>
/ characters: <span id="chars">0</span>
</div>
<textarea id="text"autofocus="1"></textarea>
<script src="script.js"></script>
L’ divelemento, identificato come “counter”, contiene i conteggi di parole e caratteri. Rimane in alto e si aggiorna dinamicamente man mano che il testo cambia.
È fondamentale tenere presente l’uso degli idattributi: i loro valori univoci aiutano a definire lo stile di questi elementi e a orientarli in base alla funzionalità.
Fornisce textareaun’area in cui gli utenti possono inserire testo con l’ autofocusattributo assicurando che sia pronto per la digitazione al caricamento della pagina. Infine, l’HTML fa riferimento al script.jsfile.
A questo punto, apri index.htmlin un browser. Non funzionerà ancora e potrebbe non apparire del tutto corretto, ma controllare i tuoi progressi a ogni fase è utile.
Rendere le cose più belle con CSS
Sebbene questa app di base non richieda grandi modifiche di design, possiamo migliorarne il layout con un po’ di stile.
Per prima cosa stabiliamo lo stile del corpo per delineare l’aspetto generale:
body {
margin: 0;
padding: 0;
display: grid;
min-height: 100vh;
grid-template-rows: min-content 1fr;
}
Questo CSS impiega un layout a griglia per disporre i conteggi di parole e caratteri in una riga stretta sopra l’area di testo. La grid-template-rowsproprietà determina che la riga di conteggio dovrebbe occupare il minor spazio possibile (min-content) mentre l’area di testo riempie lo spazio rimanente (1fr).
La riga del contatore riceve uno stile di base per distinguerla dall’area di testo, principalmente attraverso il suo sfondo:
#counter {
font-family: sans-serif;
background-color: #f7f7f7;
text-align: center;
width: 100%;
padding: 0 0.5em 0;
}
L’area di testo è formattata in modo da garantire che il testo sia leggibile, lasciando uno spazio bianco adeguato:
textarea {
width: 100%;
height: 100%;
font-size: 16pt;
padding: 1em;
box-sizing: border-box;
outline: 0;
border: none;
border-top: 1px solid #999;
}
Aggiungere funzionalità con JavaScript
Una volta gettate le basi, è il momento di infondere funzionalità nella tua applicazione: il codice che le dà vita!
Prima di immergerti nella codifica, è essenziale delineare la funzionalità prevista. Per questa applicazione, ti concentrerai su due obiettivi principali:
- Mantieni e ricarica il testo inserito.
- Aggiorna dinamicamente il numero di caratteri e parole.
Queste funzioni richiedono aggiornamenti a certi elementi del documento. Pertanto, inizia ottenendo riferimenti a questi nodi usando il getElementByIdmetodo:
const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");
Qui, words, chars, e textareacorrispondono alle rispettive sezioni del documento, identificate dai loro attributi ID.
Successivamente, introduci l’interattività impostando l’app in modo che risponda quando il testo viene modificato:
textarea.addEventListener("input", function(ev) {
localStorage.setItem("text", ev.target.value);
update_counts(ev.target.value);
});
Il addEventListenermetodo 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.
Successivamente, la Web Storage API viene utilizzata per preservare i contenuti correnti dell’area di testo, a cui si accede tramite ev.target.value. Il setItemmetodo associa una chiave ai dati da archiviare.
Per garantire che il testo venga caricato quando l’app viene inizializzata o aggiornata, aggiungi un altro listener:
window.addEventListener("load", function(ev) {
var text = localStorage.getItem("text");
textarea.value = text;
update_counts(text);
});
Questo 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()per aggiornare i conteggi di parole e caratteri.
La funzionalità rimanente risiede nella update_counts()funzione, che si presenta in questo modo:
function update_counts(text) {
chars.innerHTML = text.length;
words.innerHTML = text.split(' ').length;
}
A differenza di una textarea, il testo normale non ha un attributo value; quindi, innerHTMLal suo posto viene usata la proprietà. La lengthproprietà di una stringa recupera il conteggio totale dei caratteri.
Per suddividere il testo in parole, utilizziamo text.split(' '), che divide la stringa a ogni carattere di spazio, producendo un array di parole. La proprietà length dell’array risultante fornisce il numero di parole.
Tuttavia, potresti riscontrare un paio di problemi con questo codice:
- Non conterà correttamente le singole parole su una riga senza caratteri di spazio circostanti.
- Se non è presente alcun testo, verrà segnalata in modo impreciso una singola parola a causa del modo in cui
splitfunziona.
Per risolvere il primo problema, considera di suddividere un’espressione regolare per tenere conto dei caratteri di spazio vuoto: \s. Per risolvere il secondo problema, filtra tutte le stringhe vuote:
words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;
La creazione di utili applicazioni web può essere realizzata con solo pochi file di base! È possibile estendere questa semplice app per prendere appunti integrando funzionalità aggiuntive, come l’impiego della proprietà window.location per accedere agli URL o consentendo il salvataggio di più note variando i nomi passati a localStorage.setItem.
Ulteriori approfondimenti
1. Quali sono i prerequisiti per questo tutorial sulla web app?
Tutto ciò di cui hai bisogno è una conoscenza di base di HTML, CSS e JavaScript. Strumenti come un editor di testo (ad esempio, VSCode) e un browser web saranno utili.
2. Posso modificare questa applicazione web per aggiungere altre funzionalità?
Assolutamente! Questo tutorial fornisce una base. Potresti aggiungere funzionalità come il salvataggio di più note, la categorizzazione delle note o persino l’implementazione di una funzione di ricerca!
3. Come funziona la Web Storage API?
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.
Articoli correlati:
Scegliere un ombrello solare rispetto a pannelli solari aggiuntivi per soluzioni energetiche
14:32
Guida passo passo per il mirroring dello schermo tramite AirPlay su un Mac
14:19
Come trasmettere Plex o Jellyfin direttamente dal tuo terminale
14:04
Lascia un commento