Dynamisches Skripting mit JavaScript

Voraussetzungen

Bevor Sie mit diesem Modul beginnen, benötigen Sie keine vorherigen JavaScript-Kenntnisse, aber Sie sollten 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 JavaScript-Einsteigerkurs! In diesem ersten Artikel betrachten wir JavaScript aus einer übergeordneten Perspektive und beantworten Fragen wie "Was ist das?" und "Was macht es?", um sicherzustellen, dass Sie sich mit dem Zweck von JavaScript wohlfühlen.

Ein erster Sprung in JavaScript

Nachdem Sie etwas über die Theorie von JavaScript gelernt haben und was Sie damit machen können, geben wir Ihnen einen Schnellkurs über die grundlegenden Funktionen von JavaScript durch ein vollständig praktisches Tutorial. Hier bauen Sie schrittweise ein einfaches "Zahlen raten"-Spiel auf.

Was ist schiefgelaufen? JavaScript-Fehlerbehebung

Als Sie das "Zahlen raten"-Spiel im vorherigen Artikel erstellt haben, haben Sie vielleicht festgestellt, dass es nicht funktioniert hat. Keine Angst — dieser Artikel soll Sie davor bewahren, sich über solche Probleme die Haare zu raufen, indem er Ihnen einige einfache Tipps gibt, wie Sie Fehler in JavaScript-Programmen finden und beheben können.

Speichern der benötigten Informationen — 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 zusammen mit anderen Webtechnologien verwenden und wie seine Hauptmerkmale aus einer hohen Perspektive aussehen. In diesem Artikel befassen wir uns mit den echten Grundlagen und schauen, wie man mit den grundlegendsten Bausteinen von JavaScript — Variablen — arbeitet.

Grundlegende Mathematik in JavaScript — Zahlen und Operatoren

An diesem Punkt des Kurses besprechen wir Mathe in JavaScript — wie wir Operatoren und andere Funktionen kombinieren können, um Zahlen erfolgreich zu manipulieren und unsere Ziele zu erreichen.

Textverarbeitung — Zeichenketten in JavaScript

Als nächstes widmen wir uns den Zeichenketten — das ist, was Textstücke in der Programmierung genannt werden. In diesem Artikel behandeln wir alle gängigen Dinge, die Sie über Zeichenketten wissen sollten, wenn Sie JavaScript lernen, wie etwa das Erstellen von Zeichenketten, das Entkommen von Anführungszeichen in Zeichenketten und das Verbinden von Zeichenketten.

Nützliche Zeichenkettenmethoden

Nachdem wir uns die Grundlagen der Zeichenketten angesehen haben, sollten wir einen Gang höher schalten und darüber nachdenken, welche nützlichen Operationen wir mit integrierten Methoden auf Zeichenketten durchführen können, z.B. die Länge einer Textzeichenkette zu finden, Zeichenketten zu verbinden und zu trennen, ein Zeichen in einer Zeichenkette durch ein anderes zu ersetzen und mehr.

Arrays

In dieser Lektion schauen wir uns Arrays an — eine elegante Möglichkeit, eine Liste von Datenschlüssel unter einem einzigen Variablennamen zu speichern. Hier untersuchen wir, warum dies nützlich ist und wie man ein Array erstellt, wie man auf gespeicherte Elemente zugreift, hinzufügt und entfernt, und mehr.

Herausforderung: Lustige Geschichtengenerator ^{Herausforderung}

In dieser Herausforderung sollen Sie einige der Kenntnisse, die Sie bisher in diesem Modul erworben haben, anwenden, um eine unterhaltsame App zu erstellen, die zufällige lustige Geschichten generiert. Dabei testen wir Ihr Wissen über Variablen, Mathematik, Zeichenketten und Arrays.

Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen

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

Code-Schleifen

Programmiersprachen sind sehr nützlich, um sich wiederholende Aufgaben schnell abzuschließen, von mehreren grundlegenden Berechnungen bis hin zu nahezu jeder anderen Situation, in der viele ähnliche Arbeitspakete zu erledigen sind. Hier werden wir die in JavaScript verfügbaren Schleifenstrukturen betrachten, die solche Bedürfnisse abdecken.

Funktionen — Wiederverwendbare Codeblöcke

Ein weiteres wesentliches Konzept beim Programmieren sind Funktionen, die es Ihnen ermöglichen, ein Stück Code, das eine einzelne Aufgabe erfüllt, in einem definierten Block zu speichern und diesen Code dann bei Bedarf mit einem einzigen kurzen Befehl aufzurufen — anstatt den gleichen Code mehrmals eingeben zu müssen. In diesem Artikel erkunden wir grundlegende Konzepte hinter Funktionen wie die grundlegende Syntax, wie man sie aufruft und definiert, Gültigkeitsbereich und Parameter.

