JavaScript-Variablen


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Variablen sind Container zum Speichern von Daten

JavaScript-Variablen können auf vier Arten deklariert werden:

  • Automatisch

  • Verwendung von var

  • Mit let

  • Verwenden von const

In diesem ersten Beispiel x, y und z sind nicht deklarierte Variablen.

Sie werden bei der ersten Verwendung automatisch deklariert:

Beispiel

x = 5;
y = 6;
z = x + y;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>

<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>

<p id="demo"></p>

<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>


Notiz

Es gilt als gute Programmierpraxis, Variablen vor der Verwendung immer zu deklarieren.

Anhand der Beispiele können Sie erraten:

  • x speichert den Wert 5

  • y speichert den Wert 6

  • z speichert den Wert 11

Beispiel mit var

var x = 5;
var y = 6;
var z = x + y;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>

<p>In this example, x, y, and z are variables.</p>

<p id="demo"></p>

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>


Notiz

Das Schlüsselwort var wurde im gesamten JavaScript-Code von 1995 bis 2015 verwendet.

Die Schlüsselwörter let und const wurden 2015 zu JavaScript hinzugefügt.

Das Schlüsselwort var sollte nur in Code verwendet werden, der für ältere Browser geschrieben wurde.

Beispiel mit let

let x = 5;
let y = 6;
let z = x + y;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>

<p>In this example, x, y, and z are variables.</p>

<p id="demo"></p>

<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>


Beispiel mit const

const x = 5;
const y = 6;
const z = x + y;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>

<p>In this example, x, y, and z are variables.</p>

<p id="demo"></p>

<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>

</body>
</html>


Gemischtes Beispiel

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>In this example, price1, price2, and total are variables.</p>

<p id="demo"></p>

<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>

</body>
</html>


Die beiden Variablen price1 und price2 werden mit dem Schlüsselwort const deklariert.

Dies sind konstante Werte und können nicht geändert werden.

Die Variable total wird mit dem Schlüsselwort let deklariert.

Der Wert total kann geändert werden.

Wann sollte man var, let oder const verwenden?

1. Deklarieren Sie immer Variablen

2. Verwenden Sie immer const, wenn der Wert nicht geändert werden soll

3. Verwenden Sie immer const, wenn der Typ nicht geändert werden soll (Arrays und Objekte)

4. Verwenden Sie let nur, wenn Sie const nicht verwenden können

5. Verwenden Sie var nur, wenn Sie alte Browser unterstützen MÜSSEN.


Genau wie Algebra

Genau wie in der Algebra enthalten Variablen Werte:

let x = 5;
let y = 6;

Genau wie in der Algebra werden Variablen in Ausdrücken verwendet:

let z = x + y;

Anhand des obigen Beispiels können Sie erraten, dass die Gesamtsumme 11 beträgt.

Notiz

Variablen sind Container zum Speichern von Werten.



JavaScript-Identifikatoren

Alle JavaScript-Variablen müssen sein identifiziert mit einzigartigen Namen.

Diese eindeutigen Namen werden Identifikatoren genannt.

Bezeichner können Kurznamen (wie x und y) oder aussagekräftigere Namen (Alter, Summe, Gesamtvolumen) sein.

Die allgemeinen Regeln zum Erstellen von Namen für Variablen (eindeutige Bezeichner) sind:

  • Namen können Buchstaben, Ziffern, Unterstriche und Dollarzeichen enthalten.

  • Namen müssen mit einem Buchstaben beginnen.

  • Namen können auch mit $und _ beginnen (wir werden sie in diesem Tutorial jedoch nicht verwenden).

  • Bei Namen muss die Groß-/Kleinschreibung beachtet werden (y und Y sind unterschiedliche Variablen).

  • Reservierte Wörter (wie JavaScript-Schlüsselwörter) können nicht als Namen verwendet werden.

Notiz

Bei JavaScript-Bezeichnern muss die Groß-/Kleinschreibung beachtet werden.


Der Zuweisungsoperator

In JavaScript ist das Gleichheitszeichen (=) ein „Zuweisungs“-Operator, kein „gleich“-Operator.

Das ist etwas anderes als Algebra. Folgendes ergibt keinen Sinn Algebra:

x = x + 5 

In JavaScript macht es jedoch durchaus Sinn: Es weist den Wert x + 5 zu X.

(Es berechnet den Wert von x + 5 und gibt das Ergebnis in x ein. Der Wert von x wird um 5 erhöht.)

Notiz

Der „gleich“-Operator wird in JavaScript wie folgt geschrieben: ==.


JavaScript-Datentypen

JavaScript-Variablen können Zahlen wie 100 und Textwerte wie „John“ enthalten Damhirschkuh".

In der Programmierung werden Textwerte als Textzeichenfolgen bezeichnet.

JavaScript kann viele Arten von Daten verarbeiten, aber denken Sie zunächst nur an Zahlen und Zeichenfolgen.

Zeichenfolgen werden in doppelte oder einfache Anführungszeichen geschrieben. Zahlen werden geschrieben ohne Anführungszeichen.

Wenn Sie eine Zahl in Anführungszeichen setzen, wird sie als Textzeichenfolge behandelt.

