Variablen


Mit Hilfe von Variablen können in JavaScript Werte gespeichert werden, die im späteren Programmablauf Verwendung finden. Diese Werte können verschiedenartig sein. Man sagt, es gibt unterschiedliche Typen von Variablen. Zum Beispiel kann man natürliche Zahlen, Dezimalbrüche, Zeichenfolgen, Datensammlungen, Wahrheitswerte,... in einer Variablen speichern.

In vielen anderen Programmiersprachen muss man angeben, welchen Typ eine Variable haben soll. Nicht so in JavaScript. JavaScript erkennt selbst, welchen Variablentyp man möchte und kümmert sich - wenn man nicht zuviel Unsinn in den Code schreibt - um die richtige Verwendung.

Beispiele:

    //eine ganze Zahl
    var natzahl = 15;

    //ein Dezimalbruch
    var dezbruch = 145.32;

    //eine Zeichenfolge (in einfachen oder doppelten Anführungszeichen)
    var dateiname = 'dateiname1.txt';
    var dateiName = "dateiname2.txt";

    //eine Zeichenfolge mit Zitat (innere und äussere müssen verschieden sein)
    var zitat = "wie ich bereits sagte: 'JavaScript ist cool'!";

    //einen Wahrheitswert der wahr/true/1 oder falsch/wrong/0 sein kann
    var istWahr = true;
    var istFalsch = false;

    //eine Sammlung von Werten in einem Datenfeld (Array)
    var namen = new Array("Otto", "Fritz", "Max");

Mit Hilfe eines Backslash \ kann man in einen Text Sonderzeichen einfügen:

  • \n neue Zeile
  • \r neuer Absatz
  • \t Tabulator
  • \' einfaches Anführungszeichen innerhalb einfacher Anführungszeichen
  • \" doppeltes Anführungszeichen innerhalb doppelter Anführungszeichen
  • \\ Backslash der als solcher ausgegeben werden soll

Beispiel

Wenn man als Kreisdurchmesser "Hallo" festlegt, dann wird der Kreis nicht gezeichnet, da der Computer nicht weiß, was ein Durchmesser "Hallo" sein soll. Der Computer kann aber "Hallo" als Text ausgeben.


Beispiel

Wenn man etwas eingibt, was der Computer als Zahl versteht, dann kann er auch einen Kreis zeichnen. Dabei kann die Zahl ein Dezimalbruch sein oder sogar das Ergebnis einer Rechnung. JavaScript erkennt automatisch die Zahl und zeichnet den Kreis. Ein Dezimalkomma in einer Zahl wird als Punkt eingegeben.


Beispiel

Im folgenden Beispiel versucht JavaScript aus den Eingaben etwas sinnvolles zu machen. Eine Zeichenfolge kann man nicht mathematisch mit einer anderen addieren, also rechnet JavaScript kein Ergebnis aus, sondern gibt die Zeichenfolge unverändert auf dem Monitor aus und er versteht + als Anweisung mehrere Zeichenfolgen hintereinander auszugeben.

Wenn ich aber mit var alter = 5+7; eine neue Variable anlege, dann versucht JavaScript das Ergebnis auszurechnen, da er Zahlen findet und das mathematische Ergebnis wird ausgegeben. Schreibt man 5 + 7 in die gleiche Zeile wie andere Zeichenfolgen, dann gibt er diese Zahlen ohne zu rechnen, hintereinander geschrieben aus, da JavaScript jetzt denkt, dass 5 und 7 Zeichen sein sollen und keine Ziffern. Gedankenlesen kann JavaScript nicht, im Zweifel ist alles also eine Zeichenfolge.

Sie als Programmierer*in sind dafür verantwortlich Ihre Anweisungen sinnvoll zu formulieren. Nur dann kann der Computer Ihre Ideen richtig umsetzen.


Variablen vergleichen

In JavaScript werden Werte in Variablen gespeichert. Während eines Programmablaufs kann der Wert einer Variablen entscheiden, was als nächstes ausgeführt werden soll. Dafür muss man den Wert einer Variablen mit anderen Werten vergleichen. Um solche Vergleiche entscheiden zu können, gibt es in JavaScript Vergleichsoperatoren. Diese sind sehr ähnlich denen, die Sie aus der Mathematik kennen.

In JavaScript ist ein einzelnes Gleichheitszeichen = ein Zuordnungsoperator, der einer Variablen einen Wert zuordnet. Wenn man eine Variable mit einem Wert vergleichen möchte, dann benutzt man zwei Gleichheitszeichen ==.

Wenn man den Wahrheitswert true bekommen möchte, wenn eine Variable ungleich einem Wert ist, dann benutzt man den Operator != (ist nicht gleich).


Beispiel

Es sei im folgenden x = 6.


Beispiel

