Dynamische Skripterstellung mit JavaScript

Voraussetzungen

Bevor Sie mit diesem Modul beginnen, benötigen Sie keine vorherigen JavaScript-Kenntnisse, jedoch sollten Sie die vorherigen Module des Kurses durchgearbeitet haben. Sie sollten zumindest HTML und die grundlegenden Grundlagen von CSS kennen.

Tutorials und Herausforderungen

Was ist JavaScript?

Willkommen zum MDN-Anfängerkurs für JavaScript! In diesem ersten Artikel werden wir JavaScript aus einer höheren Perspektive betrachten und Fragen beantworten wie "Was ist es?" und "Was macht es?", und sicherstellen, dass Sie mit dem Zweck von JavaScript vertraut sind.

Ein erster Sprung in JavaScript

Jetzt, da Sie etwas über die Theorie von JavaScript und dessen Möglichkeiten gelernt haben, geben wir Ihnen einen schnellen Überblick über die grundlegenden Funktionen von JavaScript durch ein vollständig praktisches Tutorial. Hier bauen Sie Schritt für Schritt ein einfaches "Rate die Zahl"-Spiel auf.

Was ging schief? Fehlerbehebung in JavaScript

Als Sie das "Rate die Zahl"-Spiel im vorherigen Artikel erstellt haben, haben Sie vielleicht festgestellt, dass es nicht funktionierte. Keine Sorge — dieser Artikel zielt darauf ab, Sie vor dem Haare raufen über solche Probleme zu bewahren, indem er Ihnen einige einfache Tipps gibt, wie Sie Fehler in JavaScript-Programmen finden und beheben können.

Information speichern — Variablen

Nachdem Sie die letzten Artikel gelesen haben, sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es neben anderen Web-Technologien verwenden und wie seine Hauptmerkmale aus einer höheren Perspektive aussehen. In diesem Artikel werden wir uns auf die wirklich grundlegenden Konzepte konzentrieren und zeigen, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen.

Grundrechenarten in JavaScript — Zahlen und Operatoren

An diesem Punkt im Kurs besprechen wir Mathematik in JavaScript — wie wir Operatoren und andere Funktionen kombinieren können, um erfolgreich Zahlen zu manipulieren, um unsere Anweisungen auszuführen.

Umgang mit Text — Zeichenfolgen in JavaScript

Als nächstes wenden wir uns den Zeichenfolgen zu — das ist es, was Textstücke in der Programmierung genannt werden. In diesem Artikel werden wir uns all die gängigen Dinge ansehen, die Sie wirklich über Zeichenfolgen wissen sollten, wenn Sie JavaScript lernen, wie z.B. das Erstellen von Zeichenfolgen, das Escapieren von Anführungszeichen in Zeichenfolgen und das Zusammenfügen von Zeichenfolgen.

Nützliche Methoden für Zeichenfolgen

Nachdem wir uns die Grundlagen von Zeichenfolgen angesehen haben, lassen Sie uns einen Gang höher schalten und darüber nachdenken, welche nützlichen Operationen wir mit eingebauten Methoden auf Zeichenfolgen ausführen können, wie z.B. das Finden der Länge eines Textzeichens, das Verbinden und Aufteilen von Zeichenfolgen, das Ersetzen eines Zeichens in einer Zeichenfolge durch ein anderes und mehr.

Arrays

In dieser Lektion werden wir uns Arrays ansehen — eine clevere Möglichkeit, eine Liste von Datenelementen unter einem einzigen Variablennamen zu speichern. Hier betrachten wir, warum dies nützlich ist, und erkunden, wie man ein Array erstellt, Elemente abruft, hinzufügt und entfernt, die in einem Array gespeichert sind, und mehr.

Herausforderung: Lustiger Geschichten-Generator ^Challenge

In dieser Herausforderung besteht Ihre Aufgabe darin, einige der Kenntnisse, die Sie bisher in diesem Modul erworben haben, anzuwenden, um eine lustige App zu erstellen, die zufällige lustige Geschichten generiert. Auf dem Weg dorthin testen wir Ihr Wissen über Variablen, Mathematik, Zeichenfolgen und Arrays.

