Kako ustvariti števec besed v JavaScriptu

Števec besed je orodje, ki ga lahko uporabite za štetje števila besed v delu besedila. Z njim lahko preverite dolžino dokumenta ali spremljate, ali izpolnjujete omejitev števila besed.

Ustvarite lahko svoj števec besed z uporabo HTML, CSS in JavaScript. Odprite števec besed v spletnem brskalniku, vnesite besedilo v polje za vnos in preverite, koliko besed uporabljate.

Ta projekt je lahko koristen tudi pri vadbi in utrjevanju znanja JavaScripta.

Kako ustvariti uporabniški vmesnik za števec besed

Če želite ustvariti uporabniški vmesnik za števec besed, dodajte vnos področja besedila na osnovno stran HTML. Tu lahko vnesete stavek ali odstavek, za katerega želite prešteti besede.

1. Ustvarite novo datoteko HTML z imenom "index.html".
instagram viewer
2. Znotraj datoteke dodajte osnovno strukturo za spletno stran HTML:

   html>
   <htmljezik="en-US">
   <glavo>
   <naslov> števec besed naslov>
   glavo>
   <telo>
   
   razred="posoda">
   <h1> Štetje besed h1>
   div>
   telo>
   html>

3. Znotraj vsebnika div in pod naslov dodajte besedilno območje:

   <textareaid="vnos"vrstice="10">textarea>

4. Pod besedilno območje dodajte gumb:

   <gumbid="gumb za štetje">Štetje besedgumb>

5. Dodajte oznako span za prikaz števila besed, ko uporabnik klikne zgornji gumb:

   <div>
    Besede: <razponid="število-besed-rezultat">0razpon>
   div>

6. V isti mapi kot vaša datoteka HTML ustvarite novo datoteko z imenom "styles.css".
7. Napolnite datoteko CSS z nekaj CSS, da oblikujete svojo spletno stran:

   telo {
    rob: 0;
    oblazinjenje: 0;
    Barva ozadja: #f0fcfc;
   }
   * {
    družina pisav: "Arial", sans-serif;
   }
   .posoda {
    oblazinjenje: 100 slikovnih pik 25 %;
    zaslon: flex;
    flex-direction: stolpec;
    višina vrstice: 2rem;
   velikost pisave: 1.2rem;
    barva: #202C39;
   }
   textarea {
    oblazinjenje: 20px;
    velikost pisave: 1 rem;
    rob-spodaj: 40px;
   }
   gumb {
    oblazinjenje: 10px;
    rob-spodaj: 40px;
   } 

8. Povežite datoteko CSS z vašo datoteko HTML tako, da vključite oznako povezave znotraj oznake glave HTML:

   <povezavarel="stylesheet"href="styles.css">

9. Če želite preizkusiti uporabniški vmesnik spletne strani, kliknite datoteko "index.html", da jo odprete v spletnem brskalniku.

Kako prešteti vsako besedo znotraj besedilnega polja

Ko uporabnik v besedilno polje vnese stavek, mora spletna stran šteti vsako besedo, ko klikne na Štetje besed gumb.

To funkcijo lahko dodate znotraj nove datoteke JavaScript. Če je treba, popravite drugo začetniške projektne ideje JavaScript če morate obnoviti svoje znanje JavaScripta.

1. V isto mapo kot vaši datoteki "index.html" in "styles.css", dodajte novo datoteko z imenom "script.js".
2. Povežite svojo datoteko HTML z datoteko JavaScript tako, da dodate oznako skripta na dno oznake body:

   <telo>
    Vaša koda tukaj 
   <scenarijsrc="script.js">scenarij>
   telo>

3. Znotraj script.js uporabite funkcijo getElementById(), da pridobite elemente HTML textarea, gumb in span. Shranite te elemente v tri ločene spremenljivke:

   pustiti vnos = dokument.getElementById("vnos");
   pustiti gumb = dokument.getElementById("gumb za štetje");
   pustiti wordCountResult = dokument.getElementById("število-besed-rezultat");

4. Dodajte poslušalca dogodka klikov. Ta funkcija se izvede, ko uporabnik klikne na Štetje besed gumb:

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

5. Znotraj poslušalca dogodka klikov pridobite vrednost, ki jo je uporabnik vnesel v besedilno polje. To vrednost najdete v vhodni spremenljivki, ki shranjuje element HTML textarea.

   pustiti str = vhodna.vrednost;

6. S funkcijo split() ločite niz na ločene besede. To se bo zgodilo vedno, ko bo v nizu presledek. To bo vsako besedo shranilo kot element nove matrike. Na primer, če je bil vneseni stavek "I love dogs", bo nastala matrika ["I", "love", "dogs"].

   pustiti wordsList = str.split(" ");

7. Poiščite število besed z uporabo dolžine niza:

   pustiti count = wordsList.length;

8. Če želite prikazati rezultat nazaj uporabniku, spremenite vsebino elementa span HTML za prikaz nove vrednosti:

   wordCountResult.innerHTML = štetje; 

Kako uporabljati primer števca besed

Spletno stran števca besed lahko preizkusite s spletnim brskalnikom.

1. Odprite index.html v katerem koli spletnem brskalniku.
2. V besedilno polje vnesite stavek ali odstavek:
3. Kliknite na Štetje besed gumb za posodobitev števila besed. To bo prikazalo število besed, tako kot če bi preveril število besed v Google Dokumentih, Microsoft Word ali kateri koli drug urejevalnik s številom besed.

Ustvarjanje preprostih aplikacij z uporabo JavaScripta

Zdaj upajmo, da že osnovno razumete, kako uporabljati JavaScript za štetje besed in interakcijo z elementi na strani HTML. Če želite izboljšati svoje razumevanje programiranja, nadaljujte z ustvarjanjem majhnih uporabnih projektov v JavaScriptu.