• Chi siamo
  • Annunciare
  • politica sulla riservatezza
  • Contattaci
Notizie MasterTrend
  • Casa
    • BLOG
    • SERVIZIO TECNICO
    • NEGOZIO
  • Tutorial
  • Hardware
  • gioco
  • Cellulari
  • Sicurezza
  • Finestre
  • AI
  • Software
  • Reti
  • Notizia
Nessun risultato
Vedi tutti i risultati
  • Casa
    • BLOG
    • SERVIZIO TECNICO
    • NEGOZIO
  • Tutorial
  • Hardware
  • gioco
  • Cellulari
  • Sicurezza
  • Finestre
  • AI
  • Software
  • Reti
  • Notizia
Nessun risultato
Vedi tutti i risultati
Notizie MasterTrend
Nessun risultato
Vedi tutti i risultati
Inizio Tutorial

Crea la tua prima app web e impara a programmare senza stress 🚀💻

Approfondimenti di MasterTrend di Approfondimenti di MasterTrend
13 maggio 2025
In Tutorial
Tempo di lettura:Lettura di 10 minuti
A A
0
Crea le tue prime note + contatore per app web in modo semplice e veloce
1
CONDIVISO
4
Visualizzazioni
Condividi su FacebookCondividi su Twitter

Contenuto

  1. Crea la tua prima app web: note + contatore facile e veloce 📝⚡
  2. Cosa stai per costruire
  3. Come pensi di costruirlo?
  4. La struttura dell'app
  5. Come costruire il prenditore di appunti
    1. Costruire la struttura con HTML
    2. Renderli più accattivanti con CSS
    3. Aggiungere funzionalità con JavaScript
    4. Pubblicazioni correlate

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. 📄🔗

Un esempio di una semplice applicazione web basata su testo che visualizza note, tra cui una voce di calendario e un elenco di URL.

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 homepage del sito web.dev con risorse didattiche per HTML, CSS e JavaScript.

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.

Una vista dell'app web per prendere appunti con gli stili predefiniti del browser, che mostra tutto raggruppato nell'angolo in alto a sinistra.

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;
}
L'app per prendere appunti con stili personalizzati visualizza la barra di controllo in alto, con un'area di testo a grandezza naturale in basso.

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.

Applicazione web con testo di esempio, che mostra il conteggio accurato dei caratteri e delle parole.

È 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. 🗒️🌍

Condividi questo:
49Fai clic su Mi PiaceLinkedInPinterestXRedditTumblrCielo bluDiscussioniCondividere
49
AZIONI

Pubblicazioni correlate

  • Come risolvere Qualcosa è andato storto durante l'errore di Twitter
  • Come scaricare video incorporati gratuitamente nel 2024
  • I migliori strumenti diagnostici per Windows 10/11
  • AMD Radeon RX 7000 5 e 6 nanometri
  • Skin Intel Alder Lake P e U
  • Velocità con disco rigido SSD – PC e laptop
  • Boston Dynamics Atlas in azione
  • La struttura delle directory di Linux, spiegata
Etichette: Contenuto sempreverdeSuggerimenti tecnici
Post precedente

Come mostrare o nascondere le librerie in Windows 11: guida passo passo 🚀🔒

Prossima pubblicazione

Giochi RTS: perché i grandi studi li stanno abbandonando? 🎮🔥

Approfondimenti di MasterTrend

Approfondimenti di MasterTrend

Il nostro team editoriale condivide recensioni approfondite, tutorial e consigli per aiutarti a sfruttare al meglio i tuoi dispositivi e strumenti digitali.

Prossima pubblicazione
Giochi RTS: 5 titoli indie che mantengono viva la strategia

Giochi RTS: perché i grandi studi li stanno abbandonando? 🎮🔥

5 2 voti
Valutazione dell'articolo
Iscriviti
Accesso
Notifica di
ospite

ospite

0 Commenti
più antico
Più recente I più votati
Commenti in linea
Vedi tutti i commenti

Rimani connesso

  • 976 I fan
  • 118 Seguaci
  • 1,4k Seguaci
  • 1,8 mila Abbonati

  • Tendenze
  • Commenti
  • Scorso
Come aggiungere un orologio al desktop di Windows 11: 3 trucchi infallibili!

Come aggiungere un orologio al desktop di Windows 11: fai di più in pochi minuti! ⏱️

1 maggio 2025
Le 12 migliori alternative a Lucky Patcher per Android

Alternative a Lucky Patcher: 12 app migliori e più semplici! 🎮⚡

12 maggio 2025
Come utilizzare AdGuard DNS su Android nel 2024

Come utilizzare AdGuard DNS su Android nel 2025

11 febbraio 2025
Come conservare gli oggetti in Oblivion Remastered: 5 trucchi che devi sapere! 🗝️💼

Come conservare gli oggetti in Oblivion Remastered senza perdere il bottino 💎⚡

