Crea la tua prima app web: note + contatore facile e veloce 📝⚡

Iniziare a programmare può sembrare complicato, con così tanti linguaggi, framework e metodologie da considerare. A volte può sembrare più semplice delegare tutto a un'intelligenza artificiale. Non preoccuparti! Programmare per il web può essere semplice, divertente e, soprattutto, completamente gratuito! 🌐✨

Cosa stai per costruire

Seguendo questo tutorial, creerai una semplice applicazione web per memorizzare note di testo e contare caratteri e parole.

L'app conserverà i dati, quindi ricorderà il testo quando ricarichi o riapri la pagina. Ciò significa che avrai un modo comodo per salvare qualsiasi testo a cui vorrai fare riferimento in seguito, come indirizzi, URL, ecc. 📄🔗

Conta anche i caratteri e le parole, il che rappresenta una buona introduzione alla gestione delle stringhe (testo). Naturalmente l'app è molto semplice: ecco lo scopo! Ma con questo tutorial imparerai le basi dello sviluppo di un'applicazione web e poi il mondo sarà nelle tue mani. 🦪💻

Come pensi di costruirlo?

Sebbene le applicazioni web siano molto diverse, in genere utilizzano tre tecnologie principali: HTML, CSS e JavaScript. Prima di iniziare è fondamentale comprenderne i ruoli. 📚

• HTML: Hypertext Markup Language consente di definire la struttura dei contenuti. Con questo strumento è 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.
• 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. 🎨
• JavaScript: con questo linguaggio di programmazione puoi aggiungere funzionalità al tuo sito web. È 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. 🎮

Lui sito web.dev (scritto dai membri del team Chrome) e MDN, la rete degli sviluppatori Mozilla, sono due ottime fonti di informazioni sulle tecnologie web fondamentali.

La struttura dell'app

L'app che creerai sarà composta da tre semplici file: index.html, styles.css e script.js. 🗂️

Non ci sono requisiti particolari per utilizzare l'app, è sufficiente un browser web. Non c'è alcuna funzionalità 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 e tutto si sistemerà. 😊

È importante notare che questa app salva il testo senza scriverlo in un file specifico sul disco, poiché JavaScript non può accedere al file system. Utilizza la Web Storage API, una potente alternativa ai cookie. 🍪💾

Come costruire il prenditore di appunti

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. 📥

Costruire la struttura con HTML

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.

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à sulla pagina:

codice html>
<codice html>
<Testa>
    ...
Testa>

<corpo>
…
corpo>
codice html>

I 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:

    <titolo>Testotitolo>
    <collegamento rel="foglio di stile" href="stili.css" />

Il corpo è più complicato, ma le parti importanti sono solo poche:

    <div id="contatore">
        parole: <campata id="parole">0campata>
        / caratteri: <campata id="caratteri">0campata>
    div>

<area di testo id="testo" messa a fuoco automatica=«1»>area di testo>

<sceneggiatura fonte=«script.js»>sceneggiatura>

L'elemento div contiene il conteggio delle parole e dei caratteri dell'app. Sarà posizionato nella parte superiore dell'applicazione web e verrà aggiornato ogni volta che il testo cambia.

Notare gli attributi id, che sono essenziali per l'operazione. Il valore di un id deve essere univoco, affinché 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à.

L'area di testo è 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à caricata. Infine, la pagina fa riferimento al file javascript, script.js.

A questo punto puoi aprire il file index.html in un browser. Al momento non farà nulla e non avrà nemmeno un bell'aspetto, ma è utile testare l'app in ogni fase per assicurarsi che le funzioni di base funzionino come previsto.

Renderli più accattivanti con CSS

I CSS consentono di definire lo stile di parti della pagina web, prendendo di mira quelle parti e specificando valori per proprietà come font-size e background-color. Questa applicazione di esempio non ha bisogno di un design particolarmente raffinato perché la sua interfaccia è molto semplice. Tuttavia, possiamo smussare gli angoli più grezzi con un tocco di stile. 🎨✨

Per prima cosa, definisci lo stile del corpo per definire il design generale:

corpo {
    margine: 0;
    imbottitura: 0;
    display: griglia;
    altezza minima: 100vh;
    righe-modello-griglia: contenuto minimo 1fr;
}

Questo CSS utilizza la disposizione della griglia per posizionare il conteggio delle parole e dei caratteri in una riga stretta sopra l'area di testo. La proprietà grid-template-rows specifica che la riga di conteggio deve essere la più corta possibile (min-content) e che l'area di testo deve riempire lo spazio rimanente (1fr).