Mit den Operatoren > (größer als), < (kleiner als), >= (größer oder gleich) und <= (kleiner oder gleich) kann wie in der Schule geprüft werden, ob eine Variable innerhalb eines Zahlenbereichs (Intervalls) liegt. Es sei immer noch x = 6.


Beispiel

Mit JavaScript kann auch geprüft werden, ob eine Variable einen bestimmten Wert hat und ein bestimmter Datentyp ist. Dazu gibt es die Operatoren === (gleicher Wert und gleicher Datentyp) und !=== (ungleicher Wert oder ungleicher Datentyp).


Kombination von Vergleichen

Mit Hilfe von logischen Operatoren kann man Vergleiche kombinieren oder bewerten:

  • Der logische Operator && (AND, UND) liefert true, wenn beide Vergleiche wahr sind, sonst false.
  • Der logische Operator || (OR, ODER) liefert false, wenn beide Vergleiche falsch sind, sonst true.
  • Der logische Operator ! (NOT, NICHT) liefert false, wenn der Vergleich wahr ist, sonst true.

Beispiele:

  • (5 < 3) && (11 > 10) liefert false, weil der erste Vergleich falsch ist

  • (5 > 3) && (10 < 11) liefert true, weil beide Vergleiche wahr sind

  • (5 < 3) || (11 > 10) liefert true, weil einer der Vergleiche wahr ist

  • (5 > 3) || (11 < 10) liefert false, weil beide Vergleiche falsch sind

  • !(5 < 3) liefert true, weil der Vergleich falsch ist

  • !(5 > 3) liefert false, weil der Vergleich wahr ist

Zuordnung steuern

Mit JavaScript kann man eine Zuordnung über einen Vergleich steuern.

Beispiel

darfautofahren = (alter < 18) ? "Leider noch nicht!":"Ja klar!";

Wenn der Vergleich (alter < 18) den Wert true liefert, wird der Variablen darfautofahren der Wert "Leider noch nicht!" zugeordnet, sonst der Wert "Ja klar!". Veränderen Sie im folgenden Beispiel das Alter.


Übung: Olympische Ringe

In dieser Übung werden die olympischen Ringe nachgebaut und Sie üben dabei den Umgang mit Variablen.

Schau Sie sich die olympischen Ringe einmal an: klicken Sie dazu mit der rechten Maustaste auf olympische Ringe und wähle dann 'Link in neuem Tab öffnen'. Sie sehen dann die Ringe auf einer neuen Seite und können zwischen dieser Seite und den Ringen hin und her wechseln.


Farb-Werkzeuge

Die Kreise soll farbig werden. Bei der JavaScript-Bibliothek p5.js kann man die Farbe der Kreislinie mit stroke(rot, grün, blau); festlegen.

Für rot, grün und blau müssen Zahlen eingesetzt werden. Welche Zahlen das sind, können Sie herausfinden, indem Sie in der Google-Suchmaschine colorpicker eingeben und dann mit Hilfe des Schiebereglers und der Maus eine Farbe aussuchen.

Wenn Sie den Chrome-Browser verwenden, können Sie z.B. folgende Erweiterung installieren: ColorZilla und mit Hilfe dieser Erweiterung die Farbe herausfinden, indem Sie die olympischen Ringe anzeigen lassen, dann auf das ColorZilla-Symbol klicken, dann auf den ersten Eintrag des Menüs klicken: Page Color Picker Active und mit der Maus auf die gewünschte Farbe gehen. Oben werden dann bei rgb(0, 134, 200); die drei Zahlen angezeigt, die Sie eingeben müssen.

Der blaue Ring hat also die Werte: rot = 0, grün = 134 und blau = 200. Versuchen wir es mal damit.


Koordinaten-Werkzeuge

Jetzt sollen die olympischen Ringe in Ihre Position gebracht werden.

Schauen Sie sich nochmals die olympischen Ringe an. Wie kann man diese in die richtige Position bringen?

Dafür gibt es z.B. wieder eine Erweiterung für den Chrome-Browser: Page-Ruler . Es gibt aber auch viele andere Möglichkeiten, eine Strecke auf dem Bildschirm auszumessen. Versuchen Sie mit Hilfe einer Suchmaschine eine Methode herauszufinden, die Ihnen gefällt.

Mögliche Messergebnisse:

  • Durchmesser der Ringe: 180 Pixel,
  • Abstand benachbarter Ringe: 220 Pixel,
  • Abstand der beiden Reihen: 90 Pixel,
  • Breite der Ringe: 20 Pixel.

Aufgabe

Bauen Sie ein Fantasie-Logo für die olympischen Spiele mit den olympischen Ringen, der Angabe des Ortes und des Jahres.

Schreiben Sie den Code so, dass man mit der Veränderung einer einzigen Variablen die Größe des gesamten Logos anpassen kann.

Sie können dazu gerne den p5-Editor verwenden.