Ako vytvoriť počítadlo slov v JavaScripte

Počítadlo slov je nástroj, ktorý môžete použiť na počítanie počtu slov v texte. Môžete ho použiť na kontrolu dĺžky dokumentu alebo na sledovanie, či spĺňate limit počtu slov.

Môžete si vytvoriť vlastné počítadlo slov pomocou HTML, CSS a JavaScriptu. Otvorte počítadlo slov vo webovom prehliadači, zadajte text do vstupného poľa a zistite, koľko slov používate.

Tento projekt môže byť užitočný aj pri precvičovaní a upevňovaní znalostí jazyka JavaScript.

Ako vytvoriť používateľské rozhranie pre počítadlo slov

Ak chcete vytvoriť používateľské rozhranie pre počítadlo slov, pridajte vstup do oblasti textu na základnú stránku HTML. Tu môžete zadať vetu alebo odsek, pre ktorý chcete spočítať slová.

1. Vytvorte nový súbor HTML s názvom „index.html“.
instagram viewer
2. Do súboru pridajte základnú štruktúru webovej stránky HTML:

   html>
   <htmllang="en-US">
   <hlavu>
   <titul> Počítadlo slov titul>
   hlavu>
   <telo>
   
   trieda="kontajner">
   <h1> Počítajte slová h1>
   div>
   telo>
   html>

3. Do kontajnera div a pod nadpis pridajte textovú oblasť:

   <textareaid="vstup"riadkov="10">textarea>

4. Pod oblasť textu pridajte tlačidlo:

   <tlačidloid="tlačidlo počítania">Počítajte slovátlačidlo>

5. Pridajte značku span na zobrazenie počtu slov, keď používateľ klikne na tlačidlo vyššie:

   <div>
    Slová: <rozpätieid="počet slov-výsledok">0rozpätie>
   div>

6. V rovnakom priečinku ako váš súbor HTML vytvorte nový súbor s názvom „styles.css“.
7. Naplňte súbor CSS nejakým štýlom CSS, aby ste upravili svoju webovú stránku:

   telo {
    okraj: 0;
    výplň: 0;
    farba pozadia: #f0fcfc;
   }
   * {
    rodina písiem: "Arial", bezpätkové;
   }
   .kontajner {
    padding: 100px 25%;
    displej: flex;
    smer ohybu: stĺpec;
    výška čiary: 2rem;
   veľkosť písma: 1.2rem;
    farba: #202C39;
   }
   textarea {
    výplň: 20px;
    veľkosť písma: 1rem;
    margin-bottom: 40px;
   }
   tlačidlo {
    výplň: 10px;
    margin-bottom: 40px;
   } 

8. Prepojte súbor CSS so súborom HTML vložením značky odkazu do značky HTML head:

   <odkazrel="štýlov"href="styles.css">

9. Ak chcete otestovať používateľské rozhranie webovej stránky, kliknite na súbor „index.html“ a otvorte ho vo webovom prehliadači.

Ako počítať každé slovo v textovej oblasti

Keď používateľ zadá vetu do textovej oblasti, webová stránka by mala počítať každé slovo, keď naň klikne Počítajte slová tlačidlo.

Túto funkciu môžete pridať do nového súboru JavaScript. Ak potrebujete, upravte iné nápady na projekt JavaScript pre začiatočníkov ak si potrebujete oprášiť svoje znalosti JavaScriptu.

1. Do rovnakého priečinka ako súbory „index.html“ a „styles.css“ pridajte nový súbor s názvom „script.js“.
2. Prepojte svoj súbor HTML so súborom JavaScript pridaním značky skriptu do spodnej časti značky body:

   <telo>
    Váš kód tu 
   <skriptsrc="script.js">skript>
   telo>

3. Vo vnútri script.js použite funkciu getElementById() na získanie prvkov HTML textarea, button a span. Uložte tieto prvky do troch samostatných premenných:

   nech vstup = dokument.getElementById("vstup");
   nech tlačidlo = dokument.getElementById("tlačidlo počítania");
   nech wordCountResult = dokument.getElementById("počet slov-výsledok");

4. Pridajte prijímač udalosti kliknutí. Táto funkcia sa spustí, keď používateľ klikne na Počítajte slová tlačidlo:

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

5. Vo vnútri prijímača udalosti kliknutia získajte hodnotu, ktorú používateľ zadal do textovej oblasti. Túto hodnotu nájdete vo vstupnej premennej, v ktorej je uložený HTML element textarea.

   nech str = vstup.hodnota;

6. Na oddelenie reťazca na samostatné slová použite funkciu split(). K tomu dôjde vždy, keď je v reťazci medzera. Toto uloží každé slovo ako prvok nového poľa. Napríklad, ak zadaná veta bola „Milujem psy“, výsledné pole by bolo [„I“, „love“, „dogs“].

   nech Zoznam slov = str.split(" ");

7. Nájdite počet slov pomocou dĺžky poľa:

   nech počet = slovZoznam.dĺžka;

8. Ak chcete zobraziť výsledok späť používateľovi, zmeňte obsah prvku span HTML tak, aby sa zobrazila nová hodnota:

   wordCountResult.innerHTML = počet; 

Ako používať príklad počítadla slov

Svoju webovú stránku počítadla slov môžete otestovať pomocou webového prehliadača.

1. Otvorte index.html v ľubovoľnom webovom prehliadači.
2. Do textového poľa zadajte vetu alebo odsek:
3. Klikni na Počítajte slová tlačidlo na aktualizáciu počtu slov. Tým sa zobrazí počet slov, rovnako ako vy skontroloval počet slov v službe Dokumenty Google, Microsoft Word alebo akýkoľvek iný editor s počtom slov.

Vytváranie jednoduchých aplikácií pomocou JavaScriptu

Dúfajme, že teraz máte základné znalosti o tom, ako používať JavaScript na počítanie slov a interakciu s prvkami na stránke HTML. Ak chcete zlepšiť svoje znalosti programovania, pokračujte vo vytváraní malých užitočných projektov v jazyku JavaScript.