Dynamisches Scripting mit JavaScript

Voraussetzungen

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

Tutorials und Herausforderungen

Was ist JavaScript?

Willkommen zum MDN JavaScript-Kurs für Anfänger! In diesem ersten Artikel betrachten wir JavaScript aus einer Vogelperspektive und beantworten Fragen wie "Was ist das?" und "Was tut es?", und stellen sicher, dass Sie sich mit dem Zweck von JavaScript vertraut fühlen.

Ein erster Einblick in JavaScript

Jetzt, da Sie etwas über die Theorie von JavaScript und das, was Sie damit tun können, gelernt haben, geben wir Ihnen einen Crashkurs über die grundlegenden Funktionen von JavaScript durch ein vollständig praktisches Tutorial. Hier bauen Sie Schritt für Schritt ein einfaches "Errate die Zahl"-Spiel auf.

Was ist schiefgelaufen? Fehlerbehebung in JavaScript

Als Sie das "Errate die Zahl"-Spiel im vorherigen Artikel aufgebaut haben, haben Sie möglicherweise festgestellt, dass es nicht funktionierte. Keine Sorge — dieser Artikel soll Ihnen helfen, nicht die Haare über solche Probleme zu verlieren, 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 neben anderen Webtechnologien verwenden und wie seine Hauptmerkmale aus einer hohen Ebene aussehen. In diesem Artikel gehen wir zu den wirklichen Grundlagen über und betrachten, 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 unseren Befehlen nachzukommen.

Umgang mit Text — Strings in JavaScript

Als Nächstes wenden wir uns Strings zu — so werden Textstücke in der Programmierung genannt. In diesem Artikel betrachten wir alle gängigen Dinge, die Sie wirklich über Strings wissen sollten, wenn Sie JavaScript lernen, wie das Erstellen von Strings, das Escapen von Anführungszeichen in Strings und das Zusammenfügen von Strings.

Nützliche String-Methoden

Nun, da wir uns die grundlegenden Funktionen von Strings angesehen haben, steigern wir den Gang und beginnen, über nützliche Operationen nachzudenken, die wir mit integrierten Methoden an Strings vornehmen können, wie das Finden der Länge eines Text-Strings, das Zusammenfügen und Trennen von Strings, das Ersetzen eines Zeichens in einem String durch ein anderes und mehr.

Arrays

In dieser Lektion betrachten wir Arrays — eine clevere Möglichkeit, eine Liste von Datenelementen unter einem einzigen Variablennamen zu speichern. Hier sehen wir uns an, warum das 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: Alberner Geschichten-Generator ^{Herausforderung}

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

Entscheidungen in Ihrem Code treffen — Konditionals

In jeder Programmiersprache muss der Code Entscheidungen treffen und entsprechend handeln, abhängig von verschiedenen Eingaben. Zum Beispiel in einem Spiel, wenn die Anzahl der Leben des Spielers 0 ist, dann ist es Spielende. In einer Wetter-App, wenn sie am Morgen angesehen wird, zeigt sie eine Sonnenaufgangsgrafik; zeigt Sterne und einen Mond, wenn es Nacht ist. In diesem Artikel werden wir erkunden, wie sogenannte Bedingungsaussagen in JavaScript funktionieren.

Schleifen von Code

Programmiersprachen sind sehr nützlich, um sich wiederholende Aufgaben schnell zu erledigen, von mehreren einfachen Berechnungen bis hin zu nahezu jeder anderen Situation, in der Sie viele ähnliche Arbeitsgegenstände zu erledigen haben. Hier betrachten wir die Schleifenstrukturen, die in JavaScript zur Verfügung stehen, um solche Bedürfnisse zu erfüllen.

Funktionen — wiederverwendbare Codeblöcke

