Como criar um contador de palavras em JavaScript
Um contador de palavras é uma ferramenta que você pode usar para contar o número de palavras em um texto. Você pode usá-lo para verificar o comprimento de um documento ou para rastrear se está atingindo um limite de contagem de palavras.
Você pode criar seu próprio contador de palavras usando HTML, CSS e JavaScript. Abra seu contador de palavras em um navegador da Web, digite seu texto em um campo de entrada e veja quantas palavras você está usando.
Este projeto também pode ser útil para ajudá-lo a praticar e solidificar seu conhecimento de JavaScript.
Como criar a interface do usuário para o contador de palavras
Para criar a interface do usuário para o contador de palavras, adicione uma entrada de área de texto a uma página HTML básica. É aqui que você pode inserir a frase ou o parágrafo para o qual gostaria de contar as palavras.
- Crie um novo arquivo HTML chamado “index.html”.
- Dentro do arquivo, adicione a estrutura básica para uma página HTML:
<!doctype html>
<html lang="en-US">
<head>
<title> Word Counter </title>
</head>
<body>
<div class="container">
<h1> Count Words </h1>
</div>
</body>
</html> - Dentro do contêiner div e abaixo do título, adicione uma área de texto:
<textarea id="input" rows="10"></textarea> - Abaixo da área de texto, adicione um botão:
<button id="count-button">Count Words</button> - Adicione uma tag span para exibir a contagem de palavras quando o usuário clicar no botão acima:
<div>
Words: <span id="word-count-result">0</span>
</div> - Na mesma pasta do seu arquivo HTML, crie um novo arquivo chamado “styles.css”.
- Preencha o arquivo CSS com algum CSS para estilizar sua página da web:
body {
margin: 0;
padding: 0;
background-color: #f0fcfc;
}* {
font-family: "Arial", sans-serif;
}.container {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2rem;
color: #202C39;
}textarea {
padding: 20px;
font-size: 1rem;
margin-bottom: 40px;
}button {
padding: 10px;
margin-bottom: 40px;
} - Vincule o arquivo CSS ao seu arquivo HTML incluindo uma tag de link dentro da tag de cabeçalho do HTML:
<link rel="stylesheet" href="styles.css"> - Para testar a IU da página da web, clique no arquivo “index.html” para abri-lo em um navegador da web.
Como contar cada palavra dentro da área de texto
Quando um usuário insere uma frase na área de texto, a página da Web deve contar cada palavra ao clicar no botão Contar palavras .
Você pode adicionar essa funcionalidade dentro de um novo arquivo JavaScript. Se necessário, revise outras ideias de projetos JavaScript para iniciantes se precisar aprimorar seu conhecimento de JavaScript.
- Na mesma pasta que seus arquivos “index.html” e “styles.css”, adicione um novo arquivo chamado “script.js”.
- Vincule seu arquivo HTML ao seu arquivo JavaScript adicionando uma tag de script na parte inferior da tag do corpo:
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - Dentro de script.js, use a função getElementById() para recuperar os elementos HTML textarea, button e span. Armazene esses elementos em três variáveis separadas:
let input = document.getElementById("input");
let button = document.getElementById("count-button");
let wordCountResult = document.getElementById("word-count-result"); - Adicione um ouvinte de evento de clique. Esta função será executada quando o usuário clicar no botão Contar Palavras :
button.addEventListener("click", function() {
}); - Dentro do ouvinte do evento click, obtenha o valor que o usuário inseriu na área de texto. Você pode encontrar esse valor na variável de entrada, que armazena o elemento HTML textarea.
let str = input.value; - Use a função split() para separar a string em palavras separadas. Isso ocorrerá sempre que houver um espaço na string. Isso armazenará cada palavra como um elemento de uma nova matriz. Por exemplo, se a frase inserida for “Eu amo cachorros”, a matriz resultante seria [“Eu”, “amo”, “cachorros”].
let wordsList = str.split(""); - Encontre a contagem de palavras usando o comprimento da matriz:
let count = wordsList.length; - Para exibir o resultado de volta ao usuário, altere o conteúdo do elemento HTML span para exibir o novo valor:
wordCountResult.innerHTML = count;
Como usar o contador de palavras de exemplo
Você pode testar sua página da Web do contador de palavras usando um navegador da Web.
- Abra index.html em qualquer navegador da web.
- Digite uma frase ou parágrafo na área de texto:
- Clique no botão Count Words para atualizar a contagem de palavras. Isso exibirá a contagem de palavras, como se você verificasse a contagem de palavras no Google Docs, Microsoft Word ou qualquer outro editor com contagem de palavras.
Criando Aplicações Simples Usando JavaScript
Agora esperamos que você tenha uma compreensão básica de como usar JavaScript para contar palavras e interagir com elementos em uma página HTML. Para aprimorar sua compreensão de programação, continue criando pequenos projetos úteis em JavaScript.
Deixe um comentário