Как создать инструмент для подсчета слов с помощью ванильного JavaScript

В этом уроке вы узнаете, как создать приложение для подсчета слов с помощью ванильного JavaScript.
Ниже описано, что мы будем делать.

Вы сможете добиться того, что видите на приведенной выше схеме, как только закончите работу с этим материалом.

Введение

Как начинающий или промежуточный разработчик, вы обязательно дойдете до момента, когда вам понадобится создать что-то, что подсчитывает слова и символы, и может быть использовано для создания приложения чата или раздела комментариев. И существует высокий спрос со стороны промежуточных разработчиков на создание такого инструмента для подсчета слов.

Необходимые условия

Единственное, что вам понадобится, это создать приложение-счетчик слов вместе со мной. Хотя вам не понадобится много
Sublime text или Vs code
Браузер по вашему выбору

Кодирование приложения «Счетчик слов

Во-первых, создайте папку проекта под названием word-counter.
Во-вторых, в проекте word-counter создайте папки css и js, в которых будут храниться файлы CSS и JavaScript соответственно.
В-третьих, создайте файл style.css в папке css и два JavaScript-файла word-counter.js и app.js в папке js. Наконец, создайте файл index.html в корневой папке проекта.

Создание HTML-файла

После создания HTML-файла приложение WordCounter будет иметь простой элемент.
Когда вы введете какой-либо текст, он будет показывать количество введенных вами символов и слов.
Для этого вам понадобятся и элементы:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>word count</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Word Count</h1>

    <label>Enter Some Text Below:</label>
    <textarea cols="60" rows="10" id="text"></textarea>
    <div id="stat">You have written 0 words and 0 character</div>

    <script src="wordCounter.js"></script>
    <script src="app.js"></script>

</body>
</html>

Создайте класс wordCounter
Сначала вы создадите класс WordCounter в файле word-counter.js:

class WordCounter { 

}

Класс WordCounter будет принимать элемент. Он будет прослушивать событие ввода элемента и подсчитывать количество символов и слов, которые содержит элемент.
Во-вторых, добавьте конструктор к классу WordCounter. Конструктор будет принимать элемент.

class WordCounter { 
   constructor(inputText) { 
   this.inputText = inputText;
   this.inputText.addEventListener('input', this.count);
   } 
  count(){ 
  } 
}

Внутри конструктора вы инициализируете свойство inputText класса аргументом
 inputText и прикрепите слушатель событий ввода к элементу inputText:

Метод this.count() будет выполняться каждый раз, когда произойдет событие ввода. К реализации логики для метода count() мы вернемся позже.

class WordCounter { 
  constructor(inputText) { 
  this.inputText = inputText;
this.inputText.addEventListener('input', this.count); 
  } 
  count(){ 
} 
getWordStat(str) { 
   let matches = str.match(/S+/g); 
     return { 
   characters: str.length, words: matches ? matches.length : 0,
 };
 }
}

В-третьих, добавьте новый метод в класс WordCounter, который подсчитывает количество символов и слов:
Метод getWordStat() использует регулярное выражение /S/g, чтобы вернуть количество слов в строке. Он также использует свойство string length входной строки str для получения количества символов.

В-третьих, метод count() должен будет вызвать getWordStat() для подсчета количества слов и символов элемента inputText.
Чтобы получить текст элемента, вы используете его свойство value:

А методу count() также необходимо передать наружу количество слов и символов.
Для этого у вас есть два варианта: использование обратного вызова и пользовательского события. В этом учебнике мы будем использовать пользовательское событие.
Если вы хотите узнать, как использовать обратный вызов, посмотрите учебник по таймеру обратного отсчета.
В-четвертых, добавьте в класс WordCounter новый метод под названием emitEvent:

emitEvent(wordStat) { 
// Create count event 
  let countEvent = new CustomEvent('count', { 
  bubbles: true,
  cancelable: true, 
  detail: { 
  wordStat 
  } 
  });
this.inputText.dispatchEvent(countEvent); 
}

Метод emitEvent() принимает объект wordStat. Внутри метода мы создаем пользовательское событие для элемента inputText под названием count с помощью конструктора CustomEvent и отправляем событие count с помощью метода dispatchEvent.
Позже вы прикрепите слушателя события count и получите доступ к объекту wordStat, используя синтаксис event.detail.wordStat.
Метод emitEvent() должен вызываться каждый раз, когда происходит входное событие. Поэтому мы вызываем emitEvent() внутри метода count():

Class wordCounter{
    constructor(inputText) { 
    this.inputText = inputText; 
    this.inputText.addEventListener('input', this.count); 
    } 
  count(){
     let wordStat = this.getWordStat(this.inputText.value.trim()); 
  this.emitEvent(wordStat); 
 }
emitEvent(wordStat) { 
// Create count event 
 let countEvent = new CustomEvent('count', { 
 bubbles: true, 
 cancelable: true,
 detail: { 
 wordStat 
 } 
}); 
// dispatch the count event 
 this.inputText.dispatchEvent(countEvent); 
}

// Функция Ниже будет подсчитывать количество символов.

getWordStat(str) { 
  let matches = str.match(/S+/g); 
  return { 
  characters: str.length, 
  words: matches ? matches.length : 0, 
  }; 
 }
}

