JavaScript Grundlagen: Variablen, Datentypen und Kontrollstrukturen

Einführung in JavaScript

JavaScript wurde entwickelt, um Webseiten interaktiver zu gestalten. Es ist die mit Abstand am weitesten verbreitete Skriptsprache, da sie relativ einfach zu erlernen ist. JavaScript ist keine vollwertige Programmiersprache im Sinne von C, C++ oder Delphi, sondern eine Skript- oder dokumentenorientierte Sprache, ähnlich den Makrosprachen in Textverarbeitungs- und Tabellenkalkulationsprogrammen. Sie können ein JavaScript-Programm nicht außerhalb eines Browsers ausführen.

JavaScript ist eine Skriptsprache, die in eine HTML-Seite eingebettet wird. Als interpretierte Sprache werden die Anweisungen vom Browser analysiert und zur Laufzeit verarbeitet.

Wichtige Eigenschaften von JavaScript

Groß- und Kleinschreibung (Case Sensitivity)

Es ist wichtig zu beachten, dass JavaScript groß- und kleinschreibungsempfindlich ist. Document.write ist nicht dasselbe wie document.write. Die zweite Form (mit kleinem 'd') ist korrekt, während die erste einen Syntaxfehler verursachen würde. Achten Sie stets auf die korrekte Groß- und Kleinschreibung, um Syntaxfehler zu vermeiden. Beachten Sie, dass Funktionsnamen oft großgeschrieben werden.

Variablen und Datentypen

Was ist eine Variable?

Eine Variable ist ein Speicherort, der einen Wert enthält. Sie besitzt einen Namen und gehört zu einem bestimmten Typ (numerisch, String usw.).

Typen von Variablenwerten

Eine Variable kann folgende Werte speichern:

• Ganzzahlen: (z. B. 100, 260)
• Gleitkommazahlen (Realwerte): (z. B. 1.24, 2.90, 5.00)
• Strings (Zeichenketten): (z. B. "John", "Shopping", "List")
• Logische Werte (Booleans): (true, false)

Es gibt noch weitere Variablentypen, die später behandelt werden.

Variablennamen und Deklaration

Variablen sind Namen, die wir verwenden, um Speicherorte für Informationen zu bezeichnen. Ein Variablenname in JavaScript muss mit einem Buchstaben oder einem Unterstrich (_) beginnen. Ziffern sind erlaubt, dürfen aber nicht am Anfang stehen. Ein Variablenname darf kein Schlüsselwort der Sprache sein.

Eine Variable wird mit dem Schlüsselwort var definiert:

• Einzeldeklaration: var Tag;
• Mehrfachdeklaration: var Tag, Monat, Jahr;
• Deklaration und Initialisierung: var alter = 20;
• Initialisierung in zwei Schritten: var alter; alter = 20;

Wahl des Variablennamens (Best Practices)

Wählen Sie stets repräsentative Variablennamen. Im obigen Beispiel sind Tag, Monat und Jahr aussagekräftig genug, um den Inhalt zu verstehen. Eine schlechte Wahl wären nicht-repräsentative Namen wie a, b oder c. Auch wenn Sie sich beim Programmieren noch an die Bedeutung erinnern, kann dies später zu Verwirrung führen.

Ausgabe von Variableninhalten

Um den Inhalt einer Variablen auf einer Seite auszugeben, verwenden Sie die Funktion write, die zum document-Objekt gehört. Denken Sie daran, dass JavaScript Case Sensitive ist. Wenn Sie document.write(name); eingeben, ist dies korrekt. Wenn Sie jedoch Document.write(name); eingeben, führt dies zu einem Fehler, da das Objekt Document (mit großem 'D') und die Funktion Schreiben nicht existieren. Dies ist ein sehr häufiger Fehler für Anfänger.

Dateneingabe per Tastatur

Die prompt-Funktion

Für die Eingabe von Daten über die Tastatur verwenden wir die Funktion prompt. Jedes Mal, wenn wir Daten mit dieser Funktion erfassen müssen, öffnet sich ein Fenster, in das der Wert eingegeben werden kann. Es gibt komplexere Möglichkeiten zur Dateneingabe in HTML-Seiten, aber für das Erlernen der Grundlagen von JavaScript ist prompt die praktischste Funktion.

Syntax der prompt-Funktion

<variable zur Speicherung des Werts> = prompt(<Anzuzeigende Nachricht>, <Anfangswert im Fenster>);

Die prompt-Funktion hat zwei Parameter: die anzuzeigende Nachricht und den optionalen Anfangswert.

Sequenzielle Programmstrukturen

Eine Programmstruktur wird als sequenziell bezeichnet, wenn ein Problem nur Eingaben, Operationen und Ausgaben beinhaltet, die nacheinander ausgeführt werden. Ein Problem, bei dem beispielsweise der Name und das Alter einer Person abgefragt werden, folgt einer sequenziellen Struktur.

Umgang mit numerischen Eingaben und dem Plus-Operator

Wenn wir den Operator + verwenden, um numerische Werte zu addieren, die über die Tastatur eingegeben wurden, müssen wir die Funktion parseInt() aufrufen und ihr die Variablen als Parameter übergeben. Dies ist notwendig, damit der Operator die Variablen als ganze Zahlen addiert und nicht als Strings verkettet.

