В этом уроке вы узнаете, как создать приложение для подсчета слов с помощью ванильного 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 или на его сайте.