Lerne X in Y Minuten

// Kommentare werden wie in C gesetzt: Einzeilige Kommentare starten mit zwei
// Slashes
/* während mehrzeilige Kommentare mit einem
Slash und einem Stern anfangen und enden */

// Statements können mit einem Semikolon beendet werden
machWas();

// ...müssen sie aber nicht, weil Semikola automatisch eingefügt werden, wenn
// eine neue Zeile beginnt, abgesehen von einigen Ausnahmen.
machWas()

// Obwohl wir uns für den Anfang nicht um diese Ausnahmen kümmern müssen ist
// es besser die Semikola immer zu setzen.

///////////////////////////////////
// 1. Nummern, Strings und Operationen

// JavaScript hat einen Nummern-Typ (64-bit IEEE 754 double).
3; // = 3
1.5; // = 1.5

// Beinahe alle grundlegenden arithmetischen Operationen arbeiten wie erwartet.
1 + 1; // = 2
0.1 + 0.2; // = 0.30000000000000004
10 * 2; // = 20
35 / 5; // = 7

// Division funktioniert auch mit einem Ergebnis nach dem Komma.
5 / 2; // = 2.5

// Bit-weise Operationen sind auch möglich; wenn eine Bit-weise Operation
// ausgeführt wird, wird die Fließkomma-Zahl in einen 32-bit Integer (mit
// Vorzeichen) umgewandelt.
1 << 2; // = 4

// Die Rangfolge der Operationen kann mit Klammern erzwungen werden.
(1 + 3) * 2; // = 8

// Es gibt drei spezielle, nicht-reale Nummern-Werte:
Infinity; // Ergebnis von z. B. 1 / 0
-Infinity; // Ergebnis von z. B. -1 / 0
NaN; // Ergebnis von z. B. 0 / 0

// Es gibt auch einen Boolean-Typ (für Wahrheitswerte).
true;
false;

// Strings werden mit ' oder " erzeugt.
'abc';
"Hello, world";

// Für die Negation wird das ! benutzt.
!true; // = false
!false; // = true

// Gleichheit wird mit === geprüft.
1 === 1; // = true
2 === 1; // = false

// Ungleichheit wird mit !== überprüft.
1 !== 1; // = false
2 !== 1; // = true

// Andere Vergleichsoperatoren sind
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true

// Strings können mit + verbunden
"Hello " + "world!"; // = "Hello world!"

// und mit < und > verglichen werden.
"a" < "b"; // = true

// Für den Vergleich von Werten mit "==" wird eine Typumwandlung erzwungen...
"5" == 5; // = true

// ...solange man nicht === verwendet.
"5" === 5; // = false

// Auf einzelne Buchstaben innerhalb eines Strings kann mit der Methode
// 'charAt' zugegriffen werden
"This is a string".charAt(0);  // = "T"

// Die Methode 'substring' gibt Teilbereiche eines Strings zurück
"Hello world".substring(0, 5); // = "Hello"

// 'length' ist eine Eigenschaft und wird folglich ohne '()' benutzt
"Hello".length; // = 5

// Es gibt außerdem die Werte 'null' und 'undefined'
null; // wird verwendet um einen vorsätzlich gewählten 'Nicht'-Wert anzuzeigen
undefined; // wird verwendet um anzuzeigen, dass der Wert (aktuell) nicht
           // verfügbar ist (obwohl genau genommen undefined selbst einen Wert
           // darstellt)

// false, null, undefined, NaN, 0 und "" sind 'falsy', d. h. alles andere ist
// wahr. Man beachte, dass 0 falsch und "0" wahr ist, obwohl 0 == "0".

///////////////////////////////////
// 2. Variablen, Arrays und Objekte

// Variablen werden mit dem Schlüsselwort 'var' und einem frei wählbaren
// Bezeichner deklariert. JavaScript ist dynamisch typisiert, so dass man einer
// Variable keinen Typ zuweisen muss. Die Zuweisung verwendet ein einfaches =.
var einWert = 5;

 // Wenn man das Schlüsselwort 'var' weglässt, bekommt man keinen Fehler
einAndererWert = 10;

// ...aber die Variable wird im globalen Kontext erzeugt, nicht in dem Kontext,
// in dem sie erzeugt wurde.

// Variablen die erzeugt wurden ohne ihnen einen Wert zuzuweisen, erhalten den
// Wert 'undefined'.
var einDritterWert; // = undefined

// Es existiert eine Kurzform, um mathematische Operationen mit Variablen
// auszuführen:
einWert += 5; // äquivalent zu einWert = einWert + 5; einWert ist nun also 10
einWert *= 10; // einWert ist nach dieser Operation 100

