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.

1. Crie um novo arquivo HTML chamado "index.html".
2. Dentro do arquivo, adicione a estrutura básica para uma página HTML:

   html>
   <htmlidioma="pt-BR">
   <cabeça>
   <título> contador de palavras título>
   cabeça>
   <corpo>
   
   aula="recipiente">
   <h1> Contar palavras h1>
   div>
   corpo>
   html>

3. Dentro do contêiner div e abaixo do título, adicione uma área de texto:

   <área de textoeu ia="entrada"linhas="10">área de texto>

4. Abaixo da área de texto, adicione um botão:

   <botãoeu ia="botão de contagem">Contar palavrasbotão>

5. Adicione uma tag span para exibir a contagem de palavras quando o usuário clicar no botão acima:

   <div>
    Palavras: <períodoeu ia="resultado da contagem de palavras">0período>
   div>

6. Na mesma pasta do seu arquivo HTML, crie um novo arquivo chamado "styles.css".
7. Preencha o arquivo CSS com algum CSS para estilizar sua página da web:

   corpo {
    margem: 0;
    preenchimento: 0;
    cor de fundo: #f0fcfc;
   }
   * {
    família de fontes: "Arial", sem serifa;
   }
   .recipiente {
    preenchimento: 100px 25%;
    exibição: flexível;
    flex-direction: coluna;
    altura da linha: 2rem;
   tamanho da fonte: 1.2rem;
    cor: #202C39;
   }
   área de texto {
    preenchimento: 20px;
    tamanho da fonte: 1rem;
    margem inferior: 40px;
   }
   botão {
    preenchimento: 10px;
    margem inferior: 40px;
   } 

8. Vincule o arquivo CSS ao seu arquivo HTML incluindo uma tag de link dentro da tag de cabeçalho do HTML:

   <linkrele="folha de estilo"href="estilos.css">

9. 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 Contar palavras botão.

Você pode adicionar essa funcionalidade dentro de um novo arquivo JavaScript. Se necessário, revise outras ideias de projeto JavaScript para iniciantes se você precisar aprimorar seu conhecimento de JavaScript.

1. Na mesma pasta dos arquivos "index.html" e "styles.css", adicione um novo arquivo chamado "script.js".
2. Vincule seu arquivo HTML ao seu arquivo JavaScript adicionando uma tag de script na parte inferior da tag do corpo:

   <corpo>
    Seu código aqui 
   <roteiroorigem="script.js">roteiro>
   corpo>

3. 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:

   deixar entrada = documento.getElementById("entrada");
   deixar botão = documento.getElementById("botão de contagem");
   deixar palavraCountResult = documento.getElementById("resultado da contagem de palavras");

4. Adicione um ouvinte de evento de clique. Esta função será executada quando o usuário clicar no botão Contar palavras botão:

   botão.addEventListener("clique", função() {
   });

5. 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.

   deixar str = input.value;

6. 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"].

   deixar palavrasLista = str.split(" ");

7. Encontre a contagem de palavras usando o comprimento da matriz:

   deixar contagem = lista de palavras.comprimento;

8. Para exibir o resultado de volta ao usuário, altere o conteúdo do elemento HTML span para exibir o novo valor:

   wordCountResult.innerHTML = contagem; 

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.

1. Abra index.html em qualquer navegador da web.
2. Digite uma frase ou parágrafo na área de texto:
3. Clique no Contar palavras botão para atualizar a contagem de palavras. Isso exibirá a contagem de palavras, como se você verifiquei 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.