Überblick über JavaScript – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Überblick über JavaScript

JavaScript ist eine leis­tungs­star­ke Pro­gram­mier­spra­che, die im Ver­gleich mit an­de­ren Spra­chen re­la­tiv leicht zu ler­nen ist.

In den letzten 36 Artikeln der Serie habt ihr einen Einstieg in die Programmierung im Allgemeinen und in JavaScript im Speziellen bekommen. Das ist viel Stoff zum Lernen. Alle Videos zusammen sind über sieben Stunden lang.
Deswegen gibt es an dieser Stelle noch einmal einen zusammenfassenden Schnelldurchlauf der gesamten Serie.

Browserkonsole öffnen

Ganz zu Beginn habt ihr gelernt, die Konsole in eurem Browser zu öffnen und eure erste eigene Ausgabe zu schreiben – in Form eines Strings!
Die Browser-Konsole ist der Ort, wo ihr alles aus der Serie direkt ausprobieren konntet, denn nur durch das eigene Ausprobieren, lernt ihr Programmieren.

Strings

Ein String ist eine Zeichenkette, in der beliebige Wörter und Texte stehen können. Ihr markiert Strings, indem ihr um sie herum entweder doppelte oder einfache Anführungszeichen setzt.
Wenn ihr ein Anführungszeichen im String selbst habt, escaped ihr den mit einem Backslash davor.

'Hier gibt\'s kein Problem!' // <= Escaping

Zahlen und Rechnen

In JavaScript ist es egal, wie viele Leerzeichen oder Leerzeilen ihr im Code habt.
Wenn ihr etwas rechnen wollt, geht das wie in eurem Taschenrechner.

Rechnung Symbol Beispiel
Addition + 1 + 1
Subtraktion - 1 - 1
Multiplikation * 1 * 1
Division / 1 / 1

Um Kommazahlen zu schreiben, müsst ihr einen Punkt setzen, weil JavaScript – so wie die meisten Programmiersprachen – dem Englischen entlehnt sind.

0.5 // <= Kommazahl mit Punkt schreiben

Beim Rechnen, aber auch bei allem anderen in JavaScript, könnt ihr Klammern setzen, um etwas zuerst auszurechnen bzw. auszuführen.

Computer können nicht unendlich zählen, deshalb gibt es eine größte und eine kleinste Zahl. Für Zahlen in diesen Größenordnungen ist die Exponentialschreibweise geeignet.

Number.MAX_VALUE
// => 1.7976931348623157e+308
Number.MIN_VALUE
// => 5e-324

Noch größer ist der Wert Infinity, der für Unendlichkeit steht.

Bool'sche Werte, Datentypen und Vergleichsoperatoren

Um zwei Werte miteinander zu vergleichen, benutzt ihr Vergleichsoperatoren, die ihr noch aus der Schule kennen solltet.

Bedeutung Operator Beispiel
Kleiner < 4 < 5 // => true
Größer > 4 > 5 // => false
Kleiner gleich <= 4 <= 4 // => true
Größer gleich >= 4 >= 4 // => true

Bei solch einem Vergleich kommt true oder false heraus, wahr oder falsch. Das sind Bool'sche Werte, und nach Strings und Numbers der dritte Datentyp, der bis dahin in der Serie vorgestellt wurde.

Um zu gucken, ob zwei Werte gleich sind, nutzt ihr nicht ein Gleichzeichen, sondern zwei, oder drei, wenn auch der Datentyp der Werte berücksichtigt werden soll.

4 == "4" // Untersch. Datentyp
// => true
4 === "4" // Untersch. Datentyp, striktes Gleich
// => false
4 === 4 // Gleicher Datentyp, striktes Gleich
// => true

Das Gegenteil davon ist ungleich, wofür ihr ein Ausrufezeichen und ein Gleichzeichen schreibt, oder zwei Gleichzeichen, um auch hier die Datentypen zu berücksichtigen.

4 != "4"
// => false
4 !== "4"
// => true

Variablen und Zuweisungsoperatoren

Variablen sind Stellvertreter für Werte. Um eine Variable zu erstellen, schreibt ihr var, danach den Namen der Variable, ein Gleichzeichen und dahinter den Wert. Am Schluss steht ein Semikolon oder ein Komma, wenn ihr weitere Variablen erstellen wollt.

var meineVariable = "mein Wert";

Es wird immer zuerst die rechte Seite ausgeführt, um deren resultierenden Wert der Variable zuzuweisen.

Neben dem einfachen Gleichzeichen gibt es auch Zuweisungsoperatoren in Kombination mit mathematischen Operatoren. Mit denen wird die Variable basierend auf ihrem aktuellen Wert verändert.

var nr = 5;

nr += 1; // Addition
// => 6

nr -= 2; // Subtraktion
// => 4

nr *= 3; // Multiplikation
// => 12

nr /= 4; // Division
// => 3

