Dynamisches Scripting mit JavaScript

Vor Beginn dieses Moduls benötigen Sie keine Vorkenntnisse in JavaScript, aber Sie sollten die vorherigen Module im Kurs durchgearbeitet haben. Sie sollten mindestens HTML und die grundlegenden Grundlagen von CSS kennen.

Was ist JavaScript?

Willkommen im MDN-Anfängerkurs für JavaScript! In diesem ersten Artikel betrachten wir JavaScript aus einer übergeordneten Perspektive und beantworten Fragen wie „Was ist es?“ und „Was macht es?“, und stellen sicher, dass Sie sich mit dem Zweck von JavaScript wohlfühlen.

Ein erster Einblick in JavaScript

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

Was ist schief gelaufen? JavaScript-Fehlerbehebung

Als Sie das "Erraten Sie die Zahl"-Spiel im vorherigen Artikel aufgebaut haben, haben Sie vielleicht festgestellt, dass es nicht funktionierte. Keine Sorge — dieser Artikel soll Sie davor bewahren, sich wegen solcher Probleme die Haare zu raufen, indem er Ihnen einige einfache Tipps gibt, wie Sie Fehler in JavaScript-Programmen finden und beheben können.

Die benötigten Informationen speichern — Variablen

Nach dem Lesen der letzten Artikel 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 auf einer übergeordneten Ebene aussehen. In diesem Artikel werden wir uns den wirklich grundlegenden Dingen zuwenden und uns ansehen, wie man mit den grundlegendsten Bausteinen von JavaScript arbeitet — Variablen.

Grundlegende Mathematik in JavaScript — Zahlen und Operatoren

An diesem Punkt des Kurses besprechen wir Mathematik in JavaScript — wie wir Operatoren und andere Funktionen kombinieren können, um erfolgreich Zahlen in unserem Sinne zu manipulieren.

Textverarbeitung — Zeichenfolgen in JavaScript

Als nächstes widmen wir uns den Zeichenfolgen — so werden Textstücke in der Programmierung genannt. In diesem Artikel werden wir uns alle gängigen Dinge ansehen, die Sie wirklich über Zeichenfolgen wissen sollten, wenn Sie JavaScript lernen, wie das Erstellen von Zeichenfolgen, das Maskieren von Anführungszeichen in Zeichenfolgen und das Zusammenfügen von ihnen.

Nützliche Zeichenfolgenmethoden

Nachdem wir die Grundlagen der Zeichenfolgen betrachtet haben, gehen wir einen Gang höher und beginnen darüber nachzudenken, welche nützlichen Operationen wir mit eingebauten Methoden auf Zeichenfolgen ausführen können, wie das Finden der Länge einer Textzeichenfolge, das Verbinden und Teilen von Zeichenfolgen, das Ersetzen eines Zeichens in einer Zeichenfolge 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, warum dies 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: Blöde Geschichtengenerator ^Challenge

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

Entscheidungen in Ihrem Code treffen — Bedingte Anweisungen

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 das Spiel vorbei. In einer Wetter-App: Wenn sie morgens angesehen wird, zeige eine Sonnenaufgangsgrafik; zeige Sterne und einen Mond, wenn es Nacht ist. In diesem Artikel werden wir untersuchen, wie sogenannte bedingte Anweisungen in JavaScript funktionieren.

Wiederholenden Code schreiben

Programmiersprachen sind sehr nützlich, um schnell sich wiederholende Aufgaben zu erledigen, von mehreren einfachen Berechnungen bis hin zu nahezu jeder anderen Situation, in der Sie eine Menge ähnlicher Arbeiten zu erledigen haben. Hier betrachten wir die Schleifenstrukturen, die in JavaScript verfügbar sind und solche Bedürfnisse abdecken.

Funktionen — wiederverwendbare Codeblöcke

Ein weiteres wesentliches Konzept im Coding sind Funktionen, die es Ihnen ermöglichen, einen Codeabschnitt, der eine einzelne Aufgabe erfüllt, in einem definierten Block zu speichern und diesen Code dann jederzeit mit einem einzigen kurzen Befehl zu verwenden — anstatt denselben Code mehrfach tippen zu müssen. In diesem Artikel erkunden wir grundlegende Konzepte hinter Funktionen wie grundlegende Syntax, wie man sie aufruft und definiert, Bereich und Parameter.

Ihre eigene Funktion erstellen

Mit den meisten essenziellen Theorien, die im vorherigen Artikel behandelt wurden, bietet dieser Artikel praktische Erfahrungen. Hier erhalten Sie etwas Übung darin, Ihre eigene, benutzerdefinierte Funktion zu erstellen. Dabei 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 retournieren keinen bedeutenden Wert, andere jedoch schon. Es ist wichtig zu verstehen, was ihre Werte sind und wie man sie in Ihrem Code verwendet, sowie wie man Funktionen nützliche Werte zurückgeben lässt. Wir werden all dies im Folgenden behandeln.

Einführung in Events

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

Event-Bubbling

Dieser Artikel führt in die Konzepte des Event-Bubbling, der Ereignisaufnahme und der Ereignisdelegierung ein. Dabei geht es darum, was passiert, wenn Sie einen Listener zu einem Element hinzufügen, das ein anderes Element enthält, und ein Event dann zu dem enthaltenen Element passiert.

Herausforderung: Bildergalerie ^Challenge

Nachdem wir nun die grundlegenden Bausteine von JavaScript betrachtet haben, testen wir Ihr Wissen über Schleifen, Funktionen, Bedingungen und Events, indem wir Sie dazu bringen, ein relativ häufig vorkommendes Element zu erstellen, das Sie auf vielen Websites sehen werden — eine JavaScript-gesteuerte Bildergalerie.

Objektgrundlagen

In diesem Artikel schauen wir uns die grundlegende JavaScript-Objektsyntax an und wiederholen einige JavaScript-Funktionen, die wir bereits früher im Kurs gesehen haben, um zu verdeutlichen, dass viele der Funktionen, mit denen Sie bereits gearbeitet haben, Objekte sind.

Einführung ins DOM-Scripting

Beim Schreiben von Webseiten und Apps ist eine der häufigsten Aufgaben, die Dokumentenstruktur auf irgendeine Weise zu ändern. Dies wird normalerweise durch das Manipulieren des Document Object Models (DOM) mittels eines Satzes integrierter Browser-APIs zur Steuerung von HTML und Stilinformationen durchgeführt. In diesem Artikel führen wir Sie in das DOM-Scripting ein.

Netzwerkanfragen mit JavaScript senden

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

Arbeiten mit JSON

JavaScript Object Notation (JSON) ist ein standardisiertes, textbasiertes Format zur Darstellung strukturierter Daten basierend auf JavaScript-Objektsyntax. Es wird häufig für die Übertragung 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, also geben wir Ihnen in diesem Artikel alles, was Sie benötigen, um mit JSON in JavaScript zu arbeiten, einschließlich des Parsens von JSON, sodass Sie auf die darin enthaltenen Daten zugreifen und JSON erstellen können.

JavaScript-Debugging und Fehlerbehandlung

In dieser Lektion kehren wir zum Thema Debugging in JavaScript zurück (welches wir bereits in Was ist schief gelaufen? behandelt haben). Hier werden wir tiefer in Techniken zum Auffinden von Fehlern eintauchen, betrachten aber auch, wie man defensiv programmiert und Fehler in Ihrem Code handhabt, um Probleme von vornherein zu vermeiden.

Scrimba: Learn JavaScript ^{MDN-Lernpartner}

Scrimbas Learn JavaScript Kurs lehrt Ihnen JavaScript durch das Lösen von über 140 interaktiven Coding-Herausforderungen und das Erstellen 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, geleitet 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