Erstellen Sie Ihre erste Web-App: Notizen + Zähler einfach und schnell 📝⚡

Der Einstieg in die Programmierung kann angesichts der vielen zu berücksichtigenden Sprachen, Frameworks und Methoden überwältigend erscheinen. Manchmal scheint es einfacher, alles an eine KI zu delegieren. Mach dir keine Sorge! Programmieren für das Web kann einfach und unterhaltsam sein und – das Beste von allem – völlig kostenlos! 🌐✨

Was Sie bauen werden

Indem Sie diesem Tutorial folgen, erstellen Sie eine einfache Webanwendung zum Speichern von Textnotizen und zum Zählen von Zeichen und Wörtern.

Die App behält die Daten bei, sodass der Text auch beim Neuladen oder erneuten Öffnen der Seite noch vorhanden ist. So können Sie bequem jeden Text speichern, auf den Sie später zurückgreifen möchten, z. B. Adressen, URLs usw. 📄🔗

Ein Beispiel für eine einfache textbasierte Webanwendung, die Notizen, einschließlich eines Kalendereintrags und einer Liste von URLs, anzeigt.

Es zählt auch Zeichen und Wörter, was eine gute Einführung in die Verarbeitung von Zeichenfolgen (Texten) darstellt. Natürlich ist die App sehr einfach: Das ist der Zweck! Aber mit diesem Tutorial lernen Sie die Grundlagen der Entwicklung einer Webanwendung und dann steht Ihnen die Welt offen. 🦪💻

Wie werden Sie es bauen?

Obwohl Webanwendungen sehr vielfältig sind, umfassen sie typischerweise drei Haupttechnologien: HTML, CSS und JavaScript. Es ist wichtig, dass Sie ihre Rollen verstehen, bevor Sie beginnen. 📚

HTML: Mit Hypertext Markup Language können Sie die Struktur Ihres Inhalts definieren. Damit können Sie einen Text entsprechend seiner Bedeutung markieren und beispielsweise angeben, ob es sich um einen Absatz, eine Überschrift oder einen Eintrag in einer Liste handelt.
CSS: Mit Cascading Style Sheets können Sie Ihren Inhalten Stil verleihen. Mit dieser Sprache können Sie einen Absatz grün einfärben, alle Ihre Links fett formatieren oder eine Seitenleiste neben Ihrem Hauptartikel positionieren. 🎨
JavaScript: Mit dieser Programmiersprache können Sie Ihrer Website Funktionen hinzufügen. Sie können Schaltflächen so konfigurieren, dass Teile Ihres Dokuments beim Anklicken angezeigt oder ausgeblendet werden, oder Sie können ein vollwertiges Textverarbeitungsprogramm oder Videospiel implementieren. 🎮

Er website.dev (geschrieben von Mitgliedern des Chrome-Teams) und MDN, das Mozilla-Entwicklernetzwerk, sind zwei hervorragende Informationsquellen zu grundlegenden Webtechnologien.

Die Homepage der Website web.dev mit Lernressourcen für HTML, CSS und JavaScript.

Die Struktur der App

Die App, die Sie erstellen, besteht aus drei einfachen Dateien: index.html, styles.css und script.js. 🗂️

Zum Ausführen der App sind keine besonderen Anforderungen erforderlich, Sie benötigen lediglich einen Webbrowser. Es gibt keine Backend-Funktionalität, daher benötigen Sie keine Skriptsprache wie PHP oder einen lokalen Webserver. Sobald Sie fertig sind, können Sie die index.html-Datei direkt in Ihrem Browser und alles wird gut. 😊

Es ist wichtig zu beachten, dass diese App Ihren Text speichert, ohne ihn in eine bestimmte Datei auf der Festplatte zu schreiben, da JavaScript nicht auf das Dateisystem zugreifen kann. Verwendet die Web Storage API, eine leistungsstarke Alternative zu Cookies. 🍪💾

So erstellen Sie den Notiznehmer

Erstellen Sie die folgenden drei Dateien im selben Verzeichnis und öffnen Sie dann index.html in einem Webbrowser. Alternativ können Sie die Dateien herunterladen von dieses GitHub-Repository. 📥

Aufbau der Struktur mit HTML

Die Datei index.html definiert die Struktur des Inhalts Ihrer App in HTML. Fügen Sie Verweise auf die anderen beiden Dateien ein, damit ein Browser sie zum Endprodukt kombinieren kann.

Wie alle HTML-Dokumente umfasst die Struktur der obersten Ebene einen Kopfabschnitt mit Metadaten und einen Hauptabschnitt mit dem eigentlichen Inhalt, der auf der Seite angezeigt wird:

html>
<html>
<Kopf>
    ...
Kopf>

<Körper>
…
Körper>
html>

