Как да създадете брояч на думи в JavaScript

Броячът на думи е инструмент, който можете да използвате, за да преброите броя на думите в част от текста. Можете да го използвате, за да проверите дължината на документ или да проследите дали спазвате лимит за брой думи.

Можете да създадете свой собствен брояч на думи с помощта на HTML, CSS и JavaScript. Отворете своя брояч на думи в уеб браузър, въведете текста си в полето за въвеждане и вижте колко думи използвате.

Този проект също може да бъде полезен, като ви помогне да практикувате и затвърдите знанията си за JavaScript.

Как да създадете потребителския интерфейс за брояча на думи

За да създадете потребителския интерфейс за брояча на думи, добавете въвеждане на текстова област към основна HTML страница. Това е мястото, където можете да въведете изречението или абзаца, за които искате да преброите думите.

1. Създайте нов HTML файл, наречен "index.html".
2. Във файла добавете основната структура за HTML уеб страница:

   html>
   <htmlезик="en-US">
   <глава>
   <заглавие> Брояч на думи заглавие>
   глава>
   <тяло>
   
   клас="контейнер">
   <h1> Брой думи h1>
   див>
   тяло>
   html>

3. Вътре в контейнера div и под заглавието добавете текстова област:

   <текстово поледокумент за самоличност="вход"редове="10">текстово поле>

4. Под текстовата област добавете бутон:

   <бутондокумент за самоличност="бутон за броене">Брой думибутон>

5. Добавете таг span, за да покажете броя на думите, когато потребителят щракне върху бутона по-горе:

   <див>
    думи: <педядокумент за самоличност="броене на думи-резултат">0педя>
   див>

6. В същата папка като вашия HTML файл създайте нов файл, наречен "styles.css".
7. Попълнете CSS файла с малко CSS, за да стилизирате вашата уеб страница:

   тяло {
    марж: 0;
    подплата: 0;
    Цвят на фона: #f0fcfc;
   }
   * {
    шрифтово семейство: "Arial", sans-serif;
   }
   .контейнер {
    подложка: 100px 25%;
    дисплей: гъвкав;
    flex-direction: колона;
    височина на реда: 2 rem;
   размер на шрифта: 1.2rem;
    цвят: #202C39;
   }
   текстово поле {
    подложка: 20px;
    размер на шрифта: 1 rem;
    margin-bottom: 40px;
   }
   бутон {
    подложка: 10px;
    margin-bottom: 40px;
   } 

8. Свържете CSS файла с вашия HTML файл, като включите таг за връзка в тага за глава на HTML:

   <връзкаотн="стилов лист"href="styles.css">

9. За да тествате потребителския интерфейс на уеб страницата, щракнете върху файла "index.html", за да го отворите в уеб браузър.

Как да преброим всяка дума в текстовото поле

Когато потребител въведе изречение в текстовата област, уеб страницата трябва да брои всяка дума, когато кликне върху Брой думи бутон.

Можете да добавите тази функционалност в нов JavaScript файл. Ако трябва, преразгледайте други идеи за JavaScript проекти за начинаещи ако трябва да освежите знанията си за JavaScript.

1. В същата папка като вашите файлове "index.html" и "styles.css" добавете нов файл, наречен "script.js".
2. Свържете вашия HTML файл с вашия JavaScript файл, като добавите скриптов таг в долната част на основния таг:

   <тяло>
    Вашият код тук 
   <сценарийsrc="script.js">сценарий>
   тяло>

3. Вътре в script.js използвайте функцията getElementById(), за да извлечете текстовото поле, бутона и span HTML елементите. Съхранявайте тези елементи в три отделни променливи:

   позволявам вход = документ.getElementById("вход");
   позволявам бутон = документ.getElementById("бутон за броене");
   позволявам wordCountResult = документ.getElementById("броене на думи-резултат");

4. Добавяне на слушател на събитие за кликване. Тази функция ще се изпълни, когато потребителят щракне върху Брой думи бутон:

   button.addEventListener("клик", функция() {
   });

5. Вътре в слушателя на събития за кликване вземете стойността, която потребителят е въвел в текстовото поле. Можете да намерите тази стойност във входната променлива, която съхранява HTML елемента textarea.

   позволявам str = input.value;

6. Използвайте функцията split(), за да разделите низа на отделни думи. Това ще се случи винаги, когато има интервал в низа. Това ще съхрани всяка дума като елемент от нов масив. Например, ако въведеното изречение е „Обичам кучета“, полученият масив ще бъде [„Аз“, „любов“, „кучета“].

   позволявам wordsList = str.split(" ");

7. Намерете броя на думите, като използвате дължината на масива:

   позволявам count = wordsList.length;

8. За да покажете резултата обратно на потребителя, променете съдържанието на span HTML елемента, за да покажете новата стойност:

   wordCountResult.innerHTML = брой; 

Как да използвате примерния брояч на думи

Можете да тествате вашата уеб страница за брояч на думи с помощта на уеб браузър.

1. Отворете index.html във всеки уеб браузър.
2. Въведете изречение или абзац в текстовата област:
3. Кликнете върху Брой думи бутон за актуализиране на броя на думите. Това ще покаже броя на думите, точно както ако вие проверих броя на думите в Google Документи, Microsoft Word или всеки друг редактор с брой думи.

Създаване на прости приложения с помощта на JavaScript

Сега се надяваме, че имате основно разбиране как да използвате JavaScript за броене на думи и взаимодействие с елементи на HTML страница. За да подобрите разбирането си за програмиране, продължете да създавате малки полезни проекти в JavaScript.