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 beim Anfänger-JavaScript-Kurs von MDN! In diesem ersten Artikel betrachten wir JavaScript aus einer höheren Perspektive, beantworten Fragen wie „Was ist das?“ und „Was macht es?“ und stellen sicher, dass Sie mit dem Zweck von JavaScript vertraut sind.

Ein erster Sprung in JavaScript

Nachdem Sie etwas über die Theorie von JavaScript und seine Möglichkeiten gelernt haben, geben wir Ihnen nun einen Crashkurs über die grundlegenden Funktionen von JavaScript durch ein vollständig praktisches Tutorial. Hier bauen Sie schrittweise ein einfaches „Zahlenraten“-Spiel auf.

Was ist schiefgelaufen? Fehlersuche in JavaScript

Als Sie das „Zahlenraten“-Spiel im vorherigen Artikel aufgebaut haben, haben Sie möglicherweise festgestellt, dass es nicht funktioniert. Keine Sorge – dieser Artikel soll Ihnen helfen, nicht an solchen Problemen zu verzweifeln, 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 Hauptfunktionen auf hoher Ebene aussehen. In diesem Artikel gehen wir auf die wirklich grundlegenden Dinge ein und betrachten, wie man mit den grundlegendsten Bausteinen von JavaScript – Variablen – arbeitet.

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 so zu manipulieren, wie wir es wollen.

Umgang mit Text — Strings in JavaScript

Als nächstes wenden wir uns den Strings zu – so werden Textteile in der Programmierung genannt. In diesem Artikel werden wir uns alle gängigen Dinge ansehen, die Sie wirklich über Strings wissen sollten, wenn Sie JavaScript lernen, wie das Erstellen von Strings, das Escaping von Anführungszeichen in Strings und das Verbinden von ihnen.

Nützliche String-Methoden

Nachdem wir uns nun die grundlegenden Dinge über Strings angesehen haben, lassen Sie uns eine Stufe weitergehen und darüber nachdenken, welche nützlichen Operationen wir mit den eingebauten Methoden auf Strings ausführen können, wie das Finden der Länge eines Textstrings, das Verbinden und Teilen von Strings, das Ersetzen eines Zeichens in einem String durch ein anderes und mehr.

Arrays

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

Herausforderung: Der alberne Geschichten-Generator ^Challenge

In dieser Herausforderung sollen Sie einen Teil des Wissens anwenden, das Sie bisher in diesem Modul erworben haben, um eine unterhaltsame App zu erstellen, die zufällige alberne Geschichten generiert. Dabei testen wir Ihr Wissen über Variablen, Mathematik, Strings und Arrays.

Entscheidungen treffen in Ihrem Code — Bedingte Anweisungen

In jeder Programmiersprache muss der Code Entscheidungen treffen und entsprechend unterschiedliche Aktionen ausführen, abhängig von unterschiedlichen 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 betrachtet wird, zeigt sie eine Sonnenaufgangs-Grafik; zeigt Sterne und einen Mond, wenn es Nacht ist. In diesem Artikel erkunden wir, wie sogenannte bedingte Anweisungen in JavaScript funktionieren.

Schleifen im Code

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

Funktionen — wiederverwendbare Code-Blöcke

Ein weiteres wesentliches Konzept beim Codieren sind Funktionen, die es Ihnen ermöglichen, ein Stück Code, das eine einzelne Aufgabe erfüllt, innerhalb eines definierten Blocks zu speichern und diesen Code dann mit einem einzigen kurzen Befehl immer dann aufzurufen, wenn Sie ihn benötigen, 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, ihren Geltungsbereich und Parameter.

Erstellen Sie Ihre eigene Funktion

Da wir die wesentlichen Theorien im vorherigen Artikel größtenteils behandelt haben, bietet dieser Artikel praktische Erfahrung. Hier erhalten Sie etwas Übung beim Erstellen Ihrer eigenen, benutzerdefinierten Funktion. Auf dem Weg dorthin 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 noch diskutieren 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 Sie sie in Ihrem Code verwenden und wie Sie Funktionen dazu bringen, nützliche Werte zurückzugeben. Wir werden all dies im Folgenden behandeln.