// Und es existiert eine weitere, sogar noch kürzere Form, um 1 zu addieren
// oder zu subtrahieren
einWert++; // nun ist einWert 101
einWert--; // wieder 100

// Arrays sind geordnete Listen von Werten irgendeines Typs
var myArray = ["Hello", 45, true];

// Auf einzelne Elemente eines Arrays kann zugegriffen werden, in dem der Index
// in eckigen Klammern hinter das Array geschrieben werden. Die Indexierung
// beginnt bei 0.
myArray[1]; // = 45

// Arrays haben keine feste Länge
myArray.push("World");
myArray.length; // = 4

// und sind veränderlich
myArray[3] = "Hello";

// Die Objekte in JavaScript entsprechen 'dictionaries' oder 'maps' in anderen
// Sprachen: es handelt sich um ungeordnete Schlüssel-Wert-Paare.
var myObj = { key1: "Hello", key2: "World" };

// Schlüssel sind Strings, aber es werden keine Anführungszeichen benötigt,
// sofern es sich um reguläre JavaScript-Bezeichner handelt. Werte können von
// jedem Typ sein.
var myObj = { myKey: "myValue", "my other key": 4 };

// Auf Attribute von Objekten kann ebenfalls mit eckigen Klammern zugegriffen
// werden,
myObj["my other key"]; // = 4

// ... oder in dem man die Punkt-Notation verwendet, vorausgesetzt es handelt
// sich bei dem Schlüssel um einen validen Bezeichner.
myObj.myKey; // = "myValue"

// Objekte sind veränderlich, Werte können verändert und neue Schlüssel
// hinzugefügt werden.
myObj.myThirdKey = true;

// Der Zugriff auf einen noch nicht definierten Schlüssel, liefert ein
// undefined.
myObj.myFourthKey; // = undefined

///////////////////////////////////
// 3. Logik und Kontrollstrukturen

// Die if-Struktur arbeitet, wie man es erwartet.
var count = 1;
if (count == 3){
    // wird evaluiert, wenn count gleich 3 ist
} else if (count == 4) {
    // wird evaluiert, wenn count gleich 4 ist
} else {
    // wird evaluiert, wenn es weder 3 noch 4 ist
}

// Genauso 'while'.
while (true) {
    // Eine unendliche Schleife!
}

// Do-while-Schleifen arbeiten wie while-Schleifen, abgesehen davon, dass sie
// immer mindestens einmal ausgeführt werden.
var input;
do {
    input = getInput();
} while ( !isValid( input ) )

// Die for-Schleife arbeitet genau wie in C und Java:
// Initialisierung; Bedingung, unter der die Ausführung fortgesetzt wird;
// Iteration.
for ( var i = 0; i < 5; i++ ) {
    // wird 5-mal ausgeführt
}

// '&&' ist das logische und, '||' ist das logische oder
if (house.size == "big" && house.colour == "blue"){
    house.contains = "bear";
    // Die Größe des Hauses ist groß und die Farbe blau.
}
if (colour == "red" || colour == "blue"){
    // Die Farbe ist entweder rot oder blau.
}

// Die Auswertung von '&&' und '||' erfolgt so, dass abgebrochen wird, wenn die
// Bedingung erfüllt ist (bei oder) oder nicht-erfüllt ist (bei und). Das ist
// nützlich, um einen Default-Wert zu setzen.
var name = otherName || "default";

// Ein 'switch' Statement prüft Gleichheit mit ===
// ohne ein 'break' nach jedem Fall
// werden auch die Fälle nach dem korrekten aufgerufen
grade = 'B';
switch (grade) {
  case 'A':
    console.log("Great job");
    break;
  case 'B':
    console.log("OK job");
    break;
  case 'C':
    console.log("You can do better");
    break;
  default:
    console.log("Oy vey");
    break;
}

///////////////////////////////////
// 4. Funktionen, Geltungsbereich und Closures

