Recherche de site Web

Comment créer un compteur de mots en JavaScript

Créez vous-même ce petit outil utile et apprenez-en un peu plus sur JavaScript en cours de route.

Un compteur de mots est un outil que vous pouvez utiliser pour compter le nombre de mots dans un texte. Vous pouvez l'utiliser pour vérifier la longueur d'un document ou pour savoir si vous respectez une limite de nombre de mots.

Vous pouvez créer votre propre compteur de mots en utilisant HTML, CSS et JavaScript. Ouvrez votre compteur de mots dans un navigateur Web, saisissez votre texte dans un champ de saisie et voyez combien de mots vous utilisez.

Ce projet peut également être utile pour vous aider à mettre en pratique et à consolider vos connaissances JavaScript.

Comment créer l'interface utilisateur pour le compteur de mots

Pour créer l'interface utilisateur du compteur de mots, ajoutez une zone de texte à une page HTML de base. C'est ici que vous pouvez saisir la phrase ou le paragraphe pour lequel vous souhaitez compter les mots.

  1. Créez un nouveau fichier HTML appelé "index.html".

  2. Dans le fichier, ajoutez la structure de base d'une page Web HTML :

    <!doctype html>
<html lang="en-US">
  <head>
    <title> Word Counter </title>
  </head>
  <body>
    <div class="container">
      <h1> Count Words </h1>
    </div>
  </body>
</html>

  3. À l’intérieur du conteneur div et sous le titre, ajoutez une zone de texte :

    <textarea id="input" rows="10"></textarea>

  4. Sous la zone de texte, ajoutez un bouton :

    <button id="count-button">Count Words</button>

  5. Ajoutez une balise span pour afficher le nombre de mots lorsque l'utilisateur clique sur le bouton ci-dessus :

    <div>
    Words: <span id="word-count-result">0</span>
</div>
  6. Dans le même dossier que votre fichier HTML, créez un nouveau fichier appelé "styles.css".

  7. Remplissez le fichier CSS avec du CSS pour styliser votre page 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;
}

  8. Liez le fichier CSS à votre fichier HTML en incluant une balise de lien dans la balise d'en-tête HTML :

    <link rel="stylesheet" href="styles.css">

  9. Pour tester l'interface utilisateur de la page Web, cliquez sur le fichier « index.html » pour l'ouvrir dans un navigateur Web.

Comment compter chaque mot dans la zone de texte

Lorsqu'un utilisateur saisit une phrase dans la zone de texte, la page Web doit compter chaque mot lorsqu'il clique sur le bouton Compter les mots.

Vous pouvez ajouter cette fonctionnalité dans un nouveau fichier JavaScript. Si vous en avez besoin, révisez d'autres idées de projets JavaScript pour débutants si vous avez besoin de parfaire vos connaissances en JavaScript.

  1. Dans le même dossier que vos fichiers "index.html" et "styles.css", ajoutez un nouveau fichier appelé "script.js".

  2. Liez votre fichier HTML à votre fichier JavaScript en ajoutant une balise script en bas de la balise body :

    <body>
    <!-- Your code here -->
    <script src="script.js"></script>
</body>

  3. Dans script.js, utilisez la fonction getElementById() pour récupérer les éléments HTML textarea, bouton et span. Stockez ces éléments dans trois variables distinctes :

    let input = document.getElementById("input");
let button = document.getElementById("count-button");
let wordCountResult = document.getElementById("word-count-result");

  4. Ajoutez un écouteur d'événement de clic. Cette fonction s'exécutera lorsque l'utilisateur cliquera sur le bouton Compter les mots :

    button.addEventListener("click", function() {
});

  5. Dans l'écouteur d'événement click, récupérez la valeur que l'utilisateur a entrée dans la zone de texte. Vous pouvez trouver cette valeur dans la variable d'entrée, qui stocke l'élément HTML textarea.

    let str = input.value;

  6. Utilisez la fonction split() pour séparer la chaîne en mots séparés. Cela se produira chaque fois qu'il y aura un espace dans la chaîne. Cela stockera chaque mot en tant qu'élément d'un nouveau tableau. Par exemple, si la phrase saisie était "J'aime les chiens", le tableau résultant serait ["I", "love", "dogs"].

    let wordsList = str.split(" ");

  7. Trouvez le nombre de mots en utilisant la longueur du tableau :

    let count = wordsList.length;

  8. Pour afficher le résultat à l'utilisateur, modifiez le contenu de l'élément HTML span pour afficher la nouvelle valeur :

    wordCountResult.innerHTML = count;

Comment utiliser l'exemple de compteur de mots

Vous pouvez tester votre page Web de compteur de mots à l'aide d'un navigateur Web.

  1. Ouvrez index.html dans n’importe quel navigateur Web.

  2. Saisissez une phrase ou un paragraphe dans la zone de texte :

  3. Cliquez sur le bouton Compter les mots pour mettre à jour le nombre de mots. Cela affichera le nombre de mots, comme si vous aviez vérifié le nombre de mots sur Google Docs, Microsoft Word ou tout autre éditeur avec un nombre de mots.

Création d'applications simples à l'aide de JavaScript

J'espère que vous avez maintenant une compréhension de base de la façon d'utiliser JavaScript pour compter les mots et interagir avec les éléments d'une page HTML. Pour améliorer votre compréhension de la programmation, continuez à créer de petits projets utiles en JavaScript.

Articles connexes: