Javascript Cheatsheet

js-cheatsheet.md

JS Cheatsheet

Coding Basics

Bevor es losgeht, ein paar hilfreiche Tips, die das Schreiben von Javascript Code erleichtern können:

//

Zwie / leiten einen Kommentar ein, nutze es Zeilen auszuschalten oder Kommentare einzufügen.

Mit:

console.log();

können Daten ausgegeben werden. Sie erscheinen in der Console des Browser oder des Terminals bei Node.js. Eine gängige Methode zum Debuggen. Beispielsweise:

let value = "Hello World!";
console.log(value);

// Aber auch komplexe Daten, wie das aktuelle Fenster-Objekt
console.log(window);

Achte darauf den Einschub der Zeilen nach dem gängigen Prinzip einzuhalten; es hält Code leserlich und übersichtlich:

// Nicht so:
function doSomething() {let data = "test";
alert(data); }

// Sondern blockweise bei den '{' oder '}' Klammern:
function doSomething() {
    let data = "richtig :)";
    alert(data);
}

Füge auch nicht zu viele Leerzeilen ein ;-)

Gruppiere Code der zusammen gehört und teile/markiere diese Abschnitte mit Kommentaren:

// Settings
let message = "Hello World!";
let shouldShowMessage = true;

// Setup
document.onload = function() {
    document.body.onclick = showMessage;
}

// Klick Events
function showMessage() {
    if (shouldShowMessage) {
        alert(message);
    }
}

Datentypen^MDN Ref

Primitive

Dies betrifft vor allem Zahlen, Strings (Text) und boolsche Werte:

// Boolsche Werte
true;
false;

// Zahlen
1;
100;
1.23;
Infinity;
-Infinity;

// Strings - mit einfachen oder doppelten Anführungszeichen
"Hello World!";
'Hello Universe!';

Aber auch besondere Werte wie:

undefined;
null;

Objekte

Alle weiteren Datenstrukturen sind in Javascript sogenannte Objekt¹

const data = {}; // Ein Leeres Objekt
const collection = new Array(); // Ein Array-Objekt

Operatoren

Operatoren sind Symybole, die zwischen Werte und/oder Deklarationen gesetzt werden, um einen bestimmten Vorgang - eine Operation - anzuzeigen. Die folgenden Operatoren gibt es in Javascript: +, -, *, / und =. Das Ergebnis der Operation hängt davon ab, welche Art die Werte sind.

Variablen

Variblen werden mit der Keyword var, let oder const deklariert:

var value = 100;
let text = "Hello there :)";
const data = { id: 123, task: "Hausaufgaben machen :|" };
var 😄 = "Yes, this works too, but is not very helpful";
var foo; // `foo` ist nun `undefined`

var ist der alte Indikator, besser ist es allerdings sie mit let oder const deklarieren - moderne Browser unterstützen es. Dann kann euch ein guter Editor helfen Fehler beim Überschreiben oder der Namen zu vermeiden:

let value = 100;
value = 555; // Das ist OK. value hat jetzt den Wert 555
let value = 123;
// Ups, Fehler! Es geht nicht, da 'value' schon deklariert ist!

Bei Variablen, deren primärer Inhalt sich nicht verändern soll, verwendet man am Besten const:

const message = "Hello World!";
// Ups, Fehler! message ist nicht veränderbar (const-ant)
mesage = "Hello Universe!";

// Merke jedoch, dass Inhalte in const Objekten schon veränderbar sind
const data = { id: 123, task: "Nix", done: false };
data.task = "Nicht vergessen, dass sich const Objects Inhalte ändern können";

Conditionals

Um in einem Programm entscheiden zu können, sind konditionale Blöcke hilfreich. Sie prüfen in der Bedingung immer auf Wahrhaftigkeit (Truthyness).

if (true) {
    console.log("Wahr ist immer wahr!");
}

// Vergleiche werden immer mit `==` oder `===` (strikter) notiert:
if (tag === 'Montag') {
    console.log("Die Woche beginnt!");
} else {
    console.log("Montag ist schon vorbei");
}

// Mehrfache Fälle werden mit `else if` unterschieden
if (tag === 'Montag') {
    console.log("Die Woche beginnt!");
if (tag === 'Dienstag') {
    console.log("Montag war gestern.");
} else {
    console.log("Montag und Dienstag sind schon vorbei");
}

Funktionen

Um einen Block Code zusammenzufassen und dann mit dem Namen der Funktion und () aufzurufen. Deklarierte Funktionen sind Werte die auch in Variablen gespeichert, bzw. zugewiesen, werden können. console.log ist eine schon vorhandene Funktion.

function zeigeNachricht(nachricht) {
    console.log("Die Nachricht ist:", nachricht);
    alert(nachricht);
}

document.onload = function setup() {
    document.body.onclick = zeigeNachricht;
}

// Besonders bei Arrays sind sogenannte Callbacks gerne verwendet:
let liste = ["Hello", "Hello", "Ola"];
liste.forEach(function(element) {
    console.log("Element aus der Liste", element);
})

Footnotes

1. Dies hat jedoch nichts mit OOP - Objekt Orientierter Programmierung - zu tun! ↩