Resumo : neste tutorial, você aprenderá como construir um aplicativo Word Counter usando Vanilla JavaScript.
Aqui está o aplicativo Word Counter que você irá construir.
Crie a estrutura do projeto
Primeiro, crie a pasta do projeto chamada word-counter
.
Em segundo lugar, no word-counter
projeto, crie as pastas css
e js
, que armazenarão os arquivos CSS e JavaScript de acordo.
Terceiro, crie um style.css
arquivo dentro da css
pasta e dois arquivos JavaScript chamados word-counter.js
e app.js
dentro da js
pasta.
Por fim, crie o index.html
arquivo na pasta raiz do projeto.
A estrutura final da pasta do projeto ficará assim:
Crie o arquivo HTML
Primeiro, edite o index.html
arquivo e coloque os arquivos CSS e JavaScript no index.html
arquivo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Word Counter</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/word-counter.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
O aplicativo WordCounter terá um <textarea>
elemento simples. Quando você insere algum texto, ele mostra o número de caracteres e palavras que você digitou.
Para fazer isso, você precisará ter <textarea>
os seguintes <div>
elementos:
- O
<textarea>
elemento permitirá que você insira texto. - E o
<div>
elemento mostrará o número de caracteres e palavras inseridos no<textarea>
elemento.
Por padrão, o <div>
elemento deve mostrar 0 caracteres e 0 palavras.
Segundo, adicione os elementos <textarea>
e <div>
ao index.html
arquivo após a <body>
tag de abertura e antes da primeira <script>
tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Word Counter</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Word Counter</h1>
<label for="text">Enter some text below:</label>
<textarea id="text" rows="10" cols="60"></textarea>
<div id="stat">You've written 0 words and 0 characters.</div>
<script src="js/word-counter.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Crie a classe WordCounter
Primeiro, você criará a WordCounter
classe no word-counter.js
arquivo:
class WordCounter {
}
Linguagem de código: JavaScript ( javascript )
A WordCounter
classe aceitará um <textarea>
elemento. Ele ouvirá o input
evento do <textarea>
elemento e calculará a quantidade de caracteres e palavras que o <textarea>
elemento possui.
Em segundo lugar, adicione o constructor
à WordCounter
classe. O constructor
aceitará um <textarea>
elemento.
Dentro do constructor
, você inicializará a inputText
propriedade da classe no inputText
argumento e anexará o input
ouvinte de evento ao inputText
elemento:
class WordCounter {
constructor(inputText) {
this.inputText = inputText;
this.inputText.addEventListener('input', this.count);
}
count(){
}
}
Linguagem de código: JavaScript ( javascript )
O this.count()
método será executado sempre que o input
evento ocorrer. Voltaremos para implementar a lógica do count()
método mais tarde.
Terceiro, adicione um novo método à WordCounter
classe, que calcula o número de caracteres e palavras:
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,
};
}
}
Linguagem de código: JavaScript ( javascript )
O getWordStat()
método usa uma expressão regular /\S/g
para retornar as palavras numéricas de uma string. Ele também usa a length
propriedade string da string de entrada str
para obter o número de caracteres.
Terceiro, o count()
método precisará chamar o getWordStat()
para calcular o número de palavras e caracteres do inputText
elemento.
Para obter o texto do <textarea>
elemento, você usa sua value
propriedade:
...
count() {
let wordStat = this.getWordStat(this.inputText.value.trim());
// how to expose the wordStat to the outside
// ..
}
Linguagem de código: JavaScript ( javascript )
E o count()
método também precisa comunicar com o exterior a quantidade de palavras e caracteres.
Para fazer isso, você tem duas opções: usar um callback e um evento personalizado . Usaremos um evento personalizado neste tutorial.
Se você quiser saber como usar um retorno de chamada, confira o tutorial do cronômetro de contagem regressiva .
Quarto, adicione um novo método chamado emitEvent
à WordCounter
classe:
emitEvent(wordStat) {
// Create count event
let countEvent = new CustomEvent('count', {
bubbles: true,
cancelable: true,
detail: {
wordStat
}
});
// dispatch the count event
this.inputText.dispatchEvent(countEvent);
}
Linguagem de código: JavaScript ( javascript )
O emitEvent()
método aceita um wordStat
objeto. Dentro do método, criamos um evento customizado para o inputText
elemento chamado count
usando o CustomEvent
construtor e despachamos o count
evento usando o dispatchEvent
método.
Posteriormente, você anexará um ouvinte de evento ao count
evento e acessará o wordStat
objeto usando a event.detail.wordStat
sintaxe.
O emitEvent()
deve ser chamado sempre que o input
evento ocorrer. Portanto, invocamos o emitEvent()
interior do count()
método:
count(){
let wordStat = this.getWordStat(this.inputText.value.trim());
this.emitEvent(wordStat);
}
Linguagem de código: JavaScript ( javascript )
A WordCounter
classe ficará assim:
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,
};
}
}
Linguagem de código: JavaScript ( javascript )
Adicionar lógica ao arquivo app.js
Primeiro, selecione o elemento <textarea>
e <div>
usando o querySelector()
método:
const inputText = document.querySelector('#text');
const statElem = document.querySelector('#stat');
Linguagem de código: JavaScript ( javascript )
Segundo, crie uma nova instância da WordCounter
classe e passe o inputText
elemento para seu construtor:
new WordCounter(inputText);
Linguagem de código: JavaScript ( javascript )
Terceiro, defina uma nova função chamada render()
que atualize a contagem de palavras e caracteres do statElem
elemento.
A render()
função aceita um objeto de evento personalizado:
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>`;
}
Linguagem de código: HTML, XML ( xml )
Quarto, adicione um ouvinte de evento ao count
par e execute o render()
método sempre que o count
evento ocorrer:
inputText.addEventListener('count', render);
Linguagem de código: JavaScript ( javascript )
Será app.js
parecido com o seguinte:
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);
Linguagem de código: JavaScript ( javascript )
Agora, se você abrir o index.html
arquivo no navegador da web, verá o seguinte erro:
Uncaught TypeError: Cannot read property 'value' of undefined at HTMLTextAreaElement.count
Linguagem de código: HTML, XML ( xml )
E o problema ocorreu no count()
método da WordCounter
classe:
Está mostrando que this.inputText
é undefined
. Portanto, acessar a value
propriedade do this.inputText
causa um erro.
Resolva este problema
Quando input
ocorre um evento no inputText
elemento, o count()
método é executado.
E o objeto que executa o count()
método é o inputText
objeto, não a instância da WordCounter
classe.
Isso significa que dentro do count()
método, o this
valor faz referência ao inputText
elemento, não ao WordCounter
objeto.
Para provar isso, você pode registrar o this
valor dentro do count()
método da seguinte maneira:
count() {
console.log(this);
}
Linguagem de código: JavaScript ( javascript )
… e atualize index.html
novamente, você verá o <textarea>
elemento no console toda vez que digitar algum texto no <textarea>
:
<textarea id="text" rows="10" cols="60"></textarea>
Linguagem de código: HTML, XML ( xml )
Como o this
valor dentro do count()
método faz referência ao <textarea>
elemento, ele não possui a inputText
propriedade. E também não tem o emitEvent()
método.
Para corrigir o problema, você precisa alterar o ouvinte de evento para uma função de seta como esta:
constructor(inputText) {
this.inputText = inputText;
this.inputText.addEventListener('input', () => {
this.count();
});
}
Linguagem de código: JavaScript ( javascript )
Quando você usa a função de seta, o this
valor faz referência ao objeto do bloco circundante que é WordCounter
neste caso. Em outras palavras, você pode acessar todas as propriedades e métodos do WordCounter no count()
método.
A aula final WordCounter
ficará assim:
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,
};
}
}
Linguagem de código: JavaScript ( javascript )
Clique aqui para ver o aplicativo Word Counter em ação.
Resumo
Neste tutorial, você aprendeu como desenvolver um aplicativo Word Counter usando Vanilla JavaScript. E a seguir estão as principais dicas:
- Como criar e emitir um evento personalizado.
- Como resolver o
this
problema usando funções de seta.