JavaScript mit Adi Prinz

Variablendeklaration

Variablen werden mit dem Schlüsselwort var definiert. Dem Schlüsselwort folgt ein Bezeichner und optional kann der Variablen ein Wert zugewiesen werden. Der Wert kann im Script jederzeit verändert werden.

var x;
var y = 'Hallo ';
x = 'Welt';
var z = y + x;
console.log(z);

Theorethisch kann man eine Variable ohne das Schlüsselwort var deklarieren. Diese Deklaration zählt allerdings zu schlechtem Programmierstil und kann sogar zu Konflikten im Programmcode führen.

Eine Deklaration für viele Variablen

Mehrere Javascript-Variablen können auch in einem Ausdruck deklariert werden. Als Trennzeichen wird das Komma verwendet.

var vorName = "Adi", nachName = "Prinz", alter = 60;
console.log(nachName);

Oder Mehrzeilig.

var vorName = "Adi", 
    nachName = "Prinz", 
    alter = 60;
console.log(vorName);

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

Primitive Values in Variablen

Variablen können viele unterschiedliche Datentypen beinhalten. Zu den Primitives zählen:

• Text: Textwerte werden immer in einfache oder doppelte Anführunszeichen geschrieben, Text wird in den Programmiersprachen auch String genannt (Zeichenkette)
• Zahl: Ganzzahlige Werte oder Zahlen mit Komma, Achtung: Punkt als Komma (1.5), der Datentyp Zahl wird in JavaScript Number genannt
• Boolean: Wahrheitswerte true oder false
• null: der Wert Nichts
• undefined: Rückgabewert einer Variablen ohne Zuweisung

String

Textwerte werden in JavScript in Anführungszeichen gestellt. Das können einfache ('') oder doppelte ("") sein (double or single quotes).

var x = "Das ist Text";
var y = 'Das auch';

Wenn jetzt ein Anführungszeichen im Text vorkommen soll, kann man alternative Anführungszeichen schreiben:

var x = "Mein Name ist 'Hase', ich weiß von Nichts"; 
// oder so:
var x = 'Mein Name ist "Hase", ich weiß von Nichts';

Auch mit dem Escape-Zeichen (\) oder Backslash können Anführungszeichen im Text notiert werden. Man muß einfach den Backslash vor das Anführungzeichen stellen.

var x = "Mein Name ist \"Hase\", ich weiß von Nichts"; 

Mit dem Escape-Zeichen (\) können noch weitere Zeichen im Text geschrieben werden:

Achtung bei mehrzeiligen Wertzuweisungen. Ein Ausdruck wie der folgende wird wahrscheinlich nicht den gewünschten Effekt erzielen:

var x = "Hallo
        Welt";
console.log(x);

In diesem Fall müssen sie mit dem String-Operator (+) eine Verkettung herstellen.

var x = "Hallo " +
        "Welt";
console.log(x);

Number

Während andere Programmiersprachen unterschiedliche Zahlentypen kennen (integer, double etc), existiert in JavaSript nur einer, nämlich number. Numbers können mit oder ohne Dezimalstellen geschrieben sein, achten sie jedoch auf den Punkt als Kommazeichen (amerikanisches Zahlenformat).

var x = 5;
var y = 3 * 4;
var z = 3.14;

Numbers können auch wissenschaftliche- bzw. hexadezimale Werte sein.

var x = 0xFF;   // 255
var x = 123e5;  // 12300000

Boolean

Booleanische Datentypen können zwei Werte aufnehmen true oder false (WAHR oder FALSCH).

var a = true; // liefert true
var b = 10 > 2 * 5;  // liefert false
var c = 10 == 2 * 5; // liefert true
console.log(a);
console.log(b);
console.log(c);

Primitive Values wie String, Number und Boolean können auch Objekte sein. Mehr darüber erfahren sie im Kapitel Vordefinierte Objekte. Den Objekten Arrays, Funktionen und Objekte werden eigene Kapitel gewidmet.

Null

Null bedeutet soviel wie Nichts und wird zum Leeren von Variablen verwendet. Bei der typeof-Anweisung liefert null Object als Wert.

var x = 10;
var x = null;

Undefined

Undefined sind Variablen ohne Wert. Bei der typeof-Anweisung liefert undefined undefined als Wert.

var x;
var y = undefined;
console.log(typeof(x));
console.log(typeof(y));

Arithmetische Operatoren

Berechnungen werden mit Arithmetische Operatoren durchgeführt. Es gelten die Regeln der Mathematik (Punkt vor Strich usw.) Auch Klammern stehen zur Verfügung.

var x = 3;
var y = 4; 
var z = 5;
var a = (x + y) * z;
console.log(a);

Liste der Arithmetische Operatoren

Zuweisungsoperatoren