Entscheidungen im Code treffen — Bedingungen

In jeder Programmiersprache muss der Code Entscheidungen treffen und entsprechend verschiedene Aktionen ausführen, abhängig von verschiedenen Eingaben. Zum Beispiel, in einem Spiel, wenn die Anzahl der Leben des Spielers 0 ist, dann ist das Spiel vorbei. In einer Wetter-App, wenn sie morgens angesehen wird, zeigen Sie eine Grafik eines Sonnenaufgangs; zeigen Sie Sterne und einen Mond, wenn es Nacht ist. In diesem Artikel werden wir erkunden, wie sogenannte bedingte Anweisungen in JavaScript funktionieren.

Code wiederholen

Programmiersprachen sind sehr nützlich, um schnell sich wiederholende Aufgaben zu erledigen, von mehreren einfachen Berechnungen bis hin zu nahezu jeder anderen Situation, in der Sie viele ähnliche Arbeiten zu erledigen haben. Hier werden wir uns die Schleifenstrukturen ansehen, die in JavaScript verfügbar sind, um solche Bedürfnisse abzudecken.

Funktionen — wiederverwendbare Codeblöcke

Ein weiteres wesentliches Konzept beim Programmieren sind Funktionen, die es Ihnen ermöglichen, ein Code-Stück, das eine einzelne Aufgabe erfüllt, in einem definierten Block zu speichern und diesen Code dann aufzurufen, wann immer Sie ihn benötigen, mit einem einzigen kurzen Befehl — statt denselben Code mehrmals eintippen zu müssen. In diesem Artikel werden wir grundlegende Konzepte hinter Funktionen wie grundlegende Syntax, wie man sie aufruft und definiert, den Umfang und Parameter erkunden.

Erstellen Sie Ihre eigene Funktion

Mit den meisten wesentlichen Theorien, die im vorherigen Artikel behandelt wurden, bietet dieser Artikel praktische Erfahrung. Hier werden Sie etwas Übung darin bekommen, Ihre eigene, benutzerdefinierte Funktion zu erstellen. Auf dem Weg dorthin werden wir auch einige nützliche Details im Umgang mit Funktionen erklären.

Rückgabewerte von Funktionen

Es gibt ein letztes wichtiges Konzept über Funktionen, über das wir sprechen müssen — Rückgabewerte. Einige Funktionen geben keinen signifikanten Wert zurück, aber andere schon. Es ist wichtig zu verstehen, was ihre Werte sind, wie man sie in Ihrem Code verwendet und wie man Funktionen nützliche Werte zurückgeben lässt. All das werden wir im Folgenden behandeln.

Einführung in Ereignisse

In diesem Artikel diskutieren wir einige wichtige Konzepte im Zusammenhang mit Ereignissen und betrachten die Grundlagen, wie sie in Browsern funktionieren.

Ereignis-Bubbling

Dieser Artikel führt die Konzepte des Ereignis-Bubbling, der Ereignis-Erfassung und der Ereignis-Delegation ein, die alle damit zu tun haben, was passiert, wenn Sie einen Listener zu einem Element hinzufügen, das ein anderes Element enthält, und ein Ereignis dann am enthaltenen Element auftritt.

Herausforderung: Bildergalerie ^Challenge

Nachdem wir uns die grundlegenden Bausteine von JavaScript angesehen haben, werden wir Ihr Wissen über Schleifen, Funktionen, Bedingungen und Ereignisse testen, indem Sie aufgefordert werden, ein ziemlich häufiges Element zu erstellen, das Sie auf vielen Websites sehen werden — eine JavaScript-gestützte Bildergalerie.

Grundlagen von Objekten

In diesem Artikel werden wir uns die grundlegende JavaScript-Objektsyntax ansehen und einige JavaScript-Funktionen wiederholen, die wir bereits früher im Kurs gesehen haben, wobei wir den Fakt unterstreichen, dass viele der Funktionen, mit denen Sie bereits zu tun hatten, Objekte sind.

