Hogyan készítsünk Word számlálót JavaScriptben

A szószámláló egy olyan eszköz, amellyel megszámolhatja egy szövegrészben lévő szavak számát. Használhatja a dokumentum hosszának ellenőrzésére, vagy annak nyomon követésére, hogy teljesíti-e a szószámkorlátot.

Létrehozhat saját szószámlálót HTML, CSS és JavaScript használatával. Nyissa meg a szószámlálót egy webböngészőben, írja be a szöveget egy beviteli mezőbe, és nézze meg, hány szót használ.

Ez a projekt hasznos lehet abban is, hogy gyakorolja és megszilárdítsa JavaScript-ismeretét.

Hogyan készítsünk felhasználói felületet a Word számlálóhoz

A szószámláló felhasználói felületének létrehozásához adjon hozzá egy szöveges területbevitelt egy alap HTML-oldalhoz. Itt adhatja meg azt a mondatot vagy bekezdést, amelyhez meg szeretné számolni a szavakat.

1. Hozzon létre egy új HTML-fájlt "index.html" néven.
2. A fájlon belül adja hozzá a HTML-weblap alapvető szerkezetét:

   html>
   <htmllang="en-US">
   <fej>
   <cím> Szószámláló cím>
   fej>
   <test>
   
   osztály="tartály">
   <h1> Számolj szavakat h1>
   div>
   test>
   html>

3. A tároló div belsejében és a címsor alatt adjon hozzá egy szöveges területet:

   <textareaid="bemenet"sorokat="10">textarea>

4. A szövegterület alatt adjon hozzá egy gombot:

   <gombid="számláló gomb">Számolj szavakatgomb>

5. Adjon hozzá egy span címkét a szószám megjelenítéséhez, amikor a felhasználó a fenti gombra kattint:

   <div>
    Szavak: <spanid="szószám-eredmény">0span>
   div>

6. A HTML-fájllal azonos mappában hozzon létre egy új fájlt "styles.css" néven.
7. Töltse fel a CSS-fájlt némi CSS-sel a weboldal stílusának megadásához:

   body {
    margó: 0;
    párnázás: 0;
    háttérszín: #f0fcfc;
   }
   * {
    betűtípus család: "Arial", sans-serif;
   }
   .tartály {
    padding: 100px 25%;
    kijelző: flex;
    hajlítási irány: oszlop;
    vonalmagasság: 2 rem;
   betűméret: 1.2rem;
    szín: #202C39;
   }
   textarea {
    padding: 20px;
    betűméret: 1 rem;
    margó-alsó: 40 képpont;
   }
   gomb {
    padding: 10px;
    margó-alsó: 40 képpont;
   } 

8. Kapcsolja össze a CSS-fájlt a HTML-fájljával úgy, hogy a HTML head címkébe beilleszt egy linkcímkét:

   <linkrel="stíluslap"href="stílusok.css">

9. A weboldal felhasználói felületének teszteléséhez kattintson az "index.html" fájlra, és nyissa meg a böngészőben.

Hogyan kell megszámolni az egyes szavakat a szövegterületen belül

Amikor a felhasználó beír egy mondatot a szövegmezőbe, a weboldalnak minden szót meg kell számolnia, amikor rákattint Számolj szavakat gomb.

Ezt a funkciót hozzáadhatja egy új JavaScript-fájlhoz. Ha kell, módosítsa a többit kezdő JavaScript projektötletek ha fel kell frissítenie JavaScript ismereteit.

1. Adjon hozzá egy új, „script.js” nevű fájlt ugyanabba a mappába, mint az „index.html” és a „styles.css” fájl.
2. Kapcsolja össze HTML-fájlját JavaScript-fájljával úgy, hogy a body címke aljához adjon hozzá egy szkriptcímkét:

   <test>
    Itt a kódod 
   <forgatókönyvsrc="script.js">forgatókönyv>
   test>

3. A script.js fájlban használja a getElementById() függvényt a textarea, a button és a span HTML elemek lekéréséhez. Tárolja ezeket az elemeket három külön változóban:

   hagyja bemenet = dokumentum.getElementById("bemenet");
   hagyja gomb = dokumentum.getElementById("számláló gomb");
   hagyja wordCountResult = dokumentum.getElementById("szószám-eredmény");

4. Adjon hozzá egy kattintásos eseményfigyelőt. Ez a funkció akkor hajtódik végre, amikor a felhasználó rákattint a Számolj szavakat gomb:

   button.addEventListener("kattintás", funkció() {
   });

5. A kattintási eseményfigyelőn belül kapja meg azt az értéket, amelyet a felhasználó beírt a szövegterületbe. Ezt az értéket a bemeneti változóban találhatja meg, amely a textarea HTML elemet tárolja.

   hagyja str = input.value;

6. Használja a split() függvényt a karakterlánc külön szavakra történő szétválasztásához. Ez akkor fordul elő, amikor szóköz van a karakterláncban. Ez minden szót egy új tömb elemeként tárol. Például, ha a beírt mondat „szeretem a kutyákat”, a kapott tömb a következő lenne: ["I", "love", "dogs"].

   hagyja szavakLista = str.split(" ");

7. Keresse meg a szavak számát a tömb hosszával:

   hagyja count = szavakLista.hossz;

8. Az eredmény visszajelzéséhez a felhasználó számára módosítsa a span HTML elem tartalmát az új érték megjelenítéséhez:

   wordCountResult.innerHTML = count; 

A példaszószámláló használata

A szószámláló weboldalát webböngészővel tesztelheti.

1. Nyissa meg az index.html oldalt bármely webböngészőben.
2. Írjon be egy mondatot vagy bekezdést a szövegmezőbe:
3. Kattintson a Számolj szavakat gombot a szószám frissítéséhez. Ez megjeleníti a szavak számát, akárcsak akkor ellenőrizte a szavak számát a Google Dokumentumokban, Microsoft Word vagy bármely más szószámmal rendelkező szerkesztő.

Egyszerű alkalmazások létrehozása JavaScript használatával

Remélhetőleg most már rendelkezik alapvető ismeretekkel arról, hogyan használhatja a JavaScriptet a szavak számlálására és a HTML-oldal elemeivel való interakcióra. A programozási ismereteinek javítása érdekében folytassa a kis hasznos projektek létrehozását JavaScriptben.