Ein weiteres grundlegendes Konzept im Codieren ist Funktionen, die es Ihnen ermöglichen, ein Stück Code, das eine einzige Aufgabe ausführt, in einem definierten Block zu speichern und dann diesen Code aufzurufen, wann immer Sie ihn benötigen, mit einem kurzen Befehl — anstatt den gleichen Code mehrfach eintippen zu müssen. In diesem Artikel werden wir grundlegende Konzepte hinter Funktionen erforschen, wie grundlegende Syntax, wie man sie aufruft und definiert, den Geltungsbereich und Parameter.

Erstellen Sie Ihre eigene Funktion

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

Funktionsrückgabewerte

Es gibt ein weiteres grundlegendes Konzept über Funktionen zu besprechen — 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. Wir werden all dies unten behandeln.

Einführung in Ereignisse

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

Event-Bubbling

Dieser Artikel stellt die Konzepte des Event-Bubbling, der Ereigniserfassung und der Ereignisdelegation vor, die sich alle damit beschäftigen, was passiert, wenn Sie einen Listener zu einem Element hinzufügen, das ein anderes Element enthält, und ein Ereignis dann bei dem enthaltenen Element stattfindet.

Herausforderung: Bildergalerie ^{Herausforderung}

Jetzt, da wir uns die grundlegenden Bausteine von JavaScript angesehen haben, testen wir Ihr Wissen über Schleifen, Funktionen, Konditionen und Ereignisse, indem wir Sie dazu bringen, ein ziemlich verbreitetes Objekt zu erstellen, das Sie auf vielen Websites sehen werden — eine von JavaScript betriebene Bildergalerie.

Grundlagen von Objekten

In diesem Artikel betrachten wir die grundlegende JavaScript-Objektsyntax und wiederholen einige JavaScript-Funktionen, die wir bereits früher im Kurs gesehen haben, und betonen die Tatsache, dass viele der Funktionen, mit denen Sie bereits zu tun hatten, Objekte sind.

Einführung in das DOM-Scripting

Beim Schreiben von Webseiten und Apps ist eine der häufigsten Aufgaben, die Sie erledigen wollen, die Dokumentenstruktur in irgendeiner Weise zu ändern. Dies geschieht in der Regel durch die Manipulation des Document Object Model (DOM) über eine Reihe von integrierten Browser-APIs zur Steuerung von HTML und Styling-Informationen. In diesem Artikel führen wir Sie in das DOM-Scripting ein.

Netzwerkanfragen mit JavaScript

Eine weitere sehr häufige Aufgabe in modernen Websites und Anwendungen ist das Stellen von Netzwerkanfragen, um einzelne Datenobjekte 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 enormen Einfluss auf die Leistung und das Verhalten von Websites gehabt, daher erklären wir in diesem Artikel das Konzept und betrachten Technologien, die es möglich machen.

Arbeiten mit JSON

JavaScript Object Notation (JSON) ist ein standardmäßiges textbasiertes Format zur Darstellung strukturierter Daten basierend auf der JavaScript-Objektsyntax. Es wird häufig zur Übermittlung von Daten in Webanwendungen verwendet (z. B. das Senden einiger Daten vom Server an den Client, um sie auf einer Webseite anzuzeigen oder umgekehrt). Sie werden häufig darauf stoßen, also geben wir Ihnen in diesem Artikel alles, was Sie brauchen, um mit JSON in JavaScript zu arbeiten, einschließlich des Parsens von JSON, um auf die darin enthaltenen Daten zuzugreifen, und das Erstellen von JSON.

JavaScript-Debugging und Fehlerbehandlung

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

Testen Sie Ihre Fähigkeiten

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

Siehe auch

Scrimba: JavaScript lernen ^{MDN Lernpartner}

Der Kurs JavaScript lernen von Scrimba lehrt Ihnen JavaScript durch das Lösen von über 140 interaktiven Programmier-Herausforderungen, das Erstellen von Projekten einschließlich einem Spiel, einer Browsererweiterung und sogar einer mobilen App. Scrimba bietet unterhaltsame interaktive Lektionen, die von sachkundigen Lehrkräften unterrichtet werden.

JavaScript lernen

Eine ausgezeichnete 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