Come creare un contatore di parole in JavaScript

Un contatore di parole è uno strumento che puoi utilizzare per contare il numero di parole in una parte di testo. Puoi usarlo per controllare la lunghezza di un documento o per monitorare se stai rispettando un limite di conteggio delle parole.

Puoi creare il tuo contatore di parole utilizzando HTML, CSS e JavaScript. Apri il tuo contatore di parole in un browser web, inserisci il testo in un campo di input e guarda quante parole stai usando.

Questo progetto può anche essere utile per aiutarti a praticare e consolidare la tua conoscenza di JavaScript.

Come creare l'interfaccia utente per il contatore di parole

Per creare l'interfaccia utente per il contatore di parole, aggiungi un input per l'area di testo a una pagina HTML di base. Qui è dove puoi inserire la frase o il paragrafo di cui desideri contare le parole.

1. Crea un nuovo file HTML chiamato "index.html".
2. All'interno del file, aggiungi la struttura di base per una pagina Web HTML:

   html>
   <htmllang="en-US">
   <Testa>
   <titolo> Contatore di parole titolo>
   Testa>
   <corpo>
   
   classe="contenitore">
   <h1> Contare le parole h1>
   div>
   corpo>
   html>

3. All'interno del contenitore div e sotto l'intestazione, aggiungi un'area di testo:

   <area di testoid="ingresso"righe="10">area di testo>

4. Sotto l'area di testo, aggiungi un pulsante:

   <pulsanteid="pulsante di conteggio">Contare le parolepulsante>

5. Aggiungi un tag span per visualizzare il conteggio delle parole quando l'utente fa clic sul pulsante in alto:

   <div>
    Parole: <spanid="risultato conteggio parole">0span>
   div>

6. Nella stessa cartella del tuo file HTML, crea un nuovo file chiamato "styles.css".
7. Popola il file CSS con alcuni CSS per dare uno stile alla tua pagina web:

   corpo {
    margine: 0;
    imbottitura: 0;
    colore di sfondo: #f0fcfc;
   }
   * {
    famiglia di font: "Arial", sans serif;
   }
   .contenitore {
    imbottitura: 100px 25%;
    display: flessibile;
    direzione flessibile: colonna;
    altezza linea: 2rem;
   dimensione del font: 1.2rim;
    colore: #202C39;
   }
   area di testo {
    imbottitura: 20px;
    dimensione carattere: 1rem;
    margine inferiore: 40px;
   }
   pulsante {
    imbottitura: 10px;
    margine inferiore: 40px;
   } 

8. Collega il file CSS al tuo file HTML includendo un tag link all'interno del tag head HTML:

   <collegamentorel="foglio di stile"href="stili.css">

9. Per testare l'interfaccia utente della pagina web, fai clic sul file "index.html" per aprirlo in un browser web.

Come contare ogni parola all'interno dell'area di testo

Quando un utente inserisce una frase nell'area di testo, la pagina web dovrebbe contare ogni parola quando fa clic su Contare le parole pulsante.

Puoi aggiungere questa funzionalità all'interno di un nuovo file JavaScript. Se necessario, rivedere altro idee per progetti JavaScript per principianti se hai bisogno di rispolverare la tua conoscenza di JavaScript.

1. Nella stessa cartella dei file "index.html" e "styles.css", aggiungi un nuovo file chiamato "script.js".
2. Collega il tuo file HTML al tuo file JavaScript aggiungendo un tag script nella parte inferiore del tag body:

   <corpo>
    Il tuo codice qui 
   <copionesrc="script.js">copione>
   corpo>

3. All'interno di script.js, utilizza la funzione getElementById() per recuperare gli elementi textarea, button e span HTML. Memorizza questi elementi in tre variabili separate:

   permettere ingresso = documento.getElementById("ingresso");
   permettere pulsante = documento.getElementById("pulsante di conteggio");
   permettere wordCountResult = documento.getElementById("risultato conteggio parole");

4. Aggiungi un listener di eventi clic. Questa funzione verrà eseguita quando l'utente fa clic sul file Contare le parole pulsante:

   button.addEventListener("clic", funzione() {
   });

5. All'interno del listener di eventi click, ottieni il valore che l'utente ha inserito nella textarea. Puoi trovare questo valore nella variabile di input, che memorizza l'elemento HTML textarea.

   permettere str = input.valore;

6. Utilizzare la funzione split() per separare la stringa in parole separate. Ciò si verificherà ogni volta che c'è uno spazio nella stringa. Questo memorizzerà ogni parola come elemento di un nuovo array. Ad esempio, se la frase immessa fosse "I love dogs", l'array risultante sarebbe ["I", "love", "dogs"].

   permettere listaparole = str.split(" ");

7. Trova il conteggio delle parole utilizzando la lunghezza dell'array:

   permettere conteggio = listadiparole.lunghezza;

8. Per visualizzare il risultato all'utente, modificare il contenuto dell'elemento span HTML per visualizzare il nuovo valore:

   wordCountResult.innerHTML = conteggio; 

Come utilizzare il contatore di parole di esempio

Puoi testare la tua pagina web contatore di parole utilizzando un browser web.

1. Apri index.html in qualsiasi browser web.
2. Inserisci una frase o un paragrafo nell'area di testo:
3. Clicca sul Contare le parole pulsante per aggiornare il conteggio delle parole. Questo mostrerà il conteggio delle parole, proprio come se tu controllato il conteggio delle parole su Google Documenti, Microsoft Word o qualsiasi altro editor con un conteggio delle parole.

Creazione di semplici applicazioni utilizzando JavaScript

Ora si spera che tu abbia una conoscenza di base su come utilizzare JavaScript per contare le parole e interagire con gli elementi su una pagina HTML. Per migliorare la tua comprensione della programmazione, continua a creare piccoli progetti utili in JavaScript.