Einer Variablen wird mit dem Gleichheitszeichen ein Wert zugewiesen ( x = 2 + 2). Gleichheitszeichen können auch mit Rechenoperatoren kombiniert werden..

var x = 3;
x += 5;
// oder
x = x + 5;

Liste der Zuweisungsoperatoren

Der String-Operator

Der String-Operator wird in Textverarbeitungsprogrammen auch Verkettungsoperator genannt. Dafür verwendet JavaScript das mathematische Plus (+).

var x = "Adi";
var y = "Prinz"
var z = x + " " + y;
console.log(z);

String-Operator

Vergleichsoperatoren

Vergleichsoperatoren können zwei- oder mehrere Werte vergleichen. Der Rückgabewert solcher Anweisungen kann nur true oder false sein. In der Tabelle gehen wir davon aus, dass x den Wert 5 hat.

var x = 5;

Liste der Vergleichsoperatoren

Das nächste Beispiel liefert false weil 5 vom Datentyp Number und "5" vom Datentyp String ist.

var x = 5;
console.log(x === "5"); // liefert false

Logische Operatoren

Als kleine Hilfe kann man sich bei logischen Operatoren die EXCEL-Funktionen UND, ODER, NICHT vorstellen.

• Der logische Operator && verknüpft zwei oder mehrere Bedingungen durch UND, WAHR ist wenn alle Bedingungen erfüllt sind (true)
• Der logische Operator || verknüpft zwei oder mehrere Bedingungen durch ODER, WAHR ist wenn eine der Bedingungen erfüllt ist (true)
• Der logische Operator ! prüft zwei Bedingungen auf WAHR oder FALSCH, und wandelt den Wert um: Aus WAHR wird FALSCH und umgekehrt

In der Beispieltabelle gehen wir davon aus, dass x den Wert 10 und y den Wert 5 hat.

var x = 10;
var y = 5;

Liste der Logischen Operatoren

Conditional Operator

Der conditional-Operator oder auch bedingter-Operator bestimmt eien Zuweisungen abhängig von der Prüfung.

var y = 100;
var x = (y >= 100) ? "Große Zahl" : "Kleine Zahl";
console.log(x); // liefert Große Zahl

Die Prüfung lautet: (y >= 100), danach kommt ein Fragezeichen, danach der Dann-Wert und der Sonst-Wert getrennt mit einem Doppelpunkt. Anhand der Prüfung entscheidet JavaScript den Rückgabewert. Eigentlich ist der bedingte Operator eine verkürzte if-then-else-Anweisung. Die Syntax sieht wie folgt aus:

(Bedingung) ? Ausdruck : Ausdruck;

Spezielle Operatoren

Neben den oben angeführten Operatoren gibt es auch noch die Gruppe der speziellen Operatoren, die hier nur kurz aufgelistet werden.

Der typeof-Operator

Der typeof-Operator gibt den Typ von Variablen, Objekten, Funktionen oder Ausdrücken zurück:

• typeof "Adi Prinz" // string
• typeof 5.50 // number
• typeof NaN // number
• typeof false // boolean
• typeof [1, 2, 3, 4] // object
• typeof {name:'Adi', age:60} // object
• typeof new Date() // object
• typeof function () {} // function
• typeof x // undefined (wenn x nicht deklariert ist)
• typeof null // object
• Datentypen wie Arrays, Date und Null liefern object
• Der Datentyp undefined ist eine nicht definierte Variable
• Der Datentyp von NaN liefert number

Der delete-Operator

Der delete-Operator löscht Eigenschaften eines Objekts. Variablen und Funktionen können mit dem delete-Operator nicht gelöscht werden.

var person = {firstName:"Adi", lastName:"Prinz", age:60};
delete person.age;   // oder delete person["age"]; 

Auch Array-Einträge können gelöscht werden.

var script = ["HTML", "CSS", "JavaSript", "PHP"];
delete script[0];   

Der in-Operator

Der in-Operator liefert true wenn eine angegebene Eigenschaft eines Objekt exisitert, sonst false.

// Arrays
var script = ["HTML", "CSS", "JavaSript", "PHP"];
console.log(0 in script);  // liefert true

// Objects
var person = {firstName:"Adi", lastName:"Prinz", age:60};
console.log("firstName" in person); // liefert true

// Vordefinierte Objekte
console.log("PI" in Math); // liefert true

Der instanceof-Operator

Der instanceof-Operator liefert true wenn das angegebene Objekt vom angegebenen Typ ist, sonst false.

var script = ["HTML", "CSS", "JavaSript", "PHP"];
script instanceof Array;  // true
script instanceof Object; // true
script instanceof String; // false

Der void-Operator

Der void-Operator führt die nach ihm geschriebene Anweisung aus. Der Rückgabewerte dieser Anweisung ist stets undefined.

var x = 1;
var y = 2;
var z = void(x + y)
console.log(z); // liefert undefined