Comment créer un compteur de mots en JavaScript
Un compteur de mots est un outil que vous pouvez utiliser pour compter le nombre de mots dans un morceau de 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 à pratiquer 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 entrée de zone de texte à une page HTML de base. C’est ici que vous pouvez saisir la phrase ou le paragraphe dont vous souhaitez compter les mots.
- Créez un nouveau fichier HTML appelé « index.html ».
- 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> - À l’intérieur du conteneur div et sous le titre, ajoutez une zone de texte :
<textarea id="input" rows="10"></textarea> - Sous la zone de texte, ajoutez un bouton :
<button id="count-button">Count Words</button> - 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> - Dans le même dossier que votre fichier HTML, créez un nouveau fichier appelé « styles.css ».
- 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;
} - 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"> - 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 à l’intérieur de 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 sur JavaScript.
- Dans le même dossier que vos fichiers « index.html » et « styles.css », ajoutez un nouveau fichier nommé « script.js ».
- Liez votre fichier HTML à votre fichier JavaScript en ajoutant une balise script au bas de la balise body :
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - Dans script.js, utilisez la fonction getElementById() pour récupérer les éléments HTML textarea, button 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"); - 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() {
}); - À l’intérieur de l’écouteur d’événement de clic, 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; - Utilisez la fonction split() pour séparer la chaîne en mots séparés. Cela se produit chaque fois qu’il y a un espace dans la chaîne. Cela stockera chaque mot en tant qu’élément d’un nouveau tableau. Par exemple, si la phrase entrée était « J’aime les chiens », le tableau résultant serait [« I », « love », « dogs »].
let wordsList = str.split(""); - Trouvez le nombre de mots en utilisant la longueur du tableau :
let count = wordsList.length; - 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.
- Ouvrez index.html dans n’importe quel navigateur Web.
- Saisissez une phrase ou un paragraphe dans la zone de texte :
- Cliquez sur le bouton Compter les mots pour mettre à jour le nombre de mots. Cela affichera le nombre de mots, comme si vous cochiez 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
Vous avez maintenant, espérons-le, une compréhension de base de l’utilisation de 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.
Laisser un commentaire