1 maggio 2025
Funzionalità di Gmail su Android: risparmia tempo con 5 suggerimenti

Funzionalità di Gmail su Android: 5 trucchi che non conoscevi! 📱✨

12
Riparazione Schede Madri - Riparazione Schede Madri

Riparazione della scheda madre del notebook

10
Installa Windows 11 Home senza Internet

Installa Windows 11 Home senza Internet

10
Come eseguire il backup dei driver in Windows 11/10 in 4 passaggi!

Come eseguire il backup dei driver in Windows 11/10: evita errori! 🚨💾

10
Nomi utente casuali Proteggi il tuo account oggi stesso

Nomi utente casuali: la chiave per evitare attacchi informatici di massa 🛡️🚫

25 giugno 2025
Sblocca Yasuke! Scopri il Kofun segreto che cambierà il tuo gioco!

Sblocca Yasuke: scopri il Kofun segreto che ti farà dominare! 🥷💥

25 giugno 2025
Velocizza il tuo laptop 🚀 con 5 app gratuite che dovresti provare subito

Velocizza il tuo laptop ⚡️ e migliorane le prestazioni in 5 semplici passaggi

24 giugno 2025
Tasti BIOS/UEFI: i 10 tasti principali per l'accesso rapido

Chiavi BIOS/UEFI: scopri come accedervi facilmente e senza errori ⚡🔑

24 giugno 2025

Notizie recenti

Nomi utente casuali Proteggi il tuo account oggi stesso

Nomi utente casuali: la chiave per evitare attacchi informatici di massa 🛡️🚫

25 giugno 2025
6
Sblocca Yasuke! Scopri il Kofun segreto che cambierà il tuo gioco!

Sblocca Yasuke: scopri il Kofun segreto che ti farà dominare! 🥷💥

25 giugno 2025
4
Velocizza il tuo laptop 🚀 con 5 app gratuite che dovresti provare subito

Velocizza il tuo laptop ⚡️ e migliorane le prestazioni in 5 semplici passaggi

24 giugno 2025
6
Tasti BIOS/UEFI: i 10 tasti principali per l'accesso rapido

Chiavi BIOS/UEFI: scopri come accedervi facilmente e senza errori ⚡🔑

24 giugno 2025
4
Logo di MasterTrend News

MasterTrend Info è la tua fonte di riferimento per la tecnologia: scopri notizie, tutorial e analisi su hardware, software, gaming, dispositivi mobili e intelligenza artificiale. Iscriviti alla nostra newsletter per non perderti nessuna tendenza.

Seguici

Sfoglia per categoria

  • gioco
  • Hardware
  • AI
  • Cellulari
  • Notizia
  • Reti
  • Sicurezza
  • Software
  • Tutorial
  • Finestre

Notizie recenti

Nomi utente casuali Proteggi il tuo account oggi stesso

Nomi utente casuali: la chiave per evitare attacchi informatici di massa 🛡️🚫

25 giugno 2025
Sblocca Yasuke! Scopri il Kofun segreto che cambierà il tuo gioco!

Sblocca Yasuke: scopri il Kofun segreto che ti farà dominare! 🥷💥

25 giugno 2025
  • Chi siamo
  • Annunciare
  • politica sulla riservatezza
  • Contattaci

Copyright © 2025 https://mastertrend.info/ - Tutti i diritti riservati. Tutti i marchi commerciali appartengono ai rispettivi proprietari.

es_ES Spanish
es_ES Spanish
en_US English
pt_BR Portuguese
fr_FR French
it_IT Italian
ru_RU Russian
de_DE German
zh_CN Chinese
ko_KR Korean
ja Japanese
th Thai
hi_IN Hindi
ar Arabic
tr_TR Turkish
pl_PL Polish
id_ID Indonesian
Nessun risultato
Vedi tutti i risultati
  • gioco
  • Hardware
  • AI
  • Cellulari
  • Notizia
  • Reti
  • Sicurezza
  • Software
  • Tutorial
  • Finestre

Copyright © 2025 https://mastertrend.info/ - Tutti i diritti riservati. Tutti i marchi commerciali appartengono ai rispettivi proprietari.

Commento Informazioni autore
:wpds_smile::wpds_grin::wpds_wink::wpds_mrgreen::wpds_neutral::wpds_twisted::wpds_arrow::wpds_shock::wpds_unamused::wpds_cool::wpds_evil::wpds_oops::wpds_razz::wpds_roll::wpds_cry::wpds_eek::wpds_lol::wpds_mad::wpds_triste::wpds_esclamazione::wpds_question::wpds_idea::wpds_hmm::wpds_beg::wpds_whew::wpds_chuckle::wpds_silly::wpds_invidia::wpds_shutmouth:
wpDiscuz
RedditCielo bluXMastodonteNotizie sugli hacker
Condividi questo:
MastodonteVKMessaggio di WhatsAppTelegrammasmsNotizie sugli hackerLineaMessaggero
La tua istanza Mastodon