Einführung in Ereignisse

In diesem Artikel besprechen wir einige wichtige Konzepte rund um Ereignisse und betrachten die Grundlagen, wie sie in Browsern funktionieren.

Ereignisblasen

Dieser Artikel führt die Konzepte des Ereignisblasens, der Ereigniserfassung und der Ereignisdelegation ein, die alle darüber handeln, was passiert, wenn Sie einem Element, das ein anderes Element enthält, einen Listener hinzufügen und dann ein Ereignis bei dem enthaltenen Element auftritt.

Herausforderung: Bildergalerie ^Challenge

Nachdem wir uns die grundlegenden Bausteine von JavaScript angesehen haben, testen wir Ihr Wissen über Schleifen, Funktionen, bedingte Anweisungen und Ereignisse, indem wir Sie dazu bringen, ein ziemlich häufiges Element, das Sie auf vielen Websites sehen werden, zu erstellen – eine JavaScript-gesteuerte Bildergalerie.

Grundlagen von Objekten

In diesem Artikel werden wir uns grundlegende JavaScript-Objektsyntax ansehen und einige JavaScript-Funktionen, die wir bereits früher im Kurs gesehen haben, erneut besuchen und damit betonen, 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 es eine der häufigsten Aufgaben, die Dokumentstruktur auf irgendeine Weise zu ändern. Dies geschieht in der Regel, indem das Document Object Model (DOM) über eine Reihe von eingebauten browserbasierten APIs zur Steuerung von HTML und Stilinformationen manipuliert wird. In diesem Artikel führen wir Sie in das DOM-Skripting ein.

Netzwerkanfragen mit JavaScript

Eine weitere sehr häufige Aufgabe in modernen Websites und Anwendungen ist es, Netzwerkanfragen zu stellen, um einzelne Datenelemente vom Server abzurufen und Bereiche 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. In diesem Artikel erklären wir das Konzept und betrachten Technologien, die dies möglich machen.

Arbeiten mit JSON

JavaScript Object Notation (JSON) ist ein standardisiertes textbasiertes Format zur Darstellung von strukturierten Daten basierend auf der JavaScript-Objekt-Syntax. Es wird häufig zur Übermittlung von Daten in Webanwendungen verwendet (z. B. zum Senden von Daten vom Server an den Client, damit sie 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 der Erstellung von JSON.

Herausforderung: Erstellen einer Hausdaten-Benutzeroberfläche ^Challenge

In dieser Herausforderung werden wir Sie dazu bringen, etwas JavaScript für eine Haussuchseite auf einer Immobilienwebsite zu schreiben. Dazu gehört das Abrufen von JSON-Daten, das Filtern dieser Daten basierend auf den in den bereitgestellten Formularsteuerelementen eingegebenen Werten und das Rendern dieser Daten in der Benutzeroberfläche. Auf dem Weg dorthin testen wir auch Ihr Wissen über bedingte Anweisungen, Schleifen, Arrays und Array-Methoden und mehr.

JavaScript-Debugging und Fehlerbehandlung

In dieser Lektion kehren wir zum Thema Debugging von JavaScript zurück (das wir zuerst in Was ist schiefgelaufen? betrachtet haben). Hier werden wir tiefer in Techniken zum Aufspüren von Fehlern eintauchen, aber auch zeigen, wie man defensiv programmiert und Fehler in Ihrem Code bearbeitet, um Probleme von vornherein zu vermeiden.

Testen Sie Ihre Fähigkeiten

Sie finden „Testen Sie Ihre Fähigkeiten“-Artikel zwischen den Tutorial-Artikeln, um zu überprüfen, ob Sie die wichtigsten Informationen behalten haben, bevor Sie weitergehen. Wenn Sie alle zusammen erkunden möchten, finden Sie sie im Artikel Testen Sie Ihre Fähigkeiten: JavaScript.

Siehe auch

Scrimba: Lernen Sie JavaScript ^{MDN Lernpartner}

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

Learn JavaScript

Eine hervorragende 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 einmalige Zahlung erhältlich.

• Übersicht: Kernlernmodule
• Weiter