Jak vytvořit počítadlo slov v JavaScriptu

Počítadlo slov je nástroj, který můžete použít k počítání počtu slov v textu. Můžete jej použít ke kontrole délky dokumentu nebo ke sledování, zda splňujete limit počtu slov.

Můžete si vytvořit vlastní počítadlo slov pomocí HTML, CSS a JavaScriptu. Otevřete počítadlo slov ve webovém prohlížeči, zadejte text do vstupního pole a podívejte se, kolik slov používáte.

Tento projekt může být také užitečný při procvičování a upevnění znalostí JavaScriptu.

Jak vytvořit uživatelské rozhraní pro počítadlo slov

Chcete-li vytvořit uživatelské rozhraní pro počítadlo slov, přidejte vstup do oblasti textu na základní stránku HTML. Zde můžete zadat větu nebo odstavec, pro který chcete slova spočítat.

1. Vytvořte nový soubor HTML s názvem „index.html“.
2. Do souboru přidejte základní strukturu webové stránky HTML:

   html>
   <htmllang="en-US">
   <hlava>
   <titul> Počítadlo slov titul>
   hlava>
   <tělo>
   
   třída="kontejner">
   <h1> Počítat slova h1>
   div>
   tělo>
   html>

3. Do kontejneru div a pod nadpis přidejte textovou oblast:

   <textareaid="vstup"řádky="10">textarea>

4. Pod textovou oblast přidejte tlačítko:

   <knoflíkid="tlačítko počítání">Počítat slovaknoflík>

5. Přidejte značku span, která zobrazí počet slov, když uživatel klikne na tlačítko výše:

   <div>
    slova: <rozpětíid="počet slov-výsledek">0rozpětí>
   div>

6. Ve stejné složce jako váš soubor HTML vytvořte nový soubor s názvem „styles.css“.
7. Naplňte soubor CSS nějakými CSS pro stylování vaší webové stránky:

   tělo {
    okraj: 0;
    výplň: 0;
    barva pozadí: #f0fcfc;
   }
   * {
    rodina písem: "Arial", bezpatkové;
   }
   .kontejner {
    odsazení: 100px 25%;
    displej: flex;
    směr ohybu: sloupec;
    výška čáry: 2rem;
   velikost písma: 1.2rem;
    barva: #202C39;
   }
   textarea {
    výplň: 20px;
    velikost písma: 1rem;
    margin-bottom: 40px;
   }
   knoflík {
    odsazení: 10px;
    margin-bottom: 40px;
   } 

8. Propojte soubor CSS se souborem HTML vložením značky odkazu do značky HTML head:

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

9. Chcete-li otestovat uživatelské rozhraní webové stránky, kliknutím na soubor „index.html“ jej otevřete ve webovém prohlížeči.

Jak počítat každé slovo uvnitř textové oblasti

Když uživatel zadá větu do textové oblasti, webová stránka by měla počítat každé slovo, když na ni klikne Počítat slova knoflík.

Tuto funkci můžete přidat do nového souboru JavaScript. Pokud potřebujete, upravte jiné nápady na projekt JavaScript pro začátečníky pokud potřebujete oprášit své znalosti JavaScriptu.

1. Do stejné složky jako soubory „index.html“ a „styles.css“ přidejte nový soubor s názvem „script.js“.
2. Propojte svůj soubor HTML se souborem JavaScript přidáním značky skriptu do spodní části značky body:

   <tělo>
    Váš kód zde 
   <skriptsrc="script.js">skript>
   tělo>

3. Uvnitř script.js použijte funkci getElementById() k načtení prvků HTML textarea, button a span. Uložte tyto prvky do tří samostatných proměnných:

   nechat vstup = dokument.getElementById("vstup");
   nechat tlačítko = dokument.getElementById("tlačítko počítání");
   nechat wordCountResult = dokument.getElementById("počet slov-výsledek");

4. Přidejte posluchač události kliknutí. Tato funkce se spustí, když uživatel klikne na Počítat slova knoflík:

   button.addEventListener("kliknout", funkce() {
   });

5. Uvnitř posluchače události kliknutí získejte hodnotu, kterou uživatel zadal do textové oblasti. Tuto hodnotu najdete ve vstupní proměnné, která ukládá HTML element textarea.

   nechat str = vstup.hodnota;

6. K rozdělení řetězce na samostatná slova použijte funkci split(). K tomu dojde vždy, když je v řetězci mezera. Toto uloží každé slovo jako prvek nového pole. Pokud by například zadaná věta byla "Miluji psy", výsledné pole by bylo ["I", "love", "dogs"].

   nechat Seznam slov = str.split(" ");

7. Najděte počet slov pomocí délky pole:

   nechat počet = slovaSeznam.délka;

8. Chcete-li výsledek zobrazit zpět uživateli, změňte obsah prvku span HTML tak, aby zobrazoval novou hodnotu:

   wordCountResult.innerHTML = počet; 

Jak používat ukázkové počítadlo slov

Webovou stránku počítadla slov můžete otestovat pomocí webového prohlížeče.

1. Otevřete index.html v libovolném webovém prohlížeči.
2. Do textového pole zadejte větu nebo odstavec:
3. Klikněte na Počítat slova tlačítko pro aktualizaci počtu slov. Tím se zobrazí počet slov, stejně jako vy zkontroloval počet slov v Dokumentech Google, Microsoft Word nebo jakýkoli jiný editor s počtem slov.

Vytváření jednoduchých aplikací pomocí JavaScriptu

Nyní snad máte základní znalosti o tom, jak používat JavaScript k počítání slov a interakci s prvky na stránce HTML. Chcete-li zlepšit své znalosti programování, pokračujte ve vytváření malých užitečných projektů v JavaScriptu.