Kako stvoriti brojač riječi u JavaScriptu

Brojač riječi je alat koji možete koristiti za brojanje riječi u tekstu. Možete ga koristiti za provjeru duljine dokumenta ili praćenje ispunjavate li ograničenje broja riječi.

Možete izraditi vlastiti brojač riječi koristeći HTML, CSS i JavaScript. Otvorite svoj brojač riječi u web pregledniku, unesite tekst u polje za unos i pogledajte koliko riječi koristite.

Ovaj projekt također može biti koristan kao pomoć u vježbanju i učvršćivanju vašeg znanja JavaScripta.

Kako stvoriti korisničko sučelje za brojač riječi

Da biste stvorili korisničko sučelje za brojač riječi, dodajte unos područja teksta na osnovnu HTML stranicu. Ovdje možete unijeti rečenicu ili odlomak za koji želite prebrojati riječi.

1. Napravite novu HTML datoteku pod nazivom "index.html".
instagram viewer
2. Unutar datoteke dodajte osnovnu strukturu za HTML web stranicu:

   html>
   <htmljezik="en-US">
   <glava>
   <titula> Brojač riječi titula>
   glava>
   <tijelo>
   
   razreda="kontejner">
   <h1> Broj riječi h1>
   div>
   tijelo>
   html>

3. Unutar div spremnika i ispod naslova dodajte područje teksta:

   <tekstualno područjeiskaznica="ulazni"redaka="10">tekstualno područje>

4. Ispod područja teksta dodajte gumb:

   <dugmeiskaznica="gumb za brojanje">Broj riječidugme>

5. Dodajte oznaku raspona za prikaz broja riječi kada korisnik klikne gornji gumb:

   <div>
    riječi: <rasponiskaznica="rezultat brojanja riječi">0raspon>
   div>

6. U istoj mapi u kojoj je vaša HTML datoteka, stvorite novu datoteku pod nazivom "styles.css".
7. Napunite CSS datoteku CSS-om da biste stilizirali svoju web stranicu:

   tijelo {
    margina: 0;
    ispuna: 0;
    boja pozadine: #f0fcfc;
   }
   * {
    obitelj-fontova: "Arial", sans-serif;
   }
   .kontejner {
    ispuna: 100px 25%;
    zaslon: savitljiv;
    smjer savijanja: stupac;
    visina linije: 2rem;
   veličina fonta: 1.2rem;
    boja: #202C39;
   }
   textarea {
    ispuna: 20px;
    veličina fonta: 1 rem;
    margina-dno: 40px;
   }
   dugme {
    ispuna: 10px;
    margina-dno: 40px;
   } 

8. Povežite CSS datoteku sa svojom HTML datotekom uključivanjem oznake veze unutar HTML oznake glave:

   <vezarel="list stilova"href="styles.css">

9. Da biste testirali korisničko sučelje web stranice, kliknite na datoteku "index.html" da je otvorite u web pregledniku.

Kako prebrojati svaku riječ unutar tekstualnog područja

Kada korisnik unese rečenicu u tekstualno područje, web stranica bi trebala brojati svaku riječ kada klikne na Broj riječi dugme.

Ovu funkciju možete dodati unutar nove JavaScript datoteke. Ako treba, revidirajte drugo početničke JavaScript projektne ideje ako trebate obnoviti svoje znanje JavaScripta.

1. U istoj mapi u kojoj su vaše datoteke "index.html" i "styles.css", dodajte novu datoteku pod nazivom "script.js".
2. Povežite svoju HTML datoteku sa svojom JavaScript datotekom dodavanjem oznake skripte na dnu oznake tijela:

   <tijelo>
    Vaš kod ovdje 
   <skriptasrc="script.js">skripta>
   tijelo>

3. Unutar script.js upotrijebite funkciju getElementById() za dohvaćanje tekstualnog područja, gumba i span HTML elemenata. Pohranite ove elemente u tri odvojene varijable:

   neka unos = dokument.getElementById("ulazni");
   neka gumb = dokument.getElementById("gumb za brojanje");
   neka wordCountResult = dokument.getElementById("rezultat brojanja riječi");

4. Dodajte slušatelja događaja klika. Ova funkcija će se izvršiti kada korisnik klikne na Broj riječi dugme:

   button.addEventListener("klik", funkcija() {
   });

5. Unutar slušatelja događaja klika, dohvatite vrijednost koju je korisnik unio u tekstualno područje. Ovu vrijednost možete pronaći u ulaznoj varijabli koja pohranjuje HTML element textarea.

   neka str = ulazna vrijednost;

6. Koristite funkciju split() za razdvajanje niza u zasebne riječi. To će se dogoditi kad god postoji razmak u nizu. Ovo će svaku riječ pohraniti kao element novog niza. Na primjer, ako je unesena rečenica bila "Volim pse", rezultirajući niz bi bio ["Ja", "ljubav", "psi"].

   neka wordsList = str.split(" ");

7. Pronađite broj riječi pomoću duljine niza:

   neka count = wordsList.length;

8. Za prikaz rezultata natrag korisniku, promijenite sadržaj span HTML elementa za prikaz nove vrijednosti:

   wordCountResult.innerHTML = broj; 

Kako koristiti primjer brojača riječi

Svoju web stranicu brojača riječi možete testirati pomoću web preglednika.

1. Otvorite index.html u bilo kojem web pregledniku.
2. Unesite rečenicu ili odlomak u područje teksta:
3. Klikni na Broj riječi gumb za ažuriranje broja riječi. Ovo će prikazati broj riječi, baš kao da vi provjerio broj riječi na Google dokumentima, Microsoft Word ili bilo koji drugi uređivač s brojem riječi.

Stvaranje jednostavnih aplikacija pomoću JavaScripta

Sada, nadamo se, imate osnovno razumijevanje kako koristiti JavaScript za brojanje riječi i interakciju s elementima na HTML stranici. Kako biste poboljšali svoje razumijevanje programiranja, nastavite stvarati male korisne projekte u JavaScriptu.