Hvordan lage en Word-teller i JavaScript

En ordteller er et verktøy du kan bruke til å telle antall ord i et tekststykke. Du kan bruke den til å sjekke lengden på et dokument eller til å spore om du oppfyller en grense for antall ord.

Du kan lage din egen ordteller ved å bruke HTML, CSS og JavaScript. Åpne ordtelleren i en nettleser, skriv inn teksten i et inndatafelt og se hvor mange ord du bruker.

Dette prosjektet kan også være nyttig for å hjelpe deg med å øve og styrke JavaScript-kunnskapen din.

Hvordan lage brukergrensesnittet for Word Counter

For å lage brukergrensesnittet for ordtelleren, legg til et tekstområdeinndata på en grunnleggende HTML-side. Det er her du kan skrive inn setningen eller avsnittet du ønsker å telle ordene for.

1. Lag en ny HTML-fil kalt "index.html".
2. Inne i filen legger du til den grunnleggende strukturen for en HTML-nettside:

   html>
   <htmllang="no-US">
   <hode>
   <tittel> Ordteller tittel>
   hode>
   <kropp>
   
   klasse="container">
   <h1> Telle ord h1>
   div>
   kropp>
   html>

3. Inne i container-div og under overskriften legger du til et tekstområde:

   <tekstområdeid="inngang"rader="10">tekstområde>

4. Legg til en knapp under tekstområdet:

   <knappid="telle-knapp">Telle ordknapp>

5. Legg til en span-tag for å vise antall ord når brukeren klikker på knappen ovenfor:

   <div>
    Ord: <spanid="ord-telling-resultat">0span>
   div>

6. Lag en ny fil kalt "styles.css" i samme mappe som HTML-filen din.
7. Fyll CSS-filen med noe CSS for å style nettsiden din:

   kropp {
    margin: 0;
    polstring: 0;
    bakgrunnsfarge: #f0fcfc;
   }
   * {
    font-familie: "Arial", sans serif;
   }
   .container {
    polstring: 100px 25%;
    display: flex;
    flex-retning: kolonne;
    linje-høyde: 2rem;
   skriftstørrelse: 1.2rem;
    farge: #202C39;
   }
   textarea {
    polstring: 20px;
    skriftstørrelse: 1rem;
    marg-bunn: 40px;
   }
   knapp {
    polstring: 10px;
    marg-bunn: 40px;
   } 

8. Koble CSS-filen til HTML-filen din ved å inkludere en link-tag i HTML-head-taggen:

   <linkrel="stilark"href="styles.css">

9. For å teste brukergrensesnittet til nettsiden, klikk på "index.html"-filen for å åpne den i en nettleser.

Hvordan telle hvert ord i tekstområdet

Når en bruker skriver inn en setning i tekstområdet, skal nettsiden telle hvert ord når de klikker på Telle ord knapp.

Du kan legge til denne funksjonaliteten i en ny JavaScript-fil. Hvis du trenger det, revider andre nybegynner JavaScript-prosjektideer hvis du trenger å friske opp JavaScript-kunnskapene dine.

1. Legg til en ny fil kalt "script.js" i samme mappe som filene "index.html" og "styles.css".
2. Koble HTML-filen til JavaScript-filen din ved å legge til en script-tag nederst i body-taggen:

   <kropp>
    Din kode her 
   <manussrc="script.js">manus>
   kropp>

3. Inne i script.js bruker du funksjonen getElementById() for å hente HTML-elementene for tekstområdet, knappen og spennet. Lagre disse elementene i tre separate variabler:

   la input = dokument.getElementById("inngang");
   la knapp = dokument.getElementById("telle-knapp");
   la wordCountResult = dokument.getElementById("ord-telling-resultat");

4. Legg til en klikkhendelseslytter. Denne funksjonen vil kjøre når brukeren klikker på Telle ord knapp:

   button.addEventListener("klikk", funksjon() {
   });

5. Inne i klikkhendelseslytteren får du verdien som brukeren skrev inn i tekstområdet. Du finner denne verdien i inndatavariabelen, som lagrer HTML-elementet i tekstområdet.

   la str = input.value;

6. Bruk split()-funksjonen for å skille strengen i separate ord. Dette vil skje når det er et mellomrom i strengen. Dette vil lagre hvert ord som et element i en ny matrise. For eksempel, hvis setningen som ble skrevet inn var "Jeg elsker hunder", vil den resulterende matrisen være ["jeg", "elsker", "hunder"].

   la ordliste = str.split(" ");

7. Finn ordantallet ved å bruke lengden på matrisen:

   la count = wordsList.length;

8. For å vise resultatet tilbake til brukeren, endre innholdet i span HTML-elementet for å vise den nye verdien:

   wordCountResult.innerHTML = telle; 

Slik bruker du eksempelordtelleren

Du kan teste ordtellernettsiden din ved å bruke en nettleser.

1. Åpne index.html i hvilken som helst nettleser.
2. Skriv inn en setning eller et avsnitt i tekstområdet:
3. Klikk på Telle ord for å oppdatere ordtellingen. Dette vil vise antall ord, akkurat som hvis du sjekket ordtellingen på Google Docs, Microsoft Word eller et annet redigeringsprogram med ordtelling.

Opprette enkle applikasjoner ved hjelp av JavaScript

Nå har du forhåpentligvis en grunnleggende forståelse av hvordan du bruker JavaScript til å telle ord og samhandle med elementer på en HTML-side. For å forbedre programmeringsforståelsen din, fortsett å lage små nyttige prosjekter i JavaScript.