Dynamisches Scripting mit JavaScript

Voraussetzungen

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

Tutorials und Herausforderungen

Was ist JavaScript?

Willkommen im JavaScript-Kurs für Einsteiger bei MDN! In diesem ersten Artikel betrachten wir JavaScript auf hoher Ebene und beantworten Fragen wie „Was ist es?“ und „Was macht es?“. Dabei stellen wir sicher, dass Sie sich mit dem Zweck von JavaScript vertraut machen.

Ein erster Einblick in JavaScript

Jetzt, da Sie etwas über die Theorie von JavaScript und seine Einsatzmöglichkeiten gelernt haben, geben wir Ihnen einen Crash-Kurs zu den grundlegenden Funktionen von JavaScript durch ein vollständig praktisches Tutorial. Hier bauen Sie Schritt für Schritt ein einfaches „Zahlenraten“-Spiel auf.

Was ging schief? Beheben von Problemen in JavaScript

Als Sie im vorherigen Artikel das „Zahlenraten“-Spiel aufgebaut haben, haben Sie möglicherweise festgestellt, dass es nicht funktionierte. Keine Sorge — dieser Artikel soll Ihnen helfen, den Kopf bei solchen Problemen nicht zu verlieren, indem er Ihnen einige einfache Tipps liefert, 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 Web-Technologien nutzen und wie seine Hauptmerkmale aus hoher Sicht aussehen. In diesem Artikel geht es um die echten Basics: wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — den Variablen.

Grundlegende Mathematik in JavaScript — Zahlen und Operatoren

An dieser Stelle im Kurs befassen wir uns mit Mathematik in JavaScript — wie wir Operatoren und andere Funktionen kombinieren können, um Zahlen erfolgreich zu manipulieren und unsere Anforderungen zu erfüllen.

Umgang mit Text — Strings in JavaScript

Als Nächstes wenden wir uns Strings zu — so nennt man Textstücke in der Programmierung. In diesem Artikel betrachten wir alle gängigen Dinge, die man über Strings wissen sollte, wenn man JavaScript lernt, wie zum Beispiel das Erstellen von Strings, das Escapen von Anführungszeichen in Strings und das Verbinden von Strings.

Nützliche String-Methoden

Nachdem wir die absoluten Grundlagen von Strings betrachtet haben, legen wir einen Gang zu und überlegen uns, welche nützlichen Operationen wir mit integrierten Methoden auf Strings durchführen können, wie das Finden der Länge eines Textstrings, das Verknüpfen 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 einzelnen Variablennamen zu speichern. Hier betrachten wir den Nutzen davon, dann erkunden wir, wie man ein Array erstellt und Items in einem Array abruft, hinzufügt und entfernt sowie mehr.

Herausforderung: Lustiger Story-Generator ^{Herausforderung}

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

Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen

In jeder Programmiersprache muss der Code Entscheidungen treffen und entsprechend unterschiedliche Eingaben ausführen. Zum Beispiel, in einem Spiel, wenn die Anzahl der Leben des Spielers 0 ist, dann ist das Spiel vorbei. In einer Wetter-App, wenn es morgens betrachtet wird, zeigen Sie eine Sonnenaufgangsgrafik; zeigen Sie Sterne und einen Mond, wenn es nachts ist. In diesem Artikel erkunden wir, wie sogenannte bedingte Anweisungen in JavaScript funktionieren.

Schleifen im Code

Programmiersprachen sind sehr nützlich für die schnelle Ausführung sich wiederholender Aufgaben, von mehreren einfachen Berechnungen bis hin zu fast jeder anderen Situation, in der Sie viele ähnliche Arbeiten abschließen müssen. Hier betrachten wir die Schleifenstrukturen, die JavaScript bietet, um solche Anforderungen zu erfüllen.

Funktionen — Wiederverwendbare Codeblöcke

Ein weiteres wesentliches Konzept beim Programmieren sind Funktionen, mit denen Sie ein Stück Code, das eine einzelne Aufgabe ausführt, in einem definierten Block speichern und diesen Code dann bei Bedarf mit einem kurzen Befehl aufrufen können, anstatt den gleichen Code mehrmals schreiben zu müssen. In diesem Artikel erkunden wir die grundlegenden Konzepte hinter Funktionen, wie die grundlegende Syntax, wie man sie aufruft und definiert, den Umfang und Parameter.

