Dynamisches Skripting mit JavaScript

Bevor Sie mit diesem Modul beginnen, benötigen Sie keine Vorkenntnisse in JavaScript, aber Sie sollten die vorherigen Module in dem Kurs durchgearbeitet haben. Sie sollten zumindest HTML und die grundlegenden Grundlagen von CSS kennen.

Was ist JavaScript?

Willkommen beim Anfängerkurs für JavaScript der MDN! In diesem ersten Artikel betrachten wir JavaScript aus einer übergeordneten Perspektive und beantworten Fragen wie "Was ist es?" und "Was tut es?", um sicherzustellen, dass Sie sich mit dem Zweck von JavaScript vertraut fühlen.

Ein erster Sprung in JavaScript

Nachdem Sie etwas über die Theorie von JavaScript und seine Anwendungsmöglichkeiten gelernt haben, geben wir Ihnen einen Crashkurs über die grundlegenden Funktionen von JavaScript anhand eines vollständig praktischen Tutorials. Hier bauen Sie ein einfaches "Zahlenraten"-Spiel Schritt für Schritt auf.

Was ist schiefgelaufen? Fehlerbehebung in JavaScript

Als Sie das "Zahlenraten"-Spiel im vorherigen Artikel aufgebaut haben, haben Sie vielleicht festgestellt, dass es nicht funktioniert. Keine Sorge — dieser Artikel soll Sie davor bewahren, sich über solche Probleme die Haare zu raufen, indem er Ihnen einige einfache Tipps zum Auffinden und Beheben von Fehlern in JavaScript-Programmen bietet.

Speichern der benötigten Informationen — Variablen

Nach der Lektüre der letzten Artikel sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es zusammen mit anderen Webtechnologien nutzen und wie seine wichtigsten Funktionen aus einer übergeordneten Perspektive aussehen. In diesem Artikel werden wir die Grundlagen vertiefen und uns ansehen, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen.

Grundlegende Mathematik 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 Zahlen erfolgreich zu manipulieren, um unsere Anforderungen zu erfüllen.

Umgang mit Text — Strings in JavaScript

Als nächstes richten wir unsere Aufmerksamkeit auf Strings — das ist die Bezeichnung für Textstücke in der Programmierung. In diesem Artikel betrachten wir alle gängigen Dinge, die Sie wirklich über Strings wissen sollten, wenn Sie JavaScript lernen, wie zum Beispiel das Erstellen von Strings, das Maskieren von Anführungszeichen in Strings und das Verbinden von Strings.

Nützliche String-Methoden

Nachdem wir die Grundlagen der Strings betrachtet haben, schalten wir einen Gang hoch und denken darüber nach, welche nützlichen Operationen wir mit eingebauten Methoden an Strings durchführen können, wie zum Beispiel das Finden der Länge eines Textstrings, das Verbinden und Trennen von Strings, das Ersetzen eines Zeichens in einem String durch ein anderes und mehr.

Arrays

In dieser Lektion betrachten wir Arrays — eine praktische Möglichkeit, eine Liste von Datenobjekten unter einem einzigen Variablennamen zu speichern. Hier schauen wir uns an, warum dies nützlich ist, dann erkunden wir, wie man ein Array erstellt, darauf zugreift, hinzufügt und entfernt, was in einem Array gespeichert ist, und mehr.

Herausforderung: Alberne Geschichtengenerator ^{Herausforderung}

In dieser Herausforderung werden Sie aufgefordert, einige der Kenntnisse, die Sie in den Artikeln dieses Moduls erworben haben, anzuwenden, um eine unterhaltsame App zu erstellen, die zufällige alberne Geschichten generiert. Viel Spaß!

Entscheidungen in Ihrem Code treffen — Konditional

In jeder Programmiersprache muss der Code Entscheidungen treffen und entsprechend andere Handlungen ausführen, abhängig von unterschiedlichen Eingaben. Beispielsweise in einem Spiel: Wenn die Lebensanzahl des Spielers 0 beträgt, ist das Spiel zu Ende. In einer Wetter-App: Wenn sie morgens betrachtet wird, wird eine Sonnenaufgangsgrafik angezeigt; Sterne und ein Mond bei Nacht. In diesem Artikel erforschen wir, wie sogenannte bedingte Anweisungen in JavaScript funktionieren.

Schleifen-Code

Programmiersprachen sind sehr nützlich, um schnell wiederholende Aufgaben zu erledigen, von mehreren einfachen Berechnungen bis hin zu praktisch jeder anderen Situation, bei der Sie viele ähnliche Arbeiten zu erledigen haben. Hier sehen wir uns die Schleifenstrukturen an, die in JavaScript zur Verfügung stehen und solche Bedürfnisse abdecken.

Funktionen — wiederverwendbare Codeblöcke

Ein weiteres wesentliches Konzept im Programmieren sind Funktionen, die es Ihnen ermöglichen, einen Codeabschnitt, der eine einzelne Aufgabe ausführt, in einem definierten Block zu speichern und diesen Code dann bei Bedarf mit einem einzigen kurzen Befehl aufzurufen — anstatt denselben Code mehrfach eingeben zu müssen. In diesem Artikel erkunden wir grundlegende Konzepte hinter Funktionen, wie grundlegende Syntax, wie man sie aufruft und definiert, Scope und Parameter.

