Како да направите бројач речи у ЈаваСцрипт-у

Бројач речи је алатка коју можете да користите да пребројите број речи у делу текста. Можете га користити да проверите дужину документа или да пратите да ли испуњавате ограничење броја речи.

Можете креирати сопствени бројач речи користећи ХТМЛ, ЦСС и ЈаваСцрипт. Отворите бројач речи у веб претраживачу, унесите текст у поље за унос и погледајте колико речи користите.

Овај пројекат такође може бити користан да вам помогне да вежбате и учврстите своје знање о ЈаваСцрипт-у.

Како креирати кориснички интерфејс за бројач речи

Да бисте креирали кориснички интерфејс за бројач речи, додајте унос области текста основној ХТМЛ страници. Овде можете да унесете реченицу или пасус за који желите да пребројите речи.

1. Направите нову ХТМЛ датотеку под називом "индек.хтмл".
instagram viewer
2. Унутар датотеке додајте основну структуру за ХТМЛ веб страницу:

   хтмл>
   <хтмлланг="ен-УС">
   <глава>
   <наслов> Бројач речи наслов>
   глава>
   <тело>
   
   класа="контејнер">
   <х1> Цоунт Вордс х1>
   див>
   тело>
   хтмл>

3. Унутар див контејнера и испод наслова додајте област за текст:

   <тектареаид="улазни"редова="10">тектареа>

4. Испод области за текст додајте дугме:

   <дугмеид="дугме за бројање">Цоунт Вордсдугме>

5. Додајте ознаку спан да бисте приказали број речи када корисник кликне на дугме изнад:

   <див>
    Речи: <спанид="резултат бројања речи">0спан>
   див>

6. У истој фасцикли као и ваша ХТМЛ датотека, направите нову датотеку под називом „стилес.цсс“.
7. Попуните ЦСС датотеку неким ЦСС-ом да бисте стилизовали своју веб страницу:

   тело {
    маргина: 0;
    паддинг: 0;
    боја позадине: #ф0фцфц;
   }
   * {
    породица фонтова: "Ариал", Санс Сериф;
   }
   .контејнер {
    паддинг: 100пк 25%;
    дисплеј: флек;
    флек-дирецтион: колона;
    лине-хеигхт: 2рем;
   фонт-сизе: 1.2рем;
    боја: #202Ц39;
   }
   тектареа {
    паддинг: 20пк;
    фонт-сизе: 1рем;
    маргин-боттом: 40пк;
   }
   дугме {
    паддинг: 10пк;
    маргин-боттом: 40пк;
   } 

8. Повежите ЦСС датотеку са својом ХТМЛ датотеком тако што ћете укључити ознаку везе унутар ХТМЛ ознаке хеад:

   <линкрел="стилесхеет"хреф="стилес.цсс">

9. Да бисте тестирали кориснички интерфејс веб странице, кликните на датотеку „индек.хтмл“ да бисте је отворили у веб прегледачу.

Како пребројати сваку реч унутар Тектареа-а

Када корисник унесе реченицу у област за текст, веб страница треба да броји сваку реч када кликне на Цоунт Вордс дугме.

Ову функцију можете додати унутар нове ЈаваСцрипт датотеке. Ако треба, ревидирајте друго идеје за почетни ЈаваСцрипт пројекат ако треба да освежите своје знање о ЈаваСцрипт-у.

1. У исту фасциклу као и датотеке „индек.хтмл“ и „стилес.цсс“ додајте нову датотеку под називом „сцрипт.јс“.
2. Повежите своју ХТМЛ датотеку са ЈаваСцрипт датотеком додавањем ознаке скрипте на дну ознаке тела:

   <тело>
    Ваш код овде 
   <скриптасрц="сцрипт.јс">скрипта>
   тело>

3. Унутар сцрипт.јс користите функцију гетЕлементБиИд() да бисте преузели ХТМЛ елементе поља за текст, дугмета и спан. Чувајте ове елементе у три одвојене варијабле:

   дозволити улаз = документ.гетЕлементБиИд("улазни");
   дозволити дугме = документ.гетЕлементБиИд("дугме за бројање");
   дозволити вордЦоунтРесулт = документ.гетЕлементБиИд("резултат бројања речи");

4. Додајте слушалац догађаја клика. Ова функција ће се извршити када корисник кликне на Цоунт Вордс дугме:

   буттон.аддЕвентЛистенер("кликни", функција() {
   });

5. Унутар слушаоца догађаја клика, добијте вредност коју је корисник унео у поље за текст. Ову вредност можете пронаћи у инпут променљивој, која чува ХТМЛ елемент тектареа.

   дозволити стр = инпут.валуе;

6. Користите функцију сплит() да раздвојите стринг у засебне речи. Ово ће се десити кад год постоји размак у низу. Ово ће чувати сваку реч као елемент новог низа. На пример, ако је унета реченица „Волим псе“, резултујући низ би био [„Ја“, „волим“, „псе“].

   дозволити листа речи = стр.сплит(" ");

7. Пронађите број речи користећи дужину низа:

   дозволити цоунт = вордсЛист.ленгтх;

8. Да бисте приказали резултат назад кориснику, промените садржај ХТМЛ елемента спан да прикаже нову вредност:

   вордЦоунтРесулт.иннерХТМЛ = цоунт; 

Како се користи пример бројача речи

Можете тестирати своју веб страницу бројача речи помоћу веб претраживача.

1. Отворите индек.хтмл у било ком веб претраживачу.
2. Унесите реченицу или пасус у област за текст:
3. Кликните на Цоунт Вордс дугме за ажурирање броја речи. Ово ће приказати број речи, баш као и ви проверио број речи у Гоогле документима, Мицрософт Ворд или било који други уређивач са бројем речи.

Креирање једноставних апликација помоћу ЈаваСцрипт-а

Сада се надамо да имате основно разумевање како да користите ЈаваСцрипт за бројање речи и интеракцију са елементима на ХТМЛ страници. Да бисте побољшали своје разумевање програмирања, наставите да креирате мале корисне пројекте у ЈаваСцрипт-у.