Außerdem gibt es die Inkrement- und Dekrementoperatoren, mit denen 1 zum Wert hinzu bzw. abgezogen wird.
Wird das ++ bzw. -- vor den Wert geschrieben, wird zuerst die Operation ausgeführt und anschließend der Wert zurückgegeben; steht es dahinter, wird zuerst der Wert zurückgegeben und anschließend die Operation durchgeführt.

nr
// => 3

++nr // 1. Plus Eins 2. Wert auslesen
// => 4

nr++ // 1. Wert auslesen 2. Plus Eins
// => 4

nr
// => 5

Eine Variable wird zuerst deklariert und anschließend initialisiert. Passiert beides zusammen, ist das eine Definition. Wenn sie nicht initialisiert wird, also keinen Wert zugewiesen bekommt, ist sie undefiniert, undefined, was ein eigener Datentyp ist.

var undefinierteVariable;

undefinierteVariable
// => undefined

Funktionen aufrufen wie alert und prompt

Um eine Funktion aufzurufen, schreibt ihr den Namen der Funktion und danach eine runde Klammer auf und eine runde Klammer zu. Zwischen diesen Klammern können Parameter stehen — die sind die Argumente der Funktion.

alert("Dies ist ein Dialogfenster");

Mit der alert-Funktion habt ihr ein Dialogfenster geöffnet. Mit der Funktion prompt habt ihr ein Eingabefenster erstellt. Das, was ins Eingabefeld geschrieben wird, kommt als Rückgabewert der Funktion wieder zurück.

prompt("Schreibe etwas hier rein!");
// => "Etwas hier rein"

Den Rückgabewert könnt ihr euch in einer Variablen speichern, um ihn weiter zu verarbeiten.

var rueckgabeWert = prompt("Hallo!");

rueckgabeWert
// => "Huhu!"

Strings verarbeiten

Um einen String mit einem anderen zu verbinden, schreibt ihr + dazwischen. Um auszulesen, wie viele Zeichen in einem String sind, schreibt ihr .lenth dahinter.

"Hallo " + "Welt";
// => "Hallo Welt"
"Länge eines Strings".length; // Zeichenanzahl auslesen
// => 19

Möchtet ihr das Zeichen an einer bestimmten Stelle im String auslesen, schreibt ihr den Index der Stelle in eckigen Klammern hinter den String. Wichtig dabei: Ihr beginnt bei 0 zu zählen.

"String"[0]; // Erstes Zeichen auslesen
// => "S"

Der Plusgleich-Operator funktioniert auch bei Strings, um einen String an einen anderen anzuhängen.

var meinString = "Hallo, ";

meinString += prompt("Wie heißt du?");

meinString
// => "Hallo, Oli"

Das EVA-Prinzip

Beim Computer entspricht alles dem EVA-Prinzip: Es gibt eine Eingabe, die verarbeitet und daraufhin ausgegeben wird.

Zahlen, die in Strings stehen, könnt ihr nicht miteinander addieren, weil ihr mit dem Plus nur die Strings zusammenfügt.

"5" + "4"
// => "54"

Ihr müsst die Zahlen erst in Zahlenwerte umwandeln, mit parseInt, um eine Ganzzahl zu bekommen, oder parseFloat, um eine Kommazahl zu bekommen.

parseInt("5") + parseInt("4")
// => 9

Wenn ihr mit Werten rechnet, die keine Zahlen sind, kommt als Ergebnis NaN heraus, was für Not a Number steht, übersetzt also keine Zahl.

"OmNoM" * "NoM"
// => NaN

Bedingte Anweisungen mit if und else

Um Code nur dann auszuführen, wenn eine bestimmte Bedingung erfüllt ist, schreibt ihr if, dahinter in runden Klammern die Bedingung, und anschließend in geschweiften Klammern die Anweisungen.

if (meineBedingung) {
  meineAnweisung();
}

Um auch Code auszuführen, wenn die Bedingung nicht erfüllt ist, könnt ihr dahinter einen else-Block definieren.

var isPracticing = prompt("Probierst du das aus?");
if (isPracticing === "Sir, yes, sir!") {
  alert("Sehr gut!");
} else {
  alert("Oh, ok…");
}

Wenn ihr weitere Bedingungen überprüfen wollt, schreibt ihr hinter das else das nächste if.

if (…) {
  …
} else if (…) {
  …
} else {
  …
}

Wenn ihr nur eine einzelne Anweisung habt, könnt ihr auch die geschweiften Klammern weglassen.

Der Modulo-Operator

Der Modulo-Operator ist in JavaScript ein Prozentzeichen und gibt den Rest einer Division zurück. Das ist praktisch, um zu prüfen, ob etwas durch eine bestimmte Zahl teilbar ist, weil in dem Fall immer 0 herauskommt.

var nr = 42;

nr % 2
// => 0

if (nr % 2 === 0) {
  alert("Zahl ist gerade");
} else {
  alert("Zahl ist ungerade");
}

Truthy und Falsy

Alle Werte in JavaScript entsprechen auch bool'schen Werten. Wenn ihr leere Strings, 0, den Wert NaN oder undefined in einen bool'schen Wert umwandelt, kommt false raus, deshalb heißen diese Werte falsy. Bei allen anderen Werten kommt true heraus, deswegen sind diese truthy.

