![\"Ein](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nEs z\u00e4hlt auch Zeichen und W\u00f6rter, was eine gute Einf\u00fchrung in die Verarbeitung von Zeichenfolgen (Texten) darstellt. Nat\u00fcrlich 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. \ud83e\uddaa\ud83d\udcbb<\/p>\n
Wie werden Sie es bauen?<\/h2>\n
Obwohl Webanwendungen sehr vielf\u00e4ltig sind, umfassen sie typischerweise drei Haupttechnologien: HTML, CSS und JavaScript. Es ist wichtig, dass Sie ihre Rollen verstehen, bevor Sie beginnen. \ud83d\udcda<\/p>\n
- \n
- HTML: Mit Hypertext Markup Language k\u00f6nnen Sie die Struktur Ihres Inhalts definieren. Damit k\u00f6nnen Sie einen Text entsprechend seiner Bedeutung markieren und beispielsweise angeben, ob es sich um einen Absatz, eine \u00dcberschrift oder einen Eintrag in einer Liste handelt.<\/li>\n
- CSS: Mit Cascading Style Sheets k\u00f6nnen Sie Ihren Inhalten Stil verleihen. Mit dieser Sprache k\u00f6nnen Sie einen Absatz gr\u00fcn einf\u00e4rben, alle Ihre Links fett formatieren oder eine Seitenleiste neben Ihrem Hauptartikel positionieren. \ud83c\udfa8<\/li>\n
- JavaScript: Mit dieser Programmiersprache k\u00f6nnen Sie Ihrer Website Funktionen hinzuf\u00fcgen. Sie k\u00f6nnen Schaltfl\u00e4chen so konfigurieren, dass Teile Ihres Dokuments beim Anklicken angezeigt oder ausgeblendet werden, oder Sie k\u00f6nnen ein vollwertiges Textverarbeitungsprogramm oder Videospiel implementieren. \ud83c\udfae<\/li>\n<\/ul>\n
Er website.dev<\/a> (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de informaci\u00f3n sobre tecnolog\u00edas web fundamentales.<\/p>\n
![\"Die](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_798_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nDie Struktur der App<\/h2>\n
Die App, die Sie erstellen, besteht aus drei einfachen Dateien: index.html, styles.css und script.js. \ud83d\uddc2\ufe0f<\/p>\n
Zum Ausf\u00fchren der App sind keine besonderen Anforderungen erforderlich, Sie ben\u00f6tigen lediglich einen Webbrowser. Es gibt keine Backend-Funktionalit\u00e4t, daher ben\u00f6tigen Sie keine Skriptsprache wie PHP oder einen lokalen Webserver. Sobald Sie fertig sind, k\u00f6nnen Sie die index.html-Datei direkt in Ihrem Browser<\/a> und alles wird gut. \ud83d\ude0a<\/p>\n
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. \ud83c\udf6a\ud83d\udcbe<\/p>\n
So erstellen Sie den Notiznehmer<\/h2>\n
Erstellen Sie die folgenden drei Dateien im selben Verzeichnis und \u00f6ffnen Sie dann index.html in einem Webbrowser. Alternativ k\u00f6nnen Sie die Dateien herunterladen von dieses GitHub-Repository<\/a>. \ud83d\udce5<\/p>\n
Aufbau der Struktur mit HTML<\/h3>\n
Die Datei index.html definiert die Struktur des Inhalts Ihrer App in HTML. F\u00fcgen Sie Verweise auf die anderen beiden Dateien ein, damit ein Browser sie zum Endprodukt kombinieren kann.<\/p>\n
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:<\/p>\n
html<\/span>>\r\n<html<\/span>><\/span>\r\n<Kopf<\/span>><\/span>\r\n ...\r\nKopf<\/span>><\/span><\/code><\/pre>\n<K\u00f6rper<\/span>><\/span>
\n…
\nK\u00f6rper<\/span>><\/span>
\nhtml<\/span>><\/span><\/p>\n<\/code><\/pre>\n<\/code><\/pre>\nDie 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:<\/p>\n
<Titel<\/span>><\/span>TextTitel<\/span>><\/span>\r\n <Link<\/span> relativ<\/span>="Stylesheet"<\/span> href<\/span>="styles.css"<\/span> \/><\/span>\r\n<\/code><\/pre>\nDer K\u00f6rper ist komplizierter, aber es gibt nur wenige wichtige Teile:<\/p>\n
<div<\/span> Ausweis<\/span>="Schalter"<\/span>><\/span>\r\n W\u00f6rter: <Spanne<\/span> Ausweis<\/span>="W\u00f6rter"<\/span>><\/span>0Spanne<\/span>><\/span>\r\n \/ Zeichen: <Spanne<\/span> Ausweis<\/span>="Zeichen"<\/span>><\/span>0Spanne<\/span>><\/span>\r\n div<\/span>><\/span><\/code><\/pre>\n<Textbereich<\/span> Ausweis<\/span>="Text"<\/span> Autofokus<\/span>=\u00ab1\u00bb<\/span>><\/span>Textbereich<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<Skript<\/span> Quelle<\/span>=\u00abscript.js\u00bb<\/span>><\/span>Skript<\/span>><\/span><\/p>\n
<\/code><\/pre>\n<\/code><\/pre>\nDas Div-Element enth\u00e4lt die Wort- und Zeichenanzahl der App. Es befindet sich oben in der Web-App und wird bei jeder Text\u00e4nderung aktualisiert.<\/p>\n
Beachten Sie die ID-Attribute, die f\u00fcr 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\u00f6nnen wir diese Elemente besser gestalten und sie beim Hinzuf\u00fcgen von Funktionen gezielter einsetzen.<\/p>\n
Der Textbereich ist ein integriertes Formularelement, mit dem Sie einfachen Text in einen Browser eingeben k\u00f6nnen. Mit der Autofokus-Funktion k\u00f6nnen Sie sofort mit dem Schreiben beginnen, wenn die Seite geladen ist. Schlie\u00dflich verweist die Seite auf die JavaScript-Datei script.js.<\/p>\n
An diesem Punkt k\u00f6nnen Sie die Datei index.html in einem Browser \u00f6ffnen. 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.<\/p>\n
![\"Eine](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_678_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nMit CSS gut aussehen lassen<\/h3>\n
Mit CSS k\u00f6nnen Sie Teile Ihrer Webseite gestalten, indem Sie diese Teile gezielt ausw\u00e4hlen und Werte f\u00fcr Eigenschaften wie Schriftgr\u00f6\u00dfe und Hintergrundfarbe angeben. Diese Beispiel-App ben\u00f6tigt kein besonders ausgefeiltes Design, da ihre Benutzeroberfl\u00e4che sehr einfach ist. Mit einem Hauch von Stil k\u00f6nnen wir die Ecken und Kanten jedoch gl\u00e4tten. \ud83c\udfa8\u2728<\/p>\n
Gestalten Sie zun\u00e4chst den K\u00f6rper, um das Gesamtdesign zu definieren:<\/p>\n
K\u00f6rper<\/span> {\r\n Marge<\/span>: 0;\r\n Polsterung<\/span>: 0;\r\n Anzeige<\/span>: Netz<\/span>;\r\n Mindesth\u00f6he<\/span>: 100vh<\/span>;\r\n Raster-Vorlagen-Zeilen<\/span>: Mindestinhalt<\/span> 1fr<\/span>;\r\n}\r\n<\/code><\/pre>\nEste CSS utiliza la disposici\u00f3n en cuadr\u00edcula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo m\u00e1s corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).<\/p>\n
Die Z\u00e4hlerzeile hat einen grundlegenden Stil, um sie vom Rest des Textes zu unterscheiden, haupts\u00e4chlich durch ihren Hintergrund:<\/p>\n
#-Z\u00e4hler<\/span> {\r\n Schriftfamilie<\/span>: serifenlos<\/span>;\r\n Hintergrundfarbe<\/span>: #f7f7f7<\/span>;\r\n Textausrichtung<\/span>: Center<\/span>;\r\n Breite<\/span>: 100%;\r\n Polsterung<\/span>: 0.5em<\/span> 0;\r\n}\r\n<\/code><\/pre>\nSchlie\u00dflich wird der Textbereich so gestaltet, dass lesbarer Text mit gen\u00fcgend Platz zum Atmen angezeigt wird. Die Linie, die die Z\u00e4hlungen vom Text trennt, ist tats\u00e4chlich die obere Grenze dieses Textbereichs.<\/p>\n
Textbereich<\/span> {\r\n Breite<\/span>: 100%;\r\n H\u00f6he<\/span>: 100%;\r\n Schriftgr\u00f6\u00dfe<\/span>: 16pt<\/span>;\r\n Polsterung<\/span>: 1In<\/span>;\r\n Kartongr\u00f6\u00dfe<\/span>: Rahmenbox<\/span>;\r\n Gliederung<\/span>: 0;\r\n Grenze<\/span>: keiner<\/span>;\r\n Rand oben<\/span>: 1px<\/span> solide<\/span> #999<\/span>;\r\n}<\/code><\/pre>\n![\"Die](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_152_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\nHinzuf\u00fcgen von Funktionalit\u00e4t mit JavaScript<\/h3>\n
Wenn Struktur und Stil vorhanden sind, k\u00f6nnen Sie die Funktionalit\u00e4t hinzuf\u00fcgen: den Code, der daf\u00fcr sorgt, dass diese einfache App tats\u00e4chlich etwas tut. \ud83d\udee0\ufe0f<\/p>\n
Bevor Sie mit dem Schreiben auch nur des einfachsten Codes beginnen, sollten Sie sich dar\u00fcber im Klaren sein, was er tun soll. In diesem Fall gibt es nur ein paar allgemeine Anforderungen:<\/p>\n
- \n
- Speichern Sie den eingegebenen Text und laden Sie ihn bei Bedarf neu.<\/li>\n
- Aktualisieren Sie die Zeichen- und Wortanzahl, um Echtzeitstatistiken bereitzustellen. \ud83d\udcca<\/li>\n<\/ul>\n
Beide Anforderungen beinhalten die Aktualisierung von Elementen im Dokument. Das Skript beginnt also damit, mithilfe der Methode getElementById Verweise auf diese Knoten abzurufen:<\/p>\n
Konstante<\/span> W\u00f6rter = dokumentieren<\/span>.getElementById("W\u00f6rter"<\/span>);\r\nKonstante<\/span> Zeichen = dokumentieren<\/span>.getElementById("Zeichen"<\/span>);\r\nKonstante<\/span> Textbereich = dokumentieren<\/span>.getElementById("Text"<\/span>);\r\n<\/code><\/pre>\nBeachten Sie, dass W\u00f6rter, Zeichen und Text die IDs ihrer jeweiligen Elemente im Dokument sind, die in der HTML-Datei mit dem ID-Attribut zugewiesen werden.<\/p>\n
Als n\u00e4chstes muss die App reagieren, wenn der Text ge\u00e4ndert wird:<\/p>\n
textarea.addEventListener("Eingang"<\/span>, Funktion<\/span>(ev<\/span>) <\/span>{ localStorage.setItem("Text"<\/span>, ev.Zielwert); update_counts(ev.target.value); });\r\n<\/code><\/pre>\nEin Ereignis-Listener ist eine Funktion, die JavaScript automatisch ausf\u00fchrt, wenn ein bestimmtes Ereignis eintritt. In diesem Fall h\u00e4ngen wir an den Textarea-Knoten einen Listener an, der ausgef\u00fchrt wird, wenn das Ereignis \u201eInput\u201c eintritt. Das hei\u00dft, wenn jemand mit dem Textbereich interagiert.<\/p>\n
Als n\u00e4chstes 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\u00f6st hat, ev.target ist der Knoten, der das Ereignis empfangen hat, und ev.target.value ist der Text dieses Textbereichs.<\/p>\n
Die Methode \u201esetItem\u201c verwendet zwei Parameter: einen Schl\u00fcsselnamen, der den Daten zugeordnet werden soll, und die tats\u00e4chlich zu speichernden Daten.<\/p>\n
Als n\u00e4chstes rufen wir update_counts() auf und \u00fcbergeben denselben Text. Wir werden diese Funktion gleich erkl\u00e4ren.<\/p>\n
Da wir den Text nun speichern, m\u00f6chten Sie ihn beim \u00d6ffnen oder Neuladen der App m\u00f6glicherweise erneut laden. Wir k\u00f6nnen uns darum k\u00fcmmern, indem wir einen anderen Listener verwenden:<\/p>\n
Fenster<\/span>.addEventListener("laden"<\/span>, Funktion<\/span>(ev<\/span>) <\/span>{\r\n var<\/span> Text = localStorage.getItem("Text"<\/span>); Textbereich.Wert = Text; Anzahl aktualisieren(Text); });\r\n<\/code><\/pre>\nDieser 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\u00fcck. Dieser Code setzt dann den Wert des Textbereichs auf den geladenen Text und ruft, wie der Listener oben, update_counts() mit diesem Text auf.<\/p>\n
Die restliche Arbeit wird in der Funktion update_counts() erledigt, die wie folgt aussieht:<\/p>\n
Funktion<\/span>\u00a0Anzahl aktualisieren<\/span>(Text<\/span>) <\/span>{ chars.innerHTML = text.length; W\u00f6rter.innerHTML = Text.geteilt(' '<\/span>).L\u00e4nge; }\r\n<\/code><\/pre>\nIm Gegensatz zu einem Textbereich verf\u00fcgt normaler Text nicht \u00fcber eine Werteigenschaft, daher legen wir stattdessen die Eigenschaft \u201einnerHTML\u201c fest. Die L\u00e4ngeneigenschaft einer Zeichenfolge ist eine einfache schreibgesch\u00fctzte Eigenschaft, die uns die Anzahl der Zeichen angibt.<\/p>\n
text.split(' ') teilt die Zeichenfolge an den Leerzeichen und gibt das Ergebnis als Array von Zeichenfolgen zur\u00fcck. Wie Zeichenfolgen haben Arrays eine L\u00e4ngeneigenschaft, die uns die Anzahl der Elemente in einem Array angibt.<\/p>\n
Wenn Sie diesen Code testen, werden Ihnen jedoch m\u00f6glicherweise einige Fehler auffallen:<\/p>\n
- \n
- Ein einzelnes Wort in einer Zeile wird nicht richtig gez\u00e4hlt, da es keine Leerzeichen umgibt.<\/li>\n
- Wenn \u00fcberhaupt kein Text vorhanden ist, wird aufgrund der Aufteilungsfunktion nur ein einzelnes Wort gemeldet.<\/li>\n<\/ol>\n
Um das erste Problem zu l\u00f6sen, k\u00f6nnen Sie anstelle eines Leerzeichens einen regul\u00e4ren Ausdruck verwenden (\\s bedeutet \u201eein Leerzeichen\u201c). Um das zweite Problem zu l\u00f6sen, filtern Sie leere Zeichenfolgen aus dem Ergebnis heraus:<\/p>\n
W\u00f6rter.innerHTML = Text.geteilt(\/\\S\/<\/span>).Filter(Funktion<\/span>(N<\/span>) <\/span>{ zur\u00fcckkehren<\/span> n != ''<\/span>; }).L\u00e4nge;\r\n<\/code><\/pre>\nWenn Sie diese Zeile nicht vollst\u00e4ndig verstehen, schauen Sie sich die MDN-Seiten an f\u00fcr Teilt<\/a> Und Filter<\/a>.<\/p>\n
![\"Die](\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_129_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" "\\"\\"")
<\/picture><\/figure>\n
\n