La riga del contatore ha uno stile di base per differenziarla dal resto del testo, principalmente attraverso lo sfondo:

#counter {
    famiglia di caratteri: sans-serif;
    colore di sfondo: #f7f7f7;
    allineamento del testo: centro;
    larghezza: 100%;
    imbottitura: 0.5em 0;
}

Infine, l'area di testo è formattata in modo da visualizzare un testo leggibile, con spazio sufficiente per respirare. La linea che separa i conteggi dal testo è in realtà il bordo superiore di quest'area di testo.

area di testo {
    larghezza: 100%;
    altezza: 100%;
    dimensione del carattere: 16punto;
    imbottitura: 1In;
    dimensionamento delle scatole: riquadro di confine;
    schema: 0;
    confine: nessuno;
    bordo superiore: 1px solido #999;
}

Aggiungere funzionalità con JavaScript

Una volta definiti la struttura e lo stile, sei pronto ad aggiungere funzionalità: il codice che consente a questa semplice app di fare effettivamente qualcosa. 🛠️

Prima di iniziare a scrivere anche il codice più semplice, è una buona idea capire cosa si vuole che faccia. In questo caso, ci sono solo un paio di requisiti generali:

• Salva il testo inserito e ricaricalo quando necessario.
• Aggiorna il conteggio dei caratteri e delle parole per fornire statistiche in tempo reale. 📊

Entrambi i requisiti comportano l'aggiornamento degli elementi presenti nel documento. Quindi lo script inizia ottenendo riferimenti a questi nodi utilizzando il metodo getElementById:

costante parole = documento.getElementById("parole");
costante caratteri = documento.getElementById("caratteri");
costante area di testo = documento.getElementById("testo");

Si noti che parole, caratteri e testo sono gli ID dei rispettivi elementi nel documento, assegnati nel file HTML con l'attributo id.

Ora abbiamo bisogno che l'app reagisca quando il testo viene modificato:

area di testo.addEventListener("ingresso", funzione(anche) { localStorage.setItem("testo", ev.valore.destinazione); aggiorna_conteggi(ev.target.value); });

Un event listener è una funzione che JavaScript eseguirà 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è quando qualcuno interagisce con l'area di testo.

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 è un oggetto che rappresenta l'evento che ha attivato l'ascoltatore, ev.target è il nodo che ha ricevuto l'evento ed ev.target.value è il testo di quell'area di testo.

Il metodo setItem accetta due parametri: un nome chiave da associare ai dati e i dati effettivi da memorizzare.

Successivamente, chiamiamo update_counts(), passando lo stesso testo. Spiegheremo questa funzionalità tra un attimo.

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:

finestra.addEventListener("carico", funzione(anche) {
    varietà testo = localStorage.getItem("testo"); textarea.value = testo; aggiorna_conteggi(testo); });

Questo 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.

Il lavoro rimanente viene svolto nella funzione update_counts() che si presenta in questo modo:

funzione aggiorna_conteggi(testo) { chars.innerHTML = lunghezza testo; parole.innerHTML = testo.split(' ').lunghezza; }

A differenza di un'area di testo, il testo normale non ha una proprietà valore, quindi impostiamo al suo posto la proprietà innerHTML. La proprietà lunghezza di una stringa è una semplice proprietà di sola lettura che ci fornisce il numero di caratteri.

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à lunghezza che fornisce il numero di elementi in un array.

Tuttavia, se si testa questo codice, si potrebbero notare un paio di errori:

1. Non conterà correttamente una parola isolata su una riga, poiché non ci sono spazi attorno ad essa.
2. In assenza di testo, verrà segnalata una sola parola, a causa del funzionamento della divisione.

Per risolvere il primo problema, è possibile suddividere in base a un'espressione regolare (\s significa "carattere vuoto") anziché a uno spazio. Per risolvere il secondo, filtrare le stringhe vuote dal risultato:

    parole.innerHTML = testo.split(/\S/).filtro(funzione(N) { ritorno n != ''; }).lunghezza;

Se non hai capito bene questa frase, controlla le pagine MDN per diviso E filtro.

È possibile creare numerose applicazioni web utili con pochi file. È anche possibile estendere questa semplice app per appunti per aggiungere altre funzionalità. Ad esempio, puoi usare il proprietà window.location per recuperare l'URL corrente e supportare più note variando il nome passato a localStorage.setItem. 🗒️🌍