Wenn wir beispielsweise 1 + 1 ohne die Verwendung von parseInt addieren, führt dies zu 11 anstelle von 2, da der Operator + die beiden Zeichenfolgen verkettet. Bei der Verwendung des Operators * für die Multiplikation ist die Verwendung von parseInt nicht zwingend erforderlich (sie ist nur beim Operator + notwendig).

Da JavaScript nicht explizit vorschreibt, welchen Typ eine Variable speichert, ist besondere Vorsicht geboten, wenn wir mit ihrem Inhalt operieren. In einem sequenziellen Problem geben wir zwei Werte ein, führen zwei Operationen durch und zeigen schließlich die Ergebnisse an.

Bedingte Strukturen (Kontrollstrukturen)

Einfache bedingte Strukturen

Nicht alle Probleme können mit sequenziellen Strukturen gelöst werden. Wenn eine Entscheidung getroffen werden muss, kommen bedingte Strukturen zum Einsatz. Im Alltag stehen wir ständig vor Entscheidungen: „Wähle ich Karriere A oder B?“, „Gehe ich Weg A oder Weg B zur Arbeit?“.

In einer einfachen bedingten Struktur gibt es Aktivitäten für den wahren Pfad, aber keine Aktivität für den falschen Pfad. Auf dem wahren Pfad können mehrere Operationen, Ein- und Ausgaben enthalten sein, einschließlich weiterer verschachtelter bedingter Strukturen.

Die if-Anweisung in JavaScript

Die Bedingung muss in Klammern eingeschlossen werden. Wenn die Bedingung erfüllt ist (true), werden alle Anweisungen ausgeführt, die in geschweiften Klammern nach dem if eingeschlossen sind.

Vergleichsoperatoren

Um Bedingungen in einer if-Anweisung zu prüfen, verwenden wir einen der folgenden Vergleichsoperatoren:

• > (größer als)
• >= (größer oder gleich)
• < (kleiner als)
• <= (kleiner oder gleich)
• != (ungleich)
• == (gleich)

Die Bedingung sollte immer eine Variable, einen relationalen Operator und einen festen Wert oder eine andere Variable beinhalten.

String-Verkettung mit dem Plus-Operator

Wir können den Operator + auch zur Verkettung von Strings verwenden, um die Ausgabe zu vereinfachen:

document.write(name + " ist mit einer " + Anmerkung + " genehmigt.");

Dies ist kürzer, als die Ausgabe in mehreren Schritten durchzuführen:

document.write(name); document.write(' ist zugelassen mit '); document.write(Anmerkung);

Zusammengesetzte bedingte Strukturen (if-else)

Bei einer zusammengesetzten bedingten Struktur haben wir die Möglichkeit, entweder die eine oder die andere Aktivität auszuführen. Das heißt, wir haben Aktivitäten sowohl für den wahren als auch für den falschen Zustand. Wichtig ist, dass niemals die Aktivitäten beider Zweige ausgeführt werden.

In einer bedingten Struktur können Eingaben, Ausgaben und Operationen sowohl im wahren als auch im falschen Zweig durchgeführt werden. Da die prompt-Funktion einen String liefert, müssen wir parseInt verwenden, wenn wir numerisch feststellen wollen, welcher der beiden Werte größer ist.

In JavaScript kann sich der Datentyp, den eine Variable speichert, während der Programmausführung ändern. Wir müssen vorsichtig sein, wenn wir beispielsweise fragen, welcher von zwei Strings größer ist (lexikalischer Vergleich).

Syntax der zusammengesetzten bedingten Struktur

Die zusammengesetzte bedingte Struktur besteht aus folgendem Code:

if (<Bedingung>) {
    <Anweisung(en) für WAHR>
} else {
    <Anweisung(en) für FALSCH>
}

Sie ist identisch mit der einfachen bedingten Struktur, wobei das Schlüsselwort else und der nachfolgende Block mit einer oder mehreren Anweisungen hinzugefügt werden. Wenn die Bedingung erfüllt ist, wird der if-Block ausgeführt. Wenn die Bedingung falsch ist, wird der else-Block ausgeführt.

Verschachtelte bedingte Strukturen

Eine bedingte Struktur wird als verschachtelt bezeichnet, wenn im Zweig des wahren oder falschen Pfades eine weitere bedingte Struktur enthalten ist.

Beispiel für Verschachtelung

Angenommen, Sie möchten ein Programm erstellen, das die Noten eines Studenten abfragt, den Durchschnitt berechnet und eine der folgenden Meldungen ausgibt:

• Wenn der Durchschnitt >= 7 ist: Anzeige "Förderung".
• Wenn der Durchschnitt >= 4 und < 7 ist: Anzeige "Medium".
• Wenn der Durchschnitt < 4 ist: Anzeige "Nicht bestanden".

Kommentare in JavaScript

Kommentare dienen dazu, den Code zu erläutern und werden vom Interpreter ignoriert.

Einzeilige Kommentare

Für einzeilige Kommentare verwenden Sie zwei vorangestellte Schrägstriche:

// Dies ist ein Kommentar, z. B. zur Umwandlung eines Strings in eine Ganzzahl.

Mehrzeilige Kommentare

Wenn Sie mehrere Zeilen kommentieren möchten, verwenden Sie die Blockkommentar-Syntax:

/* 
Linie 1 des Kommentars.
Linie 2 des Kommentars.
*/

Der Block wird mit den Zeichen /* und */ umschlossen.