Cum se creează un contor de cuvinte în JavaScript

Un contor de cuvinte este un instrument pe care îl puteți folosi pentru a număra numărul de cuvinte dintr-o bucată de text. Îl puteți folosi pentru a verifica lungimea unui document sau pentru a urmări dacă îndepliniți o limită a numărului de cuvinte.

Vă puteți crea propriul contor de cuvinte folosind HTML, CSS și JavaScript. Deschideți contorul de cuvinte într-un browser web, introduceți textul într-un câmp de introducere și vedeți câte cuvinte utilizați.

Acest proiect poate fi util și pentru a vă ajuta să exersați și să vă consolidați cunoștințele JavaScript.

Cum se creează interfața de utilizare pentru contorul de cuvinte

Pentru a crea interfața de utilizare pentru contorul de cuvinte, adăugați o intrare în zonă de text la o pagină HTML de bază. Aici puteți introduce propoziția sau paragraful pentru care doriți să numărați cuvintele.

1. Creați un fișier HTML nou numit „index.html”.
2. În interiorul fișierului, adăugați structura de bază pentru o pagină web HTML:

   html>
   <htmllang="en-US">
   <cap>
   <titlu> Contor de cuvinte titlu>
   cap>
   <corp>
   
   clasă="container">
   <h1> Numărați cuvintele h1>
   div>
   corp>
   html>

3. În interiorul div-ului containerului și sub titlu, adăugați o zonă de text:

   <zona textuluiid="intrare"rânduri="10">zona textului>

4. Sub zona de text, adăugați un buton:

   <butonid="buton de numărare">Numărați cuvintelebuton>

5. Adăugați o etichetă span pentru a afișa numărul de cuvinte atunci când utilizatorul face clic pe butonul de mai sus:

   <div>
    Cuvinte: <spanid="număr-cuvinte-rezultat">0span>
   div>

6. În același folder cu fișierul HTML, creați un fișier nou numit „styles.css”.
7. Completați fișierul CSS cu ceva CSS pentru a vă stila pagina web:

   corp {
    marja: 0;
    umplutură: 0;
    culoare de fundal: #f0fcfc;
   }
   * {
    familie de fonturi: "Arial", sans-serif;
   }
   .container {
    umplutură: 100px 25%;
    display: flex;
    flex-direcție: coloană;
    linie-inaltime: 2rem;
   marimea fontului: 1.2rem;
    culoare: #202C39;
   }
   textarea {
    umplutură: 20px;
    dimensiunea fontului: 1rem;
    margine-jos: 40px;
   }
   butonul {
    umplutură: 10px;
    margine-jos: 40px;
   } 

8. Conectați fișierul CSS la fișierul dvs. HTML, incluzând o etichetă de link în interiorul etichetei HTML head:

   <legăturărel="foaia de stil"href=„styles.css”>

9. Pentru a testa interfața de utilizare a paginii web, faceți clic pe fișierul „index.html” pentru a-l deschide într-un browser web.

Cum să numărați fiecare cuvânt din zona de text

Când un utilizator introduce o propoziție în zona de text, pagina web ar trebui să numere fiecare cuvânt când face clic pe Numărați cuvintele buton.

Puteți adăuga această funcționalitate într-un nou fișier JavaScript. Dacă trebuie, revizuiți altele idei de proiecte JavaScript pentru începători dacă aveți nevoie să vă îmbunătățiți cunoștințele JavaScript.

1. În același folder cu fișierele „index.html” și „styles.css”, adăugați un fișier nou numit „script.js”.
2. Conectați fișierul HTML la fișierul JavaScript adăugând o etichetă script în partea de jos a etichetei body:

   <corp>
    Codul dvs. aici 
   <scenariusrc=„script.js”>scenariu>
   corp>

3. În script.js, utilizați funcția getElementById() pentru a prelua textarea, butonul și elementele HTML span. Stocați aceste elemente în trei variabile separate:

   lăsa intrare = document.getElementById("intrare");
   lăsa butonul = document.getElementById("buton de numărare");
   lăsa wordCountResult = document.getElementById("număr-cuvinte-rezultat");

4. Adăugați un ascultător de evenimente clic. Această funcție se va executa atunci când utilizatorul face clic pe Numărați cuvintele buton:

   button.addEventListener("clic", funcţie() {
   });

5. În interiorul ascultătorului de evenimente clic, obțineți valoarea pe care utilizatorul a introdus-o în zona de text. Puteți găsi această valoare în variabila de intrare, care stochează elementul HTML textarea.

   lăsa str = input.value;

6. Utilizați funcția split() pentru a separa șirul în cuvinte separate. Acest lucru se va întâmpla ori de câte ori există un spațiu în șir. Acest lucru va stoca fiecare cuvânt ca element al unei noi matrice. De exemplu, dacă propoziția introdusă a fost „Iubesc câinii”, matricea rezultată ar fi [„Eu”, „dragoste”, „câini”].

   lăsa liste de cuvinte = str.split(" ");

7. Găsiți numărul de cuvinte folosind lungimea matricei:

   lăsa count = liste de cuvinte.lungime;

8. Pentru a afișa rezultatul înapoi utilizatorului, modificați conținutul elementului HTML span pentru a afișa noua valoare:

   wordCountResult.innerHTML = numărare; 

Cum să utilizați exemplul de contor de cuvinte

Puteți testa pagina web a contorului de cuvinte folosind un browser web.

1. Deschideți index.html în orice browser web.
2. Introduceți o propoziție sau un paragraf în zona de text:
3. Faceți clic pe Numărați cuvintele butonul pentru a actualiza numărul de cuvinte. Aceasta va afișa numărul de cuvinte, la fel ca și dvs a verificat numărul de cuvinte pe Google Docs, Microsoft Word sau orice alt editor cu un număr de cuvinte.

Crearea de aplicații simple folosind JavaScript

Acum sperăm că aveți o înțelegere de bază despre cum să utilizați JavaScript pentru a număra cuvintele și a interacționa cu elementele dintr-o pagină HTML. Pentru a vă îmbunătăți înțelegerea programării, continuați să creați mici proiecte utile în JavaScript.