JavaScript mit Adi Prinz

Anweisungen Syntax

Anweisungen können zeilenweise oder untereinander geschrieben werden, achten sie auf das Semikolon am Ende.

var x = 5, y = 10, z = x + y;
// oder
var x = 5;
var y = 10;
var z = x + y;
console.log(z);

Verwenden sie die Browser-Konsole um JavaScript Code auf dieser Seite zu testen.

Anweisungsblock

Ein Anweisungsblock besteht aus einen oder mehreren Anweisungen, die in geschweiften Klammern zusammengefasst werden. Anweisunsblöcke werden für Funktionen, Verzweigungen und Schleifen gebraucht. Für die bessere Lesbarkeit können auch Einrückungen für Anweisungen in einem Block erstellt werden.

// Eine Funktion
function myFunction(a, b) {
  return a * b;
}
console.log(myFunction(3, 4));

// Eine Verzweigung
var x = "Irgendwas";
if (x == "Irgendwas") {
  console.log("Hallo Welt");
}

// Eine Schleife
var i = 1;
while (i < 10) {
  console.log("Laufende Zahl ist " + i + ", ");
  i++;
}

Ein Anweisungsblock braucht in der Regel kein Semikolon zum Abschluss (Es gibt aber auch Ausnahmen).

Anweisungsblöcke können auch als Zeilensyntax geschrieben werden.

function myFunction(a, b) { return a * b; }
console.log(myFunction(3, 4));

if-Anweisung

Mit der if-Anweisung wird eine Bedingung gestellt, und ein Rückgabewert definiert falls die Bedingung WAHR ist. Bedingungen werden in der Regel mit einem Vergleichsoperator geschrieben. Die Bedingung wird in runden Klammern gesetzt, der Anweisungsblock in geschweiften Klammern.

var firstName = "Adi";
if (firstName == "Adi") {
  console.log("Mein Name ist Adi!");
}

In diesem Beispiel ist die Bedingung WAHR und "Mein Name ist Adi" wird zurückgegeben. Ein FALSCH-Wert ist hier nicht definiert, der Rückgabewert wäre dann undefined.

var firstName = "Gabi";
if (firstName == "Adi") {
  console.log("Mein Name ist Adi!");
}

if-else-Anweisung

Mit der if-else Anweisung kann JavaScript einen Rückgabewert definieren, wenn die Bedingung WAHR oder FALSCH ergibt (WENN - DANN- SONST).

var firstName = "Gabi";
if (firstName == "Adi") {
  console.log("Mein Name ist Adi!");
} else {
  console.log("Unbekannter Name");
}

if-else if-else-Anweisung

Mit der if-else if-else-Anweisung kann JavaScript einen Rückgabewert definieren, wenn mehrere Bedingungen vorhanden sind.

var firstName = "Julia";
if (firstName == "Adi") {
  console.log("Mein Name ist Adi!");
} else if (firstName == "Gabi") { 
  console.log("Mein Name ist Gabi!");
} else {
  console.log("Unbekannter Name");
}

Dasselbe Beispiel nocheinmal, aber als Funktion.

var person = function(firstName) {
  var myName;
  this.firstName = firstName;
  
if (firstName == "Adi") {
  return myName = "Mein Name ist Adi!";
} else if (firstName == "Gabi") { 
  return myName = "Mein Name ist Gabi!";
} else {
  return myName = "Unbekannter Name";
}}
console.log(person("Gabi"));

switch

Mit if und else kann man genau eine Bedingung erstellen. Mit if-else if-else kann man mehrere Bedingung erstellen. Ähnliches bietet die switch-Anweisung, nur etwas eleganter.

var firstName = "Harald";
switch (firstName) {
case "Adi":
console.log('Mein Name ist Adi!');
break;
case "Gabi":
console.log('Mein Name ist Gabi!');
break;
case "Harald":
console.log('Mein Name ist Harald!');
break;
default:
console.log('Unbekannter Name!');
break;
}

Die switch-Anweisung folgt dabei folgender Syntax.

• Mit switch wird die Fallunterscheidung eingeleitet
• Der zu prüfende Wert (z.B. eine Variable) wird in runden Klammern geschrieben
• Der Anweisunsblock startet mit einer geschweiften Klammer
• case prüft, ob der Variablenwert WAHR ist
• Wenn der Variablenwert WAHR ist wird die Anweisung darunter ausgeführt
• break bricht die case Anweisung ab
• Sollte keine der Prüfungen WAHR sein kann mit default ein FALSCH-Wert definiert werden
• Der Anweisunsblock endet mit einer geschweiften Klammer

Bedingter (ternärer) Operator

Ternär bedeutet soviel wie "aus drei Grundeinheiten bestehend". Wie der Name aufzeigt, nehmen ternäre Operatoren drei Operanden. Die Syntax lautet:

Bedingung ? Ergebnis1 : Ergebnis2

Hier verwendet man eine Bedingung vor Fragezeichen (?), gefolgt von Ergebnis1 und Ergebnis2, die von einem Doppelpunkt getrennt sind (:). Ergebnis1 wird aufgerufen, wenn die Bedingung WAHR ist, Ergebnis2 wird aufgerufen, wenn die Bedingung FALSCH ist.

var firstName = "Adi";
var ausgabe = (firstName == "Adi") ? console.log('Mein Name ist Adi!') : console.log('Unbekannter Name!') 

while Schleife

while-Schleifen wiederholen Anweisungen, solange die Bedingung WAHR ist. Wenn die Bedingung FALSCH ist, wird die while-Schleife nicht mehr ausgeführt.