Erstellen Sie Ihre eigene Funktion

Mit den meisten wesentlichen Theorien, die im vorherigen Artikel behandelt wurden, bietet dieser Artikel praktische Erfahrung. Hier üben Sie, Ihre eigene, benutzerdefinierte Funktion zu erstellen. Unterwegs erklären wir auch einige nützliche Details zum Umgang mit Funktionen.

Funktionsrückgabewerte

Es gibt ein letztes wesentliches Konzept zu Funktionen, das wir besprechen müssen — Rückgabewerte. Einige Funktionen geben keinen bedeutenden Wert zurück, aber andere tun es. 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. Wir werden all diese Themen unten besprechen.

Einführung in Ereignisse

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

Event Bubbling

Dieser Artikel führt in die Konzepte des Event Bubbling, der Ereigniserfassung und der Ereignisdelegation ein, die alle darum gehen, was passiert, wenn Sie einem Element, das ein anderes Element enthält, einen Listener hinzufügen und dann ein Ereignis an dem enthaltenen Element auftritt.

Herausforderung: Bildergalerie ^{Herausforderung}

Jetzt, da wir die grundlegenden Bausteine von JavaScript betrachtet haben, testen wir Ihr Wissen über Schleifen, Funktionen, Bedingte Anweisungen und Ereignisse, indem Sie eine ziemlich häufig auf vielen Websites zu sehende Funktion erstellen — eine JavaScript-gestützte Bildergalerie.

Grundlagen von Objekten

In diesem Artikel betrachten wir die grundlegende JavaScript-Objektsyntax und wiederholen einige JavaScript-Funktionen, die wir bereits 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-Scripting

Beim Schreiben von Webseiten und Apps möchten Sie oft die Dokumentstruktur auf irgendeine Weise ändern. Dies geschieht in der Regel durch Manipulation des Document Object Model (DOM) über eine Reihe von integrierten Browser-APIs zur Steuerung von HTML und Gestaltungsinformationen. In diesem Artikel führen wir Sie in das DOM-Scripting ein.

Netzwerkanfragen mit JavaScript durchführen

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 vollständig neue Seite laden zu müssen. Dieses scheinbar kleine Detail hat einen großen Einfluss auf die Leistung und das Verhalten von Seiten gehabt, also erklären wir in diesem Artikel das Konzept und betrachten Technologien, die dies ermöglichen.

Arbeiten mit JSON

JavaScript Object Notation (JSON) ist ein standardisiertes textbasiertes Format zur Darstellung strukturierter Daten basierend auf der Objekt-Syntax von JavaScript. Es wird häufig zum Übertragen von Daten in Webanwendungen verwendet (z. B. Daten vom Server an den Client senden, 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 unter Verwendung von JavaScript zu arbeiten, einschließlich des Parsens von JSON, um auf die darin enthaltenen Daten zuzugreifen, und des Erstellens von JSON.

Herausforderung: Bau einer Hausdaten-UI ^{Herausforderung}

In dieser Herausforderung schreiben wir JavaScript für eine Haussuchseite auf einer Immobilienwebsite. Dies umfasst das Abrufen von JSON-Daten, das Filtern dieser Daten basierend auf den in bereitgestellten Formularelementen eingegebenen Werten und das Rendern dieser Daten in der UI. Unterwegs 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 ging schief? betrachteten). Hier werden wir tiefer in Techniken zum Auffinden von Fehlern eintauchen, uns aber auch ansehen, wie man defensiv programmiert und Fehler im Codehandhabung vermeidet.

Testen Sie Ihr Wissen

Sie finden „Testen Sie Ihr Wissen“-Artikel zwischen den Tutorial-Artikeln, um zu überprüfen, ob Sie die wichtigsten Informationen behalten haben, bevor Sie fortfahren. Wenn Sie alle auf einmal erkunden möchten, finden Sie sie unter Test your skills: 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 Programmier-Herausforderungen und den Bau von Projekten, einschließlich eines Spiels, einer Browser-Erweiterung und sogar einer mobilen App. Scrimba bietet unterhaltsame interaktive Lektionen, die von erfahrenen 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, geleitet durch eine automatisierte Bewertung. Die ersten 40 Lektionen sind kostenlos, und der vollständige Kurs ist gegen eine kleine einmalige Zahlung verfügbar.

• Übersicht: Kernlernmodule
• Weiter