Datentyp falsy truthy
Number 0, NaN Alle anderen Zahlen
Strings "" Alle nicht leeren Strings
Undefined undefined

Mit der Funktion isNaN, also is Not a Number, lässt sich überprüfen, ob ein Wert keine Zahl ist.

isNaN("Keine Zahl");
// => true

isNaN(5.5); // Ist eine Zahl
// => false

// Aber auch Zahlen in Strings:
isNaN("5.5");
// => false

Bei Nutzereingaben solltet ihr immer überprüfen, ob die Eingaben dem gewünschten Format entsprechen.

Logische Verknüpfungen

Mehrere bool'sche Werte werden mit logischen Verknüpfungen miteinander kombiniert.

NameBedeutungOperatorBeispiel
UND / ANDNur wahr, wenn beide Operanden wahr sind&&
true && true
// => true
true && false
// => false
ODER / ORNur falsch, wenn beide Operanden falsch sind||
false || false
// => false
true || false
// => true
NICHT / NOTBool'sche Negation: Macht aus true false und andersherum!
!false
// => true
!1 // truthy
// => false

Kommentare in der Programmierung

Wenn ihr viel Code habt, könnt ihr den dokumentieren, indem ihr dazu schreibt, was der überhaupt macht, damit ihr euch auch noch später durchfindet. Dafür gibt es Kommentare – Code, der ignoriert und nicht ausgeführt wird, was ermöglicht, Anmerkungen zu schreiben. Für einen einzeiligen Kommentar schreibt ihr zwei Schrägstriche – alles dahinter bis zum Zeilenende ist der Kommentar. Für einen mehrzeiligen Kommentar schreibt ihr /* am Anfang und */ am Ende – alles dazwischen ist der Kommentar.

// Einzeiliger Kommentar

/* Mehr-
zeiliger
Kommentar */

Funktionen schreiben

Um mehrere Anweisungen automatisiert nacheinander auszuführen, gibt es Funktionen. Um eine Funktion zu erstellen, schreibt ihr function, danach den Namen der Funktion und eine öffnende und schließende runde Klammer; zwischen den darauf folgenden geschweiften Klammern stehen die Anweisungen der Funktion.

function meineFunktion () {
  // Hier kann beliebiger Code stehen
}

Im Funktionsrumpf könnt ihr alles schreiben, was ihr wollt – ihr könnt sogar innerhalb der Funktion eine weitere Funktion erstellen.

Funktionen sind ein Datentyp in JavaScript, was unter anderem heißt, dass ihr sie auch einer Variablen zuweisen könnt.

var meineFunktion = function () { /* Code */ };

meineFunktion();

Innerhalb einer Funktion können auch andere Funktionen aufgerufen werden. Welche Funktionen gerade aktiv sind, könnt ihr aus dem Callstack nachvollziehen, dem Aufrufstapel, in der eine Funktion verzeichnet ist, solange sie aufgerufen ist.
Um in einer Funktion Parameter entgegen zu nehmen, schreibt ihr zwischen die runden Klammern einen beliebigen Namen für den Parameter. Mehrere Parameter trennt ihr durch Kommas.

function gibMirParameter(param1, param2) {
  if (param1 === "ok") {
    alert(param2);
  }
}

gibMirParameter("ok", "Tada! 🎉");

Rekursionen

Eine Funktion kann sich auch selbst aufrufen. Das birgt allerdings die Gefahr, dass sie sich unendlich oft aufruft, bis der Call Stack voll ist.
Ein sich selbst aufrufende Funktion heißt Rekursion. Die Gefahr bändigen könnt ihr durch eine Abbruchbedingung, die dafür sorgt, dass die Funktion irgendwann nicht mehr aufgerufen wird.

function countTo10(nr) {
  if (nr <= 10 && nr => 0) {
    alert(nr);
    countTo10(nr + 1);
  }
}

countTo10(1);

Variablen sind nicht überall verfügbar, denn es gibt verschiedene Geltungsbereiche. Jede Funktion hat ihren eigenen Geltungsbereich. Auf Variablen, die innerhalb einer Funktion deklariert werden, kann nicht von außerhalb zugegriffen werden. Andersrum ist das aber möglich: Innerhalb einer Funktion kann auf Werte von außen zugegriffen werden. Der Geltungsbereich in einer Funktion heißt Function scope.

Um Werte von einer Funktion zurückzugeben, schreibt ihr return vor den zurückzugebenden Wert. An diesem return-Statement wird die Ausführung der Funktion beendet – das bedeutet, dass Anweisungen danach nicht mehr ausgeführt werden.
Das return-Statement kann auch ohne einen zurückzugebenden Wert benutzt werden. Das ist sinnvoll, um eine Funktion an einer Stelle abzubrechen.
Zeilenumbrüche schreibt ihr in der Konsole, indem ihr die Umschalttaste und Enter drückt.

Arrays

Um Listen zu erstellen, könnt ihr dafür in JavaScript Arrays verwenden. Die erstellt ihr, indem ihr zwei eckige Klammern schreibt, und dazwischen mit Kommas getrennt, die Werte, die ihr in dieser Liste haben wollt.