Die Syntax der while - Schleife

while (Bedingung) {
  Anweisungen;
}

Die Bedingung im runden Klammernpaar prüft den Wert von x. Der Anweisungsblock wird in geschweiften Klammern gesetzt werden ausgeführt, wenn die Prüfung WAHR ist. Im Anweisungsblock wird x bei jedem Durchlauf um 1 inkrementiert. Die Schleife im folgenden Beispiel wird vier mal durchlaufen.

var x = 1; 
while (x < 5) {
    console.log ( x + ". Durchlauf");
    x += 1;
}

do while - Schleife

Die do while - Schleife ist ähnlich der while - Schleife, nur wird hier zumindest ein Schleifendurchlauf gestarten und erst dann erfolgt die Prüfung.

do {
  Anweisungen;
} while (Bedingung)

var x = 1;
do {
console.log ( x + ". Durchlauf");
x += 1;
} while (x < 5)

for Schleife

Eine for-Schleife wird solange ausgeführt, bis die angegebene Bedingung erfüllt ist. Alle Argumente sind am Anfang der Schleife in einer Klammer gelistet. Die Argumente werden mit einem Semikolon getrennt. Die Syntax lautet:

for (Initialwert; Bedingung; Inkrementierung) {
  Anweisungen;
}

• Initialwert: ist der Startwert des Zählers
• Bedingung: Abbruchbedingung, wie oft soll die Schleife durchlaufen werden
• Inkrementierung: Wert des Zählers vor jedem Durchlauf

for(var i = 1; i < 6; i++)
{
console.log("Durchlauf: " + i);
}

for - in Schleife

for - in Schleifen in JavaScript durchsuchen und finden Eigenschaftsnamen eines Objectes bzw. den Index eines Arrays. Die Syntax lautet:

for (variable in object) {
  Anweisungen;
}

Nach der for-Anweisung wird eine Variable deklariert und mit dem Schlüsselwort in mit dem Objektnamen verglichen. Diese Anweisung wird in runden Klammern geschrieben.

var obj = {firstName:"Adi", lastName:"Prinz", age:60};
for (var key in obj) {
  console.log(key);  // liefert firstName, lastName, age
}

var arr = ["Adi", "Prinz", 60];
for (var key in arr) {
  console.log(key); // liefert 0, 1, 2
}

for - of Schleife

Während for...in über die Namen oder dem Index der Eigenschaften läuft, geht for...of über deren Werte. Anwendbar ist diese Schleife für alle iterations -fähigen Objekte wie z.B. Arrays, Strings, Maps, Sets. Die Syntax lautet:

for (variable of object) {
  Anweisungen;
}

Die Syntax der for of-Schleife ist dieselbe wie bei der for in-Schleife, nur das Schlüsselwort in wird durch of ersetzt.

var str = "Hallo Welt";
for (var value of str) {
  console.log(value);  // liefert H a l l o  W e l t
}

var arr = ["Adi", "Prinz", 60];
for (var value of arr) {
  console.log(value); // liefert Adi, Prinz, 60
}

break

Im folgenden Beispiel wird die Schleife nicht 9 mal durchlaufen, sondern sie wird beim Wert 3 abgebrochen und nicht weiter fortgesetzt.

for (i = 0; i < 10; i++) {
  if (i === 3) 
  { break; }
  console.log("Die Zahl ist: " + i);
}

continue

Im folgenden Beispiel wird die Schleife nicht 9 mal durchlaufen, sondern sie wird beim Wert 3 unterbrochen und am Beginn fortgesetzt.

for (i = 0; i < 10; i++) {
  if (i === 3) 
  { continue; }
  console.log("Die Zahl ist: " + i);
}

label

Die label -Anweisung erklärt sich am Besten in Verbindung mit break oder continue. Im folgenden Beispiel gibt es eine äußere- und innere for-Schleife. Jede Schleife wird 3 mal durchlaufen.

for (var i = 0; i < 3; i++) {
   for (var j = 0; j < 3; j++) {
      console.log("i = " + i + ", j = " + j);
   }
}

Im folgenden Beispiel wird die innere Schleife nicht 3 mal durchlaufen, sondern sie wird beim Wert 1 unterbrochen und am Beginn fortgesetzt.

for (var i = 0; i < 3; i++) {
   for (var j = 0; j < 3; j++) {
      if (j === 1) {
         continue;
      }
      console.log("i = " + i + ", j = " + j);
   }
}

Im folgenden Beispiel wird die innere Schleife nicht 3 mal durchlaufen, sondern sie wird jedesmal beim Wert 1 abgebrochen.

for (var i = 0; i < 3; i++) {
   for (var j = 0; j < 3; j++) {
      if (j === 1) {
         break;
      }
      console.log("i = " + i + ", j = " + j);
   }
}

Im folgenden Beispiel wird die innere Schleife nicht 3 mal durchlaufen, sondern sie wird jedesmal beim Wert 1 unterbrochen und bei der Sprungmarke fortgesetzt..

myLabel:
for (var i = 0; i < 3; i++) {
   for (var j = 0; j < 3; j++) {
      if (j === 1) {
         continue myLabel;
      }
      console.log("i = " + i + ", j = " + j);
   }
}

Im folgenden Beispiel wird die innere Schleife beim Wert 1 abgebrochen und nicht mehr fortgesetz.

myLabel:
for (var i = 0; i < 3; i++) {
   for (var j = 0; j < 3; j++) {
      if (j === 1) {
         break myLabel;
      }
      console.log("i = " + i + ", j = " + j);
   }
}