// In JavaScript werden Funktionen mit dem Schlüsselwort 'function' deklariert.
function myFunction(thing){
    return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"

// Vorsicht: der Ausdruck der den Rückgabewert einer Funktion bildet muss
// auf der selben Zeile beginnen auf der auch das 'return' Keyword steht
// Sonst wird hier ein automatisches Semikolon eingefügt und die Funktion
// gibt 'undefined' zurück
function myFunction()
{
    return // <- Hier wird automatisch ein Semikolon eingefügt
    {
        thisIsAn: 'object literal'
    }
}
myFunction(); // = undefined

// In JavaScript sind Funktionen 'Bürger erster Klasse', also können sie wie
// Variablen verwendet und als Parameter anderen Funktionen übergeben werden
// - zum Beispiel, um einen 'event handler' zu 'beliefern'.
function myFunction() {
    // wird ausgeführt, nachdem 5 Sekunden vergangen sind
}
setTimeout(myFunction, 5000);

// Funktionen können auch deklariert werden, ohne ihnen einen Namen zuzuweisen.
// Es ist möglich diese anonymen Funktionen direkt als (oder im) Argument
// einer anderen Funktion zu definieren.
setTimeout(function(){
    // wird ausgeführt, nachdem 5 Sekunden vergangen sind
}, 5000);

// JavaScript hat einen Geltungsbereich, der sich auf Funktionen erstreckt:
// Funktionen haben ihren eigenen Geltungsbereich, andere Blöcke nicht.
if(true) {
    var i = 5;
}
i; // = 5 - nicht undefined, wie man es von einer Sprache erwarten würde, die
   // ihren Geltungsbereich nach Blöcken richtet

// Daraus ergibt sich ein bestimmtes Muster für sofort-ausführbare, anonyme
// Funktionen, die es vermeiden, dass der globale Geltungsbereich von Variablen
// 'verschmutzt' wird.
(function(){
    var temporary = 5;
    // Auf eine Variable im globalen Geltungsbereich kann zugegriffen werden,
    // sofern sie im globalen Objekt definiert ist (in einem Webbrowser ist
    // dies immer das 'window'-Objekt, in anderen Umgebungen, bspw. Node.js,
    // kann das anders aussehen).
    window.permanent = 10;
})();
temporary; // wirft einen ReferenceError
permanent; // = 10

// Eines der mächtigsten Charakteristika von JavaScript sind Closures. Wird
// eine Funktion innerhalb einer anderen Funktion definiert, dann hat die
// innere Funktion Zugriff auf alle Variablen der äußeren Funktion, sogar dann,
// wenn die äußere Funktion beendet wurde.
function sayHelloInFiveSeconds(name){
    var prompt = "Hello, " + name + "!";
    function inner(){
        alert(prompt);
    }
    setTimeout(inner, 5000);
    // setTimeout wird asynchron ausgeführt. Also wird sayHelloInFiveSeconds
    // sofort verlassen und setTimeout wird die innere Funktion 'im nachhinein'
    // aufrufen. Dennoch: Weil sayHelloInFiveSeconds eine Hülle um die innere
    // Funktion bildet, hat die innere Funktion immer noch Zugriff auf die
    // Variable prompt.
}
sayHelloInFiveSeconds("Adam");  // wird nach 5 Sekunden ein Popup mit der
                                // Nachricht "Hello, Adam!" öffnen.

///////////////////////////////////
// 5. Mehr über Objekte, Konstruktoren und Prototypen

// Objekte können Funktionen enthalten.
var myObj = {
    myFunc: function(){
        return "Hello world!";
    }
};
myObj.myFunc(); // = "Hello world!"

// Wenn Funktionen aufgerufen werden, die zu einem Objekt gehören, können sie
// auf das eigene Objekt mit dem Schlüsselwort 'this' zugreifen.
myObj = {
    myString: "Hello world!",
    myFunc: function(){
        return this.myString;
    }
};
myObj.myFunc(); // = "Hello world!"

// Worauf 'this' gesetzt wird, ist davon abhängig, wie die Funktion aufgerufen
// wird, nicht wo sie definiert wurde. Unsere Funktion wird daher nicht
// funktionieren, sofern sie außerhalb des Kontextes des Objekts aufgerufen
// wird.
var myFunc = myObj.myFunc;
myFunc(); // = undefined

// Umgekehrt ist es möglich eine Funktion einem Objekt zuzuweisen und dadurch
// Zugriff auf den this-Kontext zu erhalten, sogar dann, wenn die Funktion dem
// Objekt nach dessen Definition zugewiesen wird.
var myOtherFunc = function(){
    return this.myString.toUpperCase();
}
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"

// Mit den Methoden 'call' und 'apply' kann der Kontext eines Funktionsaufrufs
// verändert werden

var anotherFunc = function(s){
    return this.myString + s;
}
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"

// 'apply' funktioniert beinahe identisch, erwartet die übergebenen Argumente
// aber in einem Array

anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"

// Das ist hilfreich wenn man einer Funktion eine beliebige Zahl Argumente
// übergeben kann

Math.min(42, 6, 27); // = 6
Math.min([42, 6, 27]); // = NaN (uh-oh!)
Math.min.apply(Math, [42, 6, 27]); // = 6

// 'call' und 'apply' beeinflussen aber nur den spezifischen Aufruf.
// Um den Kontext einer Funktion dauerhaft zu ändern wird 'bind' benutzt.

var boundFunc = anotherFunc.bind(myObj);
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"

// Mit 'bind' lassen sich Funktionen auch teilweise anwenden / "curryen".
var product = function(a, b){ return a * b; }
var doubler = product.bind(this, 2);
doubler(8); // = 16

// Wenn eine Funktion mit dem Schlüsselwort 'new' aufgerufen wird, dann wird
// ein neues Objekt erzeugt. Funktionen, die darauf ausgelegt sind in dieser
// Art aufgerufen zu werden, werden Konstruktoren genannt.
var MyConstructor = function(){
    this.myNumber = 5;
}
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5

// Jedes JavaScript-Objekt hat einen Prototyp. Wenn man versucht auf eine
// Eigenschaft des Objekts zuzugreifen, das nicht im Objekt selbst existiert,
// schaut der Interpreter in dessen Prototyp nach.

// Einige JavaScript-Implementierungen erlauben den direkten Zugriff auf den
// Prototyp eines Objekts durch die magische Eigenschaft __proto__. Obwohl das
// nützlich ist, um  Prototypen im Allgemeinen zu erklären, ist das nicht Teil
// des Standards; zum Standard-Weg der Nutzung von Prototypen kommen wir
// später.
var myObj = {
    myString: "Hello world!",
};
var myPrototype = {
    meaningOfLife: 42,
    myFunc: function(){
        return this.myString.toLowerCase()
    }
};
myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42

// Das funktioniert auch bei Funktionen.
myObj.myFunc(); // = "hello world!"

// Sollte die Eigenschaft nicht im Prototypen des Objekts enthalten sein, dann
// wird im Prototypen des Prototypen nachgesehen und so weiter.
myPrototype.__proto__ = {
    myBoolean: true
};
myObj.myBoolean; // = true

// Dafür wird nichts hin und her kopiert; jedes Objekt speichert eine Referenz
// auf seinen Prototypen. Das heißt wenn der Prototyp geändert wird, dann
// werden die Änderungen überall sichtbar.
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43

// Es wurde bereits erwähnt, dass __proto__ nicht zum Standard gehört und es
// gibt ebenso keinen Standard-Weg, um den Prototyp eines existierenden Objekts
// zu ändern. Es gibt dennoch zwei Wege, wie man ein neues Objekt mit einem
// gegebenen Prototypen erzeugt.

// Der erste Weg ist die Methode Object.create, die eine jüngere Ergänzung des
// JavaScript-Standards ist und daher noch nicht in allen Implementierungen
// verfügbar.
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43

// Der zweite Weg, der immer funktioniert, hat mit den Konstruktoren zu tun.
// Konstruktoren haben eine Eigenschaft, die Prototyp heißt.  Dabei handelt es
// sich *nicht* um den Prototypen der Konstruktor-Funktion; stattdessen handelt
// es sich um den Prototypen, der einem neuen Objekt mitgegeben wird, wenn es
// mit dem Konstruktor und dem Schlüsselwort 'new' erzeugt wird.
MyConstructor.prototype = {
    getMyNumber: function(){
        return this.myNumber
    }
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5

// Alle primitiven Typen, also strings und numbers, haben auch Konstruktoren,
// die zu dem Typ äquivalente Wrapper-Objekte erzeugen.
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true

// Genau genommen: Sie sind nicht exakt äquivalent.
typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0){
    // Dieser Teil wird nicht ausgeführt, weil 0 'falsy' ist.
}

// Das Wrapper-Objekt und die regulären, eingebauten Typen, teilen sich einen
// Prototyp; so ist es möglich zum Beispiel einem String weitere Funktionen
// hinzuzufügen.
String.prototype.firstCharacter = function(){
    return this.charAt(0);
}
"abc".firstCharacter(); // = "a"

// Diese Tatsache wird häufig bei einer Methode mit dem Namen 'polyfilling'
// verwendet: Dabei wird ein neues Feature von JavaScript in einer älteren
// Untermenge der Sprache integriert, so dass bestimmte Funktionen auch in
// älteren Umgebungen und Browsern verwendet werden können.

// Ein Beispiel: Es wurde erwähnt, dass die Methode Object.create nicht in
// allen Umgebungen verfügbar ist - wir können sie dennoch verwenden, mit einem
// 'polyfill':
if (Object.create === undefined){ // überschreib nichts, was eventuell bereits
                                  // existiert
    Object.create = function(proto){
        // erstelle einen vorübergehenden Konstruktor mit dem richtigen
        // Prototypen
        var Constructor = function(){};
        Constructor.prototype = proto;
        // verwende es dann, um ein neues Objekt mit einem passenden
        // Prototypen zurückzugeben
        return new Constructor();
    }
}