WordCounter.js будет выглядеть следующим образом.

Добавление логики в файл app.js

const inputText = document.querySelector('#text'); 
const statElem = document.querySelector('#stat');

Во-первых, выберите элемент and с помощью метода querySelector():

Во-вторых, создайте новый экземпляр класса wordcounter и передайте в его конструктор элемент inputText:

new WordCounter(inputText);

В-третьих, определите новую функцию render(), которая обновляет количество слов и символов в элементе statElem.
Функция render() принимает пользовательский объект события:

const render = (event) => { 
  statElem.innerHTML = `<p>You've written <span class="highlight">
${event.detail.wordStat.words} words</span>and <span class="highlight">
${event.detail.wordStat.characters}characters</span>.</p>`; 
}

В-четвертых, добавьте слушатель события count even и выполняйте метод render() каждый раз, когда происходит событие count:

inputText.addEventListener('count', render);

const inputText = document.querySelector('#text'); 
const statElem = document.querySelector('#stat');
 // create a new instance of WordCounter 
new WordCounter(inputText);

const render = (event) => { statElem.innerHTML = `<p>You've written
<span class="highlight">${event.detail.wordStat.words} words</span>and
<span class="highlight">${event.detail.wordStat.characters}
 characters</span>.</p>`; 
} 
inputText.addEventListener('count', render);

App.js будет выглядеть следующим образом:

Теперь, если вы откроете файл index.html в веб-браузере, вы увидите следующую ошибку:
Uncaught TypeError: Cannot read property ‘value’ of undefined at HTMLTextAreaElement.count

Проблема возникла в методе count() класса WordCounter:

Он показывает, что this.inputText не определен. Поэтому обращение к свойству value this.inputText вызывает ошибку.
Решите эту проблему
Когда происходит событие ввода на элементе inputText, выполняется метод count().
При этом объектом, выполняющим метод count(), является объект inputText, а не экземпляр класса WordCounter.
Это означает, что внутри метода count() значение this ссылается на элемент inputText, а не на объект WordCounter.

count() { 
   console.log(this); 
}

Чтобы доказать это, вы можете записать значение this внутри метода count() следующим образом:

<textarea id="text" rows="10" cols="60"></textarea>

… и снова обновите index.html, вы будете видеть элемент в консоли каждый раз, когда вводите текст в поле :

Поскольку значение this внутри метода count() ссылается на элемент, у него нет свойства inputText. И у него также нет метода emitEvent().
Чтобы решить эту проблему, нужно изменить слушатель события на функцию стрелки, как это сделано здесь:

constructor(inputText) { 
 this.inputText = inputText; 
 this.inputText.addEventListener('input', () => { 
 this.count(); 
 }); 
}

Когда вы используете стрелочную функцию, значение this ссылается на объект окружающего блока, которым в данном случае является WordCounter. Другими словами, вы можете получить доступ ко всем свойствам и методам WordCounter в методе count().

Окончательный класс WordCounter будет выглядеть следующим образом:

class WordCounter { 
  constructor(inputText) { 
  this.inputText = inputText; 
  this.inputText.addEventListener('input', () => { 
  this.count(); 
  });
} 
count() { 
let wordStat = this.getWordStat(this.inputText.value.trim());
This.emitEvent(wordStat);
}
 emitEvent(wordStat) { // Create count event 
 let countEvent = new CustomEvent('count', { 
 bubbles: true, 
 cancelable: true, 
 detail: { 
 wordStat 
 } 
 }); // dispatch the count event 
 this.inputText.dispatchEvent(countEvent); 

 } 
 getWordStat(str) { 
   let matches = str.match(/S+/g); 
   return { 
   characters: str.length, 
   words: matches ? matches.length : 0, 
  }; 
 } 
}

Резюме

В этом руководстве вы узнали, как разработать приложение Word Counter, используя ванильный JavaScript. Ниже приведены основные выводы:

  • Как создать и инициировать пользовательское событие
  • Как решить эту проблему с помощью стрелочных функций. #Об автореЭммануэль К. Околи начал свой путь в качестве инженера-программиста в 2020 году. За эти годы он приобрел полноценные навыки в JavaScript, Php, Html & Css и т.д. В настоящее время он работает фрилансером, создает веб-сайты для клиентов и пишет технические руководства, обучая других тому, как делать то, что делает он.

Эммануэль К. Околи открыт и готов выслушать вас. Вы можете связаться с ним на Linked-In, Facebook, Github или на его сайте.

Оцените статью
Procodings.ru
Добавить комментарий