Sådan opretter du en ordtæller i JavaScript

En ordtæller er et værktøj, som du kan bruge til at tælle antallet af ord i et stykke tekst. Du kan bruge den til at kontrollere længden af ​​et dokument eller til at spore, om du overholder en grænse for ordantal.

Du kan oprette din egen ordtæller ved hjælp af HTML, CSS og JavaScript. Åbn din ordtæller i en webbrowser, indtast din tekst i et inputfelt, og se, hvor mange ord du bruger.

Dette projekt kan også være nyttigt til at hjælpe dig med at øve og styrke din JavaScript-viden.

Sådan opretter du brugergrænsefladen til Word Counter

For at oprette brugergrænsefladen til ordtælleren skal du tilføje et tekstområdeinput til en grundlæggende HTML-side. Det er her, du kan indtaste den sætning eller det afsnit, som du gerne vil tælle ordene for.

1. Opret en ny HTML-fil kaldet "index.html".
2. Tilføj den grundlæggende struktur for en HTML-webside inde i filen:

   html>
   <htmllang="da-US">
   <hoved>
   <titel> Ordtæller titel>
   hoved>
   <legeme>
   
   klasse="beholder">
   <h1> Tæl ord h1>
   div>
   legeme>
   html>

3. Tilføj et tekstområde inde i container-div og under overskriften:

   <tekstområdeid="input"rækker="10">tekstområde>

4. Tilføj en knap under tekstområdet:

   <knapid="tælle-knap">Tæl ordknap>

5. Tilføj et span-tag for at vise ordantallet, når brugeren klikker på knappen ovenfor:

   <div>
    Ord: <spanid="ord-tælle-resultat">0span>
   div>

6. I samme mappe som din HTML-fil skal du oprette en ny fil kaldet "styles.css".
7. Udfyld CSS-filen med noget CSS for at style din webside:

   krop {
    margin: 0;
    polstring: 0;
    baggrundsfarve: #f0fcfc;
   }
   * {
    skrifttype-familie: "Arial", sans serif;
   }
   .beholder {
    polstring: 100px 25%;
    display: flex;
    flex-retning: kolonne;
    line-højde: 2rem;
   skriftstørrelse: 1.2rem;
    farve: #202C39;
   }
   textarea {
    polstring: 20px;
    skriftstørrelse: 1rem;
    margin-bund: 40px;
   }
   knap {
    polstring: 10px;
    margin-bund: 40px;
   } 

8. Link CSS-filen til din HTML-fil ved at inkludere et link-tag i HTML-head-tagget:

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

9. For at teste websidens brugergrænseflade skal du klikke på filen "index.html" for at åbne den i en webbrowser.

Sådan tælles hvert ord inde i tekstområdet

Når en bruger indtaster en sætning i tekstområdet, skal websiden tælle hvert ord, når de klikker på Tæl ord knap.

Du kan tilføje denne funktionalitet i en ny JavaScript-fil. Hvis du har brug for det, revidér andre JavaScript-projektideer for begyndere hvis du har brug for at friske op på din JavaScript-viden.

1. Tilføj en ny fil kaldet "script.js" i samme mappe som dine "index.html" og "styles.css" filer.
2. Link din HTML-fil til din JavaScript-fil ved at tilføje et script-tag i bunden af ​​body-tagget:

   <legeme>
    Din kode her 
   <manuskriptsrc="script.js">manuskript>
   legeme>

3. Inde i script.js skal du bruge funktionen getElementById() til at hente HTML-elementerne tekstområde, knap og span. Gem disse elementer i tre separate variable:

   lade input = dokument.getElementById("input");
   lade knap = dokument.getElementById("tælle-knap");
   lade wordCountResult = dokument.getElementById("ord-tælle-resultat");

4. Tilføj en klikbegivenhedslytter. Denne funktion vil køre, når brugeren klikker på Tæl ord knap:

   button.addEventListener("klik", fungere() {
   });

5. Få den værdi, som brugeren har indtastet i tekstområdet inde i klikhændelseslytteren. Du kan finde denne værdi i inputvariablen, som gemmer HTML-elementet i tekstområdet.

   lade str = input.value;

6. Brug split()-funktionen til at adskille strengen i separate ord. Dette vil ske, når der er et mellemrum i strengen. Dette vil gemme hvert ord som et element i en ny matrix. Hvis f.eks. den indtastede sætning var "Jeg elsker hunde", ville den resulterende array være ["jeg", "elsker", "hunde"].

   lade ordliste = str.split(" ");

7. Find ordantallet ved at bruge længden af ​​arrayet:

   lade count = wordsList.length;

8. For at vise resultatet tilbage til brugeren skal du ændre indholdet af HTML-elementet for span for at vise den nye værdi:

   wordCountResult.innerHTML = count; 

Sådan bruger du eksempelordtælleren

Du kan teste din word counter-webside ved hjælp af en webbrowser.

1. Åbn index.html i en hvilken som helst webbrowser.
2. Indtast en sætning eller et afsnit i tekstområdet:
3. Klik på Tæl ord knappen for at opdatere ordantallet. Dette vil vise ordantallet, ligesom hvis du tjekkede ordantallet på Google Docs, Microsoft Word eller enhver anden editor med et ordantal.

Oprettelse af simple applikationer ved hjælp af JavaScript

Nu har du forhåbentlig en grundlæggende forståelse af, hvordan du bruger JavaScript til at tælle ord og interagere med elementer på en HTML-side. For at forbedre din programmeringsforståelse skal du fortsætte med at skabe små nyttige projekter i JavaScript.