Bauen Sie Ihre eigene Funktion

Mit der meisten der wesentlichen Theorie, die im vorherigen Artikel behandelt wurde, bietet dieser Artikel praktische Erfahrung. Hier werden Sie einige praktische Übungen zum Erstellen Ihrer eigenen, benutzerdefinierten Funktion durchführen. Dabei erklären wir auch einige nützliche Details im Umgang mit Funktionen.

Rückgabewerte von Funktionen

Es gibt noch ein letztes wichtiges Konzept über Funktionen, das wir besprechen müssen — die Rückgabewerte. Einige Funktionen geben keinen signifikanten Wert zurück, aber andere tun es. Es ist wichtig zu verstehen, was ihre Werte sind, wie Sie sie in Ihrem Code verwenden und wie Sie Funktionen nützliche Werte zurückgeben lassen können. Wir werden all dies nachfolgend behandeln.

Einführung in Events

In diesem Artikel besprechen wir einige wichtige Konzepte rund um Events und schauen uns die Grundlagen an, wie sie in Browsern funktionieren.

Event-Bubbling

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

Herausforderung: Bildergalerie ^{Herausforderung}

Jetzt, da wir uns die grundlegenden Bausteine von JavaScript angesehen haben, testen wir Ihr Wissen über Schleifen, Funktionen, bedingte Anweisungen und Events, indem wir Sie dazu bringen, ein recht häufiges Element zu erstellen, das Sie auf vielen Websites sehen werden — eine JavaScript-gestützte Bildergalerie.

Grundlagen von Objekten

In diesem Artikel schauen wir uns die grundlegende Syntax von JavaScript-Objekten an und kehren zu einigen JavaScript-Funktionen zurück, die wir zuvor im Kurs gesehen haben, und betonen die Tatsache, dass viele der Funktionen, mit denen Sie bereits gearbeitet haben, Objekte sind.

Einführung in das DOM-Skripting

Beim Schreiben von Webseiten und Apps ist eine der häufigsten Aufgaben, die Sie ausführen möchten, die Änderung der Dokumentstruktur in irgendeiner Weise. Dies wird normalerweise durch die Manipulation des Document Object Model (DOM) durch eine Reihe von integrierten Browser-APIs zum Steuern von HTML und Styling-Informationen durchgeführt. In diesem Artikel führen wir Sie in DOM-Skripting ein.

Netzwerkanfragen mit JavaScript

Eine weitere sehr häufige Aufgabe in modernen Websites und Anwendungen ist das Stellen von Netzwerkanfragen, um einzelne Datenelemente vom Server abzurufen, um Abschnitte einer Webseite zu aktualisieren, ohne eine gesamte 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 werden wir in diesem Artikel das Konzept erklären und Technologien betrachten, die dies ermöglichen.

Arbeiten mit JSON

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

JavaScript-Debugging und Fehlerbehebung

In dieser Lektion kehren wir zum Thema Debugging von JavaScript zurück (welches wir zuerst in Was ist schiefgelaufen? betrachtet haben). Hier gehen wir tiefer in die Techniken zur Fehlerverfolgung ein, schauen uns aber auch an, wie man defensiv codiert und Fehler in Ihrem Code handhabt, um Probleme von vornherein zu vermeiden.

Testen Sie Ihre Fähigkeiten

Es gibt Artikel "Testen Sie Ihre Fähigkeiten", die zwischen den Tutorial-Artikeln platziert sind, um zu überprüfen, ob Sie die wichtigsten Informationen behalten haben, bevor Sie weitermachen. Wenn Sie all diese zusammen erkunden möchten, finden Sie sie unter Testen Sie Ihre Fähigkeiten: JavaScript.

Siehe auch

Scrimba: Learn JavaScript ^{MDN Lernpartner}

Der Learn JavaScript Kurs von Scrimba lehrt Ihnen JavaScript durch das Lösen von über 140 interaktiven Programmierherausforderungen, das Erstellen von Projekten, einschließlich eines Spiels, einer Browser-Erweiterung und sogar einer mobilen App. Scrimba bietet unterhaltsame interaktive Lektionen von sachkundigen Lehrern.

Learn JavaScript

Eine ausgezeichnete Ressource für angehende Webentwickler — lernen Sie JavaScript in einer interaktiven Umgebung, mit kurzen Lektionen und interaktiven Tests, geleitet durch automatisierte Bewertungen. Die ersten 40 Lektionen sind kostenlos, und der vollständige Kurs ist für eine kleine einmalige Zahlung erhältlich.

• Übersicht: Kernlernmodule
• Weiter