Hur man skapar en ordräknare i JavaScript

En ordräknare är ett verktyg som du kan använda för att räkna antalet ord i en textbit. Du kan använda den för att kontrollera längden på ett dokument eller för att spåra om du uppfyller en gräns för antal ord.

Du kan skapa din egen ordräknare med HTML, CSS och JavaScript. Öppna din ordräknare i en webbläsare, skriv in din text i ett inmatningsfält och se hur många ord du använder.

Det här projektet kan också vara användbart för att hjälpa dig öva och befästa dina JavaScript-kunskaper.

Hur man skapar gränssnittet för Word Counter

För att skapa gränssnittet för ordräknaren, lägg till en textområdesinmatning på en grundläggande HTML-sida. Det är här du kan skriva in meningen eller stycket som du vill räkna orden för.

1. Skapa en ny HTML-fil som heter "index.html".
2. Inuti filen lägger du till den grundläggande strukturen för en HTML-webbsida:

   html>
   <htmllang="sv-US">
   <huvud>
   <titel> Ordräknare titel>
   huvud>
   <kropp>
   
   klass="behållare">
   <h1> Räkna ord h1>
   div>
   kropp>
   html>

3. Inuti container div och under rubriken, lägg till ett textområde:

   <textområdeid="inmatning"rader="10">textområde>

4. Lägg till en knapp under textområdet:

   <knappid="räkneknapp">Räkna ordknapp>

5. Lägg till en span-tagg för att visa ordantalet när användaren klickar på knappen ovan:

   <div>
    Ord: <spännaid="ord-räkne-resultat">0spänna>
   div>

6. Skapa en ny fil som heter "styles.css" i samma mapp som din HTML-fil.
7. Fyll CSS-filen med lite CSS för att utforma din webbsida:

   kropp {
    marginal: 0;
    stoppning: 0;
    bakgrundsfärg: #f0fcfc;
   }
   * {
    typsnittsfamilj: "Arial", sans serif;
   }
   .behållare {
    stoppning: 100px 25%;
    display: flex;
    flex-riktning: kolumn;
    linje-höjd: 2rem;
   textstorlek: 1.2rem;
    Färg: #202C39;
   }
   textarea {
    stoppning: 20px;
    teckenstorlek: 1rem;
    margin-bottom: 40px;
   }
   knapp {
    stoppning: 10px;
    margin-bottom: 40px;
   } 

8. Länka CSS-filen till din HTML-fil genom att inkludera en länktagg i HTML-head-taggen:

   <länkrel="stilmall"href="styles.css">

9. För att testa webbsidans användargränssnitt, klicka på filen "index.html" för att öppna den i en webbläsare.

Hur man räknar varje ord i textområdet

När en användare skriver in en mening i textområdet, bör webbsidan räkna varje ord när de klickar på Räkna ord knapp.

Du kan lägga till den här funktionen i en ny JavaScript-fil. Om du behöver, revidera andra nybörjare JavaScript-projektidéer om du behöver fräscha upp dina JavaScript-kunskaper.

1. Lägg till en ny fil som heter "script.js" i samma mapp som dina "index.html"- och "styles.css"-filer.
2. Länka din HTML-fil till din JavaScript-fil genom att lägga till en skripttagg längst ned på body-taggen:

   <kropp>
    Din kod här 
   <manussrc="script.js">manus>
   kropp>

3. Inuti script.js använder du funktionen getElementById() för att hämta HTML-elementen textarea, button och span. Lagra dessa element i tre separata variabler:

   låta input = dokumentera.getElementById("inmatning");
   låta knapp = dokumentera.getElementById("räkneknapp");
   låta wordCountResult = dokumentera.getElementById("ord-räkne-resultat");

4. Lägg till en klickhändelselyssnare. Denna funktion kommer att köras när användaren klickar på Räkna ord knapp:

   button.addEventListener("klick", fungera() {
   });

5. Inuti klickhändelselyssnaren får du värdet som användaren angav i textområdet. Du kan hitta detta värde i indatavariabeln, som lagrar HTML-elementet textarea.

   låta str = input.value;

6. Använd split()-funktionen för att separera strängen i separata ord. Detta kommer att inträffa när det finns ett mellanslag i strängen. Detta kommer att lagra varje ord som ett element i en ny array. Till exempel, om meningen som skrevs in var "Jag älskar hundar", skulle den resulterande arrayen bli ["jag", "älskar", "hundar"].

   låta wordsList = str.split(" ");

7. Hitta ordantalet genom att använda längden på matrisen:

   låta count = wordsList.length;

8. För att visa resultatet tillbaka för användaren, ändra innehållet i span HTML-elementet så att det nya värdet visas:

   wordCountResult.innerHTML = count; 

Hur man använder exempelordräknaren

Du kan testa din word counter-webbsida med en webbläsare.

1. Öppna index.html i valfri webbläsare.
2. Skriv in en mening eller ett stycke i textområdet:
3. Klicka på Räkna ord knappen för att uppdatera ordantalet. Detta kommer att visa antalet ord, precis som om du kontrollerade ordantalet på Google Docs, Microsoft Word eller någon annan redigerare med ett ordantal.

Skapa enkla applikationer med JavaScript

Nu har du förhoppningsvis en grundläggande förståelse för hur man använder JavaScript för att räkna ord och interagera med element på en HTML-sida. För att förbättra din programmeringsförståelse, fortsätt att skapa små användbara projekt i JavaScript.