Hoe maak je een woordenteller in JavaScript

Een woordenteller is een hulpmiddel waarmee je het aantal woorden in een stuk tekst kunt tellen. U kunt het gebruiken om de lengte van een document te controleren of om bij te houden of u aan een limiet voor het aantal woorden voldoet.

U kunt uw eigen woordenteller maken met behulp van HTML, CSS en JavaScript. Open uw woordenteller in een webbrowser, voer uw tekst in een invoerveld in en kijk hoeveel woorden u gebruikt.

Dit project kan ook nuttig zijn om u te helpen uw JavaScript-kennis te oefenen en te verstevigen.

Hoe de gebruikersinterface voor de woordenteller te maken

Om de gebruikersinterface voor de woordenteller te maken, voegt u een tekstgebiedinvoer toe aan een eenvoudige HTML-pagina. Hier kunt u de zin of paragraaf invoeren waarvoor u de woorden wilt tellen.

1. Maak een nieuw HTML-bestand met de naam "index.html".
2. Voeg in het bestand de basisstructuur voor een HTML-webpagina toe:

   html>
   <htmllang="nl-VS">
   <hoofd>
   <titel> Woorden Teller titel>
   hoofd>
   <lichaam>
   
   klas="houder">
   <h1> Tel woorden h1>
   div>
   lichaam>
   html>

3. Voeg binnen de container-div en onder de kop een tekstgebied toe:

   <tekstgebiedID kaart="invoer"rijen="10">tekstgebied>

4. Voeg een knop toe onder het tekstgebied:

   <knopID kaart="tel-knop">Tel woordenknop>

5. Voeg een span-tag toe om het aantal woorden weer te geven wanneer de gebruiker op de bovenstaande knop klikt:

   <div>
    Woorden: <spanID kaart="woord-tel-resultaat">0span>
   div>

6. Maak in dezelfde map als uw HTML-bestand een nieuw bestand met de naam "styles.css".
7. Vul het CSS-bestand met wat CSS om uw webpagina te stylen:

   lichaam {
    marge: 0;
    opvulling: 0;
    Achtergrond kleur: #f0fcfc;
   }
   * {
    font-familie: "Ariel", schreefloos;
   }
   .container {
    opvulling: 100px 25%;
    weergeven: flex;
    flex-richting: kolom;
    regelhoogte: 2rem;
   lettertypegrootte: 1.2rem;
    kleur: #202C39;
   }
   tekstgebied {
    opvulling: 20px;
    lettergrootte: 1rem;
    marge-onder: 40px;
   }
   knop {
    opvulling: 10px;
    marge-onder: 40px;
   } 

8. Koppel het CSS-bestand aan uw HTML-bestand door een link-tag op te nemen in de HTML-head-tag:

   <koppelingrel="stijlblad"href="stijlen.css">

9. Om de gebruikersinterface van de webpagina te testen, klikt u op het bestand "index.html" om het in een webbrowser te openen.

Hoe elk woord in het tekstgebied te tellen

Wanneer een gebruiker een zin invoert in het tekstgebied, zou de webpagina elk woord moeten tellen wanneer ze op de klikken Tel woorden knop.

U kunt deze functionaliteit toevoegen in een nieuw JavaScript-bestand. Als het nodig is, herzie dan andere JavaScript-projectideeën voor beginners als u uw JavaScript-kennis moet opfrissen.

1. Voeg in dezelfde map als uw "index.html"- en "styles.css"-bestanden een nieuw bestand toe met de naam "script.js".
2. Koppel uw HTML-bestand aan uw JavaScript-bestand door een scripttag toe te voegen onderaan de body-tag:

   <lichaam>
    Uw code hier 
   <scriptsrc="script.js">script>
   lichaam>

3. Gebruik in script.js de functie getElementById() om de HTML-elementen textarea, button en span op te halen. Sla deze elementen op in drie afzonderlijke variabelen:

   laten invoer = document.getElementById("invoer");
   laten knop = document.getElementById("tel-knop");
   laten wordCountResult = document.getElementById("woord-tel-resultaat");

4. Voeg een klikgebeurtenislistener toe. Deze functie wordt uitgevoerd wanneer de gebruiker op het Tel woorden knop:

   knop.addEventListener("Klik", functie() {
   });

5. Haal in de click-gebeurtenislistener de waarde op die de gebruiker in het tekstgebied heeft ingevoerd. U vindt deze waarde in de invoervariabele, die het HTML-element textarea opslaat.

   laten str = invoerwaarde;

6. Gebruik de functie split() om de string op te splitsen in afzonderlijke woorden. Dit gebeurt telkens wanneer er een spatie in de tekenreeks staat. Hierdoor wordt elk woord opgeslagen als een element van een nieuwe array. Als de ingevoerde zin bijvoorbeeld "Ik hou van honden" is, zou de resulterende array ["Ik", "liefde", "honden"] zijn.

   laten woordenLijst = str.split(" ");

7. Zoek het aantal woorden door de lengte van de array te gebruiken:

   laten count = woordenLijst.lengte;

8. Om het resultaat weer te geven aan de gebruiker, wijzigt u de inhoud van het span HTML-element om de nieuwe waarde weer te geven:

   wordCountResult.innerHTML = aantal; 

Hoe de voorbeeldwoordenteller te gebruiken

U kunt uw woordenteller-webpagina testen met een webbrowser.

1. Open index.html in elke webbrowser.
2. Voer een zin of alinea in het tekstgebied in:
3. Klik op de Tel woorden knop om het aantal woorden bij te werken. Hierdoor wordt het aantal woorden weergegeven, net als wanneer u controleerde het aantal woorden op Google Docs, Microsoft Word of een andere editor met een aantal woorden.

Eenvoudige toepassingen maken met behulp van JavaScript

Nu heb je hopelijk een basiskennis van het gebruik van JavaScript om woorden te tellen en te communiceren met elementen op een HTML-pagina. Ga door met het maken van kleine, nuttige projecten in JavaScript om uw programmeerkennis te verbeteren.