JavaScript-Variablen
In JavaScript können Variablen erstellt und genutzt werden (wie in jeder anderen Programmiersprache auch). In der Programmierung dienen Variablen dazu, bestimmte Werte zu speichern, solche Werte können Zeichenketten (Text) oder Zahlen sein. Um eine Variable zu setzen, wird ein Variablenname vergeben. Dieser kann (fast) beliebig sein. Es gibt ein paar Ausnahmen - das ist aber für den Anfang nicht so wichtig. Im ersten Schritt erstellen wir eine Variable und im zweiten Schritt füllen wir diese Variable mit Inhalt.
Variable erstellen bzw. definieren
Um nun eine Variable zu definieren, wird der JavaScript-Befehl var eingesetzt.
<script>
var inhalt;
<script>oder in neuer Form
<script>
let inhalt;
<script>Somit haben wir JavaScript mitgeteilt, dass es eine Variable mit dem Namen inhalt gibt.
Variable einen Inhalt zuweisen
Jetzt haben wir eine Variable definiert - allerdings hat die Variable noch keinen Inhalt bzw. Wert. Nach dem Definieren der Variable können wir dieser Variablen einen Wert zuweisen:
<script>
var inhalt ='Hallo Welt!';
<script>Nach dem Gleichheitszeichen weisen wir der Variablen mit dem Namen inhalt den Text „Hallo Welt!“ zu. Dazu wird der Text in Anführungszeichen gepackt. Bei einem statischen Text ist es egal, ob es sich um einfache oder doppelte Anführungszeichen handelt! Es könnten im Beispiel also genauso die doppelten Anführungszeichen verwendet werden:
<script>
var inhalt = "Hallo Welt!";
<script>Im ersten Schritt haben wir die Variable namens inhalt dem Programm bekannt gemacht: Man spricht hierbei von Deklaration. Anschließend wurde inhalt ein Wert zugewiesen, nämlich "Hallo Welt!". Dieser Vorgang wird Initialisierung genannt. Das = Zeichen fungiert hierbei als Zuweisungsoperator. Anders als in der Mathematik bedeutet das = Zeichen nicht "ist gleich", sondern: "Weise den Wert der rechten Seite der Variablen auf der linken Seite zu." Eine Variable kann auch in einem Programmschritt deklariert und initialisiert werden:
<script>
var inhalt = "Hallo Welt!";
<script>Und jetzt können wir mit dieser Variablen arbeiten bspw. können wir den Inhalt der Variable auf dem Bildschirm ausgeben lassen.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine Webseite</title>
</head>
<body>
<h1>Willkommen</h1>
<script>
// Funktion, die "Hallo Welt!" ausgibt
function hallo() {
var ausgabe = "";
var inhalt = "Hallo Welt!";
var ausgabe = ausgabe + inhalt;
document.getElementById("idausgabe").innerHTML = ausgabe;
}
</script>
<button onclick="hallo();">Klick Mich!</button>
<div id="idausgabe"></div>
</body>
</html>
Was hier mit Zeichenketten wie "Hallo Welt!" funktioniert, kann auch auf Zahlenwerten angewendet werden:
<script>
var a = 7;
var b = 2;
<script>Wir können uns Variablen bildlich gesehen als eine Box vorstellen, in die wir die einzelnen Werte ablegen. Jede Box, d.h. jede Variable, kann aber immer nur einen Wert speichern:
Eine Zeichenkette (String) wird immer zwischen Anführungszeichen ( " ) notiert ("Hallo Welt!"). Fließkommazahlen werden mit einem Dezimal-Punkt ( . ) und nicht (wie im Deutschen) mit einem Komma geschrieben (2.3).
Berechnungen durchführen mit Operatoren
Mithilfe der Operatoren für die vier Grundrechenarten (Addition (+), Subtraktion (-), Multiplikation (*) und Division (/)) lassen sich mathematische Operationen mit Variablen durchführen.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine Webseite</title>
</head>
<body>
<h1>Willkommen</h1>
<script>
// Funktion - Berechnung
function berechne() {
var ausgabe = "";
var a = 7;
var b = 2;
var c = b * a;
var ausgabe = ausgabe + c;
document.getElementById("idausgabe").innerHTML = ausgabe;
}
</script>
<button onclick="berechne();">Klick Mich!</button>
<div id="idausgabe"></div>
</body>
</html>
Mithilfe des Multiplikations-Operators * werden die Werte der Variablen a und b miteinander multipliziert. Das Ergebnis wird in der Variablen c gespeichert. Am Ende wird dieser Wert in der Konsole ausgegeben.
Strings (Zeichenketten) verketten
Um zwei Strings miteinander zu verbinden, können wir das + Zeichen als Verkettungsoperator einsetzen.
<script>
var text1 = "Hallo";
var text2 = "Max, ";
var textkombi = text1 + text2 + "Wie geht es dir?"
<script>Empfehlungen für die Praxis
Variablennamen Benutze sprechende Namen, d. h. sinnvolle Bezeichnungen, die sich später zurückverfolgen lassen.
<script>
ausgabe = breite * hoehe; ist besser als a = b * h;
<script>Achten bei den Namen für die eigenen Variablen und Funktionen aber darauf, dass es sich dabei nicht um Schlüsselwörter handelt. Variablen sind case-sensitive, also achten Sie immer auf Groß-und Kleinschreibung. CamelCase Besser lesbar ist das so genannte CamelCase, in dem die ersten Buchstaben der einzelnen Bestandteile des Namens groß geschrieben werden.
Wichtige Vergleichsoperatoren
Vergleichsoperatoren dienen zum Vergleichen zweier Werte. Solche Vergleiche werden vor allem für Verzweigungen oder Schleifen benutzt. Als Ergebnis liefern Vergleichsoperatoren immer einen sogenannten booleschen Wert (Wahrheitswert) vom Typ boolean, d.h. entweder true (wahr) oder false (falsch). Man kann bspw. den Inhalt einer Variablen mit dem Inhalt einer anderen oder mit dem Ergebnis eines Ausdrucks vergleichen.
<script>
let SinnDesLebens = 42, alter = 8;
if (SinnDesLebens == 42) alert("Richtig.");
if (SinnDesLebens != 42) alert("Falsch."); //Solange SinnDesLebens nicht 42
if (SinnDesLebens > 42) alert("Falsch.");
if (SinnDesLebens < 42) alert("Falsch.");
if (alter >= 18) alert("SIE duerfen das hier sehen.");
if (alter <= 17) alert("SIE duerfen das hier NICHT sehen.");
<script>Übungsaufgaben zu LE01 und LE02
Hinweis: Alle Ergebnisse und Zwischenergebnisse müssen in Moodle abgegeben werden.