Kuidas luua JavaScriptis sõnaloendurit

Sõnaloendur on tööriist, mida saate kasutada tekstiosas olevate sõnade loendamiseks. Saate seda kasutada dokumendi pikkuse kontrollimiseks või sõnade arvu limiidi täitmiseks.

Saate luua oma sõnade loenduri, kasutades HTML-i, CSS-i ja JavaScripti. Avage veebibrauseris sõnaloendur, sisestage tekst sisestusväljale ja vaadake, mitu sõna te kasutate.

See projekt võib olla kasulik ka JavaScripti teadmiste harjutamisel ja tugevdamisel.

Kuidas luua sõnaloenduri kasutajaliidest

Sõnaloenduri kasutajaliidese loomiseks lisage tavalisele HTML-lehele tekstiala sisend. Siin saate sisestada lause või lõigu, mille sõnu soovite lugeda.

1. Looge uus HTML-fail nimega "index.html".
2. Lisage faili sisse HTML-i veebilehe põhistruktuur:
   instagram viewer

   html>
   <htmllang="en-US">
   <pea>
   <pealkiri> Sõnade loendur pealkiri>
   pea>
   <keha>
   
   klass="konteiner">
   <h1> Loenda sõnu h1>
   div>
   keha>
   html>

3. Lisage konteineri lahtrisse ja päise alla tekstiala:

   <tekstialaid="sisend"read="10">tekstiala>

4. Lisage tekstiala alla nupp:

   <nuppuid="loendusnupp">Loenda sõnunuppu>

5. Lisage ulatusmärgend, et kuvada sõnade arv, kui kasutaja klõpsab ülaloleval nupul:

   <div>
    Sõnad: <ulatusid="sõnade arv-tulemus">0ulatus>
   div>

6. Looge HTML-failiga samas kaustas uus fail nimega "styles.css".
7. Täitke CSS-fail mõne CSS-iga, et kujundada oma veebileht:

   keha {
    marginaal: 0;
    polsterdus: 0;
    taustavärv: #f0fcfc;
   }
   * {
    font-perekond: "Arial", sans-serif;
   }
   .konteiner {
    polster: 100px 25%;
    ekraan: flex;
    paindesuund: veerg;
    joone kõrgus: 2rem;
   fondi suurus: 1.2rem;
    värv: #202C39;
   }
   tekstiala {
    polster: 20px;
    fondi suurus: 1rem;
    veeris-alumine: 40px;
   }
   nupp {
    polster: 10px;
    veeris-alumine: 40px;
   } 

8. Linkige CSS-fail oma HTML-failiga, lisades HTML-i peamärgendi sisse lingimärgendi:

   <linkrel="laadileht"href="stiilid.css">

9. Veebilehe kasutajaliidese testimiseks klõpsake failil "index.html", et see veebibrauseris avada.

Kuidas lugeda tekstiala iga sõna

Kui kasutaja sisestab lause tekstialale, peaks veebileht loendama iga sõna, kui ta sellel klõpsab Loenda sõnu nuppu.

Selle funktsiooni saate lisada uude JavaScripti faili. Vajadusel vaadake muud üle algajatele JavaScripti projektiideed kui teil on vaja oma JavaScripti teadmisi värskendada.

1. Lisage failidega "index.html" ja "styles.css" samasse kausta uus fail nimega "script.js".
2. Linkige oma HTML-fail JavaScripti failiga, lisades kehamärgendi allossa skriptimärgendi:

   <keha>
    Sinu kood siin 
   <stsenaariumsrc="script.js">stsenaarium>
   keha>

3. Kasutage script.js-s funktsiooni getElementById() tekstiala, nuppude ja HTML-i elementide toomiseks. Salvestage need elemendid kolme erinevasse muutujasse:

   lase sisend = dokument.getElementById("sisend");
   lase nupp = dokument.getElementById("loendusnupp");
   lase wordCountResult = dokument.getElementById("sõnade arv-tulemus");

4. Lisage klikisündmuste kuulaja. See funktsioon käivitub, kui kasutaja klõpsab nupul Loenda sõnu nupp:

   button.addEventListener("klõpsake", funktsiooni() {
   });

5. Hankige klikisündmuste kuulajas väärtus, mille kasutaja tekstialasse sisestas. Selle väärtuse leiate sisendmuutujast, mis salvestab tekstiala HTML-i elemendi.

   lase str = sisend.väärtus;

6. Kasutage funktsiooni split(), et eraldada string eraldi sõnadeks. See juhtub alati, kui stringis on tühik. See salvestab iga sõna uue massiivi elemendina. Näiteks kui sisestatud lause oli "Ma armastan koeri", oleks tulemuseks massiiv ["mina", "armastus", "koerad"].

   lase wordsList = str.split(" ");

7. Leidke sõnade arv massiivi pikkuse abil:

   lase count = sõnadList.length;

8. Tulemuse kasutajale tagasi kuvamiseks muutke span HTML-i elemendi sisu, et kuvada uus väärtus:

   wordCountResult.innerHTML = loendus; 

Kuidas kasutada näidissõnaloendurit

Saate testida oma sõnaloenduri veebilehte veebibrauseri abil.

1. Avage index.html mis tahes veebibrauseris.
2. Sisestage tekstialale lause või lõik:
3. Klõpsake nuppu Loenda sõnu nuppu, et värskendada sõnade arvu. See kuvab sõnade arvu, täpselt nagu teie kontrollis Google Docsi sõnade arvu, Microsoft Wordi või mõne muu sõnaarvuga redaktori.

Lihtsate rakenduste loomine JavaScripti abil

Nüüd on teil loodetavasti põhiteadmised sellest, kuidas kasutada JavaScripti sõnade loendamiseks ja HTML-lehe elementidega suhtlemiseks. Programmeerimisest arusaamise parandamiseks jätkake väikeste kasulike projektide loomist JavaScriptis.