Einführung in DOM-Scripting

Beim Schreiben von Webseiten und Apps ist es eines der häufigsten Dinge, die Sie tun möchten, die Dokumentstruktur in irgendeiner Weise zu ändern. Dies wird normalerweise durch das Manipulieren des Document Object Model (DOM) mithilfe einer Reihe von integrierten Browser-APIs zur Steuerung von HTML und Styling-Informationen erreicht. In diesem Artikel werden wir Sie in das DOM-Scripting einführen.

Netzwerkanfragen mit JavaScript stellen

Eine weitere sehr häufige Aufgabe in modernen Websites und Anwendungen ist das Stellen von Netzwerkanfragen, um einzelne Datenitems vom Server abzurufen, um Abschnitte einer Webseite zu aktualisieren, ohne eine komplett neue Seite laden zu müssen. Dieses scheinbar kleine Detail hat einen großen Einfluss auf die Leistung und das Verhalten von Websites gehabt, daher erläutern wir in diesem Artikel das Konzept und betrachten die Technologien, die dies ermöglichen.

Umgang mit JSON

JavaScript Object Notation (JSON) ist ein standardisiertes textbasiertes Format zur Darstellung strukturierter Daten basierend auf der JavaScript-Objektsyntax. Es wird häufig für die Übermittlung von Daten in Webanwendungen verwendet (z.B. das Senden einiger Daten vom Server zum Client, damit diese auf einer Webseite angezeigt werden können oder umgekehrt). Sie werden oft darauf stoßen, daher geben wir Ihnen in diesem Artikel alles, was Sie benötigen, um mit JSON in JavaScript zu arbeiten, einschließlich des Parsens von JSON, damit Sie auf Daten darin zugreifen können, und des Erstellens von JSON.

Herausforderung: Erstellen einer Hausdaten-UI ^Challenge

In dieser Herausforderung werden Sie aufgefordert, etwas JavaScript für eine Haus-Suchseite auf einer Immobilien-Website zu schreiben. Dies wird das Abrufen von JSON-Daten umfassen, das Filtern dieser Daten basierend auf den in bereitgestellten Formularsteuerungen eingegebenen Werten und das Rendern dieser Daten zur UI. Auf dem Weg dorthin testen wir auch Ihr Wissen über Bedingungen, Schleifen, Arrays und Array-Methoden und mehr.

JavaScript-Debugging und Fehlerbehandlung

In dieser Lektion kehren wir zum Thema JavaScript-Debugging zurück (das wir erstmals in Was ging schief? behandelt haben). Hier werden wir tiefere Techniken zur Fehlersuche beleuchten, aber auch darauf eingehen, wie man defensiv programmiert und Fehler in Ihrem Code behandelt, um Probleme von vornherein zu vermeiden.

Testen Sie Ihr Wissen

Sie finden Artikel zum "Testen Sie Ihr Wissen" zwischen den Tutorial-Artikeln, um zu überprüfen, ob Sie die wichtigsten Informationen behalten haben, bevor Sie fortfahren. Wenn Sie all diese zusammen erkunden möchten, finden Sie sie unter Testen Sie Ihr Wissen: JavaScript.

Siehe auch

Scrimba: Lernen Sie JavaScript ^{MDN-Lernpartner}

Der Kurs Lernen Sie JavaScript von Scrimba lehrt JavaScript durch das Lösen von über 140 interaktiven Programmieraufgaben, das Erstellen von Projekten, einschließlich eines Spiels, einer Browser-Erweiterung und sogar einer mobilen App. Scrimba bietet unterhaltsame interaktive Lektionen, die von erfahrenen Lehrern vermittelt werden.

Learn JavaScript

Eine ausgezeichnete Ressource für angehende Webentwickler — Lernen Sie JavaScript in einer interaktiven Umgebung, mit kurzen Lektionen und interaktiven Tests, begleitet von automatisierter Bewertung. Die ersten 40 Lektionen sind kostenlos und der vollständige Kurs ist gegen eine geringe Einmalzahlung verfügbar.

• Übersicht: Kernlernmodule
• Weiter