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.

1. Créez un nouveau fichier HTML appelé "index.html".
2. Dans le fichier, ajoutez la structure de base d'une page Web HTML:

   html>
   <htmllangue="en-US">
   <diriger>
   <titre> Compteur de mots titre>
   diriger>
   <corps>
   
   classe="récipient">
   <h1> Compter les mots h1>
   div>
   corps>
   html>

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

   <zone de texteidentifiant="saisir"Lignes="10">zone de texte>

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

   <boutonidentifiant="compte-bouton">Compter les motsbouton>

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

   <div>
    Mots: <portéeidentifiant="résultat du nombre de mots">0portée>
   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:

   corps {
    marge: 0 ;
    rembourrage: 0 ;
    Couleur de l'arrière plan: #f0fcfc;
   }
   * {
    famille de polices: "Ariel", sans empattement ;
   }
   .récipient {
    rembourrage: 100px 25% ;
    affichage: flexible ;
    flex-direction: colonne ;
    hauteur de ligne: 2 rem ;
   taille de police: 1.2rem;
    couleur: #202C39 ;
   }
   zone de texte {
    rembourrage: 20px ;
    taille de police: 1rem ;
    marge inférieure: 40px ;
   }
   bouton {
    rembourrage: 10px ;
    marge inférieure: 40px ;
   } 

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

   <lienrel="feuille de style"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 à 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 Compter les mots bouton.

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

1. Dans le même dossier que vos fichiers "index.html" et "styles.css", ajoutez un nouveau fichier nommé "script.js".
2. Liez votre fichier HTML à votre fichier JavaScript en ajoutant une balise script au bas de la balise body:

   <corps>
    Votre code ici 
   <scénariosrc="script.js">scénario>
   corps>

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

   laisser entrée = document.getElementById("saisir");
   laisser bouton = document.getElementById("compte-bouton");
   laisser wordCountResult = document.getElementById("résultat du nombre de mots");

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

   bouton.addEventListener("Cliquez sur", fonction() {
   });

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

   laisser str = input.value;

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

   laisser liste de mots = str.split(" ");

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

   laisser 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 = compte; 

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. Clique sur le Compter les mots bouton pour mettre à jour le nombre de mots. Cela affichera le nombre de mots, comme si vous 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

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.