css mit Adi Prinz

Variablendeklaration

Variablen werden mit dem Schlüsselwörtern var, let oder const definiert. Dem Schlüsselwort folgt ein Bezeichner und optional kann der Variablen ein Wert zugewiesen werden.

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

Theorethisch kann man eine Variable ohne Schlüsselwort 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.

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

Oder Mehrzeilig.

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

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

Gültikeitsbereiche für Variablen (Scope)

Block Scope

Auf let-Variablen und const-Konstanten, die innerhalb eines Blocks { } deklariert sind, kann nicht von außerhalb des Blocks zugegriffen werden:

{
  let x = 2;
}
console.log(x);

{
  const y = "Hallo Welt";
}
console.log(y);

Auf var-Variablen, die innerhalb eines Blocks { } deklariert sind, kann auch von außerhalb des Blocks zugegriffen werden:

{
  var x = 2;
}
console.log(x);

Function Scope

Mit var, let und const deklarierte Variablen sind ziemlich ähnlich, wenn sie innerhalb einer Funktion deklariert werden.
Jede Funktion erstellt einen neuen Gültigkeitsbereich. Innerhalb einer Funktion deklarierte Variablen sind von außerhalb der Funktion nicht sichtbar.

function myFunction() {
  var x = "Auto";   // Function Scope
  let y = "Fahrrad";   // Function Scope
  const z = "Motorrad";   // Function Scope
}
console.log(x);
console.log(y);
console.log(z);

Global Scope

Eine Variable die außerhalb einer Funktion oder eines Blocks deklariert wurde ist GLOBAL.

var x = "Auto";   // Global Scope
let y = "Fahrrad";   // Global Scope
const z = "Motorrad";   // Global Scope

function myFunction() {
return x + y + z;
}
myFunction();

Wie setze ich Schlüsselworter in Variablen ein?

Wenn Sie eine allgemeine Regel wollen deklarieren Sie Variablen immer mit const.
Wenn Sie glauben, dass sich der Wert der Variablen ändern kann, verwenden Sie let.

Beispiel

const x = 2;
x = 3; // Das ist nicht möglich
const x = 4; // Das ist nicht möglich
let y = 2;
y = 3; // Das ist möglich
let y = 4; // Das ist nicht möglich
var z = 2;
var z = "Hallo"; // Das ist möglich
z = "Welt"; // Das ist möglich
a = 5; // Das ist im strict-modus nicht erlaubt

• const-Variablen sind eigentlich Konstanten. Eine erneute Deklaration ist nicht erlaubt. Die Werte-Zuweisung kann nicht geändert werden.
• let-Variablen können nicht neu deklariert werden. Die Werte-Zuweisung kann geändert werden.
• var-Variablen können neu deklariert werden. Die Werte-Zuweisung kann geändert werden.

Vermeiden Sie Variablendeklarationen mit dem Schlüsselwort var!
Definieren Sie niemals Variablen ohne Schlüsselwort!

JavaScript kennt 8 Datentypen

• String
• Number
• Boolean
• Undefined
• Null
• Object
• Symbol
• Bigint

Primitive Werte in Variablen

Einfache Werte werden auch Primitive Values oder Primitives genannt. Primitives sind Datentypen die kein Objekt sind und daher auch keine Methoden oder Eigenschaften haben.

• 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

Der Datentyp object

Der Datentyp object kann folgendes enthalten:

• Ein object
• Ein array
• Ein date(Datum)

Objekte, Funktionen und Arrays wird ein eigenes Kapitel gewidmet!

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

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

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

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

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

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

let x = 0xFF;   // 255
let y = 123e5;  // 12300000

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

let x = 10;
x = null;
console.log(x);

let x;
let y = undefined;
console.log(typeof(x)); //undefined
console.log(typeof(y)); //undefined

let x = "Hallo Welt";
console.log(typeof(x)); //string
console.log(typeof(3 + 2)); //number
console.log(typeof(true)); //boolean

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.

let x = 3;
let y = 4; 
let z = 5;
let 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..

let 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 (+).

let x = "Adi";
let y = "Prinz"
let 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.

let x = 5;

Liste der Vergleichsoperatoren

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

let 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.

let x = 10;
let y = 5;

Liste der Logischen Operatoren

Conditional Operator

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

let y = 100;
let 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.

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

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

let 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
let script = ["HTML", "CSS", "JavaSript", "PHP"];
console.log(0 in script);  // liefert true

// Objects
let 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.

let 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.

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