[] // leeres Array

// Array mit Werten
["foo", 42, true, undefined]

Um den Wert einer bestimmten Stelle auszulesen, schreibt ihr in eckigen Klammern hinter das Array den Index der Stelle – also genau wie bei Strings.

var arr = ["Jodie Foster", "Anthony Hopkins", "Kasi Lemmons"];

arr[0];
// => "Jodie Foster"

Das length-Attribut könnt ihr auch verwenden, um immer jeweils den Index hinter dem Ende des Arrays zu erreichen. Das ist nützlich, um ein Element an das Array anzuhängen.

arr.length;
// => 3

arr[arr.length] = "Lawrence T. Wrentz";

arr.length;
// => 4

arr[3];
// => "Lawrence T. Wrentz"

Code wiederholen mit Schleifen

Wollt ihr ein Array oder eine Liste verarbeiten, müsst ihr Element für Element abgehen, da es keine Möglichkeit gibt, alles auf einmal zu verarbeiten. Dadurch dass die Anweisungen dafür wieder und wieder wiederholt werden, heißt das ganze: iterieren.
Das könnt ihr mit Rekursionen umsetzen. Es gibt aber auch Code-Konstrukte, die speziell dafür gemacht sind, Anweisungen zu wiederholen – sogenannte Schleifen.

Die while-Schleife führt Code solange aus, solange eine Bedingung erfüllt ist.

// Solange die Bedingung wahr ist,
// wird der Code wiederholt
var nr = 1;
while (nr <= 10) {
  alert(nr);
  nr++;
}

Bei einer einzelnen Anweisung könnt ihr die geschweiften Klammern auch weglassen — das gilt für alle Schleifen.

for-Schleife, break und continue

Der Kopf der for-Schleife besteht aus drei Teilen:

  1. Die Initialisierung, wo Anweisungen einmalig vor dem ersten Durchlauf der Schleife ausgeführt werden. Nützlich z.B., um eine Iterationsvariable zu erstellen.
  2. Die Bedingung, die vor jedem Ausführen der Schleife einmal überprüft wird. Die Schleife läuft, solange die Bedingung erfüllt ist.
  3. Die finale Anweisung, die nach jedem Schleifendurchlauf einmal ausgeführt wird. Hier kann bspw. die Iterationsvariable hoch oder runter gezählt werden.
for (var nr = 1; nr <= 10; nr++) {
  alert(nr);
}

Die do…while-Schleife verhält sich wie die while-Schleife mit dem Unterschied, dass der Code in jedem Fall einmal ausgeführt wird. Denn die Bedingung, um zu überprüfen, ob die Schleife wiederholt wird, wird erst nach dem Durchlaufen der Schleife überprüft.

var nr = 12;
do {
  alert(nr); // Wird einmal mit 12 ausgeführt
  nr++;
} while (nr <= 10)

Ihr könnt eine Schleife auch vorzeitig abbrechen durch Ausführen des break-Statements. Wenn nur der aktuelle Durchlauf der Schleife abgebrochen und mit dem nächsten Durchlauf fortgefahren werden soll, muss continue ausgeführt werden.

var nr = 0.5;
while (true) {
  if (nr > 10) {
    break;
  }
  nr += 0.5;
  if (nr % 1 !== 0) {
    continue;
  }
  alert(nr);
}

Primzahlen finden

Wenn ihr eine if…else-Struktur habt, von der true oder false zurückgegeben wird, könnt ihr das immer vereinfachen: Die if-Bedingung ist bereits true oder false, deshalb könnt ihr bereits das Ergebnis dieser Bedingung zurückgeben.

// Diese Funktion lässt sich vereinfachen:
function isEven(nr) {
  if (nr % 2 === 0) {
    return true;
  } else {
    return false;
  }
}

// Kann reduziert werden zu:
function isEven(nr) {
  return nr % 2 === 0;
}

String in Array aufspalten

Mit dem Wissen über Schleifen konntet ihr Primzahlen finden und Strings spalten. Ihr habt gesehen, wie viel ihr bereits mit eurem bisherigen Wissen erreichen könnt. Ihr müsst einfach nur Dinge ausprobieren. Wenn ihr auf Fehler stößt, findet heraus, was der Fehler ist, und sucht nach Lösungen. Dabei können diverse Ressourcen im Internet hilfreich sein.

Objektorientierte Programmierung

In der Objektorientierten Programmierung wird das zusammengefasst, was zusammengehört, und dadurch das voneinander getrennt, was nicht zusammengehört. Deshalb gibt es Objekte, die verschiedene Properties haben, Eigenschaften. Die Funktionen, die an einem Objekt hängen, werden Methoden genannt. Um ein Property eines Objekts auszulesen, nehmt ihr das Objekt, schreibt dahinter einen Punkt und danach den Namen des Properties. Alternativ kann der Name auch in eckigen Klammern hinter das Objekt geschrieben werden — das ermöglicht, auch Zahlen oder zusammengesetzte Strings als Keys zu nutzen.

