Variablen und Zahlen

In diesem Abschnitt lernen wir Variablen kennen. Variablen sind sehr nützlich und Sie werden sie sehr häufig benutzen.

In Variablen können Sie Werte speichern um zum Beispiel mit einer einzelnen Änderung mehrere Stellen zu beeinflussen oder um Werte im Programm dynamisch zu verändern. Gleichzeitig gibt man mit Variablen einer beliebigen Zahl einen sinnvollen Namen, so dass der Code lesbarer wird.

Variablen werden in JavaScript mit dem Keyword let erzeugt¹. Dann kann man ihnen mit dem Gleichzeichen, dem sogenannten Zuordnungsoperator (assignment operator), einen Wert (value) zuordnen. Das klingt etwas kompliziert, aber wie Sie in dem Beispiel sehen, ist es eigentlich ganz einfach:

//  v-------------------------- Keyword "jetzt definieren wir eine Variable"
//             v--------------- der Variablenname
//                         v--- ein Wert, den wir Speichern
   let numberOfHamsters = 10;

Sie können den Wert einer Variable in der Konsole ausgeben lassen um diesen zu kontrollieren. Probieren Sie es in ihrem Editor einfach mal aus!

Die Ausgabe erscheint nur, wenn Sie auch p5canvas offen haben!

let numberOfHamsters = 10;
console.log(numberOfHamsters);

Sie können den Wert einer Variable auch verändern².

let numberOfHamsters = 10;
console.log(numberOfHamsters);
// gibt 10 aus

numberOfHamsters = 42;
console.log(numberOfHamsters);
// gibt 42 aus

Wie Sie sehen, darf man das Keyword let nur beim ersten mal verwenden. Möchte man den Wert der Variable ausgeben oder verändern, so braucht man das Keyword nicht mehr, weil die Variable bereits definiert wurde.

Mit Variablen rechnen

Praktischerweise ist die Zahl 10 immer noch eine Zahl, auch wenn sie in einer Variable steht. So kann man damit im Code auch rechnen:

let numberOfHamsters = 10;
numberOfHamsters = numberOfHamsters + 32;
console.log(numberOfHamsters);
// Es sollte nun 42 in der Konsole stehen

Sie können auch zwei Variablen zusammenzählen. Toll ist, dass durch die Variablennamen klar ist, was die Zahlen bedeuten sollen:

let quantity = 25;
let pricePerPizza = 7.5; // Euro
let totalCost = quantity * pricePerPizza;
console.log(totalCost);
// Pizza für den ganzen Kurs kostet über 180 Euro! 🍕

Neben Addieren, können Sie auch subtrahieren (-), multiplizieren (*) und dividieren (/). Natürlich kann man noch viele weitere Sachen machen, auf die wir nicht sofort eingehen.

Variablen in p5.js

Variablen können unter Anderem dafür verwendet werden, um die Position eines Rechtecks (oder auch jeder anderen Form) dynamisch zu ändern. Es sind am Ende ja nur Stellvertreter für andere Sachen:

let x = 100;
let y = 50;
rect(x, y, 237, 128);

Wenn Sie die Werte der Variable verändern, bewegt sich das Rechteck auf dem Canvas. Probieren Sie es am besten einfach mal aus.

Aufgabe

Machen Sie Ihr ganzes Emoji variabel. Benutzen Sie die Variablen x und y um die Position später ändern zu können. Das heißt, wenn du Sie den Wert in einer deiner beiden Variablen veränern, soll sich das ganze Emoji auf dem Canvas bewegen.

Achten Sie dabei darauf, dass Sie hierbei auch rechnen müssen. Sie können nicht einfach alle x und y Positionen stumpf durch Variablen ersetzen.

Wenn Sie das geschafft haben, geht es weiter mit Variablen und Strings.