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.
- Erstellen Sie eine neue HTML-Datei namens „index.html“.
- Fügen Sie in der Datei die grundlegende Struktur für eine HTML-Webseite hinzu:
<!doctype html>
<html lang="en-US">
<head>
<title> Word Counter </title>
</head>
<body>
<div class="container">
<h1> Count Words </h1>
</div>
</body>
</html> - Fügen Sie innerhalb des Container-Div und unter der Überschrift einen Textbereich hinzu:
<textarea id="input" rows="10"></textarea> - Fügen Sie unter dem Textbereich eine Schaltfläche hinzu:
<button id="count-button">Count Words</button> - Fügen Sie ein span-Tag hinzu, um die Wortanzahl anzuzeigen, wenn der Benutzer auf die Schaltfläche oben klickt:
<div>
Words: <span id="word-count-result">0</span>
</div> - Erstellen Sie im selben Ordner wie Ihre HTML-Datei eine neue Datei namens „styles.css“.
- Füllen Sie die CSS-Datei mit etwas CSS, um Ihre Webseite zu gestalten:
body {
margin: 0;
padding: 0;
background-color: #f0fcfc;
}* {
font-family: "Arial", sans-serif;
}.container {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2rem;
color: #202C39;
}textarea {
padding: 20px;
font-size: 1rem;
margin-bottom: 40px;
}button {
padding: 10px;
margin-bottom: 40px;
} - Verknüpfen Sie die CSS-Datei mit Ihrer HTML-Datei, indem Sie ein Link-Tag in das HTML-Head-Tag einfügen:
<link rel="stylesheet" href="styles.css"> - 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 auf die Schaltfläche „ Wörter zählen“ klickt.
Sie können diese Funktionalität in einer neuen JavaScript-Datei hinzufügen. Überarbeiten Sie bei Bedarf andere JavaScript-Projektideen für Anfänger, wenn Sie Ihre JavaScript-Kenntnisse auffrischen möchten.
- Fügen Sie im selben Ordner wie Ihre „index.html“- und „styles.css“-Dateien eine neue Datei namens „script.js“ hinzu.
- Verknüpfen Sie Ihre HTML-Datei mit Ihrer JavaScript-Datei, indem Sie ein Skript-Tag am Ende des Body-Tags hinzufügen:
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - 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:
let input = document.getElementById("input");
let button = document.getElementById("count-button");
let wordCountResult = document.getElementById("word-count-result"); - Fügen Sie einen Klickereignis-Listener hinzu. Diese Funktion wird ausgeführt, wenn der Benutzer auf die Schaltfläche Wörter zählen klickt:
button.addEventListener("click", function() {
}); - 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.
let str = input.value; - 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“].
let wordsList = str.split(""); - Ermitteln Sie die Wortanzahl anhand der Länge des Arrays:
let count = wordsList.length; - 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.
- Öffnen Sie index.html in einem beliebigen Webbrowser.
- Geben Sie einen Satz oder Absatz in das Textfeld ein:
- Klicken Sie auf die Schaltfläche Wörter zählen, um die Wortanzahl zu aktualisieren. Dadurch wird die Wortzahl angezeigt, genau so, als ob Sie die Wortzahl in Google Docs, Microsoft Word oder einem anderen Editor mit Wortzahl überprüft hätten.
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.
Schreibe einen Kommentar