2    Grundlagen der Programmierung

Variablen, Operatoren, Verzweigungen, Schleifen und Funktionen sind die Basiselemente zum Einstieg in die Programmierung.

In diesem Kapitel lernen Sie die Grundlagen der Programmierung in JavaScript kennen: Variablen, Operatoren, Verzweigungen, Schleifen und Funktionen. Diese Elemente sind die Basis vieler Programmiersprachen und erleichtern Ihnen später auch den Einstieg in andere Bereiche.

2.1    Speicherung von Werten

In diesem Abschnitt geht es um die Speicherung von Zeichenketten, Zahlen und Wahrheitswerten mithilfe von Variablen. Außerdem lernen Sie zwei Dialogfelder für einfache Ein- und Ausgaben kennen.

Variablen haben in JavaScript keinen bestimmten festgelegten Typ. Sie können innerhalb einer Variablen eine Zeichenkette speichern, also einen Text. Später können Sie in derselben Variablen eine Zahl speichern.

2.1.1    Speicherung von Zeichenketten

Innerhalb eines Programmablaufs müssen häufig Texte gespeichert werden. Dies können z. B. Inhalte aus Textfeldern in Formularen sein. Diese gespeicherten Texte werden zu einem späteren Zeitpunkt im Programm wieder benötigt.

Texte bestehen aus einzelnen Zeichen und werden in ihrer Gesamtheit Zeichenketten (englisch: strings) genannt. Zur Speicherung benötigen wir Variablen. Im folgenden Programm sehen Sie einige Beispiele:

...
<body>
   <script>
      // Deklaration, Zuweisung
      var halloText;
      halloText = "Hallo Welt";
      var textEinfach2 = 'Das geht auch so';
   
      // Ausgabe
      document.write("<p>Erster Text: " + halloText + "<br>");
      document.write("Zweiter Text: " + textEinfach2 + "<br>");
   
      // Eine Variable ohne Wert
      var nochEine;
      document.write("Ohne Wert: " + nochEine + "</p>");
   </script>
</body></html>

Listing 2.1    Datei »zeichen.htm«

Zunächst muss ein Speicherplatz geschaffen werden, an dem eine Zeichenkette in einer Variablen gespeichert werden kann. Dieser Platz muss mithilfe eines Namens erreichbar sein. Diesen Vorgang nennt man Deklaration einer Variablen. Zu Beginn des Programms wird eine Variable mit dem Namen halloText deklariert mithilfe des JavaScript-Schlüsselworts var.

Nach der Deklaration folgt eine Zuweisung: Der Variablen halloText wird der Wert "Hallo Welt" zugewiesen.

Anschließend sehen Sie, wie Sie eine Deklaration und eine Zuweisung innerhalb einer Anweisung vereinigen können. Die Variable textEinfach2 wird deklariert, und es wird ihr der Wert 'Das geht auch so' zugewiesen. Der Name der Variablen enthält gemäß den oben genannten Regeln kleine und große Buchstaben, Ziffern und gegebenenfalls das Zeichen _ (Unterstrich), aber keine Ziffer am Anfang.

Ein Zeichenkettenwert muss zwischen doppelten oder zwischen einfachen Anführungsstrichen notiert werden.

Eine Variable, der noch kein Wert per Programmcode zugewiesen wurde, hat den Wert undefined. Die Benutzung einer Variablen, die gar nicht deklariert wurde, z. B. xyz, führt zu einem Fehler, da das Programm den unbekannten Namen xyz nicht zuordnen kann.

Die Werte der Variablen werden mithilfe von document.write() auf dem Bildschirm ausgegeben, siehe Abbildung 2.1.

Ausgabe von Zeichenketten

Abbildung 2.1    Ausgabe von Zeichenketten

Eine Ausgabe kann sich aus mehreren Teilen zusammensetzen:

Diese Teile werden mithilfe des Operators + zu einer längeren Zeichenkette verbunden.

2.1.2    Namensregeln

Einige Regeln für den Namen einer Variablen:

2.1.3    Ein- und Ausgabe von Zeichenketten

In diesem Abschnitt lernen Sie zwei nützliche Methoden kennen:

Beide Methoden arbeiten mit Zeichenketten. Außerdem führen beide Methoden dazu, dass das Programm in seinem Verlauf anhält. Erst nach einer Eingabe bzw. nach einer Bestätigung der Meldung läuft das Programm weiter. Auf diese Weise haben Sie die Möglichkeit, den Benutzer zu einer Eingabe oder zum Lesen einer Ausgabe zu zwingen.

Ein Beispiel:

...
<body>
   <script>
      var ihrName = prompt("Bitte Ihren Namen\neingeben:", "Peter");
      alert("Sie haben eingegeben:\n" + ihrName + "\nVielen Dank");
   </script>
</body></html>

Listing 2.2    Datei »zeichen_ein_aus.htm«

Sobald Sie das Programm starten, erscheint eine Eingabeaufforderung wie in Abbildung 2.2.

Eingabe mit »prompt()«

Abbildung 2.2    Eingabe mit »prompt()«

Die Methode prompt() erzeugt die Eingabeaufforderung mit dem Text, der aus der ersten Zeichenkette stammt. Das Steuerzeichen \n (Backslash und n) erzeugt einen Zeilenumbruch innerhalb des Dialogfelds. Der Buchstabe n steht für new line.

Sie können bei prompt() eine zweite Zeichenkette angeben, durch Komma getrennt. Diese enthält eine mögliche Vorgabe für das Eingabefeld, hier ist dies der Text Peter. Falls Sie die Vorgabe weglassen, bleibt in einigen Browsern das Eingabefeld leer, in anderen Browsern steht hier der Begriff undefined. Um dies zu vereinheitlichen, können Sie als Vorgabe eine leere Zeichenkette angeben, also z. B. wie folgt:

ihrName = prompt("Ihr Name:", "");

Nach Betätigung der Schaltfläche OK wird der aktuelle Inhalt des Eingabefelds zurückgeliefert und in der Variablen ihrName gespeichert. Falls Sie die Schaltfläche Abbrechen betätigen, wird der Wert null gespeichert. In Abschnitt 2.3.4, »Eingabe von Zahlen prüfen«, werden wir ermitteln, ob der Benutzer OK oder Abbrechen gedrückt hat.

Falls Sie nun die Eingabe zu Hans-Peter ergänzen, erscheint dank alert() eine Meldung wie in Abbildung 2.3.

Ausgabe mit »alert()«

Abbildung 2.3    Ausgabe mit »alert()«

Sie können das Steuerzeichen \n auch bei der Methode alert() zur Erzeugung eines Zeilenumbruchs nutzen. Die Ausgabe wird mithilfe des Operators + zu einer längeren Zeichenkette verbunden.

Die Methode alert() ist sehr nützlich für eine Fehlersuche. Sie können sich an mehreren Stellen Ihres Programms mithilfe von alert() Werte von Variablen ausgeben lassen. Falls diese nicht mit den erwarteten Werten übereinstimmen, können Sie den Ort der Fehlerursache bereits eingrenzen. Mehr zu diesem Thema erfahren Sie in Abschnitt 2.5, »Fehler finden, Fehler vermeiden«.

Sowohl prompt() als auch alert() sind Methoden des window-Objekts. Ähnlich wie die Methode document.write() müsste man sie also eigentlich mithilfe von window. prompt() und window.alert() aufrufen. Dies ist jedoch speziell beim window-Objekt nur selten notwendig. Den Begriff Objekt erläutere ich in Kapitel 3 in aller Ausführlichkeit.

2.1.4    Speichern von Zahlen

Zahlen werden z. B. für Berechnungen benötigt und ebenfalls in Variablen gespeichert. Die Werte für diese Variablen können sich aus Zuweisungen des Entwicklers und Eingaben des Benutzers ergeben, wie bei Zeichenketten. Es gilt, einige Besonderheiten zu beachten, wie das folgende Beispiel zeigt:

...
<body>
   <script>
      // Deklaration, Zuweisung
      var zahl, nochEineZahl;
      zahl = 42;
      nochEineZahl = zahl + 30.8;
      var kleineZahl = -3.7e-3;
      var grosseZahl = 5.2e6;

      // Ausgabe
      document.write("<p>Erste Zahl: " + zahl + "<br>");
      document.write("Zweite Zahl: " + nochEineZahl + "<br>");
      document.write("Unerwartet: " + nochEineZahl + 25 + "<br>");
      document.write("Dritte Zahl: " + (nochEineZahl + 25) + "<br>");
      document.write("Eine kleine Zahl: " + kleineZahl + "<br>");
      document.write("Eine große Zahl: " + grosseZahl + "</p>");
   </script>
</body></html>

Listing 2.3    Datei »zahlen.htm«

Zunächst werden zwei Variablen auf einmal deklariert, durch Komma voneinander getrennt. Der ersten Variablen wird ein Zahlenwert zugewiesen. Es folgt eine Berechnung: Zunächst wird der aktuelle Wert der Variablen zahl ermittelt, dazu wird der konstante Wert 30.8 addiert. Das Ergebnis wird der zweiten Variablen zugewiesen.

