GlossarWiki - Benutzerbeiträge [de-formal]

MMProg:WiSe2016:Praktikum:Prüfung

2016-07-11T19:29:07Z

Lawrence: Die Seite wurde neu angelegt: „==Organisatorisches== * Dauer: 3 Stunden * Personalausweis wird benötigt * Liste muss ausgefüllt und unterschrieben werden * Sie dürfen keine Mobiltelefone…“

==Organisatorisches==

* Dauer: 3 Stunden
* Personalausweis wird benötigt
* Liste muss ausgefüllt und unterschrieben werden
* Sie dürfen keine Mobiltelefone und kein mitgebrachtes Material nutzen
* Sie dürfen sich nicht mit anderen Prüflingen unterhalten
* Falls Sie versuchen nachträglich in Ihr Prüfungsverzeichnis zu commiten, sind Sie durchgefallen
* Die Prüfung besteht aus 2 Teilen (teil1 und teil2)
* Die Beschreibungen sind jeweils in "index.md"-Dateien zu finden
* '''Auf den Laborrechnern ist nur Firefox installiert, kein Chrome!'''

==Start der Prüfung==

* Terminal vom Schreibtisch aus öffnen
* Im Terminal den Befehl "./setupenv.sh RZ-Kennung" mit eigener RZ-Kennung ausführen
* Das eigene RZ-Passwort eingeben falls aufgefordert
* WebStorm vom Schreibtisch aus öffnen
* In WebStorm das Verzeichnis "repository" auf dem Schreibtisch öffnen
* Im Projektbaum in WebStorm zum Verzeichnis "pruefung_20160712" navigieren
* Dort die Datei "index.md" öffnen und '''alles durchlesen'''
* Anschließend Teil 1 und Teil 2 der Prüfung bearbeiten

JavaScript-Tutorium:Physics

2015-10-22T20:48:58Z

Lawrence:

=Physics=

Unter Physics versteht man in der Informatik die Simulation physikalischer Gesetze wie Geschwindigkeit und Erdanziehung.
In der Spieleprogrammierung werden Physics verwendet um Spielmechaniken natürlicher wirken zu lassen.

Dieses Tutorium erklärt simple Formeln und Berechnungen für die Entwicklung von Simulationen in JavaScript.

==Allgemeines==

===Zugehörigkeit===

Bei einer Modellierung nach Model-View-Controller stellt sich die Frage wo der Code für physikalische Simulationen hingehört.
Versteht man das Model so, dass es neben den Daten auch die Logik enthält, so schliesst dies den Physics-Code eindeutig ein.
Die Gegebenheit, dass ein Spiel physikalischen Gesetzen folgt, kann also wie jede andere Regel des Spiels verstanden werden.

===Abstrakte Einheiten===

Gegebenenfalls ist es sinnvoll ein Koordinatensystem einzuführen und Spielelemente mit Dimensionen zu versehen.

<source lang="javascript">
var Player = function(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
};
</source>

Wichtig ist dabei, dass diese Einheiten keinen direkten Bezug zu Pixel haben.

Sollen das Model und die View mit unterschiedlichen Zahlensystem arbeiten, kann ein Skalierungsfaktor verwendet werden.

<source lang="javascript">
var renderPlayer = function(player, scaleFactor) {
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.backgroundColor = '#F00';
div.style.width = player.width * scaleFactor + 'px';
div.style.height = player.height * scaleFactor + 'px';
div.style.left = player.x * scaleFactor + 'px';
div.style.top = player.y * scaleFactor+ 'px';
document.querySelector('body').appendChild(div);
};

var player1 = new Player(10, 10, 10, 10);
renderPlayer(player1, 5);
</source>

Selbst Spiele wie "Tic Tac Toe" arbeiten mit Koordinatensystemen, oftmals vereinfacht als multidimensionales Array dargestellt.

<source lang="javascript">
var TicTacToe = function() {
this._spielfeld = [
['', '', ''],
['', '', ''],
['', '', '']
];
};
</source>

===Welt und Elemente===

Innerhalb einer Physics-Simulation ist es sinnvoll das Modell in eine Welt und deren enthaltenen Elemente aufzuteilen.

<source lang="javascript">
var Element = function(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
};
</source>

Dabei kapseln Elemente ihre physikalischen Eigenschaften, während die Welt regelmäßig ihre Berechnungen auf diese anwendet.

Die Berechnungen werden mithilfe von eigenständigen Timern durchgeführt, ähnlich wie beim Rendering.

<source lang="javascript">
var World = function(elements) {
var self = this;
self._elements = elements;

self._updateElements = function() {
for (var i = 0; i < self._elements.length; i++) {
// TODO: Your code goes here
}
};

self._updateElementsRepeatedly = function() {
self._updateElements();
setTimeout(self._updateElementsRepeatedly, 15);
};
self._updateElementsRepeatedly();
};
</source>

==Ortsänderungen==

Nahezu jedes Spiel, welches eine physikalischen Simulation beinhaltet, arbeitet mit der Veränderung vom Ort einzelner Elemente.

===Geschwindigkeit===

Eine simple Simulation von Geschwindigkeit kann bereits erreicht werden indem man die Koordinaten von Objekten verändert.

<source lang="javascript">
self._updateElements = function() {
for (var i = 0; i < self._objects.length; i++) {
self._objects[i].x += 1;
self._objects[i].y += 1;
}
};
</source>

Mithilfe von Geschwindigkeitsattributen können Objekte selbst entscheiden wie sich ihre Koordinaten verändern.

<source lang="javascript">
var Element = function(x, y) {
this.x = x;
this.y = y;
this.vx = 0;
this.vy = 0;
}

var element = new Element(0, 0);
element.vx = 1;
element.vy = 1;
</source>

<source lang="javascript">
self._updateElements = function() {
for (var i = 0; i < self._elements.length; i++) {
self._elements[i].x += self._elements[i].vx;
self._elements[i].y += self._elements[i].vy;
}
};
</source>

'''Anmerkung:''' Es ist Konvention Geschwindigkeitsattribute mit einem "v" zu versehen, welches für "Velocity" steht.

Verknüpft man die Steuerung der Geschwindigkeitswerte mit dem Keyboard erreicht man eine einfache Spielersteuerung.

<source lang="javascript">
var Controller = function(element) {
document.addEventLister('keydown', function(event) {
if (event.keyCode == 37) {
element.vx = -0.5;
}
if (event.keyCode == 39) {
element.vx = 0.5;
}
});
document.addEventLister('keyup', function() {
element.vx = 0;
});
};
</source>

===Beschleunigung===

Neben der Geschwindigkeit ist die Beschleunigung ein weiterer wichtiger Faktor für physikalische Simulationen in Spielen.

<source lang="javascript">
var Element = function(x, y) {
this.x = x;
this.y = y;
this.vx = 0;
this.vy = 0;
this.ax = 0;
this.ay = 0;
}

var element = new Element(0, 0);
element.vx = 1;
element.ay = .1;
</source>

Beschleunigung verhält sich zu Geschwindigkeit wie Geschwindigkeit zu Ort, also eine konstante Änderung der Geschwindigkeit.

<source lang="javascript">
self._updateElements = function() {
var element = null;
for (var i = 0; i < self._elements.length; i++) {
var element = self._elements[i];
element.vx += element.ax;
element.vy += element.ay;
element.x += element.vx;
element.y += element.vy;
}
};
</source>

===Erdanziehung===

Ein häufiger Einsatzzweck der Beschleunigung ist die vereinfachte Simulation einer global angewendeten Erdanziehungskraft.

<source lang="javascript">
self._gy = 0.1;
self._updateElements = function() {
var element = null;
for (var i = 0; i < self._elements.length; i++) {
element = self._elements[i];
element.vx += element.ax;
element.vy += element.ay + self._gy;
element.y += element.vy;
element.y += element.vy;
}
};
</source>

===Unbewegliche Objekte===

Häufig gibt es in Simulationen auch unbewegliche Objekte welche nicht von Ortsänderungen betroffen sein sollen.
Diese können einfach mit einer boolschen Eigenschaft versehen werden welche dann in der Welt abgefragt wird.

<source lang="javascript">
self._updateElements = function() {
var element = null;
for (var i = 0; i < self._elements.length; i++) {
element = self._elements[i];
if (!element.isImmovable) {
element.vx += element.ax;
element.vy += element.ay + self._gy;
element.y += element.vy;
element.y += element.vy;
}
}
};
</source>

==Kollisionen==

In vielen Spielen ist es das Ziel mit dem Spieler bestimmte Elemente zu treffen und anderen Elementen wiederum auszuweichen.
Diese Gegebenheit lässt sich in der Regel mittels vereinfachter Kollisionserkennung und Kollisionauflösung umsetzen.

===Begrenzungen===

Ein spezielles Element mit dem der Spieler in fast jedem Spiel kollideren kann ist die Welt selbst bzw. deren Begrenzung.
Da es sich normalerwise um eine rechteckige Begrenzung handelt kann leicht überprüft werden ob eine Kollision stattfindet.
Darf der Spieler die Welt nicht verlassen so können seine physikalischen Attribute einfach entsprechend angepasst werden.

<source lang="javascript">
if (element.x < 0) {
element.x = 0;
element.vx = element.ax = 0;
}
if (element.x + element.width > self._width) {
element.x = self._width - element.width;
element.vx = element.ax = 0;
}
if (element.y < 0) {
element.y = 0;
element.vy = element.ay = 0;
}
if (element.y + element.height > self._height) {
element.y = self._height - element.height;
element.vy = element.ay = 0;
}
</source>

'''Tipp:''' Man sollte ebenso darauf achten die x- und y-Position des mit der Welt kollidierenden Elements anzupassen.

===Kollisionserkennung===

Eine Möglichkeit um Kollisionen zwischen Objekten zu erkennen ist die Verwendung von "Bounding Boxes".
Dabei berechnet man für jedes Objektes das kleinst mögliche Rechteck und verwendet dies zur Kollisionserkennung.
Die Berechnung um festzustellen ob sich zwei nicht gedrehte Rechtecke überschneiden gestaltet ist sehr einfach.

<source lang="javascript">
self._areElementsColliding = function(a, b) {
if ((a.x > b.x + b.width) || (b.x > a.x + a.width)) {
return false;
}
else if ((a.y > b.y + b.height) || (b.y > a.y + a.height)) {
return false;
}
return true;
};
</source>

Ebenso ist die Kollisionserkennung für zwei Kreisformen relativ einfach zu berechnen.
Kombiniert man jedoch Kreise und Rechtecke erhöht sich die Komplexität aufgrund der Fallunterscheidungen.
Es ist empfehlenswert Kreise ebenfalls als Rechtecke aufzufassen solange keine exakte Erkennung notwendig ist.

Für die Kollisionserkennung aller Elemente innerhalb einer Welt kann man eine verschachtelte <code>for</code>-Schleife nutzen.

<source lang="javascript">
self._detectCollisions = function() {
var a = null, b = null;
for (var i = 0; i < self._elements.length - 1; i++) {
a = self._elements[i];
for (var j = i + 1; j < self._elements.length; i++) {
b = self._elements[j];
// TODO: Your code goes here
}
}
};
</source>

Auf diese Weise wird jede mögliche Zweierkombination von Elementen garantiert auch nur einmal durchlaufen.

===Kollisionstiefe===

Um zu wissen aus welcher Richtung die Elemente sich angenähert haben kann die Kollisionstiefe der Achsen berechnet werden.

<source lang="javascript">
self._getCollisionDepth = function(a, b) {
var xValues = [a.x, a.x + a.width, b.x, b.x + b.width];
var yValues = [a.y, a.y + a.height, b.y, b.y + b.height];
var sort = function(firstValue, secondValue) {
return firstValue - secondValue;
};
xValues.sort(sort);
yValues.sort(sort);
return {
x: xValues[2] - xValues[1],
y: yValues[2] - yValues[1]
};
};
</source>

Beträgt die x-Tiefe einen niedrigeren Wert als die y-Tiefe nähern sich die Elemente horizontal an, im anderen Fall vertikal.
Bei einer horizontalen Annäherung zweier Elemente bezeichnet man die y-Achse als die Kollisionsachse, andernfalls die x-Achse.

<source lang="javascript">
var collisionDepth = self._getCollisionDepth(a, b);
var collisionAxis = collisionDepth.x < collisionDepth.y ? 'y' : 'x';
</source>

===Reaktion auf Kollision===

Abhängig davon welche Elemente wie kollidieren und welche Spielregeln existieren kann es unterschiedliche Reaktionen geben.

====Umkehrung von Geschwindigkeit====

Bei beweglichen Elementen in einer Kollision ist es sinnvoll die Geschwindigkeitsanteile entlang der Kollisionsachse umzukehren.

<source lang="javascript">
var collisionDepth = self._getCollisionDepth(a, b);
var collisionAxis = collisionDepth.x > collisionDepth.y ? 'y' : 'x';
if (collisionAxis == 'y') {
a.vx *= -1;
b.vx *= -1;
}
else {
a.vy *= -1;
b.vy *= -1;
}
</source>

'''Beispiel:'''

Ein Ball fliegt mit einer Geschwindigkeit vx von 2 und vy von 1, also nach rechts unten, gegen ein unbewegliches Hindernis unter ihm.
Für die Kollisionstiefe ergibt sich im x-Anteil einen größeren Wert als für y, dementsprechend ist x die Kollisionsachse.

Der y-Anteil der Geschwindigkeit vom Ball wird umgekehrt auf -1, sodass der Ball sich weiter nach rechts oben bewegt.
Die Geschwindigkeit des Hindernisses braucht nicht umgekehrt werden, da es sich um ein unbewegliches Element handelt.

====Auflösung von Kollision====

Die Umkehrung der Geschwindigkeitsanteile führt in der Regel dazu, dass sich die Kollision wieder von selbst auflöst.
Sollen die Elemente jedoch angehalten werden, muss die entstandene Überschneidung rückgängig gemacht werden.
Dazu werden die Elemente je nach ihrer Geschwindigkeit und Beweglichkeit um Anteile der Kollisionstiefe auseinander gezogen.

<source lang="javascript">
var collisionDepth = self._getCollisionDepth(a, b);
var collisionAxis = collisionDepth.x > collisionDepth.y ? 'y' : 'x';
if (collisionAxis == 'y') {
if (a.vx > 0) {
a.x -= (collisionDepth.x / 2);
b.x += (collisionDepth.x / 2);
}
else {
a.x += (collisionDepth.x / 2);
b.x -= (collisionDepth.x / 2);
}
}
else {
if (a.vy > 0) {
a.y -= (collisionDepth.y / 2);
b.y += (collisionDepth.y / 2);
}
else {
a.y += (collisionDepth.y / 2);
b.y -= (collisionDepth.y / 2);
}
}
</source>

Gibt es nur ein bewegliches Element wird nur dieses um die Kollisionstiefe entgegen der Geschwindigkeitsrichtung zurückbewegt.

<source lang="javascript">
var collisionDepth = self._getCollisionDepth(a, b);
var collisionAxis = collisionDepth.x > collisionDepth.y ? 'y' : 'x';
if (collisionAxis == 'y') {
if (a.isImmovable) {
b.x += b.vx > 0 ? -collisionDepth.x : collisionDepth.x;
}
else if (b.isImmovable) {
a.x += a.vx > 0 ? -collisionDepth.x : collisionDepth.x;
}
}
else {
if (a.isImmovable) {
b.y += b.vy > 0 ? -collisionDepth.y : collisionDepth.y;
}
else if (b.isImmovable) {
a.y += a.vy > 0 ? -collisionDepth.y : collisionDepth.y;
}
}
</source>

====Ereignisse====

Unabhgängig davon wie und ob auf Kollisionen reagiert wird ist es sinnvoll bei jeder Kollision ein Ereignis zu erzeugen.
Auf diese Weise können anderen Programmkomponenten diese Information zu verarbeiten und z.B. visuell darzustellen.

'''Tipp:''' Nutzen Sie den <code>EventDispatcher</code> um Ereignisse zu erzeugen wenn Kollisionen auftreten.

MMProg:WiSe2015:Praktikum:Aufgabe 9

2015-10-22T19:44:56Z

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 9= ==Physics== ===Ziel=== Ziel dieser Aufgabe ist es einfache physikalische Berechnungen innerhalb vom Model einer MVC-Anwendung zu imple…“

=Praktikumsaufgabe 9=

==Physics==

===Ziel===

Ziel dieser Aufgabe ist es einfache physikalische Berechnungen innerhalb vom Model einer MVC-Anwendung zu implementieren.
Orientieren Sie sich für die Berechnungen an dem in der Vorlesung behandelten
[http://glossar.hs-augsburg.de/JavaScript-Tutorium:Physics Tutorium] für Physics in JavaScript.

===Vorbereitung===

Erzeugen Sie einen neuen Ordner namens "aufgabe9" innerhalb Ihres Verzeichnis für die Praktikumsaufgaben.
Speichern Sie alle Dateien aus dem Vorlagenordner "aufgabe9/vorlage" in diesem Ordner ab.

Die Vorlage enthält eine nach MVC modellierte Anwendung, welche Elemente nach einfach physikalischen Gesetzen bewegen soll.
Den gesamten Code für die Berechnungen im Model sowie für die Spielersteuerung im Controller müssen Sie selbst implementieren.
Suchen Sie in "index.js", "World.js", "GameController.js" und "PlayerKeyboardController.js" nach den "TODO"-Kommentaren.

===Geschwindigkeit===

Erweitern Sie die physikalische Welt so, dass alle Elemente bei jeder Neuberechnung ihre x- und y-Position um 0.5 verändern.
Dies führt dazu, dass sich das grüne Objekt mit einer konstanten Geschwindigkeit nach rechts unten bewegt.

Verändern Sie die Berechnung nun so, dass alle Elemente ihre Position immer um ihre jeweilige Geschwindigkeit verändern.
Weisen Sie dem Element "player" in der Datei "index.js" eine x-Geschwindigkeit (vx) und y-Geschwindigkeit (vy) von 0.5 zu.
Dies führt zu dem gleichen Ergebnis mit dem Unterschied, dass das Element definiert welche Geschwindigkeit es hat.

===Keyboard-Steuerung===

Entfernen Sie die Zuweisung einer festen Geschwindigkeit für das Element "player" wieder aus der Datei "index.js."
Erweitern Sie den <code>PlayerKeyboardController</code> so, dass "player" bei bestimmten Events folgende Geschwindigkeiten zugewiesen werden:

* Beim Runterdrücken der linken Cursortaste eine "vx" von 1.0
* Beim Runterdrücken der rechten Cursortaste eine "vx" von 1.0
* Beim Loslassen der linken oder rechten Cursortaste eine "vx" 0.0

Dies führt dazu, dass der Spieler / das grüne Rechteckt nun mithilfe der Cursortasten gesteuert werden kann.

===Beschleunigung===

Erweitern Sie die physikalische Welt so, dass alle Elemente ihre Geschwindigkeit immer um ihre Beschleunigung verändern.
Weisen Sie dann dem Element "player" in der Datei "index.js" eine vertikale Beschleunigung von 0.05 zu.
Dies führt dazu, dass das Spielerobjekt konstant nach unten beschleunigt und bald daraufhin das Spielfeld verlässt.

Entfernen Sie die Zuweisung einer festen Beschleunigung für das Element "player" wieder aus der Datei "index.js."
Erweitern Sie die Welt so, dass alle Elemente ihre Geschwindigkeit zusätzlich um die globale Beschleunigung verändern.

'''Tipp:''' Die globale Beschleunigung wird innerhalb der Welt in den Eigenschaften "_ax" und "_ay" gespeichert.
Dies führt zu dem gleichen Ergebnis mit dem Unterschied, dass nun die Welt eine Erdanziehungskraft aufweist.

===Begrenzungen===

Implementieren Sie die Funktion "_keepElementsInsideWorld" so, dass Elemente die Begrenzungen der Welt nicht verlassen können.
Stellen Sie dazu im ersten Schritt fest ob eine horizontale oder vertikale Überschreitung der Begrenzung vorliegt.
Ist dies der Fall setzen Sie die entsprechenden Geschwindigkeits- und Beschleunigungsanteile auf null zurück.
Stellen Sie im zweiten Schritt sicher, dass die x- bzw. y-Position bei entsprechender Überschreitung auch korrigiert wird.

Dies führt dazu, dass der Spieler am unteren Boden belibt und die Welt weder nach links noch rechts verlassen kann.

===Springen===

Erweitern Sie den <code>PlayerKeyboardController</code> so, dass der Spieler durch Druck auf die Leertase eine vy von -7.5 erhält.
Dies soll aber nur dann geschehen, wenn die vertikale Geschwindigkeit des Spielers nicht bereits unter 0 ist.

Die Erweiterung führt dazu, dass man den Spieler nun mithilfe der Tastatursteuerung springen lassen kann.
Bei mehrfachem Drücken der Leertaste kann der Spieler immer höher springen.

===Plattform===

Erweitern Sie die Welt zunächst so, dass alle Elemente mit Eigenschaft "isImmovable" auf <code>true</code> ihre Position nie verändern.

Erzeugen Sie ein Element namens "platform" in der Datei "index.js" mit Koordinaten (200, 200) und Dimensionen (200, 20).
Weisen Sie dem Element außerdem nach seiner initialen Erstellung für die Eigenschaft "isImmovable" den Wert <code>true</code> zu.
Fügen Sie es dann sowohl der Welt hinzu mittels <code>addElement()</code> als der SVG-View durch von Aufruf von <code>addObjectView()</code>.

Dies führt dazu, dass ein weiteres Objekt in der Welt erscheint welches sich allerdings nicht Objekt.

===Kollisionserkennung===

Erweitern Sie nun die Welt so, dass sie alle Elemente in effizienter Weise darauf überprüft, ob sie miteinander kollidieren.
Findet eine Kollision statt wird die Kollisionstiefe mithilfe der Funktion <code>_getCollisionDepth()</code> festgestellt.
Auf Basis der zurückgelieferten x- und y-Anteile der Kollisionstiefe wird zunächst die Kollisionsachse ermittelt werden.
Handelt es sich um die y-Achse werden die x-Geschwindigkeiten der Elemente umgekehrt, bei der x-Achse die y-Geschwindigkeiten.

'''Tipp:''' Lagern Sie den Code für die Reaktion auf eine Kollision in eine Funktion aus, z.B. mit dem Namen <code>_solveCollision()</code>.

Dies führt dazu, dass der Spieler auf die Platform springen kann und dort automatisch auf und ab springt.

===Kollisionsverarbeitung===

Erweitern Sie die Kollisionauflösung der Welt so, dass sie folgendes Verhalten für zwei Elemente aufweist (genannt a und b):

* falls y die Kollisionsachse ist, wird vx von a und b umgekehrt
* falls x die Kollisionsachse ist und
* a unbweglich ist und b.vy > 0 ist wird b.y um die Kollisionstiefe verringert und b.vy auf 0 gesetzt
* b unbweglich ist und a.vy > 0 ist wird a.y um die Kollisionstiefe verringert und a.vy auf 0 gesetzt
* keine der beiden oberen Fälle eintritt werden die vy von a und b umgekehrt

Dies führt dazu, dass der Spieler oben auf der Platform stehen bleibt und von unten wieder von der Platform abprallt.

===Events===

Erweitern Sie nun die Kollisionserkennung so, dass bei jeder Kollision ein Ereignis namens "collision" erzeugt wird.
Erweitern Sie den <code>GameController</code> so dass bei jeder Platformkollision die y-Position der Platform um .25 erhöht wird.

Dies führt dazu, dass wenn der Spieler auf der Platform steht diese sich konstant langsam nach unten bewegt.

MMProg:WiSe2015:Praktikum:Aufgabe 8

2015-10-22T19:44:14Z

Lawrence:

=Praktikumsaufgabe 8=

==Model-View-Controller==

===Ziel===

Ziel dieser Aufgabe ist es einen einarmigen Banditen nach dem
[http://glossar.hs-augsburg.de/Model-View-Controller-Paradigma Model-View-Controller-Paradigma] zu programmieren.

===Vorbereitung===

Erzeugen Sie einen neuen Ordner namens "aufgabe8" innerhalb Ihres Verzeichnis für die Praktikumsaufgaben.
Speichern Sie alle Dateien aus dem Lehveranstaltungsordner "aufgabe8/vorlage" in diesem Ordner ab.

Die Vorlage enthält die Verzeichnisstruktur, die fertige HTML-Datei, die "EventDispatcher"-Klasse und die fertige Hauptdatei.
Es gilt den gesamten Code für das Model, die View und den Controller zu entwickeln.

Nutzen Sie die Code-Beispiele in den folgende Abschnitten um zu überprüfen ob Ihre Implementierungen korrekt sind.
Untersuchen Sie außerdem die Beispiele aus der Vorlesung unter "aufgabe8/beispiele" falls Sie nicht weiterkommen.

===Model===

Das Modell des einarmigen Banditen setzt sich aus den beiden Komponenten "Slot" und "SlotMachine" zusammen.

'''Tipp:''' Lassen Sie die Event-Kommunikation und die asynchrone Funktionsweise im ersten Schritt der Implementierung aus.

====Slot====

"Slot" repräsentiert ein Feld welches eine Menge an möglichen Werten vorhält und stets einen dieser Werte annimmt.
Die Menge an möglichen Werten wird bei der Erzeugung eines Felds als Argument an den Konstruktor übergeben.

Mithilfe der Funktion "spin()" wird das Feld '''asynchron''' zufällig oft gedreht und nimmt immer wieder einen zufälligen Wert an.
Nutzen Sie einen JavaScript-Timer (z.B. <code>setTimeout</code>) um das wiederholte asynchrone Drehen zu implementieren.

Bei jeder Drehung des Felds wird das Ereignis "spin" erzeugt.
Wenn das Feld aufhört sich zu drehen wird das Ereignis "stop" erzeugt.
Als Daten für die beiden Ereignisse wird der jeweils aktuell angenommene Wert des Feldes mit übergeben.

'''Anmerkungen:'''
- Nutzen Sie die Hilfsklasse "EventDispatcher" aus der Vorlage für die Event-Kommunikation.
- Nutzen Sie <code>Math.random()</code> um einen zufälligen Wert zu erzeugen oder zufällig eine Entscheidung zu treffen.

Folgender Code sollte dann ein Feld erzeugen und zufällig häufig den neuen Wert ausgeben und abschließend einmal den finalen:

<source lang="javascript">
var slot = new Slot(['red', 'green', 'blue']);
slot.eventDispatcher.addEventListener('spin', function(event) {
console.log('Neuer Wert: ' + event.detail);
});
slot.eventDispatcher.addEventListener('stop', function(event) {
console.log('Finaler Wert: ' + event.detail);
});
slot.spin();
</source>

====SlotMachine====

"SlotMachine" repräsentiert eine Sammlung einer variablen Anzahl an Feldern und einer Menge an möglichen Werten für diese.
Die Anzahl der Felder und die Menge der möglichen Werte werden bei der Erzeugung als Argument an den Konstruktor übergeben.

Die "SlotMachine" erzeugt anhand der gegebenen Anzahl automatisch die einzelnen Felder und verwaltet diese intern.
Mithilfe der Funktion "spin()" wird die Funktion "spin()" von jedem in der Sammlung enthaltenen Feld augerufen.

Die "SlotMachine" hört auf jedes "spin"-Ereignis der Felder und erzeugt selbst daraufhin ein eigenes "spin"-Ereignis.
Haben alle enhtaltenen Felder das "stop"-Ereignis erzeugt, erzeugt die "SlotMachine" ebenso ein finales "stop"-Ereignis.
Die beiden Ereignisse übergeben als Daten jeweils alle aktuellen Werte der enthaltenen Felder als Liste.

Folgender Code sollte drei Felder erzeugen und für jede Drehung jedes Felds und einmal abschließend alle Werte ausgeben.

<source lang="javascript">
var slotMachine = new SlotMachine(3, ['red', 'green', 'blue']);
slotMachine.eventDispatcher.addEventListener('spin', function(event) {
console.log('Neue Werte: ' + event.detail);
});
slotMachine.eventDispatcher.addEventListener('stop', function(event) {
console.log('Finale Werte: ' + event.detail);
});
slotMachine.spin();
</source>

===View===

Es wird empfohlen, dass Sie in den folgenden Abschnitten die SVG-API nutzen um die Views zu implementieren.
Möchten Sie DOM nutzen müssen Sie die "index.js" geringfügig ändern und die Views entsprechend anders benennen.
Analog zu dem Modell besteht die View des einarmigen Banditen aus den zwei Komponenten "SlotSVGView" und "SlotMachineSVGView".

====SlotSVGView====

Eine "SlotSVGView" erzeugt für ein Feld ein rechteckige Repräsentation welche bei jedem neu angenommenen Wert die Farbe wechselt.
Das bedeutet, dass solch eine View die beiden Ereignisse "spin" und "stop" verarbeiten und entsprechend anzeigen muss.

Folgender Code sollte für ein Feld ein Rectheck erzeugen welches beim Drehen des Felds zufällig oft seine Farbe wechselt.

<source lang="javascript">
var slot = new Slot(['red', 'green', 'blue']);
var slotView = new SlotSVGView(slot);
document.querySelector('body').appendChild(slotView);
slot.spin();
</source>

'''Tipp:''' Nutzen Sie Namen von Farben wie zum Beispiel "black" als mögliche Werte für Felder um das Rendering zu vereinfachen.

====SlotMachineSVGView====

Eine "SlotMachineSVGView" ist das View-Gegenstück zu einer "SlotMachine", d.h. sie visualisiert eine Sammlung von Feldern.
Bei der Erzeugung einer solchen View wird für jedes darzustellende Feld eine eigene "SlotMachineSVGView" erzeugt.

Folgender Code sollte für eine Sammlung von drei Feldern drei Rechtecke darstellen, welche Ihre Farbe wechseln.

<source lang="javascript">
var slotMachine = new SlotMachine(3, ['red', 'green', 'blue']);
var slotMachineView = new SlotMachineSVGView(slotMachine);
document.querySelector('body').appendChild(slotView);
slotMachine.spin();
</source>

===Controller===

Der Controller-Teil besteht aus der Komponente "SlotMachineController", welche lediglich das Model kennen muss.

Bei einem "click"-Ereignis auf dem Button mit der ID "spin-button" wird "spin()" auf der "SlotMachine" aufgerufen.
Mithilfe von <code>setAttribute()</code> wird dem Attribut "disabled" auf dem Button der Wert "disabled" zugewiesen.
Auf diese Weise wird der Button deaktiviert und kann nicht nochmal gedrückt werden, solange sich die Felder drehen.
Außerdem wird dem Attribut "innerHTML" auf dem Element mit der ID "result-text" der Text "Drehen..." zugewiesen.

Sobald die "SlotMachine" das "stop"-Ereignis erzeugt, überprüft der Controller ob der Spieler das Spiel gewonnen hat.
Sind alle Felder wertegleich wird dem "innerHTML" des Elements mit der ID "result-text" der Wert "Gewonnen!" zugewiesen.
Ist dies nicht der Fall wird der Wert "Verloren!" zugewiesen, um zu signalisieren, dass der Spieler verloren hat.

===Spiel testen===

Wurde alles korrekt implementiert, können Sie nun den einarmigen Banditen benutzen.

JavaScript-Tutorium:Browser

2015-10-22T19:16:04Z

Lawrence: /* Timer */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten bei der JavaScript-Entwicklung im Browser zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Einführung=

==Native vs. Host==

In einer JavaScript-Umgebung existieren zwei Arten von Objekte.
'''Native Objekte''' werden von der Engine bereitgestellt und sind durch den ECMAScript-Standard abgedeckt.
'''Host-Objekte''' sind nicht immer standardisiert und werden von der Umgebung bereitgestellt.
Im Browser handelt es sich bei Host-Objekten um Schnittstellen für den Zugriff auf den Browser und externe Geräte.

==HTML5-Standard==

Obwohl es den ECMAScript-Standard gibt, muss man davon ausgehen,
dass sich die verfügbaren APIs von Browser zu Browser unterscheiden können.
Durch die steigende Entwicklungsgeschwindigkeit der Browser-Hersteller und den
[https://html.spec.whatwg.org/multipage/ HTML5-Standard] verbessert sich diese Situation.

Heutzutage kann man davon ausgehen, dass jeweils die neuesten Versionen von Firefox und Chrome
die DOM-API und viele der neu verfassten HTML5-APIs bereits standardkonform unterstützen.

==Inline Code vs. externe Dateien==

Eine im Browser angezeigte Web-Seite besteht meist aus HTML, CSS und JavaScript, wobei nur HTML zwingend verlangt ist.
Der JavaScript-Code kümmert sich normalerweise um die dynamischen Aspekte, wie Interaktionen und das Nachladen von Inhalten.

Der Browser lädt ein HTML-Dokument unter der angegebenen URL herunter und evaluiert dieses.
Das Dokument enthält optional Verweise auf CSS-Dateien, Bilder, JavaScript-Dateien und andere Medien.
Neben Verweisen auf externen JavaScript-Code kann das Dokument auch Inline-Code enthalten.
Ob es sich um externe Dateien oder Inline-Code handelt wirkt sich auf die Ladezeiten aus,
der Code selbst wird davon nicht beeinflusst.

'''Anmerkung:''' Die Reihenfolge der eingebunden Code-Blöcke und angegebenen Dateiverweise ist wichtig,
da diese ebenso die Reihenfolge der Code-Ausführung darstellt.

==JavaScript-Kontext==

Für jede Web-Seite, unabhängig davon ob sie im separaten Fenster oder als Tab angezeigt wird,
erzeugt der Browser einen separaten isolierten JavaScript-Kontext, in dem Code ausgeführt wird.
Das bedeutet, dass alle Objekte und Funktionen nur so lange existieren bis die Seite neu geladen oder verlassen wird.
Ein Zugriff auf andere Seiten ist aus Sicherheitsgründen nicht erlaubt.

=Window=

Das globale Objekt <code>window</code> referenziert alle im Browser verfügbaren Objekte und Werte als Eigenschaften (native und host).

<source lang="javascript">
console.log(window.Object);
console.log(window.XMLHttpRequest);
</source>

Für den Zugriff auf globale Eigenschaften ist es nicht notwendig explizit <code>window</code> zu schreiben.

<source lang="javascript">
console.log(Date == window.Date);
console.log(new Date());
</source>

Alle nicht innerhalb von Funktionen deklarierten Variablen werden automatisch an das globale Objekt angehängt.

<source lang="javascript">
var globaleVariable = 'global';
var globaleFunktion = function() {};
console.log(window.globaleVariable);
console.log(window.globaleFunktion);
</source>

==Modifikation von Eigenschaften==

Da es sich um ein normales Objekt handelt können die meisten Eigenschaften modifiziert und auch gelöscht werden.

'''Anmerkung:''' Veränderungen von globalen Eigenschaften sind nicht sinnvoll und können schwerwiegende Fehler verursachen.

<source lang="javascript">
window.Object = {};
var objekt = new Object();

delete window.Array;
var array = new Array();
</source>

Das <code>window</code>-Objekt wird vom Browser mithilfe der Konstruktorfunktion <code>Window</code> erzeugt, welche auch global verfügbar ist.

<source lang="javascript">
console.log(window.constructor == window.Window);
</source>

==Popups und Frames==

Neben dem globalen Fenster-Objekt kann eine Web-Seite beliebig viele weitere <code>window</code>-Objekte enthalten.
Dabei handelt es sich dann entweder um durch Code erzeugte Popups oder aber um Frames (besser bekannt als iframes).

<source lang="javascript">
window.open('https://www.google.com', 'Google im Popup', 'width=400,height=300,resizable=yes');
</source>

Frames können entweder durch das entsprechende HTML oder aber auch wie im Code gezeigt programmatisch erzeugt werden.

==Browser-Schnittstellen==

Abgesehen von den nativen Objekten notwendigen Objekte enthält <code>window</code> wichtige Browser- und Geräte-Schinttstellen.
Dazu zählen zum Beispiel Funktionen um Dialoge im Browser zu öffnen oder aber sogar um Game-Controller zu verwenden.

<source lang="javascript">
var name = window.prompt('Wie ist Ihr Name?');
window.alert('Hello ' + name);
window.alert('Die aktuelle Seite ist ' + window.innerWidth + 'px breit');

console.log(window.Gamepad);
</source>

Eine komplette Liste der verfügbaren Eigenschaften finden Sie auf
[https://developer.mozilla.org/de/docs/DOM/window dieser] MDN-Seite.
In den folgenden Abschnitten werden exemplarisch ein paar wichtige Objekte im Detail beschrieben.

=Beispiel für Browser-Schnittstellen=

==Location==

<code>location</code> ist ein globales Objekt welches die aktuelle URL und ihre Bestandteile enthält und diese auch verändern kann.
Das Objekt wird analog zum <code>window</code>-Objekt mithilfe der Konstruktorfunktion <code>Location</code> erstellt.

<source lang="javascript">
console.log(window.location.constructor == window.Location);
</source>

===Abfragen der URL===

Die Eigenschaft <code>href</code> enhtält die gesamte aktuelle URL. Alternativ kann auch <code>location.toString()</code> genutzt werden.

<source lang="javascript">
console.log(location.href);
console.log(location.toString());
</source>

Um einzelne Bestandteile der URL ermitteln zu können werden viele separate Eigenschaften bereitgestellt.

<source lang="javascript">
console.log(location.protocol);
console.log(location.host);
console.log(location.port);
console.log(location.pathname);
console.log(location.hash);
</source>

===Verändern der URL===

Diese Eigenschaften können nicht nur lesend genutzt werden, sondern auch um Änderungen an der aktuellen URL vorzunehmen.

Mit der Ausname von <code>location.hash</code> führen Änderungen der Eigenschaften zum Verlassen der aktuellen Seite.

<source lang="javascript">
location.protocol = 'http';
location.port = '8080';
location.hash = '#anker';
location.href = 'https://www.google.com';
</source>

Des Weiteren gibt es ein paar Funktionen um die URL zu modifizieren oder aber die Seite neuzuladen:</source>

<source lang="javascript">
location.assign('https://www.google.com');
location.reload(true);
</source>

==History==

Das globale <code>history</code>-Objekt ermöglicht den programmatischen Zugriff auf den Browser-Verlauf.
Es werden Funktionen zur Verfügung gestellt um im Verlauf beliebig viele Schritte zurück und vorwärts zu gehen.

<source lang="javascript">
history.back();
history.forward();
history.go(-3);
history.go(3);
</source>

'''Anmerkung:''' Aus Sicherheitsgründen ist es nicht erlaubt auf Informationen einzelner Einträge im Verlauf zuzugreifen.

==Navigator==

Für detaillierte Informationen über den aktuellen Client bzw. Browser existiert das <code>navigator</code>-Objekt.
Die meistgenutzte Eigenschaft <code>navigator.userAgent</code> ermöglicht das Feststellen des Browser-Herstellers.

<source lang="javascript">
console.log(navigator.userAgent);
console.log(navigator.battery);
</source>

=Document Object Model=

Einem <code>window</code>-Objekt können beliebig viele Dokumentenobjekte zugeordnet werden, mindestens aber ein Hauptdokument.
Das Hauptdokument wird über die globale Variable <code>document</code> zur Verfügung gestellt.
Die Schnittstelle für den Dokumentenzugriff wird durch das [http://www.w3.org/DOM/ Document Object Model] spezifiziert.

==Objektmodell==

Ein <code>Document</code>-Objekt repräsentiert ein vom Browser interpretiertes HTML-Dokument als Objektmodell mit einer Baumstruktur.
Dabei werden Tags, Texte und Kommentare in Knoten umgewandelt, wobei Tag-Knoten wiederum Unterknoten haben können.

<source lang="html4strict">
<html>
<head>
<title>Titel</title>
</head>
<body>
<p>
Text

</p>
<input type="text" value="Eingabe">

</body>
</html>
</source>

Das Markup wird in folgendes Objektmodell übersetzt:

* Ein '''html'''-Knoten mit den Unterknoten '''head''' und '''body'''
* Ein '''head'''-Knoten mit dem Unterknoten '''title'''
* Ein '''title'''-Knoten mit einem Text-Unterknoten
* Ein '''body'''-Knoten mit den Unterknoten '''p''' und '''input'''
* Ein '''p'''-Knoten mit einem Text- und einem Kommentar-Unterknoten
* Ein '''input'''-Knoten

'''Tipp:''' Achtet man bei HTML auf eine korrekte Einrückung so ist das resultierende Objektmodell meist gut erkennbar.

===Markup-Korrekturen===

Bei dem Objektmodell handelt es sich '''nicht''' um exaktes Abbild des originalen Markups.
Der Unterschied wird klar, wenn man das Resultat von invalidem HTML untersucht.

<source lang="html4strict">
<html>
<head>
<title>Titel</title>
</head>
<body>
<table>
<tr>
<td>Tabelle</td>
</tr>
</table>
</body>
</html>
</source>

Der Browser fügt zwischen dem <code>table</code>- und dem <code>tr</code>-Knoten einen <code>tbody</code>-Knoten ein.

==Aufbau von Dokumenten==

===Node-Objekte===

Jeder Knoten innerhalb eines Dokumentenobjekts ist direkt oder indirekt abgeleitet vom <code>Node</code>-Konstruktor/-Prototypen.
Mit Ausnahme des Dokumentenobjekts selbst wird allen Knoten ein Dokument zugeordnet durch die <code>ownerDocument</code>-Eigenschaft.

Des Weiteren hat jeder Knoten einen numerischen Typen, der in der Eigenschaft <code>nodeType</code> gespeichert wird.
Die gängisten Typen von Dokumentenknoten sind:

* 1: ELEMENT_NODE
* 3: TEXT_NODE
* 8: COMMENT_NODE
* 9: DOCUMENT_NODE

Eine vollständige Referenz der Eigenschaften von Node-Objekten finden Sie auf
[https://developer.mozilla.org/en-US/docs/Web/API/Node dieser] MDN-Seite.

===Document-Objekte===

Das Dokument selbst repräsentiert ein abstraktes Dokument und somit kein HTML-Element.
Es verweist aber auf das <code>html</code>-Element mit der Eigenschaft <code>documentElement</code>.

<source lang="javascript">
console.log(document.documentElement);
</source>

Mithilfe eines Dokuments ist es möglich neue <code>Element</code>-Objekte zu erstellen, einzufügen und diese zu suchen.

===Element-Objekte===

Jedes HTML-Tag wird in einen Knoten übersetzt, welcher mit dem <code>Element</code>-Konstruktor erzeugt wird.
Element-Objekte besitzen Schnittstellen um auf Eigenschaften des Tags zuzugreifen und diese zu modifizieren.

<source lang="javascript">
console.log(document.documentElement.tagName);
console.log(document.documentElement.innerHTML);
</source>

Ebenso wie Dokumente können Element-Objekten weitere Node-Objekte als Unterknoten angehängt und nach ihnen gesucht werden.

==Erstellen von Elementen==

Neue Element-Objekte werden über die Funktion <code>createElement()</code> eines <code>document</code>-Objekts unter Angabe des Tag-Namens erzeugt.

<source lang="javascript">
var absatz = document.createElement('p');
console.log(absatz.tagName);
console.log(absatz.nodeType);
</source>

Bei der Erstellung wird das neue Element dem augerufenen Dokument durch die Eigenschaft <code>ownerDocument</code> als zugehörig markiert.

<source lang="javascript">
var block = document.createElement('div');
console.log(block.ownerDocument);
</source>

Da die Schnittstelle eines Dokuments nicht mit HTML-Standards gekoppelt ist, können beliebige Tag-Namen vergeben werden.

<source lang="javascript">
var meinElement = document.createElement('mein-element');
console.log(meinElement);
</source>

==Suchen von Elementen==

Besonders wichtig bei der Arbeit mit Dokumenten ist die Suche von einzelnen oder mehreren Elementen.
Aufgrund dessen haben sich die Schnittstellen für die Suche im Browser über die letzten Jahre rapide verbessert.

===Vorgefertige Kriterien===

Die ursprünglichen Funktionen zum Suchen von Elementen erlauben wenige festgelegte Kriterien.

<source lang="javascript">
var spielfeld = document.getElementById('spielfeld');
console.log(spielfeld);

var divElemente = document.getElementsByTagName('div');
console.log(divElemente);

var gegnerElemente = document.getElementsByClassName('gegner');
console.log(gegnerElemente.length);
</source>

Auf diese Weise können Elemente anhand der ID, Klasse oder des Tag-Namen gesucht werden.
Der Rückgabewert ist bei der ID-Suche ein <code>Node</code>-Objekt und bei den anderen eine <code>NodeList</code>, ein Array-artiges Objekt von Nodes.

===CSS-Selektoren===

Die Suche mithilfe von vorgefertigen Kriterien hat deutliche Limitierungen.
Deswegen enstand durch Bibliotheken wie jQuery das Konzept von Query-Selektoren, welche als
[http://www.w3.org/TR/CSS2/selector.html CSS-Selektoren] standardisiert werden und in vielen Browser verfügbar sind.

Eine CSS-Selektorgruppe beschreibt beliebig viele Kriterien, die auf ein oder mehrere HTML-Elemente zutreffen.
Der Name wurde so gewählt, da diese ebenso in Stylesheets genutzt werden um Elemente auszuwählen.
Aufgrund der Kombinierbarkeit von CSS-Selektoren ergibt sich eine sehr mächtige Suchfunktionalität.

Es gibt zwei Funktionen für die Suche mit CSS-Selektoren:

* <code>document.querySelector()</code> liefert das erste Element zurück welches die Kriterien erfüllt
* <code>document.querySelectorAll()</code> liefert alle Elemente zurück welche die Kriterien erfüllen in Form einer <code>Node</code>-Liste

====Mögliche Kriterien====

Das einfachste Kriterium für einen CSS-Selektor ist die Angabe eines Tag-Namen.

<source lang="javascript">
var absaetze = document.querySelectorAll('p');
console.log(absaetze);
</source>

Die Angabe einer ID eines HTML-Elements erfolgt durch eine vorangestellte Raute (<code>#</code>).

<source lang="javascript">
var spielfeldElement = document.querySelector('#spielfeld');
console.log(spielfeldElement);
</source>

Klassen-Selektoren werden durch einen vorangestellten Punkt (<code>.</code>) gekennzeichnet.

<source lang="javascript">
var gegnerElemente = document.querySelectorAll('.gegner');
console.log(gegnerElemente);
</source>

Die Mächtigkeit von CSS-Selektoren ergibt sich vor allem durch die beliebige Kombinationsmöglichkeiten von Selektoren.

<source lang="javascript">
var schwierigeGegnerElemente =
document.querySelectorAll('.gegner.schwierig');
console.log(schwierigeGegnerElemente);
</source>

'''Anmerkung 1:''' Die Komplexität einer CSS-Selektorgruppe beeinflusst die Performance einer Suche.

'''Anmerkung 2:''' Eine vollständige Erklärung der Funktionsweise von CSS-Selektoren ist nicht Ziel dieses Tutoriums.
Diese Einführung dient lediglich dazu ein grundsätzliches Verständnis für den Umgang mit Selektoren zu vermitteln.

==Hinzufügen von Elementen==

Neu erstellte Elemente können im Dokument als untergeordnete Knoten mithilfe von <code>appendChild()</code> eingefügt werden.

<source lang="javascript">
var spielerElement = document.createElement('div');
document.documentElement.appendChild(spielerElement);
</source>

Der künftig übergeordnete Knoten muss angesprochen werden, wenn das Element an einer bestimmten Stelle landen soll.

<source lang="javascript">
var spielerElement = document.querySelector('div');
var spielfeld = document.createElement('div');
spielfeld.appendChild(spielerElement);
</source>

==Modifizieren von Elementen==

Mithilfe der entsprechenden DOM-Schnittstellen können Text, HTML, Attribute sowie das Styling von Elementen beeinflusst werden.

===Ändern von Text und HTML===

Der gesamte HTML-Inhalt eines Elements kann mithilfe der Eigenschaft <code>innerHTML</code> beeinflusst werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = 'Hallo Welt';
</source>

Abseits von einfachen Text-Änderungen lässt sich sogar das gesamte enthaltene HTML beeinflussen.
Anstatt also mit der DOM-API einzelne Elemente zu erzeugen kann einfach Markup als Wert zugewiesen werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<p>Hallo <strong>Welt!</strong></p>';
</source>

===Ändern von Attributen===

Für den Zugriff auf die Attribute eines HTML-Elements gibt es die Funktionen <code>getAttribute()</code> und <code>setAttribute()</code>.
Beide akzeptieren als erstes Argument den Namen des Attributs, der Setter akzeptiert außerdem einen zu setzenden Wert.

<source lang="javascript">
var spielerElement = document.createElement('div');
spielerElement.innerHTML = '_|_';
spielerElement.setAttribute('class', 'spieler');
document.querySelector('body').appendChild(spielerElement);

console.log(spielerElement.getAttribute('class'));
</source>

'''Anmerkung:''' Besonders häufige Attributsänderungen sind das Hinzufügen und/oder Entfernen von Klassen.
Dafür gibt es in neueren Browsern die Liste <code>classList</code> auf jedem <code>Element</code>-Objekt, welche die Arbeit erleichtert.

<source lang="javascript">
var spielerElement = document.querySelector('.spieler');
spielerElement.classList.add('unbesiegbar');
</source>

===Ändern von CSS-Eigenschaften===

Neben dem Document Object Model existiert außerdem der [http://dev.w3.org/csswg/cssom/ CSS Object Model Standard]
welcher die Schnittstelle für den Zugriff auf CSS-Eigenschaften von DOM-Objekten standardisiert.

Ein jedes DOM-Element vom Typ <code>Element</code> besitzt eine Eigenschaft <code>style</code> welche alle CSS-Eigenschaften beherbergt.

<source lang="javascript">
var body = document.querySelector('body');
console.log(body.style.color);
console.log(body.style.padding);
</source>

Diese Eigenschaften spiegeln die in Stylesheets definierten Regeln wieder, jedoch inklusive dem kaskadierenden Charakter.
Das heisst dass ein Element-Objekt nicht zwingend selbst eine <code>color</code> besitzt, diese jedoch für die Anzeige vererbt bekommt.

Die Eigenschaften können ebenso beliebig modifiziert werden, was zu einer sofortigen Anpassung der Darstellung führt.

<source lang="javascript">
var body = document.querySelector('body');
body.style.backgroundColor = '#AAF';
</source>

==Löschen von Elementen==

Ebenso wie neue Elemente einem Dokument hinzugefügt werden können, so können diese oder bestehende auch gelöscht werden.
Dazu muss man den übergeordneten Knoten ansteuern und mithilfe von <code>removeChild()</code> die Entfernung durchführen.

<source lang="javascript">
var spielfeld = document.querySelector('.spielfeld');
var spielerElement = spielfeld.querySelector('.spieler');
spielfeld.removeChild(spielerElement);
</source>

Ist einem der übergeordnete Knoten nicht bekannt so kann diesen mithilfe der Knotenverweise ermitteln.

<source lang="javascript">
var entferneKnoten = function(knoten) {
if (!knoten.parentNode) {
throw new Error('no parent node');
}
knoten.parentNode.removeChild(knoten);
}

var spielerElement = document.querySelector('.spieler');
entferneKnoten(spielerElement);
</source>

=DOM Events=

==Ereignisorientierte Programmierung==

Für die Verarbeitung von stets verfügbaren Informationen eignet sich ein sequentieller Ablauf von Befehlen.
Ergeben sich Informationen jedoch dynamisch zur Laufzeit kann die ereignisorientierte Programmierung genutzt werden.

Hierbei wird nicht aktiv auf eine Information gewartet, das Programm wird benachrichtigt wenn ein Ereignis eintritt.
Somit gibt es nicht nur einen Kontrollfluss, sondern beliebig viele, welche sogar parallel ablaufen können.

==Ereignisse im Browser==

Bei der Interaktion mit Websites werden viele Ereignisse ausgelöst.
Zuerst wird die HTML-Seite geladen und gerendert, danach geschieht dies für alle referenzierten Inhalte.
Diese Vorgänge lösen Ereignisse aus, welche durch den Browser selbst verursacht werden.

Zum Beispiel gibt es Ereignisse für Medien, welche beschreiben, dass diese fertig geladen wurden.

Sobald der Browser beginnt eine Web-Seite zu rendern können Ereignisse durch den Benutzer ausgelöst werden.
Fast jede Interaktion löst ein Ereignis aus, welches wiederum in bestimmten Reaktionen resultiert.

'''Beispiele:'''
Klickt der Benutzer einen Link so ist das ein Ereignis, welches zur Folge hat dass die eine URL geladen wird.
Wird ein Scroll-Balken bewegt ergibt sich daraus ein Ereignis, welches den Browser scrollen lässt.

Zu den wichtigsten Arten von durch Benutzer ausgelöste Ereignissen zählen:
Mausbewegungen und -klicks, Tastatureingaben und Scrolling.

Eine vollständige Auflistung von Ereignissen finden Sie auf [https://developer.mozilla.org/en-US/docs/Web/Events dieser] MDN-Seite.
Nebem dem Benutzer gibt es noch andere Auslöser wie zum Beispiel verbundene Server.

==Aufbau eines Ereignisses==

Ein im Browser auftretendes Ereignis besitzt immer drei folgende Merkmale:

* '''Ereignis-Name:''' eine Zeichenkette die das Ereignis in der Gegenwart beschreibt, z.B. "click" oder "mousemove"
* '''Ereignis-Daten:''' ein Datenobjekt mit einer pro Ereignis festgelegten Struktur
* '''Ereignis-Ziel:''' ein Objekt das als Ziel des Ereignis gilt; in der Regel handelt es sich um DOM-Elemente

Beispiel: Eine '''Tastatureingabe''' in einem '''Formularfeld''', bei dem das Zeichen '''@''' eingegeben wird.

==Phasen der Ereignispropagierung==

Handelt es sich bei dem ursprünglichen Ziel eines Ereignisses um ein DOM-Objekt werden in der Regel drei Phasen durchlaufen.

===Capturing-Phase===

In Phase 1, der '''Capturing-Phase''', wird ein Ereignis mit dem obersten Dokumentenknoten als Ziel ausgelöst.
Dabei handelt es sich in der Regel um das <code>document</code>-Objekt, welches alle andere Nodes als Unterknoten enthält.
Es werden dann schrittweise Ereignisse ausgelöst für jeden Unterknoten auf dem Pfad zum ursprünglichen Ereignisziel.

</source>
+ window - Ereignis mit window als aktuelles Ziel (optional)
+ document - Ereignis mit body als aktuelles Ziel
+ body - Ereignis mit body als aktuelles Ziel
+ p - ursprüngliches Ziel
</source>

'''Anmerkung:''' Bei manchen Ereignissen ist <code>window</code> das oberste Objekt in der Hierarchie.

===Target-Phase===

Ist der Browser beim ursprünglichen Ziel angelangt wird in Phase 2 gewechselt, der sogenannten '''Target-Phase'''.
Dabei wird ein einzelnes Ereignis ausgelöst, für welches das ursprüngliche DOM-Objekt als Ziel verwendet wird.

===Bubbling-Phase===

Zum Abschluss der Ereignispropagierung wechselt der Browser in Phase 3, der sogenannten '''Bubbling-Phase'''.
Hierbei wird der Pfad der Capturing-Phase in umgekehrter Richtung durchlaufen und jeweils wieder ein Ereignis ausgelöst.

'''Anmerkung:''' In Bibliotheken wie jQuery hat man nur Zugriff auf die Bubbling-Phase, nicht auf die Capturing-Phase.

===Browser-Unterschiede===

Capturing und Bubbling bilden die Tatsache ab, dass wenn ein Ereignis auf einem Element stattfindet,
dieses Ereignis ebenso für die übergeordneten Elemente gültig ist.
'''Beispiel:''' Wird ein Mensch in einem Krankenhaus geboren, so wird er auch in einer Stadt und in einem Land geboren.

Einer der beiden Phasen wäre ausreichend für die Ereignisvearbeitung.
Aufgrund von unterschiedlichen Browser-Implementierungen existieren heutzutage jedoch beide gleichzeitig.

===Globale Ereignisse===

Beschreibt ein Ereignis ein globales Geschehen wird oftmals das <code>document</code> oder <code>window</code>-Objekt als Ereignisziel verwendet.
In diesen Fällen ist es möglich dass weder Capturing- noch eine Bubbling-Phase durchlaufen werden.

Beispiel: Das Ergeinis <code>DOMContentLoaded</code> beschreibt, dass eine Seite (ohne seine externen Medien) fertig geladen wurde.

==Ereignisverarbeitung==

Mithilfe der DOM-Schnittstelle erhält man die Möglichkeit Ereignisse selbst zu verarbeiten und darauf zu reagieren.

===Anmeldung===

Die Funktion <code>addEventListener</code> kann auf jedem DOM-Objekt, dem <code>document</code>-Objekt und dem <code>window</code>-Objekt aufgerufen werden.
Dabei ist das Objekt auf dem die Funktion aufgerufen das '''Ziel''' des Ereignisses, welches verarbeiten werden soll.

Die Funktion akzeptiert die folgenden drei Argumente:
* den '''Namen des Ereignisses''' das man verarbeiten möchte in Form eines Strings
* die '''Callback-Funktion''' welche das Ereignis-Objekt erwartet und den Code zur Verarbeitung enthält
* ein optionales '''Flag''' das bestimmt ob das Ereignis in der Capturing- oder Bubbling-Phase verarbeitet werden soll

Standardmäßig ist das Flag <code>false</code>, was bedeutet dass das Ereignis in der Bubbling-Phase verarbeitet wird.

Es wird für ein Ereignis auf einem Ziel ein Event-Lister in Form einer Funktion angemeldet.
Beim Eintreten des Ereignisses wird der sogenannte Callback aufgerufen und das entsprechende Ereignis-Objekt übergeben.

<source lang="javascript">
var seiteWurdeGeladen = function(event) {
console.log('Die Seite ist nun fertig geladen');
console.log(event);
}
document.addEventListener('DOMContentLoaded', seiteWurdeGeladen);
</source>

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<a id="link" href="#">Link</a>';
var link = document.querySelector('#link');
var linkWurdeGeklickt = function(event) {
console.log('Der Link wurde geklickt');
};
link.addEventListener('click', linkWurdeGeklickt);
</source>

Aufgrund der Phasen der Ereignispropagierung kann man Ereignisse global verarbeiten, unabhängig davon wo sie stattgefunden haben.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<a href="#">Link 1</a><br><a href="#">Link 2</a>';
var irgendwoWurdeGeklickt = function(event) {
console.log('Benutzer hat irgendwo auf der Seite geklickt');
};
document.addEventListener('click', irgendwoWurdeGeklickt);
</source>

===Callbacks===

Ein Callback ist eine Rückruffunktion, welche an ein andere Funktion übergeben wird und
zu späteren Zeitpunkten ggf. ausgeführt wird.

<source lang="javascript">
var mausWurdeBewegt = function(event) {
console.log('Benutzer hat die Maus bewegt');
};
document.addEventListener('mousemove', mausWurdeBewegt);
</source>

Es ist jedoch nicht garantiert dass eine übergebene Callback-Funktion überhaupt jemals ausgeführt wird.

<source lang="javascript">
var esIstOktober = function(event) {
console.log('Es ist Oktober');
};

var istEsOktober = function(callback) {
if (new Date().getMonth() == 9) callback();
};

istEsOktober(esIstOktober);
</source>

===Ereignis-Objekte===

Jedem Event-Listener-Callback wird beim Aufruf ein für ein Ereignis spezifisches Ereignis-Objekt übergeben.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event);
console.log(event.screenX);
console.log(event.screenY);
console.log(event.button);
});
</source>

Dieses Objekt enthält neben spezifischen auch generelle Ereignisinformationen wie zum Beispiel das Ereignis-Ziel.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target);
});
</source>

Hinsichtlich der drei Event-Phasen unterscheidet man zwischen ursprünglichem und aktuellem Ziel.
Das aktuelle Ziel ist das für welches das Ereignis aktuell gilt und das ursprüngliche das wo es stattgefunden hat.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target); // ursprüngliches Ziel
console.log(event.currentTarget); // aktuelles Ziel
});
</source>

Das aktuelle Ziel <code>currentTarget</code> entspricht also immer dem Objekt auf dem man den Event-Handler angemeldet hat.

===Abmeldung===

Mithilfe der Funktion <code>removeEventListener</code> kann ein angemeldeter Event-Listener wieder entfernt werden.
Diese Funktion nur zwei Argumente: Den Ereignis-Namen und die Event-Listener-Funktion.

<source lang="javascript">
var mausWurdeBewegt = function(event) {
console.log(event);
};

document.addEventListener('mousemove', mausWurdeBewegt);
document.removeEventListener('mousemove', mausWurdeBewegt);
</source>

===Standardverhalten===

Nachdem alle Ereignisse verarbeitet wurden führt der Browser gegegebenfalls eine "Default Action" aus.
Eine solche Aktion ist das Standardverhalten des Browsers als Reaktion auf das eingetretene Ereignis.

Beispiele:
* Benutzer klickt auf einen Link -> der Browser lädt die URL
* Benutzer führt Tastatureingaben in einem Feld aus -> der Browser fügt die Zeichen dem Feld hinzu

Innerhalb einer Event-Listener-Funktion ist es möglich mithilfe von <code>preventDefault()</code> das Standardverhalten zu unterdrücken.

<source lang="javascript">
document.addEventListener('click', function(event) {
event.preventDefault();
});
</source>

Der oben dargestellte Code führt dazu, dass kein Klick auf einen Link die enthaltene URL aufruft.

==Wichtige Events==

Die folgenden Ereignisse sind die wichtigsten in der täglichen browser-seitingen Anwendungsentwicklung mit JavaScript.

===DOMContentLoaded===

Dieses Ereignis beschreibt, dass das HTML geladen und interpretiert wurde und das DOM und CSSOM erzeugt und gerendert wurde.
Es wird keine Aussage darüber gemacht ob weitere externe Inhalte bereits geladen wurden, wie z.B. Bilder.
Das Ereignis wird ausschliesslich auf dem <code>document</code>-Objekt als Ereignisziel ausgelöst.

<source lang="javascript">
document.addEventListener('DOMContentLoaded', function(event) {
console.log('Mit der Seite kann interagiert werden');
});
</source>

===load===

Dieses Ereignis besagt, dass die gesamte Web-Seite inklusive aller externen referenziereten Inhalte gerendert wurden.
Im Gegensatz zu <code>DOMContentLoaded</code> wird dieses Ereignis ausschliesslich auf dem <code>window</code>-Objekt ausgelöst.

<source lang="javascript">
window.addEventListener('load', function(event) {
console.log('Die Seite wurde vollständig geladen');
});
</source>

===click===

Jedes Mal wenn der Benutzer (mit der Maus) auf ein sichtbares DOM-Element klickt wird dieses Ereignis ausgelöst.
Bei der Propagierung dieses Ereignisses werden wie alle drei Ereignisphasen (Capturing, Bubbling, Target) durchlaufen.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log('Der Benutzer hat auf etwas geklickt');
});
</source>

===mousemove, mouseover, mouseout===

Bei Mausbewegungen über DOM-Element wird konstant das Ereignis <code>mousemove</code> mit den entsprechenden Koordinaten ausgelöst.
Das Ereignis <code>mouseover</code> wird erzeugt wenn die Maus in ein Element eindringt, <code>mouseout</code> wenn es wieder verlassen wird.

<source lang="javascript">
document.addEventListener('mousemove', function(event) {
console.log('Der Benutzer hat die Maus bewegt');
});

document.addEventListener('mouseover', function(event) {
console.log('Der Benutzer hat die Maus über etwas bewegt');
});

document.addEventListener('mouseout', function(event) {
console.log('Der Benutzer hat die Maus von etwas weg bewegt');
});
</source>

===keydown, keyup, keypress===

Bei Tastatureingaben durch Benutzer auf einem Element werden die Ereignisse <code>keydown</code>, <code>keyup</code> und <code>keypress</code> ausgelöst.
Die drei unterschiedlichen Ereignisse beschreiben die unterschiedlichen Phasen einer Tastatureingabe.

<source lang="javascript">
document.addEventListener('keydown', function(event) {
console.log('Der Benutzer hat eine Taste gedrückt');
console.log(event);
});

document.addEventListener('keypress', function(event) {
console.log('Der Benutzer hat eine Taste betätigt');
console.log(event);
});

document.addEventListener('keyup', function(event) {
console.log('Der Benutzer hat eine Taste losgelassen');
console.log(event);
});
</source>

==Wiederverwendung==

Mithilfe von DOM Events kann auch ein genereller Event-Mechanismus für JavaScript implementiert werden.
Dazu wird ein DOM-Element erzeugt, welches als virtuelles Ereignisziel dient und nicht ins Dokument eingehängt wird.

<source lang="javascript">
var EventDispatcher = function() {

var target = document.createElement('div');

this.addEventListener = function(type, callback) {
target.addEventListener(type, callback);
};

this.dispatchEvent = function(type, detail) {
var event = new CustomEvent(type, {
bubbles: true,
canceable: true,
detail: detail
});
target.dispatchEvent(event);
};

this.removeEventListener = function(type, callback) {
target.removeEventListener(type, callback);
};

};
</source>

Diese Klasse kann dann in beliebigen anderen Komponenten dazu genutzt werden um Ereignisse zu erzeugen und zu propagieren.

<source lang="javascript">
var Spieler = function(name) {
this.eventDispatcher = new EventDispatcher();

this.springe = function() {
this.eventDispatcher.dispatchEvent('springen', this);
}

this.wennSpielerSpringt = function(callback) {
this.eventDispatcher.addEventListener('springen', callback);
}
}
var spieler = new Spieler('John');
spieler.wennSpielerSpringt(function() {
console.log('Spieler springt');
});
spieler.springe();
</source>

=Timer=

==JavaScript-Thread==

Der Browser stellt für jede Web-Seite einen einzelnen Thread zur Verfügung.
Dieser kümmert sich um das Rendering, die Event-Verarbeitung und die Ausführung von JavaScript.
Mit Ausnahme des HTML5-Standards der WebWorker gibt es in JavaScript kein Multithreading.

Es ist demnach wichtig, diesen Thread durch Ausführung von Code nicht zu lange zu blockieren.

Intern bestitzt der Thread eine Liste an Aufgaben die als nächstes ausgeführt werden, der sogenannten Queue.
Wird eine Web-Seite zum ersten Mal geladen führt dies gleich zu mehreren Einträge in der Queue, wie zum Beispiel:

* Parsen des Markups und Aufbau des DOMs
* Parsen des CSS und Aufbau des CSSOMs
* Rendering der Seite
* Ausführung von geladenem JavaScript-Code

Manche Aufgaben benötigen unter Umständen viel Zeit und können die Ausführung anderer Aufgaben beeinflussen.
Nimmt ein Stück Code die CPU zu lange in Anspruch kann der Browser z.B. keine Benutzereingaben mehr vearbeiten.
Um dies zu vermeiden ist im Browser ein Code-Limit für JavaScript eingebaut, bei dem der Browser eine Warnung ausgibt.

<source lang="javascript">
var programmStart = new Date();
var wartezeitInMs = 5000;
while (new Date() - programmStart < wartezeitInMs) {
// nichts tun
};
</source>

==Timeouts==

Mit <code>setTimeout(callback, delayMs)</code> kann ein einmalig auszuführenden Timer auf der Thread-Queue angemeldet werden.
Die übergebene Callback-Funktion wird '''ungefähr''' nach einer Wartezeit mit Länge der übergebenen Dauer ausgeführt.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log(vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 500);
</source>

Aufgrund der vielen Aufgaben des Threads kann die Wartezeit überschritten werden, wenn andere Aufgaben viel Zeit beanspruchen.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log(vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 500);
while (new Date() - programmStart < 1000) {
// nichts tun
}
</source>

Eine Wartezeit von 0 Millisekunden heißt, dass der Callback so bald wie möglich ausgeführt werden soll.
Abhängig von der Browser-Implementierung kann es sein, dass die Wartezeit aber mindestens 15 Millisekunden beträgt.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log(vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 0);
</source>

Es ist möglich mit Timern CPU-intensive Aufgaben in mehrere Teile zu spalten oder auch Aufgaben wiederholt auszuführen.
Dazu erzeugt man einfach eine Funktion welche sich wiederum selbst durch einen <code>setTimeout()</code>-Aufruf als Timer registriert.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
setTimeout(loggeAktuelleZeit, 15);
};
loggeAktuelleZeit();
</source>

Durch den Aufruf von <code>clearTimeout(timeoutId)</code> kann ein noch nicht ausgeführter Timer abgemeldet werden.
Dabei wird der Eintrag mit gegebener Timeout-ID aus der Thread-Queue gelöscht.
Die Timeout-ID wird durch <code>setTimeout()</code> als numerischer Rückgabewert bereitgestellt.

<source lang="javascript">
var timeoutId = null;
var loggeAktuelleZeit = function() {
console.log(new Date());
timeoutId = setTimeout(loggeAktuelleZeit, 15);
};
loggeAktuelleZeit();
setTimeout(function() {
clearTimeout(timeoutId);
}, 2500);
</source>

'''Anmerkung:''' <code>setTimeout()</code> eignet sich vor allem für wiederholende Aufgaben welche nichts mit Rendering zu tun haben.

==Intervalle==

Für wiederholt auszuführenden Timer existiert die Funktion <code>setInterval(callback, delayMs)</code>.
Als Argumente werden ein Callback und eine Wartezeit zwischen den einzelnen Ausführungen des Callbacks akzeptiert.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
};
setInterval(loggeAktuelleZeit, 15);
</source>

Analog zu <code>setTimeout()</code> wird eine ID zurückgegeben, welche für die Abmeldung durch <code>clearInterval()</code> genutzt werden kann.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
};
var intervalId = setInterval(loggeAktuelleZeit, 15);
setTimeout(function() {
clearInterval(intervalId);
}, 2500);
</source>

<code>setInterval()</code> wirkt komfortabler verglichen mit <code>setTimeout()</code>.
Der Nachteil ist, dass die Messung der Wartezeit vor der Callback-Ausführung beginnt.
Dauert eine Aufgabe zu lange wird der Thread sehr stark beansprucht.

<source lang="javascript">
var warteEineBestimmeZeit = function() {
var funktionsStart = new Date();
var wartezeitInMs = 50;
while (new Date() - funktionsStart < wartezeitInMs) {
// nichts tun
};
};
setInterval(warteEineBestimmeZeit, 15);
</source>

Obwohl der CPU noch Zeit zur Verfügung steht, ist sie fast nur damit beschäftigt überfällige Callbacks auszuführen.

'''Tipp:''' <code>setInterval()</code> eignet sich für wiederholende Aufgaben deren Dauer nicht exakt vorhersehbar ist.

Aufgrund der verschiedenen Aufgaben des JavaScript-Threads ist eine exakte Wartezeit nicht garantiert.
Sollen sich Werte exakt zeitabhängig verändern können Datum-Objekte in die Berechnungen mit einbezogen werden.

<source lang="javascript">
var spieler = {position: 0, geschwindigkeitProSekunde: 1};
var letzterTimerAufruf = new Date();
var bewegeSpieler = function() {
var vergangeneZeitInMs = new Date() - letzterTimerAufruf;
spieler.position += geschwindigkeitProSekunde * (vergangeneZeitInMs / 1000);
console.log('Aktuelle Position: ' + spieler.position);
letzterTimerAufruf = new Date();
setTimeout(bewegeSpieler, 1000);
};
bewegeSpieler();
</source>

==Animation Frames==

Mithilfe von <code>setTimeout()</code> ist es möglich Animationen zu implementieren.
Dazu werden im Callback die gewünschten Elemente in ihrer Form und Position verändert.

<source lang="javascript">
var spielerElement = document.createElement('div');
spielerElement.setAttribute('style', 'width: 40px; height: 40px; ' +
'background-color: #F00; position: absolute; top: 0px');
document.querySelector('body').appendChild(spielerElement);
var xPosition = 0;
var bewegeSpieler = function() {
xPosition = xPosition + 1;
spielerElement.style.left = xPosition + 'px';
setTimeout(bewegeSpieler, 15);
};
bewegeSpieler();
</source>

Hier wird versucht das Rechteck ca. 60 Mal pro Sekunde zu bewegen.
Es kann aber vorkommen, dass der Browser zu stark beansprucht ist und diese Frequenz nicht eingehalten wird.

Deshalb gibt es für Animationen und visuelle Änderungen die Funktion <code>requestAnimationFrame(callback)</code>.
Diese erwartet nur einen Callback und kümmert sich intern darum wann der Callback das nächste Mal ausgeführt wird.

<source lang="javascript">
var spielerElement = document.createElement('div');
spielerElement.setAttribute('style', 'width: 40px; height: 40px; ' +
'background-color: #F00; position: absolute; top: 0px');
document.querySelector('body').appendChild(spielerElement);
var xPosition = 0;
var frameId = null;
var bewegeSpieler = function() {
xPosition = xPosition + 1;
spielerElement.style.left = xPosition + 'px';
frameId = requestAnimationFrame(bewegeSpieler);
};
bewegeSpieler();
</source>

Analog zu <code>clearTimeout()</code> und <code>clearInterval()</code> gibt es die Funktion <code>cancelAnimationFrame(frameId)</code> für die Abmeldung.
Diese akzeptiert eine Frame-ID welche wiederum von <code>requestAnimationFrame()</code> zurückgegeben wird.

'''Tipp:''' Es ist empfehlenswert Animationen und visuelle Änderungen mit <code>requestAnimationFrame()</code> zu implementieren.

JavaScript-Tutorium:Browser

2015-10-22T19:13:22Z

Lawrence:

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten bei der JavaScript-Entwicklung im Browser zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Einführung=

==Native vs. Host==

In einer JavaScript-Umgebung existieren zwei Arten von Objekte.
'''Native Objekte''' werden von der Engine bereitgestellt und sind durch den ECMAScript-Standard abgedeckt.
'''Host-Objekte''' sind nicht immer standardisiert und werden von der Umgebung bereitgestellt.
Im Browser handelt es sich bei Host-Objekten um Schnittstellen für den Zugriff auf den Browser und externe Geräte.

==HTML5-Standard==

Obwohl es den ECMAScript-Standard gibt, muss man davon ausgehen,
dass sich die verfügbaren APIs von Browser zu Browser unterscheiden können.
Durch die steigende Entwicklungsgeschwindigkeit der Browser-Hersteller und den
[https://html.spec.whatwg.org/multipage/ HTML5-Standard] verbessert sich diese Situation.

Heutzutage kann man davon ausgehen, dass jeweils die neuesten Versionen von Firefox und Chrome
die DOM-API und viele der neu verfassten HTML5-APIs bereits standardkonform unterstützen.

==Inline Code vs. externe Dateien==

Eine im Browser angezeigte Web-Seite besteht meist aus HTML, CSS und JavaScript, wobei nur HTML zwingend verlangt ist.
Der JavaScript-Code kümmert sich normalerweise um die dynamischen Aspekte, wie Interaktionen und das Nachladen von Inhalten.

Der Browser lädt ein HTML-Dokument unter der angegebenen URL herunter und evaluiert dieses.
Das Dokument enthält optional Verweise auf CSS-Dateien, Bilder, JavaScript-Dateien und andere Medien.
Neben Verweisen auf externen JavaScript-Code kann das Dokument auch Inline-Code enthalten.
Ob es sich um externe Dateien oder Inline-Code handelt wirkt sich auf die Ladezeiten aus,
der Code selbst wird davon nicht beeinflusst.

'''Anmerkung:''' Die Reihenfolge der eingebunden Code-Blöcke und angegebenen Dateiverweise ist wichtig,
da diese ebenso die Reihenfolge der Code-Ausführung darstellt.

==JavaScript-Kontext==

Für jede Web-Seite, unabhängig davon ob sie im separaten Fenster oder als Tab angezeigt wird,
erzeugt der Browser einen separaten isolierten JavaScript-Kontext, in dem Code ausgeführt wird.
Das bedeutet, dass alle Objekte und Funktionen nur so lange existieren bis die Seite neu geladen oder verlassen wird.
Ein Zugriff auf andere Seiten ist aus Sicherheitsgründen nicht erlaubt.

=Window=

Das globale Objekt <code>window</code> referenziert alle im Browser verfügbaren Objekte und Werte als Eigenschaften (native und host).

<source lang="javascript">
console.log(window.Object);
console.log(window.XMLHttpRequest);
</source>

Für den Zugriff auf globale Eigenschaften ist es nicht notwendig explizit <code>window</code> zu schreiben.

<source lang="javascript">
console.log(Date == window.Date);
console.log(new Date());
</source>

Alle nicht innerhalb von Funktionen deklarierten Variablen werden automatisch an das globale Objekt angehängt.

<source lang="javascript">
var globaleVariable = 'global';
var globaleFunktion = function() {};
console.log(window.globaleVariable);
console.log(window.globaleFunktion);
</source>

==Modifikation von Eigenschaften==

Da es sich um ein normales Objekt handelt können die meisten Eigenschaften modifiziert und auch gelöscht werden.

'''Anmerkung:''' Veränderungen von globalen Eigenschaften sind nicht sinnvoll und können schwerwiegende Fehler verursachen.

<source lang="javascript">
window.Object = {};
var objekt = new Object();

delete window.Array;
var array = new Array();
</source>

Das <code>window</code>-Objekt wird vom Browser mithilfe der Konstruktorfunktion <code>Window</code> erzeugt, welche auch global verfügbar ist.

<source lang="javascript">
console.log(window.constructor == window.Window);
</source>

==Popups und Frames==

Neben dem globalen Fenster-Objekt kann eine Web-Seite beliebig viele weitere <code>window</code>-Objekte enthalten.
Dabei handelt es sich dann entweder um durch Code erzeugte Popups oder aber um Frames (besser bekannt als iframes).

<source lang="javascript">
window.open('https://www.google.com', 'Google im Popup', 'width=400,height=300,resizable=yes');
</source>

Frames können entweder durch das entsprechende HTML oder aber auch wie im Code gezeigt programmatisch erzeugt werden.

==Browser-Schnittstellen==

Abgesehen von den nativen Objekten notwendigen Objekte enthält <code>window</code> wichtige Browser- und Geräte-Schinttstellen.
Dazu zählen zum Beispiel Funktionen um Dialoge im Browser zu öffnen oder aber sogar um Game-Controller zu verwenden.

<source lang="javascript">
var name = window.prompt('Wie ist Ihr Name?');
window.alert('Hello ' + name);
window.alert('Die aktuelle Seite ist ' + window.innerWidth + 'px breit');

console.log(window.Gamepad);
</source>

Eine komplette Liste der verfügbaren Eigenschaften finden Sie auf
[https://developer.mozilla.org/de/docs/DOM/window dieser] MDN-Seite.
In den folgenden Abschnitten werden exemplarisch ein paar wichtige Objekte im Detail beschrieben.

=Beispiel für Browser-Schnittstellen=

==Location==

<code>location</code> ist ein globales Objekt welches die aktuelle URL und ihre Bestandteile enthält und diese auch verändern kann.
Das Objekt wird analog zum <code>window</code>-Objekt mithilfe der Konstruktorfunktion <code>Location</code> erstellt.

<source lang="javascript">
console.log(window.location.constructor == window.Location);
</source>

===Abfragen der URL===

Die Eigenschaft <code>href</code> enhtält die gesamte aktuelle URL. Alternativ kann auch <code>location.toString()</code> genutzt werden.

<source lang="javascript">
console.log(location.href);
console.log(location.toString());
</source>

Um einzelne Bestandteile der URL ermitteln zu können werden viele separate Eigenschaften bereitgestellt.

<source lang="javascript">
console.log(location.protocol);
console.log(location.host);
console.log(location.port);
console.log(location.pathname);
console.log(location.hash);
</source>

===Verändern der URL===

Diese Eigenschaften können nicht nur lesend genutzt werden, sondern auch um Änderungen an der aktuellen URL vorzunehmen.

Mit der Ausname von <code>location.hash</code> führen Änderungen der Eigenschaften zum Verlassen der aktuellen Seite.

<source lang="javascript">
location.protocol = 'http';
location.port = '8080';
location.hash = '#anker';
location.href = 'https://www.google.com';
</source>

Des Weiteren gibt es ein paar Funktionen um die URL zu modifizieren oder aber die Seite neuzuladen:</source>

<source lang="javascript">
location.assign('https://www.google.com');
location.reload(true);
</source>

==History==

Das globale <code>history</code>-Objekt ermöglicht den programmatischen Zugriff auf den Browser-Verlauf.
Es werden Funktionen zur Verfügung gestellt um im Verlauf beliebig viele Schritte zurück und vorwärts zu gehen.

<source lang="javascript">
history.back();
history.forward();
history.go(-3);
history.go(3);
</source>

'''Anmerkung:''' Aus Sicherheitsgründen ist es nicht erlaubt auf Informationen einzelner Einträge im Verlauf zuzugreifen.

==Navigator==

Für detaillierte Informationen über den aktuellen Client bzw. Browser existiert das <code>navigator</code>-Objekt.
Die meistgenutzte Eigenschaft <code>navigator.userAgent</code> ermöglicht das Feststellen des Browser-Herstellers.

<source lang="javascript">
console.log(navigator.userAgent);
console.log(navigator.battery);
</source>

=Document Object Model=

Einem <code>window</code>-Objekt können beliebig viele Dokumentenobjekte zugeordnet werden, mindestens aber ein Hauptdokument.
Das Hauptdokument wird über die globale Variable <code>document</code> zur Verfügung gestellt.
Die Schnittstelle für den Dokumentenzugriff wird durch das [http://www.w3.org/DOM/ Document Object Model] spezifiziert.

==Objektmodell==

Ein <code>Document</code>-Objekt repräsentiert ein vom Browser interpretiertes HTML-Dokument als Objektmodell mit einer Baumstruktur.
Dabei werden Tags, Texte und Kommentare in Knoten umgewandelt, wobei Tag-Knoten wiederum Unterknoten haben können.

<source lang="html4strict">
<html>
<head>
<title>Titel</title>
</head>
<body>
<p>
Text

</p>
<input type="text" value="Eingabe">

</body>
</html>
</source>

Das Markup wird in folgendes Objektmodell übersetzt:

* Ein '''html'''-Knoten mit den Unterknoten '''head''' und '''body'''
* Ein '''head'''-Knoten mit dem Unterknoten '''title'''
* Ein '''title'''-Knoten mit einem Text-Unterknoten
* Ein '''body'''-Knoten mit den Unterknoten '''p''' und '''input'''
* Ein '''p'''-Knoten mit einem Text- und einem Kommentar-Unterknoten
* Ein '''input'''-Knoten

'''Tipp:''' Achtet man bei HTML auf eine korrekte Einrückung so ist das resultierende Objektmodell meist gut erkennbar.

===Markup-Korrekturen===

Bei dem Objektmodell handelt es sich '''nicht''' um exaktes Abbild des originalen Markups.
Der Unterschied wird klar, wenn man das Resultat von invalidem HTML untersucht.

<source lang="html4strict">
<html>
<head>
<title>Titel</title>
</head>
<body>
<table>
<tr>
<td>Tabelle</td>
</tr>
</table>
</body>
</html>
</source>

Der Browser fügt zwischen dem <code>table</code>- und dem <code>tr</code>-Knoten einen <code>tbody</code>-Knoten ein.

==Aufbau von Dokumenten==

===Node-Objekte===

Jeder Knoten innerhalb eines Dokumentenobjekts ist direkt oder indirekt abgeleitet vom <code>Node</code>-Konstruktor/-Prototypen.
Mit Ausnahme des Dokumentenobjekts selbst wird allen Knoten ein Dokument zugeordnet durch die <code>ownerDocument</code>-Eigenschaft.

Des Weiteren hat jeder Knoten einen numerischen Typen, der in der Eigenschaft <code>nodeType</code> gespeichert wird.
Die gängisten Typen von Dokumentenknoten sind:

* 1: ELEMENT_NODE
* 3: TEXT_NODE
* 8: COMMENT_NODE
* 9: DOCUMENT_NODE

Eine vollständige Referenz der Eigenschaften von Node-Objekten finden Sie auf
[https://developer.mozilla.org/en-US/docs/Web/API/Node dieser] MDN-Seite.

===Document-Objekte===

Das Dokument selbst repräsentiert ein abstraktes Dokument und somit kein HTML-Element.
Es verweist aber auf das <code>html</code>-Element mit der Eigenschaft <code>documentElement</code>.

<source lang="javascript">
console.log(document.documentElement);
</source>

Mithilfe eines Dokuments ist es möglich neue <code>Element</code>-Objekte zu erstellen, einzufügen und diese zu suchen.

===Element-Objekte===

Jedes HTML-Tag wird in einen Knoten übersetzt, welcher mit dem <code>Element</code>-Konstruktor erzeugt wird.
Element-Objekte besitzen Schnittstellen um auf Eigenschaften des Tags zuzugreifen und diese zu modifizieren.

<source lang="javascript">
console.log(document.documentElement.tagName);
console.log(document.documentElement.innerHTML);
</source>

Ebenso wie Dokumente können Element-Objekten weitere Node-Objekte als Unterknoten angehängt und nach ihnen gesucht werden.

==Erstellen von Elementen==

Neue Element-Objekte werden über die Funktion <code>createElement()</code> eines <code>document</code>-Objekts unter Angabe des Tag-Namens erzeugt.

<source lang="javascript">
var absatz = document.createElement('p');
console.log(absatz.tagName);
console.log(absatz.nodeType);
</source>

Bei der Erstellung wird das neue Element dem augerufenen Dokument durch die Eigenschaft <code>ownerDocument</code> als zugehörig markiert.

<source lang="javascript">
var block = document.createElement('div');
console.log(block.ownerDocument);
</source>

Da die Schnittstelle eines Dokuments nicht mit HTML-Standards gekoppelt ist, können beliebige Tag-Namen vergeben werden.

<source lang="javascript">
var meinElement = document.createElement('mein-element');
console.log(meinElement);
</source>

==Suchen von Elementen==

Besonders wichtig bei der Arbeit mit Dokumenten ist die Suche von einzelnen oder mehreren Elementen.
Aufgrund dessen haben sich die Schnittstellen für die Suche im Browser über die letzten Jahre rapide verbessert.

===Vorgefertige Kriterien===

Die ursprünglichen Funktionen zum Suchen von Elementen erlauben wenige festgelegte Kriterien.

<source lang="javascript">
var spielfeld = document.getElementById('spielfeld');
console.log(spielfeld);

var divElemente = document.getElementsByTagName('div');
console.log(divElemente);

var gegnerElemente = document.getElementsByClassName('gegner');
console.log(gegnerElemente.length);
</source>

Auf diese Weise können Elemente anhand der ID, Klasse oder des Tag-Namen gesucht werden.
Der Rückgabewert ist bei der ID-Suche ein <code>Node</code>-Objekt und bei den anderen eine <code>NodeList</code>, ein Array-artiges Objekt von Nodes.

===CSS-Selektoren===

Die Suche mithilfe von vorgefertigen Kriterien hat deutliche Limitierungen.
Deswegen enstand durch Bibliotheken wie jQuery das Konzept von Query-Selektoren, welche als
[http://www.w3.org/TR/CSS2/selector.html CSS-Selektoren] standardisiert werden und in vielen Browser verfügbar sind.

Eine CSS-Selektorgruppe beschreibt beliebig viele Kriterien, die auf ein oder mehrere HTML-Elemente zutreffen.
Der Name wurde so gewählt, da diese ebenso in Stylesheets genutzt werden um Elemente auszuwählen.
Aufgrund der Kombinierbarkeit von CSS-Selektoren ergibt sich eine sehr mächtige Suchfunktionalität.

Es gibt zwei Funktionen für die Suche mit CSS-Selektoren:

* <code>document.querySelector()</code> liefert das erste Element zurück welches die Kriterien erfüllt
* <code>document.querySelectorAll()</code> liefert alle Elemente zurück welche die Kriterien erfüllen in Form einer <code>Node</code>-Liste

====Mögliche Kriterien====

Das einfachste Kriterium für einen CSS-Selektor ist die Angabe eines Tag-Namen.

<source lang="javascript">
var absaetze = document.querySelectorAll('p');
console.log(absaetze);
</source>

Die Angabe einer ID eines HTML-Elements erfolgt durch eine vorangestellte Raute (<code>#</code>).

<source lang="javascript">
var spielfeldElement = document.querySelector('#spielfeld');
console.log(spielfeldElement);
</source>

Klassen-Selektoren werden durch einen vorangestellten Punkt (<code>.</code>) gekennzeichnet.

<source lang="javascript">
var gegnerElemente = document.querySelectorAll('.gegner');
console.log(gegnerElemente);
</source>

Die Mächtigkeit von CSS-Selektoren ergibt sich vor allem durch die beliebige Kombinationsmöglichkeiten von Selektoren.

<source lang="javascript">
var schwierigeGegnerElemente =
document.querySelectorAll('.gegner.schwierig');
console.log(schwierigeGegnerElemente);
</source>

'''Anmerkung 1:''' Die Komplexität einer CSS-Selektorgruppe beeinflusst die Performance einer Suche.

'''Anmerkung 2:''' Eine vollständige Erklärung der Funktionsweise von CSS-Selektoren ist nicht Ziel dieses Tutoriums.
Diese Einführung dient lediglich dazu ein grundsätzliches Verständnis für den Umgang mit Selektoren zu vermitteln.

==Hinzufügen von Elementen==

Neu erstellte Elemente können im Dokument als untergeordnete Knoten mithilfe von <code>appendChild()</code> eingefügt werden.

<source lang="javascript">
var spielerElement = document.createElement('div');
document.documentElement.appendChild(spielerElement);
</source>

Der künftig übergeordnete Knoten muss angesprochen werden, wenn das Element an einer bestimmten Stelle landen soll.

<source lang="javascript">
var spielerElement = document.querySelector('div');
var spielfeld = document.createElement('div');
spielfeld.appendChild(spielerElement);
</source>

==Modifizieren von Elementen==

Mithilfe der entsprechenden DOM-Schnittstellen können Text, HTML, Attribute sowie das Styling von Elementen beeinflusst werden.

===Ändern von Text und HTML===

Der gesamte HTML-Inhalt eines Elements kann mithilfe der Eigenschaft <code>innerHTML</code> beeinflusst werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = 'Hallo Welt';
</source>

Abseits von einfachen Text-Änderungen lässt sich sogar das gesamte enthaltene HTML beeinflussen.
Anstatt also mit der DOM-API einzelne Elemente zu erzeugen kann einfach Markup als Wert zugewiesen werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<p>Hallo <strong>Welt!</strong></p>';
</source>

===Ändern von Attributen===

Für den Zugriff auf die Attribute eines HTML-Elements gibt es die Funktionen <code>getAttribute()</code> und <code>setAttribute()</code>.
Beide akzeptieren als erstes Argument den Namen des Attributs, der Setter akzeptiert außerdem einen zu setzenden Wert.

<source lang="javascript">
var spielerElement = document.createElement('div');
spielerElement.innerHTML = '_|_';
spielerElement.setAttribute('class', 'spieler');
document.querySelector('body').appendChild(spielerElement);

console.log(spielerElement.getAttribute('class'));
</source>

'''Anmerkung:''' Besonders häufige Attributsänderungen sind das Hinzufügen und/oder Entfernen von Klassen.
Dafür gibt es in neueren Browsern die Liste <code>classList</code> auf jedem <code>Element</code>-Objekt, welche die Arbeit erleichtert.

<source lang="javascript">
var spielerElement = document.querySelector('.spieler');
spielerElement.classList.add('unbesiegbar');
</source>

===Ändern von CSS-Eigenschaften===

Neben dem Document Object Model existiert außerdem der [http://dev.w3.org/csswg/cssom/ CSS Object Model Standard]
welcher die Schnittstelle für den Zugriff auf CSS-Eigenschaften von DOM-Objekten standardisiert.

Ein jedes DOM-Element vom Typ <code>Element</code> besitzt eine Eigenschaft <code>style</code> welche alle CSS-Eigenschaften beherbergt.

<source lang="javascript">
var body = document.querySelector('body');
console.log(body.style.color);
console.log(body.style.padding);
</source>

Diese Eigenschaften spiegeln die in Stylesheets definierten Regeln wieder, jedoch inklusive dem kaskadierenden Charakter.
Das heisst dass ein Element-Objekt nicht zwingend selbst eine <code>color</code> besitzt, diese jedoch für die Anzeige vererbt bekommt.

Die Eigenschaften können ebenso beliebig modifiziert werden, was zu einer sofortigen Anpassung der Darstellung führt.

<source lang="javascript">
var body = document.querySelector('body');
body.style.backgroundColor = '#AAF';
</source>

==Löschen von Elementen==

Ebenso wie neue Elemente einem Dokument hinzugefügt werden können, so können diese oder bestehende auch gelöscht werden.
Dazu muss man den übergeordneten Knoten ansteuern und mithilfe von <code>removeChild()</code> die Entfernung durchführen.

<source lang="javascript">
var spielfeld = document.querySelector('.spielfeld');
var spielerElement = spielfeld.querySelector('.spieler');
spielfeld.removeChild(spielerElement);
</source>

Ist einem der übergeordnete Knoten nicht bekannt so kann diesen mithilfe der Knotenverweise ermitteln.

<source lang="javascript">
var entferneKnoten = function(knoten) {
if (!knoten.parentNode) {
throw new Error('no parent node');
}
knoten.parentNode.removeChild(knoten);
}

var spielerElement = document.querySelector('.spieler');
entferneKnoten(spielerElement);
</source>

=DOM Events=

==Ereignisorientierte Programmierung==

Für die Verarbeitung von stets verfügbaren Informationen eignet sich ein sequentieller Ablauf von Befehlen.
Ergeben sich Informationen jedoch dynamisch zur Laufzeit kann die ereignisorientierte Programmierung genutzt werden.

Hierbei wird nicht aktiv auf eine Information gewartet, das Programm wird benachrichtigt wenn ein Ereignis eintritt.
Somit gibt es nicht nur einen Kontrollfluss, sondern beliebig viele, welche sogar parallel ablaufen können.

==Ereignisse im Browser==

Bei der Interaktion mit Websites werden viele Ereignisse ausgelöst.
Zuerst wird die HTML-Seite geladen und gerendert, danach geschieht dies für alle referenzierten Inhalte.
Diese Vorgänge lösen Ereignisse aus, welche durch den Browser selbst verursacht werden.

Zum Beispiel gibt es Ereignisse für Medien, welche beschreiben, dass diese fertig geladen wurden.

Sobald der Browser beginnt eine Web-Seite zu rendern können Ereignisse durch den Benutzer ausgelöst werden.
Fast jede Interaktion löst ein Ereignis aus, welches wiederum in bestimmten Reaktionen resultiert.

'''Beispiele:'''
Klickt der Benutzer einen Link so ist das ein Ereignis, welches zur Folge hat dass die eine URL geladen wird.
Wird ein Scroll-Balken bewegt ergibt sich daraus ein Ereignis, welches den Browser scrollen lässt.

Zu den wichtigsten Arten von durch Benutzer ausgelöste Ereignissen zählen:
Mausbewegungen und -klicks, Tastatureingaben und Scrolling.

Eine vollständige Auflistung von Ereignissen finden Sie auf [https://developer.mozilla.org/en-US/docs/Web/Events dieser] MDN-Seite.
Nebem dem Benutzer gibt es noch andere Auslöser wie zum Beispiel verbundene Server.

==Aufbau eines Ereignisses==

Ein im Browser auftretendes Ereignis besitzt immer drei folgende Merkmale:

* '''Ereignis-Name:''' eine Zeichenkette die das Ereignis in der Gegenwart beschreibt, z.B. "click" oder "mousemove"
* '''Ereignis-Daten:''' ein Datenobjekt mit einer pro Ereignis festgelegten Struktur
* '''Ereignis-Ziel:''' ein Objekt das als Ziel des Ereignis gilt; in der Regel handelt es sich um DOM-Elemente

Beispiel: Eine '''Tastatureingabe''' in einem '''Formularfeld''', bei dem das Zeichen '''@''' eingegeben wird.

==Phasen der Ereignispropagierung==

Handelt es sich bei dem ursprünglichen Ziel eines Ereignisses um ein DOM-Objekt werden in der Regel drei Phasen durchlaufen.

===Capturing-Phase===

In Phase 1, der '''Capturing-Phase''', wird ein Ereignis mit dem obersten Dokumentenknoten als Ziel ausgelöst.
Dabei handelt es sich in der Regel um das <code>document</code>-Objekt, welches alle andere Nodes als Unterknoten enthält.
Es werden dann schrittweise Ereignisse ausgelöst für jeden Unterknoten auf dem Pfad zum ursprünglichen Ereignisziel.

</source>
+ window - Ereignis mit window als aktuelles Ziel (optional)
+ document - Ereignis mit body als aktuelles Ziel
+ body - Ereignis mit body als aktuelles Ziel
+ p - ursprüngliches Ziel
</source>

'''Anmerkung:''' Bei manchen Ereignissen ist <code>window</code> das oberste Objekt in der Hierarchie.

===Target-Phase===

Ist der Browser beim ursprünglichen Ziel angelangt wird in Phase 2 gewechselt, der sogenannten '''Target-Phase'''.
Dabei wird ein einzelnes Ereignis ausgelöst, für welches das ursprüngliche DOM-Objekt als Ziel verwendet wird.

===Bubbling-Phase===

Zum Abschluss der Ereignispropagierung wechselt der Browser in Phase 3, der sogenannten '''Bubbling-Phase'''.
Hierbei wird der Pfad der Capturing-Phase in umgekehrter Richtung durchlaufen und jeweils wieder ein Ereignis ausgelöst.

'''Anmerkung:''' In Bibliotheken wie jQuery hat man nur Zugriff auf die Bubbling-Phase, nicht auf die Capturing-Phase.

===Browser-Unterschiede===

Capturing und Bubbling bilden die Tatsache ab, dass wenn ein Ereignis auf einem Element stattfindet,
dieses Ereignis ebenso für die übergeordneten Elemente gültig ist.
'''Beispiel:''' Wird ein Mensch in einem Krankenhaus geboren, so wird er auch in einer Stadt und in einem Land geboren.

Einer der beiden Phasen wäre ausreichend für die Ereignisvearbeitung.
Aufgrund von unterschiedlichen Browser-Implementierungen existieren heutzutage jedoch beide gleichzeitig.

===Globale Ereignisse===

Beschreibt ein Ereignis ein globales Geschehen wird oftmals das <code>document</code> oder <code>window</code>-Objekt als Ereignisziel verwendet.
In diesen Fällen ist es möglich dass weder Capturing- noch eine Bubbling-Phase durchlaufen werden.

Beispiel: Das Ergeinis <code>DOMContentLoaded</code> beschreibt, dass eine Seite (ohne seine externen Medien) fertig geladen wurde.

==Ereignisverarbeitung==

Mithilfe der DOM-Schnittstelle erhält man die Möglichkeit Ereignisse selbst zu verarbeiten und darauf zu reagieren.

===Anmeldung===

Die Funktion <code>addEventListener</code> kann auf jedem DOM-Objekt, dem <code>document</code>-Objekt und dem <code>window</code>-Objekt aufgerufen werden.
Dabei ist das Objekt auf dem die Funktion aufgerufen das '''Ziel''' des Ereignisses, welches verarbeiten werden soll.

Die Funktion akzeptiert die folgenden drei Argumente:
* den '''Namen des Ereignisses''' das man verarbeiten möchte in Form eines Strings
* die '''Callback-Funktion''' welche das Ereignis-Objekt erwartet und den Code zur Verarbeitung enthält
* ein optionales '''Flag''' das bestimmt ob das Ereignis in der Capturing- oder Bubbling-Phase verarbeitet werden soll

Standardmäßig ist das Flag <code>false</code>, was bedeutet dass das Ereignis in der Bubbling-Phase verarbeitet wird.

Es wird für ein Ereignis auf einem Ziel ein Event-Lister in Form einer Funktion angemeldet.
Beim Eintreten des Ereignisses wird der sogenannte Callback aufgerufen und das entsprechende Ereignis-Objekt übergeben.

<source lang="javascript">
var seiteWurdeGeladen = function(event) {
console.log('Die Seite ist nun fertig geladen');
console.log(event);
}
document.addEventListener('DOMContentLoaded', seiteWurdeGeladen);
</source>

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<a id="link" href="#">Link</a>';
var link = document.querySelector('#link');
var linkWurdeGeklickt = function(event) {
console.log('Der Link wurde geklickt');
};
link.addEventListener('click', linkWurdeGeklickt);
</source>

Aufgrund der Phasen der Ereignispropagierung kann man Ereignisse global verarbeiten, unabhängig davon wo sie stattgefunden haben.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<a href="#">Link 1</a><br><a href="#">Link 2</a>';
var irgendwoWurdeGeklickt = function(event) {
console.log('Benutzer hat irgendwo auf der Seite geklickt');
};
document.addEventListener('click', irgendwoWurdeGeklickt);
</source>

===Callbacks===

Ein Callback ist eine Rückruffunktion, welche an ein andere Funktion übergeben wird und
zu späteren Zeitpunkten ggf. ausgeführt wird.

<source lang="javascript">
var mausWurdeBewegt = function(event) {
console.log('Benutzer hat die Maus bewegt');
};
document.addEventListener('mousemove', mausWurdeBewegt);
</source>

Es ist jedoch nicht garantiert dass eine übergebene Callback-Funktion überhaupt jemals ausgeführt wird.

<source lang="javascript">
var esIstOktober = function(event) {
console.log('Es ist Oktober');
};

var istEsOktober = function(callback) {
if (new Date().getMonth() == 9) callback();
};

istEsOktober(esIstOktober);
</source>

===Ereignis-Objekte===

Jedem Event-Listener-Callback wird beim Aufruf ein für ein Ereignis spezifisches Ereignis-Objekt übergeben.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event);
console.log(event.screenX);
console.log(event.screenY);
console.log(event.button);
});
</source>

Dieses Objekt enthält neben spezifischen auch generelle Ereignisinformationen wie zum Beispiel das Ereignis-Ziel.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target);
});
</source>

Hinsichtlich der drei Event-Phasen unterscheidet man zwischen ursprünglichem und aktuellem Ziel.
Das aktuelle Ziel ist das für welches das Ereignis aktuell gilt und das ursprüngliche das wo es stattgefunden hat.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target); // ursprüngliches Ziel
console.log(event.currentTarget); // aktuelles Ziel
});
</source>

Das aktuelle Ziel <code>currentTarget</code> entspricht also immer dem Objekt auf dem man den Event-Handler angemeldet hat.

===Abmeldung===

Mithilfe der Funktion <code>removeEventListener</code> kann ein angemeldeter Event-Listener wieder entfernt werden.
Diese Funktion nur zwei Argumente: Den Ereignis-Namen und die Event-Listener-Funktion.

<source lang="javascript">
var mausWurdeBewegt = function(event) {
console.log(event);
};

document.addEventListener('mousemove', mausWurdeBewegt);
document.removeEventListener('mousemove', mausWurdeBewegt);
</source>

===Standardverhalten===

Nachdem alle Ereignisse verarbeitet wurden führt der Browser gegegebenfalls eine "Default Action" aus.
Eine solche Aktion ist das Standardverhalten des Browsers als Reaktion auf das eingetretene Ereignis.

Beispiele:
* Benutzer klickt auf einen Link -> der Browser lädt die URL
* Benutzer führt Tastatureingaben in einem Feld aus -> der Browser fügt die Zeichen dem Feld hinzu

Innerhalb einer Event-Listener-Funktion ist es möglich mithilfe von <code>preventDefault()</code> das Standardverhalten zu unterdrücken.

<source lang="javascript">
document.addEventListener('click', function(event) {
event.preventDefault();
});
</source>

Der oben dargestellte Code führt dazu, dass kein Klick auf einen Link die enthaltene URL aufruft.

==Wichtige Events==

Die folgenden Ereignisse sind die wichtigsten in der täglichen browser-seitingen Anwendungsentwicklung mit JavaScript.

===DOMContentLoaded===

Dieses Ereignis beschreibt, dass das HTML geladen und interpretiert wurde und das DOM und CSSOM erzeugt und gerendert wurde.
Es wird keine Aussage darüber gemacht ob weitere externe Inhalte bereits geladen wurden, wie z.B. Bilder.
Das Ereignis wird ausschliesslich auf dem <code>document</code>-Objekt als Ereignisziel ausgelöst.

<source lang="javascript">
document.addEventListener('DOMContentLoaded', function(event) {
console.log('Mit der Seite kann interagiert werden');
});
</source>

===load===

Dieses Ereignis besagt, dass die gesamte Web-Seite inklusive aller externen referenziereten Inhalte gerendert wurden.
Im Gegensatz zu <code>DOMContentLoaded</code> wird dieses Ereignis ausschliesslich auf dem <code>window</code>-Objekt ausgelöst.

<source lang="javascript">
window.addEventListener('load', function(event) {
console.log('Die Seite wurde vollständig geladen');
});
</source>

===click===

Jedes Mal wenn der Benutzer (mit der Maus) auf ein sichtbares DOM-Element klickt wird dieses Ereignis ausgelöst.
Bei der Propagierung dieses Ereignisses werden wie alle drei Ereignisphasen (Capturing, Bubbling, Target) durchlaufen.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log('Der Benutzer hat auf etwas geklickt');
});
</source>

===mousemove, mouseover, mouseout===

Bei Mausbewegungen über DOM-Element wird konstant das Ereignis <code>mousemove</code> mit den entsprechenden Koordinaten ausgelöst.
Das Ereignis <code>mouseover</code> wird erzeugt wenn die Maus in ein Element eindringt, <code>mouseout</code> wenn es wieder verlassen wird.

<source lang="javascript">
document.addEventListener('mousemove', function(event) {
console.log('Der Benutzer hat die Maus bewegt');
});

document.addEventListener('mouseover', function(event) {
console.log('Der Benutzer hat die Maus über etwas bewegt');
});

document.addEventListener('mouseout', function(event) {
console.log('Der Benutzer hat die Maus von etwas weg bewegt');
});
</source>

===keydown, keyup, keypress===

Bei Tastatureingaben durch Benutzer auf einem Element werden die Ereignisse <code>keydown</code>, <code>keyup</code> und <code>keypress</code> ausgelöst.
Die drei unterschiedlichen Ereignisse beschreiben die unterschiedlichen Phasen einer Tastatureingabe.

<source lang="javascript">
document.addEventListener('keydown', function(event) {
console.log('Der Benutzer hat eine Taste gedrückt');
console.log(event);
});

document.addEventListener('keypress', function(event) {
console.log('Der Benutzer hat eine Taste betätigt');
console.log(event);
});

document.addEventListener('keyup', function(event) {
console.log('Der Benutzer hat eine Taste losgelassen');
console.log(event);
});
</source>

==Wiederverwendung==

Mithilfe von DOM Events kann auch ein genereller Event-Mechanismus für JavaScript implementiert werden.
Dazu wird ein DOM-Element erzeugt, welches als virtuelles Ereignisziel dient und nicht ins Dokument eingehängt wird.

<source lang="javascript">
var EventDispatcher = function() {

var target = document.createElement('div');

this.addEventListener = function(type, callback) {
target.addEventListener(type, callback);
};

this.dispatchEvent = function(type, detail) {
var event = new CustomEvent(type, {
bubbles: true,
canceable: true,
detail: detail
});
target.dispatchEvent(event);
};

this.removeEventListener = function(type, callback) {
target.removeEventListener(type, callback);
};

};
</source>

Diese Klasse kann dann in beliebigen anderen Komponenten dazu genutzt werden um Ereignisse zu erzeugen und zu propagieren.

<source lang="javascript">
var Spieler = function(name) {
this.eventDispatcher = new EventDispatcher();

this.springe = function() {
this.eventDispatcher.dispatchEvent('springen', this);
}

this.wennSpielerSpringt = function(callback) {
this.eventDispatcher.addEventListener('springen', callback);
}
}
var spieler = new Spieler('John');
spieler.wennSpielerSpringt(function() {
console.log('Spieler springt');
});
spieler.springe();
</source>

=Timer=

Timer in JavaScript dienen dazu um CPU-intensive Berechnungen in mehrere Teile zu spalten und um Animation zu erzeugen.

==JavaScript-Thread==

Der Browser stellt für jede dargestellte Web-Seite einen einzelnen Thread zur Verfügung.
Dieser kümmert sich um das Rendering der Web-Seite, die Verarbeitung von Events und die Ausführung von JavaScript.
Mit Ausnahme des HTML5-Standards der WebWorker gibt es dementsprechend in JavaScript kein Multithreading.

Intern bestitzt der Thread eine Liste an Aufgaben die er stets als nächstes ausführen wird, der sogenannten Queue.
Wird eine Web-Seite zum ersten Mal geladen verursacht dies gleich mehrere Einträge in der Queue, wie zum Beispiel:

* Parsen des Markups und Aufbau des DOMs
* Parsen des CSS und Aufbau des CSSOMs
* Rendering der Seite
* Ausführung von geladenem JavaScript-Code

Manche Aufgaben benötigen unter Umständen viel Zeit und können so auch die Ausführung anderer Aufgaben beeinflussen.
Nimmt ein Stück JavaScript-Code die CPU zu lange in Anspruch kann der Browser z.B. keine Benutzereingaben mehr vearbeiten.
Um dies zu vermeiden ist ein Zeit- bzw. Code-Limit für JavaScript eingebaut bevor der Browser eine Warnung ausgibt.

<source lang="javascript">
var programmStart = new Date();
var wartezeitInMs = 5000;
while (new Date() - programmStart < wartezeitInMs) {
// nichts tun
};
</source>

==Timeouts==

Mithilfe der Funktion <code>setTimeout(callback, delayMs)</code> kann man einen einmalig auszuführenden Timer auf der Thread-Queue anmelden.
Die übergebene Callback-Funktion wird '''ungefähr''' nach einer Wartezeit mit Länge der übergebenen Dauer ausgeführt.

Es werden Einträge in der Thread-Queue erzeugt die überprüfen ob es Zeit ist den Callback auszuführen und das dann ggf. tun.
Aufgrund der vielen Aufgaben des Threads kann die Wartezeit überschritten werden, wenn andere Aufgaben viel Zeit beanspruchen.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log('Nachricht ' + vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 500);
while (new Date() - programmStart < 1000) {
// nichts tun
}
</source>

Eine Wartezeit von 0 Millisekunden heißt, dass der Interpreter die Callback-Funktion so bald wie möglich ausführen soll.
Abhängig von der Browser-Implementierung kann es sein dass die minimale Wartezeit aber bis zu 15 Millisekunden beträgt.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log('Nachricht ' + vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 0);
</source>

Es ist möglich mit Timern CPU-intensive Aufgaben in mehrere Teile zu spalten oder auch Aufgaben wiederholt auszuführen.
Dazu erzeugt man einfach eine Funktion welche sich wiederum selbst durch einen <code>setTimeout()</code>-Aufruf als Timer registriert.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
setTimeout(loggeAktuelleZeit, 15);
};
loggeAktuelleZeit();
</source>

Soll die wiederholte Ausführung beendet werden kann dies durch einen Aufruf von <code>clearTimeout(timeoutId)</code> erreicht werden.
Dabei wird der Eintrag mit gegebener Timeout-ID aus der Thread-Queue gelöscht wodurch der angemeldete Timer nicht ausgeführt wird.
Die notwendige Timeout-ID für die Abmeldung wird beim Anmelden durch <code>setTimeout()</code> als numerischer Rückgabewert bereitgestellt.

<source lang="javascript">
var timeoutId = null;
var loggeAktuelleZeit = function() {
console.log(new Date());
timeoutId = setTimeout(loggeAktuelleZeit, 15);
};
loggeAktuelleZeit();
setTimeout(function() {
clearTimeout(timeoutId);
}, 2500);
</source>

'''Anmerkung:''' <code>setTimeout()</code> eignet sich vor allem für wiederholende Aufgaben welche nichts mit Rendering zu tun haben.

==Intervalle==

Außerdem existiert die Funktion <code>setInterval(callback, delayMs)</code> welche einen wiederholt auszuführenden Timer regsitriert.
Es wird ebenso eine Callback-Funktion erwartet und eine Wartezeit zwischen den einzelnen Ausführungen des Callbacks.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
};
setInterval(loggeAktuelleZeit, 15);
</source>

Analog zu <code>setTimeout()</code> wird eine Interval-ID zurückgegeben, welche für die Abmeldung mittels <code>clearInterval()</code> genutzt werden kann.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
};
var intervalId = setInterval(loggeAktuelleZeit, 15);
setTimeout(function() {
clearInterval(intervalId);
}, 2500);
</source>

Zunächst wirkt <code>setInterval()</code> komfortabler, da der Callback nicht durch die wiederholende Timer-Registrierung verunreinigt wird.
Jedoch besteht bei dieser Funktion der Nachteil dass die Messung der Wartezeit '''vor''' Ausführung des Callbacks beginnt.
Registriert man eine Aufgabe die länger braucht als die definierte Wartezeit wird der JavaScript-Thread sehr stark beansprucht.

<source lang="javascript">
var warteEineBestimmeZeit = function() {
var funktionsStart = new Date();
var wartezeitInMs = 50;
while (new Date() - funktionsStart < wartezeitInMs) {
// nichts tun
};
};
setInterval(warteEineBestimmeZeit, 15);
</source>

Obwohl der Browser zwar noch CPU-Zeit zur Verfügung hat ist er fast nur damit beschäftigt die überfälligen Callbacks auszuführen.
Aufgrund dessen ist es sinnvoller <code>setInterval()</code> für wiederholende Aufgaben zu verwenden deren Dauer nicht exakt vorhersehbar ist.

Aufgrund der vielen verschiedenen Aufgaben des JavaScript-Threads ist eine exakte Wartezeit bei Timern nicht garantiert.
Sollen Werte abhängig von der vergangenen Zeit verändern sollten Datum-Objekte in die Berechnungen mit einbezogen werden.

<source lang="javascript">
var objekt = {position: 0, geschwindigkeitProSekunde: 1};
var letzterTimerAufruf = new Date();
var bewegeObjekt = function() {
var vergangeneZeitInMs = new Date() - letzterTimerAufruf;
objekt.position += geschwindigkeitProSekunde * (vergangeneZeitInMs / 1000);
console.log('Aktuelle Position: ' + objekt.position);
letzterTimerAufruf = new Date();
setTimeout(bewegeObjekt, 1000);
};
bewegeObjekt();
</source>

==Animation Frames==

Mithilfe von <code>setTimeout()</code> ist es möglich neben wiederholenden Aufgaben auch Animationen im Browser zu implementieren.
Dazu werden in der Callback-Funktion einfach die zu bewegenden Elemente entsprechend in ihrer Form und Position verändert.

<source lang="javascript">
var div = document.createElement('div');
div.setAttribute('style', 'width: 40px; height: 40px; background-color: #F00; position: absolute; top: 0px');
document.querySelector('body').appendChild(div);
var xPosition = 0;
var bewegeRechteck = function() {
xPosition = xPosition + 1;
div.style.left = xPosition + 'px';
setTimeout(bewegeRechteck, 15);
};
bewegeRechteck();
</source>

In diesem Fall wird versucht dass Rechteck ca. 60 Mal in der Sekunde zu bewegen, also eine Bildwiederholrate von 60 simuliert.
Es kann allerdings vorkommen dass der Browser viele anderen Dingen zu tun hat und ihn ein solcher Timer zusätzlich sehr beansprucht.

Deshalb gibt es speziell für Animationen und visuelle Änderungen die Funktion <code>requestAnimationFrame(callback)</code>.
Diese erwartet lediglich einen Callback und kümmert sich intern darum wann der Callback das nächste Mal ausgeführt wird.

<source lang="javascript">
var div = document.createElement('div');
div.setAttribute('style', 'width: 40px; height: 40px; background-color: #F00; position: absolute; top: 0px');
document.querySelector('body').appendChild(div);
var xPosition = 0;
var bewegeRechteck = function() {
xPosition = xPosition + 1;
div.style.left = xPosition + 'px';
requestAnimationFrame(bewegeRechteck, 15);
};
bewegeRechteck();
</source>

Analog zu <code>clearTimeout()</code> und <code>clearInterval()</code> gibt es die Funktion <code>cancelAnimationFrame(frameId)</code> für die Abmeldung.
Diese akzeptiert eine Frame-ID welche wiederum von <code>requestAnimationFrame()</code> zurückgegeben wird.

'''Anmerkung:''' Es ist empfehlenswert Animation mit <code>requestAnimationFrame</code> zu implementieren.

MMProg:WiSe2015:Praktikum:Aufgabe 7

2015-10-15T10:30:03Z

Lawrence:

=Praktikumsaufgabe 7=

==Rendering und Animation==

===Ziel===

Ziel dieser Aufgabe ist es ein einfaches Spiel mithilfe von Timern, DOM und SVG im Browser zu rendern.

Das Spiel besteht darin herunterfallenden Hindernissen auszuweichen. Der Spieler wird mit den Cursortasten gesteuert.

===Projekt vorbereiten===

Erzeugen Sie einen neuen Ordner "aufgabe7" innerhalb Ihres Verzeichnis für die Praktikumsaufgaben.
Speichern Sie alle Dateien aus dem Vorlagenordner "aufgabe7/vorlage" in diesem Ordner ab.

Die Vorlage enthält ein voll funktionierendes Spiel, welches aus den folgenden Komponenten besteht:

* '''model/Player.js''' - Modell eines Spielers
* '''model/Enemy.js''' - Modell eines Gegners
* '''model/EnemyFactory.js''' - Erzeugt in regelmäßigen Abständen zufällige Gegner
* '''model/Level.js''' - Modell eines physikalischen Levels; bewegt die Spielobjekte und überprüft Kollisionen
* '''controller/GameController.js''' - Verarbeitet Benutzereingaben und gibt Änderungen der Modelle an die Views weiter
* '''index.js''' - Startet das Spiel, erzeugt und orchestriert die einzelnen Komponenten

Die Datei "index.js" wartet zunächst auf Eingaben durch den Benutzer um daraufhin das Spiel zu starten.
Dabei wird im ersten Schritt eine physikalische Welt erzeugt und ein Spieler dieser hinzugefügt.
Des Weiteren wird eine EnemyFactory erstellt, welche Gegner erzeugt, die auch der physikalischen Welt hinzugefügt werden.

Damit die Spielobjekte im Browser gerendert werden können wird außerdem ein View-Objekt erzeugt.
Ebenso wie der physikalischen Welt werden die Spieler- und Gegner-Objekte auch der View hinzugefügt.
Welche View-Technologie verwendet wird um das Spiel darzustellen kann der Benutzer vor dem Spielstart entscheiden.

===Funktionsweise von Views===

Unabhängig davon welche Technologie zum Rendern verwendet wird, folgen die Views immer der gleichen Logik und Struktur.
Es gibt eine Konstruktorfunktion (<code>DOMView</code> oder <code>SVGView</code>) welche ein View-Objekt erzeugt.
Diese Konstruktorfunktion erwartet ein DOM-Element, in dem die Ansicht eingebaut werden soll, und eine Höhe und Breite.

Sobald ein View-Objekt erzeugt wird, soll es sich automatisch um das regelmäßige Rendern der Spiels kümmern.
Dazu muss ein solches Objekt die zwei Funktionen <code>addObjectView()</code> und <code>destroy()</code> implementieren.

<code>addObjectView(object, color)</code> erzeugt für ein gegebenes Objekt (z.B. Spieler) eine entsprechende View-Repräsentation.
Das Objekt wird als '''Rechteck''' an seiner x- und y-Position mit seiner Breite und Höhe und der gegegebenen Farbe dargestellt.
Verändert sich die Position des Objekts im Laufe des Spiels, so muss die View dies in regelmäßigen Abständen abbilden.

Nutzen Sie einen geeigneten Timer, wie zum Beispiel <code>requestAnimationFrame()</code>, um den Render-Vorgang wiederholt auszuführen.

<source lang="javascript">
var renderRepeatedly = function() {
console.log('rendering');
window.requestAnimationFrame(renderRepeatedly);
}
renderRepeatedly();
</source>

Um beim Render-Durchgang festzustellen welches View-Objekt welche Positions- und Formänderungen abbilden muss,
muss die Verknüpfung von dem zu rendernden Objekt und dem View-Objekt in einer Liste gespeichert werden.

Beispielhafte Implementierung:

<source lang="javascript">
var childViews = [];
this.addObjectView = function(object, color) {
var div = document.createElement('div');
// ... style and add div element
childViews.push({
object: object,
div: div
});
};
</source>

<code>destroy()</code> muss dafür Sorge tragen, dass eine View korrekt entfernt wird, inklusive aller verwendeten Timer.

===Views implementieren===

Im Folgenden gilt es die zwei unterschiedlichen Views zu implementieren, die das Spiel dann darstellen sollen.
Für jede View-Technologie ist im Vorlagen-Ordner bereits eine Datei angelegt mit einer minimalen Code-Vorgabe.

====DOM-View====

Implementieren Sie im ersten Schritt eine DOM-View, welche das Spiel mithilfe von DOM-Elementen darstellt.

'''Tipp:''' Rechtecke können Sie einfach mit absolut positionierten <code>div</code>-Elementen darstellen.

Beispielcode:

<source lang="javascript">
var viewElement = document.createElement('div');
viewElement.style.position = 'absolute';
viewElement.style.backgroundColor = 'green';
viewElement.style.width = '40px';
viewElement.style.height = '40px';
viewElement.style.left = '5px';
viewElement.style.top = '5px';
</source>

====SVG-View====

Implementieren Sie anschließend eine SVG-View, welche das Spiel mithilfe von SVG-Elementen darstellt.
'''Wichtig:''' Wenn Sie SVG-Elemente mit der DOM-API erzeugen wollen müssen die Funktion <code>createElementNS()</code> verwenden.

<source lang="javascript">
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('version', '1.1');
svg.setAttribute('width', '500');
svg.setAttribute('height', '500');
svg.setAttribute('x', '10');
svg.setAttribute('y', '10');

var rect = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.appendChild(rect);
</source>

===Optional: Darstellung anpassen===

Ändern Sie die Views so ab, dass Spieler und Gegner nicht mehr als Rechtecke sondern als Bilder dargestellt werden.
Der Spieler kann zum Beispiel als Raumschiff und die Gegner als entgegenkommende Meteoriten dargestellt werden.

'''Anmerkung:''' Falls Sie Bilder aus dem Internet nutzen möchten achten Sie biite auf die entsprechenden Bildrechte.

===Links===

Nutzen Sie die folgenden Links für weitere Information über Timer und SVG:

* https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout
* https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setInterval
* https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
* https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

JavaScript-Tutorium:Browser

2015-10-14T21:55:09Z

Lawrence: /* DOM Events */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten bei der JavaScript-Entwicklung im Browser zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Einführung=

==Native vs. Host==

In einer JavaScript-Umgebung existieren zwei Arten von Objekte.
'''Native Objekte''' werden von der Engine bereitgestellt und sind durch den ECMAScript-Standard abgedeckt.
'''Host-Objekte''' sind nicht immer standardisiert und werden von der Umgebung bereitgestellt.
Im Browser handelt es sich bei Host-Objekten um Schnittstellen für den Zugriff auf den Browser und externe Geräte.

==HTML5-Standard==

Obwohl es den ECMAScript-Standard gibt, muss man davon ausgehen,
dass sich die verfügbaren APIs von Browser zu Browser unterscheiden können.
Durch die steigende Entwicklungsgeschwindigkeit der Browser-Hersteller und den
[https://html.spec.whatwg.org/multipage/ HTML5-Standard] verbessert sich diese Situation.

Heutzutage kann man davon ausgehen, dass jeweils die neuesten Versionen von Firefox und Chrome
die DOM-API und viele der neu verfassten HTML5-APIs bereits standardkonform unterstützen.

==Inline Code vs. externe Dateien==

Eine im Browser angezeigte Web-Seite besteht meist aus HTML, CSS und JavaScript, wobei nur HTML zwingend verlangt ist.
Der JavaScript-Code kümmert sich normalerweise um die dynamischen Aspekte, wie Interaktionen und das Nachladen von Inhalten.

Der Browser lädt ein HTML-Dokument unter der angegebenen URL herunter und evaluiert dieses.
Das Dokument enthält optional Verweise auf CSS-Dateien, Bilder, JavaScript-Dateien und andere Medien.
Neben Verweisen auf externen JavaScript-Code kann das Dokument auch Inline-Code enthalten.
Ob es sich um externe Dateien oder Inline-Code handelt wirkt sich auf die Ladezeiten aus,
der Code selbst wird davon nicht beeinflusst.

'''Anmerkung:''' Die Reihenfolge der eingebunden Code-Blöcke und angegebenen Dateiverweise ist wichtig,
da diese ebenso die Reihenfolge der Code-Ausführung darstellt.

==JavaScript-Kontext==

Für jede Web-Seite, unabhängig davon ob sie im separaten Fenster oder als Tab angezeigt wird,
erzeugt der Browser einen separaten isolierten JavaScript-Kontext, in dem Code ausgeführt wird.
Das bedeutet, dass alle Objekte und Funktionen nur so lange existieren bis die Seite neu geladen oder verlassen wird.
Ein Zugriff auf andere Seiten ist aus Sicherheitsgründen nicht erlaubt.

=Window=

Das globale Objekt <code>window</code> referenziert alle im Browser verfügbaren Objekte und Werte als Eigenschaften (native und host).

<source lang="javascript">
console.log(window.Object);
console.log(window.XMLHttpRequest);
</source>

Für den Zugriff auf globale Eigenschaften ist es nicht notwendig explizit <code>window</code> zu schreiben.

<source lang="javascript">
console.log(Date == window.Date);
console.log(new Date());
</source>

Alle nicht innerhalb von Funktionen deklarierten Variablen werden automatisch an das globale Objekt angehängt.

<source lang="javascript">
var globaleVariable = 'global';
var globaleFunktion = function() {};
console.log(window.globaleVariable);
console.log(window.globaleFunktion);
</source>

==Modifikation von Eigenschaften==

Da es sich um ein normales Objekt handelt können die meisten Eigenschaften modifiziert und auch gelöscht werden.

'''Anmerkung:''' Veränderungen von globalen Eigenschaften sind nicht sinnvoll und können schwerwiegende Fehler verursachen.

<source lang="javascript">
window.Object = {};
var objekt = new Object();

delete window.Array;
var array = new Array();
</source>

Das <code>window</code>-Objekt wird vom Browser mithilfe der Konstruktorfunktion <code>Window</code> erzeugt, welche auch global verfügbar ist.

<source lang="javascript">
console.log(window.constructor == window.Window);
</source>

==Popups und Frames==

Neben dem globalen Fenster-Objekt kann eine Web-Seite beliebig viele weitere <code>window</code>-Objekte enthalten.
Dabei handelt es sich dann entweder um durch Code erzeugte Popups oder aber um Frames (besser bekannt als iframes).

<source lang="javascript">
window.open('https://www.google.com', 'Google im Popup', 'width=400,height=300,resizable=yes');
</source>

Frames können entweder durch das entsprechende HTML oder aber auch wie im Code gezeigt programmatisch erzeugt werden.

==Browser-Schnittstellen==

Abgesehen von den nativen Objekten notwendigen Objekte enthält <code>window</code> wichtige Browser- und Geräte-Schinttstellen.
Dazu zählen zum Beispiel Funktionen um Dialoge im Browser zu öffnen oder aber sogar um Game-Controller zu verwenden.

<source lang="javascript">
var name = window.prompt('Wie ist Ihr Name?');
window.alert('Hello ' + name);
window.alert('Die aktuelle Seite ist ' + window.innerWidth + 'px breit');

console.log(window.Gamepad);
</source>

Eine komplette Liste der verfügbaren Eigenschaften finden Sie auf
[https://developer.mozilla.org/de/docs/DOM/window dieser] MDN-Seite.
In den folgenden Abschnitten werden exemplarisch ein paar wichtige Objekte im Detail beschrieben.

=Beispiel für Browser-Schnittstellen=

==Location==

<code>location</code> ist ein globales Objekt welches die aktuelle URL und ihre Bestandteile enthält und diese auch verändern kann.
Das Objekt wird analog zum <code>window</code>-Objekt mithilfe der Konstruktorfunktion <code>Location</code> erstellt.

<source lang="javascript">
console.log(window.location.constructor == window.Location);
</source>

===Abfragen der URL===

Die Eigenschaft <code>href</code> enhtält die gesamte aktuelle URL. Alternativ kann auch <code>location.toString()</code> genutzt werden.

<source lang="javascript">
console.log(location.href);
console.log(location.toString());
</source>

Um einzelne Bestandteile der URL ermitteln zu können werden viele separate Eigenschaften bereitgestellt.

<source lang="javascript">
console.log(location.protocol);
console.log(location.host);
console.log(location.port);
console.log(location.pathname);
console.log(location.hash);
</source>

===Verändern der URL===

Diese Eigenschaften können nicht nur lesend genutzt werden, sondern auch um Änderungen an der aktuellen URL vorzunehmen.

Mit der Ausname von <code>location.hash</code> führen Änderungen der Eigenschaften zum Verlassen der aktuellen Seite.

<source lang="javascript">
location.protocol = 'http';
location.port = '8080';
location.hash = '#anker';
location.href = 'https://www.google.com';
</source>

Des Weiteren gibt es ein paar Funktionen um die URL zu modifizieren oder aber die Seite neuzuladen:</source>

<source lang="javascript">
location.assign('https://www.google.com');
location.reload(true);
</source>

==History==

Das globale <code>history</code>-Objekt ermöglicht den programmatischen Zugriff auf den Browser-Verlauf.
Es werden Funktionen zur Verfügung gestellt um im Verlauf beliebig viele Schritte zurück und vorwärts zu gehen.

<source lang="javascript">
history.back();
history.forward();
history.go(-3);
history.go(3);
</source>

'''Anmerkung:''' Aus Sicherheitsgründen ist es nicht erlaubt auf Informationen einzelner Einträge im Verlauf zuzugreifen.

==Navigator==

Für detaillierte Informationen über den aktuellen Client bzw. Browser existiert das <code>navigator</code>-Objekt.
Die meistgenutzte Eigenschaft <code>navigator.userAgent</code> ermöglicht das Feststellen des Browser-Herstellers.

<source lang="javascript">
console.log(navigator.userAgent);
console.log(navigator.battery);
</source>

=Document Object Model=

Einem <code>window</code>-Objekt können beliebig viele Dokumentenobjekte zugeordnet werden, mindestens aber ein Hauptdokument.
Das Hauptdokument wird über die globale Variable <code>document</code> zur Verfügung gestellt.
Die Schnittstelle für den Dokumentenzugriff wird durch das [http://www.w3.org/DOM/ Document Object Model] spezifiziert.

==Objektmodell==

Ein <code>Document</code>-Objekt repräsentiert ein vom Browser interpretiertes HTML-Dokument als Objektmodell mit einer Baumstruktur.
Dabei werden Tags, Texte und Kommentare in Knoten umgewandelt, wobei Tag-Knoten wiederum Unterknoten haben können.

<source lang="html4strict">
<html>
<head>
<title>Titel</title>
</head>
<body>
<p>
Text

</p>
<input type="text" value="Eingabe">

</body>
</html>
</source>

Das Markup wird in folgendes Objektmodell übersetzt:

* Ein '''html'''-Knoten mit den Unterknoten '''head''' und '''body'''
* Ein '''head'''-Knoten mit dem Unterknoten '''title'''
* Ein '''title'''-Knoten mit einem Text-Unterknoten
* Ein '''body'''-Knoten mit den Unterknoten '''p''' und '''input'''
* Ein '''p'''-Knoten mit einem Text- und einem Kommentar-Unterknoten
* Ein '''input'''-Knoten

'''Tipp:''' Achtet man bei HTML auf eine korrekte Einrückung so ist das resultierende Objektmodell meist gut erkennbar.

===Markup-Korrekturen===

Bei dem Objektmodell handelt es sich '''nicht''' um exaktes Abbild des originalen Markups.
Der Unterschied wird klar, wenn man das Resultat von invalidem HTML untersucht.

<source lang="html4strict">
<html>
<head>
<title>Titel</title>
</head>
<body>
<table>
<tr>
<td>Tabelle</td>
</tr>
</table>
</body>
</html>
</source>

Der Browser fügt zwischen dem <code>table</code>- und dem <code>tr</code>-Knoten einen <code>tbody</code>-Knoten ein.

==Aufbau von Dokumenten==

===Node-Objekte===

Jeder Knoten innerhalb eines Dokumentenobjekts ist direkt oder indirekt abgeleitet vom <code>Node</code>-Konstruktor/-Prototypen.
Mit Ausnahme des Dokumentenobjekts selbst wird allen Knoten ein Dokument zugeordnet durch die <code>ownerDocument</code>-Eigenschaft.

Des Weiteren hat jeder Knoten einen numerischen Typen, der in der Eigenschaft <code>nodeType</code> gespeichert wird.
Die gängisten Typen von Dokumentenknoten sind:

* 1: ELEMENT_NODE
* 3: TEXT_NODE
* 8: COMMENT_NODE
* 9: DOCUMENT_NODE

Eine vollständige Referenz der Eigenschaften von Node-Objekten finden Sie auf
[https://developer.mozilla.org/en-US/docs/Web/API/Node dieser] MDN-Seite.

===Document-Objekte===

Das Dokument selbst repräsentiert ein abstraktes Dokument und somit kein HTML-Element.
Es verweist aber auf das <code>html</code>-Element mit der Eigenschaft <code>documentElement</code>.

<source lang="javascript">
console.log(document.documentElement);
</source>

Mithilfe eines Dokuments ist es möglich neue <code>Element</code>-Objekte zu erstellen, einzufügen und diese zu suchen.

===Element-Objekte===

Jedes HTML-Tag wird in einen Knoten übersetzt, welcher mit dem <code>Element</code>-Konstruktor erzeugt wird.
Element-Objekte besitzen Schnittstellen um auf Eigenschaften des Tags zuzugreifen und diese zu modifizieren.

<source lang="javascript">
console.log(document.documentElement.tagName);
console.log(document.documentElement.innerHTML);
</source>

Ebenso wie Dokumente können Element-Objekten weitere Node-Objekte als Unterknoten angehängt und nach ihnen gesucht werden.

==Erstellen von Elementen==

Neue Element-Objekte werden über die Funktion <code>createElement()</code> eines <code>document</code>-Objekts unter Angabe des Tag-Namens erzeugt.

<source lang="javascript">
var absatz = document.createElement('p');
console.log(absatz.tagName);
console.log(absatz.nodeType);
</source>

Bei der Erstellung wird das neue Element dem augerufenen Dokument durch die Eigenschaft <code>ownerDocument</code> als zugehörig markiert.

<source lang="javascript">
var block = document.createElement('div');
console.log(block.ownerDocument);
</source>

Da die Schnittstelle eines Dokuments nicht mit HTML-Standards gekoppelt ist, können beliebige Tag-Namen vergeben werden.

<source lang="javascript">
var meinElement = document.createElement('mein-element');
console.log(meinElement);
</source>

==Suchen von Elementen==

Besonders wichtig bei der Arbeit mit Dokumenten ist die Suche von einzelnen oder mehreren Elementen.
Aufgrund dessen haben sich die Schnittstellen für die Suche im Browser über die letzten Jahre rapide verbessert.

===Vorgefertige Kriterien===

Die ursprünglichen Funktionen zum Suchen von Elementen erlauben wenige festgelegte Kriterien.

<source lang="javascript">
var spielfeld = document.getElementById('spielfeld');
console.log(spielfeld);

var divElemente = document.getElementsByTagName('div');
console.log(divElemente);

var gegnerElemente = document.getElementsByClassName('gegner');
console.log(gegnerElemente.length);
</source>

Auf diese Weise können Elemente anhand der ID, Klasse oder des Tag-Namen gesucht werden.
Der Rückgabewert ist bei der ID-Suche ein <code>Node</code>-Objekt und bei den anderen eine <code>NodeList</code>, ein Array-artiges Objekt von Nodes.

===CSS-Selektoren===

Die Suche mithilfe von vorgefertigen Kriterien hat deutliche Limitierungen.
Deswegen enstand durch Bibliotheken wie jQuery das Konzept von Query-Selektoren, welche als
[http://www.w3.org/TR/CSS2/selector.html CSS-Selektoren] standardisiert werden und in vielen Browser verfügbar sind.

Eine CSS-Selektorgruppe beschreibt beliebig viele Kriterien, die auf ein oder mehrere HTML-Elemente zutreffen.
Der Name wurde so gewählt, da diese ebenso in Stylesheets genutzt werden um Elemente auszuwählen.
Aufgrund der Kombinierbarkeit von CSS-Selektoren ergibt sich eine sehr mächtige Suchfunktionalität.

Es gibt zwei Funktionen für die Suche mit CSS-Selektoren:

* <code>document.querySelector()</code> liefert das erste Element zurück welches die Kriterien erfüllt
* <code>document.querySelectorAll()</code> liefert alle Elemente zurück welche die Kriterien erfüllen in Form einer <code>Node</code>-Liste

====Mögliche Kriterien====

Das einfachste Kriterium für einen CSS-Selektor ist die Angabe eines Tag-Namen.

<source lang="javascript">
var absaetze = document.querySelectorAll('p');
console.log(absaetze);
</source>

Die Angabe einer ID eines HTML-Elements erfolgt durch eine vorangestellte Raute (<code>#</code>).

<source lang="javascript">
var spielfeldElement = document.querySelector('#spielfeld');
console.log(spielfeldElement);
</source>

Klassen-Selektoren werden durch einen vorangestellten Punkt (<code>.</code>) gekennzeichnet.

<source lang="javascript">
var gegnerElemente = document.querySelectorAll('.gegner');
console.log(gegnerElemente);
</source>

Die Mächtigkeit von CSS-Selektoren ergibt sich vor allem durch die beliebige Kombinationsmöglichkeiten von Selektoren.

<source lang="javascript">
var schwierigeGegnerElemente =
document.querySelectorAll('.gegner.schwierig');
console.log(schwierigeGegnerElemente);
</source>

'''Anmerkung 1:''' Die Komplexität einer CSS-Selektorgruppe beeinflusst die Performance einer Suche.

'''Anmerkung 2:''' Eine vollständige Erklärung der Funktionsweise von CSS-Selektoren ist nicht Ziel dieses Tutoriums.
Diese Einführung dient lediglich dazu ein grundsätzliches Verständnis für den Umgang mit Selektoren zu vermitteln.

==Hinzufügen von Elementen==

Neu erstellte Elemente können im Dokument als untergeordnete Knoten mithilfe von <code>appendChild()</code> eingefügt werden.

<source lang="javascript">
var spielerElement = document.createElement('div');
document.documentElement.appendChild(spielerElement);
</source>

Der künftig übergeordnete Knoten muss angesprochen werden, wenn das Element an einer bestimmten Stelle landen soll.

<source lang="javascript">
var spielerElement = document.querySelector('div');
var spielfeld = document.createElement('div');
spielfeld.appendChild(spielerElement);
</source>

==Modifizieren von Elementen==

Mithilfe der entsprechenden DOM-Schnittstellen können Text, HTML, Attribute sowie das Styling von Elementen beeinflusst werden.

===Ändern von Text und HTML===

Der gesamte HTML-Inhalt eines Elements kann mithilfe der Eigenschaft <code>innerHTML</code> beeinflusst werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = 'Hallo Welt';
</source>

Abseits von einfachen Text-Änderungen lässt sich sogar das gesamte enthaltene HTML beeinflussen.
Anstatt also mit der DOM-API einzelne Elemente zu erzeugen kann einfach Markup als Wert zugewiesen werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<p>Hallo <strong>Welt!</strong></p>';
</source>

===Ändern von Attributen===

Für den Zugriff auf die Attribute eines HTML-Elements gibt es die Funktionen <code>getAttribute()</code> und <code>setAttribute()</code>.
Beide akzeptieren als erstes Argument den Namen des Attributs, der Setter akzeptiert außerdem einen zu setzenden Wert.

<source lang="javascript">
var spielerElement = document.createElement('div');
spielerElement.innerHTML = '_|_';
spielerElement.setAttribute('class', 'spieler');
document.querySelector('body').appendChild(spielerElement);

console.log(spielerElement.getAttribute('class'));
</source>

'''Anmerkung:''' Besonders häufige Attributsänderungen sind das Hinzufügen und/oder Entfernen von Klassen.
Dafür gibt es in neueren Browsern die Liste <code>classList</code> auf jedem <code>Element</code>-Objekt, welche die Arbeit erleichtert.

<source lang="javascript">
var spielerElement = document.querySelector('.spieler');
spielerElement.classList.add('unbesiegbar');
</source>

===Ändern von CSS-Eigenschaften===

Neben dem Document Object Model existiert außerdem der [http://dev.w3.org/csswg/cssom/ CSS Object Model Standard]
welcher die Schnittstelle für den Zugriff auf CSS-Eigenschaften von DOM-Objekten standardisiert.

Ein jedes DOM-Element vom Typ <code>Element</code> besitzt eine Eigenschaft <code>style</code> welche alle CSS-Eigenschaften beherbergt.

<source lang="javascript">
var body = document.querySelector('body');
console.log(body.style.color);
console.log(body.style.padding);
</source>

Diese Eigenschaften spiegeln die in Stylesheets definierten Regeln wieder, jedoch inklusive dem kaskadierenden Charakter.
Das heisst dass ein Element-Objekt nicht zwingend selbst eine <code>color</code> besitzt, diese jedoch für die Anzeige vererbt bekommt.

Die Eigenschaften können ebenso beliebig modifiziert werden, was zu einer sofortigen Anpassung der Darstellung führt.

<source lang="javascript">
var body = document.querySelector('body');
body.style.backgroundColor = '#AAF';
</source>

==Löschen von Elementen==

Ebenso wie neue Elemente einem Dokument hinzugefügt werden können, so können diese oder bestehende auch gelöscht werden.
Dazu muss man den übergeordneten Knoten ansteuern und mithilfe von <code>removeChild()</code> die Entfernung durchführen.

<source lang="javascript">
var spielfeld = document.querySelector('.spielfeld');
var spielerElement = spielfeld.querySelector('.spieler');
spielfeld.removeChild(spielerElement);
</source>

Ist einem der übergeordnete Knoten nicht bekannt so kann diesen mithilfe der Knotenverweise ermitteln.

<source lang="javascript">
var entferneKnoten = function(knoten) {
if (!knoten.parentNode) {
throw new Error('no parent node');
}
knoten.parentNode.removeChild(knoten);
}

var spielerElement = document.querySelector('.spieler');
entferneKnoten(spielerElement);
</source>

=DOM Events=

==Ereignisorientierte Programmierung==

Für die Verarbeitung von stets verfügbaren Informationen eignet sich ein sequentieller Ablauf von Befehlen.
Ergeben sich Informationen jedoch dynamisch zur Laufzeit kann die ereignisorientierte Programmierung genutzt werden.

Hierbei wird nicht aktiv auf eine Information gewartet, das Programm wird benachrichtigt wenn ein Ereignis eintritt.
Somit gibt es nicht nur einen Kontrollfluss, sondern beliebig viele, welche sogar parallel ablaufen können.

==Ereignisse im Browser==

Bei der Interaktion mit Websites werden viele Ereignisse ausgelöst.
Zuerst wird die HTML-Seite geladen und gerendert, danach geschieht dies für alle referenzierten Inhalte.
Diese Vorgänge lösen Ereignisse aus, welche durch den Browser selbst verursacht werden.

Zum Beispiel gibt es Ereignisse für Medien, welche beschreiben, dass diese fertig geladen wurden.

Sobald der Browser beginnt eine Web-Seite zu rendern können Ereignisse durch den Benutzer ausgelöst werden.
Fast jede Interaktion löst ein Ereignis aus, welches wiederum in bestimmten Reaktionen resultiert.

'''Beispiele:'''
Klickt der Benutzer einen Link so ist das ein Ereignis, welches zur Folge hat dass die eine URL geladen wird.
Wird ein Scroll-Balken bewegt ergibt sich daraus ein Ereignis, welches den Browser scrollen lässt.

Zu den wichtigsten Arten von durch Benutzer ausgelöste Ereignissen zählen:
Mausbewegungen und -klicks, Tastatureingaben und Scrolling.

Eine vollständige Auflistung von Ereignissen finden Sie auf [https://developer.mozilla.org/en-US/docs/Web/Events dieser] MDN-Seite.
Nebem dem Benutzer gibt es noch andere Auslöser wie zum Beispiel verbundene Server.

==Aufbau eines Ereignisses==

Ein im Browser auftretendes Ereignis besitzt immer drei folgende Merkmale:

* '''Ereignis-Name:''' eine Zeichenkette die das Ereignis in der Gegenwart beschreibt, z.B. "click" oder "mousemove"
* '''Ereignis-Daten:''' ein Datenobjekt mit einer pro Ereignis festgelegten Struktur
* '''Ereignis-Ziel:''' ein Objekt das als Ziel des Ereignis gilt; in der Regel handelt es sich um DOM-Elemente

Beispiel: Eine '''Tastatureingabe''' in einem '''Formularfeld''', bei dem das Zeichen '''@''' eingegeben wird.

==Phasen der Ereignispropagierung==

Handelt es sich bei dem ursprünglichen Ziel eines Ereignisses um ein DOM-Objekt werden in der Regel drei Phasen durchlaufen.

===Capturing-Phase===

In Phase 1, der '''Capturing-Phase''', wird ein Ereignis mit dem obersten Dokumentenknoten als Ziel ausgelöst.
Dabei handelt es sich in der Regel um das <code>document</code>-Objekt, welches alle andere Nodes als Unterknoten enthält.
Es werden dann schrittweise Ereignisse ausgelöst für jeden Unterknoten auf dem Pfad zum ursprünglichen Ereignisziel.

</source>
+ window - Ereignis mit window als aktuelles Ziel (optional)
+ document - Ereignis mit body als aktuelles Ziel
+ body - Ereignis mit body als aktuelles Ziel
+ p - ursprüngliches Ziel
</source>

'''Anmerkung:''' Bei manchen Ereignissen ist <code>window</code> das oberste Objekt in der Hierarchie.

===Target-Phase===

Ist der Browser beim ursprünglichen Ziel angelangt wird in Phase 2 gewechselt, der sogenannten '''Target-Phase'''.
Dabei wird ein einzelnes Ereignis ausgelöst, für welches das ursprüngliche DOM-Objekt als Ziel verwendet wird.

===Bubbling-Phase===

Zum Abschluss der Ereignispropagierung wechselt der Browser in Phase 3, der sogenannten '''Bubbling-Phase'''.
Hierbei wird der Pfad der Capturing-Phase in umgekehrter Richtung durchlaufen und jeweils wieder ein Ereignis ausgelöst.

'''Anmerkung:''' In Bibliotheken wie jQuery hat man nur Zugriff auf die Bubbling-Phase, nicht auf die Capturing-Phase.

===Browser-Unterschiede===

Capturing und Bubbling bilden die Tatsache ab, dass wenn ein Ereignis auf einem Element stattfindet,
dieses Ereignis ebenso für die übergeordneten Elemente gültig ist.
'''Beispiel:''' Wird ein Mensch in einem Krankenhaus geboren, so wird er auch in einer Stadt und in einem Land geboren.

Einer der beiden Phasen wäre ausreichend für die Ereignisvearbeitung.
Aufgrund von unterschiedlichen Browser-Implementierungen existieren heutzutage jedoch beide gleichzeitig.

===Globale Ereignisse===

Beschreibt ein Ereignis ein globales Geschehen wird oftmals das <code>document</code> oder <code>window</code>-Objekt als Ereignisziel verwendet.
In diesen Fällen ist es möglich dass weder Capturing- noch eine Bubbling-Phase durchlaufen werden.

Beispiel: Das Ergeinis <code>DOMContentLoaded</code> beschreibt, dass eine Seite (ohne seine externen Medien) fertig geladen wurde.

==Ereignisverarbeitung==

Mithilfe der DOM-Schnittstelle erhält man die Möglichkeit Ereignisse selbst zu verarbeiten und darauf zu reagieren.

===Anmeldung===

Die Funktion <code>addEventListener</code> kann auf jedem DOM-Objekt, dem <code>document</code>-Objekt und dem <code>window</code>-Objekt aufgerufen werden.
Dabei ist das Objekt auf dem die Funktion aufgerufen das '''Ziel''' des Ereignisses, welches verarbeiten werden soll.

Die Funktion akzeptiert die folgenden drei Argumente:
* den '''Namen des Ereignisses''' das man verarbeiten möchte in Form eines Strings
* die '''Callback-Funktion''' welche das Ereignis-Objekt erwartet und den Code zur Verarbeitung enthält
* ein optionales '''Flag''' das bestimmt ob das Ereignis in der Capturing- oder Bubbling-Phase verarbeitet werden soll

Standardmäßig ist das Flag <code>false</code>, was bedeutet dass das Ereignis in der Bubbling-Phase verarbeitet wird.

Es wird für ein Ereignis auf einem Ziel ein Event-Lister in Form einer Funktion angemeldet.
Beim Eintreten des Ereignisses wird der sogenannte Callback aufgerufen und das entsprechende Ereignis-Objekt übergeben.

<source lang="javascript">
var seiteWurdeGeladen = function(event) {
console.log('Die Seite ist nun fertig geladen');
console.log(event);
}
document.addEventListener('DOMContentLoaded', seiteWurdeGeladen);
</source>

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<a id="link" href="#">Link</a>';
var link = document.querySelector('#link');
var linkWurdeGeklickt = function(event) {
console.log('Der Link wurde geklickt');
};
link.addEventListener('click', linkWurdeGeklickt);
</source>

Aufgrund der Phasen der Ereignispropagierung kann man Ereignisse global verarbeiten, unabhängig davon wo sie stattgefunden haben.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<a href="#">Link 1</a><br><a href="#">Link 2</a>';
var irgendwoWurdeGeklickt = function(event) {
console.log('Benutzer hat irgendwo auf der Seite geklickt');
};
document.addEventListener('click', irgendwoWurdeGeklickt);
</source>

===Callbacks===

Ein Callback ist eine Rückruffunktion, welche an ein andere Funktion übergeben wird und
zu späteren Zeitpunkten ggf. ausgeführt wird.

<source lang="javascript">
var mausWurdeBewegt = function(event) {
console.log('Benutzer hat die Maus bewegt');
};
document.addEventListener('mousemove', mausWurdeBewegt);
</source>

Es ist jedoch nicht garantiert dass eine übergebene Callback-Funktion überhaupt jemals ausgeführt wird.

<source lang="javascript">
var esIstOktober = function(event) {
console.log('Es ist Oktober');
};

var istEsOktober = function(callback) {
if (new Date().getMonth() == 9) callback();
};

istEsOktober(esIstOktober);
</source>

===Ereignis-Objekte===

Jedem Event-Listener-Callback wird beim Aufruf ein für ein Ereignis spezifisches Ereignis-Objekt übergeben.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event);
console.log(event.screenX);
console.log(event.screenY);
console.log(event.button);
});
</source>

Dieses Objekt enthält neben spezifischen auch generelle Ereignisinformationen wie zum Beispiel das Ereignis-Ziel.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target);
});
</source>

Hinsichtlich der drei Event-Phasen unterscheidet man zwischen ursprünglichem und aktuellem Ziel.
Das aktuelle Ziel ist das für welches das Ereignis aktuell gilt und das ursprüngliche das wo es stattgefunden hat.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target); // ursprüngliches Ziel
console.log(event.currentTarget); // aktuelles Ziel
});
</source>

Das aktuelle Ziel <code>currentTarget</code> entspricht also immer dem Objekt auf dem man den Event-Handler angemeldet hat.

===Abmeldung===

Mithilfe der Funktion <code>removeEventListener</code> kann ein angemeldeter Event-Listener wieder entfernt werden.
Diese Funktion nur zwei Argumente: Den Ereignis-Namen und die Event-Listener-Funktion.

<source lang="javascript">
var mausWurdeBewegt = function(event) {
console.log(event);
};

document.addEventListener('mousemove', mausWurdeBewegt);
document.removeEventListener('mousemove', mausWurdeBewegt);
</source>

===Standardverhalten===

Nachdem alle Ereignisse verarbeitet wurden führt der Browser gegegebenfalls eine "Default Action" aus.
Eine solche Aktion ist das Standardverhalten des Browsers als Reaktion auf das eingetretene Ereignis.

Beispiele:
* Benutzer klickt auf einen Link -> der Browser lädt die URL
* Benutzer führt Tastatureingaben in einem Feld aus -> der Browser fügt die Zeichen dem Feld hinzu

Innerhalb einer Event-Listener-Funktion ist es möglich mithilfe von <code>preventDefault()</code> das Standardverhalten zu unterdrücken.

<source lang="javascript">
document.addEventListener('click', function(event) {
event.preventDefault();
});
</source>

Der oben dargestellte Code führt dazu, dass kein Klick auf einen Link die enthaltene URL aufruft.

==Wichtige Events==

Die folgenden Ereignisse sind die wichtigsten in der täglichen browser-seitingen Anwendungsentwicklung mit JavaScript.

===DOMContentLoaded===

Dieses Ereignis beschreibt, dass das HTML geladen und interpretiert wurde und das DOM und CSSOM erzeugt und gerendert wurde.
Es wird keine Aussage darüber gemacht ob weitere externe Inhalte bereits geladen wurden, wie z.B. Bilder.
Das Ereignis wird ausschliesslich auf dem <code>document</code>-Objekt als Ereignisziel ausgelöst.

<source lang="javascript">
document.addEventListener('DOMContentLoaded', function(event) {
console.log('Mit der Seite kann interagiert werden');
});
</source>

===load===

Dieses Ereignis besagt, dass die gesamte Web-Seite inklusive aller externen referenziereten Inhalte gerendert wurden.
Im Gegensatz zu <code>DOMContentLoaded</code> wird dieses Ereignis ausschliesslich auf dem <code>window</code>-Objekt ausgelöst.

<source lang="javascript">
window.addEventListener('load', function(event) {
console.log('Die Seite wurde vollständig geladen');
});
</source>

===click===

Jedes Mal wenn der Benutzer (mit der Maus) auf ein sichtbares DOM-Element klickt wird dieses Ereignis ausgelöst.
Bei der Propagierung dieses Ereignisses werden wie alle drei Ereignisphasen (Capturing, Bubbling, Target) durchlaufen.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log('Der Benutzer hat auf etwas geklickt');
});
</source>

===mousemove, mouseover, mouseout===

Bei Mausbewegungen über DOM-Element wird konstant das Ereignis <code>mousemove</code> mit den entsprechenden Koordinaten ausgelöst.
Das Ereignis <code>mouseover</code> wird erzeugt wenn die Maus in ein Element eindringt, <code>mouseout</code> wenn es wieder verlassen wird.

<source lang="javascript">
document.addEventListener('mousemove', function(event) {
console.log('Der Benutzer hat die Maus bewegt');
});

document.addEventListener('mouseover', function(event) {
console.log('Der Benutzer hat die Maus über etwas bewegt');
});

document.addEventListener('mouseout', function(event) {
console.log('Der Benutzer hat die Maus von etwas weg bewegt');
});
</source>

===keydown, keyup, keypress===

Bei Tastatureingaben durch Benutzer auf einem Element werden die Ereignisse <code>keydown</code>, <code>keyup</code> und <code>keypress</code> ausgelöst.
Die drei unterschiedlichen Ereignisse beschreiben die unterschiedlichen Phasen einer Tastatureingabe.

<source lang="javascript">
document.addEventListener('keydown', function(event) {
console.log('Der Benutzer hat eine Taste gedrückt');
console.log(event);
});

document.addEventListener('keypress', function(event) {
console.log('Der Benutzer hat eine Taste betätigt');
console.log(event);
});

document.addEventListener('keyup', function(event) {
console.log('Der Benutzer hat eine Taste losgelassen');
console.log(event);
});
</source>

==Wiederverwendung==

Mithilfe von DOM Events kann auch ein genereller Event-Mechanismus für JavaScript implementiert werden.
Dazu wird ein DOM-Element erzeugt, welches als virtuelles Ereignisziel dient und nicht ins Dokument eingehängt wird.

<source lang="javascript">
var EventDispatcher = function() {

var target = document.createElement('div');

this.addEventListener = function(type, callback) {
target.addEventListener(type, callback);
};

this.dispatchEvent = function(type, detail) {
var event = new CustomEvent(type, {
bubbles: true,
canceable: true,
detail: detail
});
target.dispatchEvent(event);
};

this.removeEventListener = function(type, callback) {
target.removeEventListener(type, callback);
};

};
</source>

Diese Klasse kann dann in beliebigen anderen Komponenten dazu genutzt werden um Ereignisse zu erzeugen und zu propagieren.

<source lang="javascript">
var Spieler = function(name) {
this.eventDispatcher = new EventDispatcher();

this.springe = function() {
this.eventDispatcher.dispatchEvent('springen', this);
}

this.wennSpielerSpringt = function(callback) {
this.eventDispatcher.addEventListener('springen', callback);
}
}
var spieler = new Spieler('John');
spieler.wennSpielerSpringt(function() {
console.log('Spieler springt');
});
spieler.springe();
</source>

=Timer=

Timer in JavaScript dienen dazu um CPU-intensive Berechnungen in mehrere Teile zu spalten und um Animation zu erzeugen.

==JavaScript-Thread==

Der Browser stellt für jede dargestellte Web-Seite einen einzelnen Thread zur Verfügung.
Dieser kümmert sich um das Rendering der Web-Seite, die Verarbeitung von Events und die Ausführung von JavaScript.
Mit Ausnahme des HTML5-Standards der WebWorker gibt es dementsprechend in JavaScript kein Multithreading.

Intern bestitzt der Thread eine Liste an Aufgaben die er stets als nächstes ausführen wird, der sogenannten Queue.
Wird eine Web-Seite zum ersten Mal geladen verursacht dies gleich mehrere Einträge in der Queue, wie zum Beispiel:

* Parsen des Markups und Aufbau des DOMs
* Parsen des CSS und Aufbau des CSSOMs
* Rendering der Seite
* Ausführung von geladenem JavaScript-Code

Manche Aufgaben benötigen unter Umständen viel Zeit und können so auch die Ausführung anderer Aufgaben beeinflussen.
Nimmt ein Stück JavaScript-Code die CPU zu lange in Anspruch kann der Browser z.B. keine Benutzereingaben mehr vearbeiten.
Um dies zu vermeiden ist ein Zeit- bzw. Code-Limit für JavaScript eingebaut bevor der Browser eine Warnung ausgibt.

<source lang="javascript">
var programmStart = new Date();
var wartezeitInMs = 5000;
while (new Date() - programmStart < wartezeitInMs) {
// nichts tun
};
</source>

==Timeouts==

Mithilfe der Funktion <code>setTimeout(callback, delayMs)</code> kann man einen einmalig auszuführenden Timer auf der Thread-Queue anmelden.
Die übergebene Callback-Funktion wird '''ungefähr''' nach einer Wartezeit mit Länge der übergebenen Dauer ausgeführt.

Es werden Einträge in der Thread-Queue erzeugt die überprüfen ob es Zeit ist den Callback auszuführen und das dann ggf. tun.
Aufgrund der vielen Aufgaben des Threads kann die Wartezeit überschritten werden, wenn andere Aufgaben viel Zeit beanspruchen.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log('Nachricht ' + vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 500);
while (new Date() - programmStart < 1000) {
// nichts tun
}
</source>

Eine Wartezeit von 0 Millisekunden heißt, dass der Interpreter die Callback-Funktion so bald wie möglich ausführen soll.
Abhängig von der Browser-Implementierung kann es sein dass die minimale Wartezeit aber bis zu 15 Millisekunden beträgt.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log('Nachricht ' + vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 0);
</source>

Es ist möglich mit Timern CPU-intensive Aufgaben in mehrere Teile zu spalten oder auch Aufgaben wiederholt auszuführen.
Dazu erzeugt man einfach eine Funktion welche sich wiederum selbst durch einen <code>setTimeout()</code>-Aufruf als Timer registriert.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
setTimeout(loggeAktuelleZeit, 15);
};
loggeAktuelleZeit();
</source>

Soll die wiederholte Ausführung beendet werden kann dies durch einen Aufruf von <code>clearTimeout(timeoutId)</code> erreicht werden.
Dabei wird der Eintrag mit gegebener Timeout-ID aus der Thread-Queue gelöscht wodurch der angemeldete Timer nicht ausgeführt wird.
Die notwendige Timeout-ID für die Abmeldung wird beim Anmelden durch <code>setTimeout()</code> als numerischer Rückgabewert bereitgestellt.

<source lang="javascript">
var timeoutId = null;
var loggeAktuelleZeit = function() {
console.log(new Date());
timeoutId = setTimeout(loggeAktuelleZeit, 15);
};
loggeAktuelleZeit();
setTimeout(function() {
clearTimeout(timeoutId);
}, 2500);
</source>

'''Anmerkung:''' <code>setTimeout()</code> eignet sich vor allem für wiederholende Aufgaben welche nichts mit Rendering zu tun haben.

==Intervalle==

Außerdem existiert die Funktion <code>setInterval(callback, delayMs)</code> welche einen wiederholt auszuführenden Timer regsitriert.
Es wird ebenso eine Callback-Funktion erwartet und eine Wartezeit zwischen den einzelnen Ausführungen des Callbacks.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
};
setInterval(loggeAktuelleZeit, 15);
</source>

Analog zu <code>setTimeout()</code> wird eine Interval-ID zurückgegeben, welche für die Abmeldung mittels <code>clearInterval()</code> genutzt werden kann.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
};
var intervalId = setInterval(loggeAktuelleZeit, 15);
setTimeout(function() {
clearInterval(intervalId);
}, 2500);
</source>

Zunächst wirkt <code>setInterval()</code> komfortabler, da der Callback nicht durch die wiederholende Timer-Registrierung verunreinigt wird.
Jedoch besteht bei dieser Funktion der Nachteil dass die Messung der Wartezeit '''vor''' Ausführung des Callbacks beginnt.
Registriert man eine Aufgabe die länger braucht als die definierte Wartezeit wird der JavaScript-Thread sehr stark beansprucht.

<source lang="javascript">
var warteEineBestimmeZeit = function() {
var funktionsStart = new Date();
var wartezeitInMs = 50;
while (new Date() - funktionsStart < wartezeitInMs) {
// nichts tun
};
};
setInterval(warteEineBestimmeZeit, 15);
</source>

Obwohl der Browser zwar noch CPU-Zeit zur Verfügung hat ist er fast nur damit beschäftigt die überfälligen Callbacks auszuführen.
Aufgrund dessen ist es sinnvoller <code>setTimeout()</code> für wiederholende Aufgaben zu verwenden deren Dauer nicht exakt vorhersehbar ist.

Aufgrund der vielen verschiedenen Aufgaben des JavaScript-Threads ist eine exakte Wartezeit bei Timern nicht garantiert.
Sollen Werte abhängig von der vergangenen Zeit verändern sollten Datum-Objekte in die Berechnungen mit einbezogen werden.

<source lang="javascript">
var objekt = {position: 0, geschwindigkeitProSekunde: 1};
var letzterTimerAufruf = new Date();
var bewegeObjekt = function() {
var vergangeneZeitInMs = new Date() - letzterTimerAufruf;
objekt.position += geschwindigkeitProSekunde * (vergangeneZeitInMs / 1000);
console.log('Aktuelle Position: ' + objekt.position);
letzterTimerAufruf = new Date();
setTimeout(bewegeObjekt, 1000);
};
bewegeObjekt();
</source>

==Animation Frames==

Mithilfe von <code>setTimeout()</code> ist es möglich neben wiederholenden Aufgaben auch Animationen im Browser zu implementieren.
Dazu werden in der Callback-Funktion einfach die zu bewegenden Elemente entsprechend in ihrer Form und Position verändert.

<source lang="javascript">
var div = document.createElement('div');
div.setAttribute('style', 'width: 40px; height: 40px; background-color: #F00; position: absolute; top: 0px');
document.querySelector('body').appendChild(div);
var xPosition = 0;
var bewegeRechteck = function() {
xPosition = xPosition + 1;
div.style.left = xPosition + 'px';
setTimeout(bewegeRechteck, 15);
};
bewegeRechteck();
</source>

In diesem Fall wird versucht dass Rechteck ca. 60 Mal in der Sekunde zu bewegen, also eine Bildwiederholrate von 60 simuliert.
Es kann allerdings vorkommen dass der Browser viele anderen Dingen zu tun hat und ihn ein solcher Timer zusätzlich sehr beansprucht.

Deshalb gibt es speziell für Animationen und visuelle Änderungen die Funktion <code>requestAnimationFrame(callback)</code>.
Diese erwartet lediglich einen Callback und kümmert sich intern darum wann der Callback das nächste Mal ausgeführt wird.

<source lang="javascript">
var div = document.createElement('div');
div.setAttribute('style', 'width: 40px; height: 40px; background-color: #F00; position: absolute; top: 0px');
document.querySelector('body').appendChild(div);
var xPosition = 0;
var bewegeRechteck = function() {
xPosition = xPosition + 1;
div.style.left = xPosition + 'px';
requestAnimationFrame(bewegeRechteck, 15);
};
bewegeRechteck();
</source>

Analog zu <code>clearTimeout()</code> und <code>clearInterval()</code> gibt es die Funktion <code>cancelAnimationFrame(frameId)</code> für die Abmeldung.
Diese akzeptiert eine Frame-ID welche wiederum von <code>requestAnimationFrame()</code> zurückgegeben wird.

'''Anmerkung:''' Es ist empfehlenswert Animation mit <code>requestAnimationFrame</code> zu implementieren.

JavaScript-Tutorium:Browser

2015-10-14T21:54:39Z

Lawrence: /* Document Object Model */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten bei der JavaScript-Entwicklung im Browser zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Einführung=

==Native vs. Host==

In einer JavaScript-Umgebung existieren zwei Arten von Objekte.
'''Native Objekte''' werden von der Engine bereitgestellt und sind durch den ECMAScript-Standard abgedeckt.
'''Host-Objekte''' sind nicht immer standardisiert und werden von der Umgebung bereitgestellt.
Im Browser handelt es sich bei Host-Objekten um Schnittstellen für den Zugriff auf den Browser und externe Geräte.

==HTML5-Standard==

Obwohl es den ECMAScript-Standard gibt, muss man davon ausgehen,
dass sich die verfügbaren APIs von Browser zu Browser unterscheiden können.
Durch die steigende Entwicklungsgeschwindigkeit der Browser-Hersteller und den
[https://html.spec.whatwg.org/multipage/ HTML5-Standard] verbessert sich diese Situation.

Heutzutage kann man davon ausgehen, dass jeweils die neuesten Versionen von Firefox und Chrome
die DOM-API und viele der neu verfassten HTML5-APIs bereits standardkonform unterstützen.

==Inline Code vs. externe Dateien==

Eine im Browser angezeigte Web-Seite besteht meist aus HTML, CSS und JavaScript, wobei nur HTML zwingend verlangt ist.
Der JavaScript-Code kümmert sich normalerweise um die dynamischen Aspekte, wie Interaktionen und das Nachladen von Inhalten.

Der Browser lädt ein HTML-Dokument unter der angegebenen URL herunter und evaluiert dieses.
Das Dokument enthält optional Verweise auf CSS-Dateien, Bilder, JavaScript-Dateien und andere Medien.
Neben Verweisen auf externen JavaScript-Code kann das Dokument auch Inline-Code enthalten.
Ob es sich um externe Dateien oder Inline-Code handelt wirkt sich auf die Ladezeiten aus,
der Code selbst wird davon nicht beeinflusst.

'''Anmerkung:''' Die Reihenfolge der eingebunden Code-Blöcke und angegebenen Dateiverweise ist wichtig,
da diese ebenso die Reihenfolge der Code-Ausführung darstellt.

==JavaScript-Kontext==

Für jede Web-Seite, unabhängig davon ob sie im separaten Fenster oder als Tab angezeigt wird,
erzeugt der Browser einen separaten isolierten JavaScript-Kontext, in dem Code ausgeführt wird.
Das bedeutet, dass alle Objekte und Funktionen nur so lange existieren bis die Seite neu geladen oder verlassen wird.
Ein Zugriff auf andere Seiten ist aus Sicherheitsgründen nicht erlaubt.

=Window=

Das globale Objekt <code>window</code> referenziert alle im Browser verfügbaren Objekte und Werte als Eigenschaften (native und host).

<source lang="javascript">
console.log(window.Object);
console.log(window.XMLHttpRequest);
</source>

Für den Zugriff auf globale Eigenschaften ist es nicht notwendig explizit <code>window</code> zu schreiben.

<source lang="javascript">
console.log(Date == window.Date);
console.log(new Date());
</source>

Alle nicht innerhalb von Funktionen deklarierten Variablen werden automatisch an das globale Objekt angehängt.

<source lang="javascript">
var globaleVariable = 'global';
var globaleFunktion = function() {};
console.log(window.globaleVariable);
console.log(window.globaleFunktion);
</source>

==Modifikation von Eigenschaften==

Da es sich um ein normales Objekt handelt können die meisten Eigenschaften modifiziert und auch gelöscht werden.

'''Anmerkung:''' Veränderungen von globalen Eigenschaften sind nicht sinnvoll und können schwerwiegende Fehler verursachen.

<source lang="javascript">
window.Object = {};
var objekt = new Object();

delete window.Array;
var array = new Array();
</source>

Das <code>window</code>-Objekt wird vom Browser mithilfe der Konstruktorfunktion <code>Window</code> erzeugt, welche auch global verfügbar ist.

<source lang="javascript">
console.log(window.constructor == window.Window);
</source>

==Popups und Frames==

Neben dem globalen Fenster-Objekt kann eine Web-Seite beliebig viele weitere <code>window</code>-Objekte enthalten.
Dabei handelt es sich dann entweder um durch Code erzeugte Popups oder aber um Frames (besser bekannt als iframes).

<source lang="javascript">
window.open('https://www.google.com', 'Google im Popup', 'width=400,height=300,resizable=yes');
</source>

Frames können entweder durch das entsprechende HTML oder aber auch wie im Code gezeigt programmatisch erzeugt werden.

==Browser-Schnittstellen==

Abgesehen von den nativen Objekten notwendigen Objekte enthält <code>window</code> wichtige Browser- und Geräte-Schinttstellen.
Dazu zählen zum Beispiel Funktionen um Dialoge im Browser zu öffnen oder aber sogar um Game-Controller zu verwenden.

<source lang="javascript">
var name = window.prompt('Wie ist Ihr Name?');
window.alert('Hello ' + name);
window.alert('Die aktuelle Seite ist ' + window.innerWidth + 'px breit');

console.log(window.Gamepad);
</source>

Eine komplette Liste der verfügbaren Eigenschaften finden Sie auf
[https://developer.mozilla.org/de/docs/DOM/window dieser] MDN-Seite.
In den folgenden Abschnitten werden exemplarisch ein paar wichtige Objekte im Detail beschrieben.

=Beispiel für Browser-Schnittstellen=

==Location==

<code>location</code> ist ein globales Objekt welches die aktuelle URL und ihre Bestandteile enthält und diese auch verändern kann.
Das Objekt wird analog zum <code>window</code>-Objekt mithilfe der Konstruktorfunktion <code>Location</code> erstellt.

<source lang="javascript">
console.log(window.location.constructor == window.Location);
</source>

===Abfragen der URL===

Die Eigenschaft <code>href</code> enhtält die gesamte aktuelle URL. Alternativ kann auch <code>location.toString()</code> genutzt werden.

<source lang="javascript">
console.log(location.href);
console.log(location.toString());
</source>

Um einzelne Bestandteile der URL ermitteln zu können werden viele separate Eigenschaften bereitgestellt.

<source lang="javascript">
console.log(location.protocol);
console.log(location.host);
console.log(location.port);
console.log(location.pathname);
console.log(location.hash);
</source>

===Verändern der URL===

Diese Eigenschaften können nicht nur lesend genutzt werden, sondern auch um Änderungen an der aktuellen URL vorzunehmen.

Mit der Ausname von <code>location.hash</code> führen Änderungen der Eigenschaften zum Verlassen der aktuellen Seite.

<source lang="javascript">
location.protocol = 'http';
location.port = '8080';
location.hash = '#anker';
location.href = 'https://www.google.com';
</source>

Des Weiteren gibt es ein paar Funktionen um die URL zu modifizieren oder aber die Seite neuzuladen:</source>

<source lang="javascript">
location.assign('https://www.google.com');
location.reload(true);
</source>

==History==

Das globale <code>history</code>-Objekt ermöglicht den programmatischen Zugriff auf den Browser-Verlauf.
Es werden Funktionen zur Verfügung gestellt um im Verlauf beliebig viele Schritte zurück und vorwärts zu gehen.

<source lang="javascript">
history.back();
history.forward();
history.go(-3);
history.go(3);
</source>

'''Anmerkung:''' Aus Sicherheitsgründen ist es nicht erlaubt auf Informationen einzelner Einträge im Verlauf zuzugreifen.

==Navigator==

Für detaillierte Informationen über den aktuellen Client bzw. Browser existiert das <code>navigator</code>-Objekt.
Die meistgenutzte Eigenschaft <code>navigator.userAgent</code> ermöglicht das Feststellen des Browser-Herstellers.

<source lang="javascript">
console.log(navigator.userAgent);
console.log(navigator.battery);
</source>

=Document Object Model=

Einem <code>window</code>-Objekt können beliebig viele Dokumentenobjekte zugeordnet werden, mindestens aber ein Hauptdokument.
Das Hauptdokument wird über die globale Variable <code>document</code> zur Verfügung gestellt.
Die Schnittstelle für den Dokumentenzugriff wird durch das [http://www.w3.org/DOM/ Document Object Model] spezifiziert.

==Objektmodell==

Ein <code>Document</code>-Objekt repräsentiert ein vom Browser interpretiertes HTML-Dokument als Objektmodell mit einer Baumstruktur.
Dabei werden Tags, Texte und Kommentare in Knoten umgewandelt, wobei Tag-Knoten wiederum Unterknoten haben können.

<source lang="html4strict">
<html>
<head>
<title>Titel</title>
</head>
<body>
<p>
Text

</p>
<input type="text" value="Eingabe">

</body>
</html>
</source>

Das Markup wird in folgendes Objektmodell übersetzt:

* Ein '''html'''-Knoten mit den Unterknoten '''head''' und '''body'''
* Ein '''head'''-Knoten mit dem Unterknoten '''title'''
* Ein '''title'''-Knoten mit einem Text-Unterknoten
* Ein '''body'''-Knoten mit den Unterknoten '''p''' und '''input'''
* Ein '''p'''-Knoten mit einem Text- und einem Kommentar-Unterknoten
* Ein '''input'''-Knoten

'''Tipp:''' Achtet man bei HTML auf eine korrekte Einrückung so ist das resultierende Objektmodell meist gut erkennbar.

===Markup-Korrekturen===

Bei dem Objektmodell handelt es sich '''nicht''' um exaktes Abbild des originalen Markups.
Der Unterschied wird klar, wenn man das Resultat von invalidem HTML untersucht.

<source lang="html4strict">
<html>
<head>
<title>Titel</title>
</head>
<body>
<table>
<tr>
<td>Tabelle</td>
</tr>
</table>
</body>
</html>
</source>

Der Browser fügt zwischen dem <code>table</code>- und dem <code>tr</code>-Knoten einen <code>tbody</code>-Knoten ein.

==Aufbau von Dokumenten==

===Node-Objekte===

Jeder Knoten innerhalb eines Dokumentenobjekts ist direkt oder indirekt abgeleitet vom <code>Node</code>-Konstruktor/-Prototypen.
Mit Ausnahme des Dokumentenobjekts selbst wird allen Knoten ein Dokument zugeordnet durch die <code>ownerDocument</code>-Eigenschaft.

Des Weiteren hat jeder Knoten einen numerischen Typen, der in der Eigenschaft <code>nodeType</code> gespeichert wird.
Die gängisten Typen von Dokumentenknoten sind:

* 1: ELEMENT_NODE
* 3: TEXT_NODE
* 8: COMMENT_NODE
* 9: DOCUMENT_NODE

Eine vollständige Referenz der Eigenschaften von Node-Objekten finden Sie auf
[https://developer.mozilla.org/en-US/docs/Web/API/Node dieser] MDN-Seite.

===Document-Objekte===

Das Dokument selbst repräsentiert ein abstraktes Dokument und somit kein HTML-Element.
Es verweist aber auf das <code>html</code>-Element mit der Eigenschaft <code>documentElement</code>.

<source lang="javascript">
console.log(document.documentElement);
</source>

Mithilfe eines Dokuments ist es möglich neue <code>Element</code>-Objekte zu erstellen, einzufügen und diese zu suchen.

===Element-Objekte===

Jedes HTML-Tag wird in einen Knoten übersetzt, welcher mit dem <code>Element</code>-Konstruktor erzeugt wird.
Element-Objekte besitzen Schnittstellen um auf Eigenschaften des Tags zuzugreifen und diese zu modifizieren.

<source lang="javascript">
console.log(document.documentElement.tagName);
console.log(document.documentElement.innerHTML);
</source>

Ebenso wie Dokumente können Element-Objekten weitere Node-Objekte als Unterknoten angehängt und nach ihnen gesucht werden.

==Erstellen von Elementen==

Neue Element-Objekte werden über die Funktion <code>createElement()</code> eines <code>document</code>-Objekts unter Angabe des Tag-Namens erzeugt.

<source lang="javascript">
var absatz = document.createElement('p');
console.log(absatz.tagName);
console.log(absatz.nodeType);
</source>

Bei der Erstellung wird das neue Element dem augerufenen Dokument durch die Eigenschaft <code>ownerDocument</code> als zugehörig markiert.

<source lang="javascript">
var block = document.createElement('div');
console.log(block.ownerDocument);
</source>

Da die Schnittstelle eines Dokuments nicht mit HTML-Standards gekoppelt ist, können beliebige Tag-Namen vergeben werden.

<source lang="javascript">
var meinElement = document.createElement('mein-element');
console.log(meinElement);
</source>

==Suchen von Elementen==

Besonders wichtig bei der Arbeit mit Dokumenten ist die Suche von einzelnen oder mehreren Elementen.
Aufgrund dessen haben sich die Schnittstellen für die Suche im Browser über die letzten Jahre rapide verbessert.

===Vorgefertige Kriterien===

Die ursprünglichen Funktionen zum Suchen von Elementen erlauben wenige festgelegte Kriterien.

<source lang="javascript">
var spielfeld = document.getElementById('spielfeld');
console.log(spielfeld);

var divElemente = document.getElementsByTagName('div');
console.log(divElemente);

var gegnerElemente = document.getElementsByClassName('gegner');
console.log(gegnerElemente.length);
</source>

Auf diese Weise können Elemente anhand der ID, Klasse oder des Tag-Namen gesucht werden.
Der Rückgabewert ist bei der ID-Suche ein <code>Node</code>-Objekt und bei den anderen eine <code>NodeList</code>, ein Array-artiges Objekt von Nodes.

===CSS-Selektoren===

Die Suche mithilfe von vorgefertigen Kriterien hat deutliche Limitierungen.
Deswegen enstand durch Bibliotheken wie jQuery das Konzept von Query-Selektoren, welche als
[http://www.w3.org/TR/CSS2/selector.html CSS-Selektoren] standardisiert werden und in vielen Browser verfügbar sind.

Eine CSS-Selektorgruppe beschreibt beliebig viele Kriterien, die auf ein oder mehrere HTML-Elemente zutreffen.
Der Name wurde so gewählt, da diese ebenso in Stylesheets genutzt werden um Elemente auszuwählen.
Aufgrund der Kombinierbarkeit von CSS-Selektoren ergibt sich eine sehr mächtige Suchfunktionalität.

Es gibt zwei Funktionen für die Suche mit CSS-Selektoren:

* <code>document.querySelector()</code> liefert das erste Element zurück welches die Kriterien erfüllt
* <code>document.querySelectorAll()</code> liefert alle Elemente zurück welche die Kriterien erfüllen in Form einer <code>Node</code>-Liste

====Mögliche Kriterien====

Das einfachste Kriterium für einen CSS-Selektor ist die Angabe eines Tag-Namen.

<source lang="javascript">
var absaetze = document.querySelectorAll('p');
console.log(absaetze);
</source>

Die Angabe einer ID eines HTML-Elements erfolgt durch eine vorangestellte Raute (<code>#</code>).

<source lang="javascript">
var spielfeldElement = document.querySelector('#spielfeld');
console.log(spielfeldElement);
</source>

Klassen-Selektoren werden durch einen vorangestellten Punkt (<code>.</code>) gekennzeichnet.

<source lang="javascript">
var gegnerElemente = document.querySelectorAll('.gegner');
console.log(gegnerElemente);
</source>

Die Mächtigkeit von CSS-Selektoren ergibt sich vor allem durch die beliebige Kombinationsmöglichkeiten von Selektoren.

<source lang="javascript">
var schwierigeGegnerElemente =
document.querySelectorAll('.gegner.schwierig');
console.log(schwierigeGegnerElemente);
</source>

'''Anmerkung 1:''' Die Komplexität einer CSS-Selektorgruppe beeinflusst die Performance einer Suche.

'''Anmerkung 2:''' Eine vollständige Erklärung der Funktionsweise von CSS-Selektoren ist nicht Ziel dieses Tutoriums.
Diese Einführung dient lediglich dazu ein grundsätzliches Verständnis für den Umgang mit Selektoren zu vermitteln.

==Hinzufügen von Elementen==

Neu erstellte Elemente können im Dokument als untergeordnete Knoten mithilfe von <code>appendChild()</code> eingefügt werden.

<source lang="javascript">
var spielerElement = document.createElement('div');
document.documentElement.appendChild(spielerElement);
</source>

Der künftig übergeordnete Knoten muss angesprochen werden, wenn das Element an einer bestimmten Stelle landen soll.

<source lang="javascript">
var spielerElement = document.querySelector('div');
var spielfeld = document.createElement('div');
spielfeld.appendChild(spielerElement);
</source>

==Modifizieren von Elementen==

Mithilfe der entsprechenden DOM-Schnittstellen können Text, HTML, Attribute sowie das Styling von Elementen beeinflusst werden.

===Ändern von Text und HTML===

Der gesamte HTML-Inhalt eines Elements kann mithilfe der Eigenschaft <code>innerHTML</code> beeinflusst werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = 'Hallo Welt';
</source>

Abseits von einfachen Text-Änderungen lässt sich sogar das gesamte enthaltene HTML beeinflussen.
Anstatt also mit der DOM-API einzelne Elemente zu erzeugen kann einfach Markup als Wert zugewiesen werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<p>Hallo <strong>Welt!</strong></p>';
</source>

===Ändern von Attributen===

Für den Zugriff auf die Attribute eines HTML-Elements gibt es die Funktionen <code>getAttribute()</code> und <code>setAttribute()</code>.
Beide akzeptieren als erstes Argument den Namen des Attributs, der Setter akzeptiert außerdem einen zu setzenden Wert.

<source lang="javascript">
var spielerElement = document.createElement('div');
spielerElement.innerHTML = '_|_';
spielerElement.setAttribute('class', 'spieler');
document.querySelector('body').appendChild(spielerElement);

console.log(spielerElement.getAttribute('class'));
</source>

'''Anmerkung:''' Besonders häufige Attributsänderungen sind das Hinzufügen und/oder Entfernen von Klassen.
Dafür gibt es in neueren Browsern die Liste <code>classList</code> auf jedem <code>Element</code>-Objekt, welche die Arbeit erleichtert.

<source lang="javascript">
var spielerElement = document.querySelector('.spieler');
spielerElement.classList.add('unbesiegbar');
</source>

===Ändern von CSS-Eigenschaften===

Neben dem Document Object Model existiert außerdem der [http://dev.w3.org/csswg/cssom/ CSS Object Model Standard]
welcher die Schnittstelle für den Zugriff auf CSS-Eigenschaften von DOM-Objekten standardisiert.

Ein jedes DOM-Element vom Typ <code>Element</code> besitzt eine Eigenschaft <code>style</code> welche alle CSS-Eigenschaften beherbergt.

<source lang="javascript">
var body = document.querySelector('body');
console.log(body.style.color);
console.log(body.style.padding);
</source>

Diese Eigenschaften spiegeln die in Stylesheets definierten Regeln wieder, jedoch inklusive dem kaskadierenden Charakter.
Das heisst dass ein Element-Objekt nicht zwingend selbst eine <code>color</code> besitzt, diese jedoch für die Anzeige vererbt bekommt.

Die Eigenschaften können ebenso beliebig modifiziert werden, was zu einer sofortigen Anpassung der Darstellung führt.

<source lang="javascript">
var body = document.querySelector('body');
body.style.backgroundColor = '#AAF';
</source>

==Löschen von Elementen==

Ebenso wie neue Elemente einem Dokument hinzugefügt werden können, so können diese oder bestehende auch gelöscht werden.
Dazu muss man den übergeordneten Knoten ansteuern und mithilfe von <code>removeChild()</code> die Entfernung durchführen.

<source lang="javascript">
var spielfeld = document.querySelector('.spielfeld');
var spielerElement = spielfeld.querySelector('.spieler');
spielfeld.removeChild(spielerElement);
</source>

Ist einem der übergeordnete Knoten nicht bekannt so kann diesen mithilfe der Knotenverweise ermitteln.

<source lang="javascript">
var entferneKnoten = function(knoten) {
if (!knoten.parentNode) {
throw new Error('no parent node');
}
knoten.parentNode.removeChild(knoten);
}

var spielerElement = document.querySelector('.spieler');
entferneKnoten(spielerElement);
</source>

=DOM Events=

==Ereignisorientierte Programmierung==

Für die Verarbeitung von stets verfügbaren Informationen eignet sich eine sequentiell ablaufende Folge von Instruktionen.
Ergeben sich Informationen jedoch nicht deterministisch zur Laufzeit bietet sich die ereignisorientierte Programmierung an.
Hierbei wird nicht mehr aktiv auf eine Information gewartet, das Programm wird benachrichtigt wenn ein Ereignis eintritt.
Somit gibt es nicht nur einen einzelnen Kontrollfluss, sondern beliebig viele welche sogar auch parallel ablaufen können.

==Ereignisse im Browser==

Bei der Betrachtung von und der Interaktion mit Websites im Browser ergeben sich sehr viele unterschiedliche Ereignisse.
Zunächst wird die HTML-Seite geladen und gerendert, danach geschieht dies für alle anderen referenzierten Medien.
Diese Vorgänge lösen bereits nicht deterministische Ereignisse aus welche alleine durch den Browser verursacht werden.
So gibt es für die meisten Medien ein Ereignis welches beschreibt dass diese fertig geladen und gerendert wurden.

Sobald der Browser beginnt eine Web-Seite zu rendern können Ereignisse von Seiten des Benutzers eintreten.
Nahezu jede Benutzerinteraktion löst im Browser ein Ereignis aus welches wiederum in weiteren Aktionen resultiert.
Klickt der Benutzer auf einen Link so ist das ein Ereignis welches zur Folge hat dass die geklickte URL geladen wird.
Wird ein Scroll-Balken vom Benutzer bewegt ergibt sich daraus ein Ereignis welches den Browser in Folge scrollen lässt.

Zu den wichtigsten Arten von durch den Benutzer ausgelösten Ereignissen zählen:

* Mausbewegungen und -klicks
* Tastatureingaben
* Scrolling

Eine vollständige Auflistung der möglichen Ereignisse im Browser finden Sie auf [https://developer.mozilla.org/en-US/docs/Web/Events dieser] MDN-Seite.
Nebem dem Browser und dem Benutzer gibt es auch andere Auslöser wie zum Beispiel mit der Website verbundene Server/Backends.

==Aufbau eines Ereignisses==

Im Sinne einer standardisierten Ereignisverarbeitung besitzt ein im Browser auftretendes Ereignis immer drei folgende Merkmale:

* '''Ereignis-Name:''' eine Zeichenkette die das Ereignis in der Regel in der Gegenwart beschreibt, z.B. "click" oder "mousemove"
* '''Ereignis-Daten:''' ein Objekt mit einer pro Ereignis festgelegten Struktur, welches die wichtigsten Ereignisdaten enthält
* '''Ereignis-Ziel:''' ein Objekt das als Ziel des Ereignis festgelegt wird; in der Regel handelt es sich um DOM-Elemente

Beispiel für ein solches Ereignis: Eine '''Tastatureingabe''' in einem '''Formularfeld''', bei dem das Zeichen '''@''' eingegeben wird.

==Phasen der Ereignispropagierung==

Handelt es sich bei dem ursprünglichen Ziel eines Ereignisses um ein DOM-Objekt werden in der Regel drei Phasen durchlaufen.

===Capturing-Phase===

In Phase 1, der sogenannten '''Capturing-Phase''' wird zuerst ein Ereignis mit dem obersten Knoten im Dokument als Ziel erzeugt.
Dabei handelt es sich in der Regel um das <code>document</code>-Objekt, welches alle andere DOM-Objekte als Unterknoten enthält.
Das wird schrittweise wiederholt für jeden untergeordneten Knoten auf dem Pfad zum eigentlichen Ziel des Ereignisses.

<source lang="javascript">
+ window (optional) - Ereignis mit window als aktueller Ziel
+ document - Ereignis mit body als aktueller Ziel
+ body - Ereignis mit body als aktueller Ziel
+ p (ursprüngliches Ziel)
</source>

'''Anmerkung:''' Bei manchen Ereignissen wird das <code>window</code>-Objekt als oberstes Objekt in die Hierarchie der Ziele mit aufgenommen.

===Target-Phase===

Ist der Browser nun beim ursprünglichen Ziel angelangt wird in Phase 2 gewechselt, der sogenannten '''Target-Phase'''.
Dabei wird ein einzelnes Ereignis erzeugt, für welches das ursprüngliche DOM-Objekt als Ziel verwendet wird.

===Bubbling-Phase===

Zum Abschluss der Ereignispropagierung wechselt der Browser in Phase 3, der sogenannten '''Bubbling-Phase'''.
Hierbei wird der Pfad der Capturing-Phase in umgekehrter Richtung durchlaufen und jeweils wieder ein Ereignis erzeugt.

'''Anmerkung:''' In Bibliotheken wie jQuery hat man nur Zugriff auf die Bubbling-Phase, nicht auf die Capturing-Phase.

===Browser-Unterschiede===

Die Capturing- und Bubbling-Phasen bilden in ihrer Implementierung die Tatsache ab dass
wenn ein Ereignis auf einem Element stattfindet, dieses Ereignis ebenso für das Element umgebende Elemente gültig ist.
'''Beispiel:''' Wird ein Mensch in einem Krankenhaus geboren, so wird dieser auch in einer Stadt geboren, in einem Land geboren.

Einer der beiden oben beschriebenen Phasen wäre allerdings vollkommen ausreichend für die Ereignisvearbeitung.
Aufgrund von unterschiedlichen Implementierungen der Browser-Hersteller existieren heutzutage jedoch beide gleichzeitig.

===Globale Ereignisse===

Beschreibt ein Ereignis ein globales Geschehen wird oftmals das <code>document</code> oder <code>window</code>-Objekt als Ereignisziel verwendet.
In diesen Fällen ist es möglich dass weder Capturing- noch eine Bubbling-Phase durchlaufen werden.

Beispiel: Das Ergeinis "DOMContentLoaded" beschreibt, dass eine Seite abgesehen siner externen Medien fertig geladen wurde.

==Ereignisverarbeitung==

Mithilfe der DOM-Schnittstelle erhält man die Möglichkeit Ereignisse selbst zu verarbeiten und darauf zu reagieren.

===Anmeldung===

Die Funktion <code>addEventListener</code> kann auf jedem DOM-Objekt, dem <code>document</code>-Objekt und dem <code>window</code>-Objekt aufgerufen werden.
Dabei ist das Objekt auf dem die Funktion aufgerufen das '''Ziel''' des Ereignisses welches verarbeiten werden soll.

Die Funktion akzeptiert außerdem die folgenden drei Argumente:
* den '''Namen des Ereignisses''' das man verarbeiten möchte in Form eines Strings
* die '''Callback-Funktion''' welche das Ereignis-Objekt erwartet und den Code zur Verarbeitung enthält
* ein optionales '''Flag''' das bestimmt ob das Ereignis in der Capturing- oder Bubbling-Phase verarbeitet werden soll

Standardmäßig ist das Flag <code>false</code>, was bedeutet dass das Ereignis in der Bubbling-Phase verarbeitet wird.
Durch einen Aufruf wird für ein Ereignis auf einem Ziel ein sogenannter Event-Listener in Form einer Funktion angemeldet.
Jedes Mal wenn das Ereignis auftritt wird die Callback-Funktion aufgerufen und das entsprechende Ereignis-Objekt übergeben.

<source lang="javascript">
var informiereMichWennSeiteGeladenIst = function(event) {
console.log('Die Seite ist nun fertig geladen');
console.log(event);
}
document.addEventListener('DOMContentLoaded', informiereMichWennSeiteGeladenIst, false);

document.querySelector('body').innerHTML = '<p><a id="link1" href="#">Link 1</a></p>';
var link = document.querySelector('#link1');
var informiereMichWennLinkGeklicktWird = function(event) {
console.log('Der Link wurde geklickt');
};
link.addEventListener('click', informiereMichWennLinkGeklicktWird);

</source>

Aufgrund der Phasen der Ereignispropagierung kann man Ereignisse global verarbeiten unabhängig davon wo sie stattgefunden haben.
<source lang="javascript">
document.querySelector('body').innerHTML = '<p><a href="#">Link 1</a><br><a href="#">Link 2</a></p>';
var informiereMichWennGeklicktWird = function(event) {
console.log('Benutzer hat irgendwo auf der Seite geklickt');
};
document.addEventListener('click', informiereMichWennGeklicktWird);
</source>

===Callbacks===

Ein Callback ist eine Rückruffunktion welche an ein andere Funktion übergeben wird und zu späteren Zeitpunkten ggf. ausgeführt wird.

<source lang="javascript">
var informiereMichWennMausBewegtWird = function() {
console.log('Benutzer hat geklickt');
};
document.addEventListener('mousemove', informiereMichWennMausBewegtWird);

</source>

Es ist jedoch nicht garantiert dass eine übergebene Callback-Funktion überhaupt jemals ausgeführt wird.
<source lang="javascript">
var informiereMichFallsEsOktoberIst = function(event) {
console.log('Es ist Oktober');
};

var istEsOktober = function(callback) {
if (new Date().getMonth() == 9) callback();
};

istEsOktober(informiereMichFallsEsOktoberIst);

</source>

Callback-Mechanismen unterstützen den Umgang mit nicht deterministischen und asynchronen Ereignissen in JavaScript.

===Ereignis-Objekte===

Jeder Event-Listener-Callback-Funktion wird beim Aufruf ein für ein Ereignis spezifisches Ereignis-Objekt übergeben.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event);
console.log(event.screenX);
console.log(event.screenY);
console.log(event.button);
});
</source>

Dieses Objekt enthält neben spezifischen auch generelle Ereignisinformationen wie zum Beispiel das Ereignis-Ziel.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target);
});

</source>

Hinsichtlich der drei Phasen die ein Ereignis durchlaufen kann unterscheidet man zwischen ursprünglichem und aktuellem Ziel.Das aktuelle Ziel ist das auf welchem das Ereignis aktuell ausgelöst wird und das ursprüngliche das wo es stattgefunden hat.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target); // ursprüngliches Ziel
console.log(event.currentTarget); // aktuelles Ziel
});

</source>

Das aktuelle Ziel <code>currentTarget</code> entspricht also immer dem Objekt auf dem man den Event-Handler angemeldet hat.

===Abmeldung===

Mithilfe der Funktion <code>removeEventListener</code> kann ein zuvor angemeldeter Event-Listener wieder von einem Objekt entfernt werden.
Diese Funktion benötigt im Gegensatz zu <code>addEventListener</code>nur zwei Argumente: Den Ereignis-Namen und die Event-Listener-Funktion.

<source lang="javascript">
var loggeMausBewegungen = function(event) {
console.log(event);
};

document.addEventListener('mousemove', loggeMausBewegungen);
document.removeEventListener('mousemove', loggeMausBewegungen);
</source>

===Standardverhalten===

Nachdem alle Ereignisse erzeugt und verarbeitet wurden führt der Browser gegegebenfalls eine sogenannte "Default Action" aus.
Im Wesentlichen ist eine solche Aktion das Standardverhalten des Browsers als Reaktion auf das eingetretene Ereignis.

Beispiele:
* Benutzer klickt auf einen Link -> der Browser lädt die URL
* Benutzer führt Tastatureingaben in einem Feld aus -> der Browser fügt die Zeichen dem Feld hinzu

Innerhalb einer Event-Listener-Funktion ist es möglich mithilfe von <code>preventDefault()</code> das Standardverhalten zu unterdrücken.

<source lang="javascript">
document.addEventListener('click', function(event) {
event.preventDefault();
});
</source>

Der oben dargestellte Code führt zum Beispiel dazu dass kein Klick auf einen Link die enthaltene URL aufruft.

==Wichtige Events==

Die folgenden Ereignisse sind die wichtigsten in der täglichen browser-seitingen Anwendungsentwicklung mit JavaScript.

===DOMContentLoaded===

Dieses Ereignis beschreibt dass das HTML geladen und interpretiert wurde und das DOM und CSSOM erzeugt und gerendert wurde.
Es wird keine Aussage darüber gemacht ob weitere externe referenzierte Inhalte bereits geladen wurden, wie z.B. Bilder.
Das Ereignis wird direkt und ausschliesslich auf dem <code>document</code>-Objekt als Ereignisziel ausgelöst.

<source lang="javascript">
document.addEventListener('DOMContentLoaded', function(event) {
console.log('Mit der Seite kann interagiert werden');
});
</source>

===load===

Dieses Ereignis besagt dass die gesamte Web-Seite inklusive aller externen referenziereten Inhalte gerendert wurden.
Im Gegensatz zu <code>DOMContentLoaded</code> wird dieses Ereignis direkt und ausschliesslich auf dem <code>window</code>-Objekt ausgelöst.

<source lang="javascript">
window.addEventListener('load', function(event) {
console.log('Die Seite wurde vollständig geladen');
});
</source>

===click===

Jedes Mal wenn der Benutzer (mit der Maus) auf ein sichtbares DOM-Element klickt wird dieses Ereignis ausgelöst.
Bei der Propagierung dieses Ereignisses werden wie alle drei Ereignisphasen (Capturing, Bubbling, Target) komplett durchlaufen.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log('Der Benutzer hat auf etwas geklickt');
});

</source>

===mousemove, mouseover, mouseout===
Bei Mausbewegungen über DOM-Element wird konstant das Ereignis <code>mousemove</code> mit den entsprechenden Koordinaten erzeugt.
Das Ereignis <code>mouseover</code> wird erzeugt wenn die Maus in das Element eindringt, <code>mouseout</code> wenn das Element wieder verlassen wird.

<source lang="javascript">
document.addEventListener('mousemove', function(event) {
console.log('Der Benutzer hat die Maus bewegt');
});

document.addEventListener('mouseover', function(event) {
console.log('Der Benutzer hat die Maus über etwas bewegt');
});

document.addEventListener('mouseout', function(event) {
console.log('Der Benutzer hat die Maus von etwas weg bewegt');
});
</source>

===keydown, keyup, keypress===

Bei Tastatureingaben auf einem DOM-Element durch den Benutzer werden die Ereignisse <code>keydown</code>, <code>keyup</code> und <code>keypress</code> ausgelöst.
Die drei unterschiedlichen Ereignisse beschreiben die unterschiedlichen Phasen einer einzelnen Tastatureingabe.

<source lang="javascript">
document.addEventListener('keydown', function(event) {
console.log('Der Benutzer hat eine Taste gedrückt');
});

document.addEventListener('keypress', function(event) {
console.log('Der Benutzer hat eine Taste betätigt');
});

document.addEventListener('keyup', function(event) {
console.log('Der Benutzer hat eine Taste losgelassen');
});
</source>

==Wiederverwendung==

Mithilfe von DOM Events kann auch ein genereller, wiederverwendbarer Event-Mechanismus für JavaScript implementiert werden.
Dazu wird ein DOM-Element erzeugt, welches als virtuelles Ereignisziel dient und nicht ins Dokument eingehängt wird.

<source lang="javascript">
var EventDispatcher = function() {

var target = document.createElement('div');

this.addEventListener = function(type, callback) {
target.addEventListener(type, callback);
};

this.dispatchEvent = function(type, detail) {
var event = new CustomEvent(type, {
bubbles: true,
canceable: true,
detail: detail
});
target.dispatchEvent(event);
};

this.removeEventListener = function(type, callback) {
target.removeEventListener(type, callback);
};

};
</source>

Diese Klasse kann dann in beliebigen anderen Komponenten dazu genutzt werden um Ereignisse zu erzeugen und zu propagieren.

<source lang="javascript">
var EventBasiertesInterval = function(delay) {
var self = this;

self.eventDispatcher = new EventDispatcher();
self._zaehler = 0;

setInterval(function() {
self.eventDispatcher.dispatchEvent('interval', self._zaehler++);
}, delay);
}

var interval = new EventBasiertesInterval(500);
interval.eventDispatcher.addEventListener('interval', function(event) {
console.log('interval ', event.detail);
});
</source>

=Timer=

Timer in JavaScript dienen dazu um CPU-intensive Berechnungen in mehrere Teile zu spalten und um Animation zu erzeugen.

==JavaScript-Thread==

Der Browser stellt für jede dargestellte Web-Seite einen einzelnen Thread zur Verfügung.
Dieser kümmert sich um das Rendering der Web-Seite, die Verarbeitung von Events und die Ausführung von JavaScript.
Mit Ausnahme des HTML5-Standards der WebWorker gibt es dementsprechend in JavaScript kein Multithreading.

Intern bestitzt der Thread eine Liste an Aufgaben die er stets als nächstes ausführen wird, der sogenannten Queue.
Wird eine Web-Seite zum ersten Mal geladen verursacht dies gleich mehrere Einträge in der Queue, wie zum Beispiel:

* Parsen des Markups und Aufbau des DOMs
* Parsen des CSS und Aufbau des CSSOMs
* Rendering der Seite
* Ausführung von geladenem JavaScript-Code

Manche Aufgaben benötigen unter Umständen viel Zeit und können so auch die Ausführung anderer Aufgaben beeinflussen.
Nimmt ein Stück JavaScript-Code die CPU zu lange in Anspruch kann der Browser z.B. keine Benutzereingaben mehr vearbeiten.
Um dies zu vermeiden ist ein Zeit- bzw. Code-Limit für JavaScript eingebaut bevor der Browser eine Warnung ausgibt.

<source lang="javascript">
var programmStart = new Date();
var wartezeitInMs = 5000;
while (new Date() - programmStart < wartezeitInMs) {
// nichts tun
};
</source>

==Timeouts==

Mithilfe der Funktion <code>setTimeout(callback, delayMs)</code> kann man einen einmalig auszuführenden Timer auf der Thread-Queue anmelden.
Die übergebene Callback-Funktion wird '''ungefähr''' nach einer Wartezeit mit Länge der übergebenen Dauer ausgeführt.

Es werden Einträge in der Thread-Queue erzeugt die überprüfen ob es Zeit ist den Callback auszuführen und das dann ggf. tun.
Aufgrund der vielen Aufgaben des Threads kann die Wartezeit überschritten werden, wenn andere Aufgaben viel Zeit beanspruchen.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log('Nachricht ' + vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 500);
while (new Date() - programmStart < 1000) {
// nichts tun
}
</source>

Eine Wartezeit von 0 Millisekunden heißt, dass der Interpreter die Callback-Funktion so bald wie möglich ausführen soll.
Abhängig von der Browser-Implementierung kann es sein dass die minimale Wartezeit aber bis zu 15 Millisekunden beträgt.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log('Nachricht ' + vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 0);
</source>

Es ist möglich mit Timern CPU-intensive Aufgaben in mehrere Teile zu spalten oder auch Aufgaben wiederholt auszuführen.
Dazu erzeugt man einfach eine Funktion welche sich wiederum selbst durch einen <code>setTimeout()</code>-Aufruf als Timer registriert.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
setTimeout(loggeAktuelleZeit, 15);
};
loggeAktuelleZeit();
</source>

Soll die wiederholte Ausführung beendet werden kann dies durch einen Aufruf von <code>clearTimeout(timeoutId)</code> erreicht werden.
Dabei wird der Eintrag mit gegebener Timeout-ID aus der Thread-Queue gelöscht wodurch der angemeldete Timer nicht ausgeführt wird.
Die notwendige Timeout-ID für die Abmeldung wird beim Anmelden durch <code>setTimeout()</code> als numerischer Rückgabewert bereitgestellt.

<source lang="javascript">
var timeoutId = null;
var loggeAktuelleZeit = function() {
console.log(new Date());
timeoutId = setTimeout(loggeAktuelleZeit, 15);
};
loggeAktuelleZeit();
setTimeout(function() {
clearTimeout(timeoutId);
}, 2500);
</source>

'''Anmerkung:''' <code>setTimeout()</code> eignet sich vor allem für wiederholende Aufgaben welche nichts mit Rendering zu tun haben.

==Intervalle==

Außerdem existiert die Funktion <code>setInterval(callback, delayMs)</code> welche einen wiederholt auszuführenden Timer regsitriert.
Es wird ebenso eine Callback-Funktion erwartet und eine Wartezeit zwischen den einzelnen Ausführungen des Callbacks.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
};
setInterval(loggeAktuelleZeit, 15);
</source>

Analog zu <code>setTimeout()</code> wird eine Interval-ID zurückgegeben, welche für die Abmeldung mittels <code>clearInterval()</code> genutzt werden kann.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
};
var intervalId = setInterval(loggeAktuelleZeit, 15);
setTimeout(function() {
clearInterval(intervalId);
}, 2500);
</source>

Zunächst wirkt <code>setInterval()</code> komfortabler, da der Callback nicht durch die wiederholende Timer-Registrierung verunreinigt wird.
Jedoch besteht bei dieser Funktion der Nachteil dass die Messung der Wartezeit '''vor''' Ausführung des Callbacks beginnt.
Registriert man eine Aufgabe die länger braucht als die definierte Wartezeit wird der JavaScript-Thread sehr stark beansprucht.

<source lang="javascript">
var warteEineBestimmeZeit = function() {
var funktionsStart = new Date();
var wartezeitInMs = 50;
while (new Date() - funktionsStart < wartezeitInMs) {
// nichts tun
};
};
setInterval(warteEineBestimmeZeit, 15);
</source>

Obwohl der Browser zwar noch CPU-Zeit zur Verfügung hat ist er fast nur damit beschäftigt die überfälligen Callbacks auszuführen.
Aufgrund dessen ist es sinnvoller <code>setTimeout()</code> für wiederholende Aufgaben zu verwenden deren Dauer nicht exakt vorhersehbar ist.

Aufgrund der vielen verschiedenen Aufgaben des JavaScript-Threads ist eine exakte Wartezeit bei Timern nicht garantiert.
Sollen Werte abhängig von der vergangenen Zeit verändern sollten Datum-Objekte in die Berechnungen mit einbezogen werden.

<source lang="javascript">
var objekt = {position: 0, geschwindigkeitProSekunde: 1};
var letzterTimerAufruf = new Date();
var bewegeObjekt = function() {
var vergangeneZeitInMs = new Date() - letzterTimerAufruf;
objekt.position += geschwindigkeitProSekunde * (vergangeneZeitInMs / 1000);
console.log('Aktuelle Position: ' + objekt.position);
letzterTimerAufruf = new Date();
setTimeout(bewegeObjekt, 1000);
};
bewegeObjekt();
</source>

==Animation Frames==

Mithilfe von <code>setTimeout()</code> ist es möglich neben wiederholenden Aufgaben auch Animationen im Browser zu implementieren.
Dazu werden in der Callback-Funktion einfach die zu bewegenden Elemente entsprechend in ihrer Form und Position verändert.

<source lang="javascript">
var div = document.createElement('div');
div.setAttribute('style', 'width: 40px; height: 40px; background-color: #F00; position: absolute; top: 0px');
document.querySelector('body').appendChild(div);
var xPosition = 0;
var bewegeRechteck = function() {
xPosition = xPosition + 1;
div.style.left = xPosition + 'px';
setTimeout(bewegeRechteck, 15);
};
bewegeRechteck();
</source>

In diesem Fall wird versucht dass Rechteck ca. 60 Mal in der Sekunde zu bewegen, also eine Bildwiederholrate von 60 simuliert.
Es kann allerdings vorkommen dass der Browser viele anderen Dingen zu tun hat und ihn ein solcher Timer zusätzlich sehr beansprucht.

Deshalb gibt es speziell für Animationen und visuelle Änderungen die Funktion <code>requestAnimationFrame(callback)</code>.
Diese erwartet lediglich einen Callback und kümmert sich intern darum wann der Callback das nächste Mal ausgeführt wird.

<source lang="javascript">
var div = document.createElement('div');
div.setAttribute('style', 'width: 40px; height: 40px; background-color: #F00; position: absolute; top: 0px');
document.querySelector('body').appendChild(div);
var xPosition = 0;
var bewegeRechteck = function() {
xPosition = xPosition + 1;
div.style.left = xPosition + 'px';
requestAnimationFrame(bewegeRechteck, 15);
};
bewegeRechteck();
</source>

Analog zu <code>clearTimeout()</code> und <code>clearInterval()</code> gibt es die Funktion <code>cancelAnimationFrame(frameId)</code> für die Abmeldung.
Diese akzeptiert eine Frame-ID welche wiederum von <code>requestAnimationFrame()</code> zurückgegeben wird.

'''Anmerkung:''' Es ist empfehlenswert Animation mit <code>requestAnimationFrame</code> zu implementieren.

JavaScript-Tutorium:Browser

2015-10-14T21:54:05Z

Lawrence: /* Einführung */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten bei der JavaScript-Entwicklung im Browser zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Einführung=

==Native vs. Host==

In einer JavaScript-Umgebung existieren zwei Arten von Objekte.
'''Native Objekte''' werden von der Engine bereitgestellt und sind durch den ECMAScript-Standard abgedeckt.
'''Host-Objekte''' sind nicht immer standardisiert und werden von der Umgebung bereitgestellt.
Im Browser handelt es sich bei Host-Objekten um Schnittstellen für den Zugriff auf den Browser und externe Geräte.

==HTML5-Standard==

Obwohl es den ECMAScript-Standard gibt, muss man davon ausgehen,
dass sich die verfügbaren APIs von Browser zu Browser unterscheiden können.
Durch die steigende Entwicklungsgeschwindigkeit der Browser-Hersteller und den
[https://html.spec.whatwg.org/multipage/ HTML5-Standard] verbessert sich diese Situation.

Heutzutage kann man davon ausgehen, dass jeweils die neuesten Versionen von Firefox und Chrome
die DOM-API und viele der neu verfassten HTML5-APIs bereits standardkonform unterstützen.

==Inline Code vs. externe Dateien==

Eine im Browser angezeigte Web-Seite besteht meist aus HTML, CSS und JavaScript, wobei nur HTML zwingend verlangt ist.
Der JavaScript-Code kümmert sich normalerweise um die dynamischen Aspekte, wie Interaktionen und das Nachladen von Inhalten.

Der Browser lädt ein HTML-Dokument unter der angegebenen URL herunter und evaluiert dieses.
Das Dokument enthält optional Verweise auf CSS-Dateien, Bilder, JavaScript-Dateien und andere Medien.
Neben Verweisen auf externen JavaScript-Code kann das Dokument auch Inline-Code enthalten.
Ob es sich um externe Dateien oder Inline-Code handelt wirkt sich auf die Ladezeiten aus,
der Code selbst wird davon nicht beeinflusst.

'''Anmerkung:''' Die Reihenfolge der eingebunden Code-Blöcke und angegebenen Dateiverweise ist wichtig,
da diese ebenso die Reihenfolge der Code-Ausführung darstellt.

==JavaScript-Kontext==

Für jede Web-Seite, unabhängig davon ob sie im separaten Fenster oder als Tab angezeigt wird,
erzeugt der Browser einen separaten isolierten JavaScript-Kontext, in dem Code ausgeführt wird.
Das bedeutet, dass alle Objekte und Funktionen nur so lange existieren bis die Seite neu geladen oder verlassen wird.
Ein Zugriff auf andere Seiten ist aus Sicherheitsgründen nicht erlaubt.

=Window=

Das globale Objekt <code>window</code> referenziert alle im Browser verfügbaren Objekte und Werte als Eigenschaften (native und host).

<source lang="javascript">
console.log(window.Object);
console.log(window.XMLHttpRequest);
</source>

Für den Zugriff auf globale Eigenschaften ist es nicht notwendig explizit <code>window</code> zu schreiben.

<source lang="javascript">
console.log(Date == window.Date);
console.log(new Date());
</source>

Alle nicht innerhalb von Funktionen deklarierten Variablen werden automatisch an das globale Objekt angehängt.

<source lang="javascript">
var globaleVariable = 'global';
var globaleFunktion = function() {};
console.log(window.globaleVariable);
console.log(window.globaleFunktion);
</source>

==Modifikation von Eigenschaften==

Da es sich um ein normales Objekt handelt können die meisten Eigenschaften modifiziert und auch gelöscht werden.

'''Anmerkung:''' Veränderungen von globalen Eigenschaften sind nicht sinnvoll und können schwerwiegende Fehler verursachen.

<source lang="javascript">
window.Object = {};
var objekt = new Object();

delete window.Array;
var array = new Array();
</source>

Das <code>window</code>-Objekt wird vom Browser mithilfe der Konstruktorfunktion <code>Window</code> erzeugt, welche auch global verfügbar ist.

<source lang="javascript">
console.log(window.constructor == window.Window);
</source>

==Popups und Frames==

Neben dem globalen Fenster-Objekt kann eine Web-Seite beliebig viele weitere <code>window</code>-Objekte enthalten.
Dabei handelt es sich dann entweder um durch Code erzeugte Popups oder aber um Frames (besser bekannt als iframes).

<source lang="javascript">
window.open('https://www.google.com', 'Google im Popup', 'width=400,height=300,resizable=yes');
</source>

Frames können entweder durch das entsprechende HTML oder aber auch wie im Code gezeigt programmatisch erzeugt werden.

==Browser-Schnittstellen==

Abgesehen von den nativen Objekten notwendigen Objekte enthält <code>window</code> wichtige Browser- und Geräte-Schinttstellen.
Dazu zählen zum Beispiel Funktionen um Dialoge im Browser zu öffnen oder aber sogar um Game-Controller zu verwenden.

<source lang="javascript">
var name = window.prompt('Wie ist Ihr Name?');
window.alert('Hello ' + name);
window.alert('Die aktuelle Seite ist ' + window.innerWidth + 'px breit');

console.log(window.Gamepad);
</source>

Eine komplette Liste der verfügbaren Eigenschaften finden Sie auf
[https://developer.mozilla.org/de/docs/DOM/window dieser] MDN-Seite.
In den folgenden Abschnitten werden exemplarisch ein paar wichtige Objekte im Detail beschrieben.

=Beispiel für Browser-Schnittstellen=

==Location==

<code>location</code> ist ein globales Objekt welches die aktuelle URL und ihre Bestandteile enthält und diese auch verändern kann.
Das Objekt wird analog zum <code>window</code>-Objekt mithilfe der Konstruktorfunktion <code>Location</code> erstellt.

<source lang="javascript">
console.log(window.location.constructor == window.Location);
</source>

===Abfragen der URL===

Die Eigenschaft <code>href</code> enhtält die gesamte aktuelle URL. Alternativ kann auch <code>location.toString()</code> genutzt werden.

<source lang="javascript">
console.log(location.href);
console.log(location.toString());
</source>

Um einzelne Bestandteile der URL ermitteln zu können werden viele separate Eigenschaften bereitgestellt.

<source lang="javascript">
console.log(location.protocol);
console.log(location.host);
console.log(location.port);
console.log(location.pathname);
console.log(location.hash);
</source>

===Verändern der URL===

Diese Eigenschaften können nicht nur lesend genutzt werden, sondern auch um Änderungen an der aktuellen URL vorzunehmen.

Mit der Ausname von <code>location.hash</code> führen Änderungen der Eigenschaften zum Verlassen der aktuellen Seite.

<source lang="javascript">
location.protocol = 'http';
location.port = '8080';
location.hash = '#anker';
location.href = 'https://www.google.com';
</source>

Des Weiteren gibt es ein paar Funktionen um die URL zu modifizieren oder aber die Seite neuzuladen:</source>

<source lang="javascript">
location.assign('https://www.google.com');
location.reload(true);
</source>

==History==

Das globale <code>history</code>-Objekt ermöglicht den programmatischen Zugriff auf den Browser-Verlauf.
Es werden Funktionen zur Verfügung gestellt um im Verlauf beliebig viele Schritte zurück und vorwärts zu gehen.

<source lang="javascript">
history.back();
history.forward();
history.go(-3);
history.go(3);
</source>

'''Anmerkung:''' Aus Sicherheitsgründen ist es nicht erlaubt auf Informationen einzelner Einträge im Verlauf zuzugreifen.

==Navigator==

Für detaillierte Informationen über den aktuellen Client bzw. Browser existiert das <code>navigator</code>-Objekt.
Die meistgenutzte Eigenschaft <code>navigator.userAgent</code> ermöglicht das Feststellen des Browser-Herstellers.

<source lang="javascript">
console.log(navigator.userAgent);
console.log(navigator.battery);
</source>

=Document Object Model=

Im Browser können einem Fenster beliebig viele Dokumentenobjekte zugeordnet werden, mindestens aber ein Hauptdokument.
Das automatisch erstellte Hauptdokument wird über die globale Variable <code>document</code> zur Verfügung gestellt.
Die Schnittstelle für den Dokumentenzugriff wird durch das [http://www.w3.org/DOM/ Document Object Model] spezifiziert.

==Objektmodell==

Ein <code>Document</code>-Objekt repräsentiert ein vom Browser interpretiertes HTML-Dokument als Objektmodell mit einer Baumstruktur.
Dabei werden Tags, Texte und Kommentare in Knoten umgewandelt, wobei Tag-Knoten wiederum Unterknoten haben können.

<source lang="javascript">
<html>
<head>
<title>Titel</title>
</head>
<body>
<p>
Text

</p>
<input type="text" value="Eingabe">

</body>
</html>

</source>

Das oben dargestellte Markup wird bei der Interpretation durch den Browser in folgendes Objektmodell übersetzt:
* Ein <code>html</code>-Knoten mit den Unterknoten <code>head</code> und <code>body</code>
* Ein <code>head</code>-Knoten mit dem Unterknoten <code>title</code>
* Ein <code>title</code>-Knoten mit einem Text-Unterknoten
* Ein <code>body</code>-Knoten mit den Unterknoten <code>p</code> und <code>input</code>
* Ein <code>p</code>-Knoten mit einem Text-Unterknoten und einem Kommentar-Unterknoten
* Ein <code>input</code>-Knoten

'''Tipp:''' Achtet man bei HTML auf eine korrekte Einrückung so ist das resultierende Objektmodell meist klar erkennbar.

===Markup-Korrekturen===

Es ist zu beachten, dass es sich beim Objektmodell '''nicht''' um ein eindeutiges Abbild des originalen Markups handelt.
Der Unterschied wird besonders deutlich wenn man das Resultat von folgendem invalidem HTML untersucht.

<source lang="javascript">
<html>
<head>
<title>Titel</title>
</head>
<body>
<table>
<tr>
<td>Tabelle</td>
</tr>
</table>
</body>
</html>

</source>

Das Objektmodell fügt zwischen dem <code>table</code>- und dem <code>tr</code>-Knoten einen <code>tbody</code>-Knoten ein damit das HTML valide wird.'''Tipp:''' Im Browser kann man das Objektmodell einer Seite mit dem (DOM) Inspector der Entwicklerwerkzeuge betrachten.

==Aufbau von Dokumenten==

===Node-Objekte===

Jeder Knoten innerhalb eines Dokumentenobjekts ist direkt oder indirekt abgeleitet vom <code>Node</code>-Konstruktor/-Prototypen.
Mit Ausnahme des Dokumentenobjekts selbst wird allen Knoten ein Dokument zugeordnet durch die <code>ownerDocument</code>-Eigenschaft.

Des Weiteren hat jeder Knoten einen bestimmten numerischen Typen, welcher in der Eigenschaft <code>nodeType</code> gespeichert wird.
Die folgende Liste enthält die gängigsten Typen von Dokumentenknoten denen man bei der Arbeit mit Dokumenten begegnet:

* 1: ELEMENT_NODE
* 3: TEXT_NODE
* 8: COMMENT_NODE
* 9: DOCUMENT_NODE

Eine vollständige Referenz der Eigenschaften von Node-Objekten finden Sie auf
[https://developer.mozilla.org/en-US/docs/Web/API/Node dieser] MDN-Seite.

===Document-Objekte===

Ein Dokument wird mit dem <code>Document</code>-Konstruktor erzeugt und ist selbst keinem Dokument, jedoch einem Fenster zugeordnet.

<source lang="javascript">
console.log(document.defaultView);
console.log(window == document.defaultView);
</source>

Das Dokument selbst repräsentiert kein HTML-Element, verweist aber auf das <code>html</code>-Element mit der Eigenschaft <code>documentElement</code>.

<source lang="javascript">
console.log(document.documentElement);
</source>

Mithilfe der Funktionen eines Dokuments ist es möglich neue <code>Element</code>-Objekte zu erstellen, einzufügen und diese zu suchen.
===Element-Objekte===

Jedes HTML-Tag wird in einen Knoten übersetzt welcher mit dem <code>Element</code>-Konstruktor erzeugt wird.
Element-Objekte besitzen Schnittstellen um auf Eigenschaften eines HTML-Tags zuzugreifen und diese zu modifizieren.

<source lang="javascript">
console.log(document.documentElement.tagName);
console.log(document.documentElement.innerHTML);
</source>

Ebenso wie Dokumente können Element-Objekten weitere Node-Objekte als Unterknoten angehängt und nach ihnen gesucht werden.

===Comment-Objekte===

HTML-Kommentare werden in Comment-Objekte umgewandelt welche mit dem <code>Comment</code>-Konstruktor erzeugt werden.

===Text-Objekte===

Texte werden in <code>Text</code>-Objekte umgewandelt, wobei auf diese auch durch übergeordnete Elemente zugegriffen werden kann.
Normalerweise wird bei der Anwendungsprogrammierung mit JavaScript nicht direkt mit Text-Knoten gearbeitet.

==Erstellen von Elementen==

Neue Element-Objekte werden über die Schnittstelle eines <code>Document</code>-Objekts unter der Angabe eines Tag-Namens erzeugt.

<source lang="javascript">
var absatz = document.createElement('p');
console.log(absatz.tagName);
console.log(absatz.nodeType);
</source>

Bei der Erstellung wird das neue Element dem aufgerufenen Dokument als zugehörig markiert durch die Eigenschaft <code>ownerDocument</code>.

<source lang="javascript">

var block = document.createElement('div');
console.log(block.ownerDocument);

</source>

Da die Schnittstelle eines Dokuments nicht mit HTML-Standards gekoppelt ist, können beliebige Tag-Namen vergeben werden.
<source lang="javascript">
var meinElement = document.createElement('mein-element');
console.log(meinElement);

</source>

==Suchen von Elementen==

Besonders wichtig bei der Arbeit mit Dokumenten ist die Suche von einzelnen oder mehreren Elementen.
Aufgrund dessen haben sich die Schnittstellen für die Suche im Browser über die letzten Jahre rapide verbessert.

===Vorgefertige Kriterien===

Die Suche nach einem eindeutigen Element kann mithilfe einer ID ausgeführt werden, insofern das HTML-Element eine besitzt.

<source lang="javascript">
var inhalt = document.getElementById('inhalt');
console.log(inhalt);

</source>

Bei einer Suche wird entweder das Dokument selbst oder aber ein beliebiges Element als Ausgangspunkt verwendet.Es wird dann jeweils immer nur unterhalb des Ausgangsknotens gesucht, was sich positiv auf die Performance auswirken kann.

<source lang="javascript">
var inhalt = document.getElementById('inhalt');
var kommentare = inhalt.getElementById('kommentare');

</source>

Werden Elemente einer bestimmten Art gesucht so kann der Tag-Name oder aber die HTML-Klasse als Kriterium genutzt werden.

<source lang="javascript">
var elemente = document.getElementsByTagName('body');
console.log(elemente);

var kommentare = document.getElementsByClassName('kommentar');
console.log(kommentare.length);
</source>

Bei dieser Art von Suche wird eine <code>NodeList</code> als Ergebnis zurückgeliefert, ein Array-artiges Objekt von Node-Elementen.Einzelne Elemente dieser Liste können entweder über eine Funktion oder aber über einen Index abgefragt werden.

<source lang="javascript">
var absaetze = document.getElementsByTagName('p');
console.log(absaetze);
console.log(absaetze.item(0));
console.log(absaetze.item(0) == absaetze[0]);

</source>

===Verweise===
Jedes Element verweist im Sinne einer Baumstruktur auf seine übergeordneten und untergeordneten Knoten und seine Nachbaren.

<source lang="javascript">
var body = document.getElementsByTagName('body').item(0);
for (var i = 0; i < body.childNodes.length; i++) {
console.log(body.childNodes[i]);
}
console.log(body.parentNode);
</source>

Diese Referenzen können genutzt werden um sich durch das Dokument zu bewegen und bestimmte Elemente zu finden.

<source lang="javascript">
var container = [];
var absaetze = document.getElementsByTagName('p');
for (var i = 0; i < absaetze.length; i++) {
container.push(absaetze[i].parentNode);
}
console.log(container);
</source>

===CSS-Selektoren===

Die Suche mithilfe von vorgefertigen Kriterien und Verweisen auf benachbarte Elemente hat gewisse Limitierungen.
Aufgrund dessen enstand durch bekannte Bibliotheken wie jQuery das Konzept von Query-Selektoren, welche heute als
[http://www.w3.org/TR/CSS2/selector.html CSS-Selektoren] standardisiert werden und in vielen Browser verfügbar sind.

Eine CSS-Selektorgruppe beschreibt eine beliebige Menge an Kriterien, die auf ein oder mehrere HTML-Elemente zutrifft.
Der Name wurde so gewählt da CSS-Selektoren ebenso in Stylesheets genutzt werden um eine Menge an Elementen auszuwählen.
Aufgrund der Kombinierbarkeit einzelner CSS-Selektoren ergibt sich eine sehr mächtige Suchfunktionalität.

Im Browser gibt zwei verschiedene Funktionen um Elemente mithilfe von CSS-Selektoren zu suchen:

* <code>document.querySelector</code> liefert das erste Element zurück welches die Kriterien erfüllt
* <code>document.querySelectorAll</code> liefert alle Elemente zurück welche die Kriterien erfüllen in Form einer <code>Node</code>-Liste

====Mögliche Kriterien====

Das einfachste Kriterium für einen CSS-Selektor ist die Angabe eines Tag-Namen.

<source lang="javascript">
var absaetze = document.querySelectorAll('p');
console.log(absaetze);
</source>

Die Angabe einer ID eines HTML-Elements erfolgt durch eine vorangestellte Raute (<code>#</code>).

<source lang="javascript">
var inhalt = document.querySelector('#inhalt');
console.log(inhalt);

</source>

Klassen-Selektoren werden durch einen vorangestellten Punkt (<code>.</code>) gekennzeichnet.
<source lang="javascript">
var kommentare = document.querySelectorAll('.kommentar');
console.log(kommentare);

</source>

Mithilfe von eckigen Klammern (<code>[]</code>) werden beliebige Attribute als Kriterium definiert.
<source lang="javascript">
var textFelder = document.querySelectorAll('[type="text"]');
console.log(textFelder);

</source>

Wird kein Attributwert vergeben, wird lediglich auf die Existenz des Attributs geprüft.<source lang="javascript">

var versteckteElemente = document.querySelectorAll('[hidden]');
console.log(versteckteElemente);
</source>

Die Mächtigkeit von CSS-Selektoren ergibt sich vor allem durch die beliebige Kombinationsmöglichkeiten von Selektoren.

<source lang="javascript">
var wichtigeKommentare = document.querySelectorAll('.kommentar.wichtig');
console.log(wichtigeKommentare);
var versteckteAbsaetze = document.querySelectorAll('p[hidden]');
console.log(textFelder);

</source>

Es ist sogar möglich Kriterien für übergeordnete Elemente zu definieren indem man die Selektoren durch Leerzeichen trennt.
<source lang="javascript">
var versteckteElementeInnerhalbVonKommentaren = document.querySelectorAll('.kommentar [hidden]');

</source>

'''Anmerkung:''' Die Komplexität einer CSS-Selektorgruppe beeinflusst die Performance einer Suche.
'''Anmerkung:''' Eine vollständige Erklärung der Funktionsweise von CSS-Selektoren ist nicht Ziel dieses Tutoriums.
Diese Einführung dient lediglich dazu ein grundsätzliches Verständnis für den Umgang mit Selektoren zu vermitteln.

==Hinzufügen von Elementen==

Neu erstellte Elemente können im Dokument als untergeordnete Knoten mithilfe von <code>appendChild()</code> eingefügt werden.

<source lang="javascript">
var absatz = document.createElement('p');
document.documentElement.appendChild(absatz);

</source>

Dazu muss immer der künftig übergeordnete Knoten angesprochen werden wenn das Element an einer bestimmten Stelle landen soll.<source lang="javascript">

var absatz = document.querySelector('p');
var unterAbsatz = document.createElement('p');
absatz.appendChild(unterAbsatz);
</source>

==Modifizieren von Elementen==

Mithilfe der entsprechenden DOM-Schnittstellen können Text, Attribute sowie das Styling von Elementen beeinflusst werden.

===Ändern von Text===

Ein <code>Element</code>-Objekt mit nur einem <code>Text</code>-Unterknoten stellt seinen Text über der Eigenschaft <code>textContent</code> zur Verfügung.

<source lang="javascript">
var p = document.querySelector('p');
console.log(p.textContent);

</source>

Der Text kann über diese Eigenschaft nicht nur gelesen sondern ebenso beliebig modifiziert werden.
<source lang="javascript">
var p = document.querySelector('p');
p.textContent = 'Hallo Welt';
</source>

===Ändern von HTML===

Eine wesentlich mächtigere Weise um den Inhalt eines Elements zu beeinflussen stellt die Eigenschaft <code>innerHTML</code> dar.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = 'Hallo Welt';

</source>

Neben einfachen Text-Änderungen lässt sich mithilfe dieser Eigenschaft das gesamte enthaltene HTML beeinflussen.Anstatt also mithilfe der DOM-Schnittstelle einzelne Elemente zu erzeugen kann einfach Markup als Wert zugewiesen werden.

<source lang="javascript">
var body = document.querySelector('body');
body.innerHTML = '<p>Hallo <strong>Welt!</strong></p>';

</source>

===Ändern von Attributen===

Für den Zugriff auf die Attribute eines HTML-Elements gibt es die Funktionen <code>getAttribute()</code> und <code>setAttribute()</code>.
Beide akzeptieren als erstes Argument den Namen des Attributs, der Setter akzeptiert außerdem einen zu setzenden Wert.

<source lang="javascript">
var absatz = document.createElement('p');
absatz.innerHTML = 'Tolle Website!';
absatz.setAttribute('class', 'kommentar');
document.querySelector('body').appendChild(p);

console.log(p.getAttribute('class'));

</source>

Außerdem kann mithilfe der Funktion <code>hasAttribute()</code> nach der Existenz eines Attributs gefragt werden.
<source lang="javascript">
var eingabefeld = document.querySelector('input[type=text]');
console.log('Ist das Eingabefeld Pflicht? ' + eingabefeld.hasAttribute('required'));
</source>

'''Anmerkung:''' Eine besondere Häufigkeit bei Attributsänderungen ist das Hinzufügen und/oder Entfernen von Klassen.
Dafür gibt es in neueren Browsern die Liste <code>classList</code> auf jedem <code>Element</code>-Objekt, welche die Arbeit erleichtert.

<source lang="javascript">
var absatz = document.querySelector('p');
absatz.classList.push('wichtig');

</source>

===Ändern von CSS-Eigenschaften===

Neben dem Document Object Model existiert außerdem der [http://dev.w3.org/csswg/cssom/ CSS Object Model Standard]
welcher die Schnittstelle für den Zugriff auf CSS-Eigenschaften von DOM-Objekten standardisiert.

Ein jedes DOM-Element vom Typ <code>Element</code> besitzt eine Eigenschaft <code>style</code> welche alle CSS-Eigenschaften beherbergt.

<source lang="javascript">
var body = document.querySelector('body');
console.log(body.style.color);
console.log(body.style.padding);

</source>

Diese Eigenschaften spiegeln die in Stylesheets definierten Regeln wieder, jedoch inklusive dem kaskadierenden Charakter.Das heisst dass ein Element-Objekt nicht zwingend selbst eine <code>color</code> besitzt, diese jedoch für die Anzeige vererbt bekommt.

Die Eigenschaften können ebenso beliebig modifiziert werden, was zu einer sofortigen Anpassung der Darstellung führt.

<source lang="javascript">
var body = document.querySelector('body');
body.style.backgroundColor = '#AAF';

</source>

==Löschen von Elementen==

Ebenso wie neue Elemente einem Dokument hinzugefügt werden können, so können diese oder bestehende auch gelöscht werden.
Dazu muss man den übergeordneten Knoten ansteuern und mithilfe von <code>removeChild()</code> die Entfernung durchführen.

<source lang="javascript">
var liste = document.querySelector('ul');
var listenelement = liste.querySelector('li');
liste.removeChild(listenelement);

</source>

'''Anmerkung:''' Ist einem der übergeordnete Knoten nicht bekannt so kann man diesen mithilfe der Knotenverweise ermitteln.
<source lang="javascript">
var entferneKnoten = function(knoten) {
if (!knoten.parentNode) {
throw new Error('no parent node');
}
knoten.parentNode.removeChild(knoten);
}

var listenelement = document.querySelector('li');
entferneKnoten(listenelement);

</source>

=DOM Events=

==Ereignisorientierte Programmierung==

Für die Verarbeitung von stets verfügbaren Informationen eignet sich eine sequentiell ablaufende Folge von Instruktionen.
Ergeben sich Informationen jedoch nicht deterministisch zur Laufzeit bietet sich die ereignisorientierte Programmierung an.
Hierbei wird nicht mehr aktiv auf eine Information gewartet, das Programm wird benachrichtigt wenn ein Ereignis eintritt.
Somit gibt es nicht nur einen einzelnen Kontrollfluss, sondern beliebig viele welche sogar auch parallel ablaufen können.

==Ereignisse im Browser==

Bei der Betrachtung von und der Interaktion mit Websites im Browser ergeben sich sehr viele unterschiedliche Ereignisse.
Zunächst wird die HTML-Seite geladen und gerendert, danach geschieht dies für alle anderen referenzierten Medien.
Diese Vorgänge lösen bereits nicht deterministische Ereignisse aus welche alleine durch den Browser verursacht werden.
So gibt es für die meisten Medien ein Ereignis welches beschreibt dass diese fertig geladen und gerendert wurden.

Sobald der Browser beginnt eine Web-Seite zu rendern können Ereignisse von Seiten des Benutzers eintreten.
Nahezu jede Benutzerinteraktion löst im Browser ein Ereignis aus welches wiederum in weiteren Aktionen resultiert.
Klickt der Benutzer auf einen Link so ist das ein Ereignis welches zur Folge hat dass die geklickte URL geladen wird.
Wird ein Scroll-Balken vom Benutzer bewegt ergibt sich daraus ein Ereignis welches den Browser in Folge scrollen lässt.

Zu den wichtigsten Arten von durch den Benutzer ausgelösten Ereignissen zählen:

* Mausbewegungen und -klicks
* Tastatureingaben
* Scrolling

Eine vollständige Auflistung der möglichen Ereignisse im Browser finden Sie auf [https://developer.mozilla.org/en-US/docs/Web/Events dieser] MDN-Seite.
Nebem dem Browser und dem Benutzer gibt es auch andere Auslöser wie zum Beispiel mit der Website verbundene Server/Backends.

==Aufbau eines Ereignisses==

Im Sinne einer standardisierten Ereignisverarbeitung besitzt ein im Browser auftretendes Ereignis immer drei folgende Merkmale:

* '''Ereignis-Name:''' eine Zeichenkette die das Ereignis in der Regel in der Gegenwart beschreibt, z.B. "click" oder "mousemove"
* '''Ereignis-Daten:''' ein Objekt mit einer pro Ereignis festgelegten Struktur, welches die wichtigsten Ereignisdaten enthält
* '''Ereignis-Ziel:''' ein Objekt das als Ziel des Ereignis festgelegt wird; in der Regel handelt es sich um DOM-Elemente

Beispiel für ein solches Ereignis: Eine '''Tastatureingabe''' in einem '''Formularfeld''', bei dem das Zeichen '''@''' eingegeben wird.

==Phasen der Ereignispropagierung==

Handelt es sich bei dem ursprünglichen Ziel eines Ereignisses um ein DOM-Objekt werden in der Regel drei Phasen durchlaufen.

===Capturing-Phase===

In Phase 1, der sogenannten '''Capturing-Phase''' wird zuerst ein Ereignis mit dem obersten Knoten im Dokument als Ziel erzeugt.
Dabei handelt es sich in der Regel um das <code>document</code>-Objekt, welches alle andere DOM-Objekte als Unterknoten enthält.
Das wird schrittweise wiederholt für jeden untergeordneten Knoten auf dem Pfad zum eigentlichen Ziel des Ereignisses.

<source lang="javascript">
+ window (optional) - Ereignis mit window als aktueller Ziel
+ document - Ereignis mit body als aktueller Ziel
+ body - Ereignis mit body als aktueller Ziel
+ p (ursprüngliches Ziel)
</source>

'''Anmerkung:''' Bei manchen Ereignissen wird das <code>window</code>-Objekt als oberstes Objekt in die Hierarchie der Ziele mit aufgenommen.

===Target-Phase===

Ist der Browser nun beim ursprünglichen Ziel angelangt wird in Phase 2 gewechselt, der sogenannten '''Target-Phase'''.
Dabei wird ein einzelnes Ereignis erzeugt, für welches das ursprüngliche DOM-Objekt als Ziel verwendet wird.

===Bubbling-Phase===

Zum Abschluss der Ereignispropagierung wechselt der Browser in Phase 3, der sogenannten '''Bubbling-Phase'''.
Hierbei wird der Pfad der Capturing-Phase in umgekehrter Richtung durchlaufen und jeweils wieder ein Ereignis erzeugt.

'''Anmerkung:''' In Bibliotheken wie jQuery hat man nur Zugriff auf die Bubbling-Phase, nicht auf die Capturing-Phase.

===Browser-Unterschiede===

Die Capturing- und Bubbling-Phasen bilden in ihrer Implementierung die Tatsache ab dass
wenn ein Ereignis auf einem Element stattfindet, dieses Ereignis ebenso für das Element umgebende Elemente gültig ist.
'''Beispiel:''' Wird ein Mensch in einem Krankenhaus geboren, so wird dieser auch in einer Stadt geboren, in einem Land geboren.

Einer der beiden oben beschriebenen Phasen wäre allerdings vollkommen ausreichend für die Ereignisvearbeitung.
Aufgrund von unterschiedlichen Implementierungen der Browser-Hersteller existieren heutzutage jedoch beide gleichzeitig.

===Globale Ereignisse===

Beschreibt ein Ereignis ein globales Geschehen wird oftmals das <code>document</code> oder <code>window</code>-Objekt als Ereignisziel verwendet.
In diesen Fällen ist es möglich dass weder Capturing- noch eine Bubbling-Phase durchlaufen werden.

Beispiel: Das Ergeinis "DOMContentLoaded" beschreibt, dass eine Seite abgesehen siner externen Medien fertig geladen wurde.

==Ereignisverarbeitung==

Mithilfe der DOM-Schnittstelle erhält man die Möglichkeit Ereignisse selbst zu verarbeiten und darauf zu reagieren.

===Anmeldung===

Die Funktion <code>addEventListener</code> kann auf jedem DOM-Objekt, dem <code>document</code>-Objekt und dem <code>window</code>-Objekt aufgerufen werden.
Dabei ist das Objekt auf dem die Funktion aufgerufen das '''Ziel''' des Ereignisses welches verarbeiten werden soll.

Die Funktion akzeptiert außerdem die folgenden drei Argumente:
* den '''Namen des Ereignisses''' das man verarbeiten möchte in Form eines Strings
* die '''Callback-Funktion''' welche das Ereignis-Objekt erwartet und den Code zur Verarbeitung enthält
* ein optionales '''Flag''' das bestimmt ob das Ereignis in der Capturing- oder Bubbling-Phase verarbeitet werden soll

Standardmäßig ist das Flag <code>false</code>, was bedeutet dass das Ereignis in der Bubbling-Phase verarbeitet wird.
Durch einen Aufruf wird für ein Ereignis auf einem Ziel ein sogenannter Event-Listener in Form einer Funktion angemeldet.
Jedes Mal wenn das Ereignis auftritt wird die Callback-Funktion aufgerufen und das entsprechende Ereignis-Objekt übergeben.

<source lang="javascript">
var informiereMichWennSeiteGeladenIst = function(event) {
console.log('Die Seite ist nun fertig geladen');
console.log(event);
}
document.addEventListener('DOMContentLoaded', informiereMichWennSeiteGeladenIst, false);

document.querySelector('body').innerHTML = '<p><a id="link1" href="#">Link 1</a></p>';
var link = document.querySelector('#link1');
var informiereMichWennLinkGeklicktWird = function(event) {
console.log('Der Link wurde geklickt');
};
link.addEventListener('click', informiereMichWennLinkGeklicktWird);

</source>

Aufgrund der Phasen der Ereignispropagierung kann man Ereignisse global verarbeiten unabhängig davon wo sie stattgefunden haben.
<source lang="javascript">
document.querySelector('body').innerHTML = '<p><a href="#">Link 1</a><br><a href="#">Link 2</a></p>';
var informiereMichWennGeklicktWird = function(event) {
console.log('Benutzer hat irgendwo auf der Seite geklickt');
};
document.addEventListener('click', informiereMichWennGeklicktWird);
</source>

===Callbacks===

Ein Callback ist eine Rückruffunktion welche an ein andere Funktion übergeben wird und zu späteren Zeitpunkten ggf. ausgeführt wird.

<source lang="javascript">
var informiereMichWennMausBewegtWird = function() {
console.log('Benutzer hat geklickt');
};
document.addEventListener('mousemove', informiereMichWennMausBewegtWird);

</source>

Es ist jedoch nicht garantiert dass eine übergebene Callback-Funktion überhaupt jemals ausgeführt wird.
<source lang="javascript">
var informiereMichFallsEsOktoberIst = function(event) {
console.log('Es ist Oktober');
};

var istEsOktober = function(callback) {
if (new Date().getMonth() == 9) callback();
};

istEsOktober(informiereMichFallsEsOktoberIst);

</source>

Callback-Mechanismen unterstützen den Umgang mit nicht deterministischen und asynchronen Ereignissen in JavaScript.

===Ereignis-Objekte===

Jeder Event-Listener-Callback-Funktion wird beim Aufruf ein für ein Ereignis spezifisches Ereignis-Objekt übergeben.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event);
console.log(event.screenX);
console.log(event.screenY);
console.log(event.button);
});
</source>

Dieses Objekt enthält neben spezifischen auch generelle Ereignisinformationen wie zum Beispiel das Ereignis-Ziel.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target);
});

</source>

Hinsichtlich der drei Phasen die ein Ereignis durchlaufen kann unterscheidet man zwischen ursprünglichem und aktuellem Ziel.Das aktuelle Ziel ist das auf welchem das Ereignis aktuell ausgelöst wird und das ursprüngliche das wo es stattgefunden hat.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log(event.target); // ursprüngliches Ziel
console.log(event.currentTarget); // aktuelles Ziel
});

</source>

Das aktuelle Ziel <code>currentTarget</code> entspricht also immer dem Objekt auf dem man den Event-Handler angemeldet hat.

===Abmeldung===

Mithilfe der Funktion <code>removeEventListener</code> kann ein zuvor angemeldeter Event-Listener wieder von einem Objekt entfernt werden.
Diese Funktion benötigt im Gegensatz zu <code>addEventListener</code>nur zwei Argumente: Den Ereignis-Namen und die Event-Listener-Funktion.

<source lang="javascript">
var loggeMausBewegungen = function(event) {
console.log(event);
};

document.addEventListener('mousemove', loggeMausBewegungen);
document.removeEventListener('mousemove', loggeMausBewegungen);
</source>

===Standardverhalten===

Nachdem alle Ereignisse erzeugt und verarbeitet wurden führt der Browser gegegebenfalls eine sogenannte "Default Action" aus.
Im Wesentlichen ist eine solche Aktion das Standardverhalten des Browsers als Reaktion auf das eingetretene Ereignis.

Beispiele:
* Benutzer klickt auf einen Link -> der Browser lädt die URL
* Benutzer führt Tastatureingaben in einem Feld aus -> der Browser fügt die Zeichen dem Feld hinzu

Innerhalb einer Event-Listener-Funktion ist es möglich mithilfe von <code>preventDefault()</code> das Standardverhalten zu unterdrücken.

<source lang="javascript">
document.addEventListener('click', function(event) {
event.preventDefault();
});
</source>

Der oben dargestellte Code führt zum Beispiel dazu dass kein Klick auf einen Link die enthaltene URL aufruft.

==Wichtige Events==

Die folgenden Ereignisse sind die wichtigsten in der täglichen browser-seitingen Anwendungsentwicklung mit JavaScript.

===DOMContentLoaded===

Dieses Ereignis beschreibt dass das HTML geladen und interpretiert wurde und das DOM und CSSOM erzeugt und gerendert wurde.
Es wird keine Aussage darüber gemacht ob weitere externe referenzierte Inhalte bereits geladen wurden, wie z.B. Bilder.
Das Ereignis wird direkt und ausschliesslich auf dem <code>document</code>-Objekt als Ereignisziel ausgelöst.

<source lang="javascript">
document.addEventListener('DOMContentLoaded', function(event) {
console.log('Mit der Seite kann interagiert werden');
});
</source>

===load===

Dieses Ereignis besagt dass die gesamte Web-Seite inklusive aller externen referenziereten Inhalte gerendert wurden.
Im Gegensatz zu <code>DOMContentLoaded</code> wird dieses Ereignis direkt und ausschliesslich auf dem <code>window</code>-Objekt ausgelöst.

<source lang="javascript">
window.addEventListener('load', function(event) {
console.log('Die Seite wurde vollständig geladen');
});
</source>

===click===

Jedes Mal wenn der Benutzer (mit der Maus) auf ein sichtbares DOM-Element klickt wird dieses Ereignis ausgelöst.
Bei der Propagierung dieses Ereignisses werden wie alle drei Ereignisphasen (Capturing, Bubbling, Target) komplett durchlaufen.

<source lang="javascript">
document.addEventListener('click', function(event) {
console.log('Der Benutzer hat auf etwas geklickt');
});

</source>

===mousemove, mouseover, mouseout===
Bei Mausbewegungen über DOM-Element wird konstant das Ereignis <code>mousemove</code> mit den entsprechenden Koordinaten erzeugt.
Das Ereignis <code>mouseover</code> wird erzeugt wenn die Maus in das Element eindringt, <code>mouseout</code> wenn das Element wieder verlassen wird.

<source lang="javascript">
document.addEventListener('mousemove', function(event) {
console.log('Der Benutzer hat die Maus bewegt');
});

document.addEventListener('mouseover', function(event) {
console.log('Der Benutzer hat die Maus über etwas bewegt');
});

document.addEventListener('mouseout', function(event) {
console.log('Der Benutzer hat die Maus von etwas weg bewegt');
});
</source>

===keydown, keyup, keypress===

Bei Tastatureingaben auf einem DOM-Element durch den Benutzer werden die Ereignisse <code>keydown</code>, <code>keyup</code> und <code>keypress</code> ausgelöst.
Die drei unterschiedlichen Ereignisse beschreiben die unterschiedlichen Phasen einer einzelnen Tastatureingabe.

<source lang="javascript">
document.addEventListener('keydown', function(event) {
console.log('Der Benutzer hat eine Taste gedrückt');
});

document.addEventListener('keypress', function(event) {
console.log('Der Benutzer hat eine Taste betätigt');
});

document.addEventListener('keyup', function(event) {
console.log('Der Benutzer hat eine Taste losgelassen');
});
</source>

==Wiederverwendung==

Mithilfe von DOM Events kann auch ein genereller, wiederverwendbarer Event-Mechanismus für JavaScript implementiert werden.
Dazu wird ein DOM-Element erzeugt, welches als virtuelles Ereignisziel dient und nicht ins Dokument eingehängt wird.

<source lang="javascript">
var EventDispatcher = function() {

var target = document.createElement('div');

this.addEventListener = function(type, callback) {
target.addEventListener(type, callback);
};

this.dispatchEvent = function(type, detail) {
var event = new CustomEvent(type, {
bubbles: true,
canceable: true,
detail: detail
});
target.dispatchEvent(event);
};

this.removeEventListener = function(type, callback) {
target.removeEventListener(type, callback);
};

};
</source>

Diese Klasse kann dann in beliebigen anderen Komponenten dazu genutzt werden um Ereignisse zu erzeugen und zu propagieren.

<source lang="javascript">
var EventBasiertesInterval = function(delay) {
var self = this;

self.eventDispatcher = new EventDispatcher();
self._zaehler = 0;

setInterval(function() {
self.eventDispatcher.dispatchEvent('interval', self._zaehler++);
}, delay);
}

var interval = new EventBasiertesInterval(500);
interval.eventDispatcher.addEventListener('interval', function(event) {
console.log('interval ', event.detail);
});
</source>

=Timer=

Timer in JavaScript dienen dazu um CPU-intensive Berechnungen in mehrere Teile zu spalten und um Animation zu erzeugen.

==JavaScript-Thread==

Der Browser stellt für jede dargestellte Web-Seite einen einzelnen Thread zur Verfügung.
Dieser kümmert sich um das Rendering der Web-Seite, die Verarbeitung von Events und die Ausführung von JavaScript.
Mit Ausnahme des HTML5-Standards der WebWorker gibt es dementsprechend in JavaScript kein Multithreading.

Intern bestitzt der Thread eine Liste an Aufgaben die er stets als nächstes ausführen wird, der sogenannten Queue.
Wird eine Web-Seite zum ersten Mal geladen verursacht dies gleich mehrere Einträge in der Queue, wie zum Beispiel:

* Parsen des Markups und Aufbau des DOMs
* Parsen des CSS und Aufbau des CSSOMs
* Rendering der Seite
* Ausführung von geladenem JavaScript-Code

Manche Aufgaben benötigen unter Umständen viel Zeit und können so auch die Ausführung anderer Aufgaben beeinflussen.
Nimmt ein Stück JavaScript-Code die CPU zu lange in Anspruch kann der Browser z.B. keine Benutzereingaben mehr vearbeiten.
Um dies zu vermeiden ist ein Zeit- bzw. Code-Limit für JavaScript eingebaut bevor der Browser eine Warnung ausgibt.

<source lang="javascript">
var programmStart = new Date();
var wartezeitInMs = 5000;
while (new Date() - programmStart < wartezeitInMs) {
// nichts tun
};
</source>

==Timeouts==

Mithilfe der Funktion <code>setTimeout(callback, delayMs)</code> kann man einen einmalig auszuführenden Timer auf der Thread-Queue anmelden.
Die übergebene Callback-Funktion wird '''ungefähr''' nach einer Wartezeit mit Länge der übergebenen Dauer ausgeführt.

Es werden Einträge in der Thread-Queue erzeugt die überprüfen ob es Zeit ist den Callback auszuführen und das dann ggf. tun.
Aufgrund der vielen Aufgaben des Threads kann die Wartezeit überschritten werden, wenn andere Aufgaben viel Zeit beanspruchen.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log('Nachricht ' + vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 500);
while (new Date() - programmStart < 1000) {
// nichts tun
}
</source>

Eine Wartezeit von 0 Millisekunden heißt, dass der Interpreter die Callback-Funktion so bald wie möglich ausführen soll.
Abhängig von der Browser-Implementierung kann es sein dass die minimale Wartezeit aber bis zu 15 Millisekunden beträgt.

<source lang="javascript">
var programmStart = new Date();
var loggeNachricht = function() {
var vergangeneZeit = new Date() - programmStart;
console.log('Nachricht ' + vergangeneZeit + 'ms nach Programmstart');
};
setTimeout(loggeNachricht, 0);
</source>

Es ist möglich mit Timern CPU-intensive Aufgaben in mehrere Teile zu spalten oder auch Aufgaben wiederholt auszuführen.
Dazu erzeugt man einfach eine Funktion welche sich wiederum selbst durch einen <code>setTimeout()</code>-Aufruf als Timer registriert.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
setTimeout(loggeAktuelleZeit, 15);
};
loggeAktuelleZeit();
</source>

Soll die wiederholte Ausführung beendet werden kann dies durch einen Aufruf von <code>clearTimeout(timeoutId)</code> erreicht werden.
Dabei wird der Eintrag mit gegebener Timeout-ID aus der Thread-Queue gelöscht wodurch der angemeldete Timer nicht ausgeführt wird.
Die notwendige Timeout-ID für die Abmeldung wird beim Anmelden durch <code>setTimeout()</code> als numerischer Rückgabewert bereitgestellt.

<source lang="javascript">
var timeoutId = null;
var loggeAktuelleZeit = function() {
console.log(new Date());
timeoutId = setTimeout(loggeAktuelleZeit, 15);
};
loggeAktuelleZeit();
setTimeout(function() {
clearTimeout(timeoutId);
}, 2500);
</source>

'''Anmerkung:''' <code>setTimeout()</code> eignet sich vor allem für wiederholende Aufgaben welche nichts mit Rendering zu tun haben.

==Intervalle==

Außerdem existiert die Funktion <code>setInterval(callback, delayMs)</code> welche einen wiederholt auszuführenden Timer regsitriert.
Es wird ebenso eine Callback-Funktion erwartet und eine Wartezeit zwischen den einzelnen Ausführungen des Callbacks.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
};
setInterval(loggeAktuelleZeit, 15);
</source>

Analog zu <code>setTimeout()</code> wird eine Interval-ID zurückgegeben, welche für die Abmeldung mittels <code>clearInterval()</code> genutzt werden kann.

<source lang="javascript">
var loggeAktuelleZeit = function() {
console.log(new Date());
};
var intervalId = setInterval(loggeAktuelleZeit, 15);
setTimeout(function() {
clearInterval(intervalId);
}, 2500);
</source>

Zunächst wirkt <code>setInterval()</code> komfortabler, da der Callback nicht durch die wiederholende Timer-Registrierung verunreinigt wird.
Jedoch besteht bei dieser Funktion der Nachteil dass die Messung der Wartezeit '''vor''' Ausführung des Callbacks beginnt.
Registriert man eine Aufgabe die länger braucht als die definierte Wartezeit wird der JavaScript-Thread sehr stark beansprucht.

<source lang="javascript">
var warteEineBestimmeZeit = function() {
var funktionsStart = new Date();
var wartezeitInMs = 50;
while (new Date() - funktionsStart < wartezeitInMs) {
// nichts tun
};
};
setInterval(warteEineBestimmeZeit, 15);
</source>

Obwohl der Browser zwar noch CPU-Zeit zur Verfügung hat ist er fast nur damit beschäftigt die überfälligen Callbacks auszuführen.
Aufgrund dessen ist es sinnvoller <code>setTimeout()</code> für wiederholende Aufgaben zu verwenden deren Dauer nicht exakt vorhersehbar ist.

Aufgrund der vielen verschiedenen Aufgaben des JavaScript-Threads ist eine exakte Wartezeit bei Timern nicht garantiert.
Sollen Werte abhängig von der vergangenen Zeit verändern sollten Datum-Objekte in die Berechnungen mit einbezogen werden.

<source lang="javascript">
var objekt = {position: 0, geschwindigkeitProSekunde: 1};
var letzterTimerAufruf = new Date();
var bewegeObjekt = function() {
var vergangeneZeitInMs = new Date() - letzterTimerAufruf;
objekt.position += geschwindigkeitProSekunde * (vergangeneZeitInMs / 1000);
console.log('Aktuelle Position: ' + objekt.position);
letzterTimerAufruf = new Date();
setTimeout(bewegeObjekt, 1000);
};
bewegeObjekt();
</source>

==Animation Frames==

Mithilfe von <code>setTimeout()</code> ist es möglich neben wiederholenden Aufgaben auch Animationen im Browser zu implementieren.
Dazu werden in der Callback-Funktion einfach die zu bewegenden Elemente entsprechend in ihrer Form und Position verändert.

<source lang="javascript">
var div = document.createElement('div');
div.setAttribute('style', 'width: 40px; height: 40px; background-color: #F00; position: absolute; top: 0px');
document.querySelector('body').appendChild(div);
var xPosition = 0;
var bewegeRechteck = function() {
xPosition = xPosition + 1;
div.style.left = xPosition + 'px';
setTimeout(bewegeRechteck, 15);
};
bewegeRechteck();
</source>

In diesem Fall wird versucht dass Rechteck ca. 60 Mal in der Sekunde zu bewegen, also eine Bildwiederholrate von 60 simuliert.
Es kann allerdings vorkommen dass der Browser viele anderen Dingen zu tun hat und ihn ein solcher Timer zusätzlich sehr beansprucht.

Deshalb gibt es speziell für Animationen und visuelle Änderungen die Funktion <code>requestAnimationFrame(callback)</code>.
Diese erwartet lediglich einen Callback und kümmert sich intern darum wann der Callback das nächste Mal ausgeführt wird.

<source lang="javascript">
var div = document.createElement('div');
div.setAttribute('style', 'width: 40px; height: 40px; background-color: #F00; position: absolute; top: 0px');
document.querySelector('body').appendChild(div);
var xPosition = 0;
var bewegeRechteck = function() {
xPosition = xPosition + 1;
div.style.left = xPosition + 'px';
requestAnimationFrame(bewegeRechteck, 15);
};
bewegeRechteck();
</source>

Analog zu <code>clearTimeout()</code> und <code>clearInterval()</code> gibt es die Funktion <code>cancelAnimationFrame(frameId)</code> für die Abmeldung.
Diese akzeptiert eine Frame-ID welche wiederum von <code>requestAnimationFrame()</code> zurückgegeben wird.

'''Anmerkung:''' Es ist empfehlenswert Animation mit <code>requestAnimationFrame</code> zu implementieren.

JavaScript-Tutorium:Grundlagen

2015-10-14T21:53:24Z

Lawrence: /* Kapselung */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassenorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = "Peter";
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(eigenschaft);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

console.log(spieler1.springe());
console.log(springe());
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

'''Anmerkung:''' Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

=Prototypen=

'''Anmerkung:''' Der folgende Abschnitt ist optional und für das Eigenstudium. Er ist nicht vorlesungs-/prüfungsrelevant.

Mithilfe von Prototypen ist es möglich Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
In JavaScript spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens <code>prototype</code>, welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft <code>constructor</code>, welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Spieler = function() {};
var prototyp = Spieler.prototype;
console.log(prototyp.constructor == Spieler);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird, erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Spieler = function() {};
var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype = {
erstelleKuerzel: function() {
return this.name.charAt(0);
};
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));

Spieler.prototype = {};
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler = new Spieler('John');
console.log(spieler.name);
</source>

Ist dies nicht der Fall wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

Besitzt der Prototyp selbst nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
prototypVomPrototyp.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.
Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Spieler = function() {};
var prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen helfen.
Verwendet man einen Konstruktor, der jedem neuen Objekt eine Funktion zuweist, ist das jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var spieler = [];
for (var i = 0; i < 1000; i++) {
spieler.push(new Spieler());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var spieler1 = new Spieler();
var spieler2 = new Spieler();
console.log(spieler1.sagHallo == spieler2.sagHallo);
console.log(spieler1.sagHallo == Spieler.prototype.sagHallo);
console.log(spieler2.sagHallo == Spieler.prototype.sagHallo);
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man ein Objekt als Prototypenm, welches auch mit einem Konstruktor erstellt wurde, erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.springe = function() {
console.log('Spieler springt');
};
};
Spieler.prototype = new Person();

var spieler1 = new Spieler();
console.log(spieler1.sagHallo());
console.log(spieler1.springe());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var spieler1 = {};
spieler1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise wird aus den folgenden Gründen als Anti-Pattern eingestuft:
* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viele dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht den Zugriff auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext, in dem die Funktion definiert wurde, so lange erhalten wie die Funktion selbst besteht.

Mithilfe von Closures kann der Zugriff von Variablen innerhalb von Konstruktoren auf die inneren Funktionen beschränkt werden.

<source lang="javascript">
var Spieler = function(name) {
var kuerzel = name.charAt(0);
this.getKuerzel = function() {
return kuerzel;
};
}

var spieler1 = new Spieler('John');
console.log(spieler1.getKuerzel());
</source>

==Pseudo-private Eigenschaften==

Closures sind komplex und erfordern einen sicheren Umgang mit JavaScript.
Eine Pseudokapselung kann erreicht werden, indem man privaten Eigenschaften mit einem vorangestellten Unterstrich kennzeichnet.

<source lang="javascript">
var Spieler = function(name) {
this._name = name;
this._punktzahl = 0;
this.hatNamen = function(name) {
return this._name === name;
};
}
</source>

'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den tatsächlichen Zugriff.

JavaScript-Tutorium:Grundlagen

2015-10-14T21:53:05Z

Lawrence: /* Manipulation von this */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassenorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = "Peter";
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(eigenschaft);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

console.log(spieler1.springe());
console.log(springe());
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

'''Anmerkung:''' Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

=Prototypen=

'''Anmerkung:''' Der folgende Abschnitt ist optional und für das Eigenstudium. Er ist nicht vorlesungs-/prüfungsrelevant.

Mithilfe von Prototypen ist es möglich Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
In JavaScript spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens <code>prototype</code>, welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft <code>constructor</code>, welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Spieler = function() {};
var prototyp = Spieler.prototype;
console.log(prototyp.constructor == Spieler);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird, erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Spieler = function() {};
var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype = {
erstelleKuerzel: function() {
return this.name.charAt(0);
};
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));

Spieler.prototype = {};
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler = new Spieler('John');
console.log(spieler.name);
</source>

Ist dies nicht der Fall wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

Besitzt der Prototyp selbst nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
prototypVomPrototyp.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.
Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Spieler = function() {};
var prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen helfen.
Verwendet man einen Konstruktor, der jedem neuen Objekt eine Funktion zuweist, ist das jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var spieler = [];
for (var i = 0; i < 1000; i++) {
spieler.push(new Spieler());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var spieler1 = new Spieler();
var spieler2 = new Spieler();
console.log(spieler1.sagHallo == spieler2.sagHallo);
console.log(spieler1.sagHallo == Spieler.prototype.sagHallo);
console.log(spieler2.sagHallo == Spieler.prototype.sagHallo);
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man ein Objekt als Prototypenm, welches auch mit einem Konstruktor erstellt wurde, erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.springe = function() {
console.log('Spieler springt');
};
};
Spieler.prototype = new Person();

var spieler1 = new Spieler();
console.log(spieler1.sagHallo());
console.log(spieler1.springe());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var spieler1 = {};
spieler1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise wird aus den folgenden Gründen als Anti-Pattern eingestuft:
* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viele dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht den Zugriff auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
};

var log1 = erzeugeLogFunktion('Nachricht:');
log1('Hello World');
var log2 = erzeugeLogFunktion('Message:');
log2('Hello World');
</source>

Mithilfe von Closures kann der Zugriff von Variablen innerhalb von Konstruktoren auf die inneren Funktionen beschränkt werden.

<source lang="javascript">
var Spieler = function(name) {
var kuerzel = name.charAt(0);
this.hatKuerzel = function(zuPruefendesKuerzel) {
return kuerzel === zuPruefendesKuerzel;
};
}

var spieler1 = new Spieler('John');
console.log(spieler1.hatKuerzel('J'));
</source>

==Pseudo-private Eigenschaften==

Closures sind schwer zu verstehen sein und erfordern einen sicheren Umgang mit JavaScript.
Eine Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.

<source lang="javascript">
var Spieler = function(name) {
this._name = name;
this._punktzahl = 0;
this.hatNamen = function(name) {
return this._name === name;
};
}
</source>

'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den Zugriff, wird jedoch oft verwendet in der JavaScript-Commmunity.

JavaScript-Tutorium:Grundlagen

2015-10-14T21:52:40Z

Lawrence: /* this */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassenorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = "Peter";
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(eigenschaft);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

console.log(spieler1.springe());
console.log(springe());
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

<code>apply()</code> ist auf jeder Funktion verfügbar, führt bei Aufruf die Funktion selbst aus und akzeptiert zwei Argumente.

Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array, welches als Liste von Argumenten für den Aufrufe verwendet wird.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(hoch) {
console.log(this.name + ' springt' + hoch ? ' hoch' : '');
}

var person1 = new Spieler('John');
springe.apply(person1, [true]);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt, auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente, welche an die ausführende Funktionen übergeben werden.

'''Empfehlung:''' In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann auf unterschiedliche Arten umgangen werden.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(spieler, hoch) {
console.log(spieler.name + ' springt' + hoch ? ' hoch' : '');
}

var spieler1 = new Spieler('John');
springe(spieler1, true);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

'''Anmerkung:''' Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

=Prototypen=

'''Anmerkung:''' Der folgende Abschnitt ist optional und für das Eigenstudium. Er ist nicht vorlesungs-/prüfungsrelevant.

Mithilfe von Prototypen ist es möglich Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
In JavaScript spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens <code>prototype</code>, welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft <code>constructor</code>, welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Spieler = function() {};
var prototyp = Spieler.prototype;
console.log(prototyp.constructor == Spieler);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird, erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Spieler = function() {};
var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype = {
erstelleKuerzel: function() {
return this.name.charAt(0);
};
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));

Spieler.prototype = {};
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler = new Spieler('John');
console.log(spieler.name);
</source>

Ist dies nicht der Fall wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

Besitzt der Prototyp selbst nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
prototypVomPrototyp.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.
Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Spieler = function() {};
var prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen helfen.
Verwendet man einen Konstruktor, der jedem neuen Objekt eine Funktion zuweist, ist das jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var spieler = [];
for (var i = 0; i < 1000; i++) {
spieler.push(new Spieler());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var spieler1 = new Spieler();
var spieler2 = new Spieler();
console.log(spieler1.sagHallo == spieler2.sagHallo);
console.log(spieler1.sagHallo == Spieler.prototype.sagHallo);
console.log(spieler2.sagHallo == Spieler.prototype.sagHallo);
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man ein Objekt als Prototypenm, welches auch mit einem Konstruktor erstellt wurde, erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.springe = function() {
console.log('Spieler springt');
};
};
Spieler.prototype = new Person();

var spieler1 = new Spieler();
console.log(spieler1.sagHallo());
console.log(spieler1.springe());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var spieler1 = {};
spieler1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise wird aus den folgenden Gründen als Anti-Pattern eingestuft:
* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viele dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht den Zugriff auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
};

var log1 = erzeugeLogFunktion('Nachricht:');
log1('Hello World');
var log2 = erzeugeLogFunktion('Message:');
log2('Hello World');
</source>

Mithilfe von Closures kann der Zugriff von Variablen innerhalb von Konstruktoren auf die inneren Funktionen beschränkt werden.

<source lang="javascript">
var Spieler = function(name) {
var kuerzel = name.charAt(0);
this.hatKuerzel = function(zuPruefendesKuerzel) {
return kuerzel === zuPruefendesKuerzel;
};
}

var spieler1 = new Spieler('John');
console.log(spieler1.hatKuerzel('J'));
</source>

==Pseudo-private Eigenschaften==

Closures sind schwer zu verstehen sein und erfordern einen sicheren Umgang mit JavaScript.
Eine Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.

<source lang="javascript">
var Spieler = function(name) {
this._name = name;
this._punktzahl = 0;
this.hatNamen = function(name) {
return this._name === name;
};
}
</source>

'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den Zugriff, wird jedoch oft verwendet in der JavaScript-Commmunity.

JavaScript-Tutorium:Grundlagen

2015-10-14T21:51:51Z

Lawrence: /* this */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassenorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = "Peter";
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(eigenschaft);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

spieler1.springe();
springe();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

'''Anmerkung:''' Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

==Erzwingung von <code>new</code>==

Es ist bedingt möglich sicherzustellen, dass eine Funktion mit <code>new</code> aufgerufen wurde.
Zum Beispiel kann überprüft werden ob <code>this</code> auf das globale Objekt zeigt (<code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
if (this === window) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

==Factories==

Konstruktoren sollten nur verwendet werden wenn die Funktionsweise klar ist.
Aufgrund der Flexibilität von JavaScript gibt es auch andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstelleSpieler = function(name) {
return {name: name};
}
var spieler1 = erstelleSpieler('John');
console.log(spieler1);
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

console.log(spieler1.springe());
console.log(springe());
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

<code>apply()</code> ist auf jeder Funktion verfügbar, führt bei Aufruf die Funktion selbst aus und akzeptiert zwei Argumente.

Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array, welches als Liste von Argumenten für den Aufrufe verwendet wird.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(hoch) {
console.log(this.name + ' springt' + hoch ? ' hoch' : '');
}

var person1 = new Spieler('John');
springe.apply(person1, [true]);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt, auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente, welche an die ausführende Funktionen übergeben werden.

'''Empfehlung:''' In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann auf unterschiedliche Arten umgangen werden.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(spieler, hoch) {
console.log(spieler.name + ' springt' + hoch ? ' hoch' : '');
}

var spieler1 = new Spieler('John');
springe(spieler1, true);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

'''Anmerkung:''' Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

=Prototypen=

'''Anmerkung:''' Der folgende Abschnitt ist optional und für das Eigenstudium. Er ist nicht vorlesungs-/prüfungsrelevant.

Mithilfe von Prototypen ist es möglich Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
In JavaScript spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens <code>prototype</code>, welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft <code>constructor</code>, welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Spieler = function() {};
var prototyp = Spieler.prototype;
console.log(prototyp.constructor == Spieler);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird, erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Spieler = function() {};
var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype = {
erstelleKuerzel: function() {
return this.name.charAt(0);
};
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));

Spieler.prototype = {};
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler = new Spieler('John');
console.log(spieler.name);
</source>

Ist dies nicht der Fall wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

Besitzt der Prototyp selbst nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
prototypVomPrototyp.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.
Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Spieler = function() {};
var prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen helfen.
Verwendet man einen Konstruktor, der jedem neuen Objekt eine Funktion zuweist, ist das jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var spieler = [];
for (var i = 0; i < 1000; i++) {
spieler.push(new Spieler());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var spieler1 = new Spieler();
var spieler2 = new Spieler();
console.log(spieler1.sagHallo == spieler2.sagHallo);
console.log(spieler1.sagHallo == Spieler.prototype.sagHallo);
console.log(spieler2.sagHallo == Spieler.prototype.sagHallo);
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man ein Objekt als Prototypenm, welches auch mit einem Konstruktor erstellt wurde, erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.springe = function() {
console.log('Spieler springt');
};
};
Spieler.prototype = new Person();

var spieler1 = new Spieler();
console.log(spieler1.sagHallo());
console.log(spieler1.springe());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var spieler1 = {};
spieler1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise wird aus den folgenden Gründen als Anti-Pattern eingestuft:
* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viele dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht den Zugriff auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
};

var log1 = erzeugeLogFunktion('Nachricht:');
log1('Hello World');
var log2 = erzeugeLogFunktion('Message:');
log2('Hello World');
</source>

Mithilfe von Closures kann der Zugriff von Variablen innerhalb von Konstruktoren auf die inneren Funktionen beschränkt werden.

<source lang="javascript">
var Spieler = function(name) {
var kuerzel = name.charAt(0);
this.hatKuerzel = function(zuPruefendesKuerzel) {
return kuerzel === zuPruefendesKuerzel;
};
}

var spieler1 = new Spieler('John');
console.log(spieler1.hatKuerzel('J'));
</source>

==Pseudo-private Eigenschaften==

Closures sind schwer zu verstehen sein und erfordern einen sicheren Umgang mit JavaScript.
Eine Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.

<source lang="javascript">
var Spieler = function(name) {
this._name = name;
this._punktzahl = 0;
this.hatNamen = function(name) {
return this._name === name;
};
}
</source>

'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den Zugriff, wird jedoch oft verwendet in der JavaScript-Commmunity.

JavaScript-Tutorium:Grundlagen

2015-10-14T21:49:41Z

Lawrence: /* Konstruktoren */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassenorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = "Peter";
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(eigenschaft);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}
Spieler('John Doe');
console.log(window.name);
</source>

==Erzwingung von <code>new</code>==

Es ist bedingt möglich sicherzustellen, dass eine Funktion mit <code>new</code> aufgerufen wurde.
Zum Beispiel kann überprüft werden ob <code>this</code> auf das globale Objekt zeigt (<code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
if (this === window) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

==Factories==

Konstruktoren sollten nur verwendet werden wenn die Funktionsweise klar ist.
Aufgrund der Flexibilität von JavaScript gibt es auch andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstelleSpieler = function(name) {
return {name: name};
}
var spieler1 = erstelleSpieler('John');
console.log(spieler1);
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

console.log(spieler1.springe());
console.log(springe());
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

<code>apply()</code> ist auf jeder Funktion verfügbar, führt bei Aufruf die Funktion selbst aus und akzeptiert zwei Argumente.

Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array, welches als Liste von Argumenten für den Aufrufe verwendet wird.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(hoch) {
console.log(this.name + ' springt' + hoch ? ' hoch' : '');
}

var person1 = new Spieler('John');
springe.apply(person1, [true]);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt, auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente, welche an die ausführende Funktionen übergeben werden.

'''Empfehlung:''' In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann auf unterschiedliche Arten umgangen werden.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(spieler, hoch) {
console.log(spieler.name + ' springt' + hoch ? ' hoch' : '');
}

var spieler1 = new Spieler('John');
springe(spieler1, true);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

'''Anmerkung:''' Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

=Prototypen=

'''Anmerkung:''' Der folgende Abschnitt ist optional und für das Eigenstudium. Er ist nicht vorlesungs-/prüfungsrelevant.

Mithilfe von Prototypen ist es möglich Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
In JavaScript spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens <code>prototype</code>, welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft <code>constructor</code>, welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Spieler = function() {};
var prototyp = Spieler.prototype;
console.log(prototyp.constructor == Spieler);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird, erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Spieler = function() {};
var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype = {
erstelleKuerzel: function() {
return this.name.charAt(0);
};
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));

Spieler.prototype = {};
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler = new Spieler('John');
console.log(spieler.name);
</source>

Ist dies nicht der Fall wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

Besitzt der Prototyp selbst nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
prototypVomPrototyp.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.
Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Spieler = function() {};
var prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen helfen.
Verwendet man einen Konstruktor, der jedem neuen Objekt eine Funktion zuweist, ist das jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var spieler = [];
for (var i = 0; i < 1000; i++) {
spieler.push(new Spieler());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var spieler1 = new Spieler();
var spieler2 = new Spieler();
console.log(spieler1.sagHallo == spieler2.sagHallo);
console.log(spieler1.sagHallo == Spieler.prototype.sagHallo);
console.log(spieler2.sagHallo == Spieler.prototype.sagHallo);
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man ein Objekt als Prototypenm, welches auch mit einem Konstruktor erstellt wurde, erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.springe = function() {
console.log('Spieler springt');
};
};
Spieler.prototype = new Person();

var spieler1 = new Spieler();
console.log(spieler1.sagHallo());
console.log(spieler1.springe());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var spieler1 = {};
spieler1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise wird aus den folgenden Gründen als Anti-Pattern eingestuft:
* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viele dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht den Zugriff auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
};

var log1 = erzeugeLogFunktion('Nachricht:');
log1('Hello World');
var log2 = erzeugeLogFunktion('Message:');
log2('Hello World');
</source>

Mithilfe von Closures kann der Zugriff von Variablen innerhalb von Konstruktoren auf die inneren Funktionen beschränkt werden.

<source lang="javascript">
var Spieler = function(name) {
var kuerzel = name.charAt(0);
this.hatKuerzel = function(zuPruefendesKuerzel) {
return kuerzel === zuPruefendesKuerzel;
};
}

var spieler1 = new Spieler('John');
console.log(spieler1.hatKuerzel('J'));
</source>

==Pseudo-private Eigenschaften==

Closures sind schwer zu verstehen sein und erfordern einen sicheren Umgang mit JavaScript.
Eine Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.

<source lang="javascript">
var Spieler = function(name) {
this._name = name;
this._punktzahl = 0;
this.hatNamen = function(name) {
return this._name === name;
};
}
</source>

'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den Zugriff, wird jedoch oft verwendet in der JavaScript-Commmunity.

MMProg:WiSe2015:Praktikum:Aufgabe 4

2015-10-09T07:37:51Z

Lawrence:

=Praktikumsaufgabe 4=

==Arbeiten mit Funktionen und <code>this</code>==

===Ziel===

Ziel dieser Aufgabe ist es die in dem JavaScript-Tutorium vermittelten Grundlagen für
Funktionen, Konstruktoren und <code>this</code> zu vertiefen.

===Projekt vorbereiten===

'''Anmerkung:''' Es ist fortan nicht notwendig Subversion über die Kommandozeile zu bedienen.
Nutzen Sie dazu einfach WebStorm oder aber TortoiseSVN bzw. svnX.

Stellen Sie sicher, dass Sie die Praktikumsvorlagen auf Ihrem Rechner gespeichert haben.
Folgen Sie dazu der Anleitung aus Teil 1 der 1. Praktikumsaufgabe.

Legen Sie dann einen neuen Ordner "aufgabe4" innerhalb Ihres Verzeichnis/Repositories an.
Speichern Sie alle Dateien aus dem Lehrveranstaltungsordner "aufgabe4/vorlage" in diesem Ordner ab.

Machen Sie sich mit der Datei "index.js" vertraut und öffnen Sie die Datei "index.html" testweise im Browser.
Fügen Sie den Code relevant für Spieler der nachfolgenden Teilaufgaben in die Datei "Player.js" ein.

Den Test-Code in den folgenden Abschnitten können Sie in die Datei "index.js" einpflegen um Ihre Lösungen zu validieren.

===Spieler erstellen===

Erstellen Sie zunächst eine Funktion namens <code>createPlayer()</code> die bei jedem Aufruf ein leeres Objekt erzeugt.

<source lang="javascript">
var player1 = createPlayer();
view.addObjectView(player1);

var player2 = createPlayer();
view.addObjectView(player2);

console.log(player1 !== player2); // sollte true ergeben
</source>

Erweiteren Sie die Funktion nun so, dass sie zwei Argumente namens "name" und "numberOfLifes" akzeptiert
und die Werte dieser Argumente gleichnamigen Eigenschaften dem erzeugten Objekt zuweist.

<source lang="javascript">
var player1 = createPlayer('John', 3);
view.addObjectView(player1);
</source>

===Konstruktor für Spieler===

Wandeln Sie die Funktion <code>createPlayer()</code> nun in eine Konstruktorfunktion namens <code>Player()</code> um.

<source lang="javascript">
var player1 = new Player();
view.addObjectView(player1);
</source>

Der Konstruktor soll nach wie vor "name" und "numberOfLifes" akzeptieren und die Werte dem neu erstellten Objekt zuweisen.
Die zugewiesenen Eigenschaften sollen nun allerdings mit einem Unterstrich beginnen, um sie als privat zu kennzeichnen.

<source lang="javascript">
var player1 = new Player('John', 3);
view.addObjectView(player1);
</source>

Stellen Sie sicher, dass der Konstruktor nur mit <code>new</code> aufgerufen werden kann. Folgender Code sollte einen Fehler verursachen.

<source lang="javascript">
var player1 = Player('John', 3);
</source>

===Leben verlieren===

Im Laufe eines Spiels kann es passieren, dass ein Spieler ein oder mehrere seiner Leben verliert.
Erstellen Sie dazu auf jedem neuen Spielerobjekt die Funktion <code>loseLife()</code>, welche die Zahl der Leben um eins reduziert.

<source lang="javascript">
var player1 = new Player('John', 3);
view.addObjectView(player1);
player1.loseLife(); // sollte nun 2 betragen
</source>

===Namen abändern===

Außerdem kann es sein, dass sich ein Spieler nachträglich für einen anderen Namen entscheiden möchte.
FÜgen Sie deshalb auf jedem neuen Spielerobjekt die Funktion <code>changeName(name)</code> hinzu, welche den Namen des Spielers ändert.

<source lang="javascript">
var player1 = new Player('John', 3);
view.addObjectView(player1);
player1.changeName('James'); // Name sollte nun James sein
</source>

===Aktuelle Spielerinformationen===

Erweitern Sie jedes neue Spielerobjekt um die Funktion <code>getInfo()</code>, welche aktuelle Spielerinformationen bereitstellen soll.
Die Funktion liefert den Namen des Spielers und die Anzahl seiner aktuellen Leben als zusammengesetzten String zurück.

<source lang="javascript">
var player1 = new Player('John', 3);
view.addObjectView(player1);
player1.loseLife();
player1.changeName('James');
console.log(player1.getInfo()); // gibt 'Spieler: James / Leben: 2' aus
</source>

===Typüberprüfung===

In bestimmten Spielsituationen kann es wichtig sein zu überprüfen, ob sich bei einem Objekt um einen Spieler handelt.
Schreiben Sie die dazu die Funktion <code>Player.isPlayer()</code>, welche den Typ von einem gegebenen Objekt überprüft.

<source lang="javascript">
var player1 = new Player('John', 3);
view.addObjectView(player1);
console.log(Player.isPlayer(player1)); // true
console.log(Player.isPlayer({})); // false
</source>

JavaScript-Tutorium:Grundlagen

2015-10-07T16:49:02Z

Lawrence:

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassenorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = "Peter";
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(eigenschaft);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Spieler = function(name) {
return {
name: vorname,
punktzahl: 0
};
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}
Spieler('John Doe');
console.log(window.name);
</source>

==Erzwingung von <code>new</code>==

Es ist bedingt möglich sicherzustellen, dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.

Zum einen kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

<source lang="javascript">
var Spieler = function(name) {
if (!(this instanceof Spieler)) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

Zum anderen kann überprüft werden ob <code>this</code> auf das globale Objekt zeigt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
if (this === window) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

==Alternative==

Konstruktorfunktionen sollten nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Wichtiger ist jedoch die effiziente Wiederverwendung wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es auch andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstelleSpieler = function(name) {
return {name: name};
}
var spieler1 = erstelleSpieler('John');
console.log(spieler1);
</source>

==Typüberprüfung==

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.

===typeof-Operator===

Für simple Datentypen funktioniert der <code>typeof</code>-Operator erwartungsgemäß.

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator nicht wie erwartet.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};

var spieler1 = new Spieler('John Doe');
console.log('typeof spieler1 ist ' + typeof spieler1);

var spieler2 = null;
console.log('typeof spieler2 ist ' + typeof spieler2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log('getType() von spieler1 ist ' + getType(spieler1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

console.log(spieler1.springe());
console.log(springe());
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

<code>apply()</code> ist auf jeder Funktion verfügbar, führt bei Aufruf die Funktion selbst aus und akzeptiert zwei Argumente.

Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array, welches als Liste von Argumenten für den Aufrufe verwendet wird.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(hoch) {
console.log(this.name + ' springt' + hoch ? ' hoch' : '');
}

var person1 = new Spieler('John');
springe.apply(person1, [true]);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt, auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente, welche an die ausführende Funktionen übergeben werden.

'''Empfehlung:''' In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann auf unterschiedliche Arten umgangen werden.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(spieler, hoch) {
console.log(spieler.name + ' springt' + hoch ? ' hoch' : '');
}

var spieler1 = new Spieler('John');
springe(spieler1, true);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

'''Anmerkung:''' Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

=Prototypen=

'''Anmerkung:''' Der folgende Abschnitt ist optional und für das Eigenstudium. Er ist nicht vorlesungs-/prüfungsrelevant.

Mithilfe von Prototypen ist es möglich Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
In JavaScript spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens <code>prototype</code>, welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft <code>constructor</code>, welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Spieler = function() {};
var prototyp = Spieler.prototype;
console.log(prototyp.constructor == Spieler);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird, erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Spieler = function() {};
var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype = {
erstelleKuerzel: function() {
return this.name.charAt(0);
};
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));

Spieler.prototype = {};
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler = new Spieler('John');
console.log(spieler.name);
</source>

Ist dies nicht der Fall wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

Besitzt der Prototyp selbst nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
prototypVomPrototyp.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.
Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Spieler = function() {};
var prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen helfen.
Verwendet man einen Konstruktor, der jedem neuen Objekt eine Funktion zuweist, ist das jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var spieler = [];
for (var i = 0; i < 1000; i++) {
spieler.push(new Spieler());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var spieler1 = new Spieler();
var spieler2 = new Spieler();
console.log(spieler1.sagHallo == spieler2.sagHallo);
console.log(spieler1.sagHallo == Spieler.prototype.sagHallo);
console.log(spieler2.sagHallo == Spieler.prototype.sagHallo);
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man ein Objekt als Prototypenm, welches auch mit einem Konstruktor erstellt wurde, erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.springe = function() {
console.log('Spieler springt');
};
};
Spieler.prototype = new Person();

var spieler1 = new Spieler();
console.log(spieler1.sagHallo());
console.log(spieler1.springe());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var spieler1 = {};
spieler1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise wird aus den folgenden Gründen als Anti-Pattern eingestuft:
* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viele dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht den Zugriff auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
};

var log1 = erzeugeLogFunktion('Nachricht:');
log1('Hello World');
var log2 = erzeugeLogFunktion('Message:');
log2('Hello World');
</source>

Mithilfe von Closures kann der Zugriff von Variablen innerhalb von Konstruktoren auf die inneren Funktionen beschränkt werden.

<source lang="javascript">
var Spieler = function(name) {
var kuerzel = name.charAt(0);
this.hatKuerzel = function(zuPruefendesKuerzel) {
return kuerzel === zuPruefendesKuerzel;
};
}

var spieler1 = new Spieler('John');
console.log(spieler1.hatKuerzel('J'));
</source>

==Pseudo-private Eigenschaften==

Closures sind schwer zu verstehen sein und erfordern einen sicheren Umgang mit JavaScript.
Eine Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.

<source lang="javascript">
var Spieler = function(name) {
this._name = name;
this._punktzahl = 0;
this.hatNamen = function(name) {
return this._name === name;
};
}
</source>

'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den Zugriff, wird jedoch oft verwendet in der JavaScript-Commmunity.

MMProg:WiSe2015:Praktikum:Aufgabe 2

2015-10-07T14:08:06Z

Lawrence:

=Praktikumsaufgabe 2=

==Vertiefung der JavaScript-Grundlagen==

===Ziel===

Ziel dieser Aufgabe ist es eine bestehende JavaScript-Logger-Anwendung zu erweitern.

===Projekt vorbereiten===

'''Anmerkung:''' Es ist fortan nicht notwendig Subversion über die Kommandozeile zu bedienen.
Nutzen Sie dazu einfach WebStorm oder alternativ TortoiseSVN bzw. svnX.

Stellen Sie sicher, dass Sie die Praktikumsvorlagen auf Ihrem Rechner gespeichert haben.
Folgen Sie dazu der Anleitung aus Teil 1 der 1. Praktikumsaufgabe.

Legen Sie ein neues Verzeichnis "aufgabe2" innerhalb Ihres Repository-Verzeichnisses an.
Kopieren Sie die aus dem Lehrveranstaltung-Repository im Ordner "aufgabe2/vorlage" enthaltenen Dateien in das Verzeichnis.

===Log-Funktion verwenden===

Wie im zweiten Teil der ersten Aufgabe wird bei dieser Aufgabe eine Logger-Funktion zur Verfügung gestellt.
Diese Funktion wurde aus Gründen der Modularisierung in die eigene Datei "log.js" ausgelagert.
Öffnen Sie diese Datei und machen Sie sich zunächst mit dem Code vertraut.

Versuchen Sie nun herauszufinden, welche Ausgaben die einzelnen folgenden Code-Blöcke verursachen.
Validieren Sie Ihre Annahmen, indem Sie den Code in die "index.js" kopieren und die Seite "index.html" im Browser aufrufen.

<source lang="javascript">
log(spielerName1);
var spielerName1 = 'Paul';

var spielerName2 = 'Peter';
log(spielerName2);

window.spielerName3 = 'Hans';
log(spielerName3);

var punktzahl1;
log(punktzahl1);

var punktzahl2 = 100 / 'a';
log(punktzahl2);

var punktzahl3 = 017;
log(punktzahl3);

log(1.000 == 1);

var begruessung = 'Hallo Spieler!' + ' ' + 'Start in ' + 5 + ' Sekunden';
log(begruessung);
</source>

===Log-Funktion erweitern===

Im Folgenden geht es darum die Funktion <code>log()</code> in der Datei "log.js" zu erweitern.
Platzieren Sie Ihren Code direkt am Anfang der Funktion bevor der Wert von <code>message</code> in die Seite eingefügt wird.

====Leerer String====

Die Ausgabe des Loggers ist bei leeren Zeichenketten nicht besonders aussagekräftig.
Erweitern Sie den Code so, dass anstelle von leeren Zeichenketten der String "(empty string)" ausgegeben wird.

Validieren Sie die Funktionalität, indem Sie in der "index.js" <code>log()</code> mit einem leeren String aufrufen.

====Booleans, Null und Undefined====

Auch bei den boolschen Werten <code>true</code> und <code>false</code> sowie <code>null</code> und <code>undefined</code> kann die Ausgabe missverständlich sein.
Können Sie sich denken warum?

Erweitern Sie den Code wie folgt:
* handelt es sich um einen boolschen Wert soll die Zeichenkette "(boolean)" angehängt werden
* handelt es sich um Null soll die Zeichenkette "(null)" angehängt werden
* handelt es sich um Undefined soll die Zeichenkette "(undefined)" angehängt werden

Validieren Sie die Funktionalität, indem Sie in der "index.js" <code>log()</code> mit den entsprechenden Werten aufrufen.

====Aktuelles Datum====

Bei Log-Nachrichten ist es immer sinnvoll zu wissen zu welchem Zeitpunkt diese erstellt wurden.
Mithilfe des Ausdrucks <code>new Date()</code> bekommen Sie ein Datumsobjekt welches das aktuelle Datum vorhält.

Erweitern Sie die Log-Funktion so, dass '''vor''' jeder Nachricht das aktuelle Datum mit ausgegeben wird.

MMProg:WiSe2015:Praktikum:Aufgabe 1:Teil 2

2015-10-02T11:02:38Z

Lawrence: /* Praktikumsaufgabe 1, Teil 1 */

=Praktikumsaufgabe 1, Teil 2=

==Eine erste JavaScript-Anwendung: Hello World==

===Ziel===

Ziel dieser Aufgabe ist eine HTML5/JavaScript-Anwendung zu erstellen,
welche die Nachricht "Hello World" als Text im Browser ausgibt.

===HTML-Datei erstellen===

Erstellen Sie eine neue HTML-Datei mittels Rechtsklick auf den Projektordner und dann Klick auf "New" -> "HTML File".
Benennen Sie Datei "index.html" und füllen Sie diese anschließend mit folgendem Inhalt:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<title>JavaScript-Praktikum; Aufgabe 1; Teil 2</title>
<meta charset="UTF-8">
</head>

<body>
</body>
</html>
</source>

Das ist alles was an Markup benötigt wird für ein valides HTML5-Dokument.
Weitere Meta-Anweisungen sind durchaus sinnvoll, allerdings nicht benötigt für die folgenden Beispiele.

Öffnen Sie die Seite im Browser mittels Rechtsklick auf die Datei und dann Klick auf "Open in Browser" -> "Firefox".
Sie sollten eine komplett weiße Seite sehen. Sichern Sie den aktuellen Stand vom Projekt im Repository.

===JavaScript-Code hinzufügen===

Es gibt zwei Möglichkeiten um ein HTML-Dokument um JavaScript-Code zu erweitern:

* Direkte Einbettung mittels Inline-Code in einem <code><script></code>-Tag
* Referenzierung einer externen Datei mittels <code><script></code>-Tag

Die direkte Einbettung von JavaScript-Code sollte wenn möglich vermieden werden.
Das Auslagern des Codes in eine separate Datei hat folgende Vorteile:

* Der Code ist sauber getrennt vom HTML (Seperation of Concerns)
* Der JavaScript-Code kann in mehreren HTML-Dateien eingesetzt werden (Don't Repeat Yourself).
* Die Ladezeit der Seite ist besser, da der JavaScript-Code im Browser-Cache gespeichert werden kann.

====Hauptdatei erstellen====

Erstellen Sie eine neue JS-Datei mittels Rechtsklick auf den Ordner und dann Klick auf "New" -> "JavaScript File".
Benennen Sie Datei "index.js" und fügen Sie folgenden Code in diese ein:

<source lang="javascript">
var log = function(message) {
document.querySelector('.messages').innerHTML += '<div class="message">' + message + '</div>';
};

log('Hello World');
</source>

Der JavaScript-Code stellt eine Log-Funktion bereit, welche mithilfe der DOM-API Nachrichten in die Seite ausgeben kann.
Nach dem Laden der HTML-Seite wird der Logger initial benutzt um die Nachricht "Hello World" auszugeben.

Ändern Sie dann das HTML-Dokument wie folgt ab:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<title>JavaScript-Praktikum; Aufgabe 1; Teil 2</title>
<meta charset="UTF-8">
</head>

<body>
<h1 class="headline">Logged messages</h1>
<div class="messages"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
</source>

Öffnen Sie die Seite erneut im Browser. Nun sollten Sie die Nachricht "Hello World" sehen.
Sichern Sie den aktuellen Stand im Repository.

====Dateien aufsplitten====

In den meisten Projekten ist es empfehlenswert, den JavaScript-Code in mehrere modulare Dateien aufzusplitten.
Bei der Einbindung dieser muss dann allerdings die Reihenfolge beachtet werden.
Der Browser lädt und evaluiert den Code in der Reihenfolge der eingebetteten <code><script></code>-Tags.

Teilen Sie nun den Code in der Datei "index.js" so auf, dass die Log-Funktion in einer eigenen Datei "log.js" liegt.
Die Datei "index.js" soll also nur noch den Aufruf der Log-Funktion mit der Nachricht "Hello World" beinhalten.

Ändern Sie dann das HTML-Dokument wie folgt ab:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<title>JavaScript-Praktikum; Aufgabe 1; Teil 2</title>
<meta charset="UTF-8">
</head>

<body>
<h1 class="headline">Logged messages</h1>
<div class="messages"></div>
<script type="text/javascript" src="log.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
</source>

'''Anmerkung:''' Tauschen Sie testweise die Reihenfolge der JavaScript-Dateien. Was denken Sie, was passieren wird?

===Styling===

Um die visuelle Darstellung von HTML-Seiten zu steuern werden Cascading Style Sheets (CSS) verwendet.
Ebenso wie JavaScript kann CSS auf zwei Weisen in einem HTML-Dokument verwendet werden:

* Direkte Einbettung mittels Inline-Code in einem <code><style></code>-Tag
* Referenzierung einer externen Datei mittels <code><link></code>-Tag

Die gleichen Gründe wie bei JavaScript sprechen dafür das CSS in eine externe Datei auszulagern.
Legen Sie dazu eine neue CSS-Datei names <code>index.css</code> an und fügen Sie folgenden Inhalt ein:

<source lang="css">
html, body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.headline {
font-size: 35px;
font-weight: normal;
}

.messages {
background-color: #000;
color: #FFF;
padding: 20px;
margin: 0;
}

.message {
margin: 0 0 20px;
}

.message:last-child {
margin: 0;
}
</source>

Ändern Sie dann das HTML-Dokument wie folgt ab:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<title>JavaScript-Praktikum; Aufgabe 1; Teil 1</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css" />
</head>

<body>
<h1 class="headline">Logged messages</h1>
<div class="messages"></div>
<script type="text/javascript" src="log.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
</source>

Öffnen Sie die Seite erneut im Browser. Diese sollte nun eine andere visuelle Darstellung aufweisen.
Sie können das Styling Ihren Wünschen entsprechend verändern. Sichern Sie dann den aktuellen Stand im Repository.

===Weitere Nachrichten ausgeben===

Die mittels JavaScript erstellte Log-Funktion bietet die Möglichkeit beliebige Nachrichten auszugeben.
Erweitern Sie den Code nun so, dass nach der Nachricht "Hello World" die Nachricht "How are you doing?" ausgegeben wird.

===Konsole verwenden===

In vielen Fällen kann die Browser-Konsole dabei unterstützen Fehler zu finden oder Probleme zu analysieren.
In den meisten Browsern finden Sie einen Einstieg in die Entwicklertools mittels Rechtsklick -> "Inspect element".
Daraufhin öffnet sich eine Leiste mit unterschiedlichen Werkzeugen wie dem DOM Inspector und auch der Konsole.

Die Konsole hat zwei wesentliche Kernfunktionen.
Zum einen stellt Sie eine JavaScript-API bereit welche Nachrichten entgegennimmt und diese dann ausgibt.
Dies können Informationen, Warnung und auch Fehler der aktuell geladenen Seite sein.
Laufzeitfehler der aktuellen Seite führen implizit zu einem Fehler-Eintrag in der Konsole.
Zum anderen ermöglicht die Konsole meist beliebigen JavaScript-Code im Kontext der aktuellen Seite auszuführen.

Öffnen Sie zunächst die Konsole und machen Sie sich mit der Ansicht vertraut.
Geben Sie anschließend in die untere Eingabezeile der Konsole <code>console.log('Hello World');</code> ein und drücken Sie Enter.
Dies führt dazu dass die Nachricht "Hello World" in der Konsole ausgegeben wird.

Versuchen Sie abschließend aus der Konsole heraus das Logger-Objekt der aktuellen HTML-Seite anzusteuern und die Nachricht
"called from the console" auszugeben.

MMProg:WiSe2015:Praktikum:Aufgabe 1:Teil 1

2015-10-02T10:30:26Z

Lawrence:

=Praktikumsaufgabe 1, Teil 1=

==Einrichtung der Arbeitsumgebung==

===Ziele===

* Installation und Konfiguration von WebStorm
* Checkout des Repositories der Lehrveranstaltung
* Checkout des eigenen Subversion-Repositories
* Verbinden des Repositories mit der WebStorm IDE

===Installation von Webstorm===

Laden Sie sich zunächst [http://www.jetbrains.com/webstorm/ Webstorm] herunter und installieren Sie es.
'''Anmerkung:''' Auf Rechnern der Hochschule ist Webstorm bereits vorinstalliert.

====Lizenz====

Als Student der Hochschule Augsburg erhalten Sie mit Ihrer Hochschul-E-Mail-Adresse eine kostenlose Studentenlizenz.
Gehen Sie dazu auf die [https://www.jetbrains.com/estore/students/ Antragsseite] und füllen Sie das Formular aus.

'''Anmerkung:''' Falls Sie an einem Rechner der Hochschule arbeiten können Sie die Hochschullizenz verwenden.
Bitte kontaktieren Sie den Lehrbeauftragten / Professor um den Lizenzschlüssel zu erhalten.

====IDE-Konfiguration====

Webstorm ist auf die Entwicklung mit HTML, CSS und JavaScript ausgelegt, wodurch sich die Konfiguration einfach gestaltet.

Stellen Sie sicher dass unter "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins"
auf jeden Fall folgende Plugins aktiviert sind (diese sollte standardmäßig der Fall sein):

* JavaScript Support
* Subversion Integration

Verifizieren Sie außerdem dass unter "Project settings" -> "JavaScript" die "JavaScript language version" auf
"ECMAScript 5.1" eingestellt ist.

====Code-Style====

Standardmäßig sind vier Leerzeichen als Einrückung für Code-Formattierungen eingestellt.
Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber zwei Leerzeichen aufgrund der häufigeren Verwendung.

Um diese Einstellung zu ändern klicken Sie jeweils auf "JavaScript", "CSS" und "HTML" und tragen bei "Tab size",
"Indent" und "Continuation Indent" die gewünsche Zahl an Leerzeichen ein.

Vermeiden Sie in jedem Fall das Tab-Zeichen zu verwenden, da dies nicht genormt ist und je nach Betriebssystem anders aussieht.

====Markdown====

Die Anmerkungen zu den Praktikumsaufgaben sind im Repository als
[https://de.wikipedia.org/wiki/Markdown Markdown]-Dokumente abgespeichert.
Für Syntax Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren.
Dazu gehen Sie auf "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins",
suchen dort nach "Markdown support" und klicken anschließend auf "Browse".
Es erscheint dann ein Plugin namens "Markdown support".
Installieren Sie dieses und starten Webstorm danach neu.

==Checkout der Repositories==

Der folgende Abschnitt beschreibt eine exemplarische Verwendung von Subversion in der Kommandozeile um
die für das Praktikum notwendigen Repositories auf dem lokalen Rechner einzurichten.

'''Anmerkung:''' Alternativ können Sie die folgenden Schritte auch mit TortoiseSVN, svnX oder auch
mit dem integrierten Subversion-Support in Webstorm durchführen.

Es ist '''nicht''' notwendig jedes Mal die Kommandozeile zu verwenden.

===Vorbereitung auf Windows===

* TortoiseSVN inklusive Command Line Tools [http://glossar.hs-augsburg.de/Installation_von_Tortoise_%28Windows%29 installieren]
* Alternativ SlikSVN [https://sliksvn.com/ installieren]
* Im Explorer zum gewünschten Ordner navigieren in dem die Daten gespeichert werden sollen (z.B. C:\studium)
* Shift + Rechtsklick -> "Eingabeaufforderung hier öffnen"

===Vorbereitung auf OSX===

* Optional: svnX [http://glossar.hs-augsburg.de/Subversion/HowTo#svnX installieren]
* Terminal öffnen
* In den gewünschen Ordner bzw. auf den Desktop gehen: <code>cd Desktop</code>

===Arbeitsschritte===

* Ordner erstellen: <code>mkdir mmprog</code>
* Ordner betreten: <code>cd mmprog</code>
* SVN testen: <code>svn list https://praktikum.multimedia.hs-augsburg.de/svn/lawrence</code>
* Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen
* Lehrveranstaltung auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung</code>
* Eigenes Repository auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung repository</code>
* Ordner betreten: <code>cd repository</code>
* Ordner "aufgabe1" anlegen: <code>mkdir aufgabe1</code>
* Ordner im SVN adden: <code>svn add aufgabe1</code>
* Commit ausführen: <code>svn commit -m "Initial commit."</code>
* Ordner betreten: <code>cd aufgabe1</code>
* Ordner "teil1" anlegen: <code>mkdir teil1</code>
* Ordner im SVN adden: <code>svn add teil1</code>
* Commit ausführen: <code>svn commit -m "Second commit."</code>
* Nun können Sie Webstorm öffnen und auf "Open Directory" klicken. Wählen Sie dann den Ordner "repository" aus
* '''Anmerkung für OSX:''' Falls Sie den Ordner auf dem Desktop erzeugt haben können Sie diesen über den Finder verschieben

Falls Sie auf OSX ein Problem damit haben das Zertifikat zu akzeptieren führen Sie folgenden Befehl aus:
<code>sudo svn list https://praktikum.multimedia.hs-augsburg.de/</code>
Da der Befehl als superuser ausgeführt wird müssen Sie Ihr lokales Rechner-Passwort eingeben.

===Projekt aktuell halten===

Wenn Sie mit der Bearbeitung Ihres Projektes aufhören sollten Sie stets den aktuellen Stand in Ihrem Repository sichern.
Webstorm verfügt über integrierten Subversion-Support und erkennt automatisch welche Operationen auszuführen sind.
Das bedeutet es ist '''nicht notwendig alle SVN-Befehle immer manuell über das Terminal auszuführen'''.
'''Wichtig:''' Verschieben oder Löschen Sie keine Dateien im Explorer/Finder ohne die entsprechenden SVN-Operationen.

Öffnen Sie nach Änderungen den Commit-Dialog:

* Im Projektexplorer Rechtsklick auf das aktuelle Projekt
* Klick auf "Subversion"
* Klick auf "Commit Directory"
* Verifizieren, dass alle zu speicherenden Dateien angehakt sind
* Eine entsprechende Commit-Message eingeben
* "OK" klicken

'''Anmerkung:''' Eine rot markierte Datei bedeutet, dass WebStorm diese nicht als Teil des Repositories erkennt.
Machen Sie dann einen Rechtsklick auf die Datei und wählen "SVN" -> "Add..." aus um die Datei hinzuzufügen.
Beim '''nächsten Commit''' wird die Datei dann mit auf den SVN-Server übertragen.

Wenn Sie auf einem anderen Rechner an diesem Projekt weiterarbeiten wollen,
müssen sie beim ersten Mal das Projekt in der oben beschriebenen Weise aus dem Repository auf Ihren Rechner laden.
Wenn Sie dies einmal gemacht haben, reicht es wenn Sie künftig die lokale Version wie folgt aktualisieren,
bevor Sie mit der Arbeit beginnen:

* Im Projektexplorer Rechtsklick auf das aktuelle Projekt
* Klick auf "Subversion"
* Klick auf "Update Directory"

===Repository im Browser einsehen===

Sie können Ihr Repository jederzeit im Browser einsehen und so verifizieren, dass der aktuelle Stand online ist.
Rufen Sie dazu folgende URL auf: <code>https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung</code>

MMProg:WiSe2015:Praktikum:Aufgabe 1:Teil 1

2015-10-02T10:18:05Z

Lawrence:

=Praktikumsaufgabe 1, Teil 1=

==Einrichtung der Arbeitsumgebung==

===Ziele===

* Installation und Konfiguration von WebStorm
* Checkout des Repositories der Lehrveranstaltung
* Checkout des eigenen Subversion-Repositories
* Verbinden des Repositories mit der WebStorm IDE

===Installation von Webstorm===

Laden Sie sich zunächst [http://www.jetbrains.com/webstorm/ Webstorm] herunter und installieren Sie es.
'''Anmerkung:''' Auf Rechnern der Hochschule ist Webstorm bereits vorinstalliert.

====Lizenz====

Als Student der Hochschule Augsburg erhalten Sie mit Ihrer Hochschul-E-Mail-Adresse eine kostenlose Studentenlizenz.
Gehen Sie dazu auf die [https://www.jetbrains.com/estore/students/ Antragsseite] und füllen Sie das Formular aus.

'''Anmerkung:''' Falls Sie an einem Rechner der Hochschule arbeiten können Sie die Hochschullizenz verwenden.
Bitte kontaktieren Sie den Lehrbeauftragten / Professor um den Lizenzschlüssel zu erhalten.

====IDE-Konfiguration====

Webstorm ist auf die Entwicklung mit HTML, CSS und JavaScript ausgelegt, wodurch sich die Konfiguration einfach gestaltet.

Stellen Sie sicher dass unter "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins"
auf jeden Fall folgende Plugins aktiviert sind (diese sollte standardmäßig der Fall sein):

* JavaScript Support
* Subversion Integration

Verifizieren Sie außerdem dass unter "Project settings" -> "JavaScript" die "JavaScript language version" auf
"ECMAScript 5.1" eingestellt ist.

====Code-Style====

Standardmäßig sind vier Leerzeichen als Einrückung für Code-Formattierungen eingestellt.
Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber zwei Leerzeichen aufgrund der häufigeren Verwendung.

Um diese Einstellung zu ändern klicken Sie jeweils auf "JavaScript", "CSS" und "HTML" und tragen bei "Tab size",
"Indent" und "Continuation Indent" die gewünsche Zahl an Leerzeichen ein.

Vermeiden Sie in jedem Fall das Tab-Zeichen zu verwenden, da dies nicht genormt ist und je nach Betriebssystem anders aussieht.

====Markdown====

Die Anmerkungen zu den Praktikumsaufgaben sind im Repository als
[https://de.wikipedia.org/wiki/Markdown Markdown]-Dokumente abgespeichert.
Für Syntax Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren.
Dazu gehen Sie auf "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins",
suchen dort nach "Markdown support" und klicken anschließend auf "Browse".
Es erscheint dann ein Plugin namens "Markdown support".
Installieren Sie dieses und starten Webstorm danach neu.

==Checkout der Repositories==

Der folgende Abschnitt beschreibt eine exemplarische Verwendung von Subversion in der Kommandozeile um
die für das Praktikum notwendigen Repositories auf dem lokalen Rechner einzurichten.

'''Anmerkung:''' Alternativ können Sie die folgenden Schritte auch mit TortoiseSVN, svnX oder auch
mit dem integrierten Subversion-Support in Webstorm durchführen.

Es ist '''nicht''' notwendig jedes Mal die Kommandozeile zu verwenden.

===Vorbereitung auf Windows===

* TortoiseSVN inklusive Command Line Tools [http://glossar.hs-augsburg.de/Installation_von_Tortoise_%28Windows%29 installieren]
* Alternativ SlikSVN [https://sliksvn.com/ installieren]
* Im Explorer zum gewünschten Ordner navigieren in dem die Daten gespeichert werden sollen (z.B. C:\studium)
* Shift + Rechtsklick -> "Eingabeaufforderung hier öffnen"

===Vorbereitung auf OSX===

* Optional: svnX [http://glossar.hs-augsburg.de/Subversion/HowTo#svnX installieren]
* Terminal öffnen
* In den gewünschen Ordner bzw. auf den Desktop gehen: <code>cd Desktop</code>

===Arbeitsschritte===

* Ordner erstellen: <code>mkdir mmprog</code>
* Ordner betreten: <code>cd mmprog</code>
* SVN testen: <code>svn list https://praktikum.multimedia.hs-augsburg.de/svn/lawrence</code>
* Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen
* Lehrveranstaltung auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung</code>
* Ordner verlassen: <code>cd ..</code>
* Eigenes Repository auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung repository</code>
* Ordner betreten: <code>cd repository</code>
* Ordner "aufgabe1" anlegen: <code>mkdir aufgabe1</code>
* Ordner im SVN adden: <code>svn add aufgabe1</code>
* Commit ausführen: <code>svn commit -m "Initial commit."</code>
* Ordner betreten: <code>cd aufgabe1</code>
* Ordner "teil1" anlegen: <code>mkdir teil1</code>
* Ordner im SVN adden: <code>svn add teil1</code>
* Commit ausführen: <code>svn commit -m "Second commit."</code>
* Nun können Sie Webstorm öffnen und auf "Open Directory" klicken. Wählen Sie dann den Ordner "repository" aus
* '''Anmerkung für OSX:''' Falls Sie den Ordner auf dem Desktop erzeugt haben können Sie diesen über den Finder verschieben

Falls Sie auf OSX ein Problem damit haben das Zertifikat zu akzeptieren führen Sie folgenden Befehl aus:
<code>sudo svn list https://praktikum.multimedia.hs-augsburg.de/</code>
Da der Befehl als superuser ausgeführt wird müssen Sie Ihr lokales Rechner-Passwort eingeben.

===Projekt aktuell halten===

Wenn Sie mit der Bearbeitung Ihres Projektes aufhören sollten Sie stets den aktuellen Stand in Ihrem Repository sichern.
Webstorm verfügt über integrierten Subversion-Support und erkennt automatisch welche Operationen auszuführen sind.
Das bedeutet es ist '''nicht notwendig alle SVN-Befehle immer manuell über das Terminal auszuführen'''.
'''Wichtig:''' Verschieben oder Löschen Sie keine Dateien im Explorer/Finder ohne die entsprechenden SVN-Operationen.

Öffnen Sie nach Änderungen den Commit-Dialog:

* Im Projektexplorer Rechtsklick auf das aktuelle Projekt
* Klick auf "Subversion"
* Klick auf "Commit Directory"
* Verifizieren, dass alle zu speicherenden Dateien angehakt sind
* Eine entsprechende Commit-Message eingeben
* "OK" klicken

'''Anmerkung:''' Eine rot markierte Datei bedeutet, dass WebStorm diese nicht als Teil des Repositories erkennt.
Machen Sie dann einen Rechtsklick auf die Datei und wählen "SVN" -> "Add..." aus um die Datei hinzuzufügen.
Beim '''nächsten Commit''' wird die Datei dann mit auf den SVN-Server übertragen.

Wenn Sie auf einem anderen Rechner an diesem Projekt weiterarbeiten wollen,
müssen sie beim ersten Mal das Projekt in der oben beschriebenen Weise aus dem Repository auf Ihren Rechner laden.
Wenn Sie dies einmal gemacht haben, reicht es wenn Sie künftig die lokale Version wie folgt aktualisieren,
bevor Sie mit der Arbeit beginnen:

* Im Projektexplorer Rechtsklick auf das aktuelle Projekt
* Klick auf "Subversion"
* Klick auf "Update Directory"

===Repository im Browser einsehen===

Sie können Ihr Repository jederzeit im Browser einsehen und so verifizieren, dass der aktuelle Stand online ist.
Rufen Sie dazu folgende URL auf: <code>https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung</code>

MMProg:WiSe2015:Praktikum:Aufgabe 1:Teil 1

2015-10-02T08:47:02Z

Lawrence:

=Praktikumsaufgabe 1, Teil 1=

==Einrichtung der Arbeitsumgebung==

===Ziele===

* Installation und Konfiguration von WebStorm
* Checkout des Repositories der Lehrveranstaltung
* Checkout des eigenen Subversion-Repositories
* Verbinden des Repositories mit der WebStorm IDE

===Installation von Webstorm===

Laden Sie sich zunächst [http://www.jetbrains.com/webstorm/ Webstorm] herunter und installieren Sie es.
'''Anmerkung:''' Auf Rechnern der Hochschule ist Webstorm bereits vorinstalliert.

====Lizenz====

Als Student der Hochschule Augsburg erhalten Sie mit Ihrer Hochschul-E-Mail-Adresse eine kostenlose Studentenlizenz.
Gehen Sie dazu auf die [https://www.jetbrains.com/estore/students/ Antragsseite] und füllen Sie das Formular aus.

'''Anmerkung:''' Falls Sie an einem Rechner der Hochschule arbeiten können Sie die Hochschullizenz verwenden.
Bitte kontaktieren Sie den Lehrbeauftragten / Professor um den Lizenzschlüssel zu erhalten.

====IDE-Konfiguration====

Webstorm ist auf die Entwicklung mit HTML, CSS und JavaScript ausgelegt, wodurch sich die Konfiguration einfach gestaltet.

Stellen Sie sicher dass unter "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins"
auf jeden Fall folgende Plugins aktiviert sind (diese sollte standardmäßig der Fall sein):

* JavaScript Support
* Subversion Integration

Verifizieren Sie außerdem dass unter "Project settings" -> "JavaScript" die "JavaScript language version" auf
"ECMAScript 5.1" eingestellt ist.

====Code-Style====

Standardmäßig sind vier Leerzeichen als Einrückung für Code-Formattierungen eingestellt.
Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber zwei Leerzeichen aufgrund der häufigeren Verwendung.

Um diese Einstellung zu ändern klicken Sie jeweils auf "JavaScript", "CSS" und "HTML" und tragen bei "Tab size",
"Indent" und "Continuation Indent" die gewünsche Zahl an Leerzeichen ein.

Vermeiden Sie in jedem Fall das Tab-Zeichen zu verwenden, da dies nicht genormt ist und je nach Betriebssystem anders aussieht.

====Markdown====

Die Anmerkungen zu den Praktikumsaufgaben sind im Repository als
[https://de.wikipedia.org/wiki/Markdown Markdown]-Dokumente abgespeichert.
Für Syntax Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren.
Dazu gehen Sie auf "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins",
suchen dort nach "Markdown support" und klicken anschließend auf "Browse".
Es erscheint dann ein Plugin namens "Markdown support".
Installieren Sie dieses und starten Webstorm danach neu.

==Checkout der Repositories==

Der folgende Abschnitt beschreibt eine exemplarische Verwendung von Subversion in der Kommandozeile um
die für das Praktikum notwendigen Repositories auf dem lokalen Rechner einzurichten.

'''Anmerkung:''' Alternativ können Sie die folgenden Schritte auch mit TortoiseSVN, svnX oder auch
mit dem integrierten Subversion-Support in Webstorm durchführen.

Es ist '''nicht''' notwendig jedes Mal die Kommandozeile zu verwenden.

===Vorbereitung auf Windows===

* TortoiseSVN inklusive Command Line Tools [http://glossar.hs-augsburg.de/Installation_von_Tortoise_%28Windows%29 installieren]
* Alternativ SlikSVN [https://sliksvn.com/ installieren]
* Im Explorer zum gewünschten Ordner navigieren in dem die Daten gespeichert werden sollen (z.B. C:\studium)
* Shift + Rechtsklick -> "Eingabeaufforderung hier öffnen"

===Vorbereitung auf OSX===

* Optional: svnX [http://glossar.hs-augsburg.de/Subversion/HowTo#svnX installieren]
* Terminal öffnen
* In den gewünschen Ordner bzw. auf den Desktop gehen: <code>cd Desktop</code>

===Arbeitsschritte===

* Ordner erstellen: <code>mkdir mmprog</code>
* Ordner betreten: <code>cd mmprog</code>
* SVN testen: <code>svn list https://praktikum.multimedia.hs-augsburg.de/svn/lawrence</code>
* Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen
* Lehrveranstaltung auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung</code>
* Ordner verlassen: <code>cd ..</code>
* Eigenes Repository auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung repository</code>
* Ordner betreten: <code>cd repository</code>
* Ordner "aufgabe1" anlegen: <code>mkdir aufgabe1</code>
* Ordner im SVN adden: <code>svn add aufgabe1</code>
* Commit ausführen: <code>svn commit -m "Initial commit."</code>
* Ordner betreten: <code>cd aufgabe1</code>
* Ordner "teil1" anlegen: <code>mkdir teil1</code>
* Ordner im SVN adden: <code>svn add teil1</code>
* Commit ausführen: <code>svn commit -m "Second commit."</code>
* Nun können Sie Webstorm öffnen und auf "Open Directory" klicken. Wählen Sie dann den Ordner "aufgabe1" aus
* '''Anmerkung für OSX:''' Falls Sie den Ordner auf dem Desktop erzeugt haben können Sie diesen über den Finder verschieben

Falls Sie auf OSX ein Problem damit haben das Zertifikat zu akzeptieren führen Sie folgenden Befehl aus:
<code>sudo svn list https://praktikum.multimedia.hs-augsburg.de/</code>
Da der Befehl als superuser ausgeführt wird müssen Sie Ihr lokales Rechner-Passwort eingeben.

===Projekt aktuell halten===

Wenn Sie mit der Bearbeitung Ihres Projektes aufhören sollten Sie stets den aktuellen Stand in Ihrem Repository sichern.
Webstorm verfügt über integrierten Subversion-Support und erkennt automatisch welche Operationen auszuführen sind.
Das bedeutet es ist '''nicht notwendig alle SVN-Befehle immer manuell über das Terminal auszuführen'''.
'''Wichtig:''' Verschieben oder Löschen Sie keine Dateien im Explorer/Finder ohne die entsprechenden SVN-Operationen.

Öffnen Sie nach Änderungen den Commit-Dialog:

* Im Projektexplorer Rechtsklick auf das aktuelle Projekt
* Klick auf "Subversion"
* Klick auf "Commit Directory"
* Verifizieren, dass alle zu speicherenden Dateien angehakt sind
* Eine entsprechende Commit-Message eingeben
* "OK" klicken

'''Anmerkung:''' Eine rot markierte Datei bedeutet, dass WebStorm diese nicht als Teil des Repositories erkennt.
Machen Sie dann einen Rechtsklick auf die Datei und wählen "SVN" -> "Add..." aus um die Datei hinzuzufügen.
Beim '''nächsten Commit''' wird die Datei dann mit auf den SVN-Server übertragen.

Wenn Sie auf einem anderen Rechner an diesem Projekt weiterarbeiten wollen,
müssen sie beim ersten Mal das Projekt in der oben beschriebenen Weise aus dem Repository auf Ihren Rechner laden.
Wenn Sie dies einmal gemacht haben, reicht es wenn Sie künftig die lokale Version wie folgt aktualisieren,
bevor Sie mit der Arbeit beginnen:

* Im Projektexplorer Rechtsklick auf das aktuelle Projekt
* Klick auf "Subversion"
* Klick auf "Update Directory"

===Repository im Browser einsehen===

Sie können Ihr Repository jederzeit im Browser einsehen und so verifizieren, dass der aktuelle Stand online ist.
Rufen Sie dazu folgende URL auf: <code>https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung</code>

MMProg:WiSe2015:Praktikum:Aufgabe 1:Teil 1

2015-10-02T08:42:50Z

Lawrence:

=Praktikumsaufgabe 1, Teil 1=

==Einrichtung der Arbeitsumgebung==

===Ziele===

* Installation und Konfiguration von WebStorm
* Checkout des Repositories der Lehrveranstaltung
* Checkout des eigenen Subversion-Repositories
* Verbinden des Repositories mit der WebStorm IDE

===Installation von Webstorm===

Laden Sie sich zunächst [http://www.jetbrains.com/webstorm/ Webstorm] herunter und installieren Sie es.
'''Anmerkung:''' Auf Rechnern der Hochschule ist Webstorm bereits vorinstalliert.

====Lizenz====

Als Student der Hochschule Augsburg erhalten Sie mit Ihrer Hochschul-E-Mail-Adresse eine kostenlose Studentenlizenz.
Gehen Sie dazu auf die [https://www.jetbrains.com/estore/students/ Antragsseite] und füllen Sie das Formular aus.

'''Anmerkung:''' Falls Sie an einem Rechner der Hochschule arbeiten können Sie die Hochschullizenz verwenden.
Bitte kontaktieren Sie den Lehrbeauftragten / Professor um den Lizenzschlüssel zu erhalten.

====IDE-Konfiguration====

Webstorm ist auf die Entwicklung mit HTML, CSS und JavaScript ausgelegt, wodurch sich die Konfiguration einfach gestaltet.

Stellen Sie sicher dass unter "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins"
auf jeden Fall folgende Plugins aktiviert sind (diese sollte standardmäßig der Fall sein):

* JavaScript Support
* Subversion Integration

Verifizieren Sie außerdem dass unter "Project settings" -> "JavaScript" die "JavaScript language version" auf
"ECMAScript 5.1" eingestellt ist.

====Code-Style====

Standardmäßig sind vier Leerzeichen als Einrückung für Code-Formattierungen eingestellt.
Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber zwei Leerzeichen aufgrund der häufigeren Verwendung.

Um diese Einstellung zu ändern klicken Sie jeweils auf "JavaScript", "CSS" und "HTML" und tragen bei "Tab size",
"Indent" und "Continuation Indent" die gewünsche Zahl an Leerzeichen ein.

Vermeiden Sie in jedem Fall das Tab-Zeichen zu verwenden, da dies nicht genormt ist und je nach Betriebssystem anders aussieht.

====Markdown====

Die Anmerkungen zu den Praktikumsaufgaben sind im Repository als
[https://de.wikipedia.org/wiki/Markdown Markdown]-Dokumente abgespeichert.
Für Syntax Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren.
Dazu gehen Sie auf "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins",
suchen dort nach "Markdown support" und klicken anschließend auf "Browse".
Es erscheint dann ein Plugin namens "Markdown support".
Installieren Sie dieses und starten Webstorm danach neu.

==Checkout der Repositories==

Der folgende Abschnitt beschreibt eine exemplarische Verwendung von Subversion in der Kommandozeile um
die für das Praktikum notwendigen Repositories auf dem lokalen Rechner einzurichten.

'''Anmerkung:''' Alternativ können Sie die folgenden Schritte auch mit TortoiseSVN, svnX oder auch
mit dem integrierten Subversion-Support in Webstorm durchführen.

Es ist '''nicht''' notwendig jedes Mal die Kommandozeile zu verwenden.

===Vorbereitung auf Windows===

* TortoiseSVN inklusive Command Line Tools [http://glossar.hs-augsburg.de/Installation_von_Tortoise_%28Windows%29 installieren]
* Alternativ SlikSVN [https://sliksvn.com/ installieren]
* Im Explorer zum gewünschten Ordner navigieren in dem die Daten gespeichert werden sollen (z.B. C:\studium)
* Shift + Rechtsklick -> "Eingabeaufforderung hier öffnen"

===Vorbereitung auf OSX===

* Optional: svnX [http://glossar.hs-augsburg.de/Subversion/HowTo#svnX installieren]
* Terminal öffnen
* In den gewünschen Ordner bzw. auf den Desktop gehen: <code>cd Desktop</code>

===Arbeitsschritte===

* Ordner erstellen: <code>mkdir mmprog</code>
* Ordner betreten: <code>cd mmprog</code>
* SVN testen: <code>svn list https://praktikum.multimedia.hs-augsburg.de/</code>
* Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen
* Lehrveranstaltung auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung</code>
* Ordner verlassen: <code>cd ..</code>
* Eigenes Repository auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung repository</code>
* Ordner betreten: <code>cd repository</code>
* Ordner "aufgabe1" anlegen: <code>mkdir aufgabe1</code>
* Ordner im SVN adden: <code>svn add aufgabe1</code>
* Commit ausführen: <code>svn commit -m "Initial commit."</code>
* Ordner betreten: <code>cd aufgabe1</code>
* Ordner "teil1" anlegen: <code>mkdir teil1</code>
* Ordner im SVN adden: <code>svn add teil1</code>
* Commit ausführen: <code>svn commit -m "Second commit."</code>
* Nun können Sie Webstorm öffnen und auf "Open Directory" klicken. Wählen Sie dann den Ordner "aufgabe1" aus
* '''Anmerkung für OSX:''' Falls Sie den Ordner auf dem Desktop erzeugt haben können Sie diesen über den Finder verschieben

Falls Sie auf OSX ein Problem damit haben das Zertifikat zu akzeptieren führen Sie folgenden Befehl aus:
<code>sudo svn list https://praktikum.multimedia.hs-augsburg.de/</code>
Da der Befehl als superuser ausgeführt wird müssen Sie Ihr lokales Rechner-Passwort eingeben.

===Projekt aktuell halten===

Wenn Sie mit der Bearbeitung Ihres Projektes aufhören sollten Sie stets den aktuellen Stand in Ihrem Repository sichern.
Webstorm verfügt über integrierten Subversion-Support und erkennt automatisch welche Operationen auszuführen sind.
Das bedeutet es ist '''nicht notwendig alle SVN-Befehle immer manuell über das Terminal auszuführen'''.
'''Wichtig:''' Verschieben oder Löschen Sie keine Dateien im Explorer/Finder ohne die entsprechenden SVN-Operationen.

Öffnen Sie nach Änderungen den Commit-Dialog:

* Im Projektexplorer Rechtsklick auf das aktuelle Projekt
* Klick auf "Subversion"
* Klick auf "Commit Directory"
* Verifizieren, dass alle zu speicherenden Dateien angehakt sind
* Eine entsprechende Commit-Message eingeben
* "OK" klicken

'''Anmerkung:''' Eine rot markierte Datei bedeutet, dass WebStorm diese nicht als Teil des Repositories erkennt.
Machen Sie dann einen Rechtsklick auf die Datei und wählen "SVN" -> "Add..." aus um die Datei hinzuzufügen.
Beim '''nächsten Commit''' wird die Datei dann mit auf den SVN-Server übertragen.

Wenn Sie auf einem anderen Rechner an diesem Projekt weiterarbeiten wollen,
müssen sie beim ersten Mal das Projekt in der oben beschriebenen Weise aus dem Repository auf Ihren Rechner laden.
Wenn Sie dies einmal gemacht haben, reicht es wenn Sie künftig die lokale Version wie folgt aktualisieren,
bevor Sie mit der Arbeit beginnen:

* Im Projektexplorer Rechtsklick auf das aktuelle Projekt
* Klick auf "Subversion"
* Klick auf "Update Directory"

===Repository im Browser einsehen===

Sie können Ihr Repository jederzeit im Browser einsehen und so verifizieren, dass der aktuelle Stand online ist.
Rufen Sie dazu folgende URL auf: <code>https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung</code>

Installation von WebStorm

2015-10-02T08:40:35Z

Lawrence:

=Installation von Webstorm=

Laden Sie sich zunächst Webstorm herunter und installieren Sie es: http://www.jetbrains.com/webstorm/

'''Anmerkung:''' Auf Rechnern der Hochschule ist Webstorm bereits vorinstalliert.

==Lizenz==

Als Student der Hochschule Augsburg erhalten Sie mit Ihrer Hochschul-E-Mail-Adresse eine kostenlose Studentenlizenz.
Füllen Sie dazu das Formular auf der Antragsseite aus: https://www.jetbrains.com/estore/students/

'''Anmerkung:''' Falls Sie an einem Rechner der Hochschule arbeiten, können Sie die Hochschullizenz verwenden.
Bitte kontaktieren Sie den Lehrbeauftragten/Professor, um den Lizenzschlüssel zu erhalten.

==IDE-Konfiguration==

Webstorm ist auf die Entwicklung mit HTML/CSS/JavaScript ausgelegt, wodurch sich die Konfiguration sehr einfach gestaltet.

Stellen Sie sicher dass unter <code>Webstorm</code> -> <code>Preferences</code> -> <code>IDE Settings</code> -> <code>Plugins</code>
auf jeden Fall folgende Plugins aktiviert sind (diese sollte standardmäßig der Fall sein):

* JavaScript Support
* Subversion Integration

Verifizieren Sie außerdem, dass unter <code>Project settings</code> -> <code>JavaScript</code> die <code>JavaScript language version</code> auf
<code>ECMAScript 5.1</code> eingestellt ist.

==Code-Style==

Standardmäßig sind 4 Leerzeichen als Einrückung für Code-Formattierungen eingestellt.
Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber 2 Leerzeichen aufgrund der weiten Verbreitung.

Um die Einstellung zu ändern klicken Sie jeweils auf <code>JavaScript</code>, <code>CSS</code> und <code>HTML</code> und
tragen bei <code>Tab size</code>, <code>Indent</code> und <code>Continuation Indent</code> die gewünsche Zahl an Leerzeichen ein.

Vermeiden Sie jedoch das Tab-Zeichen zu verwenden, da dies nicht genormt ist und je nach Betriebssystem anders interpretiert wird.

==Markdown==

Die Anmerkungen zu den Praktikumsaufgaben sind im Repository als Markdown-Dokumente abgespeichert.
Für Syntax Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren.
Dazu gehen Sie auf <code>Webstorm</code> -> <code>Preferences</code> -> <code>IDE Settings</code> -> <code>Plugins</code>,
suchen dort nach "Markdown support" und klicken anschließend auf <code>Browse</code>.
Dort erscheint dann ein Plugin namens "Markdown support". Installieren Sie dieses und starten Webstorm danach neu.

[[Kategorie:Kapitel:Web-Programmierung]][[Kategorie:Web-Programmierung-HowTo]]

MMProg:WiSe2015:Praktikum:Aufgabe 8

2015-10-01T21:14:13Z

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 8= ==Model-View-Controller== ===Ziel=== Ziel dieser Aufgabe ist es einen einarmigen Banditen nach dem [http://glossar.hs-augsburg.de/Mode…“

=Praktikumsaufgabe 8=

==Model-View-Controller==

===Ziel===

Ziel dieser Aufgabe ist es einen einarmigen Banditen nach dem
[http://glossar.hs-augsburg.de/Model-View-Controller-Paradigma Model-View-Controller-Paradigma] zu programmieren.

===Vorbereitung===

Erzeugen Sie einen neuen Ordner namens "aufgabe8" innerhalb Ihres Verzeichnis für die Praktikumsaufgaben.
Speichern Sie alle Dateien aus dem Lehveranstaltungsordner "aufgabe8/vorlage" in diesem Ordner ab.

Die Vorlage enthält die Verzeichnisstruktur, die fertige HTML-Datei, die "EventDispatcher""-Klasse und die fertige Hauptdatei.
Es gilt den gesamten Code für das Model, die View und den Controller zu entwickeln.

Nutzen Sie die Code-Beispiele in den folgende Abschnitten um zu überprüfen ob Ihre Implementierungen korrekt sind.
Untersuchen Sie außerdem die Beispiele aus der Vorlesung unter "aufgabe8/beispiele" falls Sie nicht weiterkommen.

===Model===

Das Modell des einarmigen Banditen setzt sich aus den beiden Komponenten "Slot" und "SlotMachine" zusammen.

'''Tipp:''' Lassen Sie die Event-Kommunikation und die asynchrone Funktionsweise im ersten Schritt der Implementierung aus.

====Slot====

"Slot" repräsentiert ein Feld welches eine Menge an möglichen Werten vorhält und stets einen dieser Werte annimmt.
Die Menge an möglichen Werten wird bei der Erzeugung eines Felds als Argument an den Konstruktor übergeben.

Mithilfe der Funktion "spin()" wird das Feld '''asynchron''' zufällig oft gedreht und nimmt immer wieder einen zufälligen Wert an.
Nutzen Sie einen JavaScript-Timer (z.B. <code>setTimeout</code>) um das wiederholte asynchrone Drehen zu implementieren.

Bei jeder Drehung des Felds wird das Ereignis "spin" erzeugt.
Wenn das Feld aufhört sich zu drehen wird das Ereignis "stop" erzeugt.
Als Daten für die beiden Ereignisse wird der jeweils aktuell angenommene Wert des Feldes mit übergeben.

'''Anmerkungen:'''
- Nutzen Sie die Hilfsklasse "EventDispatcher" aus der Vorlage für die Event-Kommunikation.
- Nutzen Sie <code>Math.random()</code> um einen zufälligen Wert zu erzeugen oder zufällig eine Entscheidung zu treffen.

Folgender Code sollte dann ein Feld erzeugen und zufällig häufig den neuen Wert ausgeben und abschließend einmal den finalen:

<source lang="javascript">
var slot = new Slot(['red', 'green', 'blue']);
slot.eventDispatcher.addEventListener('spin', function(event) {
console.log('Neuer Wert: ' + event.detail);
});
slot.eventDispatcher.addEventListener('stop', function(event) {
console.log('Finaler Wert: ' + event.detail);
});
slot.spin();
</source>

====SlotMachine====

"SlotMachine" repräsentiert eine Sammlung einer variablen Anzahl an Feldern und einer Menge an möglichen Werten für diese.
Die Anzahl der Felder und die Menge der möglichen Werte werden bei der Erzeugung als Argument an den Konstruktor übergeben.
Die "SlotMachine" erzeugt anhand der gegebenen Anzahl automatisch die einzelnen Felder und verwaltet diese intern.
Mithilfe der Funktion "spin()" wird die Funktion "spin()" von jedem in der Sammlung enthaltenen Feld augerufen.
Die "SlotMachine" hört auf jedes "spin"-Ereignis der Felder und erzeugt selbst daraufhin ein eigenes "spin"-Ereignis.
Haben alle enhtaltenen Felder das "stop"-Ereignis erzeugt, erzeugt die "SlotMachine" ebenso ein finales "stop"-Ereignis.
Die beiden Ereignisse übergeben als Daten jeweils alle aktuellen Werte der enthaltenen Felder als Liste.

Folgender Code sollte drei Felder erzeugen und für jede Drehung jedes Felds und einmal abschließend alle Werte ausgeben.

<source lang="javascript">
var slotMachine = new SlotMachine(3, ['red', 'green', 'blue']);
slotMachine.eventDispatcher.addEventListener('spin', function(event) {
console.log('Neue Werte: ' + event.detail);
});
slotMachine.eventDispatcher.addEventListener('stop', function(event) {
console.log('Finale Werte: ' + event.detail);
});
slotMachine.spin();
</source>

===View===

Es wird empfohlen, dass Sie in den folgenden Abschnitten die SVG-API nutzen um die Views zu implementieren.
Möchten Sie DOM nutzen müssen Sie die "index.js" geringfügig ändern und die Views entsprechend anders benennen.
Analog zu dem Modell besteht die View des einarmigen Banditen aus den zwei Komponenten "SlotSVGView" und "SlotMachineSVGView".

====SlotSVGView====

Eine "SlotSVGView" erzeugt für ein Feld ein rechteckige Repräsentation welche bei jedem neu angenommenen Wert die Farbe wechselt.
Das bedeutet, dass solch eine View die beiden Ereignisse "spin" und "stop" verarbeiten und entsprechend anzeigen muss.

Folgender Code sollte für ein Feld ein Rectheck erzeugen welches beim Drehen des Felds zufällig oft seine Farbe wechselt.

<source lang="javascript">
var slot = new Slot(['red', 'green', 'blue']);
var slotView = new SlotSVGView(slot);
document.querySelector('body').appendChild(slotView);
slot.spin();
</source>

'''Tipp:''' Nutzen Sie Namen von Farben wie zum Beispiel "black" als mögliche Werte für Felder um das Rendering zu vereinfachen.

====SlotMachineSVGView====

Eine "SlotMachineSVGView" ist das View-Gegenstück zu einer "SlotMachine", d.h. sie visualisiert eine Sammlung von Feldern.
Bei der Erzeugung einer solchen View wird für jedes darzustellende Feld eine eigene "SlotMachineSVGView" erzeugt.

Folgender Code sollte für eine Sammlung von drei Feldern drei Rechtecke darstellen, welche Ihre Farbe wechseln.

<source lang="javascript">
var slotMachine = new SlotMachine(3, ['red', 'green', 'blue']);
var slotMachineView = new SlotMachineSVGView(slotMachine);
document.querySelector('body').appendChild(slotView);
slotMachine.spin();
</source>

===Controller===

Der Controller-Teil besteht aus der Komponente "SlotMachineController", welche lediglich das Model kennen muss.

Bei einem "click"-Ereignis auf dem Button mit der ID "spin-button" wird "spin()" auf der "SlotMachine" aufgerufen.
Mithilfe von <code>setAttribute()</code> wird dem Attribut "disabled" auf dem Button der Wert "disabled" zugewiesen.
Auf diese Weise wird der Button deaktiviert und kann nicht nochmal gedrückt werden, solange sich die Felder drehen.
Außerdem wird dem Attribut "innerHTML" auf dem Element mit der ID "result-text" der Text "Drehen..." zugewiesen.

Sobald die "SlotMachine" das "stop"-Ereignis erzeugt, überprüft der Controller ob der Spieler das Spiel gewonnen hat.
Sind alle Felder wertegleich wird dem "innerHTML" des Elements mit der ID "result-text" der Wert "Gewonnen!" zugewiesen.
Ist dies nicht der Fall wird der Wert "Verloren!" zugewiesen, um zu signalisieren, dass der Spieler verloren hat.

===Spiel testen===

Wurde alles korrekt implementiert, können Sie nun den einarmigen Banditen benutzen.

MMProg:WiSe2015:Praktikum:Aufgabe 7

2015-10-01T21:13:18Z

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 7= ==Rendering und Animation== ===Ziel=== Ziel dieser Aufgabe ist es ein einfaches Spiel mithilfe von Timern, DOM und SVG im Browser zu r…“

=Praktikumsaufgabe 7=

==Rendering und Animation==

===Ziel===

Ziel dieser Aufgabe ist es ein einfaches Spiel mithilfe von Timern, DOM und SVG im Browser zu rendern.

Das Spiel besteht darin herunterfallenden Hindernissen auszuweichen. Der Spieler wird mit den Cursortasten gesteuert.

===Projekt vorbereiten===

Erzeugen Sie einen neuen Ordner "aufgabe7" innerhalb Ihres Verzeichnis für die Praktikumsaufgaben.
Speichern Sie alle Dateien aus dem Vorlagenordner "aufgabe7/vorlage" in diesem Ordner ab.

Die Vorlage enthält ein voll funktionierendes Spiel, welches aus den folgenden Komponenten besteht:

* '''model/Player.js''' - Modell eines Spielers
* '''model/Enemy.js''' - Modell eines Gegners
* '''model/EnemyFactory.js''' - Erzeugt in regelmäßigen Abständen zufällige Gegner
* '''model/Level.js''' - Modell eines physikalischen Levels; bewegt die Spielobjekte und überprüft Kollisionen
* '''controller/GameController.js''' - Verarbeitet Benutzereingaben und gibt Änderungen der Modelle an die Views weiter
* '''index.js''' - Startet das Spiel, erzeugt und orchestriert die einzelnen Komponenten

Die Datei "index.js" wartet zunächst auf Eingaben durch den Benutzer um daraufhin das Spiel zu starten.
Dabei wird im ersten Schritt eine physikalische Welt erzeugt und ein Spieler dieser hinzugefügt.
Des Weiteren wird eine EnemyFactory erstellt, welche Gegner erzeugt, die auch der physikalischen Welt hinzugefügt werden.

Damit die Spielobjekte im Browser gerendert werden können wird außerdem ein View-Objekt erzeugt.
Ebenso wie der physikalischen Welt werden die Spieler- und Gegner-Objekte auch der View hinzugefügt.
Welche View-Technologie verwendet wird um das Spiel darzustellen kann der Benutzer vor dem Spielstart entscheiden.

===Funktionsweise von Views===

Unabhängig davon welche Technologie zum Rendern verwendet wird, folgen die Views immer der gleichen Logik und Struktur.
Es gibt eine Konstruktorfunktion (<code>DOMView</code> oder <code>SVGView</code>) welche ein View-Objekt erzeugt.
Diese Konstruktorfunktion erwartet ein DOM-Element, in dem die Ansicht eingebaut werden soll, und eine Höhe und Breite.

Sobald ein View-Objekt erzeugt wird, soll es sich automatisch um das regelmäßige Rendern der Spiels kümmern.
Dazu muss ein solches Objekt die zwei Funktionen <code>addObjectView()</code> und <code>destroy()</code> implementieren.

<code>addObjectView(object, color)</code> erzeugt für ein gegebenes Objekt (z.B. Spieler) eine entsprechende View-Repräsentation.
Das Objekt wird als '''Rechteck''' an seiner x- und y-Position mit seiner Breite und Höhe und der gegegebenen Farbe dargestellt.
Verändert sich die Position des Objekts im Laufe des Spiels, so muss die View dies in regelmäßigen Abständen abbilden.

Nutzen Sie einen geeigneten Timer, wie zum Beispiel <code>requestAnimationFrame()</code>, um den Render-Vorgang wiederholt auszuführen.

<source lang="javascript">
var renderRepeatedly = function() {
console.log('rendering');
window.requestAnimationFrame(renderRepeatedly);
}
renderRepeatedly();
</source>

Um beim Render-Durchgang festzustellen welches View-Objekt welche Positions- und Formänderungen abbilden muss,
muss die Verknüpfung von dem zu rendernden Objekt und dem View-Objekt in einer Liste gespeichert werden.

Beispielhafte Implementierung:

<source lang="javascript">
var childViews = [];
this.addObjectView = function(object, color) {
var div = document.createElement('div');
// ... style and add div element
childViews.push({
object: object,
div: div
});
};
</source>

<code>destroy()</code> muss dafür Sorge tragen, dass eine View korrekt entfernt wird, inklusive aller verwendeten Timer.

===Views implementieren===

Im Folgenden gilt es die zwei unterschiedlichen Views zu implementieren, die das Spiel dann darstellen sollen.
Für jede View-Technologie ist im Vorlagen-Ordner bereits eine Datei angelegt mit einer minimalen Code-Vorgabe.

====DOM-View====

Implementieren Sie im ersten Schritt eine DOM-View, welche das Spiel mithilfe von DOM-Elementen darstellt.

'''Tipp:''' Rechtecke können Sie einfach mit absolut positionierten <code>div</code>-Elementen darstellen.

Beispielcode:

<source lang="javascript">
var viewElement = document.createElement('div');
viewElement.style.position = 'absolute';
viewElement.style.backgroundColor = 'green';
viewElement.style.width = '40px';
viewElement.style.height = '40px';
viewElement.style.left = '5px';
viewElement.style.top = '5px';
</source>

====SVG-View====

Implementieren Sie anschließend eine SVG-View, welche das Spiel mithilfe von SVG-Elementen darstellt.
'''Wichtig:''' Wenn Sie SVG-Elemente mit der DOM-API erzeugen wollen müssen die Funktion <code>createElementNS()</code> verwenden.

<source lang="javascript">
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('version', '1.1');
svg.setAttribute('width', '500');
svg.setAttribute('height', '500');
svg.setAttribute('x', '10');
svg.setAttribute('y', '10');

var rect = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.appendChild(rect);
</source>

===Optional: Darstellung anpassen===

Ändern Sie die Views so ab, dass Spieler und Gegner nicht mehr als Rechtecke sondern als Bilder dargestellt werden.
Der Spieler kann zum Beispiel als Raumschiff und die Gegner als entgegenkommende Meteoriten dargestellt werden.

'''Anmerkung:''' Falls Sie Bilder aus dem Internet nutzen möchten achten Sie biite auf die entsprechenden Bildrechte.

===Links===

Nutzen Sie die folgenden Links für weitere Information über Timer, SVG und Canvas:

* https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout
* https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setInterval
* https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
* https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

MMProg:WiSe2015:Praktikum:Aufgabe 6

2015-10-01T21:12:49Z

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 6= ==Ereignisverarbeitung== ===Ziel=== Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für Ereignisverarb…“

=Praktikumsaufgabe 6=

==Ereignisverarbeitung==

===Ziel===

Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für Ereignisverarbeitung zu vertiefen.

===Projekt vorbereiten===

Erzeugen Sie einen neuen Ordner "aufgabe6" innerhalb Ihres Verzeichnis/Repositories.
Speichern Sie alle Dateien aus dem Vorlagenordner "aufgabe6/vorlage" in diesem Ordner ab.

Fügen Sie sämtlichen Code für die folgenden Teilaufgaben in die Datei "index.js" ein.

===Spiel starten===

Registrieren Sie auf dem HTML-Input-Element mit der ID "start-game" einen Event-Listener für das "click"-Ereignis.
Wird der Button geklickt sollen folgendes geschehen:

* Der Button selbst wird aus dem DOM entfernt mithilfe von <code>removeChild()</code>
* Es wird eine Funktion namens <code>startGame()</code> aufgerufen; erzeugen Sie dazu diese zunächst leere Funktion

===Punktestandsanzeige erzeugen===

Erstellen Sie eine globale Variable "score" und initialisieren Sie diese mit dem Wert 0.
Erweiteren Sie dann die nach wie vor leere Funktion <code>startGame()</code> um die folgende Logik:

* Der globalen Variable "score" wird der Wert 0 zugewiesen
* Es wird ein DOM-Element mit Tag-Namen <code>div</code> erzeugt
* Diesem Element wird das Attribut "id" mit Wert "score" zugewiesen
* Abschließend wird das DOM-Element dem <code>body</code>-Element hinzugefügt mit <code>appendChild()</code>

===Zielobjekt erzeugen===

Nach der Erzeugung des Punktestands soll die Funktion <code>startGame()</code> eine neue Funktion <code>createGameObject()</code> aufrufen.
Erzeugen Sie die Funktion <code>createGameObject()</code> und implementieren Sie folgende Logik:

* Es wird ein DOM-Element mit Tag-Namen <code>div</code> erzeugt
* Diesem Element wird das Attribut "class" mit dem Wert "goal" zugewiesen
* Außerdem wird dem Element mittels CSS eine zufällige x- und y-Position zugewiesen
* Abschließend wird das DOM-Element dem <code>body</code>-Element hinzugefügt mit <code>appendChild()</code>

'''Tipp:''' Nutzen Sie folgenden Code um einem Element per CSS eine zufällige x- und y-Position zuzuweisen:

<source lang="javascript">
element.style.left = Math.floor(Math.random() * 300) + 'px'
element.style.top = 30 + Math.floor(Math.random() * 300) + 'px'
</source>

Wenn Sie nun die Seite laden und den Button drücken um das Spiel zu starten, sollte ein grünes Rechteck gerendert werden.

===Zielobjekt abschiessen===

Fügen Sie nun einen Event-Listener für das "click"-Ereignis auf dem Dokument hinzu, der überprüfen soll ob das Ziel geklickt wurde.
Dies stellen Sie fest, indem Sie das "class"-Attribut des ursprünglichen Ereignis-Ziels (<code>event.target</code>) auf den Wert "goal" testen.
Ist das der Fall soll das Zielelement aus dem Dokument entfernt werden und <code>createGameObject()</code> erneut aufgerufen werden.

Wenn Sie nun auf das grüne Rechteck klicken sollte dies verschwinden und an einer anderen Stelle ein neues erscheinen.

===Punktestand aktualisieren===

Erzeugen Sie anschließend eine Funktion namens <code>renderScore()</code>, welche den aktualisierten Punktestand darstellen soll.
Implementieren Sie dazu folgende Logik:

* Es wird nach dem DOM-Element mit der ID "score" gesucht (z.B. mittels <code>querySelector()</code>)
* Der Eigenschaft <code>innerHTML</code> des Elements wird die Kombination aus "Punkte: " und dem Wert von der Variable "score" zugewiesen

Fügen Sie außerdem einen Aufruf der Funktion an den folgenden Stellen hinzu:

* An der Stelle in der <code>startGame()</code>-Funktion nachdem die Punktestandsanzeige erzeugt wurde
* An der Stelle an der beim Klick auf ein Zielelement ein neues erzeugt wird

An der zweiten Stelle soll die globale Variable "score" um eins hochgezählt werden.
Wenn Sie nun auf ein grünes Rechteck klicken sollte sich der Punktestand um eins erhöhen und angezeigt werden.

===Hindernisse erzeugen===

Um Hindernisse zu erzeugen ändern Sie nun die Funktion <code>createGameObject()</code> wie folgt ab:
* Es wird ein einzelnes Argument namens "type" akzpetiert
* Dieses Argument wird verwendet um zu bestimmen welches Klassenattribut dem neuen Element zugewiesen wird

Ändern Sie die beiden Stellen an denen <code>createGameObject()</code> aufgerufen wird so, dass es nun <code>createGameObject("goal")</code> heisst.
Fügen Sie außerdem an der Stelle wo der Punktestand um eins erhöht wird den Aufruf <code>createGameObject("obstacle")</code> hinzu.

Nun sollte mit jedem Klick auf das Ziel ein weiteres Hindernis entstehen.

===Spiel beenden===

Fügen Sie dann einen Event-Listener für das <code>mouseover</code>-Ereignis hinzu, welches überprüfen soll ob Hindernisse berührt werden.
Dies können Sie feststellen indem Sie testen, ob das ursprüngliche Ereignis-Ziel (<code>event.target</code>) die Klasse "obstacle" hat.
In diesem Fall soll der <code>innerHTML</code>-Eigenschaft des <code>body</code>-Elements
die Kombination aus dem String "Game over. Erreichte Punkte: " und dem Wert der Variable "score" zugewiesen werden.

Nun sollte das Spiel vorbei sein sobald Sie ein Hindernis berühren und der finale Punktestand angezeigt werden.

===Spiel neustarten===

Registrieren Sie einen Event-Listener für das <code>keyup</code>-Ereignis auf dem Dokument um das Spiel mit Leertaste neustarten zu können.
Es soll überprüft werden ob <code>event.keyCode</code> den Wert 32 hat und in diesem Fall soll die Funktion <code>startGame()</code> aufgerufen werden.

Erweitern Sie dann die Funktion <code>startGame()</code> um folgende Logik damit das Spielfeld vor einem Neustart aufgeräumt wird:

* Der Eigenschaft <code>innerHTML</code> des <code>body</code>-Elements wird ein leerer String zugewiesen

===Optional: Spiel verbessern===

Momentan ist es möglich, dass ein Hindernis direkt an der Stelle des Mauszeigers erscheint und das Spiel beendet ist.
Erweitern Sie die aktuelle Implementierung so, dass ausgeschlossen ist, dass dies passieren kann.

MMProg:WiSe2015:Praktikum:Aufgabe 5

2015-10-01T21:11:52Z

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 5= ==Dokumentenzugriff== ===Ziel=== Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für das Arbeiten mit…“

=Praktikumsaufgabe 5=

==Dokumentenzugriff==

===Ziel===

Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für das Arbeiten mit Dokumenten zu vertiefen.

===Projekt vorbereiten===

'''Anmerkung:''' Es ist fortan nicht notwendig Subversion über die Kommandozeile zu bedienen.
Nutzen Sie dazu einfach WebStorm oder aber TortoiseSVN bzw. svnX.

Erzeugen Sie einen neuen Ordner "aufgabe5" innerhalb Ihres Verzeichnis/Repositories.
Speichern Sie alle Dateien aus dem Vorlagenordner "aufgabe5/vorlage" in diesem Ordner ab.

Machen Sie sich mit der Datei "index.html" vertraut und öffnen Sie diese testweise im Browser.
Speichern Sie alle Bestandteile des zu erstellenden Loggers in der Datei "logger.js" ab.
Die eigentliche Ausführung des Programms und die Testausgaben speichern Sie in der Datei "index.js".

===Logger erzeugen===

Erzeugen Sie zunächst einen global verfügbaren Konstruktor namens <code>Logger</code> welcher mithilfe von <code>new</code> aufgerufen werden kann.
Dieser Konstruktor soll ein Objekt zurückliefern welches eine Funktion namens <code>log()</code> zur Verfügung stellt.

Diese Funktion nimmt einen Parameter <code>message</code> entgegen und ruft damit die Funktion <code>console.log()</code> auf.
Das bedeutet dass ein Logger-Objekt zuerst nichts anderes macht als die Nachricht an die '''Browser-Konsole''' weiterzureichen.
Fügen Sie dann folgenden Aufruf in die Datei "index.js" ein und betrachten Sie die "index.html" im Browser.

<source lang="javascript">
var logger = new Logger();
logger.log('Hello World');
</source>

Die Konsole sollte dementsprechend nach Ausführung dieses Codes die Nachricht "Hello World" anzeigen.

===Nachrichten ins Dokument einfügen===

Ändern Sie nun die Funktion <code>log()</code> der Logger-Objekte so ab, dass sie fortan folgendes Verhalten aufweist:

* Es wird ein Element-Objekt mit dem Tag-Namen <code>div</code> erzeugt
* Das Argument "message" wird der Eigenschaft <code>innerHTML</code> des erzeugten Elements zugewiesen
* Weisen Sie dem erzeugten Objekt als "class"-Attibut den Wert "message" zu mithilfe von <code>setAttribute(key, value)</code>
* Das Element-Objekt mit der Klasse "messages" wird im Dokument gesucht mittels <code>querySelector()</code>
* Dem zuvor gesuchten Objekt wird das neu erzeugte <code>div</code>-Objekt angehängt mittels <code>appendChild()</code>

Folgende Anweisung soll nun dazu führen, dass eine Nachricht als sichtbares Element im Dokument eingefügt wird:

<source lang="javascript">
var logger = new Logger();
logger.log('Hello World');
</source>

===Präfix für Nachrichten===

Erweitern Sie den Logger-Konstruktor nun so, dass dieser ein Konstruktorargument namens <code>prefix</code> entgegennimmt.
Anschließend soll dem erstellten Logger-Objekt der Präfix als Eigenschaft zugewiesen werden.
Schreiben Sie <code>log()</code> so um, dass <code>prefix</code> mit der Nachricht kombiniert wird und das Ergebnis als Nachricht ausgegeben wird.

<source lang="javascript">
var logger = new Logger('message: ');
logger.log('Hello World');
</source>

Der oben stehende Code sollte dementsprechend dazu führen dass in der Konsole "message: Hello World" ausgegeben wird.

===Weitere Nachrichten ausgeben===

Schreiben Sie abschließend die Datei "index.js" so um, dass sie folgendes Verhalten aufweist:

* Zuerst wird der Name des Benutzers abgefragt mithilfe von <code>window.prompt()</code>
* Dann wird der Benutzer begrüßt durch eine Logger-Nachricht (<code>"Hallo " + name</code>)
* Des Weiteren wird die aktuelle URL durch den Logger ausgegeben (<code>location.href</code>)
* Zuletzt soll noch der verwendete Browser angezeigt werden (<code>navigator.userAgent</code>)

===Verschiedene Typen===

Ändern Sie nun die durch den Konstruktor erstellten Logger-Objekte so ab, das diese die folgenden drei Funktionen enthalten:
<code>logMessage()</code>, <code>logWarning()</code>, <code>logError()</code>. Benennen Sie im ersten Schritt die Funktion <code>log()</code> in <code>logMessage()</code> um.
Die anderen beiden Funktionen <code>logWarning()</code> und <code>logError()</code> sollen ähnlich funktionieren mit dem Unterschied
dass <code>logWarning()</code> dem erstellen Element-Objekt die HTML-Klasse "warning" zuweisen soll und <code>logError()</code> die Klasse "error".

Der folgende Code soll dazu führen dass eine normale Nachricht, sowie eine orange und eine rote Nachricht ausgegeben werden.

<source lang="javascript">
var logger = new Logger('message: ');
logger.logMessage('normal message');
logger.logWarning('something is not okay');
logger.logError('something went completely wrong');
</source>

MMProg:WiSe2015:Praktikum:Aufgabe 4

2015-10-01T21:11:16Z

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 4= ==Arbeiten mit Funktionen und <code>this</code>== ===Ziel=== Ziel dieser Aufgabe ist es die in dem JavaScript-Tutorium vermittelten Gr…“

=Praktikumsaufgabe 4=

==Arbeiten mit Funktionen und <code>this</code>==

===Ziel===

Ziel dieser Aufgabe ist es die in dem JavaScript-Tutorium vermittelten Grundlagen für
Funktionen, Konstruktoren und <code>this</code> zu vertiefen.

===Projekt vorbereiten===

'''Anmerkung:''' Es ist fortan nicht notwendig Subversion über die Kommandozeile zu bedienen.
Nutzen Sie dazu einfach WebStorm oder aber TortoiseSVN bzw. svnX.

Stellen Sie sicher, dass Sie die Praktikumsvorlagen auf Ihrem Rechner gespeichert haben.
Folgen Sie dazu der Anleitung aus Teil 1 der 1. Praktikumsaufgabe.

Legen Sie dann einen neuen Ordner "aufgabe4" innerhalb Ihres Verzeichnis/Repositories an.
Speichern Sie alle Dateien aus dem Lehrveranstaltungsordner "aufgabe4/vorlage" in diesem Ordner ab.

Machen Sie sich mit der Datei "index.js" vertraut und öffnen Sie die Datei "index.html" testweise im Browser.
Fügen Sie den Code relevant für Spieler der nachfolgenden Teilaufgaben in die Datei "Spieler.js" ein.

Den Test-Code in den folgenden Abschnitten können Sie in die Datei "index.js" einpflegen um Ihre Lösungen zu validieren.

===Spieler erstellen===

Erstellen Sie zunächst eine Funktion namens <code>createPlayer()</code> die bei jedem Aufruf ein leeres Objekt erzeugt.

<source lang="javascript">
var player1 = createPlayer();
view.addObjectView(player1);

var player2 = createPlayer();
view.addObjectView(player2);

console.log(player1 !== player2); // sollte true ergeben
</source>

Erweiteren Sie die Funktion nun so, dass sie zwei Argumente namens "name" und "numberOfLifes" akzeptiert
und die Werte dieser Argumente gleichnamigen Eigenschaften dem erzeugten Objekt zuweist.

<source lang="javascript">
var player1 = createPlayer('John', 3);
view.addObjectView(player1);
</source>

===Konstruktor für Spieler===

Wandeln Sie die Funktion <code>createPlayer()</code> nun in eine Konstruktorfunktion namens <code>Player()</code> um.

<source lang="javascript">
var player1 = new Player();
view.addObjectView(player1);
</source>

Der Konstruktor soll nach wie vor "name" und "numberOfLifes" akzeptieren und die Werte dem neu erstellten Objekt zuweisen.
Die zugewiesenen Eigenschaften sollen nun allerdings mit einem Unterstrich beginnen, um sie als privat zu kennzeichnen.

<source lang="javascript">
var player1 = new Player('John', 3);
view.addObjectView(player1);
</source>

Stellen Sie sicher, dass der Konstruktor nur mit <code>new</code> aufgerufen werden kann. Folgender Code sollte einen Fehler verursachen.

<source lang="javascript">
var player1 = Player('John', 3);
</source>

===Leben verlieren===

Im Laufe eines Spiels kann es passieren, dass ein Spieler ein oder mehrere seiner Leben verliert.
Erstellen Sie dazu auf jedem neuen Spielerobjekt die Funktion <code>loseLife()</code>, welche die Zahl der Leben um eins reduziert.

<source lang="javascript">
var player1 = new Player('John', 3);
view.addObjectView(player1);
player1.loseLife(); // sollte nun 2 betragen
</source>

===Namen abändern===

Außerdem kann es sein, dass sich ein Spieler nachträglich für einen anderen Namen entscheiden möchte.
FÜgen Sie deshalb auf jedem neuen Spielerobjekt die Funktion <code>changeName(name)</code> hinzu, welche den Namen des Spielers ändert.

<source lang="javascript">
var player1 = new Player('John', 3);
view.addObjectView(player1);
player1.changeName('James'); // Name sollte nun James sein
</source>

===Aktuelle Spielerinformationen===

Erweitern Sie jedes neue Spielerobjekt um die Funktion <code>getInfo()</code>, welche aktuelle Spielerinformationen bereitstellen soll.
Die Funktion liefert den Namen des Spielers und die Anzahl seiner aktuellen Leben als zusammengesetzten String zurück.

<source lang="javascript">
var player1 = new Player('John', 3);
view.addObjectView(player1);
player1.loseLife();
player1.changeName('James');
console.log(player1.getInfo()); // gibt 'Spieler: James / Leben: 2' aus
</source>

===Typüberprüfung===

In bestimmten Spielsituationen kann es wichtig sein zu überprüfen, ob sich bei einem Objekt um einen Spieler handelt.
Schreiben Sie die dazu die Funktion <code>Player.isPlayer()</code>, welche den Typ von einem gegebenen Objekt überprüft.

<source lang="javascript">
var player1 = new Player('John', 3);
view.addObjectView(player1);
console.log(Player.isPlayer(player1)); // true
console.log(Player.isPlayer({})); // false
</source>

MMProg:WiSe2015:Praktikum:Aufgabe 3

2015-10-01T21:10:08Z

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 3= ==Arbeiten mit Objekten und Arrays== ===Ziel=== Ziel dieser Aufgabe ist es die in dem JavaScript-Tutorium vermittelten Grundlagen für…“

=Praktikumsaufgabe 3=

==Arbeiten mit Objekten und Arrays==

===Ziel===

Ziel dieser Aufgabe ist es die in dem JavaScript-Tutorium vermittelten Grundlagen für Objekte und Arrays zu vertiefen.

===Projekt vorbereiten===

'''Anmerkung:''' Es ist fortan nicht notwendig Subversion über die Kommandozeile zu bedienen.
Nutzen Sie dazu einfach WebStorm oder aber TortoiseSVN bzw. svnX.

Legen Sie einen neuen Ordner "aufgabe3" innerhalb Ihres Verzeichnis/Repositories an.
Speichern Sie alle Dateien aus dem Lehrveranstaltungsordner "aufgabe3/vorlage" in diesem Ordner ab.

Machen Sie sich mit der Datei "index.js" vertraut und öffnen Sie die Datei "index.html" testweise im Browser.

===Charaktere darstellen===

Der Code aus der Vorlage enthält ein übergeordnetes View-Objekt, welches beliebig viele Objekt-Views beherbergen kann.
Eine Objekt-View rendert alle Eigenschaften eines Objekts mitsamt der Werte und Datentypen in das HTML-Dokument.
Mithilfe eines Aufrufs von <code>view.addObjectView()</code> wird für eine beliebiges Objekt eine Objekt-View erzeugt.

===Charaktere erzeugen===

Bearbeiten Sie nun die "index.js" und erzeugen Sie folgende Personen mit Ihrer Ansicht nach '''geeigneten Eigenschaften''':

* Bruce Wayne, 40 Jahre alt, vermögend, kleidet sich gerne schwarz, wohnt in Gotham City
* Clark Kent, 30 Jahre alt, arbeitet als Redakteur, trägt Brille, wohnt in Metropolis
* Peter Parker, 25 Jahre alt, ist Fotograf, trägt Brille

Fügen Sie diese anschließend zu der View hinzu um eine entsprechende Darstellung der Objekte zu erreichen.
Welche Eigenschaften und Datentypen haben Sie für die Personen gewählt? Gibt es sinnvolle Alternativen?

===Charaktere modifizieren===

'''Anmerkung:''' Im Folgenden geht es darum, die zuvor erstellten Objekte nach Ihrer Erzeugung zu modifizieren.
Es geht nicht darum Funktionen zu erstellen oder Bedingungen abzufragen.

Die oben erwähnten Charaktere verfügen alle über ein bestimmtes Alter, welches sich über die Zeit verändern soll.
Lassen Sie alle Charaktere nach der initialen Erstellung der Objekte um 5 Jahre altern.

Des Weiteren sollte jeder Charakter eine entsprechende Eigenschaft "anrede" besitzen (mögliche Werte: "Herr" und "Frau").
Fügen Sie die korrekte Anrede den Charakterobjekten nach ihrer initialen Erstellung hinzu.

Peter Parker bekommt im Laufe seines Lebens Superkräfte, welche unter anderem dazu führen, dass er keine Brille mehr braucht.
Ändern Sie das entsprechende Objekt nachträglich so ab, dass klar ersichtlich ist, dass Peter keine Sehschwäche mehr hat.
Gibt es hierfür mehrere Lösungswege? Wenn ja, welcher Unterschied besteht zwischen den Lösungen?

Clark Kent, auch bekannt als Superman, bestizt viele verschiedene Superkräfte, wie z.B. Fliegen, Laseraugen, Röntgenblick.
Um den Überblick zu behalten fügen Sie die Eigenschaft "superKräfte" hinzu und speichern Sie die o.g. genannten Werte ab.

===Charaktere zusammenfassen===

Um leichter mit den Charakterobjekten arbeiten zu können bietet es sich an diese in einem Array abzuspeichern.
Erzeugen Sie ein Array-Objekt names "superhelden" und fügen Sie die zuvor erstellten Personen hinzu.
Gibt es hierfür unterschiedliche Implementierungsmöglichkeiten?

Für bestimmte Szenarien ist es hilfreich die Initialen von Charakteren zu wissen.
Da die Charaktere nun in einem Array sind, iterieren Sie über das Array und weisen Sie jedem Charakter Ihre Initialen zu.
Wenden Sie dazu die String-Funktion <code>charAt()</code> mit einem Parameter von 0 auf dem jeweiligen Vor- und Nachnamen an.

===Superheldenliste modifizieren===

Unter gewissen Umständen würde man Bruce Wayne nicht als Superhelden bezeichnen, da er über keine Superkräfte verfügt.
Entfernen Sie ihn aus diesem Grund aus der Liste von Superhelden nachdem Sie die Anrede hinzugefügt haben.
Stellen Sie sicher, dass das Array im Anschluss keine Lücken aufweist und eine Länge von 2 besitzt.

MMProg:WiSe2015:Praktikum:Aufgabe 2

2015-10-01T21:09:28Z

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 2= ==Vertiefung der JavaScript-Grundlagen== ===Ziel=== Ziel dieser Aufgabe ist es eine bestehende JavaScript-Logger-Anwendung zu erweiter…“

=Praktikumsaufgabe 2=

==Vertiefung der JavaScript-Grundlagen==

===Ziel===

Ziel dieser Aufgabe ist es eine bestehende JavaScript-Logger-Anwendung zu erweitern.

===Projekt vorbereiten===

'''Anmerkung:''' Es ist fortan nicht notwendig Subversion über die Kommandozeile zu bedienen.
Nutzen Sie dazu einfach WebStorm oder alternativ TortoiseSVN bzw. svnX.

Stellen Sie sicher, dass Sie die Praktikumsvorlagen auf Ihrem Rechner gespeichert haben.
Folgen Sie dazu der Anleitung aus Teil 1 der 1. Praktikumsaufgabe.

Legen Sie ein neues Verzeichnis "aufgabe2" innerhalb Ihres Repository-Verzeichnisses an.
Kopieren Sie die aus dem Lehrveranstaltung-Repository im Ordner "aufgabe2/vorlage" enthaltenen Dateien in das Verzeichnis.

===Log-Funktion verwenden===

Wie im zweiten Teil der ersten Aufgabe wird bei dieser Aufgabe eine Logger-Funktion zur Verfügung gestellt.
Diese Funktion wurde aus Gründen der Modularisierung in die eigene Datei "log.js" ausgelagert.
Öffnen Sie diese Datei und machen Sie sich zunächst mit dem Code vertraut.

Versuchen Sie nun herauszufinden, welche Ausgaben die einzelnen folgenden Code-Blöcke verursachen.
Validieren Sie Ihre Annahmen, indem Sie den Code in die "index.js" kopieren und die Seite "index.html" im Browser aufrufen.

<source lang="javascript">
logger.log(spielerName1);
var spielerName1 = 'Paul';

var spielerName2 = 'Peter';
logger.log(spielerName2);

window.spielerName3 = 'Hans';
logger.log(spielerName3);

var punktzahl1;
logger.log(punktzahl1);

var punktzahl2 = 100 / 'a';
logger.log(punktzahl2);

var punktzahl3 = 017;
logger.log(punktzahl3);

logger.log(1.000 == 1);

var begruessung = 'Hallo Spieler!' + ' ' + 'Start in ' + 5 + ' Sekunden';
logger.log(begruessung);
</source>

===Log-Funktion erweitern===

Im Folgenden geht es darum die Funktion <code>log()</code> in der Datei "log.js" zu erweitern.
Platzieren Sie Ihren Code direkt am Anfang der Funktion bevor der Wert von <code>message</code> in die Seite eingefügt wird.

====Leerer String====

Die Ausgabe des Loggers ist bei leeren Zeichenketten nicht besonders aussagekräftig.
Erweitern Sie den Code so, dass anstelle von leeren Zeichenketten der String "(empty string)" ausgegeben wird.

Validieren Sie die Funktionalität, indem Sie in der "index.js" <code>log()</code> mit einem leeren String aufrufen.

====Booleans, Null und Undefined====

Auch bei den boolschen Werten <code>true</code> und <code>false</code> sowie <code>null</code> und <code>undefined</code> kann die Ausgabe missverständlich sein.
Können Sie sich denken warum?

Erweitern Sie den Code wie folgt:
* handelt es sich um einen boolschen Wert soll die Zeichenkette "(boolean)" angehängt werden
* handelt es sich um Null soll die Zeichenkette "(null)" angehängt werden
* handelt es sich um Undefined soll die Zeichenkette "(undefined)" angehängt werden

Validieren Sie die Funktionalität, indem Sie in der "index.js" <code>log()</code> mit den entsprechenden Werten aufrufen.

====Aktuelles Datum====

Bei Log-Nachrichten ist es immer sinnvoll zu wissen zu welchem Zeitpunkt diese erstellt wurden.
Mithilfe des Ausdrucks <code>new Date()</code> bekommen Sie ein Datumsobjekt welches das aktuelle Datum vorhält.

Erweitern Sie die Log-Funktion so, dass '''vor''' jeder Nachricht das aktuelle Datum mit ausgegeben wird.

MMProg:WiSe2015:Praktikum:Aufgabe 1:Teil 2

2015-10-01T21:03:56Z

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 1, Teil 1= ==Eine erste JavaScript-Anwendung: Hello World== ===Ziel=== Ziel dieser Aufgabe ist eine HTML5/JavaScript-Anwendung zu erstell…“

=Praktikumsaufgabe 1, Teil 1=

==Eine erste JavaScript-Anwendung: Hello World==

===Ziel===

Ziel dieser Aufgabe ist eine HTML5/JavaScript-Anwendung zu erstellen,
welche die Nachricht "Hello World" als Text im Browser ausgibt.

===HTML-Datei erstellen===

Erstellen Sie eine neue HTML-Datei mittels Rechtsklick auf den Projektordner und dann Klick auf "New" -> "HTML File".
Benennen Sie Datei "index.html" und füllen Sie diese anschließend mit folgendem Inhalt:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<title>JavaScript-Praktikum; Aufgabe 1; Teil 2</title>
<meta charset="UTF-8">
</head>

<body>
</body>
</html>
</source>

Das ist alles was an Markup benötigt wird für ein valides HTML5-Dokument.
Weitere Meta-Anweisungen sind durchaus sinnvoll, allerdings nicht benötigt für die folgenden Beispiele.

Öffnen Sie die Seite im Browser mittels Rechtsklick auf die Datei und dann Klick auf "Open in Browser" -> "Firefox".
Sie sollten eine komplett weiße Seite sehen. Sichern Sie den aktuellen Stand vom Projekt im Repository.

===JavaScript-Code hinzufügen===

Es gibt zwei Möglichkeiten um ein HTML-Dokument um JavaScript-Code zu erweitern:

* Direkte Einbettung mittels Inline-Code in einem <code><script></code>-Tag
* Referenzierung einer externen Datei mittels <code><script></code>-Tag

Die direkte Einbettung von JavaScript-Code sollte wenn möglich vermieden werden.
Das Auslagern des Codes in eine separate Datei hat folgende Vorteile:

* Der Code ist sauber getrennt vom HTML (Seperation of Concerns)
* Der JavaScript-Code kann in mehreren HTML-Dateien eingesetzt werden (Don't Repeat Yourself).
* Die Ladezeit der Seite ist besser, da der JavaScript-Code im Browser-Cache gespeichert werden kann.

====Hauptdatei erstellen====

Erstellen Sie eine neue JS-Datei mittels Rechtsklick auf den Ordner und dann Klick auf "New" -> "JavaScript File".
Benennen Sie Datei "index.js" und fügen Sie folgenden Code in diese ein:

<source lang="javascript">
var log = function(message) {
document.querySelector('.messages').innerHTML += '<div class="message">' + message + '</div>';
};

log('Hello World');
</source>

Der JavaScript-Code stellt eine Log-Funktion bereit, welche mithilfe der DOM-API Nachrichten in die Seite ausgeben kann.
Nach dem Laden der HTML-Seite wird der Logger initial benutzt um die Nachricht "Hello World" auszugeben.

Ändern Sie dann das HTML-Dokument wie folgt ab:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<title>JavaScript-Praktikum; Aufgabe 1; Teil 2</title>
<meta charset="UTF-8">
</head>

<body>
<h1 class="headline">Logged messages</h1>
<div class="messages"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
</source>

Öffnen Sie die Seite erneut im Browser. Nun sollten Sie die Nachricht "Hello World" sehen.
Sichern Sie den aktuellen Stand im Repository.

====Dateien aufsplitten====

In den meisten Projekten ist es empfehlenswert, den JavaScript-Code in mehrere modulare Dateien aufzusplitten.
Bei der Einbindung dieser muss dann allerdings die Reihenfolge beachtet werden.
Der Browser lädt und evaluiert den Code in der Reihenfolge der eingebetteten <code><script></code>-Tags.

Teilen Sie nun den Code in der Datei "index.js" so auf, dass die Log-Funktion in einer eigenen Datei "log.js" liegt.
Die Datei "index.js" soll also nur noch den Aufruf der Log-Funktion mit der Nachricht "Hello World" beinhalten.

Ändern Sie dann das HTML-Dokument wie folgt ab:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<title>JavaScript-Praktikum; Aufgabe 1; Teil 2</title>
<meta charset="UTF-8">
</head>

<body>
<h1 class="headline">Logged messages</h1>
<div class="messages"></div>
<script type="text/javascript" src="log.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
</source>

'''Anmerkung:''' Tauschen Sie testweise die Reihenfolge der JavaScript-Dateien. Was denken Sie, was passieren wird?

===Styling===

Um die visuelle Darstellung von HTML-Seiten zu steuern werden Cascading Style Sheets (CSS) verwendet.
Ebenso wie JavaScript kann CSS auf zwei Weisen in einem HTML-Dokument verwendet werden:

* Direkte Einbettung mittels Inline-Code in einem <code><style></code>-Tag
* Referenzierung einer externen Datei mittels <code><link></code>-Tag

Die gleichen Gründe wie bei JavaScript sprechen dafür das CSS in eine externe Datei auszulagern.
Legen Sie dazu eine neue CSS-Datei names <code>index.css</code> an und fügen Sie folgenden Inhalt ein:

<source lang="css">
html, body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.headline {
font-size: 35px;
font-weight: normal;
}

.messages {
background-color: #000;
color: #FFF;
padding: 20px;
margin: 0;
}

.message {
margin: 0 0 20px;
}

.message:last-child {
margin: 0;
}
</source>

Ändern Sie dann das HTML-Dokument wie folgt ab:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<title>JavaScript-Praktikum; Aufgabe 1; Teil 1</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css" />
</head>

<body>
<h1 class="headline">Logged messages</h1>
<div class="messages"></div>
<script type="text/javascript" src="log.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
</source>

Öffnen Sie die Seite erneut im Browser. Diese sollte nun eine andere visuelle Darstellung aufweisen.
Sie können das Styling Ihren Wünschen entsprechend verändern. Sichern Sie dann den aktuellen Stand im Repository.

===Weitere Nachrichten ausgeben===

Die mittels JavaScript erstellte Log-Funktion bietet die Möglichkeit beliebige Nachrichten auszugeben.
Erweitern Sie den Code nun so, dass nach der Nachricht "Hello World" die Nachricht "How are you doing?" ausgegeben wird.

===Konsole verwenden===

In vielen Fällen kann die Browser-Konsole dabei unterstützen Fehler zu finden oder Probleme zu analysieren.
In den meisten Browsern finden Sie einen Einstieg in die Entwicklertools mittels Rechtsklick -> "Inspect element".
Daraufhin öffnet sich eine Leiste mit unterschiedlichen Werkzeugen wie dem DOM Inspector und auch der Konsole.

Die Konsole hat zwei wesentliche Kernfunktionen.
Zum einen stellt Sie eine JavaScript-API bereit welche Nachrichten entgegennimmt und diese dann ausgibt.
Dies können Informationen, Warnung und auch Fehler der aktuell geladenen Seite sein.
Laufzeitfehler der aktuellen Seite führen implizit zu einem Fehler-Eintrag in der Konsole.
Zum anderen ermöglicht die Konsole meist beliebigen JavaScript-Code im Kontext der aktuellen Seite auszuführen.

Öffnen Sie zunächst die Konsole und machen Sie sich mit der Ansicht vertraut.
Geben Sie anschließend in die untere Eingabezeile der Konsole <code>console.log('Hello World');</code> ein und drücken Sie Enter.
Dies führt dazu dass die Nachricht "Hello World" in der Konsole ausgegeben wird.

Versuchen Sie abschließend aus der Konsole heraus das Logger-Objekt der aktuellen HTML-Seite anzusteuern und die Nachricht
"called from the console" auszugeben.

MMProg:WiSe2015:Praktikum:Aufgabe 1:Teil 1

2015-10-01T21:00:35Z

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 1, Teil 1= ==Einrichtung der Arbeitsumgebung== ===Ziele=== * Installation und Konfiguration von WebStorm * Checkout des Repositories der…“

=Praktikumsaufgabe 1, Teil 1=

==Einrichtung der Arbeitsumgebung==

===Ziele===

* Installation und Konfiguration von WebStorm
* Checkout des Repositories der Lehrveranstaltung
* Checkout des eigenen Subversion-Repositories
* Verbinden des Repositories mit der WebStorm IDE

===Installation von Webstorm===

Laden Sie sich zunächst [http://www.jetbrains.com/webstorm/ Webstorm] herunter und installieren Sie es.
'''Anmerkung:''' Auf Rechnern der Hochschule ist Webstorm bereits vorinstalliert.

====Lizenz====

Als Student der Hochschule Augsburg erhalten Sie mit Ihrer Hochschul-E-Mail-Adresse eine kostenlose Studentenlizenz.
Gehen Sie dazu auf die [https://www.jetbrains.com/estore/students/ Antragsseite] und füllen Sie das Formular aus.

'''Anmerkung:''' Falls Sie an einem Rechner der Hochschule arbeiten können Sie die Hochschullizenz verwenden.
Bitte kontaktieren Sie den Lehrbeauftragten / Professor um den Lizenzschlüssel zu erhalten.

====IDE-Konfiguration====

Webstorm ist auf die Entwicklung mit HTML, CSS und JavaScript ausgelegt, wodurch sich die Konfiguration einfach gestaltet.

Stellen Sie sicher dass unter "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins"
auf jeden Fall folgende Plugins aktiviert sind (diese sollte standardmäßig der Fall sein):

* JavaScript Support
* Subversion Integration

Verifizieren Sie außerdem dass unter "Project settings" -> "JavaScript" die "JavaScript language version" auf
"ECMAScript 5.1" eingestellt ist.

====Code-Style====

Standardmäßig sind vier Leerzeichen als Einrückung für Code-Formattierungen eingestellt.
Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber zwei Leerzeichen aufgrund der häufigeren Verwendung.

Um diese Einstellung zu ändern klicken Sie jeweils auf "JavaScript", "CSS" und "HTML" und tragen bei "Tab size",
"Indent" und "Continuation Indent" die gewünsche Zahl an Leerzeichen ein.

Vermeiden Sie in jedem Fall das Tab-Zeichen zu verwenden, da dies nicht genormt ist und je nach Betriebssystem anders aussieht.

====Markdown====

Die Anmerkungen zu den Praktikumsaufgaben sind im Repository als
[https://de.wikipedia.org/wiki/Markdown Markdown]-Dokumente abgespeichert.
Für Syntax Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren.
Dazu gehen Sie auf "Webstorm" -> "Preferences" -> "IDE Settings" -> "Plugins",
suchen dort nach "Markdown" und klicken anschließend auf "Browse".
Es erscheint dann ein Plugin namens "Markdown".
Installieren Sie dieses und starten Webstorm danach neu.

==Checkout der Repositories==

Der folgende Abschnitt beschreibt eine exemplarische Verwendung von Subversion in der Kommandozeile um
die für das Praktikum notwendigen Repositories auf dem lokalen Rechner einzurichten.

'''Anmerkung:''' Alternativ können Sie die folgenden Schritte auch mit TortoiseSVN, svnX oder auch
mit dem integrierten Subversion-Support in Webstorm durchführen.

Es ist '''nicht''' notwendig jedes Mal die Kommandozeile zu verwenden.

===Vorbereitung auf Windows===

* TortoiseSVN inklusive Command Line Tools [http://glossar.hs-augsburg.de/Installation_von_Tortoise_%28Windows%29 installieren]
* Alternativ SlikSVN [https://sliksvn.com/ installieren]
* Im Explorer zum gewünschten Ordner navigieren in dem die Daten gespeichert werden sollen (z.B. C:\studium)
* Shift + Rechtsklick -> "Eingabeaufforderung hier öffnen"

===Vorbereitung auf OSX===

* Optional: svnX [http://glossar.hs-augsburg.de/Subversion/HowTo#svnX installieren]
* Terminal öffnen
* In den gewünschen Ordner bzw. auf den Desktop gehen: <code>cd Desktop</code>

===Arbeitsschritte===

* Ordner erstellen: <code>mkdir mmprog</code>
* Ordner betreten: <code>cd mmprog</code>
* SVN testen: <code>svn list https://praktikum.multimedia.hs-augsburg.de/</code>
* Falls nachgefragt wird das Zertifikat der Hochschule zu speichern, dann mit "p" bestätigen
* Lehrveranstaltung auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/lawrence/ lehrveranstaltung --username rz-kennung</code>
* Ordner verlassen: <code>cd ..</code>
* Eigenes Repository auschecken: <code>svn checkout https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung repository</code>
* Ordner betreten: <code>cd repository</code>
* Ordner "aufgabe1" anlegen: <code>mkdir aufgabe1</code>
* Ordner im SVN adden: <code>svn add aufgabe1</code>
* Commit ausführen: <code>svn commit -m "Initial commit."</code>
* Ordner betreten: <code>cd aufgabe1</code>
* Ordner "teil1" anlegen: <code>mkdir teil1</code>
* Ordner im SVN adden: <code>svn add teil1</code>
* Commit ausführen: <code>svn commit -m "Second commit."</code>
* Nun können Sie Webstorm öffnen und auf "Open Directory" klicken. Wählen Sie dann den Ordner "aufgabe1" aus
* '''Anmerkung für OSX:''' Falls Sie den Ordner auf dem Desktop erzeugt haben können Sie diesen über den Finder verschieben

Falls Sie auf OSX ein Problem damit haben das Zertifikat zu akzeptieren führen Sie folgenden Befehl aus:
<code>sudo svn list https://praktikum.multimedia.hs-augsburg.de/</code>
Da der Befehl als superuser ausgeführt wird müssen Sie Ihr lokales Rechner-Passwort eingeben.

===Projekt aktuell halten===

Wenn Sie mit der Bearbeitung Ihres Projektes aufhören sollten Sie stets den aktuellen Stand in Ihrem Repository sichern.
Webstorm verfügt über integrierten Subversion-Support und erkennt automatisch welche Operationen auszuführen sind.
Das bedeutet es ist '''nicht notwendig alle SVN-Befehle immer manuell über das Terminal auszuführen'''.
'''Wichtig:''' Verschieben oder Löschen Sie keine Dateien im Explorer/Finder ohne die entsprechenden SVN-Operationen.

Öffnen Sie nach Änderungen den Commit-Dialog:

* Im Projektexplorer Rechtsklick auf das aktuelle Projekt
* Klick auf "Subversion"
* Klick auf "Commit Directory"
* Verifizieren, dass alle zu speicherenden Dateien angehakt sind
* Eine entsprechende Commit-Message eingeben
* "OK" klicken

'''Anmerkung:''' Eine rot markierte Datei bedeutet, dass WebStorm diese nicht als Teil des Repositories erkennt.
Machen Sie dann einen Rechtsklick auf die Datei und wählen "SVN" -> "Add..." aus um die Datei hinzuzufügen.
Beim '''nächsten Commit''' wird die Datei dann mit auf den SVN-Server übertragen.

Wenn Sie auf einem anderen Rechner an diesem Projekt weiterarbeiten wollen,
müssen sie beim ersten Mal das Projekt in der oben beschriebenen Weise aus dem Repository auf Ihren Rechner laden.
Wenn Sie dies einmal gemacht haben, reicht es wenn Sie künftig die lokale Version wie folgt aktualisieren,
bevor Sie mit der Arbeit beginnen:

* Im Projektexplorer Rechtsklick auf das aktuelle Projekt
* Klick auf "Subversion"
* Klick auf "Update Directory"

===Repository im Browser einsehen===

Sie können Ihr Repository jederzeit im Browser einsehen und so verifizieren, dass der aktuelle Stand online ist.
Rufen Sie dazu folgende URL auf: <code>https://praktikum.multimedia.hs-augsburg.de/svn/rz-kennung</code>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:54:24Z

Lawrence: /* Sichere Verwendung in Konstruktorfunktionen */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Spieler = function(name) {
return {
name: vorname,
punktzahl: 0
};
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}
Spieler('John Doe');
console.log(window.name);
</source>

==Erzwingung von <code>new</code>==

Es ist bedingt möglich sicherzustellen, dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.

Zum einen kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

<source lang="javascript">
var Spieler = function(name) {
if (!(this instanceof Spieler)) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

Zum anderen kann überprüft werden ob <code>this</code> auf das globale Objekt zeigt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
if (this === window) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

==Alternative==

Konstruktorfunktionen sollten nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Wichtiger ist jedoch die effiziente Wiederverwendung wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es auch andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstelleSpieler = function(name) {
return {name: name};
}
var spieler1 = erstelleSpieler('John');
console.log(spieler1);
</source>

==Typüberprüfung==

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.

===typeof-Operator===

Für simple Datentypen funktioniert der <code>typeof</code>-Operator erwartungsgemäß.

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator nicht wie erwartet.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};

var spieler1 = new Spieler('John Doe');
console.log('typeof spieler1 ist ' + typeof spieler1);

var spieler2 = null;
console.log('typeof spieler2 ist ' + typeof spieler2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log('getType() von spieler1 ist ' + getType(spieler1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

console.log(spieler1.springe());
console.log(springe());
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

<code>apply()</code> ist auf jeder Funktion verfügbar, führt bei Aufruf die Funktion selbst aus und akzeptiert zwei Argumente.

Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array, welches als Liste von Argumenten für den Aufrufe verwendet wird.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(hoch) {
console.log(this.name + ' springt' + hoch ? ' hoch' : '');
}

var person1 = new Spieler('John');
springe.apply(person1, [true]);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt, auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente, welche an die ausführende Funktionen übergeben werden.

'''Empfehlung:''' In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann auf unterschiedliche Arten umgangen werden.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(spieler, hoch) {
console.log(spieler.name + ' springt' + hoch ? ' hoch' : '');
}

var spieler1 = new Spieler('John');
springe(spieler1, true);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

'''Anmerkung:''' Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

=Prototypen=

'''Anmerkung:''' Der folgende Abschnitt ist optional und für das Eigenstudium. Er ist nicht vorlesungs-/prüfungsrelevant.

Mithilfe von Prototypen ist es möglich Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
In JavaScript spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens <code>prototype</code>, welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft <code>constructor</code>, welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Spieler = function() {};
var prototyp = Spieler.prototype;
console.log(prototyp.constructor == Spieler);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird, erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Spieler = function() {};
var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype = {
erstelleKuerzel: function() {
return this.name.charAt(0);
};
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));

Spieler.prototype = {};
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler = new Spieler('John');
console.log(spieler.name);
</source>

Ist dies nicht der Fall wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

Besitzt der Prototyp selbst nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
prototypVomPrototyp.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.
Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Spieler = function() {};
var prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen helfen.
Verwendet man einen Konstruktor, der jedem neuen Objekt eine Funktion zuweist, ist das jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var spieler = [];
for (var i = 0; i < 1000; i++) {
spieler.push(new Spieler());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var spieler1 = new Spieler();
var spieler2 = new Spieler();
console.log(spieler1.sagHallo == spieler2.sagHallo);
console.log(spieler1.sagHallo == Spieler.prototype.sagHallo);
console.log(spieler2.sagHallo == Spieler.prototype.sagHallo);
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man ein Objekt als Prototypenm, welches auch mit einem Konstruktor erstellt wurde, erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.springe = function() {
console.log('Spieler springt');
};
};
Spieler.prototype = new Person();

var spieler1 = new Spieler();
console.log(spieler1.sagHallo());
console.log(spieler1.springe());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var spieler1 = {};
spieler1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise wird aus den folgenden Gründen als Anti-Pattern eingestuft:
* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viele dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht den Zugriff auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
};

var log1 = erzeugeLogFunktion('Nachricht:');
log1('Hello World');
var log2 = erzeugeLogFunktion('Message:');
log2('Hello World');
</source>

Mithilfe von Closures kann der Zugriff von Variablen innerhalb von Konstruktoren auf die inneren Funktionen beschränkt werden.

<source lang="javascript">
var Spieler = function(name) {
var kuerzel = name.charAt(0);
this.hatKuerzel = function(zuPruefendesKuerzel) {
return kuerzel === zuPruefendesKuerzel;
};
}

var spieler1 = new Spieler('John');
console.log(spieler1.hatKuerzel('J'));
</source>

==Pseudo-private Eigenschaften==

Closures sind schwer zu verstehen sein und erfordern einen sicheren Umgang mit JavaScript.
Eine Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.

<source lang="javascript">
var Spieler = function(name) {
this._name = name;
this._punktzahl = 0;
this.hatNamen = function(name) {
return this._name === name;
};
}
</source>

'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den Zugriff, wird jedoch oft verwendet in der JavaScript-Commmunity.

JavaScript-Tutorium:Grundlagen

2015-10-01T20:53:51Z

Lawrence: /* Kapselung */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Spieler = function(name) {
return {
name: vorname,
punktzahl: 0
};
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}
Spieler('John Doe');
console.log(window.name);
</source>

==Erzwingung von <code>new</code>==

Es ist bedingt möglich sicherzustellen, dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.

Zum einen kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

<source lang="javascript">
var Spieler = function(name) {
if (!(this instanceof Spieler)) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

Zum anderen kann überprüft werden ob <code>this</code> auf das globale Objekt zeigt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
if (this === window) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

==Alternative==

Konstruktorfunktionen sollten nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Wichtiger ist jedoch die effiziente Wiederverwendung wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es auch andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstelleSpieler = function(name) {
return {name: name};
}
var spieler1 = erstelleSpieler('John');
console.log(spieler1);
</source>

==Typüberprüfung==

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.

===typeof-Operator===

Für simple Datentypen funktioniert der <code>typeof</code>-Operator erwartungsgemäß.

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator nicht wie erwartet.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};

var spieler1 = new Spieler('John Doe');
console.log('typeof spieler1 ist ' + typeof spieler1);

var spieler2 = null;
console.log('typeof spieler2 ist ' + typeof spieler2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log('getType() von spieler1 ist ' + getType(spieler1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

console.log(spieler1.springe());
console.log(springe());
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

<code>apply()</code> ist auf jeder Funktion verfügbar, führt bei Aufruf die Funktion selbst aus und akzeptiert zwei Argumente.

Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array, welches als Liste von Argumenten für den Aufrufe verwendet wird.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(hoch) {
console.log(this.name + ' springt' + hoch ? ' hoch' : '');
}

var person1 = new Spieler('John');
springe.apply(person1, [true]);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt, auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente, welche an die ausführende Funktionen übergeben werden.

'''Empfehlung:''' In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann auf unterschiedliche Arten umgangen werden.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(spieler, hoch) {
console.log(spieler.name + ' springt' + hoch ? ' hoch' : '');
}

var spieler1 = new Spieler('John');
springe(spieler1, true);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

*Anmerkung:* Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

=Prototypen=

'''Anmerkung:''' Der folgende Abschnitt ist optional und für das Eigenstudium. Er ist nicht vorlesungs-/prüfungsrelevant.

Mithilfe von Prototypen ist es möglich Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
In JavaScript spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens <code>prototype</code>, welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft <code>constructor</code>, welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Spieler = function() {};
var prototyp = Spieler.prototype;
console.log(prototyp.constructor == Spieler);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird, erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Spieler = function() {};
var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype = {
erstelleKuerzel: function() {
return this.name.charAt(0);
};
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));

Spieler.prototype = {};
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler = new Spieler('John');
console.log(spieler.name);
</source>

Ist dies nicht der Fall wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

Besitzt der Prototyp selbst nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
prototypVomPrototyp.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.
Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Spieler = function() {};
var prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen helfen.
Verwendet man einen Konstruktor, der jedem neuen Objekt eine Funktion zuweist, ist das jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var spieler = [];
for (var i = 0; i < 1000; i++) {
spieler.push(new Spieler());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var spieler1 = new Spieler();
var spieler2 = new Spieler();
console.log(spieler1.sagHallo == spieler2.sagHallo);
console.log(spieler1.sagHallo == Spieler.prototype.sagHallo);
console.log(spieler2.sagHallo == Spieler.prototype.sagHallo);
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man ein Objekt als Prototypenm, welches auch mit einem Konstruktor erstellt wurde, erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.springe = function() {
console.log('Spieler springt');
};
};
Spieler.prototype = new Person();

var spieler1 = new Spieler();
console.log(spieler1.sagHallo());
console.log(spieler1.springe());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var spieler1 = {};
spieler1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise wird aus den folgenden Gründen als Anti-Pattern eingestuft:
* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viele dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht den Zugriff auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
};

var log1 = erzeugeLogFunktion('Nachricht:');
log1('Hello World');
var log2 = erzeugeLogFunktion('Message:');
log2('Hello World');
</source>

Mithilfe von Closures kann der Zugriff von Variablen innerhalb von Konstruktoren auf die inneren Funktionen beschränkt werden.

<source lang="javascript">
var Spieler = function(name) {
var kuerzel = name.charAt(0);
this.hatKuerzel = function(zuPruefendesKuerzel) {
return kuerzel === zuPruefendesKuerzel;
};
}

var spieler1 = new Spieler('John');
console.log(spieler1.hatKuerzel('J'));
</source>

==Pseudo-private Eigenschaften==

Closures sind schwer zu verstehen sein und erfordern einen sicheren Umgang mit JavaScript.
Eine Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.

<source lang="javascript">
var Spieler = function(name) {
this._name = name;
this._punktzahl = 0;
this.hatNamen = function(name) {
return this._name === name;
};
}
</source>

'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den Zugriff, wird jedoch oft verwendet in der JavaScript-Commmunity.

JavaScript-Tutorium:Grundlagen

2015-10-01T20:53:34Z

Lawrence: /* Prototypen */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Spieler = function(name) {
return {
name: vorname,
punktzahl: 0
};
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}
Spieler('John Doe');
console.log(window.name);
</source>

==Erzwingung von <code>new</code>==

Es ist bedingt möglich sicherzustellen, dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.

Zum einen kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

<source lang="javascript">
var Spieler = function(name) {
if (!(this instanceof Spieler)) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

Zum anderen kann überprüft werden ob <code>this</code> auf das globale Objekt zeigt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
if (this === window) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

==Alternative==

Konstruktorfunktionen sollten nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Wichtiger ist jedoch die effiziente Wiederverwendung wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es auch andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstelleSpieler = function(name) {
return {name: name};
}
var spieler1 = erstelleSpieler('John');
console.log(spieler1);
</source>

==Typüberprüfung==

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.

===typeof-Operator===

Für simple Datentypen funktioniert der <code>typeof</code>-Operator erwartungsgemäß.

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator nicht wie erwartet.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};

var spieler1 = new Spieler('John Doe');
console.log('typeof spieler1 ist ' + typeof spieler1);

var spieler2 = null;
console.log('typeof spieler2 ist ' + typeof spieler2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log('getType() von spieler1 ist ' + getType(spieler1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

console.log(spieler1.springe());
console.log(springe());
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

<code>apply()</code> ist auf jeder Funktion verfügbar, führt bei Aufruf die Funktion selbst aus und akzeptiert zwei Argumente.

Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array, welches als Liste von Argumenten für den Aufrufe verwendet wird.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(hoch) {
console.log(this.name + ' springt' + hoch ? ' hoch' : '');
}

var person1 = new Spieler('John');
springe.apply(person1, [true]);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt, auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente, welche an die ausführende Funktionen übergeben werden.

'''Empfehlung:''' In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann auf unterschiedliche Arten umgangen werden.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(spieler, hoch) {
console.log(spieler.name + ' springt' + hoch ? ' hoch' : '');
}

var spieler1 = new Spieler('John');
springe(spieler1, true);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

*Anmerkung:* Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

=Prototypen=

'''Anmerkung:''' Der folgende Abschnitt ist optional und für das Eigenstudium. Er ist nicht vorlesungs-/prüfungsrelevant.

Mithilfe von Prototypen ist es möglich Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
In JavaScript spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens <code>prototype</code>, welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft <code>constructor</code>, welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Spieler = function() {};
var prototyp = Spieler.prototype;
console.log(prototyp.constructor == Spieler);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird, erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Spieler = function() {};
var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype = {
erstelleKuerzel: function() {
return this.name.charAt(0);
};
};

var spieler = new Spieler();
console.log('Prototyp: ' + Object.getPrototypeOf(spieler));

Spieler.prototype = {};
console.log(Object.getPrototypeOf(spieler) == Spieler.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler = new Spieler('John');
console.log(spieler.name);
</source>

Ist dies nicht der Fall wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
Spieler.prototype.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

Besitzt der Prototyp selbst nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
prototypVomPrototyp.erstelleKuerzel = function() {
return this.name.charAt(0);
};

var spieler = new Spieler();
console.log(spieler.erstelleKuerzel());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.
Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Spieler = function() {};
var prototypVomPrototyp = Object.getPrototypeOf(Spieler.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen helfen.
Verwendet man einen Konstruktor, der jedem neuen Objekt eine Funktion zuweist, ist das jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var spieler = [];
for (var i = 0; i < 1000; i++) {
spieler.push(new Spieler());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Spieler = function() {};
Spieler.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var spieler1 = new Spieler();
var spieler2 = new Spieler();
console.log(spieler1.sagHallo == spieler2.sagHallo);
console.log(spieler1.sagHallo == Spieler.prototype.sagHallo);
console.log(spieler2.sagHallo == Spieler.prototype.sagHallo);
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man ein Objekt als Prototypenm, welches auch mit einem Konstruktor erstellt wurde, erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Spieler = function() {
this.springe = function() {
console.log('Spieler springt');
};
};
Spieler.prototype = new Person();

var spieler1 = new Spieler();
console.log(spieler1.sagHallo());
console.log(spieler1.springe());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var spieler1 = {};
spieler1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise wird aus den folgenden Gründen als Anti-Pattern eingestuft:
* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viele dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:52:40Z

Lawrence: /* this */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Spieler = function(name) {
return {
name: vorname,
punktzahl: 0
};
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}
Spieler('John Doe');
console.log(window.name);
</source>

==Erzwingung von <code>new</code>==

Es ist bedingt möglich sicherzustellen, dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.

Zum einen kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

<source lang="javascript">
var Spieler = function(name) {
if (!(this instanceof Spieler)) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

Zum anderen kann überprüft werden ob <code>this</code> auf das globale Objekt zeigt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
if (this === window) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

==Alternative==

Konstruktorfunktionen sollten nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Wichtiger ist jedoch die effiziente Wiederverwendung wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es auch andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstelleSpieler = function(name) {
return {name: name};
}
var spieler1 = erstelleSpieler('John');
console.log(spieler1);
</source>

==Typüberprüfung==

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.

===typeof-Operator===

Für simple Datentypen funktioniert der <code>typeof</code>-Operator erwartungsgemäß.

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator nicht wie erwartet.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};

var spieler1 = new Spieler('John Doe');
console.log('typeof spieler1 ist ' + typeof spieler1);

var spieler2 = null;
console.log('typeof spieler2 ist ' + typeof spieler2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log('getType() von spieler1 ist ' + getType(spieler1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts, dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var erstelleUndRufeLoggeThisAuf = function() {
var loggeThis = function() {
console.log(this);
};
loggeThis();
};

erstelleUndRufeLoggeThisAuf();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird, dann zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var spieler1 = {
name: 'John',
springe: function() {
console.log(this.name + ' springt');
}
};

console.log(spieler1.springe());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.
Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var springe = function() {
console.log(this.name + ' springt');
};

var spieler1 = {
name: 'John',
springe: springe
}

console.log(spieler1.springe());
console.log(springe());
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird, dann zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
};

var spieler1 = new Spieler('John');
spieler1.springe();
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

<code>apply()</code> ist auf jeder Funktion verfügbar, führt bei Aufruf die Funktion selbst aus und akzeptiert zwei Argumente.

Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array, welches als Liste von Argumenten für den Aufrufe verwendet wird.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(hoch) {
console.log(this.name + ' springt' + hoch ? ' hoch' : '');
}

var person1 = new Spieler('John');
springe.apply(person1, [true]);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt, auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente, welche an die ausführende Funktionen übergeben werden.

'''Empfehlung:''' In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann auf unterschiedliche Arten umgangen werden.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}

var springe = function(spieler, hoch) {
console.log(spieler.name + ' springt' + hoch ? ' hoch' : '');
}

var spieler1 = new Spieler('John');
springe(spieler1, true);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
this.springe = function() {
console.log(this.name + ' springt');
}
this.laufe = function() {
console.log(this.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

Das Problem kann durch eine Variable gelöst werden, welche eine Referenz auf <code>this</code> vorhält.

<source lang="javascript">
var Spieler = function(name) {
var self = this;
self.name = name;
self.springe = function() {
console.log(self.name + ' springt');
}
self.laufe = function() {
console.log(self.name + ' läuft');
};
}

var fuehreFunktionAus = function(funktion) {
console.log(funktion());
};

var spieler1 = new Spieler('John');
fuehreFunktionAus(spieler1.springe);
</source>

*Anmerkung:* Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:51:52Z

Lawrence: /* Konstruktoren */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine Möglichkeit Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind '''Konstruktorfunktionen'''.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort <code>new</code> aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Spieler = function() {

};
console.log(Spieler());
console.log(new Spieler());
</source>

Funktionen, welche als Konstruktoren dienen, sollten mit einem Großbuchstaben beginnen um sie deutlich zu kennzeichnen.

<source lang="javascript">
var spieler = function() {}; // Falsch
console.log(spieler()); // ?
console.log(new spieler()); // ?

var Spieler = function() {}; // Richtig
console.log(new Spieler()); // !
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Spieler = function() {

};
var spieler1 = new Spieler();
spieler1.name = 'John Doe';
console.log(spieler1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Spieler = function(name) {
return {
name: vorname,
punktzahl: 0
};
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log(spieler1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
}
Spieler('John Doe');
console.log(window.name);
</source>

==Erzwingung von <code>new</code>==

Es ist bedingt möglich sicherzustellen, dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.

Zum einen kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

<source lang="javascript">
var Spieler = function(name) {
if (!(this instanceof Spieler)) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

Zum anderen kann überprüft werden ob <code>this</code> auf das globale Objekt zeigt (im Browser: <code>window</code>).

<source lang="javascript">
var Spieler = function(name) {
if (this === window) {
throw new Error('Spieler is a constructor');
}
this.name = name;
}
console.log(new Spieler('John'));
console.log(Spieler('John'));
</source>

==Alternative==

Konstruktorfunktionen sollten nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Wichtiger ist jedoch die effiziente Wiederverwendung wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es auch andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstelleSpieler = function(name) {
return {name: name};
}
var spieler1 = erstelleSpieler('John');
console.log(spieler1);
</source>

==Typüberprüfung==

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.

===typeof-Operator===

Für simple Datentypen funktioniert der <code>typeof</code>-Operator erwartungsgemäß.

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator nicht wie erwartet.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};

var spieler1 = new Spieler('John Doe');
console.log('typeof spieler1 ist ' + typeof spieler1);

var spieler2 = null;
console.log('typeof spieler2 ist ' + typeof spieler2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Spieler = function(name) {
this.name = name;
};
var spieler1 = new Spieler('John');
console.log('getType() von spieler1 ist ' + getType(spieler1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
var loggeThis = function() {
console.log(this);
};
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname
}
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};

person1 = {
vorname: 'Max',
nachname: 'Mustermann',
loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(1);
}
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
var i1 = this.vorname.charAt(0);
var i2 = this.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
var i1 = person.vorname.charAt(0);
var i2 = person.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleNamen = function() {
return this.vorname + ' ' + this.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
var self = this;
self.vorname = vorname;
self.nachname = nachname;
self.erstelleNamen = function() {
return self.vorname + ' ' + self.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:51:22Z

Lawrence: /* Funktionen */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu, dass eine Variable mit demselben Namen der Funktion definiert wird, welche auf die Funktion zeigt.

<source lang="javascript">
function starteSpiel() {
console.log('Spiel gestartet!');
}
starteSpiel();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet, dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
starteSpiel();
function starteSpiel() {
console.log('Spiel gestartet!');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
starteSpiel();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
starteSpiel(); // verursacht Fehler
var starteSpiel = function() {
console.log('Spiel gestartet!');
};
</source>

'''Empfehlung:''' Verwenden Sie immer Funktionsausdrücke, welche Variablen zugewiesen werden.

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise auch nützlich wenn es darum geht
Funktionen als Argumente oder Rückgabewerte zu verwenden.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
var spielerName = erstelleSpielerNamen('Max', 'Mustermann');
console.log(spielerName);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {
return vorname + ' ' + nachname;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Dabei werden nicht belegte Argumente mit dem Wert <code>undefined</code> initialisiert.

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var erstelleSpielerNamen = function(vorname, nachname) {}
console.log(erstelleSpielerNamen.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var erstelleSpielerKuerzel = function(name) {
if (name) {
return name.charAt(0).toUpperCase();
}
}
console.log(erstelleSpielerKuerzel('Max'));
</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var nachricht = 'Hallo Spieler!';
var sprache = 'deutsch';
if (sprache == 'englisch') {
// Die bereits bestehende Variable wird überschrieben
var nachricht = 'Hello Gamer!';
}
console.log(nachricht);
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts
<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleSpieler = function() {
var erstelleName = function() {
return 'Max';
};
var erstellePunktzahl = function() {
return 200;
};

return {
name: erstelleName(),
punktzahl: erstellePunktzahl()
};
console.log(erstelleSpieler());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var spieler1 = {
name: 'Max',
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1.springe);
spieler1.springe();
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.
Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Person = function() {

};
console.log(Person());
console.log(new Person());
</source>

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

<source lang="javascript">
var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Person = function(vorname, nachname) {
return {
vorname: vorname,
nachname: nachname
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
}
};
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Person = function(name) {
this.name = name;
}
Person('John Doe');
console.log(window.name);
</source>

==Sichere Verwendung==

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
Dazu kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

<source lang="javascript">
var Person = function(name) {
if (!(this instanceof Person)) {
throw new Error('Person is a constructor');
}
this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));
</source>

==Alternativen==

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstellePerson = function(name, alter) {
return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);
</source>

==Typüberprüfung==

===typeof-Operator===

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.
Zum einen gibt es den <code>typeof</code>-Operator, ähnlich wie in anderen Sprachen (z.B. C).

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

Selbst bei Wrappern für primitive Datentypen liefert der <code>typeof</code>-Operator keine nützlichen Resultate.

<source lang="javascript">
var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
var loggeThis = function() {
console.log(this);
};
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname
}
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};

person1 = {
vorname: 'Max',
nachname: 'Mustermann',
loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(1);
}
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
var i1 = this.vorname.charAt(0);
var i2 = this.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
var i1 = person.vorname.charAt(0);
var i2 = person.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleNamen = function() {
return this.vorname + ' ' + this.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
var self = this;
self.vorname = vorname;
self.nachname = nachname;
self.erstelleNamen = function() {
return self.vorname + ' ' + self.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:50:47Z

Lawrence: /* Arrays */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mit listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var spielerListe = [];
console.log(spielerListe);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var spielerListe = new Array(10);
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Arrays können ebenso initial mit Werten vorbefüllt werden.

<source lang="javascript">
var spielerListe = [{}, {}, {}, {}, {}];
console.log(spielerListe);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte unterschiedlicher Typen enthalten.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}];
console.log(spielerListe);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToeSpielfeld = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var spielerListe = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
spielerListe[0].vorname = 'Max';
console.log(spielerListe);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(spielerListe);
console.log(spielerListe.length);
spielerListe[5] = {name: 'Frau Holle'};
console.log(spielerListe);
console.log(spielerListe.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var spielerListe = [];
spielerListe.length = 10;
console.log(spielerListe);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.push(spieler1);
console.log(spielerListe);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var spielerListe = [{name: 'Max Mustermann'}];
var spieler1 = personenregister.pop();
console.log(spielerListe);
console.log(spieler1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var spielerListe = [];
var spieler1 = {name: 'Max Mustermann'};
spielerListe.unshift(spieler1);
console.log(spielerListe);
personenregister.shift();
console.log(spielerListe);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ dieser]
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var spielerListe = [{name: 'Max Moritz'}, {name: 'John Doe'}];
for (var index = 0; index < spielerListe.length; index++) {
console.log(index + ': ' + spielerListe[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu dass eine Variable mit demselben Namen der Funktion definiert wird welche auf die Funktion zeigt.

<source lang="javascript">
function sagHallo() {
console.log('Hallo Welt!');
}
sagHallo();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
sagHallo();
function sagHallo() {
console.log('Hallo Welt');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var sagHallo = function() {
console.log('Hallo Welt');
};
sagHallo();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
sagHallo();
var sagHallo = function() {
console.log('Sag Hallo');
};
</source>

Theoretisch kann einem einer Variable zugewiesenen Funktionsausdruck auch eine Funktionsname gegeben werden.
Dieser kann von dem Funktionskörper selbst verwendet werden um die Funktion zu referenzieren, z.B. bei Rekursion.

<source lang="javascript">
var zeichneAlles = function zeichneNaechstesObjekt() {
// ...
zeichneNaechstesObjekt();
}
zeichneAlles();
</source>

'''Anmerkung:''' Persönlich hatte ich noch nie Verwendung dafür.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
var name = kombiniere('Max', 'Mustermann');
console.log(name);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var addiere = function(a, b) {}
console.log(addiere.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var sindArgumenteGegeben = function() {
if (arguments.length > 0) {
return true;
}
}
console.log(sindArgumenteGegeben());
console.log(sindArgumenteGegeben(1)));
</source>

==(anonymer) Funktionsausdruck==

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise nützlich wenn es darum geht
Funktionen als Argumente zu übergeben oder als Rückgabewerte zu verwenden.

<source lang="javascript">
var erstelleFunktion = function() {
return function() {};
}

console.log(erstelleFunktion());
console.log(erstelleFunktion() == erstelleFunktion());

</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var sucheErstesLeerzeichen = function(eingabe) {
var index = 0;
for (var index = 0; index < eingabe.length; i++) {
if (eingabe.charAt(index) == ' ') {
index =
}
}
return zaehler;
}
console.log(f2());
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts</source>

<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleName = function() {
var erstelleVorname = function() {
return 'Max';
};
var erstelleNachname = function() {
return 'Mustermann';
};

return erstelleVorname() + ' ' + erstelleNachname();
};
console.log(erstelleName());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.erstelleName());
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var substrahiere = function(a, b) {
return addiere(a, -b);
};

var multipliziere = function(a, b) {
return a * b;
};

var dividiere = function(a, b) {
return a / b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;
taschenrechner.substrahiere = substrahiere;
taschenrechner.multipliziere = multipliziere;
taschenrechner.dividiere = dividiere;

taschenrechner.teileGanzzahl = function() {
return Math.flor(dividiere(a, b));
}

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.
Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Person = function() {

};
console.log(Person());
console.log(new Person());
</source>

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

<source lang="javascript">
var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Person = function(vorname, nachname) {
return {
vorname: vorname,
nachname: nachname
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
}
};
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Person = function(name) {
this.name = name;
}
Person('John Doe');
console.log(window.name);
</source>

==Sichere Verwendung==

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
Dazu kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

<source lang="javascript">
var Person = function(name) {
if (!(this instanceof Person)) {
throw new Error('Person is a constructor');
}
this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));
</source>

==Alternativen==

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstellePerson = function(name, alter) {
return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);
</source>

==Typüberprüfung==

===typeof-Operator===

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.
Zum einen gibt es den <code>typeof</code>-Operator, ähnlich wie in anderen Sprachen (z.B. C).

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

Selbst bei Wrappern für primitive Datentypen liefert der <code>typeof</code>-Operator keine nützlichen Resultate.

<source lang="javascript">
var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
var loggeThis = function() {
console.log(this);
};
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname
}
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};

person1 = {
vorname: 'Max',
nachname: 'Mustermann',
loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(1);
}
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
var i1 = this.vorname.charAt(0);
var i2 = this.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
var i1 = person.vorname.charAt(0);
var i2 = person.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleNamen = function() {
return this.vorname + ' ' + this.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
var self = this;
self.vorname = vorname;
self.nachname = nachname;
self.erstelleNamen = function() {
return self.vorname + ' ' + self.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:50:14Z

Lawrence: /* Objekte */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver ist ein Objekt.
Objekte sind veränderliche Sammlungen von Eigenschaften.

Eine Eigenschaft ist ein Schlüssel-Wert-Paar mit einem String als Schlüssel und einem beliebigen Typ als Wert.

Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries aus anderen Sprachen.

JavaScript stellt native Objekttypen wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte bereit.

'''Anmerkung:''' Variablen speichern immer Referenzen auf Objekte, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art und Weise ein Objekt zu erstellen ist mithilfe des Objektliterals <code>{}</code>.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1);
</source>

Eine weitere Möglichkeit ist der Objektkonstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var spieler1 = new Object();
console.log(spieler1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var spieler1 = {name: 'John Doe', nickname: 'JD', punktzahl: 0};
console.log(spieler1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält, welche nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var spieler1 = {
name: 'John Doe',
punktzahl: 0,
springe: function() {
console.log('Spieler springt');
},
};
console.log(spieler1);
spieler1.springe();
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1.name);
</source>

Zum anderen ist es möglich einen String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann'};
console.log(spieler1['name']);
</source>

Normalerweise wird die erste Variante verwendet, wenn der Name der Eigenschaft bekannt und statisch ist.

Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird.

<source lang="javascript">
var spieler1 = {name: 'Max'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(spieler1, 'name');
console.log(hatObjektEigenschaft(spieler1, 'nickname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var spieler1 = {'hat highscore erreicht': true};
console.log(spieler1['hat highscore erreicht']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var spieler1 = {};
console.log(spieler1.name);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften sowohl durch Punktnotation als auch String-Ausdruck verändert werden.

<source lang="javascript">
var spieler1 = {punktzahl: 5};
spieler1.punktzahl += 5;
spieler1['punktzahl'] += 5;
console.log(spieler1.punktzahl);
</source>

'''Wichtig:''' Beim schreibenden Zugriff auf eine nicht existente Eigenschaft eines Objekts wird diese implizit definiert.
Das bedeutet, dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var spieler1 = {};
spieler1.name = 'Rainer Zufall';
spieler1.punktzahl = 42;
spieler1.verwendetGamepad = true;
console.log(spieler1);
</source>

==Untersuchen von Eigenschaften==

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop verwendet.

<source lang="javascript">
var spieler1 = {name: 'Max Mustermann', punktzahl: 42, verwendetGamepad: true};
for (var eigenschaft in spieler1) {
if (spieler1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + spieler1[eigenschaft]);
}
}
</source>

Die Funktion <code>hasOwnProperty()</code> verhindert dabei, dass vererbte Eigenschaften ausgegeben werden.

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mir listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var personenregister = [];
console.log(personenregister);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var personenregister = new Array(10);
console.log(personenregister.length);
</source>

Diese Eigenschaft hat allerdings keine Auswirkung auf das tatsächliche Speichervermögen eines Arrays.

Arrays können ebenso initial mit Werten vorbefüllt werden

<source lang="javascript">
var personenregister = [{}, {}, {}, {}, {}];
console.log(a);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte mit unterschiedlichen Typen enthalten.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}, 'fehlerhafter Datensatz];
console.log(personenregister);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToe = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenregister[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var personenregister = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
personenregister[0].vorname = 'Max';
console.log(personenregister);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var personenreigster = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenreigster);
console.log(personenreigster.length);
personenreigster[5] = {name: 'Frau Holle'};
console.log(personenreigster);
console.log(personenreigster.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var personenregister = [];
personenregister.length = 10;
console.log(personenregister);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.push(person1);
console.log(personenregister);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}];
var person1 = personenregister.pop();
console.log(personenregister);
console.log(person1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.unshift(person1);
console.log(personenregister);
personenregister.shift();
console.log(personenregister);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/)
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
for (var index = 0; index < personenregister.length; index++) {
console.log(index + ': ' + personenregister[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu dass eine Variable mit demselben Namen der Funktion definiert wird welche auf die Funktion zeigt.

<source lang="javascript">
function sagHallo() {
console.log('Hallo Welt!');
}
sagHallo();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
sagHallo();
function sagHallo() {
console.log('Hallo Welt');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var sagHallo = function() {
console.log('Hallo Welt');
};
sagHallo();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
sagHallo();
var sagHallo = function() {
console.log('Sag Hallo');
};
</source>

Theoretisch kann einem einer Variable zugewiesenen Funktionsausdruck auch eine Funktionsname gegeben werden.
Dieser kann von dem Funktionskörper selbst verwendet werden um die Funktion zu referenzieren, z.B. bei Rekursion.

<source lang="javascript">
var zeichneAlles = function zeichneNaechstesObjekt() {
// ...
zeichneNaechstesObjekt();
}
zeichneAlles();
</source>

'''Anmerkung:''' Persönlich hatte ich noch nie Verwendung dafür.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
var name = kombiniere('Max', 'Mustermann');
console.log(name);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var addiere = function(a, b) {}
console.log(addiere.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var sindArgumenteGegeben = function() {
if (arguments.length > 0) {
return true;
}
}
console.log(sindArgumenteGegeben());
console.log(sindArgumenteGegeben(1)));
</source>

==(anonymer) Funktionsausdruck==

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise nützlich wenn es darum geht
Funktionen als Argumente zu übergeben oder als Rückgabewerte zu verwenden.

<source lang="javascript">
var erstelleFunktion = function() {
return function() {};
}

console.log(erstelleFunktion());
console.log(erstelleFunktion() == erstelleFunktion());

</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var sucheErstesLeerzeichen = function(eingabe) {
var index = 0;
for (var index = 0; index < eingabe.length; i++) {
if (eingabe.charAt(index) == ' ') {
index =
}
}
return zaehler;
}
console.log(f2());
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts</source>

<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleName = function() {
var erstelleVorname = function() {
return 'Max';
};
var erstelleNachname = function() {
return 'Mustermann';
};

return erstelleVorname() + ' ' + erstelleNachname();
};
console.log(erstelleName());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.erstelleName());
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var substrahiere = function(a, b) {
return addiere(a, -b);
};

var multipliziere = function(a, b) {
return a * b;
};

var dividiere = function(a, b) {
return a / b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;
taschenrechner.substrahiere = substrahiere;
taschenrechner.multipliziere = multipliziere;
taschenrechner.dividiere = dividiere;

taschenrechner.teileGanzzahl = function() {
return Math.flor(dividiere(a, b));
}

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.
Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Person = function() {

};
console.log(Person());
console.log(new Person());
</source>

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

<source lang="javascript">
var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Person = function(vorname, nachname) {
return {
vorname: vorname,
nachname: nachname
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
}
};
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Person = function(name) {
this.name = name;
}
Person('John Doe');
console.log(window.name);
</source>

==Sichere Verwendung==

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
Dazu kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

<source lang="javascript">
var Person = function(name) {
if (!(this instanceof Person)) {
throw new Error('Person is a constructor');
}
this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));
</source>

==Alternativen==

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstellePerson = function(name, alter) {
return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);
</source>

==Typüberprüfung==

===typeof-Operator===

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.
Zum einen gibt es den <code>typeof</code>-Operator, ähnlich wie in anderen Sprachen (z.B. C).

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

Selbst bei Wrappern für primitive Datentypen liefert der <code>typeof</code>-Operator keine nützlichen Resultate.

<source lang="javascript">
var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
var loggeThis = function() {
console.log(this);
};
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname
}
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};

person1 = {
vorname: 'Max',
nachname: 'Mustermann',
loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(1);
}
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
var i1 = this.vorname.charAt(0);
var i2 = this.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
var i1 = person.vorname.charAt(0);
var i2 = person.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleNamen = function() {
return this.vorname + ' ' + this.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
var self = this;
self.vorname = vorname;
self.nachname = nachname;
self.erstelleNamen = function() {
return self.vorname + ' ' + self.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:49:38Z

Lawrence: /* Kontrollanweisung */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollstrukturen=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten, dass folgende Ausdrücke als <code>false</code> interpretiert werden:

<source lang="javascript">
false, null, undefined, '', 0, NaN
</source>

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}
if (!null) {
console.log('!null ergibt true');
console.log('null gleich false: ' + (null == false));
}
if (!undefined) {
console.log('!undefined ergibt true');
console.log('undefined gleich false: ' + (undefined == false));
}
if (!'') console.log('!"" ergibt true');
if (!NaN) console.log('!NaN ergibt true');
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein wird der nachfolgende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var level = 3;
switch (level) {
case 1:
console.log('Level 1');
break;
case 2:
console.log('Level 2');
break;
default:
console.log('0');
break;
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits <code>false</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var countdown = 10;
while (countdown--) {
console.log(countdown);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert wie die <code>while</code>-Schleife mit der Ausnahme,
dass der gegebene Schleifenkörper auf jeden Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.
Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler);
}
</source>

'''Anmerkung:''' <code>for..in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden.

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver Datentyp ist ein Objekt.
JavaScript bietet eingebaute/native Objekte wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte.
Objekte sind veränderliche Sammlungen von Eigenschaften.
Eine Eigenschaft ist ein Schlüssel-Wert-Paar, wobei der Schlüssel ein String und der Wert von beliebigem Typ ist.
Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries.

Variablen speichern immer die Referenz zu Objekten, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art ein Objekt zu erstellen ist mittels des Objektliterals <code>{}</code>.

<source lang="javascript">
var person1 = {};
console.log(person1);
</source>

Eine weitere Möglichkeit ist der Objekt-Konstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var person1 = new Object();
console.log(person1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
console.log(person1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält die nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
getName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.getName());
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1.name);
</source>

Zum anderen ist es möglich eines String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1['person1']);
</source>

In der Regel wird die erste Variante verwendet wenn der Name der Eigenschaft bekannt und statisch ist.
Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird

<source lang="javascript">
var person1 = {vorname: 'Max', nachname: 'Mustermann'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(person1, 'vorname');
console.log(hatObjektEigenschaft(person1, 'nachname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var person1 = {'mag viele Leerzeichen': true};
console.log(person1['mag viele Leerzeichen']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var person1 = {};
console.log(person1.adresse);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften
sowohl mittels Punktnotation als auch mittels String-Ausdruck verändert werden.

<source lang="javascript">
var person1 = {alter: 5};
person1.alter += 5;
person1['alter'] += 5;
console.log(person1.alter);
</source>

Beim schreibenden Zugriff auf eine nicht existierende Eigenschaft eines Objekts wird diese implizit definiert.
Dies bedeutet dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var person1 = {};
person1.alter = 42;
person1.name = 'Rainer Zufall';
person1.hatBrille = true;
console.log(person1);
</source>

===Abfragen von Eigenschaften===

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop in Kombination mit <code>hasOwnProperty()</code> verwendet.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
for (var eigenschaft in person1) {
if (person1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + person1[eigenschaft]);
}
}
</source>

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mir listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var personenregister = [];
console.log(personenregister);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var personenregister = new Array(10);
console.log(personenregister.length);
</source>

Diese Eigenschaft hat allerdings keine Auswirkung auf das tatsächliche Speichervermögen eines Arrays.

Arrays können ebenso initial mit Werten vorbefüllt werden

<source lang="javascript">
var personenregister = [{}, {}, {}, {}, {}];
console.log(a);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte mit unterschiedlichen Typen enthalten.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}, 'fehlerhafter Datensatz];
console.log(personenregister);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToe = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenregister[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var personenregister = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
personenregister[0].vorname = 'Max';
console.log(personenregister);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var personenreigster = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenreigster);
console.log(personenreigster.length);
personenreigster[5] = {name: 'Frau Holle'};
console.log(personenreigster);
console.log(personenreigster.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var personenregister = [];
personenregister.length = 10;
console.log(personenregister);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.push(person1);
console.log(personenregister);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}];
var person1 = personenregister.pop();
console.log(personenregister);
console.log(person1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.unshift(person1);
console.log(personenregister);
personenregister.shift();
console.log(personenregister);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/)
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
for (var index = 0; index < personenregister.length; index++) {
console.log(index + ': ' + personenregister[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu dass eine Variable mit demselben Namen der Funktion definiert wird welche auf die Funktion zeigt.

<source lang="javascript">
function sagHallo() {
console.log('Hallo Welt!');
}
sagHallo();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
sagHallo();
function sagHallo() {
console.log('Hallo Welt');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var sagHallo = function() {
console.log('Hallo Welt');
};
sagHallo();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
sagHallo();
var sagHallo = function() {
console.log('Sag Hallo');
};
</source>

Theoretisch kann einem einer Variable zugewiesenen Funktionsausdruck auch eine Funktionsname gegeben werden.
Dieser kann von dem Funktionskörper selbst verwendet werden um die Funktion zu referenzieren, z.B. bei Rekursion.

<source lang="javascript">
var zeichneAlles = function zeichneNaechstesObjekt() {
// ...
zeichneNaechstesObjekt();
}
zeichneAlles();
</source>

'''Anmerkung:''' Persönlich hatte ich noch nie Verwendung dafür.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
var name = kombiniere('Max', 'Mustermann');
console.log(name);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var addiere = function(a, b) {}
console.log(addiere.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var sindArgumenteGegeben = function() {
if (arguments.length > 0) {
return true;
}
}
console.log(sindArgumenteGegeben());
console.log(sindArgumenteGegeben(1)));
</source>

==(anonymer) Funktionsausdruck==

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise nützlich wenn es darum geht
Funktionen als Argumente zu übergeben oder als Rückgabewerte zu verwenden.

<source lang="javascript">
var erstelleFunktion = function() {
return function() {};
}

console.log(erstelleFunktion());
console.log(erstelleFunktion() == erstelleFunktion());

</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var sucheErstesLeerzeichen = function(eingabe) {
var index = 0;
for (var index = 0; index < eingabe.length; i++) {
if (eingabe.charAt(index) == ' ') {
index =
}
}
return zaehler;
}
console.log(f2());
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts</source>

<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleName = function() {
var erstelleVorname = function() {
return 'Max';
};
var erstelleNachname = function() {
return 'Mustermann';
};

return erstelleVorname() + ' ' + erstelleNachname();
};
console.log(erstelleName());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.erstelleName());
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var substrahiere = function(a, b) {
return addiere(a, -b);
};

var multipliziere = function(a, b) {
return a * b;
};

var dividiere = function(a, b) {
return a / b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;
taschenrechner.substrahiere = substrahiere;
taschenrechner.multipliziere = multipliziere;
taschenrechner.dividiere = dividiere;

taschenrechner.teileGanzzahl = function() {
return Math.flor(dividiere(a, b));
}

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.
Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Person = function() {

};
console.log(Person());
console.log(new Person());
</source>

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

<source lang="javascript">
var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Person = function(vorname, nachname) {
return {
vorname: vorname,
nachname: nachname
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
}
};
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Person = function(name) {
this.name = name;
}
Person('John Doe');
console.log(window.name);
</source>

==Sichere Verwendung==

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
Dazu kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

<source lang="javascript">
var Person = function(name) {
if (!(this instanceof Person)) {
throw new Error('Person is a constructor');
}
this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));
</source>

==Alternativen==

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstellePerson = function(name, alter) {
return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);
</source>

==Typüberprüfung==

===typeof-Operator===

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.
Zum einen gibt es den <code>typeof</code>-Operator, ähnlich wie in anderen Sprachen (z.B. C).

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

Selbst bei Wrappern für primitive Datentypen liefert der <code>typeof</code>-Operator keine nützlichen Resultate.

<source lang="javascript">
var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
var loggeThis = function() {
console.log(this);
};
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname
}
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};

person1 = {
vorname: 'Max',
nachname: 'Mustermann',
loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(1);
}
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
var i1 = this.vorname.charAt(0);
var i2 = this.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
var i1 = person.vorname.charAt(0);
var i2 = person.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleNamen = function() {
return this.vorname + ' ' + this.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
var self = this;
self.vorname = vorname;
self.nachname = nachname;
self.erstelleNamen = function() {
return self.vorname + ' ' + self.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:48:52Z

Lawrence: /* Vergleiche */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Bei Typungleicheit werden folgenden Regeln angewendet:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten für die Typumwandlung.
Es ist ohne weiteres möglich den Gleichheitsoperator sinnvoll zu verwenden um z.B. Objektreferenzen zu vergleichen.

<source lang="javascript">
var spieler1 = {}, spieler1 = {};
console.log(spieler1 == spieler1);
console.log(spieler1 == spieler2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollanweisung=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten dass folgende Ausdrücke als <code>false</code> interpretiert werden:
false, null, undefined, '', 0, NaN

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}

if (!null) {
console.log('!null ergibt true');
console.log('allerdings ist null nicht gleich false: ' + (null == false));
}

if (!undefined) {
console.log('!undefined ergibt true');
console.log('allerdings ist undefined nicht gleich false: ' + (undefined == false));
}

if (!'') {
console.log('!"" ergibt true');
}

if (!NaN) {
console.log('!NaN ergibt true');
}
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein so wird der nachfolgend stehende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var countdown = 3;
switch (countdown) {
case 3:
console.log('3');
case 2:
console.log('2');
case 1:
console.log('1');
break;
default:
console.log('0');
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits nicht <code>true</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var zaehler = 10;
while (zaehler--) {
console.log(zaehler);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert genauso wie die <code>while</code>-Schleife mit der Ausnahme dass der gegebene auf jeden
Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.

Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

'''Anmerkung:''' <code>for in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler[eigenschaft]);
}
</source>

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver Datentyp ist ein Objekt.
JavaScript bietet eingebaute/native Objekte wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte.
Objekte sind veränderliche Sammlungen von Eigenschaften.
Eine Eigenschaft ist ein Schlüssel-Wert-Paar, wobei der Schlüssel ein String und der Wert von beliebigem Typ ist.
Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries.

Variablen speichern immer die Referenz zu Objekten, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art ein Objekt zu erstellen ist mittels des Objektliterals <code>{}</code>.

<source lang="javascript">
var person1 = {};
console.log(person1);
</source>

Eine weitere Möglichkeit ist der Objekt-Konstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var person1 = new Object();
console.log(person1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
console.log(person1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält die nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
getName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.getName());
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1.name);
</source>

Zum anderen ist es möglich eines String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1['person1']);
</source>

In der Regel wird die erste Variante verwendet wenn der Name der Eigenschaft bekannt und statisch ist.
Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird

<source lang="javascript">
var person1 = {vorname: 'Max', nachname: 'Mustermann'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(person1, 'vorname');
console.log(hatObjektEigenschaft(person1, 'nachname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var person1 = {'mag viele Leerzeichen': true};
console.log(person1['mag viele Leerzeichen']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var person1 = {};
console.log(person1.adresse);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften
sowohl mittels Punktnotation als auch mittels String-Ausdruck verändert werden.

<source lang="javascript">
var person1 = {alter: 5};
person1.alter += 5;
person1['alter'] += 5;
console.log(person1.alter);
</source>

Beim schreibenden Zugriff auf eine nicht existierende Eigenschaft eines Objekts wird diese implizit definiert.
Dies bedeutet dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var person1 = {};
person1.alter = 42;
person1.name = 'Rainer Zufall';
person1.hatBrille = true;
console.log(person1);
</source>

===Abfragen von Eigenschaften===

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop in Kombination mit <code>hasOwnProperty()</code> verwendet.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
for (var eigenschaft in person1) {
if (person1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + person1[eigenschaft]);
}
}
</source>

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mir listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var personenregister = [];
console.log(personenregister);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var personenregister = new Array(10);
console.log(personenregister.length);
</source>

Diese Eigenschaft hat allerdings keine Auswirkung auf das tatsächliche Speichervermögen eines Arrays.

Arrays können ebenso initial mit Werten vorbefüllt werden

<source lang="javascript">
var personenregister = [{}, {}, {}, {}, {}];
console.log(a);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte mit unterschiedlichen Typen enthalten.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}, 'fehlerhafter Datensatz];
console.log(personenregister);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToe = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenregister[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var personenregister = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
personenregister[0].vorname = 'Max';
console.log(personenregister);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var personenreigster = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenreigster);
console.log(personenreigster.length);
personenreigster[5] = {name: 'Frau Holle'};
console.log(personenreigster);
console.log(personenreigster.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var personenregister = [];
personenregister.length = 10;
console.log(personenregister);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.push(person1);
console.log(personenregister);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}];
var person1 = personenregister.pop();
console.log(personenregister);
console.log(person1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.unshift(person1);
console.log(personenregister);
personenregister.shift();
console.log(personenregister);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/)
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
for (var index = 0; index < personenregister.length; index++) {
console.log(index + ': ' + personenregister[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu dass eine Variable mit demselben Namen der Funktion definiert wird welche auf die Funktion zeigt.

<source lang="javascript">
function sagHallo() {
console.log('Hallo Welt!');
}
sagHallo();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
sagHallo();
function sagHallo() {
console.log('Hallo Welt');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var sagHallo = function() {
console.log('Hallo Welt');
};
sagHallo();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
sagHallo();
var sagHallo = function() {
console.log('Sag Hallo');
};
</source>

Theoretisch kann einem einer Variable zugewiesenen Funktionsausdruck auch eine Funktionsname gegeben werden.
Dieser kann von dem Funktionskörper selbst verwendet werden um die Funktion zu referenzieren, z.B. bei Rekursion.

<source lang="javascript">
var zeichneAlles = function zeichneNaechstesObjekt() {
// ...
zeichneNaechstesObjekt();
}
zeichneAlles();
</source>

'''Anmerkung:''' Persönlich hatte ich noch nie Verwendung dafür.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
var name = kombiniere('Max', 'Mustermann');
console.log(name);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var addiere = function(a, b) {}
console.log(addiere.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var sindArgumenteGegeben = function() {
if (arguments.length > 0) {
return true;
}
}
console.log(sindArgumenteGegeben());
console.log(sindArgumenteGegeben(1)));
</source>

==(anonymer) Funktionsausdruck==

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise nützlich wenn es darum geht
Funktionen als Argumente zu übergeben oder als Rückgabewerte zu verwenden.

<source lang="javascript">
var erstelleFunktion = function() {
return function() {};
}

console.log(erstelleFunktion());
console.log(erstelleFunktion() == erstelleFunktion());

</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var sucheErstesLeerzeichen = function(eingabe) {
var index = 0;
for (var index = 0; index < eingabe.length; i++) {
if (eingabe.charAt(index) == ' ') {
index =
}
}
return zaehler;
}
console.log(f2());
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts</source>

<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleName = function() {
var erstelleVorname = function() {
return 'Max';
};
var erstelleNachname = function() {
return 'Mustermann';
};

return erstelleVorname() + ' ' + erstelleNachname();
};
console.log(erstelleName());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.erstelleName());
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var substrahiere = function(a, b) {
return addiere(a, -b);
};

var multipliziere = function(a, b) {
return a * b;
};

var dividiere = function(a, b) {
return a / b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;
taschenrechner.substrahiere = substrahiere;
taschenrechner.multipliziere = multipliziere;
taschenrechner.dividiere = dividiere;

taschenrechner.teileGanzzahl = function() {
return Math.flor(dividiere(a, b));
}

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.
Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Person = function() {

};
console.log(Person());
console.log(new Person());
</source>

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

<source lang="javascript">
var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Person = function(vorname, nachname) {
return {
vorname: vorname,
nachname: nachname
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
}
};
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Person = function(name) {
this.name = name;
}
Person('John Doe');
console.log(window.name);
</source>

==Sichere Verwendung==

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
Dazu kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

<source lang="javascript">
var Person = function(name) {
if (!(this instanceof Person)) {
throw new Error('Person is a constructor');
}
this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));
</source>

==Alternativen==

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstellePerson = function(name, alter) {
return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);
</source>

==Typüberprüfung==

===typeof-Operator===

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.
Zum einen gibt es den <code>typeof</code>-Operator, ähnlich wie in anderen Sprachen (z.B. C).

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

Selbst bei Wrappern für primitive Datentypen liefert der <code>typeof</code>-Operator keine nützlichen Resultate.

<source lang="javascript">
var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
var loggeThis = function() {
console.log(this);
};
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname
}
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};

person1 = {
vorname: 'Max',
nachname: 'Mustermann',
loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(1);
}
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
var i1 = this.vorname.charAt(0);
var i2 = this.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
var i1 = person.vorname.charAt(0);
var i2 = person.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleNamen = function() {
return this.vorname + ' ' + this.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
var self = this;
self.vorname = vorname;
self.nachname = nachname;
self.erstelleNamen = function() {
return self.vorname + ' ' + self.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:48:21Z

Lawrence: /* Primitive Datentypen */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<source lang="javascript">
Null, Undefined, Number, Boolean, String
</source>

'''Anmerkung:''' Number, Boolean und String werden auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp, welcher nur einen definierten Wert annehmen kann: <code>null</code>.
Im Gegensatz zu anderen Sprachen ist <code>null</code> '''nicht''' der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var spieler = null;
console.log(spieler);
</source>

==Undefined==

Undefined ist ein Datentyp, welcher ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Dieser Wert ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var spieler1, spieler2 = null;
console.log(spieler1);
console.log(spieler1 === spieler2);
</source>

==Boolean==

Boolean ist ein boolscher Datentyp, welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istSpielGewonnen = true, istSpielVerloren = false;
console.log(istSpielGewonnen);
console.log(istSpielVerloren);
console.log(istSpielGewonnen === istSpielVerloren);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var punktzahl = 2000, pi = 3.14;
console.log(punktzahl);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var punktzahl1 = 100, punktzahl2 = 100.00;
console.log(punktzahl1 === punktzahl2);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der Number API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/ dieser] MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var spieler1 = 'Paul', spieler2 = 'Peter';
console.log(spieler1);
console.log(spieler2);
console.log(spieler1 === spieler2);
</source>

Um Anführungszeichen in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('John' + ' ' + 'Doe');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung.

<source lang="javascript">
var spielerName = 'John Doe';
console.log('String-Länge: ' + spielerName.length);
console.log('Als Großbuchstaben: ' + spielerName.toUpperCase());
console.log('Als Kleinbuchstaben: ' + spielerName.toLowerCase());
console.log('Position vom ersten "e": ' + spielerName.indexOf('e'));
console.log('Zeichen an Stelle 4: ' + spielerName.charAt(3));
</source>

Eine komplette Referenz der String API finden sie auf
[https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/ dieser] MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Die Umwandlung bei Typungleichheit richtet sich nach den folgenden fünf Regeln:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert wenn sie mit Zahlen verglichen werden
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten lediglich für die Typumwandlung. Es ist trotzdem ohne weiteres möglich</source>

den Gleichheitsoperator zu verwenden um zum Beispiel Objektreferenzen zu vergleichen.

<source lang="javascript">
var person1 = {}, person2 = {};
console.log(person1 == person1);
console.log(person1 == person2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollanweisung=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten dass folgende Ausdrücke als <code>false</code> interpretiert werden:
false, null, undefined, '', 0, NaN

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}

if (!null) {
console.log('!null ergibt true');
console.log('allerdings ist null nicht gleich false: ' + (null == false));
}

if (!undefined) {
console.log('!undefined ergibt true');
console.log('allerdings ist undefined nicht gleich false: ' + (undefined == false));
}

if (!'') {
console.log('!"" ergibt true');
}

if (!NaN) {
console.log('!NaN ergibt true');
}
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein so wird der nachfolgend stehende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var countdown = 3;
switch (countdown) {
case 3:
console.log('3');
case 2:
console.log('2');
case 1:
console.log('1');
break;
default:
console.log('0');
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits nicht <code>true</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var zaehler = 10;
while (zaehler--) {
console.log(zaehler);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert genauso wie die <code>while</code>-Schleife mit der Ausnahme dass der gegebene auf jeden
Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.

Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

'''Anmerkung:''' <code>for in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler[eigenschaft]);
}
</source>

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver Datentyp ist ein Objekt.
JavaScript bietet eingebaute/native Objekte wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte.
Objekte sind veränderliche Sammlungen von Eigenschaften.
Eine Eigenschaft ist ein Schlüssel-Wert-Paar, wobei der Schlüssel ein String und der Wert von beliebigem Typ ist.
Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries.

Variablen speichern immer die Referenz zu Objekten, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art ein Objekt zu erstellen ist mittels des Objektliterals <code>{}</code>.

<source lang="javascript">
var person1 = {};
console.log(person1);
</source>

Eine weitere Möglichkeit ist der Objekt-Konstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var person1 = new Object();
console.log(person1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
console.log(person1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält die nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
getName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.getName());
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1.name);
</source>

Zum anderen ist es möglich eines String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1['person1']);
</source>

In der Regel wird die erste Variante verwendet wenn der Name der Eigenschaft bekannt und statisch ist.
Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird

<source lang="javascript">
var person1 = {vorname: 'Max', nachname: 'Mustermann'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(person1, 'vorname');
console.log(hatObjektEigenschaft(person1, 'nachname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var person1 = {'mag viele Leerzeichen': true};
console.log(person1['mag viele Leerzeichen']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var person1 = {};
console.log(person1.adresse);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften
sowohl mittels Punktnotation als auch mittels String-Ausdruck verändert werden.

<source lang="javascript">
var person1 = {alter: 5};
person1.alter += 5;
person1['alter'] += 5;
console.log(person1.alter);
</source>

Beim schreibenden Zugriff auf eine nicht existierende Eigenschaft eines Objekts wird diese implizit definiert.
Dies bedeutet dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var person1 = {};
person1.alter = 42;
person1.name = 'Rainer Zufall';
person1.hatBrille = true;
console.log(person1);
</source>

===Abfragen von Eigenschaften===

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop in Kombination mit <code>hasOwnProperty()</code> verwendet.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
for (var eigenschaft in person1) {
if (person1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + person1[eigenschaft]);
}
}
</source>

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mir listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var personenregister = [];
console.log(personenregister);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var personenregister = new Array(10);
console.log(personenregister.length);
</source>

Diese Eigenschaft hat allerdings keine Auswirkung auf das tatsächliche Speichervermögen eines Arrays.

Arrays können ebenso initial mit Werten vorbefüllt werden

<source lang="javascript">
var personenregister = [{}, {}, {}, {}, {}];
console.log(a);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte mit unterschiedlichen Typen enthalten.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}, 'fehlerhafter Datensatz];
console.log(personenregister);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToe = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenregister[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var personenregister = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
personenregister[0].vorname = 'Max';
console.log(personenregister);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var personenreigster = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenreigster);
console.log(personenreigster.length);
personenreigster[5] = {name: 'Frau Holle'};
console.log(personenreigster);
console.log(personenreigster.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var personenregister = [];
personenregister.length = 10;
console.log(personenregister);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.push(person1);
console.log(personenregister);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}];
var person1 = personenregister.pop();
console.log(personenregister);
console.log(person1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.unshift(person1);
console.log(personenregister);
personenregister.shift();
console.log(personenregister);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/)
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
for (var index = 0; index < personenregister.length; index++) {
console.log(index + ': ' + personenregister[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu dass eine Variable mit demselben Namen der Funktion definiert wird welche auf die Funktion zeigt.

<source lang="javascript">
function sagHallo() {
console.log('Hallo Welt!');
}
sagHallo();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
sagHallo();
function sagHallo() {
console.log('Hallo Welt');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var sagHallo = function() {
console.log('Hallo Welt');
};
sagHallo();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
sagHallo();
var sagHallo = function() {
console.log('Sag Hallo');
};
</source>

Theoretisch kann einem einer Variable zugewiesenen Funktionsausdruck auch eine Funktionsname gegeben werden.
Dieser kann von dem Funktionskörper selbst verwendet werden um die Funktion zu referenzieren, z.B. bei Rekursion.

<source lang="javascript">
var zeichneAlles = function zeichneNaechstesObjekt() {
// ...
zeichneNaechstesObjekt();
}
zeichneAlles();
</source>

'''Anmerkung:''' Persönlich hatte ich noch nie Verwendung dafür.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
var name = kombiniere('Max', 'Mustermann');
console.log(name);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var addiere = function(a, b) {}
console.log(addiere.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var sindArgumenteGegeben = function() {
if (arguments.length > 0) {
return true;
}
}
console.log(sindArgumenteGegeben());
console.log(sindArgumenteGegeben(1)));
</source>

==(anonymer) Funktionsausdruck==

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise nützlich wenn es darum geht
Funktionen als Argumente zu übergeben oder als Rückgabewerte zu verwenden.

<source lang="javascript">
var erstelleFunktion = function() {
return function() {};
}

console.log(erstelleFunktion());
console.log(erstelleFunktion() == erstelleFunktion());

</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var sucheErstesLeerzeichen = function(eingabe) {
var index = 0;
for (var index = 0; index < eingabe.length; i++) {
if (eingabe.charAt(index) == ' ') {
index =
}
}
return zaehler;
}
console.log(f2());
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts</source>

<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleName = function() {
var erstelleVorname = function() {
return 'Max';
};
var erstelleNachname = function() {
return 'Mustermann';
};

return erstelleVorname() + ' ' + erstelleNachname();
};
console.log(erstelleName());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.erstelleName());
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var substrahiere = function(a, b) {
return addiere(a, -b);
};

var multipliziere = function(a, b) {
return a * b;
};

var dividiere = function(a, b) {
return a / b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;
taschenrechner.substrahiere = substrahiere;
taschenrechner.multipliziere = multipliziere;
taschenrechner.dividiere = dividiere;

taschenrechner.teileGanzzahl = function() {
return Math.flor(dividiere(a, b));
}

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.
Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Person = function() {

};
console.log(Person());
console.log(new Person());
</source>

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

<source lang="javascript">
var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Person = function(vorname, nachname) {
return {
vorname: vorname,
nachname: nachname
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
}
};
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Person = function(name) {
this.name = name;
}
Person('John Doe');
console.log(window.name);
</source>

==Sichere Verwendung==

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
Dazu kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

<source lang="javascript">
var Person = function(name) {
if (!(this instanceof Person)) {
throw new Error('Person is a constructor');
}
this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));
</source>

==Alternativen==

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstellePerson = function(name, alter) {
return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);
</source>

==Typüberprüfung==

===typeof-Operator===

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.
Zum einen gibt es den <code>typeof</code>-Operator, ähnlich wie in anderen Sprachen (z.B. C).

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

Selbst bei Wrappern für primitive Datentypen liefert der <code>typeof</code>-Operator keine nützlichen Resultate.

<source lang="javascript">
var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
var loggeThis = function() {
console.log(this);
};
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname
}
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};

person1 = {
vorname: 'Max',
nachname: 'Mustermann',
loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(1);
}
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
var i1 = this.vorname.charAt(0);
var i2 = this.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
var i1 = person.vorname.charAt(0);
var i2 = person.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleNamen = function() {
return this.vorname + ' ' + this.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
var self = this;
self.vorname = vorname;
self.nachname = nachname;
self.erstelleNamen = function() {
return self.vorname + ' ' + self.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:47:24Z

Lawrence: /* Variablen */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei ihrer Deklaration definiert werden.

<source lang="javascript">
var spieler1 = 'John';
console.log(spieler1);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var aktuellePunktzahl;
aktuellePunktzahl = 2000;
console.log(aktuellePunktzahl);
</source>

Mehrere Variablen können mit Kommas separiert auf einmal deklariert werden.

<source lang="javascript">
var spieler1 = 'John', spieler2 = 'Jack';
console.log(spieler1);
console.log(spieler2);
</source>

Eine Typabgabe ist nicht notwendig, da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var istSpielGewonnen = 1;
istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var gegner1, gegner2, gegner3;
gegner1 = gegner2 = gegner3 = 'Monster';
console.log(gegner1);
console.log(gegner2);
console.log(gegner3);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var istSpielGewonnen = false;
var istSpielGewonnen = true;
console.log(istSpielGewonnen);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der Ausführung
des Codes ()innerhalb der umgebenden Funktion) nach oben schiebt.
Dies betrifft nur die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man also Code schreiben, der Variablen verwendet bevor sie definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(istSpielGewonnen);
var istSpielGewonnen = 5;
</source>

'''Tipp:''' Um Hoisting zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben.
Handelt es sich um globale Variable sollte diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

Jede JavaScript-Umgebung besitzt ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var spieler = 'John';
console.log('spieler global?', spieler === window.spieler);
var erstellePunktzahl = function() {
var punktzahl = 2000;
console.log('punktzahl global?', punktzahl === window.punktzahl);
}
erstellePunktzahl();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstellePunktzahl = function() {
punktzahl = 2000;
}
erstellePunktzahl();
console.log(punktzahl);
console.log(window.punktzahl);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<code>Null, Undefined, Number, Boolean, String</code>

'''Anmerkung:''' Number, Boolean und String auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp der nur einen definierten Wert annehmen kann: <code>null</code>.
Anders als in anderen Sprachen ist <code>null</code> nicht der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var referenz = null;
console.log(referenz);
</source>

==Undefined==

Undefined ist ein Datentyp der ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Undefined ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var referenz1, referenz2 = null;
console.log(referenz1);
console.log(referenz1 === referenz2);
</source>

'''Anmerkung:'''
Die JavaScript-Umgebung stellt eine Variable <code>undefined</code> zur Verfügung welche den Wert <code>undefined</code> enthält.
Unglücklicherweise kann diese Variable in manchen JavaScript-Umgebung neu definiert werden.

==Boolean==

Boolean ist ein boolscher Datentyp welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istGrasGruen = true, sindBananenBlau = false;
console.log(istGrasGruen);
console.log(sindBananenBlau);
console.log(istGrasGruen === sindBananenBlau);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var monateProJahr = 12, pi = 3.14;
console.log(monateProJahr);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var ganzzahl = 1, gleitkomma = 1.0000;
console.log(ganzzahl === gleitkomma);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der String API finden sie auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/) MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var name1 = 'Paul', name2 = 'Peter';
console.log(name1);
console.log(name2);
console.log(name1 === name2);
</source>

Um Anführungszeichen selbst in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('Max' + ' ' + 'Mustermann');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung

<source lang="javascript">
var name = 'Max Mustermann';
console.log('Name hat eine Länge von ' + name.length);
console.log('Name als Großbuchstaben: ' + name.toUpperCase());
console.log('Name als Kleinbuchstaben: ' + name.toLowerCase());
console.log('Name erstes "e" ist an Position ' + name.indexOf('e'));
</source>

Eine komplette Referenz der String API finden sie auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/) MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Die Umwandlung bei Typungleichheit richtet sich nach den folgenden fünf Regeln:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert wenn sie mit Zahlen verglichen werden
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten lediglich für die Typumwandlung. Es ist trotzdem ohne weiteres möglich</source>

den Gleichheitsoperator zu verwenden um zum Beispiel Objektreferenzen zu vergleichen.

<source lang="javascript">
var person1 = {}, person2 = {};
console.log(person1 == person1);
console.log(person1 == person2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollanweisung=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten dass folgende Ausdrücke als <code>false</code> interpretiert werden:
false, null, undefined, '', 0, NaN

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}

if (!null) {
console.log('!null ergibt true');
console.log('allerdings ist null nicht gleich false: ' + (null == false));
}

if (!undefined) {
console.log('!undefined ergibt true');
console.log('allerdings ist undefined nicht gleich false: ' + (undefined == false));
}

if (!'') {
console.log('!"" ergibt true');
}

if (!NaN) {
console.log('!NaN ergibt true');
}
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein so wird der nachfolgend stehende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var countdown = 3;
switch (countdown) {
case 3:
console.log('3');
case 2:
console.log('2');
case 1:
console.log('1');
break;
default:
console.log('0');
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits nicht <code>true</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var zaehler = 10;
while (zaehler--) {
console.log(zaehler);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert genauso wie die <code>while</code>-Schleife mit der Ausnahme dass der gegebene auf jeden
Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.

Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

'''Anmerkung:''' <code>for in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler[eigenschaft]);
}
</source>

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver Datentyp ist ein Objekt.
JavaScript bietet eingebaute/native Objekte wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte.
Objekte sind veränderliche Sammlungen von Eigenschaften.
Eine Eigenschaft ist ein Schlüssel-Wert-Paar, wobei der Schlüssel ein String und der Wert von beliebigem Typ ist.
Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries.

Variablen speichern immer die Referenz zu Objekten, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art ein Objekt zu erstellen ist mittels des Objektliterals <code>{}</code>.

<source lang="javascript">
var person1 = {};
console.log(person1);
</source>

Eine weitere Möglichkeit ist der Objekt-Konstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var person1 = new Object();
console.log(person1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
console.log(person1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält die nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
getName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.getName());
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1.name);
</source>

Zum anderen ist es möglich eines String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1['person1']);
</source>

In der Regel wird die erste Variante verwendet wenn der Name der Eigenschaft bekannt und statisch ist.
Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird

<source lang="javascript">
var person1 = {vorname: 'Max', nachname: 'Mustermann'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(person1, 'vorname');
console.log(hatObjektEigenschaft(person1, 'nachname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var person1 = {'mag viele Leerzeichen': true};
console.log(person1['mag viele Leerzeichen']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var person1 = {};
console.log(person1.adresse);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften
sowohl mittels Punktnotation als auch mittels String-Ausdruck verändert werden.

<source lang="javascript">
var person1 = {alter: 5};
person1.alter += 5;
person1['alter'] += 5;
console.log(person1.alter);
</source>

Beim schreibenden Zugriff auf eine nicht existierende Eigenschaft eines Objekts wird diese implizit definiert.
Dies bedeutet dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var person1 = {};
person1.alter = 42;
person1.name = 'Rainer Zufall';
person1.hatBrille = true;
console.log(person1);
</source>

===Abfragen von Eigenschaften===

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop in Kombination mit <code>hasOwnProperty()</code> verwendet.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
for (var eigenschaft in person1) {
if (person1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + person1[eigenschaft]);
}
}
</source>

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mir listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var personenregister = [];
console.log(personenregister);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var personenregister = new Array(10);
console.log(personenregister.length);
</source>

Diese Eigenschaft hat allerdings keine Auswirkung auf das tatsächliche Speichervermögen eines Arrays.

Arrays können ebenso initial mit Werten vorbefüllt werden

<source lang="javascript">
var personenregister = [{}, {}, {}, {}, {}];
console.log(a);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte mit unterschiedlichen Typen enthalten.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}, 'fehlerhafter Datensatz];
console.log(personenregister);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToe = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenregister[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var personenregister = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
personenregister[0].vorname = 'Max';
console.log(personenregister);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var personenreigster = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenreigster);
console.log(personenreigster.length);
personenreigster[5] = {name: 'Frau Holle'};
console.log(personenreigster);
console.log(personenreigster.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var personenregister = [];
personenregister.length = 10;
console.log(personenregister);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.push(person1);
console.log(personenregister);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}];
var person1 = personenregister.pop();
console.log(personenregister);
console.log(person1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.unshift(person1);
console.log(personenregister);
personenregister.shift();
console.log(personenregister);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/)
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
for (var index = 0; index < personenregister.length; index++) {
console.log(index + ': ' + personenregister[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu dass eine Variable mit demselben Namen der Funktion definiert wird welche auf die Funktion zeigt.

<source lang="javascript">
function sagHallo() {
console.log('Hallo Welt!');
}
sagHallo();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
sagHallo();
function sagHallo() {
console.log('Hallo Welt');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var sagHallo = function() {
console.log('Hallo Welt');
};
sagHallo();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
sagHallo();
var sagHallo = function() {
console.log('Sag Hallo');
};
</source>

Theoretisch kann einem einer Variable zugewiesenen Funktionsausdruck auch eine Funktionsname gegeben werden.
Dieser kann von dem Funktionskörper selbst verwendet werden um die Funktion zu referenzieren, z.B. bei Rekursion.

<source lang="javascript">
var zeichneAlles = function zeichneNaechstesObjekt() {
// ...
zeichneNaechstesObjekt();
}
zeichneAlles();
</source>

'''Anmerkung:''' Persönlich hatte ich noch nie Verwendung dafür.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
var name = kombiniere('Max', 'Mustermann');
console.log(name);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var addiere = function(a, b) {}
console.log(addiere.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var sindArgumenteGegeben = function() {
if (arguments.length > 0) {
return true;
}
}
console.log(sindArgumenteGegeben());
console.log(sindArgumenteGegeben(1)));
</source>

==(anonymer) Funktionsausdruck==

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise nützlich wenn es darum geht
Funktionen als Argumente zu übergeben oder als Rückgabewerte zu verwenden.

<source lang="javascript">
var erstelleFunktion = function() {
return function() {};
}

console.log(erstelleFunktion());
console.log(erstelleFunktion() == erstelleFunktion());

</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var sucheErstesLeerzeichen = function(eingabe) {
var index = 0;
for (var index = 0; index < eingabe.length; i++) {
if (eingabe.charAt(index) == ' ') {
index =
}
}
return zaehler;
}
console.log(f2());
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts</source>

<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleName = function() {
var erstelleVorname = function() {
return 'Max';
};
var erstelleNachname = function() {
return 'Mustermann';
};

return erstelleVorname() + ' ' + erstelleNachname();
};
console.log(erstelleName());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.erstelleName());
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var substrahiere = function(a, b) {
return addiere(a, -b);
};

var multipliziere = function(a, b) {
return a * b;
};

var dividiere = function(a, b) {
return a / b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;
taschenrechner.substrahiere = substrahiere;
taschenrechner.multipliziere = multipliziere;
taschenrechner.dividiere = dividiere;

taschenrechner.teileGanzzahl = function() {
return Math.flor(dividiere(a, b));
}

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.
Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Person = function() {

};
console.log(Person());
console.log(new Person());
</source>

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

<source lang="javascript">
var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Person = function(vorname, nachname) {
return {
vorname: vorname,
nachname: nachname
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
}
};
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Person = function(name) {
this.name = name;
}
Person('John Doe');
console.log(window.name);
</source>

==Sichere Verwendung==

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
Dazu kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

<source lang="javascript">
var Person = function(name) {
if (!(this instanceof Person)) {
throw new Error('Person is a constructor');
}
this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));
</source>

==Alternativen==

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstellePerson = function(name, alter) {
return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);
</source>

==Typüberprüfung==

===typeof-Operator===

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.
Zum einen gibt es den <code>typeof</code>-Operator, ähnlich wie in anderen Sprachen (z.B. C).

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

Selbst bei Wrappern für primitive Datentypen liefert der <code>typeof</code>-Operator keine nützlichen Resultate.

<source lang="javascript">
var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
var loggeThis = function() {
console.log(this);
};
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname
}
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};

person1 = {
vorname: 'Max',
nachname: 'Mustermann',
loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(1);
}
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
var i1 = this.vorname.charAt(0);
var i2 = this.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
var i1 = person.vorname.charAt(0);
var i2 = person.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleNamen = function() {
return this.vorname + ' ' + this.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
var self = this;
self.vorname = vorname;
self.nachname = nachname;
self.erstelleNamen = function() {
return self.vorname + ' ' + self.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:46:47Z

Lawrence: /* Schlüsselwörter */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientiert sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei der Deklaration definiert werden.

<source lang="javascript">
var tageProWoche = 7;
console.log(tageProWoche);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var tageProWoche;
tageProWoche = 7;
console.log(tageProWoche);
</source>

Eine Typabgabe ist nicht notwendig da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var pruefungBestanden = 1;
pruefungBestanden = true;
console.log(pruefungBestanden);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var tick, trick, track;
tick = trick = track = 'Ente';
console.log(tick);
console.log(trick);
console.log(track);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var doppeltDeklariert = false;
var doppeltDeklariert = true;
console.log(doppeltDeklariert);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der eigentlichen Ausführung
des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.
Dies betrifft ausschließlich die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man dadurch Code schreiben der Variablen verwendet bevor sie überhaupt definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(nochNichtDeklariert);
var nochNichtDeklariert = 5;
</source>

'''Tipp:''' Um Hoisting weitesgehend zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben. Handelt es sich um globale Variable sollten diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

In der Regel besitzt eine JavaScript-Umgebung ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var person1 = new Object();
console.log('ist person1 global?', person1 === window.person1);
var erstellePerson2 = function() {
var person2 = new Object();
console.log('is person2 global?', person2 === window.person2);
}
erstellePerson2();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstelleGlobaleVariable = function() {
globaleVariable = 1;
}
erstelleGlobaleVariable();
console.log(globaleVariable);
console.log(window.globaleVariable);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<code>Null, Undefined, Number, Boolean, String</code>

'''Anmerkung:''' Number, Boolean und String auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp der nur einen definierten Wert annehmen kann: <code>null</code>.
Anders als in anderen Sprachen ist <code>null</code> nicht der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var referenz = null;
console.log(referenz);
</source>

==Undefined==

Undefined ist ein Datentyp der ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Undefined ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var referenz1, referenz2 = null;
console.log(referenz1);
console.log(referenz1 === referenz2);
</source>

'''Anmerkung:'''
Die JavaScript-Umgebung stellt eine Variable <code>undefined</code> zur Verfügung welche den Wert <code>undefined</code> enthält.
Unglücklicherweise kann diese Variable in manchen JavaScript-Umgebung neu definiert werden.

==Boolean==

Boolean ist ein boolscher Datentyp welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istGrasGruen = true, sindBananenBlau = false;
console.log(istGrasGruen);
console.log(sindBananenBlau);
console.log(istGrasGruen === sindBananenBlau);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var monateProJahr = 12, pi = 3.14;
console.log(monateProJahr);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var ganzzahl = 1, gleitkomma = 1.0000;
console.log(ganzzahl === gleitkomma);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der String API finden sie auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/) MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var name1 = 'Paul', name2 = 'Peter';
console.log(name1);
console.log(name2);
console.log(name1 === name2);
</source>

Um Anführungszeichen selbst in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('Max' + ' ' + 'Mustermann');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung

<source lang="javascript">
var name = 'Max Mustermann';
console.log('Name hat eine Länge von ' + name.length);
console.log('Name als Großbuchstaben: ' + name.toUpperCase());
console.log('Name als Kleinbuchstaben: ' + name.toLowerCase());
console.log('Name erstes "e" ist an Position ' + name.indexOf('e'));
</source>

Eine komplette Referenz der String API finden sie auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/) MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Die Umwandlung bei Typungleichheit richtet sich nach den folgenden fünf Regeln:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert wenn sie mit Zahlen verglichen werden
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten lediglich für die Typumwandlung. Es ist trotzdem ohne weiteres möglich</source>

den Gleichheitsoperator zu verwenden um zum Beispiel Objektreferenzen zu vergleichen.

<source lang="javascript">
var person1 = {}, person2 = {};
console.log(person1 == person1);
console.log(person1 == person2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollanweisung=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten dass folgende Ausdrücke als <code>false</code> interpretiert werden:
false, null, undefined, '', 0, NaN

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}

if (!null) {
console.log('!null ergibt true');
console.log('allerdings ist null nicht gleich false: ' + (null == false));
}

if (!undefined) {
console.log('!undefined ergibt true');
console.log('allerdings ist undefined nicht gleich false: ' + (undefined == false));
}

if (!'') {
console.log('!"" ergibt true');
}

if (!NaN) {
console.log('!NaN ergibt true');
}
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein so wird der nachfolgend stehende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var countdown = 3;
switch (countdown) {
case 3:
console.log('3');
case 2:
console.log('2');
case 1:
console.log('1');
break;
default:
console.log('0');
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits nicht <code>true</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var zaehler = 10;
while (zaehler--) {
console.log(zaehler);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert genauso wie die <code>while</code>-Schleife mit der Ausnahme dass der gegebene auf jeden
Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.

Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

'''Anmerkung:''' <code>for in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler[eigenschaft]);
}
</source>

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver Datentyp ist ein Objekt.
JavaScript bietet eingebaute/native Objekte wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte.
Objekte sind veränderliche Sammlungen von Eigenschaften.
Eine Eigenschaft ist ein Schlüssel-Wert-Paar, wobei der Schlüssel ein String und der Wert von beliebigem Typ ist.
Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries.

Variablen speichern immer die Referenz zu Objekten, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art ein Objekt zu erstellen ist mittels des Objektliterals <code>{}</code>.

<source lang="javascript">
var person1 = {};
console.log(person1);
</source>

Eine weitere Möglichkeit ist der Objekt-Konstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var person1 = new Object();
console.log(person1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
console.log(person1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält die nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
getName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.getName());
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1.name);
</source>

Zum anderen ist es möglich eines String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1['person1']);
</source>

In der Regel wird die erste Variante verwendet wenn der Name der Eigenschaft bekannt und statisch ist.
Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird

<source lang="javascript">
var person1 = {vorname: 'Max', nachname: 'Mustermann'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(person1, 'vorname');
console.log(hatObjektEigenschaft(person1, 'nachname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var person1 = {'mag viele Leerzeichen': true};
console.log(person1['mag viele Leerzeichen']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var person1 = {};
console.log(person1.adresse);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften
sowohl mittels Punktnotation als auch mittels String-Ausdruck verändert werden.

<source lang="javascript">
var person1 = {alter: 5};
person1.alter += 5;
person1['alter'] += 5;
console.log(person1.alter);
</source>

Beim schreibenden Zugriff auf eine nicht existierende Eigenschaft eines Objekts wird diese implizit definiert.
Dies bedeutet dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var person1 = {};
person1.alter = 42;
person1.name = 'Rainer Zufall';
person1.hatBrille = true;
console.log(person1);
</source>

===Abfragen von Eigenschaften===

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop in Kombination mit <code>hasOwnProperty()</code> verwendet.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
for (var eigenschaft in person1) {
if (person1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + person1[eigenschaft]);
}
}
</source>

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mir listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var personenregister = [];
console.log(personenregister);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var personenregister = new Array(10);
console.log(personenregister.length);
</source>

Diese Eigenschaft hat allerdings keine Auswirkung auf das tatsächliche Speichervermögen eines Arrays.

Arrays können ebenso initial mit Werten vorbefüllt werden

<source lang="javascript">
var personenregister = [{}, {}, {}, {}, {}];
console.log(a);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte mit unterschiedlichen Typen enthalten.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}, 'fehlerhafter Datensatz];
console.log(personenregister);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToe = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenregister[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var personenregister = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
personenregister[0].vorname = 'Max';
console.log(personenregister);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var personenreigster = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenreigster);
console.log(personenreigster.length);
personenreigster[5] = {name: 'Frau Holle'};
console.log(personenreigster);
console.log(personenreigster.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var personenregister = [];
personenregister.length = 10;
console.log(personenregister);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.push(person1);
console.log(personenregister);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}];
var person1 = personenregister.pop();
console.log(personenregister);
console.log(person1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.unshift(person1);
console.log(personenregister);
personenregister.shift();
console.log(personenregister);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/)
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
for (var index = 0; index < personenregister.length; index++) {
console.log(index + ': ' + personenregister[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu dass eine Variable mit demselben Namen der Funktion definiert wird welche auf die Funktion zeigt.

<source lang="javascript">
function sagHallo() {
console.log('Hallo Welt!');
}
sagHallo();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
sagHallo();
function sagHallo() {
console.log('Hallo Welt');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var sagHallo = function() {
console.log('Hallo Welt');
};
sagHallo();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
sagHallo();
var sagHallo = function() {
console.log('Sag Hallo');
};
</source>

Theoretisch kann einem einer Variable zugewiesenen Funktionsausdruck auch eine Funktionsname gegeben werden.
Dieser kann von dem Funktionskörper selbst verwendet werden um die Funktion zu referenzieren, z.B. bei Rekursion.

<source lang="javascript">
var zeichneAlles = function zeichneNaechstesObjekt() {
// ...
zeichneNaechstesObjekt();
}
zeichneAlles();
</source>

'''Anmerkung:''' Persönlich hatte ich noch nie Verwendung dafür.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
var name = kombiniere('Max', 'Mustermann');
console.log(name);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var addiere = function(a, b) {}
console.log(addiere.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var sindArgumenteGegeben = function() {
if (arguments.length > 0) {
return true;
}
}
console.log(sindArgumenteGegeben());
console.log(sindArgumenteGegeben(1)));
</source>

==(anonymer) Funktionsausdruck==

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise nützlich wenn es darum geht
Funktionen als Argumente zu übergeben oder als Rückgabewerte zu verwenden.

<source lang="javascript">
var erstelleFunktion = function() {
return function() {};
}

console.log(erstelleFunktion());
console.log(erstelleFunktion() == erstelleFunktion());

</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var sucheErstesLeerzeichen = function(eingabe) {
var index = 0;
for (var index = 0; index < eingabe.length; i++) {
if (eingabe.charAt(index) == ' ') {
index =
}
}
return zaehler;
}
console.log(f2());
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts</source>

<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleName = function() {
var erstelleVorname = function() {
return 'Max';
};
var erstelleNachname = function() {
return 'Mustermann';
};

return erstelleVorname() + ' ' + erstelleNachname();
};
console.log(erstelleName());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.erstelleName());
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var substrahiere = function(a, b) {
return addiere(a, -b);
};

var multipliziere = function(a, b) {
return a * b;
};

var dividiere = function(a, b) {
return a / b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;
taschenrechner.substrahiere = substrahiere;
taschenrechner.multipliziere = multipliziere;
taschenrechner.dividiere = dividiere;

taschenrechner.teileGanzzahl = function() {
return Math.flor(dividiere(a, b));
}

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.
Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Person = function() {

};
console.log(Person());
console.log(new Person());
</source>

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

<source lang="javascript">
var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Person = function(vorname, nachname) {
return {
vorname: vorname,
nachname: nachname
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
}
};
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Person = function(name) {
this.name = name;
}
Person('John Doe');
console.log(window.name);
</source>

==Sichere Verwendung==

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
Dazu kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

<source lang="javascript">
var Person = function(name) {
if (!(this instanceof Person)) {
throw new Error('Person is a constructor');
}
this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));
</source>

==Alternativen==

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstellePerson = function(name, alter) {
return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);
</source>

==Typüberprüfung==

===typeof-Operator===

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.
Zum einen gibt es den <code>typeof</code>-Operator, ähnlich wie in anderen Sprachen (z.B. C).

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

Selbst bei Wrappern für primitive Datentypen liefert der <code>typeof</code>-Operator keine nützlichen Resultate.

<source lang="javascript">
var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
var loggeThis = function() {
console.log(this);
};
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname
}
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};

person1 = {
vorname: 'Max',
nachname: 'Mustermann',
loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(1);
}
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
var i1 = this.vorname.charAt(0);
var i2 = this.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
var i1 = person.vorname.charAt(0);
var i2 = person.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleNamen = function() {
return this.vorname + ' ' + this.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
var self = this;
self.vorname = vorname;
self.nachname = nachname;
self.erstelleNamen = function() {
return self.vorname + ' ' + self.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

JavaScript-Tutorium:Grundlagen

2015-10-01T20:45:48Z

Lawrence: /* Überblick */

=Ziel=

Ziel dieses Tutoriums ist es die Grundlagen und Besonderheiten der Sprache JavaScript zu vermitteln. Zur Veranschaulichung sind viele Code-Beispiele gegeben.

=Überblick=

==Geschichtliches==

* Erfunden von Brendan Eich bei Netscape
* Adaptiert von Microsoft und JScript benannt
* Netscape und Microsoft entwickeln unterschiedliche Implementierung
* Überreicht von Netscape an ECMA und standardisiert als ECMAScript

==Spracheigenschaften==

* Syntax ist an C angelehnt
* Hat fast nichts zu tun mit Java
* Ist interpretiert, nicht kompiliert
* Looses Typsystem
* Objektorientiert, nicht klassorientiert
* Begünstigt funktionales Programmieren
* Läuft in vielen unterschiedlichen Umgebungen

==Umgebungen==

* Browser, z.B. Firefox, Chrome, Internet Explorer, Safari, Opera
* Server, z.B. NodeJS, Windows Scripting Host, Rhino
* Applikationen, z.B. Adobe Photoshop, Quartz Composer
* Betriebssysteme, z.B. GNOME

==JavaScript-Engines==

* SpiderMonkey/JägerMonkey: Firefox, GNOME
* V8: Chrome, NodeJS
* Trident/Chakra: Internet Explorer

==ECMAScript Versionen==

* ES3 ist vollständig implementiert von allen gängigen Browsern
* ES5 ist vollständig implementiert von IE9+, FF4+, Chrome7+
* ES.next/Harmony ist von keinem Browser vollständig implementiert

==Literaturempfehlungen==

* "JavaScript: The Good Parts" - Douglas Crockford
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]

=Schlüsselwörter=

Folgende Wörter sind für die Sprache selbst reserviert und können nicht als Variablennamen verwendet werden:

<source lang="javascript">
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
</source>

Die Auswahl der Begriffe orientierte sich stark an der Sprache Java.
Einige der Begriffe finden in JavaScript aktuell keine Verwendung.

=Variablen=

In JavaScript wird das Schlüsselwort <code>var</code> verwendet um Variablen zu deklarieren (und zu initialisieren).

==Definition und Zuweisung==

Variablen können unmittelbar bei der Deklaration definiert werden.

<source lang="javascript">
var tageProWoche = 7;
console.log(tageProWoche);
</source>

Oder auch zu späteren Zeitpunkten.

<source lang="javascript">
var tageProWoche;
tageProWoche = 7;
console.log(tageProWoche);
</source>

Eine Typabgabe ist nicht notwendig da es sich nicht um eine stark typisierte Sprachen handelt.
Die Engine kümmert sich automatisch um die Anforderung und Freigabe von Speicher.

<source lang="javascript">
var pruefungBestanden = 1;
pruefungBestanden = true;
console.log(pruefungBestanden);
</source>

Wie auch in anderen Sprachen sind Mehrfachzuweisungen erlaubt.

<source lang="javascript">
var tick, trick, track;
tick = trick = track = 'Ente';
console.log(tick);
console.log(trick);
console.log(track);
</source>

Eine erneute Deklaration einer bereits bestehenden Variable führt zu keinem Fehler, sollte allerdings vermieden werden:

<source lang="javascript">
var doppeltDeklariert = false;
var doppeltDeklariert = true;
console.log(doppeltDeklariert);
</source>

==Hoisting==

Hoisting bedeutet dass der JavaScript-Interpreter alle Variablendefinitionen vor der eigentlichen Ausführung
des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.
Dies betrifft ausschließlich die Definitionen, nicht aber die initiale Belegung mit einem Wert.

Augenscheinlich kann man dadurch Code schreiben der Variablen verwendet bevor sie überhaupt definiert sind.
Da jedoch die initiale Wertzuweisung nicht vom Interpreter verschoben wird kann dies zu unerwarteten Resultaten führen.

<source lang="javascript">
console.log(nochNichtDeklariert);
var nochNichtDeklariert = 5;
</source>

'''Tipp:''' Um Hoisting weitesgehend zu vermeiden ist es empfehlenswert alle Variablendeklaration immer am Anfang der
jewilig umgebenden Funktion zu schreiben. Handelt es sich um globale Variable sollten diese am Anfang der JavaScript-Datei stehen.

==Globale Variablen==

In der Regel besitzt eine JavaScript-Umgebung ein globales Objekt, welches alle globalen Properties beherbergt.
Im Browser wird das globale Objekt über die Variable <code>window</code> verfügbar gemacht. In Node.JS heisst es <code>global</code>.
Falls eine Variable nicht innerhalb einer Funktion definiert wird, wird diese automatisch an das globale Objekt angehängt.

<source lang="javascript">
var person1 = new Object();
console.log('ist person1 global?', person1 === window.person1);
var erstellePerson2 = function() {
var person2 = new Object();
console.log('is person2 global?', person2 === window.person2);
}
erstellePerson2();
</source>

'''Achtung:''' Wird das Schlüsselwort <code>var</code> vergessen, wird die Variable implizit als globale Variable definiert.

<source lang="javascript">
var erstelleGlobaleVariable = function() {
globaleVariable = 1;
}
erstelleGlobaleVariable();
console.log(globaleVariable);
console.log(window.globaleVariable);
</source>

=Primitive Datentypen=

JavaScript stellt folgende primitive Datentypen zur Verfügung:

<code>Null, Undefined, Number, Boolean, String</code>

'''Anmerkung:''' Number, Boolean und String auch als Objekte behandelt mittels des sogenannten Boxings.

==Null==

Null ist ein Datentyp der nur einen definierten Wert annehmen kann: <code>null</code>.
Anders als in anderen Sprachen ist <code>null</code> nicht der Standardwert einer nicht initialisierten Variable.

<source lang="javascript">
var referenz = null;
console.log(referenz);
</source>

==Undefined==

Undefined ist ein Datentyp der ebenso nur einen definerten Wert annehmen kann: <code>undefined</code>.
Undefined ist der Standardwert einer nicht initialisierten Variable.
Er ist '''nicht''' gleichbedeutend mit <code>null</code>.

<source lang="javascript">
var referenz1, referenz2 = null;
console.log(referenz1);
console.log(referenz1 === referenz2);
</source>

'''Anmerkung:'''
Die JavaScript-Umgebung stellt eine Variable <code>undefined</code> zur Verfügung welche den Wert <code>undefined</code> enthält.
Unglücklicherweise kann diese Variable in manchen JavaScript-Umgebung neu definiert werden.

==Boolean==

Boolean ist ein boolscher Datentyp welcher die Werte <code>true</code> und <code>false</code> annehmen kann.

<source lang="javascript">
var istGrasGruen = true, sindBananenBlau = false;
console.log(istGrasGruen);
console.log(sindBananenBlau);
console.log(istGrasGruen === sindBananenBlau);
</source>

==Number==

Number ist eine 64 bit breite Fließkommazahl, ähnlich zu <code>double</code> wie in Java.

<source lang="javascript">
var monateProJahr = 12, pi = 3.14;
console.log(monateProJahr);
console.log(pi);
</source>

JavaScript besitzt keinen separaten Datentyp für Integer-Zahlen.
Integer-Werte werden auch als Number abgebildet.

<source lang="javascript">
var ganzzahl = 1, gleitkomma = 1.0000;
console.log(ganzzahl === gleitkomma);
</source>

Es existieren die gängigen arithmetischen Operatoren für Berechnungen.

<source lang="javascript">
console.log(1 + 2);
console.log(1 - 2);
console.log(1 * 2);
console.log(1 / 2);

console.log(--1);
console.log(++1);
</source>

'''Anmerkung:'''
Da es sich bei jeder Zahl um eine Fließkommazahl handelt gibt es keine ganzzahlige Teilung.
Diese muss über einen Umweg mithilfe der Number API emuliert werden.

<source lang="javascript">
var quotient = Math.floor(5 / 3);
console.log(quotient);
</source>

Der Wert NaN (not a number) ist das Ergebnis einer mathematischen Operation die nicht in einer Zahl resultiert.

<source lang="javascript">
var ungueltigeOperation = 100 / 'a';
console.log(ungueltigeOperation);
</source>

Zahlen vom Typ Number können auch in oktaler und hexadezimaler Form geschrieben werden.

<source lang="javascript">
var oktal = 017, hexadezimal = 0x10;
console.log(oktal);
console.log(hexadezimal);
</source>

===Number API===

Der Datentyp Number stellt diverse Hilfsfunktionen zur Verfügung.

<source lang="javascript">
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

var zahl = 2;
console.log(zahl.toFixed(3));
</source>

Eine komplette Referenz der String API finden sie auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number/) MDN-Seite.

==String==

Der Datentyp String wird verwendet um unveränderliche Folgen von 16 bit breiten Zeichen darzustellen.
Anders als in anderen Sprachen existiert kein Datentyp für einzelne Zeichen.

Strings können sowohl von einfachen als auch von doppelten Anführungszeichen umgeben sein.

<source lang="javascript">
var name1 = 'Paul', name2 = 'Peter';
console.log(name1);
console.log(name2);
console.log(name1 === name2);
</source>

Um Anführungszeichen selbst in Strings zu verwenden müssen diese mit vorangestellten Backslash versehen werden.

<source lang="javascript">
console.log('\'');
console.log("\"");
</source>

Strings können mithilfe des Plus-Operators zu einem neuen String zusammengesetzt werden.

<source lang="javascript">
console.log('Max' + ' ' + 'Mustermann');
</source>

===String API===

Ebenso wie der Datentyp Number stellt String unterschiedliche Hilfsfunktionen zur Verfügung

<source lang="javascript">
var name = 'Max Mustermann';
console.log('Name hat eine Länge von ' + name.length);
console.log('Name als Großbuchstaben: ' + name.toUpperCase());
console.log('Name als Kleinbuchstaben: ' + name.toLowerCase());
console.log('Name erstes "e" ist an Position ' + name.indexOf('e'));
</source>

Eine komplette Referenz der String API finden sie auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/) MDN-Seite.

=Vergleiche=

==Gleichheit (==)==

Der Gleichheitsoperator konvertiert Datentypen der beiden zu vergleichenden Ausdrücke und vergleicht dann die Werte.
Der Ungleichheitsoperator verhält sich analog.

Die Umwandlung bei Typungleichheit richtet sich nach den folgenden fünf Regeln:

1. <code>null</code> und <code>undefined</code> sind gleich
2. Strings werden in Zahlen konvertiert wenn sie mit Zahlen verglichen werden
3. Boolsche Werte werden in Zahlen konvertiert
4. Objekte werden konvertiert mittles valueOf() wenn Sie mit Number vergleichen werden
5. Objekte werden konvertiert mittels toString() wenn Sie mit String vergleichen werden

<source lang="javascript">
console.log(null == undefined);
console.log('3' == 3);
console.log(true == 1);
console.log(new Object() == '[object Object]');
</source>

'''Anmerkung:''' Diese Regeln gelten lediglich für die Typumwandlung. Es ist trotzdem ohne weiteres möglich</source>

den Gleichheitsoperator zu verwenden um zum Beispiel Objektreferenzen zu vergleichen.

<source lang="javascript">
var person1 = {}, person2 = {};
console.log(person1 == person1);
console.log(person1 == person2);
</source>

==Identität==

Der Identitätsoperator vergleicht zuerst die Datentypen und bei Typgleichheit die Werte zweier Ausdrücke.

<source lang="javascript">
console.log(null === undefined);
console.log('3' === 3);
console.log(true === 1);
console.log(new Object() === '[object Object]');
</source>

'''Anmerkung:''' Die Verwendung des Gleichheitsoperators wird in großen Teilen der JavaScript-Gemeinde als
schlechte Programmierpraxis angesehen. Oftmals wird ausschließlich der Identitätsoperator verwendet.

==Größer und kleiner==

Die Vergleichsoperatoren größer (gleich) und kleiner (gleich) arbeiten auf die gleiche Weise wie der Gleichheitsoperator.

<source lang="javascript">
console.log(2 > '1');
console.log(true > 1);
</source>

=Kontrollanweisung=

==if-Anweisung==

Die Syntax der if-Anweisung ist identisch zu den meisten anderen Sprachen.
Es gilt aber zu beachten dass folgende Ausdrücke als <code>false</code> interpretiert werden:
false, null, undefined, '', 0, NaN

<source lang="javascript">
if (!false) {
console.log('!false ergibt true');
}

if (!null) {
console.log('!null ergibt true');
console.log('allerdings ist null nicht gleich false: ' + (null == false));
}

if (!undefined) {
console.log('!undefined ergibt true');
console.log('allerdings ist undefined nicht gleich false: ' + (undefined == false));
}

if (!'') {
console.log('!"" ergibt true');
}

if (!NaN) {
console.log('!NaN ergibt true');
}
</source>

===Boolsche Logik===

Die Boolsche Logik funktioniert ebenfalls wie in anderen Sprachen, inklusive Short-Circuit.

<source lang="javascript">
if (false || null || undefined || '' || NaN || true) {
console.log(false || null || undefined || "" || NaN || true);
}

var nichtVeraenderteVariable = 1;
if (false && nichtVeraenderteVariable++) {

}
console.log(nichtVeraenderteVariable);
</source>

Der ternäre Operator interpretiert die gleichen Werte wie das if-Statement als false:

<source lang="javascript">
console.log(true ? 1 : 0);
console.log(null ? 1 : 0);
console.log(null != false ? 1 : 0);
</source>

==switch-Anweisung==

Die <code>switch</code>-Anweisung vergleicht einen gegebenen Ausdruck mit einer Liste von Werten (per Identität).
Stimmt die Identität eines Wertes mit dem Ausdruck überein so wird der nachfolgend stehende Code ausgeführt.
Eine <code>break</code>-Anweisung beendet in solch einem Fall die Code-Ausführung frühzeitig.

<source lang="javascript">
var countdown = 3;
switch (countdown) {
case 3:
console.log('3');
case 2:
console.log('2');
case 1:
console.log('1');
break;
default:
console.log('0');
}
</source>

==while- und do-while-Schleifen==

Die <code>while</code>-Schleife führt ein Stück Code so lange wie aus wie ein gegebener Ausdruck den Wert <code>true</code> ergibt.
Ergibt der Ausdruck beim ersten Mal bereits nicht <code>true</code> so wird der gegebene Code nie ausgeführt.

<source lang="javascript">
var zaehler = 10;
while (zaehler--) {
console.log(zaehler);
}

while (false) {
console.log('wird nicht ausgegeben');
}
</source>

Die <code>do</code>-<code>while</code>-Schleife funktioniert genauso wie die <code>while</code>-Schleife mit der Ausnahme dass der gegebene auf jeden
Fall einmal ausgeführt wird.

<source lang="javascript">
do {
console.log('wird ausgegeben');
} while (false);
</source>

==try, catch und throw==

Die Anweisungen <code>try</code> und <code>catch</code> werden verwendet um Exceptions abzufangen und zu behandeln.

<source lang="javascript">
try {
console.log(objekt.eigenschaft.eigenschaft);
}
catch (error) {
console.log(error);
}
</source>

<code>throw</code> wird verwendet um Exceptions zu werfen. Als Argument sollte ein <code>Error</code>-Objekt übergeben werden.

<source lang="javascript">
try {
throw new Error('Custom error');
}
catch (error) {
console.log(error);
}
</source>

==for- und for-in-Schleifen==

<code>for</code>-Schleifen funktionieren ebenfalls wie in den meisten anderen Sprachen.

Der <code>for</code>-<code>in</code>-Loop wird verwendet um über Eigenschaften eines Objekts zu iterieren.

'''Anmerkung:''' <code>for in</code> sollte in der Regel mit <code>hasOwnProperty()</code> verwendet werden

<source lang="javascript">
var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
for (var eigenschaft in spieler) {
console.log(spieler[eigenschaft]);
}
</source>

=Objekte=

Jeder Wert mit einem anderen Datentypen als ein primitiver Datentyp ist ein Objekt.
JavaScript bietet eingebaute/native Objekte wie Funktionen, Arrays, reguläre Ausdrücke, Daten und generische Objekte.
Objekte sind veränderliche Sammlungen von Eigenschaften.
Eine Eigenschaft ist ein Schlüssel-Wert-Paar, wobei der Schlüssel ein String und der Wert von beliebigem Typ ist.
Objekte sind vergleichbar mit Hash-Maps und/oder Dictionaries.

Variablen speichern immer die Referenz zu Objekten, nicht die Objekte selbst.

==Erstellung von Objekten==

Die einfachste Art ein Objekt zu erstellen ist mittels des Objektliterals <code>{}</code>.

<source lang="javascript">
var person1 = {};
console.log(person1);
</source>

Eine weitere Möglichkeit ist der Objekt-Konstruktor, welche allerdings keine Vorteile gegenüber dem Literal bietet.

<source lang="javascript">
var person1 = new Object();
console.log(person1);
</source>

Objekte können bei ihrer Erstellung mit Eigenschaften und Werten vorbelegt werden.
Die Eigenschaften werden als kommaseparierte Liste angegeben.
Eigenschaft und Wert werden jeweils durch einen Doppelpunkt getrennt.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
console.log(person1);
</source>

Eigenschaften müssen in Anführungszeichen angegeben werden falls es sich um reservierte Wörter handelt
oder der Name der Eigenschaft Zeichen enthält die nicht bei Variablennamen vorkommen dürfen.

<source lang="javascript">
var bier = {'export': true, 'ist alkoholfrei': false};
console.log(bier);
</source>

Eigenschaften können sowohl mit Werten primitiver Datentypen als auch mit Objekten und Funktionen belegt werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
getName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.getName());
</source>

==Lesen von Eigenschaften==

Es gibt verschiedene Arten um auf die Eigenschaften eines Objekts zuzugreifen.

Zum einen kann die Punktnotation verwendet werden:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1.name);
</source>

Zum anderen ist es möglich eines String-Ausdruck in eckigen Klammern anzugeben:

<source lang="javascript">
var person1 = {name: 'Max Mustermann'};
console.log(person1['person1']);
</source>

In der Regel wird die erste Variante verwendet wenn der Name der Eigenschaft bekannt und statisch ist.
Die zweite Variante wird vor allem verwendet wenn der Eigenschaftsname dynamisch zur Laufzeit bestimmt wird

<source lang="javascript">
var person1 = {vorname: 'Max', nachname: 'Mustermann'};
var hatObjektEigenschaft = function(objekt, eigenschaft) {
return objekt[eigenschaft] ? true : false;
}
console.log(hatObjektEigenschaft(person1, 'vorname');
console.log(hatObjektEigenschaft(person1, 'nachname');
</source>

Ebenso wie bei der initialen Befüllung muss auch ein String-Ausdruck verwendet werden wenn es sich bei dem Namen
der Eigenschaft um ein reserviertes Schlüsselwort handelt oder aber unerlaubte Zeichen für Variablennamen enthalten sind.

<source lang="javascript">
var person1 = {'mag viele Leerzeichen': true};
console.log(person1['mag viele Leerzeichen']);
</source>

Ein Zugriff auf eine nicht definierte Eigenschaft eines Objekts liefert den Wert <code>undefined</code> zurück.

<source lang="javascript">
var person1 = {};
console.log(person1.adresse);
</source>

==Schreiben von Werten==

Analog zum Lesen können Werte von Eigenschaften
sowohl mittels Punktnotation als auch mittels String-Ausdruck verändert werden.

<source lang="javascript">
var person1 = {alter: 5};
person1.alter += 5;
person1['alter'] += 5;
console.log(person1.alter);
</source>

Beim schreibenden Zugriff auf eine nicht existierende Eigenschaft eines Objekts wird diese implizit definiert.
Dies bedeutet dass jedem Objekt dynamisch zur Laufzeit jederzeit beliebige Eigenschaften zugewiesen werden können.

<source lang="javascript">
var person1 = {};
person1.alter = 42;
person1.name = 'Rainer Zufall';
person1.hatBrille = true;
console.log(person1);
</source>

===Abfragen von Eigenschaften===

Um alle Eigenschaften eines Objekts abzufragen wird der <code>for in</code>-Loop in Kombination mit <code>hasOwnProperty()</code> verwendet.

<source lang="javascript">
var person1 = {name: 'Max Mustermann', alter: 42, hatBrille: true};
for (var eigenschaft in person1) {
if (person1.hasOwnProperty(eigenschaft)) {
console.log(eigenschaft + ': ' + person1[eigenschaft]);
}
}
</source>

==Löschen von Eigenschaften==

Eigenschaften können mittels dem <code>delete</code> Operator von Objekten entfernt werden.

<source lang="javascript">
var person1 = {hatBrille: true};
delete person1.hatBrille;
console.log(person1);
</source>

'''Anmerkung:''' Den Wert einer Eigenschaft auf <code>undefined</code> zu setzen ist nicht mit einem <code>delete</code> gleichzusetzen.
Die Zuweisung von <code>undefined</code> lässt die Eigenschaft auf dem Objekt bestehen, z.B. relevant für <code>for in</code>-Schleifen.

=Arrays=

In JavaScript sind Arrays genau genommen Objekte mir listenähnlichem Verhalten.
Im Gegensatz zu anderen Sprachen besitzen sie eine dynamische Länge.

==Erstellung==

Analog zur Objekterstellung ist der einfachste Weg ein Array zu erstellen mittels des Literals <code>[]</code>.

<source lang="javascript">
var personenregister = [];
console.log(personenregister);
</source>

Alternativ kann man ebenfalls einen Konstruktor verwenden und die <code>length</code> Eigenschaft initial definieren.

<source lang="javascript">
var personenregister = new Array(10);
console.log(personenregister.length);
</source>

Diese Eigenschaft hat allerdings keine Auswirkung auf das tatsächliche Speichervermögen eines Arrays.

Arrays können ebenso initial mit Werten vorbefüllt werden

<source lang="javascript">
var personenregister = [{}, {}, {}, {}, {}];
console.log(a);
</source>

Da JavaScript generell nicht stark typisiert ist können Arrays Werte mit unterschiedlichen Typen enthalten.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {vorname: 'John', nachname: 'Doe'}, 'fehlerhafter Datensatz];
console.log(personenregister);
</source>

Die bereits erwähnte Eigenschaft <code>length</code> beschreibt die aktuelle Anzahl an Werten im Array.

<source lang="javascript">
console.log('array has a length of ' + [1, 2, 3, 4, 5].length);
</source>

Multidimensionale Arrays können ebenfalls mit Literalen erzeugt werden.

<source lang="javascript">
var ticTacToe = [
['O', 'O', 'X'],
['O', 'X', 'X'],
['O', 'X', 'O']
];
</source>

==Lesen von Werten==

Werte von Arrays können über den numerischen Index abgefragt werden.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenregister[0]);
</source>

==Schreiben von Werten==

Ebenso können Werte direkt über den Zugriff auf den Index verändert werden.

<source lang="javascript">
var personenregister = [{vorname: 'Mäxle', nachname: 'Mustermann'}];
personenregister[0].vorname = 'Max';
console.log(personenregister);
</source>

Wird auf einen noch nicht belegten Index zugegriffen, wird das Array entsprechend erweitert.
Bisher nicht belegte Stellen werden mit dem Wert <code>undefined</code> belegt.

<source lang="javascript">
var personenreigster = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
console.log(personenreigster);
console.log(personenreigster.length);
personenreigster[5] = {name: 'Frau Holle'};
console.log(personenreigster);
console.log(personenreigster.length);
</source>

Veränderungen der Eigenschaft <code>length</code> legen die aktuelle Größe eines Arrays fest unabhängig vom Inhalt.

<source lang="javascript">
var personenregister = [];
personenregister.length = 10;
console.log(personenregister);
</source>

Um Werte ans Ende des Arrays einzufügen wird die <code>push()</code>-Funktion verwendet.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.push(person1);
console.log(personenregister);
</source>

Die <code>pop()</code>-Funktion entfernt hingegen das aktuell letzte Element eines Arrays und verringert dessen Größe um 1.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}];
var person1 = personenregister.pop();
console.log(personenregister);
console.log(person1);
</source>

Die Funktionen <code>unshift()</code> und <code>shift()</code> funktionieren wie <code>push()</code> und <code>pop()</code>, jedoch für den Anfang eines Arrays.

<source lang="javascript">
var personenregister = [];
var person1 = {name: 'Max Mustermann'};
personenregister.unshift(person1);
console.log(personenregister);
personenregister.shift();
console.log(personenregister);
</source>

Um mehrere Arrays miteinander zu kombinieren wird die <code>concat()</code>-Funktion verwendet.

<source lang="javascript">
console.log([1, 2].concat([3, 4]));
</source>

Eine komplette Referenz der Array API ist auf
[dieser](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/)
MDN-Seite zu finden.

==Enumerierung==

Um alle Elemente eines Arrays abzufragen wird der <code>for</code>-Loop verwendet.

<source lang="javascript">
var personenregister = [{name: 'Max Mustermann'}, {name: 'John Doe'}];
for (var index = 0; index < personenregister.length; index++) {
console.log(index + ': ' + personenregister[index]);
}
</source>

=Funktionen=

Funktionen sind Objekte in JavaScript. Das bedeutet sie haben Eigenschaften und können Variablen zugewiesen werden.
Eine Funktion besteht aus dem Schlüsselwort <code>function</code>, einem Namen, einer Liste von Argumenten und einem Funktionskörper.

==Ausführung und Erstellung==

Funktionen werden ausgeführt indem man sie mit ihrem Namen aufruft und eine Liste an Argumenten übergibt.

<source lang="javascript">
console.log('Hello World');
var maximum = Math.max(42, 23);
console.log(maximum);
</source>

Es gibt zwei Möglichkeiten Funktionen zu erstellen.
Zum einen kann eine sogenannte Funktionsdeklaration verwendet werden.
Diese führt dazu dass eine Variable mit demselben Namen der Funktion definiert wird welche auf die Funktion zeigt.

<source lang="javascript">
function sagHallo() {
console.log('Hallo Welt!');
}
sagHallo();
</source>

Funktionsdeklaration unterliegen dem sogenannten Hoisting.
Hoisting bedeutet dass der JavaScript-Interpreter die Funktionsdeklaration vor der
eigentlichen Ausführung des Codes innerhalb der umgebenden Funktion nach oben an den Anfang schiebt.

Das heisst man kann Code schreiben in dem eine Funktion augenscheinlich aufgerufen wird bevor sie definiert ist.

<source lang="javascript">
sagHallo();
function sagHallo() {
console.log('Hallo Welt');
}
</source>

Die zweite Möglichkeit eine Funktion zu erstellen besteht darin einen Funktionsausdruck einer Variable zuzuweisen.
Der Funktionsausdruck sieht dabei der Deklaration sehr ähnlich, außer dass in der Regel kein Funktionsname vergeben wird.

<source lang="javascript">
var sagHallo = function() {
console.log('Hallo Welt');
};
sagHallo();
</source>

Funktionsausdrücke werden besonders dann bevorzugt wenn man die negativen Effekte des Hoisting minimieren möchte.

<source lang="javascript">
sagHallo();
var sagHallo = function() {
console.log('Sag Hallo');
};
</source>

Theoretisch kann einem einer Variable zugewiesenen Funktionsausdruck auch eine Funktionsname gegeben werden.
Dieser kann von dem Funktionskörper selbst verwendet werden um die Funktion zu referenzieren, z.B. bei Rekursion.

<source lang="javascript">
var zeichneAlles = function zeichneNaechstesObjekt() {
// ...
zeichneNaechstesObjekt();
}
zeichneAlles();
</source>

'''Anmerkung:''' Persönlich hatte ich noch nie Verwendung dafür.

==Argumente==

Funktionsargumente werden definiert als kommaseparierte Liste und werden bei der Ausführung auch als solche übergeben.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
var name = kombiniere('Max', 'Mustermann');
console.log(name);
</source>

Jede Funktion in JavaScript kann mit einer beliebigen Anzahl an Argumenten aufgerufen werden.

<source lang="javascript">
var kombiniere = function(string1, string2) {
return string1 + ' ' + string2;
}
console.log(kombiniere());
console.log(kombiniere('Max'));
console.log(kombiniere('Max', 'Mustermann'));
</source>

Funktionen verfügen über eine lokale Variable namens <code>arguments</code>.
Diese ist ein Array-artiges Objekt und enthält alle Argumente die beim Aufruf übergeben wurden.

<source lang="javascript">
var zaehleArgumente = function() {
return arguments.length;
}
console.log(zaehleArgumente(1));
console.log(zaehleArgumente(1, 2, 3));
console.log(zaehleArgumente(true, null, undefined));
</source>

Außerdem besitzen Funktionen eine Eigenschaft namens <code>length</code> welche die Anzahl an erwarteten Argumenten beschreibt.

<source lang="javascript">
var addiere = function(a, b) {}
console.log(addiere.length);
</source>

==Rückgabewert==

Funktionen in JavaScript können beliebige Werte zurückgeben.
Ist kein expliziter Rückgabewert vorhanden gibt eine Funktion implizit <code>undefined</code> zurück.

<source lang="javascript">
var gibNichtsZurück = function() {
}
console.log(gibNichtsZurück());
var gibEinsZurück = function() {
return 1;
}
console.log(gibEinsZurück());
</source>

'''Anmerkung:''' Ein impliziter Rückgabewert von <code>undefined</code> ist nicht gegeben wenn eine Funktion mit <code>new</code> aufgerufen wird.

Es kann sogar zur Laufzeit entschieden werden ob ein Wert zurückgegeben wird.

<source lang="javascript">
var sindArgumenteGegeben = function() {
if (arguments.length > 0) {
return true;
}
}
console.log(sindArgumenteGegeben());
console.log(sindArgumenteGegeben(1)));
</source>

==(anonymer) Funktionsausdruck==

(Anonyme) Funktionsausdrücke sind aufgrund ihrer kompakten Schreibweise nützlich wenn es darum geht
Funktionen als Argumente zu übergeben oder als Rückgabewerte zu verwenden.

<source lang="javascript">
var erstelleFunktion = function() {
return function() {};
}

console.log(erstelleFunktion());
console.log(erstelleFunktion() == erstelleFunktion());

</source>

==Scope==

Der Scope kontrolliert die Sichtbarkeit und Lebensdauer von Variablen und Argumenten.
Anders als in anderen Sprachen besitzt JavaScript einen funktionsbasierten Scope.

<source lang="javascript">
var sucheErstesLeerzeichen = function(eingabe) {
var index = 0;
for (var index = 0; index < eingabe.length; i++) {
if (eingabe.charAt(index) == ' ') {
index =
}
}
return zaehler;
}
console.log(f2());
</source>

'''Anmerkung:''' In neueren ECMAScript-Versionen ist es möglich mithilfe des Schlüsselworts</source>

<code>let</code> Variablen mit Block-Scope zu deklarieren.

==Innere Funktionen==

Wie bereits erwähnt sind Funktionen Objekte und können auch Variablen zugewiesen werden.
Deswegen kann eine Funktion in ihrem Funktionskörper auch weitere lokale Funktion erstellen.

<source lang="javascript">
var erstelleName = function() {
var erstelleVorname = function() {
return 'Max';
};
var erstelleNachname = function() {
return 'Mustermann';
};

return erstelleVorname() + ' ' + erstelleNachname();
};
console.log(erstelleName());
</source>

==Objektfunktionen==

Funktionen können ebenso Variablen und somit auch Objekteigenschaften zugewiesen werden.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
},
};
console.log(person1);
console.log(person1.erstelleName());
</source>

Selbst nach Erstellung eines Objekts können Funktion als Eigenschaften referenziert werden.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
};

var substrahiere = function(a, b) {
return addiere(a, -b);
};

var multipliziere = function(a, b) {
return a * b;
};

var dividiere = function(a, b) {
return a / b;
};

var taschenrechner = {memory: 42, batterie: 0.8};

taschenrechner.addiere = addiere;
taschenrechner.substrahiere = substrahiere;
taschenrechner.multipliziere = multipliziere;
taschenrechner.dividiere = dividiere;

taschenrechner.teileGanzzahl = function() {
return Math.flor(dividiere(a, b));
}

console.log(taschenrechner.addiere(taschenrechner.memory, 23));
</source>

=Konstruktoren=

JavaScript ist eine objektorientierte Sprache, bestitzt aber keine Klassen im Gegensatz zu klassienbasierten Sprachen.
Eine von mehreren Möglichkeiten Objekte mit ähnlichem Verhalten und ähnlicher Struktur zu erstellen sind Konstruktorfunktionen.

==Verwendung==

Jenseits der normalen Ausführung kann '''jede''' Funktion mit dem Schlüsselwort <code>new</code> aufgerufen werden.
Dies ergibt allerdings nur dann Sinn wenn die Funktion auch als Konstruktorfunktion gedacht ist.

<source lang="javascript">
var addiere = function(a, b) {
return a + b;
}

console.log(addiere(4, 3));
console.log(new addiere(4, 3));
</source>

Ebenso ist es nicht sinnvoll als Konstruktoren gedachte Funktionen ohne das Schlüsselwort "new" aufzurufen.
Dies kann zu unerwarteten Seiteneffekten führen.

<source lang="javascript">
var Person = function() {

};
console.log(Person());
console.log(new Person());
</source>

Funktionen die als Konstruktoren dienen sollten mit einem Großbuchstaben beginnen um sie deutlich erkennbar zu machen.

<source lang="javascript">
var person = function() {

};
console.log(person()); // ?
console.log(new person()); // ?
</source>

Wenn eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wird,
wird ein automatisch erzeugtes Objekt am Ende der Funktion zurückgegeben.

<source lang="javascript">
var Person = function() {

};
var person1 = new Person();
person1.name = 'John Doe';
console.log(person1);
</source>

Wird hingegen ein Rückgabewert vom Konstruktor definiert überschreibt dieser den automatischen Rückgabewert.

<source lang="javascript">
var Person = function(vorname, nachname) {
return {
vorname: vorname,
nachname: nachname
erstelleName: function() {
return this.vorname + ' ' + this.nachname;
}
};
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Anmerkung:''' Es ist folglich nicht sinnvoll einen Wert mit primitiven Datentyp als Rückgabewert zu verwenden.

==this==

Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log(person1);
</source>

'''Achtung:'''
Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).

<source lang="javascript">
var Person = function(name) {
this.name = name;
}
Person('John Doe');
console.log(window.name);
</source>

==Sichere Verwendung==

Es ist bedingt möglich sicherzustellen dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
Dazu kann der <code>instanceof</code>-Operator genutzt werden.
Dieser überprüft ob das automatisch erzeugte Objekt mit einer bestimmten Konstruktorfunktion erzeugt wurde.

'''Anmerkung:''' Diese Vorgehensweise funktioniert unter Umständen nicht wenn Vererbung verwendet wird.

<source lang="javascript">
var Person = function(name) {
if (!(this instanceof Person)) {
throw new Error('Person is a constructor');
}
this.name = name;
}
console.log(new Person('John Doe'));
console.log(Person('Jan Doe'));
</source>

==Alternativen==

Konstruktorfunktionen sollten im Allgemeinen nur verwendet werden wenn die Funktionsweise klar ist.
Vorteile bestehen zum Beispiel in der Syntax (Verwendung von <code>new</code>) und der Möglichkeit <code>instanceof</code> zu verwenden.
Viel wichtiger ist jedoch die effiziente Wiederverwendung von wenn sie in Kombination mit Prototypes verwendet werden.

Aufgrund der Flexibilität von JavaScript gibt es aber auch viele andere Möglichkeiten gleichartige Objekte zu erzeugen.

<source lang="javascript">
var erstellePerson = function(name, alter) {
return {name: name, alter:};
}
var person1 = erstellePerson('Max Mustermann');
console.log(person1);
</source>

==Typüberprüfung==

===typeof-Operator===

JavaScript bietet nativ verschiedene Möglichkeiten um Datentypen von Werten zu bestimmen.
Zum einen gibt es den <code>typeof</code>-Operator, ähnlich wie in anderen Sprachen (z.B. C).

<source lang="javascript">
console.log('typeof 1 ist ' + typeof 1);
console.log('typeof "a" ist ' + typeof 'a');
console.log('typeof true ist ' + typeof true);
console.log('typeof null ist ' + typeof null);
console.log('typeof undefined ist ' + typeof undefined);
console.log('typeof function() {} ist ' + typeof function() {});
</source>

Abseits von primitiven Datentypen, einfachen Objekten und Funktionen funktioniert der Operator allerdings nicht wie erwartet.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};

var person1 = new Person('John Doe');
console.log('typeof person1 ist ' + typeof person1);

var person2 = null;
console.log('typeof person2 ist ' + typeof person2);

var zahlen = [1, 2, 3, 4, 5];
console.log('typeof zahlen ist ' + typeof zahlen);
</source>

Selbst bei Wrappern für primitive Datentypen liefert der <code>typeof</code>-Operator keine nützlichen Resultate.

<source lang="javascript">
var wahr = new Boolean(true);
console.log('typeof wahr ist ' + typeof wahr);
</source>

===Object.prototype.toString()===

Eine Alternative zu dem <code>typeof</code>-Operator ist die <code>toString()</code>-Methode auf dem <code>Object</code>-Prototypen.
Diese kann auf jedes beliebige Objekt angewendet werden und liefert bessere Resultate für native Typen.

<source lang="javascript">
var getType = function(object) {
return Object.prototype.toString.call(object);
};

console.log('getType() von [] ist ' + getType([]));
console.log('getType() von {} ist ' + getType({}));
</source>

Für eigene Klassen bleibt der Rückgabewert allerdings <code>Object</code> und damit relativ unspezifisch.

<source lang="javascript">
var Person = function(name) {
this.name = name;
};
var person1 = new Person('John Doe');
console.log('getType() von person1 ist ' + getType(person1));
</source>

=this=

Das Schlüsselwort <code>this</code> hat JavaScript unterschiedliche Bedeutungen je nach Kontext.
Des Weiteren kann es mithilfe von ein paar nativen Funktionen manipuliert werden.

==Unterschiedliche Kontexte==

1. Wenn eine Funktion über eine Variable aufgerufen wird und somit
nicht als Eigenschaft eines Objekts dann zeigt <code>this</code> auf das globale Objekt.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};
</source>

Dabei spielt es keine Rolle ob die Funktion global ist oder sich innerhalb einer anderen Funktion befindet.

<source lang="javascript">
var tuEtwas = function() {
var loggeThis = function() {
console.log(this);
};
};

tuEtwas();
</source>

2. Wenn eine Funktion als Eigenschaft eines Objekts aufgerufen wird zeigt <code>this</code> auf das Objekt.

<source lang="javascript">
var person1 = {
vorname: 'Max',
nachname: 'Mustermann',
erstelleName: function() {
return this.vorname + ' ' + this.nachname
}
}

console.log(person1.erstellName());
</source>

Wichtig ist zu beachten wie eine Funktion zum Zeitpunkt des Aufrufens referenziert wird.

Da Funktionen freie Objekte sind können sie gleichzeitig als Objekteigenschaften und auch Variablen verfügbar sein.

<source lang="javascript">
var loggeThis = function() {
console.log(this);
};

person1 = {
vorname: 'Max',
nachname: 'Mustermann',
loggePerson: loggeThis
}

person1.loggePerson();
</source>

3. Wenn eine Funktion als Konstruktor mit <code>new</code> aufgerufen wird zeigt <code>this</code> auf das automatisch erstellte Objekt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(1);
}
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.erstelleInitialen());
</source>

==Manipulation von this==

Mithilfe von zwei Funktionen kann kontrolliert werden auf was <code>this</code> innerhalb einer aufgerufenen Funktion verweist.

Die Funktion <code>apply()</code> ist auf jeder Funktion verfügbar, führt diese aus und akzeptiert zwei Argumente.
Das erste Argument ist das Objekt auf welches <code>this</code> bei der Ausführung zeigt.
Das zweite Argument ist ein Array welches als Liste von Argumenten für den Funkionsaufruf verwendet wird.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(mitPunkten) {
var i1 = this.vorname.charAt(0);
var i2 = this.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen.apply(person2, [true]);
console.log(initialen);
</source>

Die Funktion <code>call()</code> ist sehr ähnlich zu <code>apply()</code>, akzeptiert allerdings beliebig viele Argumente.

Das erste Argument ist ebenfalls das Objekt auf welches <code>this</code> bei der Funktionsausführung zeigt.
Die restlichen Argumente sind wiederum die Argumente welche an die ausführende Funktionen übergeben werden.

In der Regel ist die Verwendung von <code>apply()</code> flexibler, da sie mit einem Array arbeitet.

'''Anmerkung:''' Im Normalfall ist eine Manipulation von <code>this</code> nicht notwendig und kann elegant umgangen werden.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
}

var erstelleInitialen = function(person, mitPunkten) {
var i1 = person.vorname.charAt(0);
var i2 = person.nachname.charAt(0);
if (mitPunkten) {
return i1 + '.' + i2 + '.';
}
return i1 + i2;
}

var person2 = new Person('John', 'Doe');
var initialen = erstelleInitialen(person2, true);
console.log(initialen);
</source>

==Sichere Verwendung in Konstruktorfunktionen==

Einer der häufigsten Fehler in JavaScript ist die falsche Verwendung von <code>this</code> innerhalb von Konstruktorfunktionen.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
this.erstelleNamen = function() {
return this.vorname + ' ' + this.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

Dieses Problem kann leicht umgangen werden indem man eine Hilfsvariable erzeugt und ihr den Wert von <code>this</code> zuweist.
Auf diese Weise kann man in immer das aktuell erzeugte Objekt referenzieren unabhängig von dem aktuellen Scope.

<source lang="javascript">
var Person = function(vorname, nachname) {
var self = this;
self.vorname = vorname;
self.nachname = nachname;
self.erstelleNamen = function() {
return self.vorname + ' ' + self.nachname;
};
};

var loggeErgebnisVonFunktion = function(funktion) {
console.log(funktion());
};

var person1 = new Person('Max', 'Mustermann');
loggeErgebnisVonFunktion(person1.erstelleNamen);
</source>

=Prototypen=

Mithilfe von Prototypen ist es möglich in JavaScript Vererbungshierarchien abzubilden und Wiederverwendung zu erreichen.
Anders als bei klassenbasierten Sprachen spricht man nicht von Instanzen und Klassen, sondern von Objekten und Prototypen.
Jedes Objekt kann auf einen Prototypen verweisen, muss dies aber nicht. Prototypen selbst sind ebenfalls Objekte.

==Zugriff auf Prototypen==

Jede erstellte Funktion erhält automatisch eine Eigenschaft namens "prototype", welches auf den Prototypen verweist.
Dieser erhält außerdem eine Eigenschaft "constructor", welche wiederum auf die Konstruktorfunktion selbst verweist.

<source lang="javascript">
var Person = function() {};
var prototyp = Person.prototype;
console.log(prototyp.constructor == Person);
</source>

Jedes Mal wenn ein Objekt mit einem Konstruktor erzeugt wird erhält es eine versteckte Referenz auf diesen Prototypen.
In älteren ECMAScript-Versionen gibt es keine '''standardisierte''' Weise um auf den Prototypen eines Objekts zuzugreifen.
In ECMAScript 5 wurde dafür die Funktion <code>Object.getPrototypeOf()</code> eingeführt.

<source lang="javascript">
var Person = function() {};
var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Prototypen erweitern==

Da es sich beim Prototypen eines Konstruktors um eine Referenz auf ein Objekt handelt kann dies beliebig modifiziert werden.

<source lang="javascript">
var Person = function() {};
Person.prototype.erstelleInitialen = function() {
return this.vorname + this.nachname;
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));
</source>

Es ist auch möglich die Referenz selbst zu verändern. Eine solche Änderung betrifft aber '''nicht''' bereits erzeugte Objekte.

<source lang="javascript">
var Person = function() {};
Person.prototype = {
erstelleInitialen: function() {
return this.vorname + this.nachname;
};
};

var person = new Person();
console.log('Prototyp von person ist ' + Object.getPrototypeOf(person));

Person.prototype = {};
console.log(Object.getPrototypeOf(person) == Person.prototype);
</source>

==Die Prototype-Chain==

Beim Zugriff auf eine Eigenschaft eines Objekts wird zunächst überprüft ob das Objekt selbst diese Eigenschaft bestizt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};
var person = new Person('John');
consol.log(person.vorname);
</source>

Ist dies nicht der Fall so wird überprüft ob der Prototyp des Objekts diese Eigenschaft besitzt.
Besitzt der Prototyp eine passende Eigenschaft wird diese verwendet, so als ob sie zum Objekt selbst gehört.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

Person.prototpye.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

Besitzt der Prototyp selbst auch nicht die Eigenschaft wird getestet ob das wiederum bei seinem Prototypen der Fall ist.
Dies wird so lange fortgesetzt bis die Eigenschaft gefunden wird oder bis es keinen Prototypen mehr in der Kette gibt.

<source lang="javascript">
var Person = function(vorname, nachname) {
this.vorname = vorname;
this.nachname = nachname;
};

var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
prototypVomPrototyp.erstelleInitialen = function() {
return this.vorname.charAt(0) + this.nachname.charAt(0);
};

var person1 = new Person('Max', 'Mustermann');
console.log('Initialen von person1 sind ' + person1.erstelleInitialen());
</source>

'''Anmerkung:''' Der Prototyp einer selbst erstellten Funktion ist ein automatisch erzeugtes Objekt.

Dementsprechend ist der Prototyp des Prototypen wiederum der der <code>Object</code>-Konstruktorfunktion.

<source lang="javascript">
var Person = function() {}
var prototypVomPrototyp = Object.getPrototypeOf(Person.prototype);
console.log(prototypVomPrototyp == Object.prototype);
</source>

==Wiederverwendung==

Wenn man mit sehr vielen Objekten arbeitet und auf den Speicherverbrauch achten muss können Prototypen sinnvoll sein.
Verwendet man einen Konstruktor der jedem erzeugten Objekt eine Funktion zuweist so ist dies jedes Mal eine neue Funktion.

<source lang="javascript">
var anzahlErstellterFunktionen = 0;
var erstelleHalloWeltFunktion = function() {
anzahlErstellterFunktionen++;
return function() {
console.log('Hallo Welt');
};
};

var Person = function() {
this.sagHallo = erstelleHalloWeltFunktion();
};

var personen = [];
for (var i = 0; i < 1000; i++) {
personen.push(new Person());
};

console.log('anzahlErstellterFunktionen ist ' + anzahlErstellterFunktionen);
</source>

Weist man jedoch anstelle der Objekte dem Prototypen eine Funktion zu so wird nur eine erzeugt und diese wiederverwendet.

<source lang="javascript">
var Person = function() {};
Person.prototype.sagHallo = function() {
console.log('Hallo Welt');
};

var person1 = new Person();
var person2 = new Person();
console.log('Es ist immer die gleiche Funktion: ' + (person1.sagHallo == person2.sagHallo == Person.prototype.sagHallo));
</source>

==Prototypische Vererbung==

Wie bereits erwähnt ist es mit Prototypen möglich Wiederverwendung und ähnliches Verhalten von Objekten zu erreichen.
Verwendet man als Prototypen ein Objekt welches auch mit einem Konstruktor erstellt wurde erhält man prototypische Vererbung.

<source lang="javascript">
var Person = function() {
this.sagHallo = function() {
console.log('Hallo Welt');
};
};

var Student = function() {
this.schreibHtml = function() {
console.log('<html><head></head><body></body></html>');
};
};
Student.prototype = new Person();

var student1 = new Student();
console.log(student1.sagHallo());
console.log(student1.schreibHtml());
</source>

==Prototypen auf nativen Objekten==

Jedes Objekt in JavaScript wird mithilfe einer Konstruktorfunktion erzeugt welche einen Prototypen besitzt.
Demzufolge ist es möglich das Verhalten von nativen Objekten zu verändern indem man auf den Prototypen modifiziert.

<source lang="javascript">
Object.prototype.sagMirWasDuBist = function() {
console.log(typeof this);
}

var person1 = {};
person1.sagMirWasDuBist();

var funktion = function() {};
funktion.sagMirWasDuBist();
</source>

'''Anmerkung:''' Diese Vorgehensweise sollte vermieden werden und wird aus den folgenden Gründen als Anti-Pattern eingestuft:

* Eingeführte Funktionen können in Konflikt kommen mit neu eingeführten ECMAScript-Funktionen
* In größeren Projekten können leicht Konflikte entstehen bei gleichen/doppelt belegten Funktionsnamen
* Es entsteht der Eindruck dass es sich um eine echte native JavaScript-Funktion handelt

==Verwendung von Vererbung==

Obwohl es in JavaScript die Möglichkeit gibt Vererbungshierarchien abzubilden wird dies oft in der Praxis nicht gemacht.
Stattdessen folgen viel dem Paradigma [http://en.wikipedia.org/wiki/Composition_over_inheritance Composition over Inheritance].

=Kapselung=

Kapselung ermöglicht Zugriffe auf Daten und Informationen zu steuern und auch zu verhindern.

==Closures==

In JavaScript kann man, abgesehen von neueren ECMAScript-Standards, nur mithilfe von Closures echte Kapselung erreichen.
Eine Closure wird immer dann geformt wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
Dadurch wird der Kontext in dem die Funktion definiert wurde so lange am Leben erhalten wie die Funktion selbst besteht.

<source lang="javascript">
var erzeugeLogFunktion = function(prefix) {
var logge = function(message) {
console.log(prefix + message);
};
return logge;
};

var logge = erzeugeLogFunktion('Nachricht:');
logge('Hello World');
</source>

Mithilfe von Closures innerhalb von Konstruktoren kann man in Funktionen auf Variablen die von außen nicht zugänglich sind.

<source lang="javascript">
var Person = function(vorname, nachname) {
var name = vorname + ' ' + nachname;
this.hatNamen = function(zuPruefenderName) {
return name === zuPruefenderName;
};
}

var person1 = new Person('Max', 'Mustermann');
console.log(person1.hatNamen('Martina Mustermann'));
</source>

==Pseudo-private Eigenschaften==

Closures können relativ schwer verständlich sein und erfordern einen sicheren Umgang mit der Sprache JavaScript.
Eine einfache Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.

<source lang="javascript">
var Person = function(vorname, nachname) {
this._vorname = vorname;
this._nachname = nachname;
this._name = this._vorname + ' ' + this._nachname;
this.hatNamen = function(zuPruefenderName) {
return this._name === zuPruefenderName;
};
}
</source>

Benutzer:Lawrence

2015-09-18T09:59:49Z

Lawrence: Die Seite wurde neu angelegt: „= Alexander Lawrence = Lehrbeauftragter für Multimedia an der Hochschule Augsburg Fachgebiete: * Agile Softwareentwick…“

= Alexander Lawrence =

Lehrbeauftragter für [[Multimedia]] an der [[Wikipedia:Hochschule Augsburg|Hochschule Augsburg]]

Fachgebiete:
* Agile Softwareentwicklung
* Webentwicklung
* Web Frontend
* JavaScript (Backend und Frontend)
* Design Patterns und Architekturen wie MVC und CQRS
* Domain Driven Design
* Event Sourcing

[[en:User:Lawrence]]

Prüfung:MMProg:WiSe2014:Teil 2

2015-01-16T10:45:31Z

Lawrence: /* Aufgabe 2 */

=MMProg Prüfungspraktikum WiSe 2014/2015=

==Teil 2==

'''Anmerkung:''' Im Prüfungspraktikum werden Ihnen Skripte zur Verfügung gestellt für den Checkout sowie für den Commit.
Bitte versuchen Sie '''nicht''' selbst einen Checkout zu machen oder direkt über WebStorm zu committen.

===Vorbereitung===

Um diese Aufgabe zu bearbeiten müssen Sie alle Schritte ausgeführt haben welche in der Vorbereitung von Teil 1 beschrieben sind.

===Spielregeln===

In diesem Teil des Prüfungspraktikums geht es darum ein teilweise implementiertes Spiel fertigzustellen.

Die Spielregeln sind wie folgt:

* Anfangs erscheint ein Ziel in der Mitte des Spielfelds (blau)
* Der Spieler (grün) muss sich mithilfe der Cursor-Tasten zu diesem Ziel begeben um einen Punkt zu erhalten
* Der Computergegner (rot) bewegt sich ebenfalls zu dem Ziel; beim Erreichen verliert der Spieler einen Punkt
* Wurde das Ziel von einem der beiden Mitspieler erreicht wird die Position des Ziels zufällig verändert

===Aufgabe 1===

Bearbeiten Sie diese Einzelaufgabe, indem Sie ausschliesslich die Datei "controller/PlayerController.js" erweitern.
Die Komponente "PlayerController" soll Tastatureingaben verarbeiten und daraufhin das Spielerobjekt entsprechend bewegen.

Implementieren Sie dazu folgendes Verahlten:

* Beim Drücken der linken Cursortaste erhält der Spieler eine horizontale Geschwindigkeit von -1
* Beim Drücken der rechten Cursortaste erhält der Spieler eine horizontale Geschwindigkeit von 1
* Beim Drücken der oberen Cursortaste erhält der Spieler eine vertikale Geschwindigkeit von -1
* Beim Drücken der unteren Cursortaste erhält der Spieler eine vertikale Geschwindigkeit von 1
* Beim Loslassen der linken oder rechten Cursortaste erhält der Spieler eine horizontale Geschwindigkeit von 0
* Beim Loslassen der oberen oder unteren Cursortaste erhält der Spieler eine vertikale Geschwindigkeit von 0
* Das Browser-Standardverhalten beim Drücken und Loslassen von Tasten soll unterdrückt werden

Wenn Sie anschließend den Browser öffnen und die Datei "index.html" laden sollten Sie den Spieler frei bewegen können.

===Aufgabe 2===

Bearbeiten Sie diese Einzelaufgabe, indem Sie ausschliesslich die Datei "model/Enemy.js" erweitern.
Die Komponente "Enemy" simuliert den Computergegner und soll sich stets automatisch auf das "Goal"-Objekt zu bewegen.

Implementieren Sie dazu folgendes Verhalten nacheinander in der Funktion "self._aimAtGoal()":

* Der Gegner erhält zunächst eine horizontale und vertikale Geschwindigkeit von 0
* Besitzt der Gegner kein ausgewähltes Ziel wird die Funktion sofort wieder beendet
* Es werden die Mittelpunkte (x, y) vom Gegner selbst und dem ausgewählten Ziel bestimmt
* Mithilfe der Mittelpunkte werden die x- und y-Entfernung vom Gegner zum ausgewählten Ziel bestimmt
* Falls der Betrag der x-Entfernung größer ist als der Betrag der y-Entfernung
** und falls die x-Entfernung größer ist als null, erhält der Gegner eine horizontale Geschwindigkeit von -0.85
** und falls die x-Entfernung kleiner ist als null, erhält der Gegner eine horizontale Geschwindigkeit von 0.85
* Falls der Betrag der y-Entfernung größer ist als der Betrag der x-Entfernung
** und falls die y-Entfernung größer ist als null, erhält der Gegner eine vertikale Geschwindigkeit von -0.85
** und falls die y-Entfernung kleiner ist als null, erhält der Gegner eine vertikale Geschwindigkeit von 0.85

Wenn Sie anschließend den Browser öffnen und die Datei "index.html" neu laden sollte der Gegner stets das Ziel verfolgen.

'''Tipp:''' Nutzen Sie <code>Math.abs()</code> um den Betrag einer Zahl zu berechnen.

===Abgabe===

Schließen Sie zunächst WebStorm und alle weiteren Programme die Sie geöffnet haben.
Öffnen Sie dann erneut das Terminal und führen Sie folgenden Befehl aus: "sh commit.sh".
Geben Sie Ihr RZ-Passwort ein falls Sie dazu aufgefordert werden.
Öffnen Sie abschließend folgende URL im Browser um zu überprüfen ob der Commit erfolgreich durchgeführt wurde:
https://praktikum.multimedia.hs-augsburg.de/svn/RZ-Kennung/pruefung_20150119 (ersetzen Sie RZ-Kennung durch Ihre eigene)

'''Anmerkung:''' Ihr Prüfung wurde nur abgegeben falls Ihre Dateien erfolgreich committed wurden!

Prüfung:MMProg:WiSe2014:Teil 1

2015-01-16T10:44:49Z

Lawrence: /* Aufgabe 6 */

=MMProg Prüfungspraktikum WiSe 2014/2015=

==Teil 1==

'''Anmerkung:''' Im Prüfungspraktikum werden Ihnen Skripte zur Verfügung gestellt für den Checkout sowie für den Commit.
Bitte versuchen Sie '''nicht''' selbst einen Checkout zu machen oder direkt über WebStorm zu committen.

===Vorbereitung===

Öffnen Sie das Terminal und führen Sie folgenden Befehl aus: "./setupenv.sh RZ-Kennung" (mit Ihrer eigenen RZ-Kennung).
Geben Sie Ihr RZ-Passwort ein falls Sie dazu aufgefordert werden.
Falls Sie außerdem noch gefragt werden ob das Passwort gespeichert werden soll, verweigern Sie dies mit "nein".

Das Skript "setupenv.sh" erledigt die folgenden Aufgaben:
* Checkout von Ihrem eigenen Repository in das Verzeichnis "~/Arbeitsfläche/repository"
* Anlegen des Verzeichnis "pruefung_20150119" innerhalb von Ihrem "repository"-Verzeichnis
* Befüllen des neuen Verzeichnis mit allen notwendigen Prüfungsdateien
* Ausführen von "svn add" auf allen Prüfungsdateien damit sie später committed werden

Öffnen Sie im Anschluss WebStorm vom Desktop aus und wählen Sie Ihr Repository-Verzeichnis als Projekt.
Navigieren Sie dann innerhalb von WebStorm zu dem Prüfungsordner "pruefung_20150119".

Bearbeiten Sie die nachfolgenden Aufgaben, indem Sie ausschliesslich die Datei "index.js" entsprechend modifizieren.
Fügen Sie den Code für die einzelnen Aufgaben der Übersichtlichkeit halber immer nach den zugehörigen Kommentaren ein.

Nutzen Sie die Funktion <code>log()</code> der bereits erzeugten Logger-Instanz namens "logger" um Ihre Nachrichten auszugeben.
Öffnen Sie zu gegebenen Zeitpunkten die Datei "index.html" im Browser um die Korrektheit Ihres Codes zu überprüfen.

===Aufgabe 1===

Geben Sie den String "MMProg Prüfungspraktikum WiSe 2014/2015" (ohne Anführungszeichen) aus.

===Aufgabe 2===

Erzeugen Sie die Variablen "firstName" und "lastName" und weisen Sie ihnen Ihren eigenen Vornamen bzw. Nachnamen als Wert zu.
Geben Sie dann die Variablen durch ein Leerzeichen getrennt und vorangestellt durch die Zeichenkette "Name: " aus.

Beispielausgabe: "Name: Max Mustermann"

===Aufgabe 3===

Erzeugen Sie die Variable "birthday" und weisen Sie dieser ein neues, leeres Objekt zu (mittels Konstruktor oder Objektliteral).
Erzeugen Sie auf dem Objekt die Eigenschaften "day", "month" und "year" und befüllen Sie diese mit den jeweiligen Werten Ihres Geburtsdatums.
Geben Sie dann die Variablen aus, jeweils durch einen Punkt getrennt und vorangestellt durch die Zeichenkette "Geburtsdatum: ".

Beispielausgabe: "Geburtsdatum: 01.02.1999"

===Aufgabe 4===

Erzeugen Sie die Variable "skills" und weisen Sie dieser ein neues, leeres Array zu (mittels Konstruktor oder Array-Literal).
Fügen Sie dann nacheinander drei Strings in das Array ein, welche jeweils eine Fähigkeit von Ihnen beschreiben.
Falls Ihnen keine Fähigkeiten einfallen, die Sie nennen möchten, so verwenden Sie einfach drei aus der folgenden Liste:
Design, Konzeption, Planung, Kostenkalkulation, Implementierung, Architektur, Recherche.

Geben Sie zunächst den String "Skills:" aus.
Nutzen Sie dann eine <code>for</code>-Schleife um jedes einzelne Element aus dem Array vorangestellt durch den String "* " auszugeben.

Beispielausgabe:

"Skills:
* Planung
* Kostenkalkulation
* Recherche"

===Aufgabe 5===

Erzeugen Sie eine Funktion namens "divideInteger" welche eine ganzzahlige Teilung für zwei beliebige Zahlen ausführen soll.
Die Funktion akzeptiert die beiden Argumente "number" und "factor" und teilt "number" ganzzahlig durch "factor".

Beispiele für ganzzahlige Teilungen:
* 5 / 2 = 2
* 7 / 3 = 2
* 3 / 2 = 1

Rufen Sie dann die Funktion "divideInteger" mit folgenden Wertkombinationen auf und geben Sie die Ergebnisse aus:
* number: 5, factor: 2
* number: 4, factor: 2
* number: 1, factor: 2

===Aufgabe 6===

In dieser Aufgabe sollen zwei Studenten und deren Semesterarbeit als stark vereinfachtes Objektmodell abgebildet werden.

Erzeugen Sie die Objekte "studentObject1" und "studentObject2" mit den Eigenschaften "firstName", "lastName" und "matriculationNumber".

Das erste Objekt erhält folgende Werte:
* "firstName" => "Max"
* "lastName" => "Mustermann"
* "matriculationNumber" => 1234

Das zweite Objekt erhält folgende Werte:
* "firstName" => "Moritz"
* "lastName" => "Mustermann"
* "matriculationNumber" => 4321

Beide Objekte erhalten die Funktion "getDescription", welche die Kombination aus Vornamen, Nachnamen und Immatrikulationsnummer zurückgibt.
Der Rückgabe-String soll bestehen aus der Zeichenkette "Name: ", Vorname und Nachname durch ein Leerzeichen getrennt,
der Zeichenkette ", Matrikelnummer: " und der Matrikelnummer selbst, sodass eine schön formattierte Ausgabe entsteht.
Rufen Sie die Funktion "getDescription()" beider Objekte auf und geben Sie das Ergebnis jeweils mit dem Logger aus.

Erzeugen Sie dann das Objekt "projectObject" welches die beiden Eigenschaften "title" und "authors" erhält.
"title" wird mit dem Wert "Flappy Bird" belegt, "authors" mit einem Array welches die beiden zuvor erstellten Studenten-Objekte enthält.

Das Projektobjekt erhält ebenfalls eine Funktion "getDescription", welche folgende Informationen als String zurückgeben soll:
* Titel des Projekts, vorangestellt durch den String "Titel: "
* Den Rückgabewert der Funktion "getDescription" von jedem am Projekt beteiligten Autor

Dabei sollte der Titel des Projekts sowie jeder einzelne Autor jeweils auf einer einzelnen Zeile ausgegeben werden.

'''Tipp:''' Um eine neue Zeile zu erzeugen können Sie ein <br>-Tag am Ende eines Strings einfügen ("<br>").

Rufen Sie die Funktion "getDescription" des Projektobjekts auf und geben Sie das Ergebnis mit dem Logger aus.

===Aufgabe 7===

In dieser Aufgabe sollen Sie den oben beschriebenen Sachverhalt nun mithilfe von Konstruktorfunktionen abbilden.
Dabei gilt es eine Konstruktorfunktion namens "Student" und eine namens "StudentProject" zu implementieren.
"Student" akzeptiert die Argumente "firstName", "lastName" und "matriculationNumber" und weist diese der jeweiligen Instanz zu.
"StudentProject" akzeptiert die beiden Argumente "title" und "authors" und weist diese ebenso der jeweiligen Instanz zu.

Beide Konstruktoren weisen den erzeugten Objekten auch eine Funktion "getDescription" zu, welche sich wie oben beschrieben verhält.

Erzeugen Sie dann mittels dem "Student"-Konstruktor die beiden Objekte "studentInstance1" und "studentInstance2".
"studentInstance1" erhält die gleichen Werte wie "studentObject1", "studentInstance2" die gleichen wie "studentObject1".

Erzeugen Sie mittels dem "StudentProject"-Konstruktor das Objekt "projectInstance" als Pendant zu "projectObject".

Rufen Sie die Funktion "getDescription" ebenso auf allen erzeugten Instanzen auf und geben Sie die Rückgabewerte mit dem Logger aus.

===Aufgabe 8===

Erzeugen Sie ein "div"-DOM-Element und speichern Sie dieses in einer Variable namens "timestamp".
Weisen Sie dem inneren HTML des DOM-Elements als Wert die Kombination aus dem String "Aktuelle Zeit: " und dem aktuellen Datum zu.
Fügen Sie dann das erzeugte DOM-Element am Ende des "body"-DOM-Elements des aktuellen Dokuments ein.

Wenn Sie die Seite nun im Browser betrachten sollte am Ende des Dokuments jeweils die aktuelle Zeit vom Seitenaufruf stehen.

===Aufgabe 9===

Erzeugen Sie die Funktion "updateTimestamp" welche ebenso dem inneren HTML des zuvor erstellen "div"-DOM-Elements
die Kombination aus dem String "Aktuelle Zeit: " und dem aktuellen Datum zuweist.

Erzeugen Sie dann einen *geeigneten* und sich wiederholenden Timer welcher ungefähr jede Sekunde die Funktion "updateTimestamp" aufruft.
Begründen Sie in einem Satz in einem Code-Kommentar Ihre Entscheidung bezgülich des gewählten Timers.

Wenn Sie die Seite nun im Browser betrachten sollte sich die aktuelle Zeit ungefähr jede Sekunde aktualisieren.

===Aufgabe 10===

Erzeugen Sie einen globalen Event-Listener für das "click"-Event auf dem <code>document</code>-Objekt.
In der Callback-Funktion soll überprüft werden ob das jeweilige Ereignisziel als "class"-Attribut den Wert "message" besitzt.
Ist dies der Fall, so soll der CSS-Eigenschaft "color" vom Ereignisziel der Wert "red" zugewiesen werden.

Wenn Sie nun auf einzelne Ausgaben klicken sollten diese rot eingefärbt werden.