Die Metadaten im Kopf sind sehr kurz und enthalten nur einen Seitentitel (der in der Titelleiste Ihres Browsers angezeigt wird) und einen Verweis auf die Datei styles.css:

    <Titel>TextTitel>
    <Link relativ="Stylesheet" href="styles.css" />

Der Körper ist komplizierter, aber es gibt nur wenige wichtige Teile:

    <div Ausweis="Schalter">
        Wörter: <Spanne Ausweis="Wörter">0Spanne>
        / Zeichen: <Spanne Ausweis="Zeichen">0Spanne>
    div>

<Textbereich Ausweis="Text" Autofokus=«1»>Textbereich>

<Skript Quelle=«script.js»>Skript>

Das Div-Element enthält die Wort- und Zeichenanzahl der App. Es befindet sich oben in der Web-App und wird bei jeder Textänderung aktualisiert.

Beachten Sie die ID-Attribute, die für den Vorgang von entscheidender Bedeutung sind. Der Wert einer ID muss eindeutig sein, damit die App ihn zur Identifizierung eines bestimmten Artikels verwenden kann. Auf diese Weise können wir diese Elemente besser gestalten und sie beim Hinzufügen von Funktionen gezielter einsetzen.

Der Textbereich ist ein integriertes Formularelement, mit dem Sie einfachen Text in einen Browser eingeben können. Mit der Autofokus-Funktion können Sie sofort mit dem Schreiben beginnen, wenn die Seite geladen ist. Schließlich verweist die Seite auf die JavaScript-Datei script.js.

An diesem Punkt können Sie die Datei index.html in einem Browser öffnen. Im Moment wird es nichts bewirken und nicht einmal gut aussehen, aber es ist hilfreich, Ihre App in jeder Phase zu testen, um sicherzustellen, dass die Grundlagen wie erwartet funktionieren.

Eine Ansicht der Notizen-Web-App mit Standardbrowserstilen, die alles in der oberen linken Ecke gruppiert zeigt.

Mit CSS gut aussehen lassen

Mit CSS können Sie Teile Ihrer Webseite gestalten, indem Sie diese Teile gezielt auswählen und Werte für Eigenschaften wie Schriftgröße und Hintergrundfarbe angeben. Diese Beispiel-App benötigt kein besonders ausgefeiltes Design, da ihre Benutzeroberfläche sehr einfach ist. Mit einem Hauch von Stil können wir die Ecken und Kanten jedoch glätten. 🎨✨

Gestalten Sie zunächst den Körper, um das Gesamtdesign zu definieren:

Körper {
    Marge: 0;
    Polsterung: 0;
    Anzeige: Netz;
    Mindesthöhe: 100vh;
    Raster-Vorlagen-Zeilen: Mindestinhalt 1fr;
}

Dieses CSS verwendet das Rasterlayout um die Wort- und Zeichenanzahl in einer schmalen Zeile über dem Textbereich zu positionieren. Die Eigenschaft „grid-template-rows“ gibt an, dass die Zählzeile so kurz wie möglich sein soll (min-content) und der Textbereich den verbleibenden Platz ausfüllen soll (1fr).

Die Zählerzeile hat einen grundlegenden Stil, um sie vom Rest des Textes zu unterscheiden, hauptsächlich durch ihren Hintergrund:

#-Zähler {
    Schriftfamilie: serifenlos;
    Hintergrundfarbe: #f7f7f7;
    Textausrichtung: Center;
    Breite: 100%;
    Polsterung: 0.5em 0;
}

Schließlich wird der Textbereich so gestaltet, dass lesbarer Text mit genügend Platz zum Atmen angezeigt wird. Die Linie, die die Zählungen vom Text trennt, ist tatsächlich die obere Grenze dieses Textbereichs.

Textbereich {
    Breite: 100%;
    Höhe: 100%;
    Schriftgröße: 16pt;
    Polsterung: 1In;
    Kartongröße: Rahmenbox;
    Gliederung: 0;
    Grenze: keiner;
    Rand oben: 1px solide #999;
}

Die Notiz-App mit benutzerdefinierten Stilen zeigt oben die Strichliste und darunter einen Textbereich in voller Größe an.

Hinzufügen von Funktionalität mit JavaScript

Wenn Struktur und Stil vorhanden sind, können Sie die Funktionalität hinzufügen: den Code, der dafür sorgt, dass diese einfache App tatsächlich etwas tut. 🛠️

Bevor Sie mit dem Schreiben auch nur des einfachsten Codes beginnen, sollten Sie sich darüber im Klaren sein, was er tun soll. In diesem Fall gibt es nur ein paar allgemeine Anforderungen:

Speichern Sie den eingegebenen Text und laden Sie ihn bei Bedarf neu.
Aktualisieren Sie die Zeichen- und Wortanzahl, um Echtzeitstatistiken bereitzustellen. 📊

Beide Anforderungen beinhalten die Aktualisierung von Elementen im Dokument. Das Skript beginnt also damit, mithilfe der Methode getElementById Verweise auf diese Knoten abzurufen:

Konstante Wörter = dokumentieren.getElementById("Wörter");
Konstante Zeichen = dokumentieren.getElementById("Zeichen");
Konstante Textbereich = dokumentieren.getElementById("Text");

Beachten Sie, dass Wörter, Zeichen und Text die IDs ihrer jeweiligen Elemente im Dokument sind, die in der HTML-Datei mit dem ID-Attribut zugewiesen werden.

Als nächstes muss die App reagieren, wenn der Text geändert wird:

textarea.addEventListener("Eingang", Funktion(ev) { localStorage.setItem("Text", ev.Zielwert); update_counts(ev.target.value); });

Ein Ereignis-Listener ist eine Funktion, die JavaScript automatisch ausführt, wenn ein bestimmtes Ereignis eintritt. In diesem Fall hängen wir an den Textarea-Knoten einen Listener an, der ausgeführt wird, wenn das Ereignis „Input“ eintritt. Das heißt, wenn jemand mit dem Textbereich interagiert.

Als nächstes verwenden wir die Web Storage API, um den aktuellen Inhalt des Textbereichs zu speichern, der von ev.target.value stammt. In dieser Struktur ist ev ein Objekt, das das Ereignis darstellt, das den Listener ausgelöst hat, ev.target ist der Knoten, der das Ereignis empfangen hat, und ev.target.value ist der Text dieses Textbereichs.

Die Methode „setItem“ verwendet zwei Parameter: einen Schlüsselnamen, der den Daten zugeordnet werden soll, und die tatsächlich zu speichernden Daten.

Als nächstes rufen wir update_counts() auf und übergeben denselben Text. Wir werden diese Funktion gleich erklären.

Da wir den Text nun speichern, möchten Sie ihn beim Öffnen oder Neuladen der App möglicherweise erneut laden. Wir können uns darum kümmern, indem wir einen anderen Listener verwenden:

Fenster.addEventListener("laden", Funktion(ev) {
    var Text = localStorage.getItem("Text"); Textbereich.Wert = Text; Anzahl aktualisieren(Text); });

Dieser Listener verarbeitet das Ladeereignis, das beim Fensterobjekt auftritt, einer Darstellung des Browserfensters auf oberster Ebene. Wenn das Fenster geladen wird, gibt ein Aufruf von getItem() den gespeicherten Textwert aus dem lokalen Speicher zurück. Dieser Code setzt dann den Wert des Textbereichs auf den geladenen Text und ruft, wie der Listener oben, update_counts() mit diesem Text auf.

Die restliche Arbeit wird in der Funktion update_counts() erledigt, die wie folgt aussieht:

Funktion Anzahl aktualisieren(Text) { chars.innerHTML = text.length; Wörter.innerHTML = Text.geteilt(' ').Länge; }

Im Gegensatz zu einem Textbereich verfügt normaler Text nicht über eine Werteigenschaft, daher legen wir stattdessen die Eigenschaft „innerHTML“ fest. Die Längeneigenschaft einer Zeichenfolge ist eine einfache schreibgeschützte Eigenschaft, die uns die Anzahl der Zeichen angibt.

text.split(' ') teilt die Zeichenfolge an den Leerzeichen und gibt das Ergebnis als Array von Zeichenfolgen zurück. Wie Zeichenfolgen haben Arrays eine Längeneigenschaft, die uns die Anzahl der Elemente in einem Array angibt.

Wenn Sie diesen Code testen, werden Ihnen jedoch möglicherweise einige Fehler auffallen:

Ein einzelnes Wort in einer Zeile wird nicht richtig gezählt, da es keine Leerzeichen umgibt.
Wenn überhaupt kein Text vorhanden ist, wird aufgrund der Aufteilungsfunktion nur ein einzelnes Wort gemeldet.

Um das erste Problem zu lösen, können Sie anstelle eines Leerzeichens einen regulären Ausdruck verwenden (\s bedeutet „ein Leerzeichen“). Um das zweite Problem zu lösen, filtern Sie leere Zeichenfolgen aus dem Ergebnis heraus:

    Wörter.innerHTML = Text.geteilt(/\S/).Filter(Funktion(N) { zurückkehren n != ''; }).Länge;

Wenn Sie diese Zeile nicht vollständig verstehen, schauen Sie sich die MDN-Seiten an für Teilt Und Filter.

Die Webanwendung mit Beispieltext, der die genaue Zeichen- und Wortanzahl anzeigt.

Mit nur wenigen Dateien können Sie viele nützliche Webanwendungen erstellen. Sie können diese einfache Notizen-App auch erweitern, um weitere Funktionen hinzuzufügen. Sie können beispielsweise die window.location-Eigenschaft um die aktuelle URL abzurufen und mehrere Notizen zu unterstützen, indem Sie den Namen variieren, den Sie an localStorage.setItem übergeben. 🗒️🌍