Bauen Sie Ihre eigene Funktion

Nachdem die meisten grundlegenden Theorien im vorherigen Artikel behandelt wurden, bietet dieser Artikel praktische Erfahrungen. Hier werden Sie einige Übungen machen, um Ihre eigene, benutzerdefinierte Funktion zu erstellen. Unterwegs erklären wir auch einige nützliche Details im Umgang mit Funktionen.

Rückgabewerte von Funktionen

Es gibt ein letztes wesentliches Konzept über Funktionen, das wir besprechen müssen — Rückgabewerte. Einige Funktionen geben keinen signifikanten Wert zurück, andere jedoch schon. Es ist wichtig zu verstehen, was ihre Werte sind, wie man sie in Ihrem Code verwendet und wie man Funktionen zum Zurückgeben nützlicher Werte bringt. Wir werden all dies unten behandeln.

Einführung in Ereignisse

In diesem Artikel besprechen wir einige wichtige Konzepte rund um Ereignisse und sehen uns die Grundlagen ihrer Funktionsweise in Browsern an.

Ereignis-Bubbling

Dieser Artikel führt die Konzepte von Event-Bubbling, Event-Capturing und Event-Delegation ein, die alle darüber handeln, was passiert, wenn Sie einen Listener zu einem Element hinzufügen, das ein anderes Element enthält, und dann ein Ereignis beim enthaltenen Element auftritt.

Herausforderung: Bildgalerie ^{Herausforderung}

Nachdem wir die grundlegenden Bausteine von JavaScript betrachtet haben, testen wir Ihr Wissen über Schleifen, Funktionen, Konditionen und Ereignisse, indem wir Sie auffordern, ein ziemlich häufiges Element zu bauen, das Sie auf vielen Websites sehen — eine JavaScript-gesteuerte Bildergalerie.

Objekte — Grundlagen

In diesem Artikel werden grundlegende Javascript-Objektsyntax behandelt und einige JavaScript-Funktionen erneut betrachtet, die wir bereits früher im Kurs gesehen haben, um zu verdeutlichen, dass viele der bereits behandelten Funktionen Objekte sind.

Einführung in DOM-Scripting

Beim Erstellen von Webseiten und Apps ist eine der häufigsten Dinge, die Sie tun möchten, die Dokumentstruktur irgendwie zu ändern. Dies geschieht normalerweise durch Manipulation des Document Object Model (DOM) über eine Reihe von eingebauten Browser-APIs zur Steuerung von HTML und Styling-Informationen. In diesem Artikel führen wir Sie in das DOM-Scripting ein.

Netzwerkanfragen mit JavaScript machen

Eine weitere sehr häufige Aufgabe auf modernen Websites und Anwendungen ist das Erstellen von Netzwerkanfragen, um einzelne Datenobjekte vom Server abzurufen, um Abschnitte einer Webseite zu aktualisieren, ohne eine komplett neue Seite laden zu müssen. Dieses scheinbar kleine Detail hat enorme Auswirkungen auf die Leistung und das Verhalten von Websites, daher werden wir in diesem Artikel das Konzept erklären und uns die Technologien ansehen, die dies ermöglichen.

Arbeiten 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 Übertragung von Daten in Webanwendungen verwendet (z.B. Senden von Daten vom Server zum Client, damit sie auf einer Webseite angezeigt oder umgekehrt übermittelt werden können). Sie werden darauf recht häufig stoßen, daher geben wir Ihnen in diesem Artikel alles, was Sie brauchen, um mit JSON in JavaScript zu arbeiten, einschließlich des Parsens von JSON, damit Sie auf darin enthaltene Daten zugreifen und JSON erstellen können.

JavaScript-Debugging und Fehlerbehandlung

In dieser Lektion kehren wir zum Thema Fehlerbehebung in JavaScript zurück (was wir zuerst in Was ist schiefgelaufen? betrachtet haben). Hier werden wir tiefer in Techniken zur Fehlerverfolgung eintauchen, aber auch darauf eingehen, wie man defensiv programmiert und Fehler im Code handhabt, um Probleme von Anfang an zu vermeiden.

Testen Sie Ihre Fähigkeiten: JavaScript

Diese Seite listet JavaScript-Tests auf, die Sie versuchen können, um zu überprüfen, ob Sie den Inhalt dieses Moduls verstanden haben.

Scrimba: Lernen Sie JavaScript ^{MDN-Lernpartner}

Der Learn JavaScript Kurs von Scrimba lehrt Ihnen JavaScript durch das Lösen von über 140 interaktiven Programmierherausforderungen, durch Projekte wie ein Spiel, eine Browser-Erweiterung und sogar eine mobile App. Scrimba bietet unterhaltsame interaktive Lektionen, die von erfahrenen Lehrern gehalten werden.

JavaScript lernen

Eine ausgezeichnete Ressource für angehende Webentwickler — Lernen Sie JavaScript in einer interaktiven Umgebung mit kurzen Lektionen und interaktiven Tests, geführt durch eine automatisierte Bewertung. Die ersten 40 Lektionen sind kostenlos, und der vollständige Kurs ist für eine kleine einmalige Zahlung verfügbar.

• Übersicht: Kernlernmodule
• Weiter