Der Einstieg ins Programmieren kann angesichts der überwältigenden Auswahl an Sprachen und Frameworks entmutigend erscheinen. Vielleicht denken Sie sogar daran, alles einer KI zu überlassen! Dennoch kann das Programmieren für das Web spannend, zugänglich und völlig kostenlos sein!
Was Sie bauen werden
In diesem Tutorial erstellen Sie eine einfache Webanwendung zum Speichern von Textnotizen und Zählen der Zeichen und Wörter in diesen Notizen.
Diese Anwendung speichert Daten dauerhaft, sodass sie auch nach dem Aktualisieren oder erneuten Öffnen der Seite noch Text abrufen kann. Dies ist eine praktische Lösung, um schnell auf wichtigen Text zugreifen zu können, seien es Adressen, URLs oder andere Informationen.
Darüber hinaus verfolgt die App die Anzahl der Zeichen und Wörter und bietet so eine hervorragende Einführung in die String-Manipulation. Obwohl die Anwendung im Design einfach ist, vermittelt Ihnen dieses Tutorial grundlegende Fähigkeiten zur Entwicklung von Web-Apps und eröffnet Ihnen enorme Möglichkeiten beim Codieren.
So bauen Sie es
Obwohl Webanwendungen sehr unterschiedlich sein können, integrieren sie normalerweise drei wesentliche Technologien: HTML, CSS und JavaScript. Jede dieser Komponenten erfüllt eine entscheidende Funktion bei der Webentwicklung:
- HTML: Dies ist die Struktur Ihrer Webanwendung, die festlegt, wie der Inhalt organisiert ist. HTML definiert, ob Text ein Absatz, eine Überschrift oder ein Listenelement ist.
- CSS: Cascading Style Sheets verleihen Ihren Inhalten Stil und ermöglichen Ihnen, Farben, Schriftarten und Layout zu ändern. Mit CSS können Sie Elemente fett darstellen, Ränder anpassen und Elemente auf dem Bildschirm positionieren.
- JavaScript: Diese Programmiersprache ist unerlässlich, um Ihrer Webanwendung Funktionalität zu verleihen. Mit JavaScript können Sie interaktive Erlebnisse schaffen, z. B. Elemente ein-/ausblenden oder komplexe Anwendungen wie Spiele erstellen.
Die App-Struktur
Die Anwendung, die Sie erstellen möchten, besteht aus drei einfachen Dateien: index.html, styles.css, und script.js.
Es gibt keine erweiterten Anforderungen, um diese App auszuführen – lediglich ein Webbrowser genügt. Da es sich um eine Front-End-App handelt, sind keine Backend-Skriptsprachen wie PHP oder lokale Server erforderlich. Öffnen Sie sie nach der Fertigstellung einfach index.htmlin Ihrem Browser, um Ihre App in Aktion zu sehen.
Diese App nutzt die Web Storage API zum Speichern von Text. Dadurch kann sie Informationen behalten, ohne sie auf Festplattendateien schreiben zu müssen, da JavaScript keinen Dateisystemzugriff hat.
So erstellen Sie den Notiznehmer
Beginnen Sie mit der Erstellung der drei erforderlichen Dateien im selben Verzeichnis. Alternativ können Sie die Dateien aus diesem GitHub-Repository herunterladen .
Erstellen der Struktur mit HTML
Die index.htmlDatei legt die Inhaltsstruktur Ihrer App fest. Sie enthält Verweise auf die CSS- und JavaScript-Dateien, sodass der Browser sie zu einem nahtlosen Erlebnis zusammenführen kann.
Wie jedes HTML-Dokument besteht das Hauptgerüst aus einem Kopfteil mit Metadaten und einem Hauptteil mit dem Inhalt:
<!DOCTYPE html>
<html>
<head>
...</head>
<body>
...</body>
</html>
Der Kopfbereich enthält kurze Metadaten, darunter den Seitentitel (sichtbar in der Titelleiste des Browsers) und einen Link zur styles.cssDatei:
<title>Text</title>
<link rel="stylesheet"href="styles.css"/>
Der Körper ist detaillierter und enthält die wichtigsten Komponenten:
<div id="counter">
words: <span id="words">0</span>
/ characters: <span id="chars">0</span>
</div>
<textarea id="text"autofocus="1"></textarea>
<script src="script.js"></script>
Das divals „Zähler“ bezeichnete Element enthält die Wort- und Zeichenanzahl. Es bleibt oben und wird dynamisch aktualisiert, wenn sich der Text ändert.
Beachten Sie unbedingt die Verwendung von idAttributen. Ihre eindeutigen Werte helfen dabei, diese Elemente zu gestalten und ihre Funktionalität auszurichten.
Bietet textareaBenutzern einen Bereich zur Texteingabe mit dem autofocusAttribut, das sicherstellt, dass der Text beim Laden der Seite zur Eingabe bereit ist. Schließlich verweist das HTML auf die script.jsDatei.
Öffnen Sie es jetzt index.htmlin einem Browser. Es funktioniert noch nicht und sieht möglicherweise nicht ganz richtig aus, aber es ist hilfreich, Ihren Fortschritt in jeder Phase zu überprüfen.
Mit CSS für ein gutes Aussehen sorgen
Während diese Basis-App keine umfangreichen Designanpassungen erfordert, können wir ihr Layout mit etwas Styling verbessern.
Zuerst legen wir den Karosseriestil fest, um das Gesamterscheinungsbild zu skizzieren:
body {
margin: 0;
padding: 0;
display: grid;
min-height: 100vh;
grid-template-rows: min-content 1fr;
}
Dieses CSS verwendet ein Rasterlayout, um die Anzahl der Wörter und Zeichen in einer schmalen Reihe über dem Textbereich anzuordnen. Die grid-template-rowsEigenschaft legt fest, dass die Zählzeile so wenig Platz wie möglich einnehmen soll (min-content), während der Textbereich den verbleibenden Platz ausfüllt (1fr).
Die Zählerzeile erhält ein grundlegendes Styling, um sie vom Textbereich zu unterscheiden, hauptsächlich durch ihren Hintergrund:
#counter {
font-family: sans-serif;
background-color: #f7f7f7;
text-align: center;
width: 100%;
padding: 0 0.5em 0;
}
Der Textbereich ist so gestaltet, dass der Text lesbar ist und ausreichend Leerraum vorhanden ist:
textarea {
width: 100%;
height: 100%;
font-size: 16pt;
padding: 1em;
box-sizing: border-box;
outline: 0;
border: none;
border-top: 1px solid #999;
}
Hinzufügen von Funktionalität mit JavaScript
Nachdem die Grundlagen gelegt sind, ist es an der Zeit, Ihrer Anwendung Funktionalität zu verleihen – den Code, der sie zum Leben erweckt!
Bevor Sie mit dem Programmieren beginnen, müssen Sie unbedingt die beabsichtigte Funktionalität skizzieren. Bei dieser Anwendung konzentrieren Sie sich auf zwei Hauptziele:
- Eingegebenen Text beibehalten und neu laden.
- Aktualisieren Sie die Anzahl der Zeichen und Wörter dynamisch.
Diese Funktionen erfordern Aktualisierungen bestimmter Dokumentelemente. Beginnen Sie daher damit, Referenzen auf diese Knoten mithilfe der getElementByIdfolgenden Methode abzurufen:
const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");
Hier entsprechen words, chars, und textareaihren jeweiligen Abschnitten im Dokument, die durch ihre ID-Attribute identifiziert werden.
Führen Sie als Nächstes Interaktivität ein, indem Sie die App so einstellen, dass sie reagiert, wenn der Text geändert wird:
textarea.addEventListener("input", function(ev) {
localStorage.setItem("text", ev.target.value);
update_counts(ev.target.value);
});
Die addEventListenerMethode bindet eine Funktion, die ausgelöst wird, wenn ein bestimmtes Ereignis eintritt. In diesem Fall wird die Funktion durch das Ereignis „Eingabe“ ausgelöst, sobald der Benutzer mit dem Textbereich interagiert.
Als nächstes wird die Web Storage API verwendet, um den aktuellen Inhalt des Textbereichs beizubehalten, auf den über zugegriffen wird ev.target.value. Die setItemMethode verknüpft einen Schlüssel mit den zu speichernden Daten.
Um sicherzustellen, dass der Text beim Initialisieren oder Aktualisieren der App geladen wird, fügen Sie einen weiteren Listener hinzu:
window.addEventListener("load", function(ev) {
var text = localStorage.getItem("text");
textarea.value = text;
update_counts(text);
});
Dieser Listener reagiert auf das Ladeereignis des Fensters. Beim Laden des Fensters ruft er den gespeicherten Text ab und legt den Wert des Textbereichs entsprechend fest, während er aufgerufen wird, update_counts()um die Wort- und Zeichenanzahl zu aktualisieren.
Die restliche Funktionalität steckt in der update_counts()Funktion, die wie folgt aussieht:
function update_counts(text) {
chars.innerHTML = text.length;
words.innerHTML = text.split(' ').length;
}
Im Gegensatz zu einem Textbereich verfügt einfacher Text nicht über ein Wertattribut. Daher innerHTMLwird stattdessen die Eigenschaft verwendet. Die lengthEigenschaft einer Zeichenfolge ruft die Gesamtzahl der Zeichen ab.
Um den Text in Wörter aufzuteilen, verwenden wir text.split(' '), das den String bei jedem Leerzeichen teilt und so ein Array von Wörtern erzeugt. Die Längeneigenschaft des resultierenden Arrays gibt die Anzahl der Wörter an.
Bei diesem Code können jedoch einige Herausforderungen auftreten:
- Einzelne Wörter in einer Zeile ohne umgebende Leerzeichen werden nicht korrekt gezählt.
- Wenn kein Text vorhanden ist, wird aufgrund der Funktionsweise fälschlicherweise nur ein einzelnes Wort gemeldet
split.
Um das erste Problem zu beheben, sollten Sie einen regulären Ausdruck aufteilen, um Leerzeichen zu berücksichtigen: \s. Um das zweite Problem zu beheben, filtern Sie alle leeren Zeichenfolgen heraus:
words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;
Mit nur wenigen Basisdateien können Sie nützliche Webanwendungen erstellen! Sie können diese einfache Notiz-App erweitern, indem Sie zusätzliche Funktionen integrieren, z. B. indem Sie die Eigenschaft window.location verwenden, um auf URLs zuzugreifen, oder indem Sie das Speichern mehrerer Notizen ermöglichen, indem Sie die an übergebenen Namen variieren localStorage.setItem.
Zusätzliche Einblicke
1. Was sind die Voraussetzungen für dieses Web-App-Tutorial?
Alles was Sie brauchen, sind Grundkenntnisse in HTML, CSS und JavaScript. Tools wie ein Texteditor (z. B. VSCode) und ein Webbrowser sind ebenfalls hilfreich.
2. Kann ich diese Web-App ändern, um weitere Funktionen hinzuzufügen?
Auf jeden Fall! Dieses Tutorial bietet eine Grundlage. Sie können Funktionen wie das Speichern mehrerer Notizen, das Kategorisieren von Notizen oder sogar die Implementierung einer Suchfunktion hinzufügen!
3. Wie funktioniert die Web Storage API?
Mit der Web Storage API können Webanwendungen Daten im Browser speichern. Die Daten werden in Schlüssel-Wert-Paaren gespeichert, die auch nach dem Schließen des Browsers bestehen bleiben und so später leicht abgerufen werden können.
Schreibe einen Kommentar