Kaip sukurti žodžių skaitiklį „JavaScript“.

Žodžių skaitiklis yra įrankis, kurį galite naudoti norėdami suskaičiuoti žodžių skaičių teksto dalyje. Galite naudoti jį norėdami patikrinti dokumento ilgį arba stebėti, ar atitinkate žodžių skaičiaus limitą.

Galite sukurti savo žodžių skaitiklį naudodami HTML, CSS ir JavaScript. Atidarykite žodžių skaitiklį žiniatinklio naršyklėje, įveskite tekstą į įvesties lauką ir pažiūrėkite, kiek žodžių naudojate.

Šis projektas taip pat gali būti naudingas padedant praktikuoti ir sustiprinti savo JavaScript žinias.

Kaip sukurti „Word Counter“ vartotojo sąsają

Norėdami sukurti žodžių skaitiklio vartotojo sąsają, į pagrindinį HTML puslapį pridėkite teksto srities įvestį. Čia galite įvesti sakinį ar pastraipą, kurios žodžius norite suskaičiuoti.

1. Sukurkite naują HTML failą pavadinimu „index.html“.
2. Failo viduje pridėkite pagrindinę HTML tinklalapio struktūrą:

   html>
   <htmllang="en-US">
   <galva>
   <titulą> Žodžių skaitiklis titulą>
   galva>
   <kūnas>
   
   klasė="konteineris">
   <h1> Skaičiuoti žodžius h1>
   div>
   kūnas>
   html>

3. Sudėtinio rodinio div viduje ir po antrašte pridėkite teksto sritį:

   <teksto sritisid="įvestis"eilučių="10">teksto sritis>

4. Po teksto sritimi pridėkite mygtuką:

   <mygtukąid="skaičiavimo mygtukas">Skaičiuoti žodžiusmygtuką>

5. Pridėkite span žymą, kad būtų rodomas žodžių skaičius, kai vartotojas spustelėja aukščiau esantį mygtuką:

   <div>
    Žodžiai: <spanid="žodžių skaičius - rezultatas">0span>
   div>

6. Tame pačiame aplanke kaip ir HTML failas sukurkite naują failą pavadinimu „styles.css“.
7. Užpildykite CSS failą CSS, kad sukurtumėte savo tinklalapio stilių:

   kūnas {
    paraštė: 0;
    paminkštinimas: 0;
    fono spalva: #f0fcfc;
   }
   * {
    šrifto šeima: "Arial", sans-serif;
   }
   .konteineris {
    paminkštinimas: 100px 25%;
    ekranas: lankstus;
    lankstumo kryptis: stulpelis;
    linijos aukštis: 2rem;
   šrifto dydis: 1.2rem;
    spalva: #202C39;
   }
   textarea {
    pamušalas: 20px;
    šrifto dydis: 1 rem;
    paraštė-apačia: 40 pikselių;
   }
   mygtukas {
    pamušalas: 10px;
    paraštė-apačia: 40 pikselių;
   } 

8. Susiekite CSS failą su HTML failu įtraukdami nuorodos žymą į HTML head žymą:

   <nuorodarel="stiliaus lapas"href="styles.css">

9. Norėdami išbandyti tinklalapio vartotojo sąsają, spustelėkite failą „index.html“, kad atidarytumėte jį žiniatinklio naršyklėje.

Kaip suskaičiuoti kiekvieną žodį tekstinėje srityje

Kai vartotojas įveda sakinį į teksto sritį, tinklalapis turėtų skaičiuoti kiekvieną žodį, kai spusteli Skaičiuoti žodžius mygtuką.

Šią funkciją galite pridėti naujame „JavaScript“ faile. Jei reikia, peržiūrėkite kitus pradedančiųjų JavaScript projekto idėjos jei reikia pagyvinti savo JavaScript žinias.

1. Tame pačiame aplanke, kuriame yra failai „index.html“ ir „styles.css“, pridėkite naują failą pavadinimu „script.js“.
2. Susiekite HTML failą su „JavaScript“ failu, pridėdami scenarijaus žymą turinio žymos apačioje:

   <kūnas>
    Jūsų kodas čia 
   <scenarijussrc="script.js">scenarijus>
   kūnas>

3. Skripte script.js naudokite funkciją getElementById(), kad gautumėte teksto sritį, mygtukus ir HTML elementus. Išsaugokite šiuos elementus į tris atskirus kintamuosius:

   leisti įvestis = dokumentas.getElementById("įvestis");
   leisti mygtukas = dokumentas.getElementById("skaičiavimo mygtukas");
   leisti wordCountResult = dokumentas.getElementById("žodžių skaičius - rezultatas");

4. Pridėkite paspaudimo įvykių klausytoją. Ši funkcija bus vykdoma, kai vartotojas spustelėja Skaičiuoti žodžius mygtukas:

   button.addEventListener("spausti", funkcija() {
   });

5. Spustelėjimo įvykių klausyklėje gaukite vertę, kurią naudotojas įvedė į tekstinę sritį. Šią reikšmę galite rasti įvesties kintamajame, kuriame saugomas tekstinės srities HTML elementas.

   leisti str = input.value;

6. Norėdami atskirti eilutę į atskirus žodžius, naudokite split() funkciją. Tai įvyks, kai eilutėje yra tarpas. Tai išsaugos kiekvieną žodį kaip naujo masyvo elementą. Pavyzdžiui, jei įvestas sakinys yra „Aš myliu šunis“, gautas masyvas būtų ["aš", "meilė", "šunys"].

   leisti žodžių sąrašas = str.split(" ");

7. Raskite žodžių skaičių naudodami masyvo ilgį:

   leisti count = žodžiaiSąrašas.ilgis;

8. Norėdami vartotojui vėl rodyti rezultatą, pakeiskite span HTML elemento turinį, kad būtų rodoma nauja reikšmė:

   wordCountResult.innerHTML = skaičius; 

Kaip naudoti žodžių skaitiklio pavyzdį

Galite išbandyti savo žodžių skaitiklio tinklalapį naudodami žiniatinklio naršyklę.

1. Atidarykite index.html bet kurioje žiniatinklio naršyklėje.
2. Į teksto sritį įveskite sakinį ar pastraipą:
3. Spustelėkite ant Skaičiuoti žodžius mygtuką, norėdami atnaujinti žodžių skaičių. Bus rodomas žodžių skaičius, kaip ir jūs patikrino žodžių skaičių „Google“ dokumentuose, Microsoft Word ar bet kuris kitas redaktorius su žodžių skaičiumi.

Paprastų programų kūrimas naudojant „JavaScript“.

Tikimės, kad dabar turite pagrindinį supratimą apie tai, kaip naudoti „JavaScript“ žodžiams skaičiuoti ir sąveikauti su elementais HTML puslapyje. Norėdami pagerinti savo programavimo supratimą, toliau kurkite mažus naudingus projektus „JavaScript“.