Beispiel

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>

<p id="demo"></p>

<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>

</body>
</html>



Deklarieren einer JavaScript-Variable

Das Erstellen einer Variablen in JavaScript wird als „Deklarieren“ einer Variablen bezeichnet.

Sie deklarieren eine JavaScript-Variable mit dem Schlüsselwort var oder dem Schlüsselwort let:

var carName;
let carName;

Nach der Deklaration hat die Variable keinen Wert (technisch gesehen ist sie undefiniert).

Um der Variablen einen Wert zuzuweisen, verwenden Sie das Gleichheitszeichen:

carName = "Volvo";

Sie können der Variablen auch einen Wert zuweisen, wenn Sie sie deklarieren:

let carName = "Volvo";

Im folgenden Beispiel erstellen wir eine Variable mit dem Namen carName und weisen den Wert zu „Volvo“ dazu.

Dann „geben“ wir den Wert in einem HTML-Absatz mit id="demo" aus:

Beispiel

<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName; 
</script>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>Create a variable, assign a value to it, and display it:</p>

<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Notiz

Es ist eine gute Programmierpraxis, alle Variablen am Anfang eines Skripts zu deklarieren.


Eine Aussage, viele Variablen

Sie können viele Variablen in einer Anweisung deklarieren.

Beginnen Sie mit der Aussage mit let und trennen Sie die Variablen durch Komma:

Beispiel

let person = "John Doe", carName = "Volvo", price = 200;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>

<p>You can declare many variables in one statement.</p>

<p id="demo"></p>

<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>


Eine Deklaration kann sich über mehrere Zeilen erstrecken:

Beispiel

let person = "John Doe",
carName = "Volvo",
price = 200;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>You can declare many variables in one statement.</p>

<p id="demo"></p>

<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>



Wert=undefiniert

In Computerprogrammen werden Variablen oft ohne Wert deklariert. Der Wert kann etwas sein, das berechnet werden muss, oder etwas, das bereitgestellt wird später, wie Benutzereingaben.

Eine ohne Wert deklarierte Variable hat den Wert undefiniert.

Die Variable carName hat nach der Ausführung dieser Anweisung den Wert undefiniert:

Beispiel

let carName;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>A variable without a value has the value of:</p>
<p id="demo"></p>

<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>



Neudeklaration von JavaScript-Variablen

Wenn Sie eine mit var deklarierte JavaScript-Variable erneut deklarieren, verliert sie ihren Wert nicht.

Die Variable carName wird nach der Ausführung dieser Anweisungen weiterhin den Wert „Volvo“ haben:

Beispiel

var carName = "Volvo";
var carName;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>If you re-declare a JavaScript variable, it will not lose its value.</p>

<p id="demo"></p>

<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>


Notiz

Sie können eine mit let oder const deklarierte Variable nicht erneut deklarieren.

Das wird nicht funktionieren:

let carName = "Volvo";
let carName;

JavaScript-Arithmetik

Wie in der Algebra können Sie mit JavaScript-Variablen rechnen Operatoren wie = und +:

Beispiel

let x = 5 + 2 + 3;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>

<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Sie können auch Zeichenfolgen hinzufügen, die Zeichenfolgen werden jedoch verkettet:

Beispiel

let x = "John" + " " + "Doe";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>

<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Versuchen Sie auch Folgendes:

Beispiel

let x = "5" + 2 + 3;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>

<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Notiz

Wenn Sie eine Zahl in Anführungszeichen setzen, werden die restlichen Zahlen als Zeichenfolgen behandelt und verkettet.

Versuchen Sie nun Folgendes:

Beispiel

let x = 2 + 3 + "5";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>

<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

JavaScript-Dollarzeichen $

Da JavaScript ein Dollarzeichen als Buchstaben behandelt, sind Bezeichner, die $enthalten, gültige Variablennamen:

Beispiel

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The dollar sign is treated as a letter in JavaScript names.</p>

<p id="demo"></p>

<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>

</body>
</html>

Die Verwendung des Dollarzeichens ist in JavaScript nicht sehr verbreitet. aber professionelle Programmierer verwenden es oft als Alias für die Hauptfunktion in einer JavaScript-Bibliothek.

In der JavaScript-Bibliothek jQuery beispielsweise die Hauptfunktion $ wird zur Auswahl von HTML-Elementen verwendet. In jQuery bedeutet $ ("p"); „alle p Elemente auswählen“.


JavaScript-Unterstrich (_)

Da JavaScript den Unterstrich als Buchstaben behandelt, sind Bezeichner, die _ enthalten, gültige Variablennamen:

Beispiel

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Variables</h1>

<p>The underscore is treated as a letter in JavaScript names.</p>

<p id="demo"></p>

<script>
let _x = 2;
let _100 = 5;

document.getElementById("demo").innerHTML = _x + _100;
</script>

</body>
</html>

Die Verwendung des Unterstrichs ist in JavaScript nicht sehr verbreitet. Unter professionellen Programmierern ist es jedoch üblich, es als Alias für zu verwenden „private (versteckte)“ Variablen.