Beachten Sie, dass die Nachkommastellen der Zahl 30.8 nach englischer Schreibweise mit einem Punkt abgetrennt werden. Auf die gleiche Art und Weise notiere ich die Zahlen auch in diesen Erläuterungen, so dass Sie kein Problem beim Umschalten von der deutschen auf die englische Schreibweise haben, wenn Sie ein Programm schreiben oder bedienen.

Der Operator + steht hier zwischen zwei Zahlen und hat daher eine andere Wirkung als zwischen zwei Texten: Zwei Zahlen werden addiert; zwei Texte werden zusammengefügt. Dies werden Sie im weiteren Verlauf des Programms noch einmal sehen.

Im Programm folgen zwei Variablen, denen zwei Werte im sogenannten Exponentialformat zugewiesen werden. Es handelt sich dabei um die Werte –3.7 mal 10 hoch –3 (= 0.0037) und 5.2 mal 10 hoch 6 (= 5.2 Millionen). Dieses Format ist besonders für sehr kleine und sehr große Zahlen geeignet, da es die fehlerträchtige Eingabe vieler Nullen erspart.

Es folgt die Ausgabe, siehe Abbildung 2.4.

Ausgabe von Zahlen

Abbildung 2.4    Ausgabe von Zahlen

Betrachten wir das, was in den Klammern von document.write() steht:

In der ersten Zeile steht zu Beginn eine Zeichenkette. Diese wird mithilfe des Operators + mit einer Zahl verbunden. Dabei erfolgt eine automatische Typumwandlung. Aus der Zahl 42 wird die Zeichenkette "42". Es ergibt sich insgesamt eine Zeichenkette für die Ausgabe. Ebenso verhält es sich in der zweiten Zeile.

Diese Vorgehensweise führt in der dritten Zeile zu einer unerwarteten Ausgabe. Die Zeichenkette "Unerwartet: 72.8" wird mit der Zahl 25 verbunden. Daraus ergibt sich die Zeichenkette "Unerwartet: 72.825". Falls wir die beiden Zahlen zunächst addieren und dann erst ausgeben möchten, müssen wir Klammern setzen, wie in der nächsten Zeile geschehen. Nur dann wird das richtige Additionsergebnis, 97.8, angezeigt.

Als Letztes werden noch die kleine und die große Zahl ausgegeben.

2.1.5    Speichern von Wahrheitswerten

In einer Variablen können neben Zeichenketten und Zahlen auch Wahrheitswerte (boolesche Werte) gespeichert werden. Es gibt zwei Wahrheitswerte: true (deutsch: wahr) und false (deutsch: falsch, unwahr).

Auf diese Weise können Sie z. B. den Zustand eines Kontrollkästchens (englisch: checkbox) in einem Formular speichern. Falls die CheckBox markiert ist, dann hat eine bestimmte Eigenschaft der CheckBox (siehe Abschnitt 4.2.3) den Wert true, ansonsten den Wert false.

So wird eine Information gespeichert, für die es nur zwei Zustände gibt: Ein oder Aus, 0 oder 1, zutreffend oder nicht zutreffend. Ein Beispiel:

...
<body>
   <script>
      // Deklaration, Zuweisung
      var gespeichert = true;
      var fertig = false;
   
      // Ausgabe
      document.write("<p>Gespeichert: " + gespeichert + "<br>");
      document.write("Fertig: " + fertig + "</p>");
   </script>
</body></html>

Listing 2.4    Datei »bool.htm«

Zwei Variablen werden deklariert. Gleichzeitig wird ihnen jeweils ein Wert zugewiesen. Anschließend werden sie ausgegeben, siehe Abbildung 2.5.

Ausgabe von Wahrheitswerten

Abbildung 2.5    Ausgabe von Wahrheitswerten

2.1.6    Konstanten

Konstanten dienen wie Variablen zur Speicherung von Werten. Allerdings kann der Wert einer Konstante nicht verändert werden. Sie werden genutzt, weil man sich den Namen einer Konstanten häufig leichter merken kann als einen bestimmten Wert. Konstanten werden mithilfe des Schlüsselworts const erzeugt und erhalten unmittelbar ihren Wert. Eine spätere Wertzuweisung ist nicht möglich. Ein Beispiel mit zwei Konstanten sehen Sie in Abbildung 2.6. Zunächst das Programm:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Konstanten</title>
</head>
<body><p>
   <script>
      const pi = 3.1415926;
      const farbe = "Rot";
      alert("Meine Farbe: " + farbe + "\n" + "2 mal Pi = " + (2*pi));
      // farbe = "Gelb";
   </script></p>
</body></html>

Listing 2.5    Datei »konstante.htm«

Nutzung von zwei Konstanten

Abbildung 2.6    Nutzung von zwei Konstanten