So erstellen Sie einen Wortzähler in JavaScript

Ein Wortzähler ist ein Werkzeug, mit dem Sie die Anzahl der Wörter in einem Textstück zählen können. Sie können damit die Länge eines Dokuments überprüfen oder nachverfolgen, ob Sie eine Wortzahlgrenze erreichen.

Sie können Ihren eigenen Wortzähler mit HTML, CSS und JavaScript erstellen. Öffnen Sie Ihren Wortzähler in einem Webbrowser, geben Sie Ihren Text in ein Eingabefeld ein und sehen Sie, wie viele Wörter Sie verwenden.

Dieses Projekt kann Ihnen auch dabei helfen, Ihre JavaScript-Kenntnisse zu üben und zu festigen.

So erstellen Sie die Benutzeroberfläche für den Wortzähler

Um die Benutzeroberfläche für den Wortzähler zu erstellen, fügen Sie eine Textbereichseingabe zu einer einfachen HTML-Seite hinzu. Hier können Sie den Satz oder Absatz eingeben, für den Sie die Wörter zählen möchten.

1. Erstellen Sie eine neue HTML-Datei namens "index.html".
2. Fügen Sie in der Datei die grundlegende Struktur für eine HTML-Webseite hinzu:

   html>
   <htmllang="en-US">
   <Kopf>
   <Titel> Wortzähler Titel>
   Kopf>
   <Körper>
   
   Klasse="Container">
   <h1> Wörter zählen h1>
   div>
   Körper>
   html>

3. Fügen Sie innerhalb des Container-Div und unter der Überschrift einen Textbereich hinzu:

   <TextbereichAusweis="Eingang"Reihen="10">Textbereich>

4. Fügen Sie unter dem Textbereich eine Schaltfläche hinzu:

   <TasteAusweis="count-button">Wörter zählenTaste>

5. Fügen Sie ein span-Tag hinzu, um die Wortanzahl anzuzeigen, wenn der Benutzer auf die Schaltfläche oben klickt:

   <div>
    Wörter: <SpanneAusweis="word-count-result">0Spanne>
   div>

6. Erstellen Sie im selben Ordner wie Ihre HTML-Datei eine neue Datei mit dem Namen "styles.css".
7. Füllen Sie die CSS-Datei mit etwas CSS, um Ihre Webseite zu gestalten:

   Körper {
    Rand: 0;
    Polsterung: 0;
    Hintergrundfarbe: #f0fcfc;
   }
   * {
    Schriftfamilie: "Arial", serifenlos;
   }
   .Container {
    Polsterung: 100px 25%;
    Anzeige: Flex;
    Biegerichtung: Säule;
    Zeilenhöhe: 2rem;
   Schriftgröße: 1.2rem;
    Farbe: #202C39;
   }
   Textbereich {
    Polsterung: 20px;
    Schriftgröße: 1rem;
    Rand unten: 40px;
   }
   Taste {
    Polsterung: 10px;
    Rand unten: 40px;
   } 

8. Verknüpfen Sie die CSS-Datei mit Ihrer HTML-Datei, indem Sie ein Link-Tag in das HTML-Head-Tag einfügen:

   <Verknüpfungrel="Stilvorlage"href="stile.css">

9. Um die Benutzeroberfläche der Webseite zu testen, klicken Sie auf die Datei „index.html“, um sie in einem Webbrowser zu öffnen.

So zählen Sie jedes Wort im Textbereich

Wenn ein Benutzer einen Satz in den Textbereich eingibt, sollte die Webseite jedes Wort zählen, wenn er darauf klickt Wörter zählen Taste.

Sie können diese Funktionalität in einer neuen JavaScript-Datei hinzufügen. Wenn nötig, überarbeiten Sie andere JavaScript-Projektideen für Anfänger wenn Sie Ihre JavaScript-Kenntnisse auffrischen möchten.

1. Fügen Sie im selben Ordner wie Ihre „index.html“- und „styles.css“-Dateien eine neue Datei namens „script.js“ hinzu.
2. Verknüpfen Sie Ihre HTML-Datei mit Ihrer JavaScript-Datei, indem Sie ein Skript-Tag am Ende des Body-Tags hinzufügen:

   <Körper>
    Ihr Code hier 
   <SkriptQuelle="script.js">Skript>
   Körper>

3. Verwenden Sie in script.js die Funktion getElementById(), um die HTML-Elemente textarea, button und span abzurufen. Speichern Sie diese Elemente in drei separaten Variablen:

   lassen Eingabe = dokumentieren.getElementById("Eingang");
   lassen Knopf = dokumentieren.getElementById("count-button");
   lassen wordCountResult = dokumentieren.getElementById("word-count-result");

4. Fügen Sie einen Klickereignis-Listener hinzu. Diese Funktion wird ausgeführt, wenn der Benutzer auf klickt Wörter zählen Taste:

   button.addEventListener("klicken", Funktion() {
   });

5. Rufen Sie im Click-Ereignis-Listener den Wert ab, den der Benutzer in das Textfeld eingegeben hat. Sie finden diesen Wert in der Eingabevariablen, die das HTML-Element textarea speichert.

   lassen str = input.value;

6. Verwenden Sie die split()-Funktion, um die Zeichenfolge in einzelne Wörter aufzuteilen. Dies geschieht immer dann, wenn die Zeichenfolge ein Leerzeichen enthält. Dadurch wird jedes Wort als Element eines neuen Arrays gespeichert. Wenn der eingegebene Satz beispielsweise "Ich liebe Hunde" lautet, wäre das resultierende Array ["Ich", "Liebe", "Hunde"].

   lassen wordsList = str.split(" ");

7. Ermitteln Sie die Wortanzahl anhand der Länge des Arrays:

   lassen count = wordsList.length;

8. Um dem Benutzer das Ergebnis wieder anzuzeigen, ändern Sie den Inhalt des HTML-Elements span so, dass der neue Wert angezeigt wird:

   wordCountResult.innerHTML = count; 

So verwenden Sie den Beispielwortzähler

Sie können Ihre Wortzähler-Webseite mit einem Webbrowser testen.

1. Öffnen Sie index.html in einem beliebigen Webbrowser.
2. Geben Sie einen Satz oder Absatz in das Textfeld ein:
3. Klick auf das Wörter zählen Schaltfläche, um die Wortzahl zu aktualisieren. Dadurch wird die Wortanzahl angezeigt, genau wie bei Ihnen überprüft die Wortzahl auf Google Docs, Microsoft Word oder einen anderen Editor mit Wortanzahl.

Erstellen einfacher Anwendungen mit JavaScript

Jetzt haben Sie hoffentlich ein grundlegendes Verständnis dafür, wie Sie JavaScript verwenden, um Wörter zu zählen und mit Elementen auf einer HTML-Seite zu interagieren. Um Ihr Programmierverständnis zu verbessern, fahren Sie fort, kleine nützliche Projekte in JavaScript zu erstellen.