// Arrays sind Objekte
var arr = ["Jodie Foster", "Anthony "Hopkins"];

// Der Zugriff auf Objekt-Properties ist auf
// zwei verschiedenen Weisen möglich
arr.length // Punkt-Notation

arr["length"] // Klammer-Notation

Auf dieselbe Weise können Properties auch definieren werden.
Objekte sind ebenfalls ein Datentyp und weit verbreitet in JavaScript. Arrays sind Objekte und selbst Funktionen sind Objekte, ausführbare Objekte.

Primitive & Reference Type und Array-Methoden

Werden zwei Objekte verglichen, geht es nicht um Wertgleichheit, sondern um Identität. Deshalb sind zwei Arrays, die denselben Wert enthalten, angeblich nicht gleich.

42 === 42
// => true

// Aber:
[42] === [42]
// => false

Das liegt daran, dass es zwei verschiedene Speicherarten in JavaScript gibt: Es gibt primitive Datentypen, primitive types, und Referenztypen, reference types. Arbeitet ihr mit Objekten in JavaScript, arbeitet ihr nur mit Referenzen zu diesen Objekten. Vergleicht ihr Objekte miteinander, werden die Referenzen verglichen. Die Objekte können denselben Inhalt haben, aber wenn es nicht ein- und dasselbe Objekt ist, kommt bei einem Vergleich false heraus.

var obj = [42];

// Nur hier kommt true heraus
obj === obj
// => true

Arrays haben verschiedene Methoden:

Array-Methode Bedeutung Beispiel
push Element an das Ende des Arrays hinzufügen [1,2].push(3)
pop Letztes Element aus dem Array entfernen [1,2,3].pop() // => 3
reverse Reihenfolge umdrehen [1,2,3].reverse() // => [3,2,1]
shift Erstes Element aus dem Array entfernen [1,2,3].shift() // => 1
unshift Element an den Anfang des Arrays hinzufügen [2,3].unshift(1)
slice Einen Teil des Arrays extrahieren. Ursprungsarray bleibt unbeeinflusst. [1,2,3].slice(1) // => [2,3]
concat Mehrere Arrays zusammenfügen. Ursprungsarray bleibt unbeeinflusst. [1].concat([2,3]) // => [1,2,3]
sort Sortiert ein Array nach Unicode-point oder nach Sortierfunktion [3,1,2].sort() // => [1,2,3]
splice Elemente entfernen und hinzufügen [1,"a",3].splice(1,1,2) // => ["a"]

Das Math-Objekt

Groß- Kleinschreibung zu beachten ist in JavaScript wichtig. Das Math-Objekt (mit einem großen M) enthält allerlei mathematische Methoden und Konstanten. Unter anderem auch die Methode random, die eine zufällige Zahl zwischen 0 und 1 zurückgibt. Das könnt ihr als zufällige Eingabe nutzen, um daraus Zufallswörter zu erstellen.

var worte = "Sonnen Regen Bild Schirm".split(" ");
function rndWort() {
  return worte[parseInt(Math.random() * worte.length)];
}

rndWort() + rndWort();
// => "BildSchirm"
rndWort() + rndWort();
// => "SonnenRegen"
rndWort() + rndWort();
// => "BildRegen"
rndWort() + rndWort();
// => "RegenBild"
// ...

Am Math-Objekt könnt ihr auch das Konzept von Namensräumen verstehen: Statt die Funktionen und Werte global verstreut zu lassen, was unter Umständen zu Namenskollisionen führen könnte, werden sie stattdessen im Math-Objekt gebündelt. Das Math-Objekt ist dadurch ein Namensraum. Das begegnet euch sehr oft. Zum Beispiel macht Google das bei seinen Programmbibliotheken, die sich alle im google-Namespace befinden.

Beim Math-Objekt sind die Konstanten alle groß geschrieben. Das ist eine allgemeine Konvention. Konventionen gibt es sehr viele in der Programmierung. Das ist, wenn sich eine Gruppe von Entwicklern auf ein bestimmtes Vorgehen einigt, nicht aus einer technischen Notwendigkeit heraus, sondern z.B. für eine bessere Lesbarkeit.

Einfache Objekte

Ein einfaches Objekt erstellt ihr, indem ihr zwei geschweifte Klammern schreibt. Zwischen den geschweiften Klammern könnt ihr Properties definieren. Mehrere Properties trennt ihr durch Kommas voneinander. Das ganze wird auch als Objektliteral bezeichnet.

{} // Ein Objekt ohne eigene Properties

{ ein: "Property" }

// Zur besseren Lesbarkeit werden
// mehrere Properties meist
// untereinander geschrieben
{
  mehrere: "Properties",
  "werden durch": "Kommas getrennt.",
  "Keys können": "in Anführungszeichen",
  "gesetzt": "werden",
  müssen: "es aber nicht."
}

// Ein Property besteht aus
// einem Namen, dem Key, und
// einem Wert, Value
{ key: "value" }

Jedes Objekt muss von irgendwoher kommen. Es gibt Vorlagen für jedes Objekt und ein Objekt wird aus einer Vorlage erstellt, indem new vor die Vorlage geschrieben wird. Instanziieren heißt der Prozess und das erstellte Objekt heißt Instanz. Die Vorlage ist der Konstruktor, die das Objekt konstruiert. Konstruktoren werden per Konvention mit einem großen Anfangsbuchstaben geschrieben.

// Das hier
[]
// ist eine Abkürzung für
new Array();

// Genauso wie dies hier
{}
// eine Abkürzung ist für
new Object();

Auch Arrays und einfache Objekte werden so erstellt — die Schreibweise mit den Klammern ist bloß eine Abkürzung dafür.

Das Date-Objekt

Um ein Datum anzugeben, habt ihr in JavaScript das Date-Objekt. Dazu schreibt ihr new Date und dann in Klammern dahinter das Jahr, den Monat, den Tag und die Uhrzeit des Zeitpunkts, den das Date-Objekt repräsentieren soll.

new Date(2017, 7, 1);
// => Tue Aug 01 2017 00:00:00 GMT+0200 (CEST)

Wenn ihr keine Werte übergebt, speichert das Date-Objekt den Zeitpunkt, an dem es erstellt wurde. Ein Datumsobjekt hat verschiedene Methoden, um beispielsweise nur die Stunden auszulesen oder zu setzen oder die Tage. Es gibt auch die Methode getTime, die die Anzahl der Millisekunden zurückgibt, die seit dem vergangen sind.

Switch statement

In JavaScript ist es Konvention, Wörter, die in einem Variablen- oder Funktionsnamen stehen, dadurch voneinander zu trennen, dass der erste Buchstabe eines jeden Wortes groß geschrieben wird. Diese Schreibweise heißt CamelCase, oder auf deutsch: Binnenmajuskel.

camelCase

worteWerdenGetrennt
IndemDerErsteBuchstabe
großGeschriebenWird

Habt ihr eine Variable und möchtet verschiedene mögliche Werte, die diese Variable hat, durchgehen und je nach Wert bestimmten Code ausführen, solltet ihr dafür besser keine if…else-Struktur nehmen, sondern das switch-Konstrukt.
Es ist wie bei einer Schablone: Der zu überprüfende Wert geht Lücke für Lücke ab und da, wo er durchpasst, wird der Code ausgeführt.
Doch es gibt etwas, das ihr beachten solltet

var d = new Date(2017, 6, 30);
var ausgabe = "";
switch (d.getDay()) {
  case 0: ausgabe += "Sonntag";
  case 1: ausgabe += "Montag";
  case 2: ausgabe += "Dienstag";
  default: ausgabe += "Anderer Tag";
}

// Was ist hier passiert??
ausgabe;
// => "SonntagMontagDienstagAnderer Tag"

Das Problem: Sobald ein Fall zutrifft, wird nicht nur der Code von diesem Fall ausgeführt, sondern auch von allen nachfolgenden Fällen. Das Verhalten ist bei 97% aller Einsatzzwecke unerwünscht.
Deswegen wollt ihr das vermutlich verhindern und das geht, indem ihr break; schreibt. Dadurch stoppt ihr die Ausführung an der gewünschten Stelle und erst der Code nach dem switch-Konstrukt wird weiter ausgeführt.

var d = new Date(2017, 6, 30);
var ausgabe = "";
switch (d.getDay()) {
  case 0: ausgabe += "Sonntag"; break;
  case 1: ausgabe += "Montag"; break;
  case 2: ausgabe += "Dienstag"; break;
  default: ausgabe += "Anderer Tag"; break;
}

// So soll's sein
ausgabe;
// => "Sonntag"

Wochentag ermitteln

Auch Programmierer haben oft keine Ahnung, wie sie ein bestimmtes Problem angehen oder eine Technologie verwenden sollten. Deshalb scheut euch nicht, die Suchmaschine eurer Wahl zu benutzen, denn es gibt im Internet viele nützliche Ressourcen.
Für JavaScript ist im Deutschen die Referenz von SelfHTML empfehlenswert, und die selfhtml-Wiki, sowie das Mozilla Developer Network und Referenzen von anderen Browser-Herstellern. Wenn ihr Englisch könnt, habt ihr eine noch viel größere Auswahl an Ressourcen, bspw. StackOverflow.

Multidimensionale Daten

Wenn ihr eine Liste habt, in der jeder Listenpunkt eine eigene Liste ist, wird daraus eine zweidimensionale Liste – eine Tabelle. Sind bei dieser inneren Liste die Listenpunkte ebenfalls Listen, seid ihr schon in der Dreidimensionalität. Dadurch werden mehrdimensionale / multidimensionale Datenstrukturen geschaffen.
Je mehr Daten vorliegen, die miteinander in Beziehung stehen, desto mehr Informationen können aus diesen Daten gewonnen werden und desto bedeutsamer werden die Daten.

Datenbank erstellen

Die grundlegenden Operationen, um eine Datenbank nutzen zu können, sind Erstellen, Auslesen, Ändern und Löschen – auf Englisch: Create, Read, Update und Delete, abgekürzt CRUD.
Konstruktoren sind in JavaScript Funktionen, deshalb heißen sie auch Konstruktorfunktionen.
Innerhalb der Konstruktorfunktion und in Methoden referenziert das Wort this das Objekt, zu dem die Funktion gehört. Dadurch ist es möglich, beim Instanziieren Properties zu definieren, die dann an der Instanz verfügbar sind.

function MyGenericConstructor () {
  // Erstelle ein Property an der Instanz
  this.myGenericKey = "my generic value";
}

var myGenericObject = new MyGenericConstructor();

myGenericObject.myGenericKey
// => "my generic value"

Prototypes

JavaScript ist eine prototypenbasierte Programmiersprache. Jedes Objekt referenziert ein Prototypobjekt. Die Properties, die im Prototyp definiert sind, sind beim Objekt verfügbar, das es referenziert.
Das Prototyp ist eine Property der Konstruktorfunktion. Darüber könnt ihr auf das Prototypobjekt zugreifen und daran Properties definieren oder es auf ein ganz eigenes Objekt setzen.

function Beispiel() {}

// Property im Prototyp definieren
Beispiel.prototype = {
  meinProperty: "Mein Wert"
};

var bsp = new Beispiel();

bsp.meinProperty;
// => "Mein Wert"

Das könnt ihr nutzen, um Properties auszulagern: Bspw. Methoden, die bei allen Instanzen gleich sind und deshalb gemeinsam genutzt werden können, könnt ihr ins Prototypobjekt verschieben.
Das Prototypobjekt lässt sich auch noch im Nachhinein verändern. Werden neue Properties hinzugefügt, stehen die anschließend auch bei bereits zuvor erstellten Instanzen zur Verfügung.

Beispiel.prototype.meinAnderesProperty = 42;

// Das neue Property steht nun bei
// der bereits zuvor erstellten
// Instanz zur Verfügung
bsp.meinAnderesProperty
// => 42

Besitzt sowohl ein Objekt als auch dessen Prototype eine Property mit demselben Namen, wird auf das Property des Objekts zugegriffen, weil immer erst das Objekt nach einem Property abgesucht wird und erst anschließend dessen Prototype.
Gegenüber den prototypenbasierten Sprachen stehen die klassenbasierten. Hier gibt es keine Prototypen, sondern Klassen, aus denen die Instanzen erstellt werden. Die referenzieren dann kein Prototypobjekt, sodass sie nach dem Instanziieren auch nicht verändert werden können.

Skalierbarkeit

Wenn Implementationsdetails eines Moduls von äußeren Zugriffen versteckt werden, wird Komplexität eingekapselt. Eine Schnittstelle ist der Punkt der Interaktion von zwei Entitäten und heißt auf Englisch Interface. Eine Programmierschnittstelle ist eine API, eine Application Programming Interface.
Skalierbarkeit ist, wenn die Leistung eines Systems steigendem Anspruch gerecht wird. Ihr solltet euch beim Entwickeln von Software immer schon Gedanken machen: Wie verhält sich meine Software, je mehr sie genutzt wird? Wenn ihr das durchdenkt, erkennt ihr kritische Stellen schon früh und könnt die noch während der Entwicklung vermeiden, reduzieren oder im Auge behalten.

Vererbung und Prototype-chain

Ein Prototyp kann auch auf ein anderes als ein einfaches Objekt gesetzt werden. Das besondere: Hat das andere Objekt auch ein Prototypobjekt, stehen dessen Properties auch bei der entsprechenden Instanz zur Verfügung. Das ist Vererbung in der Programmierung.

function Beispiel () {}

// Das hier
Beispiel.prototype = {};
// ist das gleiche wie
Beispiel.prototype = new Object();

// Wenn Object instanziiert wird,
// kann auch ein beliebiger anderer
// Konstruktor instanziiert werden
Beispiel.prototype = new Array();

// Die Properties von Array stehen nun
// bei den Instanzen von Beispiel zur
// Verfügung => Sie wurden geerbt
var bsp = new Beispiel();
bsp.push("Tada!");

In JavaScript wird Vererbung darüber realisiert, dass ein Prototypobjekt ein eigenes Prototypobjekt haben kann, das wiederum ein eigenes Prototypobjekt haben kann, und so weiter. Das ist die Prototype chain, die Prototypkette.
Der Prozess, um ein Property innerhalb der Prototypkette zu finden, heißt Property lookup. Haben mehrere Objekte innerhalb der Prototypkette ein gleichnamiges Property, überdeckt das vorderste Property die hinteren, was als Property shadowing bezeichnet wird.
Bei der Vererbung steht am Anfang eine abstrakte Grundlage, von der aus es immer spezifischer wird.

Die Wurzel eines Vererbungsbaumes bildet eine generische Grundlage. Schritt für Schritt wird mit jedem Element im Baum der Zweck spezifischer

typeof, instanceof und null

Der typeof-Operator gibt den Datentyp eines Wertes in Stringform zurück. Die einzige Ausnahme ist null, das ein eigener Datentyp ist, aber laut typeof-Operator ein Objekt ist.

typeof "Hello World";
// => "string"
typeof 42;
// => "number"
typeof null;
// => "object"

null ist wie undefined ein Wert für Nichts und zwar konkret ein Wert, um die Abwesenheit eines Objekts auszudrücken.
Der instanceof-Operator überprüft, ob ein Wert die Instanz einer bestimmten Konstruktorfunktion ist. instanceof liefert auch true zurück, wenn es keine direkte Instanz ist, sondern sich der Konstruktor irgendwo entlang der Prototypkette befindet.

function Foo () {}

function Bar () {}

Bar.prototype = new Foo();

var bar = new Bar();

bar instanceof Bar
// => true
bar instanceof Foo
// => true
bar instanceof Object
// => true

Am Ende einer jeden Prototypkette ist Object, weil alle Objekte von Object erben. Deshalb sind auch alle Objekte instanceof Object, auch Arrays und selbst Funktionen.
Nur nicht null und das, obwohl es laut typeof ein Objekt sein soll.
Wie undefined ist null falsy, aber im Gegensatz zu undefined spielt null in JavaScript kaum eine Rolle. Der einzige Einsatzzweck in der Sprache ist, um das Ende einer Prototypkette zu markieren.

arguments, apply, call und der Debugger

Innerhalb einer Funktion gibt es das arguments-Objekt, das eine Liste mit allen übergebenen Parametern ist. Wie Arrays hat es ein length-Property und Elemente können per Index ausgelesen werden – allerdings ist das Argumenteobjekt kein Array.

function getMeTheseArguments() {
  return arguments;
}

var args = getMeTheseArguments(42, "foo", true, undefined, {});

args.length
// => 5
args[1]
// => "foo"

// Sieht aus wie ein Array, aber
args instanceof Array
// => false

Dadurch ist es möglich, Funktionen so zu schreiben, dass sie eine unbestimmte Anzahl an Parametern entgegennehmen können.

to debug heißt Fehler beseitigen und mit dem debugger-Statement könnt ihr den Debugger eures Browsers aufrufen. Das stoppt die Ausführung eures Codes und ihr könnt alle Anweisungen ab dem Debugger-Statement Zeile für Zeile durchgehen. Das ist praktisch, um nachzuvollziehen, was im Code vor sich geht, und dadurch Fehler zu entdecken.

Das, was this in einer Funktion referenziert, lässt sich verändern. Ihr könnt eine Funktion auf ein beliebiges Objekt anwenden und damit die Referenz von this auf das Objekt setzen, indem ihr die call oder apply-Methode der Funktion nutzt.

function MyConstructor() {
  this.myMethod = function () {
    return this;
  }
}

function MyRandomOtherConstructor() {}

var objA = new MyConstructor();
var objB = new MyRandomOtherConstructor();

objA.myMethod();
// => MyConstructor {myMethod: function}

objA.myMethod.call(objB);
// => MyRandomOtherConstructor {}

Dadurch, dass this verändert werden kann, ist es möglich, dass es nicht immer das referenziert, was es referenzieren soll, was immer wieder eine Ursache für Fehler darstellt.

Der Unterschied zwischen call und apply liegt in der Art wie Funktions­parameter übergeben werden: Bei apply werden die Argumente gesammelt in einer Liste übergeben.

// Unterschied zwischen call und apply
myFn.call(context, param1, param2, param3, …);
myFn.apply(context, [param1, param2, param3, …]);

Die for…in-Schleife

Die Konsole hat eine eigene API: Das Objekt console ist global verfügbar und enthält unter anderem die Funktion log, mit der etwas in der Konsole ausgegeben wird.

console.log("Hallo");
// Ausgabe:
Hallo

Die for…in-Schleife ist nicht für Listen, sondern für Objekte ausgelegt. Sie funktioniert zwar auch bei Listen, aber ist dafür die langsamste Schleife von allen.

Mit der Methode propertyIsEnumerable wird überprüft, ob die for…in-Schleife über ein Property iterieren darf oder nicht. Außerdem geht die for…in-Schleife durch die gesamte Prototypkette und iteriert über sämtliche geerbten Properties. Deswegen ist sie langsamer als die anderen Schleifen und deswegen sollte sie nicht zur Listen­iteration genutzt werden.

Außerhalb von Funktionen referenziert this das globale Objekt. Das ist in Browsern das window-Objekt.
Beim Zugriff auf Properties aus dem window-Objekts braucht ihr nicht window davor zu schreiben.

Die Property document gibt Zugang zu der Webseite, die sich im aktuellen Browserfenster befindet. Darüber könnt ihr die Webseite beliebig verändern und zum Beispiel Elemente entfernen. Alle Änderungen wirken sich übrigens nur in eurem Browserfenster aus, ihr könnt damit also nichts kaputt machen.
Der Zugang auf die Elemente der Webseite ist eine API namens Document Object Model, abgekürzt DOM. Das ist eine Basis für Frontend-Webentwicklung.